1

src/views/outboundManagement/component/route.js

@@ -0,0 +1,36 @@
+import Layout from '@/layout/index';
+
+const outboundManagementRouter = {
+    path: '/outboundManagement',
+    component: Layout,
+    redirect: '/outboundManagement',
+    name: 'outboundManagement',
+    alwaysShow: true, // will always show the root menu
+    meta: {
+        title: 'outboundManagement',
+        module: 'outbound',
+        icon: '-chukuguanlibeifen'
+    },
+    children: [
+    
+        //检斤信息
+        {
+            path: 'weighing',
+            component: () =>
+              import(/* webpackChunkName: "sparepartList" */ '@/views/outboundManagement/weighing'),
+            name: 'weighing',
+            meta: {
+              title: 'weighing',
+              shortcutEntrance: 'weighing',
+              module: 'outbound.acquisitionWeightOut.view',
+              permissicon: [],
+              keepAlive: true,
+              _title:'出库管理检斤信息'
+            },
+            hidden: true
+          }
+    ],
+
+};
+
+export default outboundManagementRouter;

src/views/outboundManagement/weighing.vue

@@ -0,0 +1,53 @@
+
+<template>
+    <div class="bg" id="index">
+      1发
+    </div>
+  </template>
+  
+  <script>
+  import {
+    gChartsData,
+  } from '@/model/home/index'
+  // import CenterMap from "./center-map.vue";
+  export default {
+    components: {
+    },
+    data() {
+      return {
+       
+      };
+    },
+    filters: {
+      numsFilter(msg) {
+        return msg || 0;
+      },
+    },
+    created() {
+    },
+    mounted() {
+     
+  
+    },
+    beforeDestroy() {
+   
+      
+    },
+    methods: {
+    },
+  };
+  </script>
+  <style lang="scss" scoped>
+  
+  .bg {
+    width: 100%;
+    height: 100%;
+    padding: 16px 16px 10px 16px;
+    box-sizing: border-box;
+    // background-image: url("../../assets/images/pageBg.png");
+    background-size: cover;
+    background-position: center center;
+  }
+  
+  </style>
+  

src/views/warehousing/components/ShipMap.vue

@@ -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" />
-                &nbsp;{{ 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:
-            '&copy;2019 <a class="shipxy_small"></a>&nbsp;<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>