sisMobilePhone/components/detail/Detail.vue

<template>
	<view class="contentike">
		<view class="fixed" style="color: #FFFDEF;">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view></block>
				<block slot="content">
					<view style="color: silver;">{{ address }}</view>
				</block>
			</cu-custom>
		</view>
		<view class="threeTarget" v-show="targetdetail_visable.targetdetail_target">
			<view class="target">
				<view class="target_zi">指标</view>
				<view class="target_dianLiang">{{targetName}}</view>
			</view>
			<view class="target">
				<view style="font-size: 16px;margin-top: -7px;">数值</view>
				<view class="target_count">{{ targetdetail.targetdetail_target }}</view>
			</view>
			<view class="target">
				<view style="font-size: 16px;margin-top: -7px;">单位</view>
				<view class="target_danWei">{{targetUnit}}</view>
			</view>
		</view>

		<view class="qiun-charts">
			<view class="speedPowerDiagram">24小时指标曲线图</view>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
		</view>

		<view class="qiun-columnCharts">
			<view class="sevenDayColunm">7天指标柱状图</view>
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>
	</view>
</template>

<script>
import uCharts from '../../components/tools/u-charts/u-charts.js';
import res from '../../common/data.json';
var _self;
var canvaLineA;
var canvaColumn = null;




