client_LemonBeans/subPackages/equipment/condition.vue

<template>
	<view class="index-page">
		<navigation title="设备运行情况"></navigation>
		<view class="water-chart">
			<view class="water-item" @click="toDetail(1)">
				<canvas class="chart" canvas-id="boll" id="boll"></canvas>
				<view class="num">开机数量</view>
			</view>
			<view class="water-item" @click="toDetail(2)">
				<canvas class="chart1" canvas-id="boll1" id="boll1"></canvas>
				<view class="num">停机数量</view>
			</view>
			<view class="water-item" @click="toDetail(3)">
				<canvas class="chart2" canvas-id="boll2" id="boll2"></canvas>
				<view class="num">待机数量</view>
			</view>
		</view>
		<view class="chart-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
		<view class="chart-box">
			<qiun-data-charts type="mix" :opts="optsMix" :chartData="chartDataMix" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bollStep: null,
				bollTimeR: null,
				bollStep1: null,
				bollTimeR1: null,
				bollStep2: null,
				bollTimeR2: null,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					legend: {
						position: 'top'
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							tofix: 2,
						}]
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				},
				chartDataMix: {},
				optsMix: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {
						position: 'top'
					},
					xAxis: {
						disableGrid: true,
						title: ""
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true,
						data: [{
								position: "left",
								title: "用电量"
							},
							{
								position: "right",
								min: 0,
								max: 200,
								title: "产能",
								textAlign: "left"
							},
						]
					},
					extra: {
						mix: {
							column: {
								width: 20
							}
						}
					}
				}
			}
		},
		onLoad() {
			this.getServerData()
			this.getServerDataMix()
		},
		beforeDestroy() {
			// #ifdef H5
			cancelAnimationFrame(this.bollTimeR);
			cancelAnimationFrame(this.bollTimeR1);
			cancelAnimationFrame(this.bollTimeR2);
			// #endif

			// #ifdef APP-VUE || MP-WEIXIN
			clearInterval(this.bollTimeR);
			clearInterval(this.bollTimeR1);
			clearInterval(this.bollTimeR2);
			// #endif
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.chart').boundingClientRect(data => {
				this.drawBollWave("boll", data);
			}).exec();
			query.select('.chart1').boundingClientRect(data => {
				this.drawBollWave1("boll1", data);
			}).exec();
			query.select('.chart2').boundingClientRect(data => {
				this.drawBollWave2("boll2", data);
			}).exec();
		},
		methods: {
			toDetail(type) {
				uni.navigateTo({
					url: '/subPackages/equipment/run?id=' + 1 + '&type=' + type
				})
			},
			// 折线图
			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);
			},
			// 混合图
			getServerDataMix() {
				setTimeout(() => {
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "产能",
								index: 1,
								type: "column",
								data: [40, 30, 55, 110, 24, 58]
							},
							{
								name: "用电量",
								type: "line",
								color: "#2fc25b",
								data: [120, 140, 105, 170, 95, 160]
							},
						]
					};
					this.chartDataMix = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			toFixedNumber(n = 2, val) { //去小数点后2位
				if (typeof val == "number") {
					return val.toFixed(n) * 1
				}
			},
			//绘制原型水球
			drawBollWave(ids, elem) {
				let ctx = uni.createCanvasContext(ids),
					w = elem.width,
					h = elem.height,
					grd = null, //渐变色grd
					angle = 0,
					x = 0,
					y = 0,
					y2 = 0,
					part = 0; //part声波初始位置
				let grid = {
					top: 5 * h / 100, //水球距离顶的 15%
				};
				let bollArg = {
					R: h / 2 - grid.top, //圆半径
					O: {
						x: w / 2,
						y: h / 2
					}, //圆心坐标 x, y
					A: 2, //振幅
					vs: 80, //声波运动速度 越大值 越慢
					lineWidth: 2,
					waveOpacity: 1, //水波的透明度
					waveHeight: 60, // 80百分之80%（占整个水球的百分比高度）
					angleStep: 5, //声波上圆点间隔的距离
					waveLen: 60, //波长
					waveStyle: {
						fillColor: {
							start: "#34EDA3",
							end: "#2fc25b"
						},
						strokeColor: "#212C67"
					}, //波浪颜色样式
					oStyle: {
						fillColor: "#f8f8f8",
						strokeColor: "#34EDA3"
					}, //圆的颜色样式
					textStyle: {
						fillColor: "#212C67",
						fontSize: 26
					},
				}
				let drawBoll = () => {
					ctx.clearRect(0, 0, w, h);
					ctx.save();
					ctx.beginPath();
					ctx.setLineWidth(bollArg.lineWidth);
					ctx.setStrokeStyle(bollArg.oStyle.strokeColor);
					ctx.setFillStyle(bollArg.oStyle.fillColor);
					ctx.arc(bollArg.O.x, bollArg.O.y, bollArg.R, 0, 2 * Math.PI);
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
					ctx.clip();
					grd = ctx.createLinearGradient(0, 0, bollArg.O.y - bollArg.R, bollArg.O.y + bollArg.R);
					grd.addColorStop(0, bollArg.waveStyle.fillColor.start);
					grd.addColorStop(1, bollArg.waveStyle.fillColor.end);
					ctx.globalAlpha = bollArg.waveOpacity;
					ctx.beginPath();
					ctx.setStrokeStyle(bollArg.waveStyle.strokeColor);
					ctx.setFillStyle(grd);
					ctx.moveTo(bollArg.O.x - bollArg.R, bollArg.O.y + bollArg.R + bollArg.A);
					for (angle = bollArg.O.x - bollArg.R; angle < bollArg.O.x + bollArg.R + bollArg.angleStep; angle +=
						bollArg.angleStep) {
						y = bollArg.A * Math.sin(this.bollStep / bollArg.vs + angle / bollArg.waveLen * Math.PI * 2);
						// y2 = bollArg.A * Math.cos(this.bollStep / bollArg.vs + angle / bollArg.waveLen * Math.PI * 2);
						x = angle;
						ctx.lineTo(x, (y + bollArg.R * 2 + bollArg.A + grid.top) - part * 0.01 * (bollArg.R * 2 *
							bollArg.waveHeight / 100));
						// ctx.lineTo(x, (y2 + bollArg.R * 2 + bollArg.A + grid.top) - part * 0.01 * (bollArg.R * 2 *
						// 		bollArg.waveHeight / 100));
					}
					ctx.lineTo(bollArg.O.x + bollArg.R, bollArg.O.y + bollArg.R + bollArg.A);
					ctx.fill();
					ctx.restore();

					ctx.beginPath();
					ctx.setTextAlign("center");
					ctx.setTextBaseline("middle");
					ctx.setFillStyle(bollArg.textStyle.fillColor);
					ctx.setFontSize(bollArg.textStyle.fontSize);

					ctx.fillText(this.toFixedNumber(2, bollArg.waveHeight * 0.01 * part) + "%", bollArg.O.x, bollArg.O
						.y);
					ctx.fill();
					ctx.draw();

					part++;
					if (part >= 100) {
						part = 100;
					}

					// #ifdef H5
					this.bollStep++;
					if (this.bollStep > 2012) {
						this.bollStep = 0;
					}
					this.bollTimeR = requestAnimationFrame(drawBoll);
					// #endif
				}
				// #ifdef H5
				drawBoll();
				// #endif
				// #ifdef APP-VUE || MP-WEIXIN
				this.bollTimeR = setInterval(() => {
					drawBoll();
					this.bollStep++;
					if (this.bollStep > 2021) {
						this.bollStep = 0;
					}
				}, 1000 / 65);
				// #endif
			},
			drawBollWave1(ids, elem) {
				let ctx = uni.createCanvasContext(ids),
					w = elem.width,
					h = elem.height,
					grd = null, //渐变色grd
					angle = 0,
					x = 0,
					y = 0,
					y2 = 0,
					part = 0; //part声波初始位置
				let grid = {
					top: 5 * h / 100, //水球距离顶的 15%
				};
				let bollArg = {
					R: h / 2 - grid.top, //圆半径
					O: {
						x: w / 2,
						y: h / 2
					}, //圆心坐标 x, y
					A: 2, //振幅
					vs: 80, //声波运动速度 越大值 越慢
					lineWidth: 2,
					waveOpacity: 1, //水波的透明度
					waveHeight: 80, // 80百分之80%（占整个水球的百分比高度）
					angleStep: 5, //声波上圆点间隔的距离
					waveLen: 80, //波长
					waveStyle: {
						fillColor: {
							start: "#F0737E",
							end: "#FE5455"
						},
						strokeColor: "#212C67"
					}, //波浪颜色样式
					oStyle: {
						fillColor: "#f8f8f8",
						strokeColor: "#F0737E"
					}, //圆的颜色样式
					textStyle: {
						fillColor: "#212C67",
						fontSize: 26
					},
				}
				let drawBoll1 = () => {
					ctx.clearRect(0, 0, w, h);
					ctx.save();
					ctx.beginPath();
					ctx.setLineWidth(bollArg.lineWidth);
					ctx.setStrokeStyle(bollArg.oStyle.strokeColor);
					ctx.setFillStyle(bollArg.oStyle.fillColor);
					ctx.arc(bollArg.O.x, bollArg.O.y, bollArg.R, 0, 2 * Math.PI);
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
					ctx.clip();
					grd = ctx.createLinearGradient(0, 0, bollArg.O.y - bollArg.R, bollArg.O.y + bollArg.R);
					grd.addColorStop(0, bollArg.waveStyle.fillColor.start);
					grd.addColorStop(1, bollArg.waveStyle.fillColor.end);
					ctx.globalAlpha = bollArg.waveOpacity;
					ctx.beginPath();
					ctx.setStrokeStyle(bollArg.waveStyle.strokeColor);
					ctx.setFillStyle(grd);
					ctx.moveTo(bollArg.O.x - bollArg.R, bollArg.O.y + bollArg.R + bollArg.A);
					for (angle = bollArg.O.x - bollArg.R; angle < bollArg.O.x + bollArg.R + bollArg.angleStep; angle +=
						bollArg.angleStep) {
						y = bollArg.A * Math.sin(this.bollStep1 / bollArg.vs + angle / bollArg.waveLen * Math.PI * 2);
						// y2 = bollArg.A * Math.cos(this.bollStep1 / bollArg.vs + angle / bollArg.waveLen * Math.PI * 2);
						x = angle;
						ctx.lineTo(x, (y + bollArg.R * 2 + bollArg.A + grid.top) - part * 0.01 * (bollArg.R * 2 *
							bollArg.waveHeight / 100));
						// ctx.lineTo(x, (y2 + bollArg.R * 2 + bollArg.A + grid.top) - part * 0.01 * (bollArg.R * 2 *
						// 		bollArg.waveHeight / 100));
					}
					ctx.lineTo(bollArg.O.x + bollArg.R, bollArg.O.y + bollArg.R + bollArg.A);
					ctx.fill();
					ctx.restore();

					ctx.beginPath();
					ctx.setTextAlign("center");
					ctx.setTextBaseline("middle");
					ctx.setFillStyle(bollArg.textStyle.fillColor);
					ctx.setFontSize(bollArg.textStyle.fontSize);

					ctx.fillText(this.toFixedNumber(2, bollArg.waveHeight * 0.01 * part) + "%", bollArg.O.x, bollArg.O
						.y);
					ctx.fill();
					ctx.draw();

					part++;
					if (part >= 100) {
						part = 100;
					}

					// #ifdef H5
					this.bollStep1++;
					if (this.bollStep1 > 2012) {
						this.bollStep1 = 0;
					}
					this.bollTimeR1 = requestAnimationFrame(drawBoll1);
					// #endif
				}
				// #ifdef H5
				drawBoll1();
				// #endif
				// #ifdef APP-VUE || MP-WEIXIN
				this.bollTimeR1 = setInterval(() => {
					drawBoll1();
					this.bollStep1++;
					if (this.bollStep1 > 2021) {
						this.bollStep1 = 0;
					}
				}, 1000 / 65);
				// #endif
			},
			drawBollWave2(ids, elem) {
				let ctx = uni.createCanvasContext(ids),
					w = elem.width,
					h = elem.height,
					grd = null, //渐变色grd
					angle = 0,
					x = 0,
					y = 0,
					y2 = 0,
					part = 0; //part声波初始位置
				let grid = {
					top: 5 * h / 100, //水球距离顶的 15%
				};
				let bollArg = {
					R: h / 2 - grid.top, //圆半径
					O: {
						x: w / 2,
						y: h / 2
					}, //圆心坐标 x, y
					A: 2, //振幅
					vs: 80, //声波运动速度 越大值 越慢
					lineWidth: 2,
					waveOpacity: 1, //水波的透明度
					waveHeight: 10, // 80百分之80%（占整个水球的百分比高度）
					angleStep: 5, //声波上圆点间隔的距离
					waveLen: 10, //波长
					waveStyle: {
						fillColor: {
							start: "#FFCB31",
							end: "#E9A90E"
						},
						strokeColor: "#212C67"
					}, //波浪颜色样式
					oStyle: {
						fillColor: "#f8f8f8",
						strokeColor: "#FFCB31"
					}, //圆的颜色样式
					textStyle: {
						fillColor: "#212C67",
						fontSize: 26
					},
				}
				let drawBoll2 = () => {
					ctx.clearRect(0, 0, w, h);
					ctx.save();
					ctx.beginPath();
					ctx.setLineWidth(bollArg.lineWidth);
					ctx.setStrokeStyle(bollArg.oStyle.strokeColor);
					ctx.setFillStyle(bollArg.oStyle.fillColor);
					ctx.arc(bollArg.O.x, bollArg.O.y, bollArg.R, 0, 2 * Math.PI);
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
					ctx.clip();
					grd = ctx.createLinearGradient(0, 0, bollArg.O.y - bollArg.R, bollArg.O.y + bollArg.R);
					grd.addColorStop(0, bollArg.waveStyle.fillColor.start);
					grd.addColorStop(1, bollArg.waveStyle.fillColor.end);
					ctx.globalAlpha = bollArg.waveOpacity;
					ctx.beginPath();
					ctx.setStrokeStyle(bollArg.waveStyle.strokeColor);
					ctx.setFillStyle(grd);
					ctx.moveTo(bollArg.O.x - bollArg.R, bollArg.O.y + bollArg.R + bollArg.A);
					for (angle = bollArg.O.x - bollArg.R; angle < bollArg.O.x + bollArg.R + bollArg.angleStep; angle +=
						bollArg.angleStep) {
						y = bollArg.A * Math.sin(this.bollStep2 / bollArg.vs + angle / bollArg.waveLen * Math.PI * 2);
						// y2 = bollArg.A * Math.cos(this.bollStep2 / bollArg.vs + angle / bollArg.waveLen * Math.PI * 2);
						x = angle;
						ctx.lineTo(x, (y + bollArg.R * 2 + bollArg.A + grid.top) - part * 0.01 * (bollArg.R * 2 *
							bollArg.waveHeight / 100));
						// ctx.lineTo(x, (y2 + bollArg.R * 2 + bollArg.A + grid.top) - part * 0.01 * (bollArg.R * 2 *
						// 		bollArg.waveHeight / 100));
					}
					ctx.lineTo(bollArg.O.x + bollArg.R, bollArg.O.y + bollArg.R + bollArg.A);
					ctx.fill();
					ctx.restore();

					ctx.beginPath();
					ctx.setTextAlign("center");
					ctx.setTextBaseline("middle");
					ctx.setFillStyle(bollArg.textStyle.fillColor);
					ctx.setFontSize(bollArg.textStyle.fontSize);

					ctx.fillText(this.toFixedNumber(2, bollArg.waveHeight * 0.01 * part) + "%", bollArg.O.x, bollArg.O
						.y);
					ctx.fill();
					ctx.draw();

					part++;
					if (part >= 100) {
						part = 100;
					}

					// #ifdef H5
					this.bollStep2++;
					if (this.bollStep2 > 2012) {
						this.bollStep2 = 0;
					}
					this.bollTimeR2 = requestAnimationFrame(drawBoll2);
					// #endif
				}
				// #ifdef H5
				drawBoll2();
				// #endif
				// #ifdef APP-VUE || MP-WEIXIN
				this.bollTimeR2 = setInterval(() => {
					drawBoll2();
					this.bollStep2++;
					if (this.bollStep2 > 2021) {
						this.bollStep2 = 0;
					}
				}, 1000 / 65);
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-page {
		.water-chart {
			background-color: #fff;
			margin: 24rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			display: flex;

			.water-item {
				width: 33%;
				margin-bottom: 20rpx;

				.chart {
					width: 100%;
					height: 220rpx;
				}

				.chart1 {
					width: 100%;
					height: 220rpx;
				}

				.chart2 {
					width: 100%;
					height: 220rpx;
				}

				.num {
					text-align: center;
					margin-top: 16rpx;
				}
			}
		}

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