首页风场卡片、以及风场卡片点击详情页面

colorui/main.css

@@ -3575,6 +3575,11 @@ scroll-view.cu-steps .cu-item {
 	color:white;
 }
 
+.bg-gradual-sisBlack {
+	background-color: #242424;
+	color:white;
+}
+
 .bg-gradual-looknumberblue {
 	background-color: #3D6C8A;
 	color:white;

components/windStationCardDetail/WindStationCardDetail.vue

@@ -0,0 +1,854 @@
+<template>
+	<view>
+		<!--导航栏-->
+		<view  @tap="closeFrame">
+			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
+				<block slot="backText"><view style="height: 80rpx;line-height: 80rpx;">返回</view></block>
+				<block slot="content">{{ windStationName }}</block>
+			</cu-custom>
+		</view>
+		<!--电量卡片-->
+		<view class="InformationCard" @tap="closeFrame">
+			<view class="informationCardAll">
+				<view class="informationCardTextOne">
+					<view class="informationCardText">
+						<view class="textSilver">安全天数</view>
+						<view class="textWhite">(天)</view>
+						:15
+					</view>
+					<view class="informationCardTextzj">
+						<view class="textSilver">装机容量</view>
+						<view class="textWhite">(MV)</view>
+						:15
+					</view>
+				</view>
+				<view class="informationCardTextTwo">
+					<view class="informationCardText2">
+						<view class="textSilver">日发电量</view>
+						<view class="textWhite">(kwh)</view>
+						:150
+					</view>
+					<view class="informationCardText2">
+						<view class="textSilver">预测发电量</view>
+						<view class="textWhite">(kwh)</view>
+						:15
+					</view>
+					<view class="informationCardText2">
+						<view class="textSilver">上网电量</view>
+						<view class="textWhite">(kwh)</view>
+						:15
+					</view>
+				</view>
+			</view>
+		</view>
+		<!--风速卡片-->
+		<view class="speedPower" @tap="closeFrame">
+			<view class="cardinstallredSpeed">
+				<view class="cardinstalltitlegreen">
+					平均风速
+					<view class="textWhitekuangSpeed">(km/h)</view>
+				</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">
+					预测风速
+					<view class="textWhitekuangSpeed">(km/h)</view>
+				</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">
+					实际功率
+					<view class="textWhitekuang">(kw)</view>
+				</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">
+					理论功率
+					<view class="textWhitekuang">(kw)</view>
+				</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="quatoCardAndFrame">
+			<view class="quatoCardContainer" @tap="frameShow">
+				<!-- <view class="quatoCard">mttr</view>
+				<view class="quatoCard">月利用小时</view>
+				<view class="quatoCardLast">综合场用电率</view>
+				<view class="quatoCard">mtbf</view>
+				<view class="quatoCard">年利用小时</view>
+				<view class="quatoCardLast">设备可利用率</view>
+				<view class="quatoCard">减排二氧化硫</view>
+				<view class="quatoCard">节约用水</view>
+				<view class="quatoCardLast">减排二氧化碳</view>
+				<view class="quatoCard">节约标煤</view> -->
+				<view :class="sanJiao"></view>
+			</view>
+			<!-- 弹框 -->
+			<view class="frame" v-show="isFrameShow">							
+				<view class="frameCard">mttr(h):15</view>
+				<view class="frameCard">月利用小时(h):15</view>
+				<view class="frameCardLast">综合场用电率(%):15</view>
+				<view class="frameCard">mtbf(h):15</view>
+				<view class="frameCard">年利用小时(h):15</view>
+				<view class="frameCardLast">设备可利用率(%):15</view>
+				<view class="frameCard">减排二氧化硫(吨):15</view>
+				<view class="frameCard">节约用水(吨):15</view>
+				<view class="frameCardLast">减排二氧化碳(吨):15</view>
+				<view class="frameCard">节约标煤(吨):15</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="PowerColunm">发电量柱状图</view>
+		   <canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" disable-scroll=true @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
+		</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 {
+			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();
+	},
+	methods: {
+		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: '#242424',
+				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:true,
+					// 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)",
+						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: #000;
+}
+
+page {
+	background-color: #1f1f1f;
+	color: silver;
+}
+.InformationCard {
+	margin-top: 10px;
+	width: 100%;
+	height: 70px;
+	background-color: #242424;
+	float: left;
+}
+.informationCardAll {
+	width: 100%;
+	margin-top: 10px;
+	height: 60px;
+	float: left;
+}
+.informationCardTextOne {
+	width: 100%;
+	height: 35px;
+	float: left;
+}
+.informationCardText {
+	margin-left: 15px;
+	width: 110px;
+	height: 35px;
+	line-height: 35px;
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: silver;
+	font-size: 12px;
+	float: left;
+}
+.informationCardTextzj {
+	margin-left: 141px;
+	width: 100px;
+	height: 35px;
+	line-height: 35px;
+	user-select: text;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	color: silver;
+	font-size: 12px;
+	float: left;
+}
+.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: 15px;
+	width: 110px;
+	height: 35px;
+	font-size: 12px;
+	line-height: 35px;
+	float: left;
+}
+.textWhite {
+	color: white;
+	float: left;
+}
+.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;
+}
+.cardinstallredSpeed {
+	margin-top: 8px;
+	margin-left: 9px;
+	width: 46%;
+	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;
+}
+.cardinstalltitlegreen {
+	width: 100%;
+	height: 25px;
+	margin-left: 37px;
+	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;
+}
+.textWhitekuangSpeed {
+	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: 100%;
+	height: 25px;
+	margin-left: 45px;
+	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;
+}
+.textWhitekuang {
+	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: calc(100% - 18px);
+	height: 20px;
+	margin-left: 9px;
+	background-color: #242424;
+	position: relative;
+}
+.quatoCardContainer {
+	width: 100%;
+	height: 20px;
+	/* margin-left: 9px; */
+	background-color: #242424;
+}
+.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: 100%;
+	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:#262424;
+}
+.frameCard{
+	width: 32%;
+	height: 30px;
+	float: left;
+	margin-right: 1.5%;
+	margin-bottom: 8px;
+	text-align: center;
+	line-height: 30px;
+	font-size: 12px;
+	color: white;
+}
+.frameCardLast{
+	width: 32%;
+	height: 30px;
+	float: left;
+	text-align: center;
+	line-height: 30px;
+	margin-bottom: 8px;
+	font-size: 12px;
+	color: white;
+}
+.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: 500upx;
+}
+
+.charts {
+	width: 750upx;
+	height: 500upx;
+}
+
+.lineChart {
+	width: 100%;
+	height: 200px;
+	background-color: #242424;
+	margin-top: 10px;
+	float: left;
+}
+.Histogram {
+	clear: both;
+	width: 750upx;
+	height: 500upx;
+	margin-top: 20px;
+	background-color: #242424;
+}
+.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;
+ }
+</style>

pages.json

@@ -32,6 +32,10 @@
 		{
 			"path" : "components/detail/Detail",
 			"style" : {}
+		},
+		{
+			"path" : "components/windStationCardDetail/WindStationCardDetail",
+			"style" : {}
 		}
         
     ],