jn_app/pages/warn/index.vue

<template>
	<view class="warn">
		<view class="home_header">
			<view class="header_message" @click="changeMsg">
				<image src="../../static/jnImage/indexPage/alarmSet.png"></image>
			</view>
			<view class="header_title">
				<!-- <image src="../../static/jnImage/loginPage/logo.png" mode=""></image> -->
				<text class="titleName">发电场站生产实时运营管理平台</text>
			</view>
			<view class="header_more" @click="changeStation">
				<image src="../../static/jnImage/indexPage/moreNew.png"></image>
			</view>
		</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>
	</view>
</template>

<script>
	export default {
		onLoad: function() {},
		data() {
			return {
				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: '振发'
				}
			]
		},
		methods: {
			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>