low-altitude-web/src/views/home/Home.vue

<template>
	<div class="home-wrapper">
		<div class="aside aside-left" :class="{ collapse: layoutStore.leftCollapse }">
			<!-- 左侧面板 -->
			<Transition name="emerge-left">
				<PanelLeft v-if="layoutStore.leftPanelType === 'default'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelKyhs v-if="layoutStore.leftPanelType === 'kyhs'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelQjchs v-if="layoutStore.leftPanelType === 'qjchs'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelHxhs v-if="layoutStore.leftPanelType === 'hxhs'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelSgzy v-if="layoutStore.leftPanelType === 'sgzy'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelKypm v-if="layoutStore.leftPanelType === 'kypm'" />
			</Transition>
			<Transition name="emerge-left">
				<PanelSjwg v-if="layoutStore.leftPanelType === 'kytc'" />
			</Transition>
		</div>

		<div class="aside aside-right" :class="{ collapse: layoutStore.rightCollapse }">
			<div class="title-main rtl">飞行动态</div>
			<ul class="b-fxdt flex justify-between">
				<li v-for="item in panelData.flightSummary" class="relative">
					<img :src="item.icon" alt="" />
					<div class="absolute">
						<span>{{ item.label }}</span>
						<div>
							<!-- <span>{{ item.count }}</span> -->
							<NumberScroll :value="item.count" />
							<span>{{ item.unit }}</span>
						</div>
					</div>
				</li>
			</ul>

			<div class="title-main rtl">实时飞行动态</div>
			<ScrollTable :table-data="panelData.flightActivity">
				<template #headRow>
					<tr>
						<th>无人机编号</th>
						<th>飞行单位/人</th>
						<th>航线名称</th>
						<th>飞行状态</th>
					</tr>
				</template>
				<template #bodyRow="{ rows }">
					<tr v-for="item in rows" :key="item.uavCode" @click="CheckUav(item)" class="cursor-pointer">
						<td>{{ item.uavCode }}</td>
						<td>{{ item.unit }}</td>
						<td>{{ item.routeName }}</td>
						<td>
							<span
								class="tag-text"
								:class="{ orange: item.status === '计划终止', yellow: item.status === '已降落' }"
								>{{ item.status }}</span
							>
						</td>
					</tr>
				</template>
			</ScrollTable>

			<div class="title-main rtl">飞行告警信息</div>
			<ScrollTable :tableData="panelData.flightWarning">
				<template #headRow>
					<tr>
						<th>时间</th>
						<th>无人机编号</th>
						<th>飞行单位/人</th>
						<th>告警类型</th>
					</tr>
				</template>
				<template #bodyRow="{ rows }">
					<tr v-for="item in rows" :key="item.uavCode" @click="CheckUav(item)" class="cursor-pointer">
						<td>{{ item.time }}</td>
						<td>{{ item.uavCode }}</td>
						<td>{{ item.unit }}</td>
						<td>
							<span class="tag-text red">{{ item.type }}</span>
						</td>
					</tr>
				</template>
			</ScrollTable>

			<div class="title-main rtl">各类预警类型占比次数</div>
			<div class="b-wgzb">
				<video autoplay muted loop id="bg-wgzb">
					<source src="@/assets/images/motion/bg-uav.webm" type="video/webm" />
				</video>
				<ul>
					<li v-for="item in panelData.violationSummary">
						<span>{{ item.label }}</span>
						<div>
							<!-- <span>{{ item.count }}</span> -->
							<NumberScroll :value="item.count" />
							<div>
								<span>{{
									Math.round((item.count / panelData.violationSummary.reduce((pre, item) => pre + item.count, 0)) * 100)
								}}</span>
								<span>%</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<!-- 工具栏 -->
		<ToolList />

		<!-- 无人机详情 -->
		<Transition name="emerge-left">
			<FloatPanelUav
				class="f-panel-left"
				v-if="layoutStore.floatPanels.uav"
				@close="layoutStore.toggleFloatPanel('uav', false)" />
		</Transition>

		<!-- 空域栅格 -->
		<Transition name="emerge-bottom">
			<FloatPanelKysg v-if="layoutStore.floatPanels.kysg" />
		</Transition>

		<!-- 空域分层 -->
		<Transition name="emerge-left">
			<FloatPanelFcky v-if="layoutStore.floatPanels.fcky" />
		</Transition>

		<!-- 网格查询 -->
		<Transition name="emerge-left">
			<FloatPanelCube v-if="layoutStore.floatPanels.cube" />
		</Transition>

		<!-- gis 态势监视-选项面板 -->
		<Transition name="emerge-right">
			<FloatPanelTsjsGis v-if="layoutStore.floatPanels.tsjs_gis && layoutStore.sceneType === 'gis'" />
		</Transition>

		<!-- ue 态势监视 -->
		<Transition name="emerge-left">
			<FloatPanelTsjs v-if="layoutStore.uavMonitorOn" />
		</Transition>
	</div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { getAssetsFile } from '@/utils/require'
