client/nanjing-station-web.git

			@@ -1,35 +1,80 @@
			<template>
			<div class="home">
			<div class="home-bg"></div>
			<div class="home-c">
			<div class="point">
			<div class="point-address"></div>
			<div class="point-message">
			<div class="video-box">
			<el-icon><VideoPlay /></el-icon>
			<div class="container">
			<div class="center" >
			<!-- 地图窗口 -->
			<div class="map">
			<div class="point-box" v-if="tucengVal === 0">
			<div class="apoint" v-for="(item, index) in pointList" :key="index"
			:style="`left: ${item?.left}%; top: ${item?.top}%`" @click="clickMsgFun(index)">
			<img src="../../../assets/images_lc/a-point.png" alt="" />
			<div class="message" v-show="showMsg === index">
			<div class="message-item">
			<span class="name">泵房名称:</span>
			<span class="val">下瓦房新风井泵房</span>
			</div>
			<div class="message-item">
			<span class="name">水浸状态:</span>
			<span :class="item.shuijin === '正常' ? 'val-status' : 'err-status'">{{item.shuijin}}</span>
			</div>
			<div class="message-item">
			<span class="name">工作状态:</span>
			<span :class="item.status === '排水' ? 'val-status' : 'err-status'">{{item.status}}</span>
			</div>
			<div class="message-item">
			<span class="name">供电状态:</span>
			<span :class="item.gongdain ? 'val-status' : 'err-status'">{{item.gongdain ? '正常' : '异常'}}</span>
			</div>
			<div class="message-item">
			<span class="name">总运行时长:</span>
			<span class="val-status">{{item.totalTime}}</span>
			</div>
			<div class="message-item">
			<span class="name">其他详细信息:</span>
			<router-link class="val" to="/screen/pumpInfo">点击跳转</router-link>
			</div>
			</div>
			</div>
			<div class="info-box">
			<div class="info-t">水电站流量监测点</div>
			<div class="info-sw">水位：<span>500</span>m</div>
			<div class="info-ls">流速：<span>15</span>m/s</div>
			<div class="info-ssls">瞬时流速：<span>150</span>m/s</div>
			<div class="info-ljll">
			累计流量：
			<el-select
			v-model="selectll"
			class="m-2"
			placeholder="Select"
			size="small"
			style="width: 240px"
			</div>
			</div>
			</div>
			<div class="right">
			<!-- 实时监控 -->
			<div class="js-box">
			<div class="jiankong">
			<div class="jiankong-t">实时监控</div>
			<div class="jiankong-c">
			<div class="switch">
			<div class="switch-l">泵房监控</div>
			</div>
			<div class="video-box">
			<router-link to="/screen/monitor" class="item">
			<el-icon><VideoPlay /></el-icon>
			</router-link>
			</div>
			</div>
			</div>
			</div>
			<!-- 报警记录 -->
			<div class="warnRecord" v-if="warnList?.length > 0">
			<div class="warnRecord-title">报警记录</div>
			<div class="warnRecord-info">
			<div class="into-t">报警信息</div>
			<div class="info-list">
			<div class="item" v-for="(item, index) in warnList" :key="index">
			<el-tooltip
			effect="dark"
			:content="item.facilityName"
			placement="top"
			>
			<el-option
			v-for="(item, idx) in liuliangOptions"
			:key="idx"
			:label="item.label"
			:value="idx"
			/>
			</el-select>
			<span>{{ liuliangOptions[selectll].value }}</span>m/s
			{{item.facilityName}}
			</el-tooltip>
			<el-tooltip
			effect="dark"
			:content="item.description"
			placement="top"
			>
			{{item.description}}
			</el-tooltip>
			</div>
			</div>
			</div>
			@@ -38,109 +83,288 @@
			</div>
			</template>

			<script setup lang="ts">
			import {onMounted, onUnmounted, ref} from "vue";
			import {getPumpData, getPumpWarning} from '@/api/screen/index.js'

			<script setup>
			const tucengVal = ref(0);
			const warnList = ref([])
			const showMsg = ref(0)
			const pointList = ref([])
			let timer = null;

			import {ref} from "vue";
			const clickMsgFun = (index: number) => {
			showMsg.value = showMsg.value === index ? null : index;
			}

			const selectll = ref(0)
			// 获取报警数据
			const getWarning = () => {
			getPumpWarning({limit: 10, page:1}).then(res => {
			warnList.value = res.data.list
			})
			}

			const liuliangOptions = [
			{ label: '总计流量', value: 500 },
			{ label: '日累计流量', value: 1000 },
			{ label: '周累计流量', value: 10000 },
			{ label: '月累计流量', value: 300000 },
			{ label: '年累计流量', value: 3600000 },
			]
			// 获取泵房信息
			const getPumpInfo = () => {
			const pump = []
			getPumpData().then(res => {
			res.data.forEach((el, index) => {
			const shuijin = el.parameterVOList.find(item => item.columnsCode === 'SQ')
			const status = el.parameterVOList.find(item => item.columnsCode === '1012')
			const v1 = el.parameterVOList.find(item => item.columnsCode === '2001A')
			const v2 = el.parameterVOList.find(item => item.columnsCode === '2001B')
			const v3 = el.parameterVOList.find(item => item.columnsCode === '2001C')
			pump.push({
			left: 84, top: 28,
			name: el.facilityName,
			totalTime: el.totalTime,
			gongdain: gongdainStatus(Number(v1.columnValue), Number(v2.columnValue), Number(v3.columnValue)),
			shuijin: !Number(shuijin.columnValue) ? '正常' : '异常',
			status: Number(status.columnValue) < 0 ? '吸水' : '排水',
			})
			})

			pointList.value = pump
			})
			}


			const gongdainStatus = (n1, n2, n3) => {
			if ((n1 > 350 && n1 < 400) && (n2 > 350 && n2 < 400) && (n3 > 350 && n3 < 400)) {
			return true
			} else {
			return false
			}
			}

			onMounted(() => {
			getPumpInfo()
			getWarning()
			// 定时获取报警信息
			timer = setInterval(() => {
			getWarning()
			}, 3000)
			})
			onUnmounted(() => {
			if(timer){
			clearInterval(timer)
			}
			})
			</script>


			<style scoped lang="scss">
			.home{
			height: 100%;
			.home-bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url("@/assets/images/map-bg.png") no-repeat;
			background-size: 100% 100%;
			z-index: 11;
			<style lang="scss" scoped>
			.container {
			background-image: url("@/assets/images_lc/map.png");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			transition: background-size 0.3s ease;
			}
			.homeSelectName{
			.el-radio-group{
			flex-direction: column;
			align-items: flex-start;
			.el-radio{
			font-size: 1rem;
			}
			}
			.home-c{
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 20;
			.point{
			position: absolute;
			left: 58%;
			top: 30%;
			.point-address{
			width: 35px;
			height: 40px;
			background: url("@/assets/images/point.png") no-repeat;
			background-size: 100% 100%;
			}
			.point-message{
			width: 600px;
			height: 200px;
			background: url("@/assets/images/messageInfo-box.png") no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: -600px;
			top: -100px;
			padding: 30px 50px 30px 30px;
			color: #fff;
			display: flex;
			align-items: center;
			gap: 20px;
			.video-box{
			flex-shrink: 0;
			width: 200px;
			height: 138px;
			line-height: 138px;
			text-align: center;
			font-size: 38px;
			background: #cccb40;
			}
			.info-box{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.info-t{
			font-size: 20px;
			.clear{
			margin: 5px 30px 10px 20px;
			text-align: right;
			color: #3aa8ef;
			font-size: 0.8rem;
			cursor: pointer;
			}
			}

			.container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			color: white;
			overflow: hidden;

			.center {
			width: 80%;
			display: flex;
			flex-direction: column;
			.map {
			height: 100%;
			.point-box{
			width: 100%;
			height: 100%;
			position: relative;
			.apoint{
			position: absolute;
			img{
			width: 1.5rem;
			height: 3rem
			}
			.info-ljll{
			display: flex;
			align-items: center;
			:deep(.el-select){
			width: 100px !important;
			.el-select__wrapper{
			color: #fff;
			background: transparent;
			.el-select__selected-item{
			color: #fff;
			}
			.el-select__suffix .el-icon{
			color: #fff;
			}
			&:hover{
			box-shadow: none;
			}
			.message{
			width: 12rem;
			height: 12rem;
			background: url("@/assets/images_lc/point-message.png") no-repeat;
			backdrop-filter: blur(3px);
			background-size: 100% 100%;
			padding: 0 0.2rem;
			position: absolute;
			right: 2rem;
			top: 0;
			z-index: 100;
			.message-item{
			font-size: 0.7rem;
			padding: 0.5rem 0 0.5rem 0.9rem;
			.name{
			margin-right: 0.5rem;
			}
			.val-status{
			color: #22E195;
			}
			.err-status{
			color: red;
			}
			}
			}
			span{
			display: inline-block;
			padding: 0 10px;
			}
			}
			}
			}
			}

			.right {
			width: 20%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.js-box{
			height: 40%;
			&:hover{
			.jiankong{
			transform: translateX(0);
			}
			}
			}
			.jiankong {
			height: 100%;
			background-image: url('@/assets/images_lc/realTimeMonitoring.png');
			backdrop-filter: blur(3px);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			transform: translateX(100%);
			transition: all .5s;
			&-t {
			background-image: url('@/assets/images_lc/title_font.png');
			padding-left: 16%;
			font-size: 1.2rem;
			}

			&-c {
			height: 90%;
			.switch {
			height: 15%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 1.5rem;

			.switch-l {
			font-weight: 700;
			}
			.switch-r{
			display: flex;
			gap: 1rem;
			}
			.more {
			width: 6rem;
			height: 1.5rem;
			line-height: 1.5rem;
			text-align: center;
			background-image: url('@/assets/images_lc/switch.png');
			background-size: 100% 100%;
			color: #cfcfcf;
			font-size: 0.9rem;
			}

			.single {
			width: 6rem;
			height: 1.5rem;
			line-height: 1.5rem;
			text-align: center;
			background-image: url('@/assets/images_lc/switch.png');
			background-size: 100% 100%;
			color: #cfcfcf;
			font-size: 0.9rem;
			}
			.active{
			color: #fff;
			}
			}
			.video-box{
			height: 80%;
			padding: 0 1rem;
			.item{
			height: 100%;
			background-color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 3rem;
			}
			}
			}
			}

			.warnRecord {
			height: 58%;
			background-image: url('@/assets/images_lc/warnRecord.png');
			backdrop-filter: blur(3px);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			.warnRecord-title {
			background-image: url('@/assets/images_lc/title_font.png');
			padding-left: 16%;
			font-size: 1.3rem;
			}
			.warnRecord-info {
			width: 90%;
			height: 90%;
			margin: auto;
			overflow-y: scroll;
			&::-webkit-scrollbar{
			display: none;
			}
			.into-t{
			height: 10%;
			font-size: 1.2rem;
			padding-top: 0.3rem;
			}
			.info-list{
			height: 90%;
			.item{
			padding: 0.5rem 0;
			display: flex;
			justify-content: space-between;
			font-size: 0.8rem;
			:deep(.el-only-child__content){
			width: 50%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			}
			}
			}
			}
			.warnRecord-datashow {
			height: 50%;
			.warning {
			width: 100%;
			height: 100%;
			}
			}
			}
			}
			}
			</style>
			</style>