晋能发电场站生产实时运营管理平台APP，增加场站页面（包含场站首页页面，故障报警页面）；

App.vue

@@ -8,7 +8,7 @@
 	export default {
 		onLaunch: function() {
 			this.initApp()
-			plus.screen.lockOrientation('portrait-primary');
+			// plus.screen.lockOrientation('portrait-primary');
 		},
 		methods: {
 			// 初始化应用

config.js

@@ -1,27 +1,27 @@
 // 应用全局配置
 module.exports = {
-  // baseUrl: 'http://api-dashboard.yudao.iocoder.cn',
-  baseUrl: 'http://192.168.2.7:48080',
-  baseApi: '/admin-api',
-  // 应用信息
-  appInfo: {
-    // 应用名称
-    name: "yudao-app",
-    // 应用版本
-    version: "1.0.0",
-    // 应用logo
-    logo: "/static/logo.png",
-    // 官方网站
-    site_url: "https://iocoder.cn",
-    // 政策协议
-    agreements: [{
-        title: "隐私政策",
-        url: "https://iocoder.cn"
-      },
-      {
-        title: "用户服务协议",
-        url: "https://iocoder.cn"
-      }
-    ]
-  }
-}
+	// baseUrl: 'http://api-dashboard.yudao.iocoder.cn',
+	baseUrl: 'http://192.168.2.7:48080',
+	baseApi: '/admin-api',
+	// 应用信息
+	appInfo: {
+		// 应用名称
+		name: "jn_app",
+		// 应用版本
+		version: "1.0.0",
+		// 应用logo
+		logo: "/static/logo.png",
+		// 官方网站
+		site_url: "https://iocoder.cn",
+		// 政策协议
+		agreements: [{
+				title: "隐私政策",
+				url: "https://iocoder.cn"
+			},
+			{
+				title: "用户服务协议",
+				url: "https://iocoder.cn"
+			}
+		]
+	}
+}

pages.json

@@ -15,7 +15,11 @@
 			"path": "pages/home/stationIndex",
 			"style": {
 				"navigationBarTitleText": "场站首页",
-				"navigationStyle": "custom"
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none",
+					"popGesture": "none"
+				}
 			}
 		}, {
 			"path": "pages/power/index",
@@ -24,24 +28,64 @@
 				"navigationStyle": "custom"
 			}
 		}, {
+			"path": "pages/power/stationIndex",
+			"style": {
+				"navigationBarTitleText": "场站电量预测",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none",
+					"popGesture": "none"
+				}
+			}
+		}, {
 			"path": "pages/type/index",
 			"style": {
 				"navigationBarTitleText": "故障分类",
 				"navigationStyle": "custom"
 			}
 		}, {
+			"path": "pages/type/stationIndex",
+			"style": {
+				"navigationBarTitleText": "场站故障分类",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none",
+					"popGesture": "none"
+				}
+			}
+		}, {
 			"path": "pages/report/index",
 			"style": {
 				"navigationBarTitleText": "数据简报",
 				"navigationStyle": "custom"
 			}
 		}, {
+			"path": "pages/report/stationIndex",
+			"style": {
+				"navigationBarTitleText": "场站数据简报",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none",
+					"popGesture": "none"
+				}
+			}
+		}, {
 			"path": "pages/warn/index",
 			"style": {
 				"navigationBarTitleText": "故障预警",
 				"navigationStyle": "custom"
 			}
 		}, {
+			"path": "pages/warn/stationIndex",
+			"style": {
+				"navigationBarTitleText": "场站故障预警",
+				"navigationStyle": "custom",
+				"app-plus": {
+					"bounce": "none",
+					"popGesture": "none"
+				}
+			}
+		}, {
 			"path": "pages/common/messagePage",
 			"style": {
 				"navigationBarTitleText": "消息",

pages/common/stationListPage.vue

@@ -36,7 +36,8 @@
 				this.$tab.navigateBack()
 			},
 			onClick(name) {
-				this.$tab.navigateTo('/pages/home/stationIndex?stationName=' + name)
+				this.$tab.navigateTo('/pages/home/stationIndex')
+				uni.setStorageSync('stationName', name)
 			},
 		}
 	}

pages/common/stationTab.vue

@@ -32,13 +32,25 @@
 	export default {
 		data() {
 			return {
-				showTab: '首页'
+				showTab: ''
 			};
 		},
 		methods: {
 			changeTab(it) {
 				this.showTab = it
-				this.$emit('stationTab', it)
+				// this.$emit('stationTab', it)
+				if (it === '首页') {
+					this.$tab.navigateTo('/pages/home/stationIndex')
+				} else if (it === '电量预测') {
+					this.$tab.navigateTo('/pages/power/stationIndex')
+				} else if (it === '故障分类') {
+					this.$tab.navigateTo('/pages/type/stationIndex')
+				} else if (it === '数据简报') {
+					this.$tab.navigateTo('/pages/report/stationIndex')
+				} else if (it === '故障预警') {
+					this.$tab.navigateTo('/pages/warn/stationIndex')
+				}
+				// uni.setStorageSync('stationTab', it)
 			}
 		}
 	}

pages/home/stationIndex.vue

@@ -118,15 +118,14 @@
 				</view>
 			</view>
 		</view>
-		<station-bar @stationTab="stationTabXY"></station-bar>
+		<station-bar ref="stationBar"></station-bar>
 	</view>
 </template>
-</template>
 <script>
 	import stationBar from '../common/stationTab.vue'
 	export default {
 		onLoad: function(e) {
-			this.stationName = e.stationName
+			this.stationName = uni.getStorageSync('stationName')
 		},
 		components: {
 			stationBar
@@ -201,16 +200,13 @@
 				},
 			]
 		},