import ToolList from './cpns/ToolList.vue'
// import { setSdtj } from '@/echarts/options.js'
// import getUeFn from '@/utils/UIInteractions'
import useLayoutStore from '@/store/layout'
import PanelLeft from './cpns/PanelLeft.vue'
import PanelKyhs from './cpns/PanelKyhs.vue'
import PanelQjchs from './cpns/PanelQjchs.vue'
import PanelHxhs from './cpns/PanelHxhs.vue'
import PanelSgzy from './cpns/PanelSgzy.vue'
import PanelKypm from './cpns/PanelKypm.vue'
import PanelSjwg from './cpns/PanelSjwg.vue'
import FloatPanelUav from './cpns/FloatPanelUav.vue'
import FloatPanelKysg from './cpns/FloatPanelKysg.vue'
import FloatPanelFcky from './cpns/FloatPanelFcky.vue'
import FloatPanelCube from './cpns/FloatPanelCube.vue'
import FloatPanelTsjs from './cpns/FloatPanelTsjs.vue'
import NumberScroll from '@/components/NumberScroll.vue'
import FloatPanelTsjsGis from './cpns/FloatPanelTsjsGis.vue'
import ScrollTable from '@/components/ScrollTable.vue'

const layoutStore = useLayoutStore()

const panelData = reactive({
	flightSummary: [
		{ label: '飞行计划总数', count: 37, unit: '次', icon: getAssetsFile('page/bg-fxjhzs.png') },
		{ label: '告警总数', count: 7, unit: '个', icon: getAssetsFile('page/bg-gjzs.png') },
	],
	flightActivity: [
		{ uavCode: 'BM11344738556', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '飞行中' },
		{ uavCode: 'BM11344744657', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '已降落' },
		{ uavCode: 'BM11342293853', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '计划终止' },
		{ uavCode: 'BM11344738559', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '飞行中' },
		{ uavCode: 'BM11344738563', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '飞行中' },
		{ uavCode: 'BM11344738561', unit: '美团无人机', routeName: '合生汇-黄兴公园', status: '已降落' },
	],
	flightWarning: [
		{ time: '11:20:09', uavCode: 'BM11344738556', unit: '美团无人机1', type: '无人机碰撞' },
		{ time: '11:08:23', uavCode: 'BM11344738559', unit: '美团无人机4', type: '电量低' },
		{ time: '10:52:45', uavCode: 'BM11344738561', unit: '美团无人机6', type: '偏离航线' },
		{ time: '10:49:24', uavCode: 'BM11344738557', unit: '美团无人机2', type: '无人机碰撞' },
		{ time: '10:36:02', uavCode: 'BM11344738558', unit: '美团无人机3', type: '电量低' },
		{ time: '10:11:45', uavCode: 'BM11344738562', unit: '美团无人机7', type: '天气预警' },
		{ time: '10:08:08', uavCode: 'BM11344738560', unit: '美团无人机5', type: '电量低' },
	],
	violationSummary: [
		{ label: '无人机碰撞', count: 2 },
		{ label: '电量低', count: 3 },
		{ label: '偏离航线', count: 1 },
		{ label: '天气预警', count: 1 },
	],
})

