指标详情

App.vue

@@ -31,7 +31,7 @@
 		},
 		onHide: function() {
 			console.log('App Hide')
-		}
+		}   
 	}
 </script>
 

components/detail/Detail.vue

@@ -1,22 +1,21 @@
 <template>
 	<view class="contentike">
 		<view class="fixed" style="color: #FFFDEF;">
-			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">				
+			<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>
-				
+				<block slot="content">
+					<view style="color: silver;">{{ address }}</view>
+				</block>
 			</cu-custom>
 		</view>
-		<view class="threeTarget">
+		<view class="threeTarget" v-show="targetdetail_visable.targetdetail_target">
 			<view class="target">
 				<view class="target_zi">指标</view>
 				<view class="target_dianLiang">日发电量</view>
 			</view>
 			<view class="target">
 				<view style="font-size: 16px;margin-top: -7px;">数值</view>
-				<view class="target_count">40</view>
+				<view class="target_count">{{ targetdetail.targetdetail_target }}</view>
 			</view>
 			<view class="target">
 				<view style="font-size: 16px;margin-top: -7px;">单位</view>
@@ -29,7 +28,6 @@
 			<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>
@@ -38,395 +36,557 @@
 </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 = {
-				cWidth: '',
-				cHeight: '',
-				pixelRatio: 1,
-				serverData: '',
-				address:'',
-
-			}
-
-
-			return data;
-		},
-created: function() {
-			this.address = this.getWindPowerStationNameToSessionStorage();
-			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
+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 = {
+			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;
 		},
-		onShow() {
-			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
-			this.address = this.getWindPowerStationNameToSessionStorage();
-			// this.hideModals();
+
+		
+	
+	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() {},
+
+	methods: {
+		targetdetail_target() {
+			let _this = this;
+			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
+			this.socketTask_targetdetail_target = uni.connectSocket({
+				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+				url: 'ws://192.168.1.104:8082/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 = res.data;
+					console.log(_this.targetdetail.targetdetail_target);
+				});
+			});
+			// 这里仅是事件监听【如果socket关闭了会执行】
+			/* 								this.socketTask.onClose(() => {
+									console.log("已经被关闭了")
+								}) */
 		},
-		onLoad() {
-			_self = this;
-			this.cWidth = uni.upx2px(750);
-			this.cHeight = uni.upx2px(400);
-			this.getColumnServerData();
-			this.getLineServerData();
+		targetdetail_curve() {
+			let _this = this;
+			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
+			this.socketTask_targetdetail_curve = uni.connectSocket({
+				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+				url: 'ws://192.168.1.104:8082/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 = eval(res.data);
+				});
+			});
+			// 这里仅是事件监听【如果socket关闭了会执行】
+			/* 								this.socketTask.onClose(() => {
+												console.log("已经被关闭了")
+											}) */
 		},
+		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 _this = this;
+			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
+			this.socketTask_targetdetail_histogram = uni.connectSocket({
+				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
+				url: 'ws://192.168.1.104:8082/websocket/pageNumber_8/functionNumber_3',
+				success(data) {
+					console.log('websocket连接成功');
+				}
+			});
 
-		onReady() {
+			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
+			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 = eval(res.data);
+					
+					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=[];
+					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.onClose(() => {
+												console.log("已经被关闭了")
+											}) */
 		},
+		
 
-		methods: {
-			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: [{
+
+		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
-						],
+						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"
+						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) + '元'
+						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'
 						},
-
-					},
-					width: _self.cWidth * _self.pixelRatio,
-					height: _self.cHeight * _self.pixelRatio,
-					extra: {
-						line: {
-							type: 'line',
-							width: '1',
+						{
+							fontColor: 'silver',
+							disabled: false, //y轴轴线
+							min: 0,
+							max: 40,
+							position: 'right',
+							axisLineColor: '#2E2E2E',
+							title: '功率:(kwh)',
+							titleFontColor: 'silver'
 						}
-					}
-				});
+					],
 
-			},
-			touchLineA(e) {
-				canvaLineA.showToolTip(e, {
-					format: function(item, category) {
-						return category + ' ' + item.name + ':' + item.data
+					gridColor: '#2E2E2E',
+					splitNumber: 4,
+					gridType: 'solid',
+					dashLength: 8,
+					showTitle: 'true',
+					format: val => {
+						return val.toFixed(0) + '元';
 					}
-				});
-			},
-			moveLineA(e) {
-				canvaLineA.scroll(e);
-			},
-			getColumnServerData() {
-				res.data.data = res.data;
-				let Column = {
-					categories: [],
-					series: []
-				};
-				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
-				Column.categories = res.data.data.ColumnB.categories;
-				Column.series = res.data.data.ColumnB.series;
-				_self.textarea = JSON.stringify(res.data.data.ColumnB);
-				_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: [{
+				},
+				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",
+							fontColor: 'silver',
 							// title: '7天功率柱状图',
-							title: "          功率:(kw/h)",
-							titleFontColor: "silver",
+							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,
+							format: val => {
+								return val.toFixed(0) + '';
 							}
 						}
-					}
-				});
-
-			},
-			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
+					]
+				},
+				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;
-	}
+@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;
+}
 
-	.addressName {
-		/* width: 100%; */
-		/* background-color: white; */
-		/* width: 126px; */
-		height: 80rpx;
-		line-height: 80rpx;
-		margin-left: 40%;
-		color: silver;
-		font-size: 18px;
-	}
+body {
+	background: #1f1f1f;
+	font-family: '方正兰亭细黑_GBK';
+	font-size: 14px;
+	color: silver;
+}
 
-	.target_dianLiang {
-		margin-top: 15px;
-		font-size: 16px;
-		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
-	}
+.addressName {
+	/* width: 100%; */
+	/* background-color: white; */
+	/* width: 126px; */
+	height: 80rpx;
+	line-height: 80rpx;
+	margin-left: 40%;
+	color: silver;
+	font-size: 18px;
+}
 
-	.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_dianLiang {
+	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;
+.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;
-	}
+.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 {
+	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;
-	}
+.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;
-	}
+.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;
-	}
+.qiun-charts {
+	width: 750upx;
+	height: 400upx;
+	margin-top: 140px;
+	background-color: #242424;
+}
 
-	.charts {
-		width: 750upx;
-		height: 400upx;
-	}
+.charts {
+	width: 750upx;
+	height: 400upx;
+}
 
-	.qiun-columnCharts {
-		width: 750upx;
-		height: 400upx;
-		margin-top: 20px;
-		background-color: #242424;
-	}
+.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;
-	}
+.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>