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:${getColor(value)};`" 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: '位移告警',
				byWarn: '白蚁告警'
			},
			list: {
				rzWarn: "正常(-4.031)",
				flowWarn: [],
				pressWarn: [],
				// qxWarn:[],
				shiftWarn: [],
				aiWarnCount: 0,
				byWarn: 0
			}
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getValue(value) {
			if (Array.isArray(value)) {
				return value.length
			} else {
				return value
			}
		},
		getColor(value) {
			let str = '';
			str = this.getValue(value) + '';
			return str.includes("正常") ? '#04D919' : '#D9001B'
		},
		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);
			if (!e.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
				})
			}
			if (key == 'byWarn') {
				uni.navigateTo({
					url: '/pages/yj/detail/byTable?list=' + arr
				})
			}
		},
		getList() {
			uni.$http.post('/gunshiApp/tsg/stQxWarnR/home/warn', this.model).then(res => {
				delete res.data.data.qxWarn;
				this.list = res.data.data
			})
		},
		
	
	}
}
</script>

<style lang="scss" scoped>
.itemYj {
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	// column-gap: 8px;
	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;
		margin-right: 1px;

		.item {
			text-align: center;
		}

		.normal {
			color: #04D919;
		}

		.bj {
			color: #D9001B;
		}

		// width: 30%;
		// margin: 5px;
	}
}
</style>