hsz-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="itemYj">
				<view class="itemYjCont" @click="navigateSk">
					<view class="item">
						<view :class="skCount ? 'numNonZero' : 'numZero'">{{ skCount }}</view>
						<view>水库预警</view>
					</view>
				</view>

				<view class="itemYjCont" @click="navigateRiver">
					<view class="item">
						<view :class="riverCount ? 'numNonZero' : 'numZero'">{{ riverCount }}</view>
						<view>河道预警</view>
					</view>
				</view>

				<view class="itemYjCont" @click="navigateSafe">
					<view class="item">
						<view :class="safeCount ? 'numNonZero' : 'numZero'">{{ safeCount }}</view>
						<view>安全监测预警</view>
					</view>
				</view>

				<view class="itemYjCont" @click="navigateAI">
					<view class="item">
						<view :class="aiCount ? 'numNonZero' : 'numZero'">{{ aiCount }}</view>
						<view>AI告警(近24h)</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
import moment from 'moment'

export default {
	data() {
		return {
			skCount: 0,
			riverCount: 0,
			safeCount: 0,
			aiCount: 0,
			show: false,
			model: {
				start: moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
				end: moment().format('YYYY-MM-DD HH:mm:ss')
			},
			list: {

			}
		};
	},
	onLoad() {
		this.getList();
	},
		methods: {
			navigateSk() {
				if (!this.skCount) return;
				const map = this.list?.skWarningVoMap || {};
				const arr = encodeURIComponent(JSON.stringify(map));
				uni.navigateTo({
					url: '/pages/yj/detail/skDetail?map=' + arr
				})
			},
			navigateRiver() {
				if (!this.riverCount) return;
				const map = this.list?.riverWarningVoMap || {};
				const arr = encodeURIComponent(JSON.stringify(map));
				uni.navigateTo({
					url: '/pages/yj/detail/riverDetail?map=' + arr
				})
			},
			navigateSafe() {
				if (!this.safeCount) return;
				const data = this.list || {};
				const map = {
					shiftWarn: data.shiftWarn || [],
					flowWarn: data.flowWarn || [],
					pressWarn: data.pressWarn || []
				};
				const arr = encodeURIComponent(JSON.stringify(map));
				uni.navigateTo({
					url: '/pages/yj/detail/wyyj?map=' + arr
				})
			},
			navigateAI() {
				if (!this.aiCount) return;
				const map = this.list?.aiWarnVoMap || {};
				const arr = encodeURIComponent(JSON.stringify(map));
				uni.navigateTo({
					url: '/pages/yj/detail/aiyj?map=' + arr
				})
			},
		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/hsz/stQxWarnR/home/warn', this.model).then(res => {
				const data = res.data.data;
				if (!data) return;

				delete data.qxWarn;
				this.list = data;

				// 1. 水库预警 (skCount)
				const skMap = data.skWarningVoMap || {};
				this.skCount = (skMap.flState?.length || 0) +
					(skMap.calState?.length || 0) +
					(skMap.desState?.length || 0);

				// 2. 河道预警 (riverCount)
				const riverMap = data.riverWarningVoMap || {};
				this.riverCount = (riverMap.overWarn?.length || 0) +
					(riverMap.overPromise?.length || 0);

				// 3. 安全监测预警 (safeCount)
				this.safeCount = (data.shiftWarn?.length || 0) +
					(data.flowWarn?.length || 0) +
					(data.pressWarn?.length || 0);

				// 4. AI告警 (aiCount)
				const aiMap = data.aiWarnVoMap || {};
				let aiTotal = 0;
				for (const key in aiMap) {
					if (Array.isArray(aiMap[key])) {
						aiTotal += aiMap[key].length;
					}
				}
				this.aiCount = aiTotal;
			})
		},
		
	
	}
}
</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;
		}

		.numZero {
			color: #000;
			font-size: 20px;
		}

		.numNonZero {
			font-size: 20px;
			color: #D9001B;
		}

		.normal {
			color: #04D919;
		}

		.bj {
			color: #D9001B;
		}

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