export default {
	data() {
		let data = {
			targetName:"日发电量",
			targetUnit:"万kwh",
			pointKey:"HB_GD_KBF_JS_P4_L19_220_CI0136",
			targetdetail_visable: { targetdetail_target: true, targetdetail_curve: true, targetdetail_histogram: true},
			targetdetail: { targetdetail_target: '', targetdetail_curve: '', targetdetail_histogram: ''},
			socketTask_targetdetail_target:"",
			socketTask_targetdetail_curve:"",
			socketTask_targetdetail_histogram:"",
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			serverData: '',
			address: '',
		 }
		 return data;
		},



	created: function() {
		this.address = this.getWindPowerStationNameToSessionStorage();
		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
		this.targetdetail_target();
		this.targetdetail_curve();
		this.targetdetail_histogram();
	},
	onShow() {
		this.windPowerStationId = uni.getStorageSync('windPowerStationId');
		this.address = this.getWindPowerStationNameToSessionStorage();
		this.hideModals();
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(400);
		this.getColumnServerData();
		this.getLineServerData();
	},
	onReady() {},
	computed:{
	   backStageIp:function(){
		  return this.$store.state.wholeSituationBackStageIp;
	   }, backStagePort:function(){
		  return this.$store.state.wholeSituationBackStagePort;
	   },
	},
	methods: {
		targetInformation(pointKey,callTargetName,callTargetUnit){
			this.address = this.getWindPowerStationNameToSessionStorage();
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
			this.pointKey = pointKey;
			this.targetName = callTargetName;
			this.targetUnit = callTargetUnit;
			this.targetdetail_target();
			this.targetdetail_curve();
			this.targetdetail_histogram();
		},async targetdetail_target() {
			let ip;
			uni.request({
			    url:'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/targetdetail_target?pointKey='+this.pointKey,
			    success: (res) => {
			        ip = res.data;
			    }
			});
			let _this = this;
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask_targetdetail_target = uni.connectSocket({
				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
				url: 'ws://'+this.backStageIp+':'+this.backStagePort+'/websocket/pageNumber_8/functionNumber_1',
				success(data) {
					console.log('websocket连接成功');
				}
			});

			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			this.socketTask_targetdetail_target.onOpen(res => {
				console.log('WebSocket连接正常打开中...！');
				this.is_open_socket = true;

				// 注：只有连接正常打开中 ，才能正常收到消息
				this.socketTask_targetdetail_target.onMessage(res => {
					//console.log("收到服务器内容：" + res.data);
					_this.targetdetail.targetdetail_target =JSON.parse(res.data)[ip];
					//console.log(_this.targetdetail.targetdetail_target);
				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
			this.socketTask_targetdetail_target.onClose(() => {
					uni.request({
					    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_target?pointKey='+this.pointKey,
					    success: (res) => {

					    }
					});
			})
		},
		targetdetail_curve() {
			let ip;
			uni.request({
			    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/targetdetail_curve?pointKey='+this.pointKey,
			    success: (res) => {
			        ip = res.data;
			    }
			});
			let _this = this;
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask_targetdetail_curve = uni.connectSocket({
				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
				url: 'ws://'+this.backStageIp+':'+this.backStagePort+'/websocket/pageNumber_8/functionNumber_2',
				success(data) {
					console.log('websocket连接成功');
				}
			});

			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			this.socketTask_targetdetail_curve.onOpen(res => {
				console.log('WebSocket连接正常打开中...！');
				this.is_open_socket = true;

				// 注：只有连接正常打开中 ，才能正常收到消息
				this.socketTask_targetdetail_curve.onMessage(res => {
					//console.log("收到服务器内容：" + res.data);
					_this.targetdetail.targetdetail_curve = JSON.parse(res.data)[ip];
				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask_targetdetail_curve.onClose(() => {
						uni.request({
						    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_curve?pointKey='+this.pointKey,
						    success: (res) => {

						    }
						});
				})
		},
		targetdetail_histogram() {

			Date.prototype.Format = function(fmt) {
						var o = {
							"M+": this.getMonth() + 1, //月份
							"d+": this.getDate(), //日
							"h+": this.getHours(), //小时
							"m+": this.getMinutes(), //分
							"s+": this.getSeconds(), //秒
							"q+": Math.floor((this.getMonth() + 3) / 3), //季度
							"S": this.getMilliseconds() //毫秒
						};
						if(/(y+)/.test(fmt))
							fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
						for(var k in o)
							if(new RegExp("(" + k + ")").test(fmt))
								fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
						return fmt;
			};

			let ip;
			uni.request({
			    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/targetdetail_histogram?pointKey='+this.pointKey,
			    success: (res) => {
			        ip = res.data;
			    }
			});
			let _this = this;
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask_targetdetail_histogram = uni.connectSocket({
				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
				url: 'ws://'+this.backStageIp+':'+this.backStagePort+'/websocket/pageNumber_8/functionNumber_3',
				success(data) {
					console.log('websocket连接成功');
				}
			});

			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			this.socketTask_targetdetail_histogram.onOpen(res => {
				console.log('WebSocket连接正常打开中...！');
				this.is_open_socket = true;

				// 注：只有连接正常打开中 ，才能正常收到消息
				this.socketTask_targetdetail_histogram.onMessage(res => {
					//console.log("收到服务器内容：" + res.data);
					_this.targetdetail.targetdetail_histogram = JSON.parse(res.data)[ip];

					let Column = {
						 "categories": ["04/11","04/12", "04/13", "04/14", "04/15", "04/16", "04/17"],
						  "series": [{
						    "name": "发电量",
						    "data": [],
							"color": "#29C35A"
						  }]
					};
					Column.categories=[];
					Column.series[0].data=[];
					Column.series[0].name=this.targetName;
					for(var i=0;i<_this.targetdetail.targetdetail_histogram.length;i++){
						_this.targetdetail.targetdetail_histogram[i].pointTime = new Date(_this.targetdetail.targetdetail_histogram[i].pointTime*1000).Format("MM/dd");
						Column.categories.push(_this.targetdetail.targetdetail_histogram[i].pointTime);
						Column.series[0].data.push(_this.targetdetail.targetdetail_histogram[i].pointValueInDouble);
					}

					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去

					_self.showColumn('canvasColumn', Column);

				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
				this.socketTask_targetdetail_histogram.onClose(() => {
						uni.request({
						    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_histogram?pointKey='+this.pointKey,
						    success: (res) => {

						    }
						});
		     });
		},pushWindPowerStationNameToSessionStorage(windpowerstationName) {
			uni.setStorageSync('windpowerstationName', windpowerstationName);
			//sessionStorage.setItem('windpowerstationName', windpowerstationName);
			//alert("v"+ sessionStorage.getItem("windpowerstationName"));
			//this.common.goback('/pages/index/Index');
		},
		getWindPowerStationNameToSessionStorage() {
			uni.getStorageSync('windpowerstationName');
			return uni.getStorageSync('windpowerstationName');
		},
		getLineServerData() {
			// 折线图
			let LineA = {
				categories: [
					'17:26',
					'18:56',
					'19:56',
					'20:56',
					'21:56',
					'22:56',
					'23:56',
					'00:56',
					'01:56',
					'02:56',
					'03:56',
					'04:56',
					'05:56',
					'06:56',
					'07:56',
					'08:56',
					'09:56',
					'10:56',
					'11:56',
					'12:56',
					'13:56',
					'14:56',
					'15:56',
					'16:56',
					'17:56            '
				],
				series: [
					{
						name: '功率',
						data: [17, 21, 19, 22, 20.2, 19.1, 22.4, 23.8, 21.5, 22.9, 19.2, 22.4, 18.7, 22.1, 21.4, 22.7, 18.4, 18.4, 21.8, 22.5, 22.9, 19.8, 22.7, 23, 22.8],
						color: '#4A80B1',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 0,
						legendShape: 'circle'
					}
				]
			};
			this.showLineA('canvasLineA', LineA);
		},
		showLineA(canvasId, chartData) {
			canvaLineA = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
				fontSize: 11,
				legend: {
					show: true,
					position: 'top',
					float: 'right',
					fontColor: 'silver',
					itemGap: '4'
				},
				dataLabel: false,
				dataPointShape: false,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					type: 'grid',
					gridColor: 'silver',
					fontColor: 'silver',
					gridType: 'solid',
					gridColor: '#2E2E2E',
					axisLineColor: '#2E2E2E',
					labelCount: '3'
					// itemCount:"3"
				},
				yAxis: {
					data: [
						{
							type: 'value',
							fontColor: 'silver',
							disabled: false, //y轴轴线
							min: 0,
							max: 40,
							position: 'left',
							axisLineColor: '#2E2E2E',
							title: '         功率:(kw/h)',
							titleFontColor: 'silver'
						},
						{
							fontColor: 'silver',
							disabled: false, //y轴轴线
							min: 0,
							max: 40,
							position: 'right',
							axisLineColor: '#2E2E2E',
							title: '功率:(kwh)',
							titleFontColor: 'silver'
						}
					],

					gridColor: '#2E2E2E',
					splitNumber: 4,
					gridType: 'solid',
					dashLength: 8,
					showTitle: 'true',
					format: val => {
						return val.toFixed(0) + '元';
					}
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					line: {
						type: 'line',
						width: '1'
					}
				}
			});
		},
		touchLineA(e) {
			canvaLineA.showToolTip(e, {
				format: function(item, category) {
					return category + ' ' + item.name + ':' + item.data;
				}
			});
		},
		moveLineA(e) {
			canvaLineA.scroll(e);
		},
		getColumnServerData() {
			let Column = {
				 "categories": ["04/11","04/12", "04/13", "04/14", "04/15", "04/16", "04/17"],
				  "series": [{
				    "name": "发电量",
				    "data": [10, 20,30, 40, 30, 20, 10,20],
					"color": "#29C35A"
				  }]
			};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去

			_self.showColumn('canvasColumn', Column);
		},
		showColumn(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				legend: {
					show: true,
					fontSize: 12,
					padding: 5,
					fontColor: 'silver',
					itemGap: '4',
					// margin:0,
					position: 'top',
					float: 'right'
				},
				fontSize: 11,
				background: '#242424',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,

				xAxis: {
					// disabled:true,
					rotateLabel: true,
					disableGrid: true,
					axisLineColor: '#2D2D2D',
					fontColor: '#ffffff'
					// gridColor:'#2D2D2D',
				},
				yAxis: {
					showTitle: true,
					// disableGrid:true,
					gridType: 'solid',
					dashLength: 8,
					gridColor: '#2D2D2D',
					splitNumber: 5,
					min: 0,
					max: 40,
					data: [
						{
							min: 0,
							max: 40,
							position: 'left',
							axisLine: false,
							fontColor: 'silver',
							// title: '7天功率柱状图',
							title: '          功率:(kw/h)',
							titleFontColor: 'silver',
							// title: '功率(kw/h)',
							// titleFontColor: '#FFFFFF',
							titleFontSize: 11,
							format: val => {
								return val.toFixed(0) + '';
							}
						}
					]
				},
				dataLabel: true,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						width: 12,
						lineStyle: {
							width: 5
						}
					}
				}
			});
		},
		goToIndex() {
			uni.switchTab({
				url: '/pages/index/Index'
			});
		},
		touchColumn(e) {
			canvaColumn.showToolTip(e, {
				format: function(item, category) {
					if (typeof item.data === 'object') {
						return category + ' ' + item.name + ':' + item.data.value;
					} else {
						return category + ' ' + item.name + ':' + item.data;
					}
				}
			});
		}
	}
};
</script>
<style>
@font-face {
	font-family: '方正兰亭细黑_GBK';
	src: url(../../static/方正兰亭细黑_GBK.TTF);
}
page {
	/* background-color: #FFFFFF; */
	font-family: '方正兰亭细黑_GBK';
	background-color: #1f1f1f;
	color: silver;
	font-size: 14px;
}

body {
	background: #1f1f1f;
	font-family: '方正兰亭细黑_GBK';
	font-size: 14px;
	color: silver;
}

.addressName {
	/* width: 100%; */
	/* background-color: white; */
	/* width: 126px; */
	height: 80rpx;
	line-height: 80rpx;
	margin-left: 40%;
	color: silver;
	font-size: 18px;
}

.target_dianLiang {
	margin-top: 15px;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
}

.target_count {
	margin-top: 15px;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
}

.target_danWei {
	margin-top: 15px;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
}

.threeTarget {
	width: 100%;
	height: 120px;
	background-color: #242424;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
	float: left;
}

.target {
	width: 28%;
	height: 78px;
	background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
	border-radius: 5px;
	float: left;
	margin-top: 20px;
	text-align: center;
	color: silver;
	padding-top: 20px;
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
}

.target_zi {
	font-size: 16px;
	text-align: center;
	margin-top: -7px;
}

.speedPowerDiagram {
	width: 100px;
	height: 30px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	float: left;
	margin-top: 18px;
	margin-left: 9px;
	font-size: 11px;
}

.qiun-charts {
	width: 750upx;
	height: 400upx;
	margin-top: 140px;
	background-color: #242424;
}

.charts {
	width: 750upx;
	height: 400upx;
}

.qiun-columnCharts {
	width: 750upx;
	height: 400upx;
	margin-top: 20px;
	background-color: #242424;
}

.sevenDayColunm {
	width: 100px;
	height: 30px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	float: left;
	margin-top: 18px;
	margin-left: 10px;
	font-size: 11px;
}
</style>