yskj/iot_drone_web.git

			@@ -1,203 +1,190 @@
			<template>
			<div>
			<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
			<a-row>
			<a-col :span="1"></a-col>
			<a-col :span="20">设备库</a-col>
			<a-col :span="3"></a-col>
			</a-row>
			</div>
			<div>
			<div>
			<a-row style="padding: 15px 0">
			<a-col :span="1"></a-col>
			<a-col :span="23">
			当前设备
			</a-col>
			</a-row>
			<a-row>
			<a-col :span="1"></a-col>
			<a-col :span="22">
			<div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;">
			<a-empty style="color: #fff;" :image="simpleImage" description="暂无数据"
			:image-style="{ height: '60px' }" />
			</div>
			<div v-else class="fz12" style="color: white;">
			<div v-for="dock in onlineDocks.data" :key="dock.sn"
			:style="{ background: '#3c3c3c', 'margin-bottom': '10px' }">
			<div style="border-radius: 2px; height: 60%; width: 100%;"
			class="flex-row flex-justify-between flex-align-center">
			<div style="float: left; padding: 0px 5px 8px 8px; width: 88%">
			<!-- // 机场设备标题 -->
			<div style="width: 80%; height: 30px; line-height: 30px; font-size: 16px;">
			<a-tooltip :title="`${dock.gateway.callsign} - ${dock.callsign ?? 'No Drone'}`">
			<div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign}} - {{ dock.callsign ?? 'No Drone'}}
			</div>
			</a-tooltip>
			</div>
			<!-- // 机场设备状态 -->
			<div class="mt5 flex-align-center flex-row flex-justify-between"
			style="background: #595959;">
			<div class="flex-align-center flex-row">
			<span class="ml5 mr5">
			<RobotOutlined />
			</span>
			<div class="font-bold text-hidden" style="max-width: 80px;"
			:style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
			{{
			dockInfo[dock.gateway.sn] ?
			EDockModeText[dockInfo[dock.gateway.sn].basic_osd?.mode_code] :
			EDockModeText[EDockModeCode.Disconnected]
			}}
			</div>
			</div>
			<div class="mr5 flex-align-center flex-row"
			style="width: 125px; margin-right: 0; height: 18px;">
			<div v-if="hmsInfo[dock.gateway.sn]" class="flex-align-center flex-row">
			<div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :
			hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
			style="width: 18px; height: 16px; text-align: center;">
			<span
			:style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
			hmsInfo[dock.gateway.sn].length
			}}</span>
			<span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' :
			'' }}</span>
			</div>
			<a-popover trigger="click" placement="bottom" color="black"
			v-model:visible="hmsVisible[dock.gateway.sn]"
			@visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)"
			:overlayStyle="{ width: '200px', height: '300px' }">
			<div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' :
			hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
			style="margin-left: 3px; width:107px; height: 16px;">
			<span class="word-loop">{{
			hmsInfo[dock.gateway.sn][0].message_zh }}</span>
			</div>
			<template #content>
			<a-collapse
			style="background: black; height: 300px; overflow-y: auto;"
			:bordered="false" expand-icon-position="right"
			:accordion="true">
			<a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]"
			:key="hms.hms_id" :showArrow="false"
			style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<template #header="{ isActive }">
			<div class="flex-row flex-align-center"
			style="width: 130px;">
			<div style="width: 110px;">
			<span class="word-loop">{{ hms.message_zh
			}}</span>
			</div>
			<div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "
			class="flex-row flex-align-center flex-justify-center"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<DoubleRightOutlined
			:rotate="isActive ? 90 : 0" />
			</div>
			</div>
			</template>

			<a-tooltip :title="hms.create_time">
			<div style="color: white;" class="text-hidden">{{
			hms.create_time }}</div>
			</a-tooltip>
			</a-collapse-panel>
			</a-collapse>
			</template>
			</a-popover>
			</div>
			<div v-else class="width-100"
			style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div>
			</div>
			</div>
			<!-- // 机场是否启动 -->
			<div class="mt5 flex-align-center flex-row flex-justify-between"
			style="background: #595959;">
			<div class="flex-row">
			<span class="ml5 mr5">
			<RocketOutlined />
			</span>
			<div class="font-bold text-hidden" style="max-width: 80px"
			:style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
			{{
			deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] :
			EModeText[EModeCode.Disconnected]
			}}
			</div>
			</div>
			<div class="mr5 flex-align-center flex-row"
			style="width: 125px; margin-right: 0; height: 18px;">
			<div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row">
			<div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :
			hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
			style="width: 18px; height: 16px; text-align: center;">
			<span
			:style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
			hmsInfo[dock.sn].length
			}}</span>
			<span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : ''
			}}</span>
			</div>
			<a-popover trigger="click" placement="bottom" color="black"
			v-model:visible="hmsVisible[dock.sn]"
			@visibleChange="readHms(hmsVisible[dock.sn], dock.sn)"
			:overlayStyle="{ width: '200px', height: '300px' }">
			<div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' :
			hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
			style="margin-left: 3px; width:107px; height: 16px;">
			<span class="word-loop">{{ hmsInfo[dock.sn][0].message_zh
			}}</span>
			</div>
			<template #content>
			<a-collapse
			style="background: black; height: 300px; overflow-y: auto;"
			:bordered="false" expand-icon-position="right"
			:accordion="true">
			<a-collapse-panel v-for="hms in hmsInfo[dock.sn]"
			:key="hms.hms_id" :showArrow="false"
			style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<template #header="{ isActive }">
			<div class="flex-row flex-align-center"
			style="width: 130px;">
			<div style="width: 110px;">
			<span class="word-loop">{{ hms.message_zh
			}}</span>
			</div>
			<div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "
			class="flex-row flex-align-center flex-justify-center"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<DoubleRightOutlined
			:rotate="isActive ? 90 : 0" />
			</div>
			</div>
			</template>

			<a-tooltip :title="hms.create_time">
			<div style="color: white;" class="text-hidden">{{
			hms.create_time }}</div>
			</a-tooltip>
			</a-collapse-panel>
			</a-collapse>
			</template>
			</a-popover>
			</div>
			<div v-else class="width-100"
			style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div>
			</div>
			</div>
			</div>

			</div>
			</div>
			</div>
			</a-col>
			</a-row>
			</div>
			</div>
			<div>
			<div style="height: 50px; line-height: 50px; border-bottom: 1px solid #4f4f4f; font-weight: 450;">
			<a-row>
			<a-col :span="1"></a-col>
			<a-col :span="20">设备库</a-col>
			<a-col :span="3"></a-col>
			</a-row>
			</div>
			<div>
			<div>
			<a-row style="padding: 15px 0">
			<a-col :span="1"></a-col>
			<a-col :span="23">
			当前设备
			</a-col>
			</a-row>
			<a-row>
			<a-col :span="1"></a-col>
			<a-col :span="22">
			<div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;">
			<a-empty style="color: #fff;" :image="simpleImage" description="暂无数据" :image-style="{ height: '60px' }" />
			</div>
			<div v-else class="fz12" style="color: white;">
			<div v-for="dock in onlineDocks.data" :key="dock.sn"
			:style="{ background: '#3c3c3c', 'margin-bottom': '10px' }">
			<div style="border-radius: 2px; height: 60%; width: 100%;"
			class="flex-row flex-justify-between flex-align-center">
			<div style="float: left; padding: 0px 5px 8px 8px; width: 88%">
			<!-- // 机场设备标题 -->
			<div style="width: 80%; height: 30px; line-height: 30px; font-size: 16px;">
			<a-tooltip :title="`${dock.gateway.callsign} - ${dock.callsign ?? 'No Drone'}`">
			<div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign }} - {{ dock.callsign
			?? 'No Drone' }}
			</div>
			</a-tooltip>
			</div>
			<!-- // 机场设备状态 -->
			<div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">
			<div class="flex-align-center flex-row">
			<span class="ml5 mr5">
			<RobotOutlined />
			</span>
			<div class="font-bold text-hidden" style="max-width: 80px;"
			:style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
			{{
			dockInfo[dock.gateway.sn] ?
			EDockModeText[dockInfo[dock.gateway.sn].basic_osd?.mode_code] :
			EDockModeText[EDockModeCode.Disconnected]
			}}
			</div>
			</div>
			<div class="mr5 flex-align-center flex-row" style="width: 125px; margin-right: 0; height: 18px;">
			<div v-if="hmsInfo[dock.gateway.sn]" class="flex-align-center flex-row">
			<div
			:class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :
			hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
			style="width: 18px; height: 16px; text-align: center;">
			<span :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
			hmsInfo[dock.gateway.sn].length
			}}</span>
			<span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' :
			'' }}</span>
			</div>
			<a-popover trigger="click" placement="bottom" color="black"
			v-model:visible="hmsVisible[dock.gateway.sn]"
			@visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)"
			:overlayStyle="{ width: '200px', height: '300px' }">
			<div
			:class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' :
			hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
			style="margin-left: 3px; width:107px; height: 16px;">
			<span class="word-loop">{{
			hmsInfo[dock.gateway.sn][0].message_zh }}</span>
			</div>
			<template #content>
			<a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false"
			expand-icon-position="right" :accordion="true">
			<a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]" :key="hms.hms_id"
			:showArrow="false"
			style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<template #header="{ isActive }">
			<div class="flex-row flex-align-center" style="width: 130px;">
			<div style="width: 110px;">
			<span class="word-loop">{{ hms.message_zh
			}}</span>
			</div>
			<div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "
			class="flex-row flex-align-center flex-justify-center"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<DoubleRightOutlined :rotate="isActive ? 90 : 0" />
			</div>
			</div>
			</template>

			<a-tooltip :title="hms.create_time">
			<div style="color: white;" class="text-hidden">{{
			hms.create_time }}</div>
			</a-tooltip>
			</a-collapse-panel>
			</a-collapse>
			</template>
			</a-popover>
			</div>
			<div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div>
			</div>
			</div>
			<!-- // 机场是否启动 -->
			<div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">
			<div class="flex-row">
			<span class="ml5 mr5">
			<RocketOutlined />
			</span>
			<div class="font-bold text-hidden" style="max-width: 80px"
			:style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected \|\| dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? 'color: #00ee8b' : 'color: red;'">
			{{
			deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] :
			dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? '舱内关机' :
			EModeText[EModeCode.Disconnected]
			}}
			</div>
			</div>
			<div class="mr5 flex-align-center flex-row" style="width: 125px; margin-right: 0; height: 18px;">
			<div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row">
			<div
			:class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :
			hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"
			style="width: 18px; height: 16px; text-align: center;">
			<span :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
			hmsInfo[dock.sn].length
			}}</span>
			<span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : ''
			}}</span>
			</div>
			<a-popover trigger="click" placement="bottom" color="black"
			v-model:visible="hmsVisible[dock.sn]" @visibleChange="readHms(hmsVisible[dock.sn], dock.sn)"
			:overlayStyle="{ width: '200px', height: '300px' }">
			<div
			:class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' :
			hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"
			style="margin-left: 3px; width:107px; height: 16px;">
			<span class="word-loop">{{ hmsInfo[dock.sn][0].message_zh
			}}</span>
			</div>
			<template #content>
			<a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false"
			expand-icon-position="right" :accordion="true">
			<a-collapse-panel v-for="hms in hmsInfo[dock.sn]" :key="hms.hms_id" :showArrow="false"
			style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<template #header="{ isActive }">
			<div class="flex-row flex-align-center" style="width: 130px;">
			<div style="width: 110px;">
			<span class="word-loop">{{ hms.message_zh
			}}</span>
			</div>
			<div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "
			class="flex-row flex-align-center flex-justify-center"
			:class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">
			<DoubleRightOutlined :rotate="isActive ? 90 : 0" />
			</div>
			</div>
			</template>

			<a-tooltip :title="hms.create_time">
			<div style="color: white;" class="text-hidden">{{
			hms.create_time }}</div>
			</a-tooltip>
			</a-collapse-panel>
			</a-collapse>
			</template>
			</a-popover>
			</div>
			<div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)">N/A</div>
			</div>
			</div>
			</div>

			</div>
			</div>
			</div>
			</a-col>
			</a-row>
			</div>
			</div>
			</div>
			</template>

			<script lang="ts" setup>
			@@ -344,36 +331,36 @@

			<style lang="scss" scoped>
			.route-icon {
			color: #fff;
			font-size: 16px;
			color: #fff;
			font-size: 16px;
			}

			.job-info {
			height: 30%;
			height: 30%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #c1c1c1;
			margin-bottom: 6px;

			.job-status {
			height: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #c1c1c1;
			margin-bottom: 6px;
			background: red;
			}

			.job-status {
			height: 100%;
			display: flex;
			align-items: center;
			background: red;
			}

			.job-name {
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 5px;
			}
			.job-name {
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 5px;
			}
			}

			.text-hidden {
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			white-space: nowrap;
			-o-text-overflow: ellipsis;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			white-space: nowrap;
			-o-text-overflow: ellipsis;
			}
			</style>

	src/pages/page-web/projects/implement.vue	427 ●●●●● patch \| view \| raw \| blame \| history
	src/pages/page-web/projects/task.vue	4 ●●●●● patch \| view \| raw \| blame \| history

			@@ -147,10 +147,10 @@
			<RocketOutlined/>
			</span>
			<div class="font-bold text-hidden" style="max-width: 80px"
			:style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">
			:style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected \|\| dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? 'color: #00ee8b' : 'color: red;'">
			{{
			deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] :
			EModeText[EModeCode.Disconnected]
			dockInfo[dock.gateway.sn].basic_osd?.drone_in_dock === 1 ? '舱内关机' : EModeText[EModeCode.Disconnected]
			}}
			</div>
			</div>