airconditioner/sources/client/vrv-moblie/pages/dataCurve/dataCurve.vue

<template>
	<view>
		<view class="all">

			<view class="chart">
				<view class="charts-box">
					<best-gauge :config="gaugeOption"></best-gauge>
				</view>

				<view class="charts-box">
					<best-gauge :config="gaugeOption2"></best-gauge>
				</view>
			</view>

			<view class="white">
				<view class="title1">
					<text class="param">空调排风温度变化</text>
					<view class="tiao"></view>
				</view>

				<view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA"
						@touchend="moveLineA"></canvas>
					<!-- 画布，图表的HTML部分-->
				</view>

			</view>

			<view class="white1">
				<view class="title1">
					<text class="param">空调排风湿度变化</text>
					<view class="tiao"></view>
				</view>

				<view>
					<canvas canvas-id="canvasLineA11" id="canvasLineA11" class="charts" @touchmove="moveLineA11"
						@touchend="moveLineA11"></canvas>
					<!-- 画布，图表的HTML部分-->
				</view>
			</view>

			<view class="anniu">
				<image class="anniu" src="../../static/设备菜单/前往列表@2x.png" @tap="back"></image>
			</view>
		</view>
	</view>
</template>

<script>
	//仪表盘组件
	import bestGauge from '@/components/best-gauge/best-gauge.vue'

	//引入u-charts组件
	import uCharts from '@/components/u-charts/u-charts.js'

	var _self; //用于全局使用this

	var _self11; //用于全局使用this

	var canvaLineA = null; //uCharts实例

	var canvaLineA11 = null; //uCharts实例


	export default {
		components: {
			bestGauge,
		},

		data() {
			let _width = uni.upx2px(350);
			return {
				timeData: {
					time1: '',
					time2: '',
					time3: '',
					time4: '',
					time5: ''
				},
				WDdata: {
					WD1: '',
					WD2: '',
					WD3: '',
					WD4: '',
					WD5: '',
				},
				SDdata: {
					SD1: '',
					SD2: '',
					SD3: '',
					SD4: '',
					SD5: '',
				},


				formData: {
					WD_1: '',
					SD_1: '',
					QX: '2', //星期
					WD_SJ: '12',
					SD_SJ: '23',
					WD_SD: '34',
					SD_SD: '45',
				},

				cWidth: '',
				cHeight: '', //画布的宽高

				//仪表盘部分
				gaugeOption: { //定义参数
					id: 'gaugeId0',
					value: '',
					axisTickLength: 2 //该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},

				gaugeOption2: { //定义参数
					name: 'CK01排风湿度显示',
					id: 'gaugeId1',
					value: '',
					unit: '%',
					axisTickLength: 2 //该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},

				//折线图部分

				//温度
				data: { //数据
					categories:  ['3时', '6时', '9时', '12时', '15时', '18时', '21时', '24时'],
					series: [{
						name: "温度实际值",

						data: [40, 30, 36, 44, 34],
					}, {
						name: "温度设定值",
						data: [10, 25, 23, 33, 23],
						color: "#336633"
					}]
				},

				//湿度
				data11: { //数据
					categories11:   ['3时', '6时', '9时', '12时', '15时', '18时', '21时', '24时'],
					series11: [{
						name: "湿度实际值",
						data: [40, 30, 36, 44, 38],
					}, {
						name: "湿度设定值",
						data: [10, 25, 23, 33, 23],
						color: "red"
					}]
				},
			}
		},

		onLoad() {
			this.getWD_SJ()
			this.getSD_SJ()
			this.getWD_SD()
			this.getSD_SD()

			this.getWD_1()
			this.getSD_1()

			this.cWidth = uni.upx2px(702);
			this.cHeight = uni.upx2px(500); //设置宽高
			_self = this //声明this
			_self.showLineA("canvasLineA", _self.data); //触发执行函数

			_self11 = this //声明this
			_self11.showLineA11("canvasLineA11", _self11.data11); //触发执行函数
		},


		methods: {
			async getWD_SJ(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "292",
				};

				let res = await uni.$http.get(url, data);

				this.formData.WD_SJ = res.data.data.deviceParam.value;
				console.log(this.formData.WD_SJ);
				this.data.series[0].data[0] = this.formData.WD_SJ
				console.log("实际温度：" + this.data.series[0].data[0]);
			},
			async getSD_SJ(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "280",
				};

				let res = await uni.$http.get(url, data);

				this.formData.SD_SJ = res.data.data.deviceParam.value;
				console.log(this.formData.SD_SJ);
				this.data11.series11[0].data[0] = this.formData.SD_SJ
				console.log("实际湿度：" + this.data11.series11[0].data[0]);
			},
			async getWD_SD(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "296",
				};

				let res = await uni.$http.get(url, data);

				this.formData.WD_SD = res.data.data.deviceParam.value;
				console.log(this.formData.WD_SD);
				this.data.series[1].data[0] = this.formData.WD_SD
				console.log("设定温度：" + this.data.series[1].data[0]);
			},
			async getSD_SD(e) {
				let vm = this;

				var XQ = this.formData.QX;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "231",
				};

				let res = await uni.$http.get(url, data);

				this.formData.SD_SD = res.data.data.deviceParam.value;
				console.log(this.formData.SD_SD);

				if (XQ == 1) {
					this.data11.series11[1].data[0] = this.formData.SD_SD
					console.log("周一设定湿度：" + this.data11.series11[1].data[0]);

				}

				if (XQ == 2) {
					this.data11.series11[1].data[1] = this.formData.SD_SD
					console.log("周二设定湿度：" + this.data11.series11[1].data[1]);

				}

			},

			back() {
				uni.navigateTo({
					url: '/pages/device/deviceInfo/deviceInfo'
				})
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#F45E41'], //每一条的颜色
					fontSize: 14, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA(e) {
				canvaLineA.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data + '℃'
					}
				});
			},


			//湿度
			showLineA11(canvasId, chartData) {
				canvaLineA11 = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self11, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#007AFF'], //每一条的颜色
					fontSize: 14, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories11, //数据类别
					series: chartData.series11, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self11.cWidth, //canvas宽度，单位为px
					height: _self11.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA11(e) {
				canvaLineA11.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data + '%'
					}
				});
			},

			async getWD_1(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "207",
				};

				let res = await uni.$http.get(url, data);
				console.log('form发生了submit事件')

				this.gaugeOption.value = res.data.data.deviceParam.value;
			},
			async getSD_1(e) {
				let vm = this;
				let url = uni.$api.deviceParam.detail;
				let data = {
					id: "293",
				};

				let res = await uni.$http.get(url, data);
				console.log('form发生了submit事件')

				this.gaugeOption2.value = res.data.data.deviceParam.value;
			},

		}

	}
</script>

<style>
	.anniu {
		width: 116rpx;
		height: 116rpx;
		float: right;
		margin-top: 20rpx;
	}

	.charts {
		margin-top: 60rpx;
		width: 702rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

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

	.tiao {
		width: 60px;
		height: 3px;
		margin-top: 20rpx;
		background: #007AFF;
	}

	.param {
		font-size: 38rpx;
		font-weight: 550;
		margin-top: 40rpx;
	}

	.white {
		width: 702rpx;
		height: 720rpx;
		margin-left: 24rpx;
		background-color: white;
		margin-top: 28rpx;
		border-radius: 10rpx;
	}

	.white1 {
		width: 702rpx;
		height: 720rpx;
		margin-left: 24rpx;
		background-color: white;
		margin-top: 28rpx;
		border-radius: 10rpx;
	}

	.chart {
		font-size: 26rpx;
		height: 300px;
		/* background:white; */
		background: rgb(30, 130, 250);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}




	.charts-box {
		margin-left: 8rpx;
		margin-right: 8rpx;
	}
</style>