|
|
@@ -1,1012 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="ship-map"
|
|
|
- @mousemove="handleMousemove">
|
|
|
- <div id="mapXY"></div>
|
|
|
- <div class="controller-list">
|
|
|
- <div class="controller-item"
|
|
|
- @click="onTyphoonBtnClick">
|
|
|
- <i class="iconfont icontaifeng2y"
|
|
|
- style="color: #1D6CED;font-size: 32px" />
|
|
|
- <!-- <img src="@/assets/images/page/home/icon-taifeng.png">-->
|
|
|
- <p>{{ $t('home.typhoon') }}</p>
|
|
|
- </div>
|
|
|
- <div class="controller-item"
|
|
|
- :class="isShowTides && 'is-active'"
|
|
|
- @click="onTidesBtnClick">
|
|
|
- <i class="iconfont iconicon-chaoxiy"
|
|
|
- style="color: #1D6CED;font-size: 32px" />
|
|
|
- <!-- <img src="@/assets/images/page/home/icon-chaoxi.png">-->
|
|
|
- <p>{{ $t('home.tide') }}</p>
|
|
|
- </div>
|
|
|
- <div class="controller-item"
|
|
|
- :class="isShowForecasts && 'is-active'"
|
|
|
- @click="onForecastsBtnClick">
|
|
|
- <i class="iconfont iconicon-yubaoy"
|
|
|
- style="color: #1D6CED;font-size: 32px" />
|
|
|
- <!-- <img src="@/assets/images/page/home/icon-yubao.png">-->
|
|
|
- <p>{{ $t('home.forecast') }}</p>
|
|
|
- </div>
|
|
|
- <el-dropdown trigger="click"
|
|
|
- @command="onMapTypeClick">
|
|
|
- <div class="controller-item">
|
|
|
- <i class="iconfont iconicon-tucengy"
|
|
|
- style="color: #1D6CED;font-size: 32px" />
|
|
|
- <!-- <img src="@/assets/images/page/home/icon-tuceng.png">-->
|
|
|
- <p>{{ getCurMapTypeStr() }}</p>
|
|
|
- </div>
|
|
|
- <el-dropdown-menu slot="dropdown">
|
|
|
- <el-dropdown-item :class="curMapType == 1 && 'is-active'"
|
|
|
- command="1">{{ $t('home.seaChart') }}</el-dropdown-item>
|
|
|
- <el-dropdown-item :class="curMapType == 1 && 'is-active'"
|
|
|
- command="2">{{ $t('home.map') }}</el-dropdown-item>
|
|
|
- <el-dropdown-item :class="curMapType == 1 && 'is-active'"
|
|
|
- command="3">{{ $t('home.satellite') }}</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- <div class="ship-info-panel"
|
|
|
- v-if="selectShipId"
|
|
|
- :style="{ right: dialogPos.right + 'px', top: dialogPos.top + 'px' }">
|
|
|
- <div class="ship-info-header"
|
|
|
- @mousedown="handleMousedown">
|
|
|
- <div class="ship-info-title">{{ selectShipInfo.name || '-' }}</div>
|
|
|
- <div class="ship-info-close"
|
|
|
- @click="closeShipInfo">
|
|
|
- <img src="@/assets/images/page/home/close.png" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-tabs class="ship-info-content"
|
|
|
- v-model="shipInfoTab"
|
|
|
- @tab-click="handleShipInfoTab">
|
|
|
- <el-tab-pane :label="$t('home.aisInfo')"
|
|
|
- name="1">
|
|
|
- <div class="asi-group">
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">MMSI</el-col>
|
|
|
- <el-col :span="9"
|
|
|
- style="display: flex;align-items: center;">
|
|
|
- {{ selectShipInfo.mmsi || '-' }}
|
|
|
- <img class="flag-img"
|
|
|
- v-lazy="coutryInfo.image" />
|
|
|
- {{ coutryInfo.string }}
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">{{ $t('home.hdg') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.hdg || '-' }}{{ $t('home.unit') }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">{{ $t('home.callsign') }}</el-col>
|
|
|
- <el-col :span="9">{{ selectShipInfo.callsign || '-' }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.cog') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.cog || '-' }}{{ $t('home.unit') }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">IMO</el-col>
|
|
|
- <el-col :span="9">{{ selectShipInfo.imo || '-' }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.sog') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.sog || '-' }}{{ $t('home.knot') }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">{{ $t('home.type') }}</el-col>
|
|
|
- <el-col :span="9">{{
|
|
|
- getShipTypeStr(selectShipInfo.type) || '-'
|
|
|
- }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.lat') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.lat || '-' }}N</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">{{ $t('home.navistatus') }}</el-col>
|
|
|
- <el-col :span="9">{{
|
|
|
- getNaviStatusStr(selectShipInfo.navistatus) || '-'
|
|
|
- }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.lng') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.lng || '-' }}E</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">{{ $t('home.length') }}</el-col>
|
|
|
- <el-col :span="9">{{ selectShipInfo.length || '-' }}{{ $t('home.m') }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.destStd') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.dest_std || '-' }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">{{ $t('home.width') }}</el-col>
|
|
|
- <el-col :span="9">{{ selectShipInfo.width || '-' }}{{ $t('home.m') }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.etaStd') }}</el-col>
|
|
|
- <el-col :span="8">{{ selectShipInfo.eta_std }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="asi-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="3">{{ $t('home.draught') }}</el-col>
|
|
|
- <el-col :span="9">{{ selectShipInfo.draught || '-' }}{{ $t('home.m') }}</el-col>
|
|
|
- <el-col :span="4">{{ $t('home.lastdyn') }}</el-col>
|
|
|
- <el-col :span="8">{{
|
|
|
- getTimeStr(selectShipInfo.lastdyn) || '-'
|
|
|
- }}</el-col>
|
|
|
- </el-row>
|
|
|
- <div class="truck-query-group"
|
|
|
- v-if="isShowTruck">
|
|
|
- <el-date-picker class="date-picker"
|
|
|
- v-model="truckRange"
|
|
|
- type="datetimerange"
|
|
|
- :range-separator="$t('home.rangeSeparator')"
|
|
|
- :start-placeholder="$t('home.startPlaceholder')"
|
|
|
- :end-placeholder="$t('home.endPlaceholder')"
|
|
|
- size="mini"></el-date-picker>
|
|
|
- <div class="btn-group">
|
|
|
- <el-button size="mini"
|
|
|
- @click="queryCurTruck">{{
|
|
|
- $t('home.query')
|
|
|
- }}</el-button>
|
|
|
- <el-button size="mini"
|
|
|
- @click="truckCancelClick">{{
|
|
|
- $t('home.cancel')
|
|
|
- }}</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="truck-pre-group"
|
|
|
- v-if="!isShowTruck">
|
|
|
- <el-button size="mini"
|
|
|
- @click="isShowTruck = true">{{
|
|
|
- $t('home.trunk')
|
|
|
- }}</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="气象信息"
|
|
|
- name="2"
|
|
|
- v-if="false">
|
|
|
- <div class="weather-group">
|
|
|
- <el-row class="weather-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="4">风速:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.windspeed }}</el-col>
|
|
|
- <el-col :span="4">风向:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.winddir }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="weather-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="4">浪高:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.waveheight }}</el-col>
|
|
|
- <el-col :span="4">涌高:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.swellheight }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="weather-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="4">涌向:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.swelldir }}</el-col>
|
|
|
- <el-col :span="4">涌周期:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.swellperiod }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="weather-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="4">温度:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.temperature }}</el-col>
|
|
|
- <el-col :span="4">湿度:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.humidity }}</el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="weather-row"
|
|
|
- :gutter="10">
|
|
|
- <el-col :span="4">压强:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.pressure }}</el-col>
|
|
|
- <el-col :span="4">能见度:</el-col>
|
|
|
- <el-col :span="8">{{ selectWeatherInfo.visibility }}</el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="当前航次"
|
|
|
- name="3"
|
|
|
- v-if="false">
|
|
|
- <div class="voyage-group">
|
|
|
- <div class="voyage-info">
|
|
|
- <div class="voyage-item">
|
|
|
- <h1>YOSU</h1>
|
|
|
- <p>2019-08-12 18:54:35</p>
|
|
|
- </div>
|
|
|
- <div class="voyage-icon">
|
|
|
- <p>在途</p>
|
|
|
- <img src="@/assets/images/page/home/arrow_blue.png" />
|
|
|
- </div>
|
|
|
- <div class="voyage-item">
|
|
|
- <h1>YOSU</h1>
|
|
|
- <p>2019-08-12 18:54:35</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="local-group">
|
|
|
- <div class="pos-info">
|
|
|
- <i class="el-icon-location-outline"></i>Eastern china sea
|
|
|
- </div>
|
|
|
- <div class="run-info">
|
|
|
- <div>已航行 1d7h26m(258.06nm)</div>
|
|
|
- <div>速度 8.21kn/8.25kn</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- <!-- {{selectShipInfo}} -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import service from '../service'
|
|
|
-import { EventBus, dayjs } from 'base-core-lib'
|
|
|
-export default {
|
|
|
- name: 'ShipMap',
|
|
|
- props: {
|
|
|
- ships: {
|
|
|
- type: Array,
|
|
|
- default: function () {
|
|
|
- return []
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- mapXY: undefined,
|
|
|
- shipService: undefined,
|
|
|
-
|
|
|
- shipList: [],
|
|
|
- selectShipId: undefined, //选中的ID
|
|
|
- shipInfoTab: '1',
|
|
|
-
|
|
|
- isShowTyphoon: false, //台风
|
|
|
- isShowTides: false, //潮汐
|
|
|
- isShowForecasts: false, //预报
|
|
|
- curMapType: 1, //当前地图类型
|
|
|
-
|
|
|
- truckRange: [
|
|
|
- new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3),
|
|
|
- new Date()
|
|
|
- ],
|
|
|
- isShowTruck: false,
|
|
|
-
|
|
|
- isDragDialog: false,
|
|
|
- dialogPos: {
|
|
|
- right: 10,
|
|
|
- top: 10
|
|
|
- },
|
|
|
- handleMouseupThis: undefined
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- created () {
|
|
|
- this.handleMouseupThis = this.handleMouseup.bind(this)
|
|
|
- document.addEventListener('mouseup', this.handleMouseupThis)
|
|
|
- },
|
|
|
- destroyed () {
|
|
|
- document.removeEventListener('mouseup', this.handleMouseupThis)
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- this.loadScript()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- selectShipInfo () {
|
|
|
- if (this.selectShipId) {
|
|
|
- return this.shipService.getShipByShipid(this.selectShipId)
|
|
|
- }
|
|
|
- return undefined
|
|
|
- },
|
|
|
- selectWeatherInfo () {
|
|
|
- if (this.selectShipId) {
|
|
|
- var latlng = this.selectShipInfo.getLatlng()
|
|
|
- // var time = this.getTimeStr(new Date().getTime())
|
|
|
- var time = this.getTimeStr(dayjs().valueOf())
|
|
|
- var data = this.mapXY.weatherService.getLatLngWeather(
|
|
|
- '12',
|
|
|
- latlng,
|
|
|
- time
|
|
|
- )
|
|
|
- if (data.msg == 'success') {
|
|
|
- var obj = data.data[0]
|
|
|
- for (var k in obj) {
|
|
|
- if (obj[k] == -32767) {
|
|
|
- obj[k] = '-'
|
|
|
- }
|
|
|
- }
|
|
|
- return obj
|
|
|
- }
|
|
|
- return {}
|
|
|
- }
|
|
|
- return undefined
|
|
|
- },
|
|
|
- // 获取国籍信息
|
|
|
- coutryInfo () {
|
|
|
- if (this.selectShipId) {
|
|
|
- return service.getCoutryInfo(this.selectShipInfo.mmsi)
|
|
|
- }
|
|
|
- return {}
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- ships (newVal, oldVal) {
|
|
|
- this.loadScript()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- loadScript () {
|
|
|
- EventBus.$emit('addShipScript', () => {
|
|
|
- this.initShipMap()
|
|
|
- this.initShips()
|
|
|
- })
|
|
|
- },
|
|
|
- initShipMap () {
|
|
|
- var options = {
|
|
|
- ak: 'c0ed286f357b7f4c7312476637a7ab04',
|
|
|
- // 初始中心点坐标
|
|
|
- centerPoint: [30.171, 121.27],
|
|
|
- zoom: 3,
|
|
|
- minZoom: 2,
|
|
|
- maxZoom: 18,
|
|
|
- defaultMapType: 'MT_SEA', //默认海图
|
|
|
- // 公司版权信息( 支持html )，默认Elane Inc.
|
|
|
- attribution: {
|
|
|
- isShow: false,
|
|
|
- emptyString:
|
|
|
- '©2019 <a class="shipxy_small"></a> <a>WinSea Inc.</a>'
|
|
|
- },
|
|
|
- measureCtrl: { isShow: false },
|
|
|
- mousePostionCtrl: { isShow: false },
|
|
|
- zoomControlElane: { isShow: true, position: 'bottomright' },
|
|
|
- zoomviewControl: { isShow: false, position: 'bottomright' },
|
|
|
- basemapsControl: { isShow: false, position: 'topright' },
|
|
|
- scaleCtrl: { isShow: true, position: 'bottomleft' }
|
|
|
- }
|
|
|
- // 创建地图示例
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- this.mapXY = new ShipxyAPI.Map('mapXY', options)
|
|
|
-
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- this.shipService = ShipxyAPI.ShipService(this.mapXY, {
|
|
|
- enableAreaShip: false,
|
|
|
- enableFleetShip: false,
|
|
|
- isAutoUpdateSrvtime: false,
|
|
|
- // delayTime: 5000,
|
|
|
- lableFont: ['500 12px Arial', '500 12px 宋体'], // 船舶名称，文字字体，默认值：["600 12px Arial", "500 12px Arial"]
|
|
|
- lableTxtColor: ['#fff', '#fff'], // 船舶名称，文字颜色，默认值：["#000","#fff"]
|
|
|
- lableLineColor: ['rgba(1, 30, 62, 0)', 'rgba(1, 30, 62, 0)'], // 边框颜色，默认值：["#000","#000"]
|
|
|
- lableLinefillColor: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.6)'], // 框内填充颜色，默认值：[null,null]
|
|
|
- obliqueLineColor: ['#000', '#000'], // 船舶名称，斜线颜色，默认值：[null,null]
|
|
|
- dShipColor: '#FF6437', // D+船颜色，默认：#ff6347
|
|
|
-
|
|
|
- zoomLevel_data: 1,
|
|
|
- zoomLevel_base: 1,
|
|
|
- getAreaShipsCallBack: (call) => {
|
|
|
- console.info(call, 'getAreaShipsCallBack')
|
|
|
- },
|
|
|
- drawShipsEndCallBack: (call) => {
|
|
|
- console.info(call, 'drawShipsEndCallBack')
|
|
|
- }
|
|
|
- })
|
|
|
- this.shipService.setPointerEvents(true)
|
|
|
- window.shipService = this.shipService
|
|
|
-
|
|
|
- // 天气服务
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- ShipxyAPI.WeatherService(this.mapXY)
|
|
|
-
|
|
|
- // 航次服务
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- ShipxyAPI.voyageService(this.mapXY)
|
|
|
-
|
|
|
- // 轨迹服务
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- ShipxyAPI.TrackService(this.mapXY)
|
|
|
-
|
|
|
- window.shipMap = this
|
|
|
-
|
|
|
- // 初始化地图类型
|
|
|
- if (this.mapXY.basemapsControl._map.mapType == 'MT_SEA') {
|
|
|
- this.curMapType = 1
|
|
|
- } else if (this.mapXY.basemapsControl._map.mapType == 'MT_GOOGLE') {
|
|
|
- this.curMapType = 2
|
|
|
- } else if (this.mapXY.basemapsControl._map.mapType == 'MT_SATELLITE') {
|
|
|
- this.curMapType = 3
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 初始化船舶
|
|
|
- initShips () {
|
|
|
- this.shipList = []
|
|
|
- this.shipService.removeAllShips()
|
|
|
-
|
|
|
- var csList = []
|
|
|
- for (var i = 0; i < this.ships.length; i++) {
|
|
|
- var ship = this.ships[i]
|
|
|
- var info = this.shipService.getShipByMmsi(ship.mmsi, true)
|
|
|
- if (!info) {
|
|
|
- continue
|
|
|
- }
|
|
|
- info.shipid = ship.id
|
|
|
- info.id = ship.id
|
|
|
- info.name = ship.name
|
|
|
- info.cnname = ship.name
|
|
|
- csList.push(info)
|
|
|
- }
|
|
|
-
|
|
|
- this.shipService.addShips(csList)
|
|
|
- this.shipService.addFleetShips(csList)
|
|
|
-
|
|
|
- // 船点击
|
|
|
- this.shipService.removeSelectedListener()
|
|
|
- this.shipService.addSelectedListener(ship => {
|
|
|
- this.onShipClick(ship)
|
|
|
- })
|
|
|
-
|
|
|
- // 未点到船
|
|
|
- this.shipService.removeUnSelectedListener()
|
|
|
- this.shipService.addUnSelectedListener(ship => {
|
|
|
- this.onShipUnClick(ship)
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- // 处理tab点击
|
|
|
- handleShipInfoTab (tab) { },
|
|
|
-
|
|
|
- // 选择船
|
|
|
- selectShip (shipid) {
|
|
|
- this.shipService.setSelectedShip(shipid)
|
|
|
-
|
|
|
- var info = this.shipService.getShipByShipid(shipid)
|
|
|
- if (info) {
|
|
|
- this.mapXY.setView([info.lat, info.lng], 8)
|
|
|
- }
|
|
|
- this.removeTruck()
|
|
|
- },
|
|
|
- // 取消船
|
|
|
- unSelectShip () {
|
|
|
- this.selectShipId = undefined
|
|
|
- this.shipService.cancelSelectedShip()
|
|
|
- // 设置坐标到中国
|
|
|
- this.mapXY.setView([30.171, 121.27], 3)
|
|
|
- },
|
|
|
-
|
|
|
- // 船点击
|
|
|
- onShipClick (ship) {
|
|
|
- this.$emit('select', ship.shipid)
|
|
|
- this.selectShipId = ship.shipid
|
|
|
- this.removeTruck()
|
|
|
- },
|
|
|
-
|
|
|
- // 未点到船
|
|
|
- onShipUnClick (ship) { },
|
|
|
-
|
|
|
- closeShipInfo () {
|
|
|
- this.selectShipId = undefined
|
|
|
- this.removeTruck()
|
|
|
- },
|
|
|
-
|
|
|
- // 获取当前航次信息
|
|
|
- getVoyageInfo () {
|
|
|
- if (!this.selectShipId) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // this.mapXY.voyageService.getCurrentByUrl(this.selectShipInfo.mmsi, function(result){
|
|
|
- // });
|
|
|
- },
|
|
|
-
|
|
|
- getTimeStr (dyn) {
|
|
|
- var dy = new Date((dyn + '').length == 13 ? dyn : dyn * 1000)
|
|
|
-
|
|
|
- var y = this._s2s(dy.getFullYear())
|
|
|
- var m = this._s2s(dy.getMonth() + 1)
|
|
|
- var d = this._s2s(dy.getDate())
|
|
|
- var hh = this._s2s(dy.getHours())
|
|
|
- var mm = this._s2s(dy.getMinutes())
|
|
|
- var ss = this._s2s(dy.getSeconds())
|
|
|
-
|
|
|
- return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
|
|
|
- },
|
|
|
-
|
|
|
- _s2s (s) {
|
|
|
- if (s < 10) {
|
|
|
- return '0' + s
|
|
|
- }
|
|
|
- return s + ''
|
|
|
- },
|
|
|
-
|
|
|
- handleMousedown (event) {
|
|
|
- this.isDragDialog = true
|
|
|
- },
|
|
|
- handleMousemove (event) {
|
|
|
- var mapEle = window.document.querySelector('#mapXY')
|
|
|
- var width = mapEle.clientWidth
|
|
|
- var height = mapEle.clientHeight
|
|
|
-
|
|
|
- if (this.isDragDialog) {
|
|
|
- this.dialogPos.top += event.movementY
|
|
|
- this.dialogPos.right -= event.movementX
|
|
|
-
|
|
|
- if (this.dialogPos.top < 0) {
|
|
|
- this.dialogPos.top = 0
|
|
|
- }
|
|
|
- if (this.dialogPos.top > height - 32) {
|
|
|
- this.dialogPos.top = height - 32
|
|
|
- }
|
|
|
-
|
|
|
- if (this.dialogPos.right < 0) {
|
|
|
- this.dialogPos.right = 0
|
|
|
- }
|
|
|
- if (this.dialogPos.right > width - 450) {
|
|
|
- this.dialogPos.right = width - 450
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handleMouseup (event) {
|
|
|
- this.isDragDialog = false
|
|
|
- },
|
|
|
-
|
|
|
- // 台风按钮点击
|
|
|
- onTyphoonBtnClick () {
|
|
|
- this.isShowTyphoon = !this.isShowTyphoon
|
|
|
-
|
|
|
- if (this.isShowTyphoon) {
|
|
|
- this.mapXY.weatherService.showTyphoonInfoList()
|
|
|
- } else {
|
|
|
- this.mapXY.weatherService.hideTyphoonInfoList()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 潮汐
|
|
|
- onTidesBtnClick () {
|
|
|
- this.isShowTides = !this.isShowTides
|
|
|
-
|
|
|
- if (this.isShowTides) {
|
|
|
- this.mapXY.weatherService.showTides()
|
|
|
- } else {
|
|
|
- this.mapXY.weatherService.hideTides()
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 预报
|
|
|
- onForecastsBtnClick () {
|
|
|
- this.isShowForecasts = !this.isShowForecasts
|
|
|
-
|
|
|
- if (this.isShowForecasts) {
|
|
|
- this.mapXY.weatherService.showSeaAreaForecasts() // 显示海区预报
|
|
|
- } else {
|
|
|
- this.mapXY.weatherService.hideSeaAreaForecasts() // 隐藏海区预报
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 地图类型按钮点击
|
|
|
- onMapTypeClick (command) {
|
|
|
- this.curMapType = command
|
|
|
-
|
|
|
- // 自定义按钮-海图
|
|
|
- command == 1 && this.mapXY.basemapsControl.changeMap('MT_SEA')
|
|
|
- // 自定义按钮-地图
|
|
|
- command == 2 && this.mapXY.basemapsControl.changeMap('MT_GOOGLE')
|
|
|
- // 自定义按钮-卫星
|
|
|
- command == 3 && this.mapXY.basemapsControl.changeMap('MT_SATELLITE')
|
|
|
- },
|
|
|
-
|
|
|
- // 地图类型字符串
|
|
|
- getCurMapTypeStr () {
|
|
|
- if (this.curMapType == 1) {
|
|
|
- return this.$t('home.seaChart')
|
|
|
- }
|
|
|
- if (this.curMapType == 2) {
|
|
|
- return this.$t('home.map')
|
|
|
- }
|
|
|
- if (this.curMapType == 3) {
|
|
|
- return this.$t('home.satellite')
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 获取船类型字符串
|
|
|
- getShipTypeStr (t) {
|
|
|
- // eslint-disable-next-line no-undef
|
|
|
- return CanvasShipUtils.getShipTypeCN(t)
|
|
|
- },
|
|
|
-
|
|
|
- // 获取船舶状态
|
|
|
- getNaviStatusStr (t) {
|
|
|
- var array = [
|
|
|
- this.$t('home.navistatus0'),
|
|
|
- this.$t('home.navistatus1'),
|
|
|
- this.$t('home.navistatus2'),
|
|
|
- this.$t('home.navistatus3'),
|
|
|
- this.$t('home.navistatus4'),
|
|
|
- this.$t('home.navistatus5'),
|
|
|
- this.$t('home.navistatus6'),
|
|
|
- this.$t('home.navistatus7'),
|
|
|
- this.$t('home.navistatus8')
|
|
|
- ]
|
|
|
-
|
|
|
- if (t >= 0 && t <= 8) {
|
|
|
- return array[t]
|
|
|
- }
|
|
|
- return ''
|
|
|
- },
|
|
|
-
|
|
|
- // 获取国籍信息
|
|
|
- getCoutryInfo (mmsi) {
|
|
|
- return service.getCoutryInfo(mmsi)
|
|
|
- },
|
|
|
-
|
|
|
- // 轨迹查询
|
|
|
- queryCurTruck () {
|
|
|
- this.removeTruck(false)
|
|
|
-
|
|
|
- // 校验时间
|
|
|
- if (!this.truckRange || !this.truckRange[0] || !this.truckRange[1]) {
|
|
|
- return EventBus.$emit('error', this.$t('home.queryError'))
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var ship = this.selectShipInfo
|
|
|
- if (ship) {
|
|
|
- var options = {
|
|
|
- lineColor: 'tomato', // 线，颜色
|
|
|
- lineWeight: 2, // 线，粗细
|
|
|
- dash: true, // 是否为虚线
|
|
|
- dashArray: [5, 5], // 虚线间隔
|
|
|
- circleOverColor: 'yellow', // 轨迹点,鼠标划过时颜色
|
|
|
- isDilute: true // 是否抽稀模式显示
|
|
|
- }
|
|
|
- var btime = Date.parse(this.truckRange[0]) / 1000
|
|
|
- var etime = Date.parse(this.truckRange[1]) / 1000
|
|
|
-
|
|
|
- this.mapXY.trackService.addAndShowByUrl(
|
|
|
- ship.mmsi,
|
|
|
- btime,
|
|
|
- etime,
|
|
|
- options
|
|
|
- )
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 轨迹取消按钮
|
|
|
- truckCancelClick () {
|
|
|
- this.removeTruck()
|
|
|
- },
|
|
|
-
|
|
|
- // 移除轨迹
|
|
|
- removeTruck (isInit = true) {
|
|
|
- this.mapXY.trackService.removeAll()
|
|
|
- if (isInit) {
|
|
|
- this.isShowTruck = false
|
|
|
- this.truckRange = [
|
|
|
- new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 3),
|
|
|
- new Date()
|
|
|
- ]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.ship-map {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- #mapXY {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .ship-info-panel {
|
|
|
- width: 450px;
|
|
|
- min-height: 285px;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- right: 10px;
|
|
|
- background: #fff;
|
|
|
- z-index: 1000;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .ship-info-header {
|
|
|
- font-size: 14px;
|
|
|
- color: #333;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- border-bottom: 1px solid #ebebeb;
|
|
|
- align-items: center;
|
|
|
- height: 32px;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- cursor: move;
|
|
|
-
|
|
|
- .ship-info-title {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .ship-info-close {
|
|
|
- img {
|
|
|
- width: 18px;
|
|
|
- display: block;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .ship-info-content {
|
|
|
- flex: 1;
|
|
|
- padding: 10px;
|
|
|
- padding-top: 0px;
|
|
|
-
|
|
|
- .asi-group {
|
|
|
- padding: 10px;
|
|
|
- padding-top: 0px;
|
|
|
- padding-bottom: 0px;
|
|
|
- font-size: 12px;
|
|
|
- color: #666;
|
|
|
-
|
|
|
- .asi-row {
|
|
|
- margin-bottom: 6px;
|
|
|
- .flag-img {
|
|
|
- height: 13px;
|
|
|
- display: block;
|
|
|
- margin-left: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .truck-pre-group {
|
|
|
- display: flex;
|
|
|
- margin-top: 10px;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
- .truck-query-group {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-top: 10px;
|
|
|
- .date-picker {
|
|
|
- }
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- justify-content: flex-end;
|
|
|
- margin-top: 5px;
|
|
|
- padding-right: 10px;
|
|
|
- .truck-btn {
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .weather-group {
|
|
|
- padding: 10px;
|
|
|
- padding-top: 28px;
|
|
|
- // padding-bottom: 0px;
|
|
|
- font-size: 13px;
|
|
|
- color: #666;
|
|
|
-
|
|
|
- .weather-row {
|
|
|
- margin-bottom: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .voyage-group {
|
|
|
- .voyage-info {
|
|
|
- padding-top: 30px;
|
|
|
- padding-bottom: 40px;
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #ebebeb;
|
|
|
-
|
|
|
- .voyage-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- h1 {
|
|
|
- color: #333;
|
|
|
- font-weight: 400;
|
|
|
- margin: 0;
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
- p {
|
|
|
- color: #999;
|
|
|
- margin: 0;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- .voyage-icon {
|
|
|
- width: 110px;
|
|
|
- text-align: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- p {
|
|
|
- color: #333;
|
|
|
- margin: 0;
|
|
|
- margin-bottom: 4px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 85%;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .local-group {
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- .pos-info {
|
|
|
- flex: 1;
|
|
|
- color: #999;
|
|
|
- font-size: 12px;
|
|
|
- margin-top: 15px;
|
|
|
- margin-bottom: 15px;
|
|
|
-
|
|
|
- i {
|
|
|
- font-size: 14px;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- .run-info {
|
|
|
- display: flex;
|
|
|
- div {
|
|
|
- flex: 1;
|
|
|
- color: #666;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .controller-list {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- position: absolute;
|
|
|
- left: 10px;
|
|
|
- top: 10px;
|
|
|
- z-index: 1000;
|
|
|
-
|
|
|
- .controller-item {
|
|
|
- height: 32px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 1px 4px 0px rgba(23, 132, 255, 0.26);
|
|
|
- border-radius: 4px;
|
|
|
- margin-right: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- img {
|
|
|
- max-width: 16px;
|
|
|
- max-height: 16px;
|
|
|
- display: block;
|
|
|
- margin-right: 10px;
|
|
|
- border: 0;
|
|
|
- filter: grayscale(100%);
|
|
|
- }
|
|
|
- p {
|
|
|
- margin: 0;
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- &.is-active {
|
|
|
- img {
|
|
|
- filter: none;
|
|
|
- }
|
|
|
- p {
|
|
|
- color: #1d6ced;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/deep/ #a_tuli {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
- top: 3px;
|
|
|
- right: 33px;
|
|
|
- background-image: url('~@/assets/images/page/home/tuli.png');
|
|
|
-}
|
|
|
-/deep/ #a_min {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-/deep/ #a_close {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- top: 4px;
|
|
|
- right: 4px;
|
|
|
- background-image: url('~@/assets/images/page/home/close.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
- background-size: 90%;
|
|
|
-}
|
|
|
-
|
|
|
-/deep/ .typhoonListWin {
|
|
|
- border-radius: 0;
|
|
|
- box-shadow: none;
|
|
|
- left: 10px;
|
|
|
- top: 50px;
|
|
|
-
|
|
|
- .typhoonListTitle {
|
|
|
- height: 32px;
|
|
|
- border-bottom: 1px solid rgb(235, 235, 235);
|
|
|
- background: #fff;
|
|
|
- border-radius: 0;
|
|
|
-
|
|
|
- .title-txt {
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .inputAndSelectDefaultSyle {
|
|
|
- width: 81px;
|
|
|
- height: 32px;
|
|
|
- border: 1px solid #ccc !important;
|
|
|
- }
|
|
|
- .yearList {
|
|
|
- height: 46px;
|
|
|
- padding-top: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- input[type='checkbox'] {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- .textBlack {
|
|
|
- color: #333 !important;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/deep/ .leaflet-top.leaflet-right {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-/deep/ .leaflet-control.leaflet-control-left {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-/deep/ .weather-typh-legend {
|
|
|
- border-radius: 0;
|
|
|
- box-shadow: none;
|
|
|
- left: 530px;
|
|
|
- top: 40px;
|
|
|
-
|
|
|
- .typh-title {
|
|
|
- height: 32px;
|
|
|
- border-bottom: 1px solid rgb(235, 235, 235);
|
|
|
- background: #fff;
|
|
|
- border-radius: 0;
|
|
|
-
|
|
|
- .title-txt {
|
|
|
- font-size: 12px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .typh-title .btn-right {
|
|
|
- background: url('~@/assets/images/page/home/right.png') no-repeat center;
|
|
|
- }
|
|
|
- .typh-title .btn-left {
|
|
|
- background: url('~@/assets/images/page/home/left.png') no-repeat center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/deep/ .leaflet-control-zoom.leaflet-bar.leaflet-control {
|
|
|
- border: 0;
|
|
|
- box-shadow: 0px 1px 4px 0px rgba(23, 132, 255, 0.26);
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- a {
|
|
|
- color: #666;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
wangchao