jn_app/pages/warn/faultWarnIndex.vue

<template>
	<view class="faultwarn">
		<company-header></company-header>
		<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 {
				faultwarnData: []
			}
		},
		created() {
			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: "",
					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
					}
				})
			},
			//获取时间
			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;
	}

	.faultwarn {
		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;

		.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>