tsg-app/pages/yj/index.vue

<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar title="预警" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
		
		<view class="" style="margin-top:44px;border-top: 1px solid #f0f0f0;">
			<view class="align-center" style="height: 44px;background-color: #f0f0f0;font-size: 12px;padding: 0 10px;">
				预警时间：{{model.start}} 至 {{model.end}}
			</view>
			<view class="itemYj">
				<view class="itemYjCont" v-for="(value,key) of list" >
					<view class="item" @click="todetail(key,value)">
						<view :style="`color:${!getValue(value)?'#D9001B':'#04D919'} ;`" class="num">
							{{getValue(value)}}
						</view>
						<view class="title">
							{{mapType[key]}}
						</view>
					</view>
				</view>
			</view>
			

		</view>
		<u-calendar :show="show" mode="range" @confirm="confirm" @cancel='cancel'></u-calendar>
	</view>
</template>

<script>
	import moment from 'moment'

	export default {
		data() {
			return {
				show: false,
				model: {
					start: moment().subtract(1,'day').format('YYYY-MM-DD HH:mm:ss'),
					end: moment().format('YYYY-MM-DD HH:mm:ss')
				},
				mapType:{
					aiWarnCount:'AI告警',
					rzWarn:"水位告警",
					qxWarn:'气象告警',
					pressWarn:'渗流告警',
					flowWarn:'渗压告警',
					shiftWarn:'位移告警'
				},
				list: {rzWarn:"正常(-4.031)",flowWarn:[],pressWarn:[],qxWarn:[],shiftWarn:[],aiWarnCount: 0,}
			};
		},
		onLoad() {
			
			this.getList()
		},
		methods: {
			getValue(value){
				if(Array.isArray(value)){
					return value.length
				}else{
					return value
				}
			},
			confirm(e) {
				console.log(e);
				this.model.stm = e[0]
				this.model.etm = e[1]
				this.show = false
			},
			cancel() {
				this.show = false
			},
			todetail(key,e){
				let arr = encodeURIComponent(JSON.stringify(e))
				console.log(key,e.length?.length);
				if(!e.length?.length){
					return;
				}
				if(key=='qxWarn'){
					uni.navigateTo({
						url:'/pages/yj/detail/qxyj?list='+arr
					})
				}
				if(key == 'shiftWarn'){
					uni.navigateTo({
						url:'/pages/yj/detail/wyyj?list='+arr
					})
				}
				if(key == 'flowWarn'){
					uni.navigateTo({
						url:'/pages/yj/detail/wyyj?list='+arr
					})
				}
				if(key == 'pressWarn'){
					uni.navigateTo({
						url:'/pages/yj/detail/wyyj?list='+arr
					})
				}
				if(key == 'aiWarnCount'){
					uni.navigateTo({
						url:'/pages/yj/detail/aiyj?list='+arr
					})
				}
			},
			getList(){
				uni.$http.post('/gunshiApp/xyt/stQxWarnR/home/warn',this.model).then(res=>{
					this.list = res.data.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.itemYj{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px;
		.itemYjCont{
			    border-width: 0px;
			    width: 112px;
			    height: 85px;
			    background: inherit;
			    background-color: rgba(234, 244, 254, 1);
			    border: none;
			    border-radius: 5px;
			    -moz-box-shadow: none;
			    -webkit-box-shadow: none;
			    box-shadow: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 10px;
				.item{
					text-align: center;
				}
				.normal{
					color: #04D919;
					}
				.bj{
					color:#D9001B;
				}
			// width: 30%;
			// margin: 5px;
		}
	}
	
</style>