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