sisMobilePhone/components/windStationCardDetail/WindStationCardDetail.vue

<template>
	<view>
		<!--导航栏-->
		<view @tap="closeFrame">
			<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;">{{ windStationName }}</view>
				</block>
			</cu-custom>
		</view>
		<!--电量卡片-->
		<view class="InformationCard" @tap="frameShow">
			<view class="informationCardAll">
				<view class="informationCardTextOne">
					<view class="informationCardText">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">安全天数(&nbsp;天&nbsp;)&nbsp;:</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.aqts}}</view>
					</view>
					<view class="informationCardTextzj">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">装机容量(MV):</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.zjrl}}</view>
					</view>
				</view>
				<view class="informationCardTextTwo">
					<view class="informationCardTextNo1">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">日发电量(kwh):</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.rfdl}}</view>
					</view>
					<view class="informationCardText3">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">预测发电量(kwh):</view>
						<view class="textWhite2">{{windpowerstationdetail.comprehensive_target.ycfdl}}</view>
					</view>
					<view class="informationCardText2">
						<view class="textSilver" @tap="common.navTo('/components/detail/Detail')">上网电量(kwh):</view>
						<view class="textWhite">{{windpowerstationdetail.comprehensive_target.swdl}}</view>
						<view class="img"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 指标卡片 -->
		<view class="quatoCardAndFrame">
			<view class="quatoCardContainer" @tap="frameShow">
				<view :class="sanJiao"></view>

				<!-- <view class="icon cuIcon-unfold"></view> -->
			</view>
			<!-- 弹框 -->
			<view class="frame" v-show="isFrameShow">
				<view class="frameCardLeft">
					mttr(h):
					<a class="frameCardLeftValue">15</a>
				</view>
				<view class="frameCardMiddle">
					月利用小时(h):
					<a class="frameCardMiddleValue">15</a>
				</view>
				<view class="frameCardRight">
					综合场用电率(%):
					<a class="frameCardRightValue">15</a>
				</view>
				<view class="frameCardLeft">
					mtbf(h):
					<a class="frameCardLeftValue">15</a>
				</view>
				<view class="frameCardMiddle">
					年利用小时(h):
					<a class="frameCardMiddleValue">15</a>
				</view>
				<view class="frameCardRight">
					设备可利用率(%):
					<a class="frameCardRightValue">15</a>
				</view>
				<view class="frameCardLeft">
					节约标煤(吨):
					<a class="frameCardLeftValue">15</a>
				</view>
				<view class="frameCardMiddle">
					节约用水(吨):
					<a class="frameCardMiddleValue">15</a>
				</view>
				<view class="frameCardRight">
					减排二氧化碳(吨):
					<a class="frameCardRightValue">15</a>
				</view>
				<view class="frameCardLeft">
					减排二氧化硫(吨):
					<a class="frameCardLeftValue">15</a>
				</view>
			</view>
		</view>

		<!--风速卡片-->
		<view class="speedPower" @tap="closeFrame">
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">
					平均风速
					<span>(km/h)</span>
				</view>
				<view class="cardinstallnumbergreen">5</view>
				<view class="cardinstallnumbergreenmin"><view class="greenMinText">min: 5</view></view>
				<view class="cardinstallnumbergreenmax"><view class="greenMaxText">max: 25</view></view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitlegreen">
					预测风速
					<span>(km/h)</span>
				</view>
				<view class="cardinstallnumbergreen">48</view>
				<view class="cardinstallnumbergreenmin"><view class="greenMinText">min: 4</view></view>
				<view class="cardinstallnumbergreenmax"><view class="greenMaxText">max: 26</view></view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">
					实际功率
					<span>(kw)</span>
				</view>
				<view class="cardinstallnumberred">15</view>
				<view class="cardinstallnumberredmin"><view class="redMinText">min: 566</view></view>
				<view class="cardinstallnumberredmax"><view class="redMaxText">max: 656</view></view>
			</view>
			<view class="cardinstallredSpeed">
				<view class="cardinstalltitleRed">
					理论功率
					<span>(kw)</span>
				</view>
				<view class="cardinstallnumberred">14</view>
				<view class="cardinstallnumberredmin"><view class="redMinText">min: 589</view></view>
				<view class="cardinstallnumberredmax"><view class="redMaxText">max: 674</view></view>
			</view>
		</view>

		<!-- 曲线图 -->
		<view class="lineChart" @tap="closeFrame">
			<view class="qiun-charts">
				<view class="speedPowerDiagram">风速功率曲线图</view>
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
		</view>
		<!--柱状图-->
		<view class="Histogram" @tap="closeFrame">
			<view class="qiun-charts">
				<view class="PowerColunm">发电量柱状图</view>
				<canvas
					canvas-id="canvasColumn"
					id="canvasColumn"
					class="charts"
					disable-scroll="true"
					@touchstart="touchColumn"
					@touchmove="moveColumn"
					@touchend="touchEndColumn"
				></canvas>
			</view>
		</view>
	</view>
</template>

<script>
import uCharts from '../tools/u-charts/u-charts.js';
var _self;
var canvaLineA = null;
var canvaColumn = null;
export default {
	data: function() {
		return {
			FDC:"CL_FDC",
			socketTask_comprehensive_target:'',
			windpowerstationdetail:{comprehensive_target:""},
			windStationName: '',
			isFrameShow: false,
			count: 0,
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			serverData: '',
			sanJiao: 'sanJiaoDown',
			
		};
	},
	onLoad(option) {
		this.windStationName = option.option;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(400);
		this.getServerData();
		this.getColumnServerData();
		this.comprehensive_target();
	},
	computed:{
	   backStageIp:function(){
		  return this.$store.state.wholeSituationBackStageIp;
	   }, backStagePort:function(){
		  return this.$store.state.wholeSituationBackStagePort;
	   },windpowerstationNameToId:function(){
		  return this.$store.state.windpowerstationNameToId;
	   }
	},
	methods: {
		async comprehensive_target() {

			let _this = this;
			// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
			this.socketTask_comprehensive_target = uni.connectSocket({
				// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
				url: 'ws://'+this.backStageIp+':'+this.backStagePort+'/websocket/pageNumber_7/functionNumber_1',
				success(data) {
					console.log('websocket连接成功');
				}
			});
		    let windpowerstationid = uni.getStorageSync('windpowerstationName');
			// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
			this.socketTask_comprehensive_target.onOpen(res => {
				console.log('WebSocket连接正常打开中...！');
				this.is_open_socket = true;
		
				// 注：只有连接正常打开中 ，才能正常收到消息
				this.socketTask_comprehensive_target.onMessage(res => {
					//console.log("收到服务器内容：" + res.data);
					_this.windpowerstationdetail.comprehensive_target =JSON.parse(res.data)[_this.FDC];

				});
			});
			// 这里仅是事件监听【如果socket关闭了会执行】
/* 			this.socketTask_comprehensive_target.onClose(() => {
					uni.request({
					    url: 'http://'+this.backStageIp+':'+this.backStagePort+'/targetdetail/close_targetdetail_target?pointKey='+this.pointKey,
					    success: (res) => {
		
					    }
					});
			}) */
		},
		frameShow: function() {
			this.count = this.count + 1;
			if (this.count % 2 == 0) {
				this.isFrameShow = false;
				this.sanJiao = 'sanJiaoDown';
			} else {
				this.isFrameShow = true;
				this.sanJiao = 'sanJiaoUp';
			}
		},
		closeFrame: function() {
			this.count = this.count + 1;
			if (this.isFrameShow) {
				this.isFrameShow = false;
				this.sanJiao = 'sanJiaoDown';
			}
		},
		getServerData() {
			// 折线图
			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: [11, 12, 14, 12, 13, 12, 16, 14, 11, 13, 10, 14, 11, 13, 11, 12, 11, 12.1, 12.2, 11.5, 11.7, 11.3, 12.7, 13, 12.8],
						color: '#4BB94B',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 0,
						legendShape: 'circle'
					},
					{
						name: '风速',
						data: [21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22, 21, 22.1, 22.2, 21.5, 21.7, 21.3, 22.7, 23, 22.8],
						color: '#E82E2F',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'km/h';
						},
						index: 1,
						legendShape: 'circle'
					},
					{
						name: '理论功率',
						data: [31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32, 31, 32.1, 32.2, 31.5, 31.7, 31.3, 32.7, 33, 32.8],
						color: '#F5A83C',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 0,
						legendShape: 'circle'
					},
					{
						name: '预测功率',
						data: [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2.1, 2.2, 1.5, 1.7, 1.3, 2.7, 3, 2.8],
						color: '#4A80B1',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: val => {
							return val + 'kwh';
						},
						index: 1,
						legendShape: 'circle'
					}
				]
			};

			this.showLineA('canvasLineA', LineA);
		},
		showLineA(canvasId, chartData) {
			var _self = this;
			canvaLineA = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',

				fontSize: 11,
				legend: {
					show: true,
					position: 'top',
					float: 'right',
					fontColor: 'silver',
					itemGap: '4',
					itemWidth: '3'
				},
				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: '         风速:(km/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: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
				series: [
					{
						legendShape: 'circle',
						name: '发电量',
						data: [10, 20, 30, 40, 20, 15, 20, 10, 20, 30, 40, 20, 15, 20, 10, 20, 30, 40, 20, 15, 20, 20, 15, 20, 10],
						textColor: '#ffffff',
						color: '#2fc25b'
					}
				]
			};
			// 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);
			this.showColumn('canvasColumn', Column);
		},
		showColumn(canvasId, chartData) {
			var _self = this;
			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: '#121212',
				pixelRatio: _self.pixelRatio,
				animation: true,
				categories: chartData.categories,
				series: chartData.series,
				enableScroll: true,
				xAxis: {
					// disabled:true,
					rotateLabel: false,
					disableGrid: true,
					axisLineColor: '#2D2D2D',
					fontColor: '#ffffff',
					itemCount: 10,
					// labelCount:10,
					scrollShow: false
					// 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: '            发电量:(kw/h)',
							titleFontColor: 'silver',
							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
						}
					}
				}
			});
		},
		touchEndColumn(e) {
			canvaColumn.scrollEnd(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;
					}
				}
			});
		},
		touchColumn(e) {
			canvaColumn.scrollStart(e);
		},
		moveColumn(e) {
			canvaColumn.scroll(e);
		}
	}
};
</script>