+		mounted() {
+			this.$refs.stationBar.showTab = '首页'
+		},
 		methods: {
-			changeMsg() {
-				this.$tab.navigateTo('/pages/common/uniNavBar')
-			},
 			back() {
 				this.$tab.switchTab('/pages/home/index')
 			},
-			changeStation() {
-				this.$tab.navigateTo('/pages/common/stationListPage')
-			},
 			stationTabXY(it) {
 				this.stationTab = it
 			}

pages/power/stationIndex.vue

@@ -0,0 +1,752 @@
+<template>
+	<view class="power">
+		<view class="box-bg">
+			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
+				@clickLeft="back" />
+		</view>
+		<view class="power_main">
+			<view class="flex justify-center">
+				<view class="power_tab">
+					<text v-for="(item,index) in powerTabData" :key="index" @click="changePowerTab(item)"
+						:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
+				</view>
+			</view>
+			<view class="fdwcl" v-if="powerTab === 'DL'">
+				<view class="fdwcl_DataAll" v-for="(item,index) in powerProgressData" :key="index">
+					<view class="fdwcl_Data flex justify-between">
+						<view class="fdwcl_Data_1 flex">
+							<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
+							<text>{{item.inPower}}万kWh</text>
+						</view>
+						<view class="fdwcl_Data_2">
+							<text>{{item.name}}</text>
+						</view>
+						<view class="fdwcl_Data_3">
+							<text>{{item.allPower}}万kWh</text>
+						</view>
+					</view>
+					<view class="fdwcl_Data_msg">
+						<view class="show_msg" :style="showProgress(item, index)">
+
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="ycdl" v-else>
+				<view class="ycdl_tits flex justify-center">
+					<image src="../../static/jnImage/powerPage/sqrfdl.png" mode=""></image>
+					<text>本期预测电量</text>
+				</view>
+				<view class="ycdl_station">
+					<uni-row class="ycdl_station_row">
+						<uni-col :span="7" v-for="(item,index) in powerNowData" :key="index">
+							<view class="ycdl_station_col">
+								<view class="ycdl_data_col_top flex">
+									<text>{{item.inPower}}</text>
+									<text>{{item.type}}</text>
+								</view>
+								<view class="ycdl_data_col_bot flex">
+									<image src="../../static/jnImage/powerPage/clockW.png" mode=""></image>
+									<text>11月22日</text>
+								</view>
+							</view>
+						</uni-col>
+					</uni-row>
+				</view>
+				<view class="ycdl_tits flex justify-center">
+					<image src="../../static/jnImage/powerPage/sqrfdl.png" mode=""></image>
+					<text>上期日发电量</text>
+				</view>
+				<view class="ycdl_msg" v-for="(item,index) in 3" :key="index">
+					<view class="ycdl_title flex">
+						<image src="../../static/jnImage/powerPage/clock.png" mode=""></image>
+						<text>11月22日</text>
+					</view>
+					<view class="ycdl_data">
+						<uni-row class="ycdl_data_row">
+							<uni-col :span="12" v-for="(item,index) in powerNowData" :key="index">
+								<view class="ycdl_data_col flex">
+									<view class="ycdl_data_col_left">
+										<text>{{item.name}}</text>
+									</view>
+									<view class="ycdl_data_col_right flex justify-between">
+										<text>{{item.inPower}}</text>
+										<text>MW</text>
+									</view>
+								</view>
+							</uni-col>
+						</uni-row>
+					</view>
+				</view>
+				<view class="ycdl_tits flex justify-center">
+					<image src="../../static/jnImage/powerPage/tqrfdl.png" mode=""></image>
+					<text>同期日发电量</text>
+				</view>
+				<view class="ycdl_msg" v-for="(item,index) in 3" :key="index">
+					<view class="ycdl_title flex">
+						<image src="../../static/jnImage/powerPage/clock.png" mode=""></image>
+						<text>11月22日</text>
+					</view>
+					<view class="ycdl_data">
+						<uni-row class="ycdl_data_row">
+							<uni-col :span="12" v-for="(item,index) in powerNowData" :key="index">
+								<view class="ycdl_data_col flex">
+									<view class="ycdl_data_col_left">
+										<text>{{item.name}}</text>
+									</view>
+									<view class="ycdl_data_col_right flex justify-between">
+										<text>{{item.inPower}}</text>
+										<text>MW</text>
+									</view>
+								</view>
+							</uni-col>
+						</uni-row>
+					</view>
+				</view>
+			</view>
+			<view class="rdldb" v-if="powerTab === 'DL'">
+				<view class="rdldb_title flex justify-center">
+					<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""></image>
+					<text>日发电量</text>
+				</view>
+				<view class="qiun-charts">
+					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
+				</view>
+				<view class="rdldb_title flex justify-center">
+					<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""></image>
+					<text>月发电量</text>
+				</view>
+				<view class="qiun-charts">
+					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
+				</view>
+			</view>
+			<view class="xsfsgl" v-else>
+				<view class="xsfsgl_title flex justify-center">
+					<image src="../../static/jnImage/powerPage/72clock.png" mode=""></image>
+					<text>72小时风速功率</text>
+				</view>
+				<view class="qiun-chartsLine">
+					<qiun-data-charts type="mix" :opts="optsLine" :chartData="chartDataLine" />
+				</view>
+			</view>
+		</view>
+		<station-bar ref="stationBar"></station-bar>
+	</view>
+</template>
+
+<script>
+	import stationBar from '../common/stationTab.vue'
+	var uChartsInstance = {};
+	export default {
+		onLoad: function(e) {
+			this.stationName = uni.getStorageSync('stationName')
+		},
+		components: {
+			stationBar
+		},
+		data() {
+			return {
+				stationName: '',
+				stationTab: '',
+				powerTab: 'DL',
+				yearTab: 'month',
+				powerTabData: [],
+				yearData: [],
+				powerProgressData: [],
+				powerNowData: [],
+				chartData: {},
+				chartDataLine: {},
+				opts: {},
+				optsLine: {},
+			}
+		},
+		created() {
+			this.powerTabData = [{
+					nameZN: '电量',
+					nameEN: 'DL',
+					showColor: true
+				},
+				{
+					nameZN: '预测',
+					nameEN: 'YC',
+					showColor: false
+
+				}
+			]
+			this.yearData = [{
+					nameZN: '月',
+					nameEN: 'month',
+					showColor: true
+				},
+				{
+					nameZN: '年',
+					nameEN: 'year',
+					showColor: false
+
+				}
+			]
+			this.powerProgressData = [{
+					type: 'wind',
+					inPower: 961,
+					allPower: 1865,
+					name: '月发电完成率'
+				},
+				{
+					type: 'wind',
+					inPower: 852,
+					allPower: 1865,
+					name: '年发电完成率'
+				}
+			]
+			this.powerNowData = [{
+					type: 'wind',
+					inPower: 961,
+					allPower: 1865,
+					name: '预测电量'
+				},
+				{
+					type: 'wind',
+					inPower: 852,
+					allPower: 1865,
+					name: '实发电量'
+				}
+			]
+		},
+		mounted() {
+			this.$refs.stationBar.showTab = '电量预测'
+			this.getPowerBar()
+		},
+		methods: {
+			back() {
+				this.$tab.switchTab('/pages/power/index')
+			},
+			stationTabXY(it) {
+				this.stationTab = it
+			},
+			getPowerBar() {
+				let opts = {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [15, 15, 0, 5],
+					enableScroll: false,
+					legend: {
+						show: false
+					},
+					xAxis: {
+						disableGrid: true,
+						rotateLabel: true,
+						axisLineColor: "#A49EAC",
+						fontColor: "#A49EAC",
+						fontSize: 10,
+						marginTop: 5
+					},
+					yAxis: {
+						showTitle: true,
+						data: [{
+							min: 0,
+							fontColor: "#A49EAC",
+							title: "(万kwh)",
+							titleFontColor: "#A49EAC",
+							titleFontSize: 10
+						}]
+					},
+					extra: {
+						column: {
+							type: "group",
+							width: 15,
+							activeBgColor: "#000000",
+							activeBgOpacity: 0.08
+						}
+					}
+				}
+
+				let proColor = ['#6C4B9E', '#323A97', '#4951B2', '#4287FF', '#3CB8FE', '#1AA7B5', '#5183B6', '#9F65C1',
+					'#766FF1', '#4951B2',
+				]
+				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+
+				let xAxis = []
+				let series = []
+				this.powerProgressData.forEach((item, index) => {
+					xAxis.push(item.name)
+					let obj = {
+						color: '',
+						name: '',
+						textSize: 10,
+						textColor: "#A49EAC",
+						value: item.inPower
+					}
+					proColor.forEach((it, idx) => {
+						if (index.toString().length > 1) {
+							obj.color = proColor[index.toString().slice(-1)]
+						} else {
+							obj.color = proColor[index]
+						}
+					})
+					series.push(obj)
+				})
+				let res = {
+					categories: xAxis,
+					series: [{
+						data: series
+					}]
+				};
+				this.opts = opts
+				this.chartData = JSON.parse(JSON.stringify(res));
+			},
+			getLineBar() {
+				let opts = {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [15, 15, 0, 5],
+					enableScroll: false,
+					legend: {
+						show: true
+					},
+					xAxis: {
+						disableGrid: true,
+						axisLineColor: "#A49EAC",
+						fontColor: "#A49EAC",
+						fontSize: 10,
+						marginTop: 5
+					},
+					yAxis: {
+						showTitle: true,
+						disabled: false,
+						disableGrid: false,
+						splitNumber: 5,
+						gridType: "dash",
+						dashLength: 4,
+						gridColor: "#CCCCCC",
+						padding: 10,
+						data: [{
+								position: "left",
+								title: "折线",
+								fontColor: "#A49EAC",
+								titleFontColor: "#A49EAC",
+								titleFontSize: 10
+							},
+							{
+								position: "right",
+								min: 0,
+								max: 200,
+								title: "点",
+								textAlign: "left",
+								fontColor: "#A49EAC",
+								titleFontColor: "#A49EAC",
+								titleFontSize: 10
+							}
+						]
+					},
+					extra: {
+						mix: {
+							column: {
+								width: 20
+							}
+						}
+					}
+				}
+
+				let proColor = ['#6C4B9E', '#323A97', '#4951B2', '#4287FF', '#3CB8FE', '#1AA7B5', '#5183B6', '#9F65C1',
+					'#766FF1', '#4951B2',
+				]
+				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+
+				let res = {
+					categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
+					series: [{
+							name: "折线",
+							type: "line",
+							color: "#2fc25b",
+							data: [150, 186, 205, 155, 96, 84]
+						},
+						{
+							name: "折线",
+							type: "line",
+							color: "#2fc25b",
+							data: [120, 140, 105, 170, 95, 160]
+						},
+						{
+							name: "点",
+							index: 2,
+							type: "point",
+							color: "#f04864",
+							data: [100, 80, 125, 150, 112, 132]
+						}
+					]
+				};
+				this.optsLine = opts
+				this.chartDataLine = JSON.parse(JSON.stringify(res));
+			},
+			changePowerTab(item) {
+				this.powerTabData.forEach(it => {
+					it.showColor = false
+					if (it.nameEN === item.nameEN) {
+						item.showColor = true
+						this.powerTab = it.nameEN
+					}
+				})
+				if (this.powerTab === 'DL') {
+					this.getPowerBar()
+				} else {
+					this.getLineBar()
+				}
+			},
+			changeYearTab(item) {
+				this.yearData.forEach(it => {
+					it.showColor = false
+					if (it.nameEN === item.nameEN) {
+						item.showColor = true
+						this.yearTab = it.nameEN
+					}
+				})
+			},
+			showProgress(item, index) {
+				let indexX = index
+				if (index > 9) {
+					indexX = index - 9
+				}
+				let proColor = ['#6C4B9E', '#323A97', '#4951B2', '#4287FF', '#3CB8FE', '#1AA7B5', '#5183B6', '#9F65C1',
+					'#766FF1'
+				]
+				let pro = ((item.inPower / item.allPower).toFixed(2)) * 100 + '%'
+				let showColor = proColor[indexX]
+				let ss = `width: ${pro};background: ${showColor}`
+				return ss
+			},
+
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #202246;
+	}
+
+	.power {
+		width: 100vw;
+		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
+		background-repeat: no-repeat, repeat;
+		background-size: 100% 260px, 100% 5px;
+
+		.box-bg {
+			width: 100vw;
+			padding: 5px 0;
+		}
+
+		.power_main {
+			padding: 0 20px;
+
+			.power_tab {
+				text {
+					display: inline-block;
+					width: 80px;
+					height: 25px;
+					border: 1px solid #4287FF;
+					text-align: center;
+					color: #4287FF;
+					line-height: 25px;
+					letter-spacing: 2px;
+				}
+			}
+
+			.fdwcl {
+				.fdwcl_title {
+					width: 130px;
+					height: 45px;
+					padding-left: 10px;
+					margin-top: 10px;
+					background: linear-gradient(90deg, #333976, transparent);
+					align-items: center;
+
+					image {
+						width: 24px;
+						height: 22px;
+					}
+
+					text {
+						margin-left: 10px;
+						font-size: 16px;
+						color: #fff;
+					}
+				}
+
+				.yearTab {
+					width: 80px;
+					height: 25px;
+					border-radius: 20px;
+					background: #0B143E;
+					margin-top: 20px;
+
+					text {
+						display: inline-block;
+						width: 40px;
+						height: 25px;
+						border-radius: 20px;
+						text-align: center;
+						color: #4287FF;
+						line-height: 25px;
+					}
+				}
+
+				.fdwcl_DataAll {
+					margin-top: 10px;
+
+					.fdwcl_Data {
+						.fdwcl_Data_1 {
+							image {
+								width: 18px;
+								height: 18px;
+							}
+
+							text {
+								margin-left: 5px;
+								font-size: 28upx;
+								color: #A49EAC;
+								position: relative;
+								top: 0px;
+							}
+						}
+
+						.fdwcl_Data_2 {
+							text {
+								font-size: 32upx;
+								color: #A49EAC;
+							}
+						}
+
+						.fdwcl_Data_3 {
+							text {
+								font-size: 28upx;
+								color: #A49EAC;
+							}
+						}
+					}
+
+					.fdwcl_Data_msg {
+						width: 100%;
+						height: 20px;
+						border-radius: 5px;
+						background: #0B143E;
+
+						.show_msg {
+							height: 20px;
+							background: #6C4B9E;
+							border-radius: 5px 0 0 5px;
+						}
+					}
+				}
+			}
+
+			.rdldb {
+				padding-bottom: 20px;
+
+				.rdldb_title {
+					width: 130px;
+					height: 45px;
+					padding-left: 10px;
+					margin-top: 10px;
+					background: linear-gradient(90deg, #333976, transparent);
+					align-items: center;
+
+					image {
+						width: 24px;
+						height: 22px;
+					}
+
+					text {
+						margin-left: 10px;
+						font-size: 16px;
+						color: #fff;
+					}
+				}
+
+				.qiun-charts {
+					width: 100%;
+					height: 300px;
+					margin: 10px 0;
+				}
+			}
+
+			.ycdl {
+				margin-top: 10px;
+
+				.ycdl_tits {
+					width: 160px;
+					height: 45px;
+					padding-left: 10px;
+					margin-top: 10px;
+					background: linear-gradient(90deg, #333976, transparent);
+					align-items: center;
+
+					image {
+						width: 24px;
+						height: 22px;
+					}
+
+					text {
+						margin-left: 10px;
+						font-size: 16px;
+						color: #fff;
+					}
+				}
+
+				.ycdl_station {
+
+					.ycdl_station_row {
+						margin: 10px 0;
+
+						.ycdl_station_col {
+							height: 65px;
+							width: 95%;
+							background-color: #2E336D;
+
+							.ycdl_data_col_top {
+								height: 40px;
+
+								text {
+									font-size: 28upx;
+									margin-left: 10px;
+								}
+
+								text:nth-of-type(1) {
+									color: #fff;
+									position: relative;
+									top: 8px;
+									font-size: 36upx;
+								}
+
+								text:nth-of-type(2) {
+									color: #6274A1;
+									position: relative;
+									top: 18px;
+								}
+							}
+
+							.ycdl_data_col_bot {
+								height: 25px;
+								background: #1AA7B5;
+
+								image {
+									width: 15px;
+									height: 15px;
+									position: relative;
+									top: 5px;
+									left: 5px;
+								}
+
+								text {
+									font-size: 28upx;
+									color: #fff;
+									margin-left: 10px;
+									line-height: 25px;
+								}
+							}
+						}
+					}
+				}
+
+				.ycdl_msg {
+					.ycdl_title {
+						image {
+							width: 15px;
+							height: 15px;
+							position: relative;
+							top: 3px;
+						}
+
+						text {
+							font-size: 32upx;
+							color: #676D9C;
+							margin-left: 10px;
+						}
+					}
+
+					.ycdl_data {
+						margin-top: 5px;
+
+						.ycdl_data_row {
+							.ycdl_data_col {
+								width: 98%;
+								height: 20px;
+								margin-bottom: 5px;
+								background: #2E336D;
+								border-radius: 5px;
+
+								.ycdl_data_col_left {
+									width: 50%;
+									height: 20px;
+									color: #fff;
+									font-size: 30upx;
+									background: #3F4572;
+									border-radius: 5px;
+
+									text {
+										margin-left: 5px;
+									}
+								}
+
+								.ycdl_data_col_right {
+									height: 20px;
+									color: #fff;
+									font-size: 32upx;
+									width: 48%;
+
+									text:nth-of-type(1) {
+										margin-left: 5px;
+										width: 50%;
+										font-size: 32upx;
+										color: #fff;
+										position: relative;
+										top: 3px;
+									}
+
+									text:nth-of-type(2) {
+										font-size: 22upx;
+										color: #96B5D5;
+										position: relative;
+										top: 4px;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.xsfsgl {
+				padding-bottom: 20px;
+
+				.xsfsgl_title {
+					width: 160px;
+					height: 45px;
+					padding-left: 10px;
+					margin-top: 10px;
+					background: linear-gradient(90deg, #333976, transparent);
+					align-items: center;
+
+					image {
+						width: 24px;
+						height: 22px;
+					}
+
+					text {
+						margin-left: 10px;
+						font-size: 16px;
+						color: #fff;
+					}
+				}
+
+				.qiun-chartsLine {
+					width: 100%;
+					height: 300px;
+					margin: 10px 0;
+				}
+			}
+		}
+
+	}
+</style>

pages/report/stationIndex.vue

@@ -0,0 +1,288 @@
+<template>
+	<view class="report">
+		<view class="box-bg">
+			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
+				@clickLeft="back" />
+		</view>
+		<view class="report_main">
+			<view class="report_DataAll" v-for="(item,index) in reportProgressData" :key="index">
+				<view class="report_Data flex justify-between">
+					<view class="report_Data_1 flex">
+						<image src="../../static/jnImage/indexPage/windIcon.png" mode=""></image>
+						<text>{{item.inPower}}</text>
+					</view>
+					<view class="report_Data_2">
+						<text>{{item.name}}</text>
+					</view>
+					<view class="report_Data_3">
+						<text>{{item.allPower}}</text>
+					</view>
+				</view>
+				<view class="report_Data_msg">
+					<view class="show_msg" :style="showProgress(item)">
+
+					</view>
+				</view>
+			</view>
+			<view class="yearTab">
+				<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
+					:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
+			</view>
+			<view class="reportTable">
+				<uni-table ref="table" border emptyText="暂无更多数据" width="100%">
+					<uni-tr>
+						<uni-th align="center">性能指标</uni-th>
+						<uni-th width="45" align="center">数据</uni-th>
+						<uni-th width="45" align="center">数据</uni-th>
+						<uni-th width="45" align="center">数据</uni-th>
+					</uni-tr>
+					<uni-tr v-for="(item, index) in tableData" :key="index">
+						<uni-td>{{ item.name }}</uni-td>
+						<uni-td align="center">{{ item.data1 }}</uni-td>
+						<uni-td align="center">{{ item.data2 }}</uni-td>
+						<uni-td align="center">{{ item.data3 }}</uni-td>
+					</uni-tr>
+				</uni-table>
+			</view>
+		</view>
+		<station-bar ref="stationBar"></station-bar>
+	</view>
+</template>
+
+<script>
+	import stationBar from '../common/stationTab.vue'
+	export default {
+		onLoad: function() {
+			this.stationName = uni.getStorageSync('stationName')
+		},
+		components: {
+			stationName: '',
+			stationBar
+		},
+		data() {
+			return {
+				stationName: '',
+				reportProgressData: [],
+				yearTab: 'day',
+				yearData: [],
+				tableData: []
+			}
+		},
+		created() {
+			this.tableData = [{
+					name: '指标一',
+					data1: '2.8',
+					data2: '3.6',
+					data3: '4.8'
+				},
+				{
+					name: '指标二',
+					data1: '2.8',
+					data2: '3.6',
+					data3: '4.8'
+				},
+				{
+					name: '指标三',
+					data1: '2.8',
+					data2: '3.6',
+					data3: '4.8'
+				},
+			]
+			this.reportProgressData = [{
+					inPower: '961万kWh',
+					allPower: '1865万kWh',
+					progress: '70%',
+					name: '年发电量'
+				},
+				{
+					inPower: '171天',
+					allPower: '365天',
+					progress: '56%',
+					name: '日历进度'
+				},
+				{
+					inPower: '日历进程',
+					allPower: '年发电量',
+					progress: '65%',
+					name: '完成度'
+				},
+			]
+			this.yearData = [{
+					nameZN: '日简报',
+					nameEN: 'day',
+					showColor: true
+				},
+				{
+					nameZN: '月简报',
+					nameEN: 'month',
+					showColor: false
+				},
+				{
+					nameZN: '年简报',
+					nameEN: 'year',
+					showColor: false
+
+				}
+			]
+		},
+		mounted() {
+			this.$refs.stationBar.showTab = '数据简报'
+		},
+		methods: {
+			back() {
+				this.$tab.switchTab('/pages/report/index')
+			},
+			showProgress(item) {
+				return `width: ${item.progress};`
+			},
+			changeMsg() {
+				this.$tab.navigateTo('/pages/common/messagePage')
+			},
+			changeStation() {
+				this.$tab.navigateTo('/pages/common/stationListPage')
+			},
+			changeYearTab(item) {
+				this.yearData.forEach(it => {
+					it.showColor = false
+					if (it.nameEN === item.nameEN) {
+						item.showColor = true
+						this.yearTab = it.nameEN
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #202246;
+	}
+
+	.report {
+		width: 100vw;
+		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
+		background-repeat: no-repeat, repeat;
+		background-size: 100% 260px, 100% 5px;
+
+		.box-bg {
+			width: 100vw;
+			padding: 5px 0;
+		}
+
+		.report_main {
+			padding: 0 20px;
+
+			.report_DataAll {
+				margin-top: 10px;
+
+				.report_Data {
+					.report_Data_1 {
+						image {
+							width: 18px;
+							height: 18px;
+						}
+
+						text {
+							margin-left: 5px;
+							font-size: 28upx;
+							color: #A49EAC;
+							position: relative;
+							top: 0px;
+						}
+					}
+
+					.report_Data_2 {
+						text {
+							font-size: 32upx;
+							color: #A49EAC;
+						}
+					}
+
+					.report_Data_3 {
+						text {
+							font-size: 28upx;
+							color: #A49EAC;
+						}
+					}
+				}
+
+				.report_Data_msg {
+					width: 100%;
+					height: 20px;
+					border-radius: 5px;
+					background: #0B143E;
+
+					.show_msg {
+						height: 20px;
+						background: #00BC6F;
+						border-radius: 5px 0 0 5px;
+					}
+				}
+			}
+
+			.yearTab {
+				width: 99%;
+				height: 30px;
+				border-radius: 5px;
+				background: #0B143E;
+				margin-top: 20px;
+
+				text {
+					display: inline-block;
+					width: 33%;
+					height: 30px;
+					text-align: center;
+					color: #4287FF;
+					line-height: 30px;
+				}
+
+				text:nth-of-type(1) {
+					border-radius: 5px 0 0 5px;
+				}
+
+				text:nth-of-type(3) {
+					border-radius: 0 5px 5px 0;
+				}
+			}
+
+			.reportTable {
+				width: 100%;
+				margin-top: 10px;
+
+				.table--border {
+					border: 1px solid rgba(255, 255, 255, 0.3);
+				}
+
+				.uni-table {
+					background-color: rgba(255, 255, 255, 0);
+
+					.uni-table-tr {
+						.table--border {
+							border: 1px solid rgba(255, 255, 255, 0.3);
+						}
+
+						.uni-table-th {
+							background-color: #2E336D;
+						}
+
+						.uni-table-th,
+						.uni-table-td {
+							color: #fff;
+							font-size: 26upx;
+
+						}
+
+						.uni-table-th:nth-of-type(1) {
+							background-color: #6C4B9E;
+						}
+					}
+
+					.uni-table-tr:hover {
+						background-color: rgba(255, 255, 255, 0);
+					}
+				}
+			}
+		}
+	}
+</style>

pages/type/stationIndex.vue

@@ -0,0 +1,591 @@
+<template>
+	<view class="faultType">
+		<view class="box-bg">
+			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
+				@clickLeft="back" />
+		</view>
+		<view class="faultType_main">
+			<view class="flex justify-center">
+				<view class="faultType_tab">
+					<text v-for="(item,index) in faultTypeTabData" :key="index" @click="changefaultTypeTab(item)"
+						:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
+				</view>
+			</view>
+			<view class="gzcs">
+				<view class="flex justify-between">
+					<view class="gzcs_title flex justify-center">
+						<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""
+							v-if="faultTypeTab === 'XT'"></image>
+						<image src="../../static/jnImage/powerPage/cishu.png" mode="" v-else></image>
+						<text>故障次数</text>
+					</view>
+					<view class="yearTab">
+						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
+							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
+					</view>
+				</view>
+				<view class="qiun-chartsPie">
+					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
+				</view>
+				<view class="gzcs_data">
+					<uni-row class="gzcs_data_row">
+						<uni-col :span="12" v-for="(item,index) in faultTypeData" :key="index">
+							<view class="gzcs_data_col flex">
+								<view class="gzcs_data_col_left" :style="showColor(item)">
+									<text>{{item.name}}</text>
+								</view>
+								<view class=" gzcs_data_col_right flex justify-between">
+									<text>{{item.data}}</text>
+									<text>次</text>
+								</view>
+							</view>
+						</uni-col>
+					</uni-row>
+				</view>
+				<view class="heji flex" v-if="faultTypeTab === 'JX'">
+					<view class="heji_img">
+						<image src="../../static/jnImage/powerPage/heji.png" mode=""></image>
+					</view>
+					<view class="heji_msg flex justify-between">
+						<view class="heji_msg_tit">
+							<text>公司合计</text>
+						</view>
+						<view class="heji_msg_data flex justify-between">
+							<text>600</text>
+							<text>次</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="ssdl">
+				<view class="flex justify-between">
+					<view class="gzcs_title flex justify-center">
+						<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""
+							v-if="faultTypeTab === 'XT'"></image>
+						<image src="../../static/jnImage/powerPage/sunshi.png" mode="" v-else></image>
+						<text>损失电量</text>
+					</view>
+					<view class="yearTab">
+						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
+							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
+					</view>
+				</view>
+				<view class="qiun-chartsPie">
+					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
+				</view>
+				<view class="gzcs_data">
+					<uni-row class="gzcs_data_row">
+						<uni-col :span="12" v-for="(item,index) in faultTypeData" :key="index">
+							<view class="gzcs_data_col flex">
+								<view class="gzcs_data_col_left" :style="showColor(item)">
+									<text>{{item.name}}</text>
+								</view>
+								<view class=" gzcs_data_col_right flex justify-between">
+									<text>{{item.data}}</text>
+									<text>次</text>
+								</view>
+							</view>
+						</uni-col>
+					</uni-row>
+				</view>
+				<view class="heji flex" v-if="faultTypeTab === 'JX'">
+					<view class="heji_img">
+						<image src="../../static/jnImage/powerPage/heji.png" mode=""></image>
+					</view>
+					<view class="heji_msg flex justify-between">
+						<view class="heji_msg_tit">
+							<text>公司合计</text>
+						</view>
+						<view class="heji_msg_data flex justify-between">
+							<text>600</text>
+							<text>次</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="wxss">
+				<view class="flex justify-between">
+					<view class="gzcs_title flex justify-center">
+						<image src="../../static/jnImage/powerPage/powerDayIcon.png" mode=""
+							v-if="faultTypeTab === 'XT'"></image>
+						<image src="../../static/jnImage/powerPage/wuxiang.png" mode="" v-else></image>
+						<text>五项损失</text>
+					</view>
+					<view class="yearTab">
+						<text v-for="(item,index) in yearData" :key="index" @click="changeYearTab(item)"
+							:style="item.showColor ? 'background: #4287FF;color:#fff': ''">{{item.nameZN}}</text>
+					</view>
+				</view>
+				<view class="qiun-chartsPie">
+					<qiun-data-charts type="ring" :opts="opts" :chartData="chartDatawxss" />
+				</view>
+				<view class="gzcs_data">
+					<uni-row class="gzcs_data_row">
+						<uni-col :span="12" v-for="(item,index) in wxssTypeData" :key="index">
+							<view class="gzcs_data_col flex">
+								<view class="gzcs_data_col_left" :style="showColor(item)">
+									<text>{{item.name}}</text>
+								</view>
+								<view class=" gzcs_data_col_right flex justify-between">
+									<text>{{item.data}}</text>
+									<text>次</text>
+								</view>
+							</view>
+						</uni-col>
+					</uni-row>
+				</view>
+			</view>
+		</view>
+		<station-bar ref="stationBar"></station-bar>
+	</view>
+</template>
+
+<script>
+	import stationBar from '../common/stationTab.vue'
+	export default {
+		onLoad: function() {
+			this.stationName = uni.getStorageSync('stationName')
+		},
+		components: {
+			stationBar
+		},
+		data() {
+			return {
+				stationName: '',
+				faultTypeTab: 'XT',
+				faultTypeTabData: [],
+				yearTab: '',
+				yearData: [],
+				chartData: {},
+				chartDatawxss: {},
+				opts: {},
+				faultTypeData: [],
+				wxssTypeData: [],
+				opts: {
+					rotate: false,
+					fontColor: '#909BA9',
+					rotateLock: false,
+					color: ['#5CB2EF', '#3E78C5', '#00299D', '#3EAD9F', '#3F3A99', '#5EAC88', '#5D56D0', '#CD8D23',
+						'#9F65C1', '#FD8974', '#C745B9', '#FF6B3E',
+					],
+					padding: [5, 5, 5, 5],
+					dataLabel: true,
+					enableScroll: false,
+					legend: {
+						show: false,
+					},
+					title: {
+						show: false,
+						name: "",
+						fontSize: 5,
+						color: "#666666"
+					},
+					subtitle: {
+						show: false,
+						name: "",
+						fontSize: 5,
+						color: "#7cb5ec"
+					},
+					extra: {
+						ring: {
+							ringWidth: 20,
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							centerColor: '#202246',
+							offsetAngle: 0,
+							labelWidth: 10,
+							border: false,
+						}
+					}
+				}
+			}
+		},
+		created() {
+			this.faultTypeTabData = [{
+					nameZN: '系统',
+					nameEN: 'XT',
+					showColor: true
+				},
+				{
+					nameZN: '机型',
+					nameEN: 'JX',
+					showColor: false
+
+				}
+			]
+			this.yearData = [{
+					nameZN: '日',
+					nameEN: 'day',
+					showColor: true
+				},
+				{
+					nameZN: '月',
+					nameEN: 'month',
+					showColor: false
+				},
+				{
+					nameZN: '年',
+					nameEN: 'year',
+					showColor: false
+
+				}
+			]
+			this.faultTypeData = [{
+					data: 1865,
+					name: '发电机'
+				},
+				{
+					data: 1865,
+					name: '传动变速'
+				},
+				{
+					data: 696,
+					name: '远程监控'
+				},
+				{
+					data: 527,
+					name: '电气控制'
+				},
+				{
+					data: 935,
+					name: '变桨'
+				},
+				{
+					data: 1022,
+					name: '变频'
+				},
+				{
+					data: 752,
+					name: '电源'
+				},
+				{
+					data: 1520,
+					name: '机舱与塔架'
+				},
+				{
+					data: 365.6,
+					name: '风轮'
+				},
+				{
+					data: 365,
+					name: '偏航'
+				},
+				{
+					data: 256,
+					name: '液压'
+				},
+				{
+					data: 214,
+					name: '通讯'
+				},
+			]
+			this.wxssTypeData = [{
+					data: 1865,
+					name: '发电机'
+				},
+				{
+					data: 1865,
+					name: '传动变速'
+				},
+				{
+					data: 696,
+					name: '远程监控'
+				},
+				{
+					data: 527,
+					name: '电气控制'
+				},
+				{
+					data: 935,
+					name: '变桨'
+				},
+				{
+					data: 1022,
+					name: '变频'
+				}
+			]
+		},
+		mounted() {
+			this.$refs.stationBar.showTab = '故障分类'
+			this.getPieBar()
+			this.getPieBarwxss()
+		},
+		methods: {
+			back() {
+				this.$tab.switchTab('/pages/type/index')
+			},
+			getPieBar() {
+				let proColor = ['#5CB2EF', '#3E78C5', '#00299D', '#3EAD9F', '#3F3A99', '#5EAC88', '#5D56D0', '#CD8D23',
+					'#9F65C1', '#FD8974', '#C745B9', '#FF6B3E'
+				]
+
+				let series = []
+				this.faultTypeData.forEach((item, index) => {
+					let obj = {
+						name: item.name,
+						value: item.data,
+					}
+					proColor.forEach((it, idx) => {
+						if (index.toString().length > 1) {
+							obj.color = proColor[index.toString().slice(-1)]
+							item.color = proColor[index.toString().slice(-1)]
+						} else {
+							obj.color = proColor[index]
+							item.color = proColor[index]
+						}
+					})
+					series.push(obj)
+				})
+				let res = {
+					series: [{
+						data: series
+					}]
+				};
+				this.chartData = JSON.parse(JSON.stringify(res));
+			},
+			changeMsg() {
+				this.$tab.navigateTo('/pages/common/messagePage')
+			},
+			changeStation() {
+				this.$tab.navigateTo('/pages/common/stationListPage')
+			},
+			getPieBarwxss() {
+				let proColor = ['#5CB2EF', '#3E78C5', '#00299D', '#3EAD9F', '#3F3A99', '#5EAC88', '#5D56D0', '#CD8D23',
+					'#9F65C1', '#FD8974', '#C745B9', '#FF6B3E'
+				]
+
+				let series = []
+				this.wxssTypeData.forEach((item, index) => {
+					let obj = {
+						name: item.name,
+						value: item.data,
+					}
+					proColor.forEach((it, idx) => {
+						if (index.toString().length > 1) {
+							obj.color = proColor[index.toString().slice(-1)]
+							item.color = proColor[index.toString().slice(-1)]
+						} else {
+							obj.color = proColor[index]
+							item.color = proColor[index]
+						}
+					})
+					series.push(obj)
+				})
+				let res = {
+					series: [{
+						data: series
+					}]
+				};
+				this.chartDatawxss = JSON.parse(JSON.stringify(res));
+			},
+			showColor(item) {
+				return `background: ${item.color}`
+			},
+			changefaultTypeTab(item) {
+				this.faultTypeTabData.forEach(it => {
+					it.showColor = false
+					if (it.nameEN === item.nameEN) {
+						item.showColor = true
+						this.faultTypeTab = it.nameEN
+					}
+				})
+				// if (this.faultTypeTab === 'XT') {
+				// 	this.getPowerBar()
+				// } else {
+				// 	this.getLineBar()
+				// }
+			},
+			changeYearTab(item) {
+				this.yearData.forEach(it => {
+					it.showColor = false
+					if (it.nameEN === item.nameEN) {
+						item.showColor = true
+						this.yearTab = it.nameEN
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #202246;
+	}
+
+	.faultType {
+		width: 100vw;
+		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
+		background-repeat: no-repeat, repeat;
+		background-size: 100% 260px, 100% 5px;
+
+		.box-bg {
+			width: 100vw;
+			padding: 5px 0;
+		}
+
+		.faultType_main {
+			padding: 0 20px;
+
+			.faultType_tab {
+				text {
+					display: inline-block;
+					width: 80px;
+					height: 25px;
+					border: 1px solid #4287FF;
+					text-align: center;
+					color: #4287FF;
+					line-height: 25px;
+					letter-spacing: 2px;
+				}
+			}
+
+			.gzcs,
+			.ssdl,
+			.wxss {
+				.gzcs_title {
+					width: 130px;
+					height: 45px;
+					padding-left: 10px;
+					margin-top: 10px;
+					background: linear-gradient(90deg, #333976, transparent);
+					align-items: center;
+
+					image {
+						width: 24px;
+						height: 22px;
+					}
+
+					text {
+						margin-left: 10px;
+						font-size: 16px;
+						color: #fff;
+					}
+				}
+
+				.yearTab {
+					width: 120px;
+					height: 25px;
+					border-radius: 20px;
+					background: #0B143E;
+					margin-top: 20px;
+
+					text {
+						display: inline-block;
+						width: 40px;
+						height: 25px;
+						border-radius: 20px;
+						text-align: center;
+						color: #4287FF;
+						line-height: 25px;
+					}
+				}
+
+				.qiun-chartsPie {
+					width: 100%;
+					height: 200px;
+					margin: 10px 0;
+				}
+
+				.gzcs_data {
+					margin-top: 5px;
+
+					.gzcs_data_row {
+						.gzcs_data_col {
+							width: 98%;
+							height: 20px;
+							margin-bottom: 5px;
+							background: #2E336D;
+
+							.gzcs_data_col_left {
+								width: 50%;
+								height: 20px;
+								color: #fff;
+								font-size: 30upx;
+								background: #3F4572;
+
+								text {
+									margin-left: 5px;
+								}
+							}
+
+							.gzcs_data_col_right {
+								height: 20px;
+								color: #fff;
+								font-size: 32upx;
+								width: 48%;
+
+								text:nth-of-type(1) {
+									margin-left: 5px;
+									width: 50%;
+									font-size: 32upx;
+									color: #fff;
+									position: relative;
+									top: 3px;
+								}
+
+								text:nth-of-type(2) {
+									font-size: 22upx;
+									color: #96B5D5;
+									position: relative;
+									top: 4px;
+								}
+							}
+						}
+					}
+				}
+
+				.heji {
+					width: 100%;
+					height: 30px;
+					background: rgba(67, 89, 255, 0.5);
+
+					.heji_img {
+						width: 20%;
+						height: 30px;
+						border-right: 1px solid rgba(255, 255, 255, 0.5);
+
+						image {
+							width: 24px;
+							height: 22px;
+						}
+					}
+
+					.heji_msg {
+						width: 80%;
+						color: #fff;
+
+						.heji_msg_tit {
+							width: 50%;
+
+							text {
+								margin-left: 15px;
+								font-size: 28upx;
+								position: relative;
+								top: 6px;
+							}
+						}
+
+						.heji_msg_data {
+							width: 50%;
+
+							text:nth-of-type(1) {
+								font-size: 36upx;
+								position: relative;
+								top: 6px;
+							}
+
+							text:nth-of-type(2) {
+								font-size: 22upx;
+								margin-right: 5px;
+								position: relative;
+								top: 8px;
+							}
+						}
+					}
+				}
+			}
+		}
+
+	}
+</style>

pages/warn/stationIndex.vue

@@ -0,0 +1,384 @@
+<template>
+	<view class="warn">
+		<view class="box-bg">
+			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
+				@clickLeft="back" />
+		</view>
+		<view class="warn_main">
+			<view class="warn_main_one">
+				<view class="warn_main_one_top flex justify-between">
+					<view class="warn_main_one_top_left">
+						<image src="../../static/jnImage/powerPage/warnOne.png" mode=""></image>
+						<text>离线</text>
+					</view>
+					<view class="warn_main_one_top_right">
+						<text>88</text>
+					</view>
+				</view>
+				<view class="warn_main_one_bot">
+					<uni-row class="warn_data_row">
+						<uni-col :span="12" v-for="(item,index) in warnData" :key="index">
+							<view class="warn_data_col flex">
+								<view class="warn_data_col_left">
+									<text>{{item.name}}</text>
+								</view>
+								<view class="warn_data_col_right flex justify-between">
+									<text>{{item.inPower}}</text>
+									<text>台</text>
+								</view>
+							</view>
+						</uni-col>
+					</uni-row>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:10px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnTwo.png" mode=""></image>
+					<text>实时故障预警</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #F14E51;">
+					<text>88</text>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:1px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnThree.png" mode=""></image>
+					<text>阈值预警</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #1A41AD;">
+					<text>88</text>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:1px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnFour.png" mode=""></image>
+					<text>温升预警</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #3963AB;">
+					<text>88</text>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:1px 0 10px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnFive.png" mode=""></image>
+					<text>差值预警</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #4E8CC8;">
+					<text>88</text>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:1px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnSix.png" mode=""></image>
+					<text>风场平均风速达标未启机预警</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #208A73;">
+					<text>88</text>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:1px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnSeven.png" mode=""></image>
+					<text>风机平均风速达标未启机预警</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #5EAC88;">
+					<text>88</text>
+				</view>
+			</view>
+			<view class="warn_main_com flex justify-between" style="margin:1px 0">
+				<view class="warn_main_com_left">
+					<image src="../../static/jnImage/powerPage/warnEight.png" mode=""></image>
+					<text>设备更换周期提醒</text>
+				</view>
+				<view class="warn_main_com_right" style="background-color: #43B99F;">
+					<text>88</text>
+				</view>
+			</view>
+		</view>
+		<station-bar ref="stationBar"></station-bar>
+	</view>
+</template>
+
+<script>
+	import stationBar from '../common/stationTab.vue'
+	export default {
+		onLoad: function() {
+			this.stationName = uni.getStorageSync('stationName')
+		},
+		components: {
+			stationBar
+		},
+		data() {
+			return {
+				stationName: '',
+				warnData: []
+			}
+		},
+		created() {
+			this.warnData = [{
+					inPower: 961,
+					allPower: 1865,
+					name: '宝龙山'
+				},
+				{
+					inPower: 852,
+					allPower: 1865,
+					name: '乌力吉'
+				},
+				{
+					inPower: 696,
+					allPower: 1865,
+					name: '浩日格吐'
+				},
+				{
+					inPower: 527,
+					allPower: 1865,
+					name: '开鲁'
+				},
+				{
+					inPower: 935,
+					allPower: 1865,
+					name: '景观'
+				},
+				{
+					inPower: 1022,
+					allPower: 1865,
+					name: '高力板'
+				},
+				{
+					inPower: 752,
+					allPower: 1865,
+					name: '书声'
+				},
+				{
+					inPower: 1520,
+					allPower: 1865,
+					name: '宝力根花'
+				},
+				{
+					inPower: 365.6,
+					allPower: 1865,
+					name: '振发'
+				}
+			]
+		},
+		mounted() {
+			this.$refs.stationBar.showTab = '故障预警'
+		},
+		methods: {
+			back() {
+				this.$tab.switchTab('/pages/warn/index')
+			},
+			changeMsg() {
+				this.$tab.navigateTo('/pages/common/messagePage')
+			},
+			changeStation() {
+				this.$tab.navigateTo('/pages/common/stationListPage')
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #202246;
+	}
+
+	.warn {
+		width: 100vw;
+		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
+		background-repeat: no-repeat, repeat;
+		background-size: 100% 260px, 100% 5px;
+
+		.home_header {
+			width: calc(100% -32px);
+			display: flex;
+			justify-content: space-between;
+			height: 60px;
+			padding-top: 16px;
+			// position: fixed;
+
+			.header_message {
+				width: 15%;
+
+				image {
+					position: relative;
+					top: 5px;
+					left: 10px;
+					width: 25px;
+					height: 25px;
+				}
+			}
+
+			.header_title {
+				width: 70%;
+				position: relative;
+				left: 5px;
+
+				image {
+					width: 28px;
+					height: 22px;
+					position: relative;
+					top: 5px;
+				}
+
+				.titleName {
+					line-height: 20px;
+					font-size: 36upx;
+					font-family: FZZhengHeiS-M-GB;
+					font-weight: 600;
+					color: #fff;
+					position: relative;
+					top: 8px;
+				}
+			}
+
+			.header_more {
+				width: 15%;
+				position: relative;
+				top: 10px;
+				left: 10px;
+
+				image {
+					width: 25px;
+					height: 18px;
+				}
+			}
+		}
+
+		.warn_main {
+			padding: 0 20px;
+
+			.warn_main_one {
+				padding: 5px 10px;
+				background-color: #3F4572;
+				border-radius: 5px;
+
+				.warn_main_one_top {
+					.warn_main_one_top_left {
+						image {
+							width: 30px;
+							height: 30px;
+							position: relative;
+							top: 1px;
+							margin-right: 5px;
+						}
+
+						text {
+							font-size: 30upx;
+							color: #9A9BA6;
+							position: relative;
+							top: -10px;
+						}
+					}
+
+					.warn_main_one_top_right {
+						width: 20px;
+						height: 20px;
+						background-color: #686868;
+						text-align: center;
+						border-radius: 10px;
+						position: relative;
+						top: 6px;
+
+						text {
+							color: #fff;
+							position: relative;
+							top: 4px;
+						}
+					}
+
+				}
+
+				.warn_main_one_bot {
+					margin-top: 5px;
+
+					.warn_data_row {
+						.warn_data_col {
+							width: 98%;
+							height: 20px;
+							margin-bottom: 5px;
+							background: #2E336D;
+							border-radius: 5px;
+
+							.warn_data_col_left {
+								width: 50%;
+								height: 20px;
+								color: #fff;
+								font-size: 30upx;
+								background: #0B143E;
+								border-radius: 5px;
+
+								text {
+									margin-left: 5px;
+								}
+							}
+
+							.warn_data_col_right {
+								height: 20px;
+								color: #fff;
+								font-size: 32upx;
+								width: 48%;
+
+								text:nth-of-type(1) {
+									margin-left: 5px;
+									width: 50%;
+									font-size: 32upx;
+									color: #fff;
+									position: relative;
+									top: 3px;
+								}
+
+								text:nth-of-type(2) {
+									font-size: 22upx;
+									color: #96B5D5;
+									position: relative;
+									top: 3px;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.warn_main_com {
+				padding: 5px 10px;
+				background-color: #3F4572;
+				border-radius: 5px;
+
+				.warn_main_com_left {
+					image {
+						width: 30px;
+						height: 30px;
+						position: relative;
+						top: 1px;
+						margin-right: 5px;
+					}
+
+					text {
+						font-size: 30upx;
+						color: #9A9BA6;
+						position: relative;
+						top: -10px;
+					}
+				}
+
+				.warn_main_com_right {
+					width: 20px;
+					height: 20px;
+					text-align: center;
+					border-radius: 10px;
+					position: relative;
+					top: 6px;
+
+					text {
+						color: #fff;
+						position: relative;
+						top: 4px;
+					}
+				}
+			}
+		}
+
+	}
+</style>