function CheckUav(item) {
	layoutStore.toggleFloatPanel('uav', true)
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.home-wrapper {
	transition:
		left 0.5s ease-out,
		right 0.5s ease-out;

	.aside {
		position: absolute;
		height: calc(100vh - var(--header-height) - var(--page-margin-y));
		width: var(--aside-width);
		padding: 15px 20px 20px;
		transition: all 0.5s ease;
		background: linear-gradient(to bottom, rgba(0, 10, 30, 0.1) 0%, rgba(0, 10, 30, 0.4) 5%);
		border-radius: 0px 0px 12px 12px;
		z-index: 3;
	}

	.aside-left {
		left: 0;

		&.collapse {
			left: calc(0px - var(--aside-width));
		}
	}

	.aside-right {
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&.collapse {
			right: calc(0px - var(--aside-width));
		}
	}

	.b-fxdt {
		li {
			img {
				width: 250px;
				height: 110px;
				margin-left: -10px;
			}

			& > div {
				bottom: 5px;
				left: 100px;
				z-index: 9;

				& > span {
					display: block;
					font-size: 20px;
					text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
				}

				& > div {
					span:first-child {
						font-size: 30px;
						background: linear-gradient(80deg, rgba(29, 128, 224, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
						-webkit-background-clip: text !important;
						-webkit-text-fill-color: transparent;
						margin-right: 5px;
					}

					span:last-child {
						font-family: PingFang;
						font-size: 14px;
						text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
					}
				}
			}

			&:last-child > div {
				& > span {
					color: #e9ebcf;
				}

				& > div > span:first-child {
					background: linear-gradient(80deg, rgba(215, 215, 169, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
				}
			}
		}
	}

	.tag-text {
		display: block;
		height: 20px;
		min-width: 75px;
		width: fit-content;
		padding: 0 10px;
		border-radius: 10px;
		border: 1px solid #7ed893;
		font-weight: bold;
		font-size: 14px;
		line-height: 18px;
		color: #7ed893;
		text-align: center;

		&.red {
			color: #e34b4b;
			border-color: #e34b4b;
		}

		&.orange {
			color: #e08d8d;
			border-color: #e08d8d;
		}

		&.yellow {
			color: #cdd072;
			border-color: #cdd072;
		}
	}

	.tbody-row3 {
		max-height: 150px;
		overflow: hidden;
	}

	.b-wgzb {
		height: 200px;
		position: relative;

		#bg-wgzb {
			position: absolute;
			left: 0;
			top: -80px;
		}

		ul {
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			height: 100%;
			padding: 15px;

			li {
				width: 50%;
				height: fit-content;
				display: flex;
				flex-direction: column;

				& > span {
					display: block;
					width: 104px;
					height: 28px;
					margin-left: 20px;
					background: url('../../assets/images/page/bg-label.png');
					background-size: cover !important;
					line-height: 28px;
					font-size: 16px;
					text-align: center;
				}

				& > div {
					width: 163px;
					height: 45px;
					padding-left: 20px;
					display: flex;
					align-items: center;
					background: url('../../assets/images/page/bg-text-line.png');
					background-size: cover !important;

					& > span {
						font-size: 20px;
						margin-right: 13px;
					}

					& > div {
						width: 47px;
						height: 20px;
						background: linear-gradient(0deg, rgba(78, 113, 183, 0.7), rgba(158, 183, 234, 0.1));
						border-radius: 10px;
						border: 1px solid;
						// border-image: linear-gradient(0deg, #2C53A1, #97B1E4) 1 1;
						color: #97b4ed;
						font-size: 18px;
						line-height: 18px;
						text-align: center;

						& > span:last-child {
							font-size: 14px;
							margin-left: 1px;
						}
					}
				}

				&:nth-child(2n) {
					align-items: end;

					& > span {
						margin-right: 20px;
						background: url('../../assets/images/page/bg-label2.png');
					}

					& > div {
						padding-right: 20px;
						justify-content: end;
						background: url('../../assets/images/page/bg-text-line2.png');
					}
				}
			}
		}
	}
}
</style>