jn_app/pages/warn/stationIndex.vue

<template>
	<view class="stationfaultwarn">
		<view class="box-bg">
			<uni-nav-bar :fixed="true" dark left-icon="left" background-color='#202246' :title="stationName"
				@clickLeft="back" />
		</view>
		<view class="falutWarn_main">
			<view class="faultwarn_main_com flex" style="margin:10px 0" v-for="(item,index) in faultwarnData"
				:key="index">
				<view class="faultwarn_main_com_left">
					<view class="faultwarnLeftTop">{{item.name}}</view>
					<view class="faultwarnLeftBot">{{item.code}}</view>
				</view>
				<view class="faultwarn_main_com_right">
					<view class="faultwarnRightTop" :style="getSty(item)">{{item.description}}
					</view>
					<view class="faultwarnRightBot" :style="getSty(item)">{{getTimeDaya(item.ts)}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import companyHeader from '../common/companyHeader.vue'
	import {
		companyhistoryFindAlarmlistApi
	} from '../../api/warn.js'
	export default {
		onLoad: function() {},
		components: {
			companyHeader
		},
		data() {
			return {
				stationName: '',
				stationWpid: '',
				faultwarnData: []
			}
		},
		created() {
			this.stationName = uni.getStorageSync('stationName')
			this.stationWpid = uni.getStorageSync('stationWpid')
			// this.faultwarnData = [{
			// 		name: '乌力吉',
			// 		code: 'A25',
			// 		reson: '通讯站点诊断类故障',
			// 		date: '2017-01-06  13:34:34'
			// 	},
			// 	{
			// 		name: '宝龙山',
			// 		code: 'A25',
			// 		reson: '通讯站点诊断类故障通讯站点诊断类故障通 讯站点诊断类故障',
			// 		date: '2017-01-06  13:34:34'
			// 	},
			// ]
			this.getcompanyhistoryFindAlarmlist()
		},
		methods: {
			//获取故障数据
			getcompanyhistoryFindAlarmlist() {
				let that = this
				that.faultwarnData = []
				let params = {
					pageNum: 1,
					pageSize: 50,
					alarmId: "",
					alarmType: 'windturbine',
					deviceType: '',
					stationid: that.stationWpid,
					deviceid: "",
					modelId: "",
					components: "",
					description: "",
					isclose: false,
					begin: that.getTimeDaya(new Date().getTime() - 60 * 60 * 1000),
					end: that.getTimeDaya(new Date().getTime()),
				};
				companyhistoryFindAlarmlistApi(params).then(res => {
					if (res && res.data.ls.length > 0) {
						that.faultwarnData = res.data.ls
					}
				})
			},
			back() {
				this.$tab.switchTab('/pages/home/index')
			},
			//获取时间
			getTimeDaya(date) {
				let currentDate = new Date(date)
				let year = currentDate.getFullYear()
				let month = currentDate.getMonth() + 1
				let day = currentDate.getDate()
				let hour = currentDate.getHours() + ':'
				let minute = currentDate.getMinutes() < 10 ? '0' + currentDate.getMinutes() : currentDate
					.getMinutes()
				let second = currentDate.getSeconds();
				return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
			},
			getSty(item) {
				let sty = ''
				if (item.reson.length > 16) {
					sty = 'top: 5px'
				} else {
					sty = 'top: 15px'
				}
				return sty
			},
			changeMsg() {
				this.$tab.navigateTo('/pages/common/messagePage')
			},
			changeStation() {
				this.$tab.navigateTo('/pages/common/stationListPage')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.stationfaultwarn {
		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: 0;

			.uni-navbar {
				.uni-navbar__content {
					padding: 5px 0;
					height: 50px;
				}
			}
		}

		.falutWarn_main {
			padding: 0 20px;

			.faultwarn_main_com {
				height: 60px;
				background: #3F4572;
				border-radius: 5px;

				.faultwarn_main_com_left {
					width: 20%;
					background-color: #610900;
					color: #fff;
					border-radius: 5px 0 0 5px;
					text-align: center;

					.faultwarnLeftTop {
						font-size: 30upx;
						position: relative;
						top: 15px;
					}

					.faultwarnLeftBot {
						position: relative;
						top: 20px;
					}
				}

				.faultwarn_main_com_right {
					padding-left: 10px;
					width: 80%;

					.faultwarnRightTop {
						margin-bottom: 5px;
						color: #6A98CB;
						font-size: 30upx;
						position: relative;
						// top: 5px;
					}

					.faultwarnRightBot {
						color: #9A9BA6;
						position: relative;
						// top: 5px;
					}
				}
			}
		}
	}
</style>