<style>
body {
	font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', STHeiti, 'Microsoft Yahei', Tahoma, Simsun, sans-serif;
	font-size: 20px;
	color: silver;
	background: #020202;
}
@font-face {
	font-family: '方正兰亭细黑_GBK';
	src: url(../../static/方正兰亭细黑_GBK.TTF);
}
page {
	background-color: #1f1f1f;
	font-family: '方正兰亭细黑_GBK';
	color: silver;
}
.InformationCard {
	margin-top: 10px;
	width: 100%;
	height: 90px;
	background-color: #242424;
	float: left;
}

.informationCardAll {
	width: 100%;
	margin-top: 10px;
	height: 60px;
	float: left;
}

.informationCardTextOne {
	width: 100%;
	height: 35px;
	float: left;
}
.informationCardTextNo1 {
	margin-left: 2%;
	width: 115px;
	height: 35px;
	font-size: 13px;
	line-height: 35px;
	float: left;
}
.informationCardText {
	margin-left: 2%;
	width: 115px;
	height: 35px;
	line-height: 35px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 13px;
	float: left;
}
.informationCardTextzj {
	/* margin-left: 43%; */
	width: 115px;
	height: 35px;
	line-height: 35px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	font-size: 13px;
	float: right;
	margin-right: 1%;
}
.informationCardTextTwo {
	width: 100%;
	height: 35px;
	float: left;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
}
.informationCardText2 {
	/* margin-left: 6%; */
	margin-left: calc(48% - 175px);
	width: 115px;
	height: 35px;
	font-size: 13px;
	line-height: 35px;
	float: left;
}
.informationCardText3 {
	/* margin-left: 6%; */
	margin-left: calc(48% - 175px);
	width: 120px;
	height: 35px;
	font-size: 13px;
	line-height: 35px;
	float: left;
}
.textWhite {
	color: white;
	float: left;
	width: 24px;
	text-align: right;
}
.textSilver {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	float: left;
}
.speedPower {
	width: 100%;
	height: 180px;
	background-color: #242424;
	float: left;
	margin-top: 20rpx;
	margin-bottom: 10px;
}
.cardinstallredSpeed {
	margin-top: 8px;
	margin-left: 9px;
	width: 46%;
	height: 78px;
	background-color: #1f1f1f;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	border-radius: 5px;
	float: left;
}
.cardinstalltitlegreen {
	width: 80%;
	height: 25px;
	text-align: center;
	margin-left: 10%;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 14px;
	color: silver;
	line-height: 25px;
	float: left;
}
.cardinstalltitlegreen span {
	color: white;
	/* float: right; */
	/* margin-right: 70px; */
}
.cardinstallnumbergreen {
	width: 100%;
	height: 25px;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 20px;
	color: silver;
	/* color: #449618; */
	line-height: 25px;
	float: left;
}
.cardinstallnumbergreenmin {
	margin-left: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #449618; */
	float: left;
}
.cardinstallnumbergreenmax {
	/* font-weight: bold; */
	margin-right: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #449618; */
	float: right;
}
.greenMinText {
	line-height: 20px;
	float: right;
}
.greenMaxText {
	line-height: 20px;
	float: left;
}
.cardinstalltitleRed {
	width: 80%;
	height: 25px;
	text-align: center;
	margin-left: 10%;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 14px;
	color: silver;
	line-height: 25px;
	float: left;
}
.cardinstalltitleRed span {
	color: white;
	/* float: right;
	margin-right: 85px; */
}
.cardinstallnumberred {
	width: 100%;
	height: 25px;
	text-align: center;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 20px;
	color: silver;
	/* color: #E93131; */
	line-height: 25px;
	float: left;
}
.cardinstallnumberredmin {
	margin-left: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #E93131; */
	float: left;
}
.cardinstallnumberredmax {
	margin-right: 2px;
	width: 45%;
	height: 20px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	font-size: 12px;
	color: silver;
	/* color: #E93131; */
	float: right;
}
.redMinText {
	line-height: 20px;
	float: right;
}
.redMaxText {
	line-height: 20px;
	float: left;
}
/* .quatoCardAndFrame {
	clear: both;
	width: 100%;
	height: 10px;
	background-color:red;
	position: relative;
} */
/* .quatoCardContainer {
	width: 375px;
	height: 12px;
	background-color:blue;
} */
.quatoCard {
	width: 32%;
	height: 30px;
	float: left;
	margin-right: 1.5%;
	margin-bottom: 8px;
	text-align: center;
	line-height: 30px;
	font-size: 14px;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
}
.quatoCardLast {
	width: 32%;
	height: 30px;
	float: left;
	text-align: center;
	line-height: 30px;
	margin-bottom: 8px;
	font-size: 14px;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
}
.sanJiaoUp {
	clear: both;
	width: 0;
	height: 0;
	/* 	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-bottom: 15px solid #E47369; */
	margin-left: calc(50% - 20px);
}
.sanJiaoDown {
	clear: both;
	width: 0;
	height: 0;
	/* 	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
	border-top: 15px solid #E47369; */
	margin-left: calc(50% - 20px);
}
.frame {
	width: calc(100% - 18px);
	margin-left: 9px;
	height: 150px;
	position: absolute;
	/* top: 20px; */
	left: 0px;
	z-index: 20;
	/* background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%); */
	background-color: #242424;
	border-top: 0.5px solid #242424;
}
.frameCardLeft {
	width: 34%;
	height: 10px;
	float: left;
	/* margin-right: 1.5%; */
	margin-bottom: 8px;
	/* text-align: center; */
	line-height: 30px;
	font-size: 13px;
	color: #a1a1a1;
	margin-top: 15px;
}
.frameCardLeftValue {
	float: right;
	color: #ffffff;
	/* margin-left: 20px; */
}
.frameCardMiddleValue {
	float: right;
	color: #ffffff;
}
.frameCardRightValue {
	float: right;
	color: #ffffff;
}
.frameCardMiddle {
	width: 29%;
	height: 10px;
	float: left;
	/* margin-right: 1.5%; */
	margin-left: 1.5%;
	margin-bottom: 8px;
	/* text-align: center; */
	line-height: 30px;
	font-size: 13px;
	color: #a1a1a1;
	margin-top: 15px;
}
.frameCardRight {
	width: 34%;
	height: 10px;
	float: left;
	/* text-align: center; */
	line-height: 30px;
	margin-bottom: 8px;
	font-size: 13px;
	color: #a1a1a1;
	margin-left: 1.5%;
	margin-top: 15px;
}
.speedPowerDiagram {
	clear: both;
	width: 130px;
	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;
}

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

.lineChart {
	clear: both;
	width: 100%;
	height: 225px;
	background-color: #242424;
}
.Histogram {
	width: 100%;
	height: 225px;
	clear: both;
	background-color: #242424;
	margin-top: 10px;
	margin-bottom: 20px;
}
.PowerColunm {
	width: 130px;
	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;
	position: relative;
	z-index: 20;
	/* overflow:auto; */
}
.img {
	width: 18px;
	height: 20px;
	float: right;
	background-color: #242424;
	/* background-color: red; */
	margin-top: -10px;
	margin-right: -10px;
	/* margin-top: -15px; */
	background-image: url(../../static/picture/zuizhongsanjiao2.png);
}
.value {
	color: #ffffff;
	font-size: 14px;
	float: right;
}
.rightValue {
	color: #ffffff;
	font-size: 14px;
	float: right;
}
.informationCardText4 {
	width: 120px;
	height: 35px;
	font-size: 14px;
	line-height: 35px;
	float: right;
	/* margin-left: 4px; */
	margin-right: 9px;
}
.textSilverDay {
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	color: silver;
	float: left;
	font-size: 14px;
	margin-left: 2%;
}
</style>