13 changed files with 993 additions and 590 deletions
|
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,164 @@ |
|||
<!-- |
|||
* @Author: Fuyuu 1805498209@qq.com |
|||
* @Date: 2024-01-05 14:18:33 |
|||
* @LastEditors: Fuyuu 1805498209@qq.com |
|||
* @LastEditTime: 2024-01-05 16:45:48 |
|||
* @FilePath: \dt-admin-pc-v2\src\components\earthMap\AISInfoWindow.vue |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
|||
--> |
|||
<template> |
|||
<div class="AISInfo"> |
|||
<Window |
|||
:title="title" |
|||
:width="600" |
|||
:minWidth="600" |
|||
:height="380" |
|||
:left="650" |
|||
:top="240" |
|||
@cancel="cancel" |
|||
:floatright="false" |
|||
:showCancelButton="true" |
|||
:footervisible="false" |
|||
:showcloseButton="true" |
|||
id="aisInfoWindow" |
|||
> |
|||
<div class="ais_content"> |
|||
<div class="content_item"> |
|||
<div class="item_title">船名:</div> |
|||
<div class="item_content">赛尔号101</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">MMSI:</div> |
|||
<div class="item_content">413247920</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">船首向:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">呼号:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">航迹向:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">IMO:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">航速:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">经度:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">纬度:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">状态:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">类型:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">船长/宽:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">目的地:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">吃水:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">国籍:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">预到时间:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<div class="content_item"> |
|||
<div class="item_title">更新时间:</div> |
|||
<div class="item_content">123456</div> |
|||
</div> |
|||
<!-- 轨迹显示 --> |
|||
<div class="content_item"> |
|||
<div class="item_title">航行轨迹:</div> |
|||
<a-switch v-model:checked="checked" @change="changeTrack" /> |
|||
</div> |
|||
</div> |
|||
</Window> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, getCurrentInstance, ref } from 'vue'; |
|||
import Window from '@/components/earthMap/components/Window.vue'; |
|||
export default defineComponent({ |
|||
name: 'AISInfoWindow', |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: 'AIS信息', |
|||
}, |
|||
}, |
|||
components: { |
|||
Window, |
|||
}, |
|||
setup(props, context) { |
|||
const { proxy }: any = getCurrentInstance(); |
|||
const checked = ref(false); |
|||
// 关闭弹窗 |
|||
function cancel() { |
|||
proxy.$parent.AISInfoWindowShow = false; |
|||
} |
|||
// 打开或关闭轨迹 |
|||
function changeTrack(e) { |
|||
checked.value = e; |
|||
} |
|||
return { |
|||
checked, |
|||
cancel, |
|||
changeTrack, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
#aisInfoWindow .xbsj-model-header .xbsj-model-arrow { |
|||
right: 25px; |
|||
} |
|||
|
|||
.ais_content { |
|||
width: 95%; |
|||
margin: 0 auto; |
|||
display: flex; |
|||
flex-direaction: row; |
|||
flex-wrap: wrap; |
|||
.content_item { |
|||
width: 50%; |
|||
margin: 6px 0; |
|||
display: flex; |
|||
flex-direaction: row; |
|||
font-size: 14px; |
|||
.item_title { |
|||
color: #fff; |
|||
margin-right: 4px; |
|||
} |
|||
.item_content { |
|||
color: #00ffe4; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue