项目初始化

src/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+<style lang="scss">
+::-webkit-scrollbar {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+::-webkit-scrollbar-track {
+  width: 0.375rem;
+  background: rgba(#2c469b, 0.1);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(#2c469b, 0.5);
+  background-clip: padding-box;
+  min-height: 1.75rem;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(#9bb1e3, 1);
+}
+</style>

src/ErrorApp.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>123</div>
+</template>
+
+<script>
+export default {
+  name: "ErrorApp",
+  data() {
+    return {
+      errorMessage: ''
+    }
+  },
+  props: {
+    message: {
+      type: String
+    }
+  },
+  watch: {
+    message: function (data) {
+      console.log('监听生效了马')
+      console.log(data)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/api/data-analysis/index.ts

@@ -0,0 +1,25 @@
+import CryptoJS from 'crypto-js'
+// @ts-ignore
+import { JSEncrypt } from './jsencrypt'
+const sysConfig = require('../../../public/config/sys-config.json')
+
+// DES 解密
+function decryptByDES (ciphertext: string, key: string) {
+  const keyHex = CryptoJS.enc.Utf8.parse(key)
+  const decrypted = CryptoJS.DES.decrypt(
+    ({ ciphertext: CryptoJS.enc.Base64.parse(ciphertext) }) as any,
+    keyHex, {
+      mode: CryptoJS.mode.ECB,
+      padding: CryptoJS.pad.Pkcs7
+    })
+  return decrypted.toString(CryptoJS.enc.Utf8)
+}
+
+export function decrypt (encrypted: any, DesKey: any) {
+  const publicKey = sysConfig.publicKey
+  const decrypt = new JSEncrypt()
+  decrypt.setPublicKey(publicKey)
+  const desKey = decrypt.decrypt(DesKey) // 解密
+  const message = decryptByDES(encrypted.replace(/[\r\n]/g, ''), desKey)
+  return JSON.parse(message)
+}

src/api/index.ts

@@ -0,0 +1,674 @@
+import Http from '@/util/axios'
+import {decrypt} from './data-analysis'
+import md5 from 'md5';
+
+const prefix = '/zero2/myships'
+const icdPrefix = 'https://sinoagent.i.sinotrans.com' // 生产
+// const icdPrefix = 'http://sinoicd.i.sinotrans.com' // 测试
+class Api {
+
+  public getInfoByDestPort(data: any) {
+    return Http.post(prefix + '/sp/ports/getDestPort', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 查询单日新增靠泊船舶列表
+   */
+  public getBerthsOfNumber(data: any) {
+    return Http.post(prefix + '/exapi/berth/berth/vessel', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 查询单日港外待靠泊数量及时长
+   */
+  public getMoorsOfNumber(data: any) {
+    return Http.post(prefix + '/exapi/berth/wait/num', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 4.2查询单日新增离泊数量及靠泊时长
+   * @param data
+   */
+  public getLeaveBerth(data: any) {
+    return Http.post(prefix + '/exapi/berth/unberth/num', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取船舶事件
+   * @param data
+   */
+  public getShipEvent(data: any) {
+    return Http.post(prefix + '/sp/ships/ihs/event', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 集装箱查询接口
+   * @param data
+   */
+  public getContainersScreening(data: any) {
+    return Http.post(prefix + '/exapi/movements/containersScreening', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 提单号查询接口
+   * @param data
+   */
+  public getContainersBillOfLadingScreening(data: any) {
+    return Http.post(prefix + '/exapi/movements/billofLadingScreening', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取内贸船舶信息
+   * @param data
+   */
+  public getInnerShipData(data: string) {
+    return Http.post(prefix + '/sp/ships/cert/mmsi', {mmsi: data}).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 查询具体船舶静态详情
+   * @param data 参数
+   */
+  public async getShipMessage(data: any) {
+    return await Http.post(prefix + '/sp/ships/posAndAissta', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 模糊搜索 AIS 船舶库
+   * @param data 参数
+   */
+  public async searchBoathouse(data: any) {
+    let shipData: any[] = []
+
+    await Http.post(prefix + '/sp/search/shipAisWithTime', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code) {
+        shipData = data.data
+        this.searchDictionary('2').then((res: any) => {
+          if (res) {
+            shipData.forEach((item2: any) => {
+              for (let i = 0, j = res.length; i < j; i++) {
+                if (item2.aisShiptypeId + '' === res[i].id + '') {
+                  item2.type = res[i].valueChs
+                }
+                if (!item2.type) {
+                  item2.type = '其他类型'
+                }
+              }
+            })
+          }
+        })
+      }
+    })
+    return shipData
+  }
+
+  /**
+   * 模糊查询港口
+   * @param keyword
+   */
+  public searchPortKeyWord(keyword: any) {
+    return Http.post(prefix + '/sp/search/ports', {keyword: keyword})
+  }
+
+  /**
+   * 到港查询
+   * @param data
+   */
+  public getArrivePortQuery(data: any) {
+    return Http.post(prefix + '/sp/ports/arrivalStatistics', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    }).catch((err) => {
+      return err
+    })
+  }
+
+  /**
+   * 离港查询
+   * @param data
+   */
+  public getLeavePortQuery(data: any) {
+    return Http.post(prefix + '/sp/ports/departureStatistics', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    }).catch((err) => {
+      return err
+    })
+  }
+
+  /**
+   * 预计到港查询
+   * @param data
+   */
+  public getYjPortQuery(data: any) {
+    return Http.post(prefix + '/sp/ports/expectedArrivalStatistics', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    }).catch((err) => {
+      return err
+    })
+  }
+
+  public getPortList(data: any) {
+    data.portLevelId = '1'
+    return Http.post(prefix + '/sp/ports/search', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  public getPortWeather(data: any) {
+    return Http.post(prefix + '/exapi/weather/singleMomentData', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  public getWeather(data: any) {
+    return Http.post(prefix + '/exapi/weather/singleMomentData', data).then((res: any) => {
+      const DesKey = res.headers.deskey
+      const data = decrypt(res.data, DesKey)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取字典
+   * type
+   * 1:  // 获取船舶国籍字典
+   * 2:  // 获取船舶类型字典
+   * 3:  // 获取航行状态字典
+   */
+  public searchDictionary(type: string) {
+    const param: { name: string } = {name: ''}
+    if (type === '1') {
+      param.name = 'ais_nationality_id'
+    } else if (type === '2') {
+      param.name = 'ais_ship_type_id'
+    } else if (type === '3') {
+      param.name = 'ais_nav_status_id'
+    }
+    return Http.post(prefix + '/sp/dict', param).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 查询船舶历史轨迹
+   * @param data
+   */
+  public getHistoryTrack(data: any) {
+    return Http.post(prefix + '/sp/ships/position/history', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  public getShipHistoryInterval(data: any) {
+    return Http.post(prefix + '/sp/ships/position/history/intervalHour', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取最新的提醒新信息
+   * @param data
+   */
+  public getLastRemindInfo(data: any) {
+    return Http.post(prefix + '/ms/event/getAllEventByTime', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      return data
+    })
+  }
+
+  /**
+   * 获取船舶港口历史
+   * @param data
+   */
+  public getShipPort(data: any) {
+    return Http.post(prefix + '/sp/ships/port/history', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  public getShipCnName(data: any) {
+    return Http.post(prefix + '/sp/ships/getCnNameByMMSI', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  public getDestPort(data: any) {
+    return Http.post(prefix + '/sp/ports/getDestPort', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取数据分析图片地址
+   * @param data
+   * @private
+   */
+  public getDataAnalysisImg(data: any) {
+    return Http.post(prefix + '/uc/public/getMotImg', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data.url
+      }
+    })
+  }
+
+  /**
+   * 获取最新的提醒消息
+   * @param data
+   */
+  public getMessageLast(data: any) {
+    return Http.post(prefix + '/ms/event/getLatestAreaEvent', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取船舶挂靠港记录
+   * @param data
+   */
+  public getPortReport(data: any) {
+    return Http.post(prefix + '/sp/auth/ships/port/v2/history_api', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取用户区域列表菜单
+   * @param data
+   */
+  public getAreaMenuList(data: any) {
+    return Http.post(prefix + '/ms/label/getAreaGroup', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 查询区域范围内的船舶数据
+   */
+  public getAreaData(data: any) {
+    return Http.post(prefix + '/sp/auth/region/latest/dataAalysis', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 获取船队数据
+   */
+  public async getShipRanks(data: any) {
+    return await Http.post(prefix + '/ms/business/getFollowShip', data).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  private decryptUtil(data: any) {
+    const DesKey = data.headers['deskey']
+    return decrypt(data.data, DesKey)
+  }
+
+  /**
+   * 模糊查询港口信息
+   * @param keyword
+   */
+  public getPort(keyword: string) {
+    return Http.post(prefix + '/sp/search/ports', {keyword: keyword}).then((res: any) => {
+      const data = this.decryptUtil(res)
+      if (data.code === '0') {
+        return data.data
+      }
+    })
+  }
+
+  /**
+   * 通过港口id获取港口的信息
+   * @param data
+   */
+  public getPortInfo(data: any) {
+    return Http.post(prefix + '/sp/ports/ihs/port', {portId: data}).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result.data
+      }
+    })
+  }
+
+  public getShipRouteSearch(data: any) {
+    return Http.post(prefix + '/exapi/shipRoute/search', data).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  public getFollowFlag(data: any) {
+    return Http.post(prefix + '/ms/shipRoute/getFollowFlag', data)
+  }
+
+  public getPortRouteList() {
+    return Http.post(prefix + '/ms/shipRoute/getFollow', 'POST', {})
+  }
+
+  public getRouteInfo(data: any) {
+    return Http.post(prefix + '/ms/shipRoute/get', data)
+  }
+
+  public getStatusTrack(data: any) {
+    return Http.post(prefix + '/exapi/shipRoute/statusTrack', data).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  public getShipDoc(data: any) {
+    return Http.post(prefix + '/sp/ihs/v2/shipArchive', data).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result.data
+      }
+    })
+  }
+
+  public testToken(appToken: string) {
+    return Http.get(icdPrefix + '/isa/sysClient/checkToken?appToken=' + appToken).then((res: any) => {
+      return res.data
+    })
+  }
+
+  public getShipFleet(token: string, companyId: string) {
+    return Http.get(icdPrefix + '/isa/sysClientFleet/getShipsMmsi?companyId=' + companyId, {
+      headers: {
+        Authorization: token
+      }
+    }).then((res: any) => {
+      return res.data
+    })
+  }
+
+  public getShipIdByMmmsi(mmsi: string) {
+    return Http.post(prefix + '/sp/ships/getShipIdByMMSI', {mmsiList: mmsi}).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  /**
+   * 根据mmsi查询船舶静态信息
+   * @param mmsi
+   */
+  public getShipBymmsi(mmsi: string) {
+    return Http.post(prefix + '/sp/auth/ships/getAisStaticLatest', {mmsiList: mmsi}).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  /**
+   * 预测船舶目的港及剩余里程和时长
+   */
+  public getPredictTime(data: any) {
+    return Http.post(prefix + '/exapi/shipRoute/predict', data).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  /**
+   * 获取台风列表
+   */
+  public getTyphoonList() {
+    return Http.post(prefix + '/weather/typhoonList', {daysnumber: -1}).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  /**
+   * 获取台风详情
+   */
+  public getTyphoonInfo(id: string) {
+    return Http.post(prefix + '/weather/typhoonData', {id: id}).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  /**
+   * 根据节点查询航线路由
+   */
+  public getRouteByNodes(data: any) {
+    return Http.post(prefix + '/exapi/shipRoute/routingNodes', data).then((res: any) => {
+      const result = this.decryptUtil(res)
+      if (result.code === '0') {
+        return result
+      }
+    })
+  }
+
+  /**
+   * 通告预警地区和分类标签下通告预警条数(用于柱状图)
+   */
+  public getIncidentCount() {
+    const id = 'al00009'
+    const key = '99bd0e09e068a19600fb4ef1e1890200'
+    const time = parseInt(new Date().getTime() / 1000 + '')
+    return Http.post('https://talk.anlantech.cn/standard/incident/count', {}, {
+      headers: {
+        'anlan-version': 'v2',
+        'anlan-appid': id,
+        'anlan-timestamp': time,
+        'anlan-token': md5('' + id + time + key)
+      }
+    }).then((res) => {
+      return res.data
+    })
+  }
+
+  /**
+   * 通告预警地区和分类标签下通告预警条数(用于柱状图)
+   */
+  public getIncidentInfo(param?: any) {
+    const id = 'al00009'
+    const key = '99bd0e09e068a19600fb4ef1e1890200'
+    const time = parseInt(new Date().getTime() / 1000 + '')
+    let typeIds = param && param.typeIds ? param.typeIds : '';
+    let org = param && param.org ? param.org : '';
+    let begin = param && param.begin ? param.begin : '';
+    let end = param && param.end ? param.end : '';
+    let page = param && param.page ? param.page : '';
+    let size = param && param.size ? param.size : '';
+    return Http.get('https://talk.anlantech.cn/standard/incidentInfo?' + `typeIds=${typeIds}&org=${org}&begin=${begin}&end=${end}&page=${page}&size=${size}`, {
+      headers: {
+        'anlan-version': 'v2',
+        'anlan-appid': id,
+        'anlan-timestamp': time,
+        'anlan-token': md5('' + id + time + key)
+      }
+    }).then((res) => {
+      return res.data
+    })
+  }
+
+  /**
+   * 分类标签地址
+   */
+  public getIncidentTypeTags() {
+    const id = 'al00009'
+    const key = '99bd0e09e068a19600fb4ef1e1890200'
+    const time = parseInt(new Date().getTime() / 1000 + '')
+    return Http.get('https://talk.anlantech.cn/standard/incident/tags', {
+      headers: {
+        'anlan-version': 'v2',
+        'anlan-appid': id,
+        'anlan-timestamp': time,
+        'anlan-token': md5('' + id + time + key)
+      }
+    }).then((res) => {
+      return res.data
+    })
+  }
+
+  /**
+   * 地区列表地址
+   */
+  public getIncidentOrgsTags() {
+    const id = 'al00009'
+    const key = '99bd0e09e068a19600fb4ef1e1890200'
+    const time = parseInt(new Date().getTime() / 1000 + '')
+    return Http.get('https://talk.anlantech.cn/standard/incident/orgs', {
+      headers: {
+        'anlan-version': 'v2',
+        'anlan-appid': id,
+        'anlan-timestamp': time,
+        'anlan-token': md5('' + id + time + key)
+      }
+    }).then((res) => {
+      return res.data
+    })
+  }
+
+  /**
+   * 获取车辆信息
+   */
+  // public  getCarInfo() {
+  //   return Http.post('/car/carhisttrack/car/track/getCarHistoricalTrackSingle',{carNum: '琼A2AJ02'}).then((res: any) => {
+  //     console.log(res)
+  //   })
+  // }
+  /**
+   * 获取车辆信息
+   */
+  public getCarInfo() {
+    return Http.post('/zero2/car/carhisttrack/car/track/getCarHistoricalTrack').then((res: any) => {
+      return res.data
+    })
+  }
+  public getCarTrack (data: any) {
+    return Http.post('/zeroi/free/freetrade/api/getCarTrack', data).then(res => {
+      return res.data
+    })
+  }
+}
+
+const HttpApi = new Api()
+export default HttpApi

src/components/dialog/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="custom-modal-box">
+    <vxe-modal v-model="show"
+               :width="width"
+               :min-height="height"
+               :resize="resize"
+               :position="position"
+               :lock-scroll="false"
+               :lock-view="false"
+               :mask="false">
+      <template slot="header">
+        <div class="cus-modal-header">
+          <div class="title">
+            <div v-if="header.hasIcon" class="title-icon">
+              <i class="iconfont icon-chuanbo"></i>
+            </div>
+            <div class="title-content"><span>{{ header.title }}</span></div>
+            <div v-if="header.hasAfterIcon" class="country-icon">
+              <img id="ship-flag-url" src="" alt=""/>
+            </div>
+          </div>
+          <div class="operate">
+            <div v-if="header.hasMin" class="icon-item operate-min" @click="showMini">
+              <i class="iconfont icon-zuixiaohua"></i>
+            </div>
+            <div v-if="header.hasMax" class="icon-item operate-max">
+              <i class="iconfont icon-zuidahua"></i>
+            </div>
+            <div class="icon-item operate-close">
+              <i class="iconfont icon-guanbi" @click="closeDialog"></i>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template slot="default">
+        <slot name="default"></slot>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import DialogUtil from '@/util/new-dialog/index'
+
+@Component({
+  props: {
+    show: {
+      type: Boolean,
+      default: true,
+      required: false
+    },
+    width: {
+      type: String,
+      required: true
+    },
+    height: {
+      type: String,
+      required: true
+    },
+    resize: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    header: {
+      type: Object,
+      default: () => {
+        return {
+          title: '标题',
+          hasIcon: false,
+          beforeUrl: '',
+          hasAfterIcon: false,
+          afterUrl: '',
+          hasMin: true,
+          hasMax: true
+        }
+      }
+    },
+    position: {
+      type: Object,
+      default: () => {
+        return {
+          left: {
+            type: String,
+            required: false,
+            default: '50%'
+          },
+          top: {
+            type: String,
+            required: false,
+            default: '50%'
+          }
+        }
+      }
+    },
+    vueName: {
+      type: String,
+      required: true
+    },
+    defaultMini: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+})
+export default class Dialog extends Vue {
+  private closeDialog() {
+    DialogUtil.closeCom(this.$props.vueName)
+  }
+
+  public mounted() {
+    if (this.$props.defaultMini) {
+      this.$nextTick(() => {
+        this.showMini()
+      })
+    }
+  }
+
+  private showMini() {
+    DialogUtil.showMini(this.$props.vueName)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.custom-modal-box {
+  z-index: 999;
+
+  .default-box {
+    width: 100%;
+    height: 100%;
+  }
+
+  ::v-deep.vxe-modal--content {
+    width: 100%;
+    overflow: auto !important;
+  }
+
+  .cus-modal-header {
+    display: flex;
+    align-items: center;
+
+    .operate {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      right: 1.25rem;
+
+      .icon-item {
+        margin-left: 1.25rem;
+        cursor: pointer;
+      }
+    }
+
+    .title {
+      display: flex;
+      align-items: center;
+
+      .title-icon {
+        color: #f5f2f0;
+        margin-right: 0.625rem;
+        width: 1.4375rem;
+        height: 1.4375rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 0.875rem;
+
+          &:hover {
+
+            color: var(--white-font) !important;
+          }
+        }
+      }
+
+      .country-icon {
+        margin-left: 0.625rem;
+        width: 1.875rem;
+        height: 1.25rem;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/header/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="myships-header">
+    <div class="logo-box">
+      <!--      <a class="lofo_a">-->
+      <!--        <img src="../../../public/img/logo.svg" alt=""/>-->
+      <!--        <img class="shipAgency" src="../../../public/img/shipAgency.png" alt=""/>-->
+      <!--      </a>-->
+      <span style="font-size: 20px;font-weight: bold;">海南零关税交通工具监管系统</span>
+    </div>
+    <div class="header-tool">
+      <!--      <div class="lanuage-setting" v-if="funOpen.trans">-->
+      <!--        <el-select v-model="languageValue" @change="changeLanguage">-->
+      <!--          <el-option label="简体中文" value="Chinese"></el-option>-->
+      <!--          <el-option label="English" value="English"></el-option>-->
+      <!--        </el-select>-->
+      <!--      </div>-->
+      <div class="mssage" v-if="funOpen.message">
+        <el-badge :value="messageData.length" class="item" :max="99">
+          <el-button
+            size="small"
+            icon="el-icon-message-solid"
+            @click="openMessage"
+          ></el-button>
+        </el-badge>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import {Language} from "@/module/menu";
+import {header} from '@/util/fun-switch'
+import DialogUtil from "@/util/new-dialog";
+import MessageListTemp from "@/views/new-dialog/MessageListTemp.vue";
+import {DialogType} from "@/util/temp-interface";
+import HttpApi from "@/api";
+import {getBeforeTime, getLongByTime, getNowTime} from '@/util/date';
+
+const config = require('../../../public/config/sys-config.json')
+@Component({})
+export default class Header extends Vue {
+  private languageValue = window.localStorage.getItem('language') === 'zh' ? 'Chinese' : 'English'
+  private funOpen = header
+  private messageData: any[] = []
+
+  public mounted() {
+    if (this.funOpen.message) {
+      this.getShipDataMinute()
+      setInterval(() => {
+        this.getShipDataMinute()
+      }, 1000 * 60 * 5)
+    }
+    this.$nextTick(() => {
+      this.changeLanguage(config.defaultLanguage)
+    })
+
+    window.addEventListener('setItemEvent', (e: any) => {
+      if (e.key === 'language') {
+        this.languageValue = e.newValue === 'zh' ? 'Chinese' : 'English'
+      }
+    })
+  }
+
+  private changeLanguage(language: string) {
+    if (language === 'English') {
+      this.$i18n.locale = Language.en;
+      window.localStorage.setItem('language', Language.en)
+    } else if (language === 'Chinese') {
+      this.$i18n.locale = Language.zh;
+      window.localStorage.setItem('language', Language.zh)
+    }
+    this.$forceUpdate()
+  }
+
+  private openMessage() {
+    DialogUtil.showDialog(MessageListTemp, DialogType.MESSAGE_LIST, {
+      dialogData: {
+        vueName: DialogType.MESSAGE_LIST
+      },
+      infoData: {
+        message: this.messageData
+      },
+      show: true
+    })
+  }
+
+  private getShipDataMinute() {
+    const endTime = getLongByTime(getNowTime());
+    const startTime = getLongByTime(getBeforeTime(getNowTime(), 1));
+    HttpApi.getLastRemindInfo({startTime: startTime, endTime: endTime}).then((res: any) => {
+      if (res.code === '0') {
+        this.messageData = res.data.shipBased
+      }
+    })
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.myships-header {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  .logo-box {
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem;
+    width: 50%;
+
+    .lofo_a {
+      text-decoration: none;
+      display: flex;
+      align-items: Center;
+
+      img:first-child {
+        height: 2.1875rem;
+      }
+
+      img:nth-child(2) {
+        height: 2.2rem;
+        margin-left: 1.25rem;
+      }
+
+    }
+  }
+
+  .header-tool {
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+
+    .lanuage-setting {
+      display: flex;
+      align-items: center;
+
+      ::v-deep .el-input__inner {
+        border: none;
+        text-align: right;
+        width: 7.5rem;
+      }
+
+    }
+
+    .mssage {
+      width: 0.5625rem;
+      height: 0.5625rem;
+      display: flex;
+      margin-right: 1.25rem;
+      margin-left: 1.25rem;
+
+      .el-badge {
+        display: flex;
+      }
+
+      ::v-deep .el-button--small {
+        padding: 0;
+        font-size: 1rem;
+        width: 1.5625rem;
+        height: 1.5625rem;
+        border-radius: 1.5625rem;
+        border: 0;
+        color: var(--aside-gbc);
+        background-color: #e7eaf4;
+      }
+
+      ::v-deep .el-badge__content {
+        background-color: #d61819;
+        border: 0;
+      }
+
+    }
+  }
+}
+</style>

src/components/menu/analysis.ts

@@ -0,0 +1,96 @@
+import {MenuType} from "@/module/menu";
+import HttpApi from "@/api";
+import {Vue} from "vue-property-decorator";
+
+interface MenuOption {
+  title: string,
+  icon: string,
+  children: MenuOption[],
+  type: string,
+
+  [key: string]: any
+}
+
+const config = require('../../../public/config/menu.json')
+const menu: MenuType[] = config.menu
+const menuList: MenuType[] = []
+
+function analysisMenu(menus: MenuType[]) {
+  for (let i = 0; i < menus.length; i++) {
+    const menuItem = menus[i]
+    if (menuItem.open) {
+      if (!menuItem.children.length) {
+        // if (menuItem.nameEn === 'My Fleets' && !Vue.prototype.$myFleet.length) {
+        //   continue
+        // }
+        menuList.push(menuItem)
+      } else {
+        menuList.push(analysisMenuChildren(menuItem))
+      }
+    }
+
+  }
+}
+
+function analysisMenuChildren(menu: MenuType) {
+  const menuTemp: MenuType = JSON.parse(JSON.stringify(menu));
+  menuTemp.children = []
+  for (let child of menu.children) {
+    if (child.open) {
+      if (!child.children.length) {
+        menuTemp.children.push(child)
+      } else {
+        menuTemp.children.push(analysisMenuChildren(child))
+      }
+    }
+  }
+  return menuTemp
+}
+
+analysisMenu(menu)
+
+HttpApi.getAreaMenuList({}).then((res: any) => {
+  if (res) {
+    const tempMenuAll: MenuOption[] = []
+    res.forEach((item: any, index1: number) => {
+      const tempData: MenuOption = {
+        title: item.name,
+        id: item.id,
+        index: 'area-' + index1,
+        icon: '',
+        children: [],
+        type: 'AreaListTemp',
+        hasMini: false
+      }
+      if (item.tsCustomAreaList) {
+        item.tsCustomAreaList.forEach((res: any, index: any) => {
+          const tempData2: MenuOption = {
+            title: '',
+            icon: '',
+            children: [],
+            type: 'AreaListTemp',
+            hasMini: false
+          }
+          tempData2.title = res.name
+          tempData2.area = res.area
+          tempData2.cLat = res.cLat
+          tempData2.cLon = res.cLon
+          tempData2.cagid = res.cagid
+          tempData2.check = res.check
+          tempData2.id = res.id
+          tempData2.useType = res.useType
+          tempData2.index = 'area-' + index1 + '-' + index
+          tempData.children.push(tempData2)
+        })
+      }
+      tempMenuAll.push(tempData)
+    })
+
+    menuList.forEach((item: any) => {
+      if (item.title === '区域列表') {
+        item.children = tempMenuAll
+      }
+    })
+  }
+})
+export {menuList}

src/components/menu/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-menu :background-color="bg"
+             :collapse="isCollapse"
+             :text-color="color"
+             :active-text-color="actColor"
+             :default-active="defaultAct"
+             :unique-opened="keepOne">
+      <div v-for="(menu) in menuList" :key="menu.index">
+        <MenuItem v-if="!menu.children.length" :menu="menu"></MenuItem>
+        <SubmenuItem v-else :sum-menu="menu"></SubmenuItem>
+      </div>
+    </el-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import {Language, MenuType} from "@/module/menu";
+import MenuItem from "@/components/menu/menu-item/index.vue";
+import SubmenuItem from "@/components/menu/submenu-item/index.vue";
+
+const menus = require('./analysis')
+
+@Component({
+  components: {
+    MenuItem,
+    SubmenuItem
+  },
+  props: {
+    bg: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    color: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    actColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    defaultAct: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    keepOne: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isCollapse: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+})
+export default class Menu extends Vue {
+  private menuList: MenuType[] = menus.menuList
+}
+</script>
+<style src="./style.css">
+</style>

src/components/menu/menu-item/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <el-menu-item :index="menu.index" @click="openMenu(menu)">
+    <template slot="title">
+      <div class="menu-item-box-c flex-column-center">
+        <div
+          v-if="menu.title !== '预计到港' && menu.title !== '到港查询' && menu.title !== '离港查询' && menu.title !== '在泊统计' "
+          class="menu-icon-c">
+          <img :src="pgName + menu.icon" alt="">
+        </div>
+        <div v-else style="width: 4px;height: 4px;background: #FFFFFF; border-radius: 50%;margin-right: 10px"></div>
+        <div class="menu-title-c" slot="title">
+          <span>{{ language === 'zh' ? menu.title : menu.nameEn || menu.title }}</span>
+        </div>
+      </div>
+    </template>
+  </el-menu-item>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import storeUtil from '@/util/store'
+import DialogUtil from "@/util/new-dialog";
+import {DialogType} from "@/util/temp-interface";
+import SearchListTemp from "@/views/new-dialog/SearchListTemp.vue";
+import TrackRecordLogTemp from "@/views/new-dialog/TrackRecordLogTemp.vue";
+import DataAnalysisTemp from "@/views/new-dialog/DataAnalysisTemp.vue";
+import MapToolTemp from "@/views/new-dialog/MapToolTemp.vue";
+import ShipRanksTemp from "@/views/new-dialog/ShipRanksTemp.vue";
+import WeatherTemp from "@/views/new-dialog/WeatherTemp.vue";
+import RouteQueryTemp from "@/views/new-dialog/RouteQueryTemp.vue";
+import ContainerQueryTemp from "@/views/new-dialog/ContainerQueryTemp.vue";
+import ArriveLeaveQueryTemp from "@/views/new-dialog/ArriveLeaveQueryTemp.vue";
+import DepartureInquiryTemp from "@/views/new-dialog/DepartureInquiryTemp.vue";
+import ExpectedArrivalTemp from "@/views/new-dialog/ExpectedArrivalTemp.vue";
+import AreaListTemp from '@/views/new-dialog/AreaListTemp.vue';
+import NumberOfBerthsTemp from "@/views/new-dialog/NumberOfBerthsTemp.vue";
+import NotanTemp from "@/views/new-dialog/NotanTemp.vue";
+
+@Component({
+  props: {
+    menu: {
+      type: Object,
+      required: true
+    }
+  }
+})
+export default class MenuItem extends Vue {
+  private pgName = window.localStorage.getItem('pgName') ? '/' + window.localStorage.getItem('pgName') : location.origin
+  private language = window.localStorage.getItem('language')
+
+  private openMenu(menu: any) {
+    const param: any = {
+      dialogData: {
+        title: '',
+        vueName: menu.type
+      },
+      infoData: {},
+      show: true
+    }
+    if (menu.type !== DialogType.AREA_LIST) {
+      // (storeUtil.getMapFun() as any).clearallship();
+      // (storeUtil.getMapFun() as any).clearArea()
+    }
+    let template: any
+    switch (menu.type) {
+      case DialogType.SEARCH_LIST: {
+        template = SearchListTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.TRACK_RECORD_LOG: {
+        template = TrackRecordLogTemp
+        param.infoData = {
+          isHistory: true
+        }
+        break
+      }
+      case DialogType.DATA_ANALYSIS: {
+        template = DataAnalysisTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.MAP_TOOL: {
+        template = MapToolTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.SHIP_RANKS: {
+        template = ShipRanksTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.WEATHER: {
+        template = WeatherTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.ROUTE_QUERY: {
+        template = RouteQueryTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.CONTAINER_QUERY: {
+        template = ContainerQueryTemp
+        param.infoData = {}
+        break
+      }
+      case DialogType.ARRIVE_LEAVE_QUERY: {
+        template = ArriveLeaveQueryTemp
+        param.infoData = {
+          type: 'arrive'
+        }
+        break
+      }
+      case DialogType.DEPARTURE_INQUIRY: {
+        template = DepartureInquiryTemp
+        param.infoData = {
+          type: 'leave'
+        }
+        break
+      }
+      case DialogType.EXPECTED_ARRIVAL: {
+        template = ExpectedArrivalTemp
+        param.infoData = {
+          type: 'yj'
+        }
+        break
+      }
+      case DialogType.AREA_LIST: {
+        template = AreaListTemp
+        param.infoData = {
+          data: menu
+        }
+        break
+      }
+      case DialogType.NUMBER_OF_BERTHS: {
+        template = NumberOfBerthsTemp
+        param.infoData = {
+          data: ''
+        }
+        break
+      }
+      case DialogType.NOTAN: {
+        template = NotanTemp
+        param.infoData = {
+          data: ''
+        }
+        break
+      }
+    }
+    DialogUtil.showDialog(template, menu.type, param)
+  }
+
+  public mounted() {
+    window.addEventListener("setItemEvent", (e: any) => {
+      if (e.key === 'language') {
+        this.language = e.newValue
+      }
+    });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.el-menu .is-active {
+  background: red !important;
+  color: #FFFFFF;
+}
+
+</style>

src/components/menu/menu-temp/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <el-submenu :index="sumMenu.index">
+      <template slot="title">
+        <div class="menu-item-box-c flex-column-center">
+          <div class="menu-icon-c flex-center">
+            <img :src="pgName + sumMenu.icon" alt="">
+          </div>
+          <div><span>{{ language === 'zh' ? sumMenu.title : sumMenu.nameEn || sumMenu.title }}</span></div>
+        </div>
+      </template>
+      <div v-for="(menu,index) in sumMenu.children" :key="index">
+        <div v-if="menu.children.length">
+          <SubmenuItem :sum-menu="menu"></SubmenuItem>
+        </div>
+        <div v-else>
+          <MenuItem :menu="menu"></MenuItem>
+        </div>
+      </div>
+    </el-submenu>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import MenuItem from "@/components/menu/menu-item/index.vue";
+import SubmenuItem from "@/components/menu/submenu-item/index.vue";
+
+@Component({
+  components: {
+    MenuItem,
+    SubmenuItem
+  },
+  props: {
+    sumMenu: {
+      type: Object,
+      required: true
+    }
+  }
+})
+export default class SubMenuTemp extends Vue {
+  private pgName = window.localStorage.getItem('pgName') ? '/' + window.localStorage.getItem('pgName') : location.origin
+  private language = window.localStorage.getItem('language')
+
+  public mounted() {
+    window.addEventListener("setItemEvent", (e: any) => {
+      if (e.key === 'language') {
+        this.language = e.newValue
+      }
+    });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/menu/style.css

@@ -0,0 +1,6 @@
+.menu-item-box-c .menu-icon-c {
+    width: 1.875rem !important;
+    text-align: center;
+    box-sizing: border-box;
+    padding-right: 0.625rem;
+}

src/components/menu/submenu-item/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <el-submenu :index="sumMenu.index">
+      <template slot="title">
+        <div class="menu-item-box-c flex-column-center">
+          <div class="menu-icon-c flex-center">
+            <img :src="pgName + sumMenu.icon" alt="">
+          </div>
+          <div><span>{{ language === 'zh' ? sumMenu.title : sumMenu.nameEn || sumMenu.title }}</span></div>
+        </div>
+      </template>
+      <div v-for="(menu,index) in sumMenu.children" :key="index">
+        <div v-if="menu.children.length">
+          <SubMenuTemp :sum-menu="menu"></SubMenuTemp>
+        </div>
+        <div v-else>
+          <MenuItem :menu="menu"></MenuItem>
+        </div>
+      </div>
+    </el-submenu>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import MenuItem from "@/components/menu/menu-item/index.vue";
+import SubMenuTemp from "@/components/menu/menu-temp/index.vue";
+
+@Component({
+  components: {
+    MenuItem,
+    SubMenuTemp
+  },
+  props: {
+    sumMenu: {
+      type: Object,
+      required: true
+    }
+  }
+})
+export default class SubmenuItem extends Vue {
+  private pgName = window.localStorage.getItem('pgName') ? '/' + window.localStorage.getItem('pgName') : location.origin
+  private language = window.localStorage.getItem('language')
+
+  public mounted() {
+    window.addEventListener("setItemEvent", (e: any) => {
+      if (e.key === 'language') {
+        this.language = e.newValue
+      }
+    });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/on-map-view/MapBottomMousePos.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="lon-lat-pos">
+    <div>
+      <div id="positionLng">82° 18′15″</div>
+      <div id="positionLat">112° 18′15″</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue, Component} from "vue-property-decorator";
+
+@Component({})
+export default class MapBottomMousePos extends Vue {
+}
+</script>
+
+<style scoped lang="scss">
+.lon-lat-pos {
+  position: absolute;
+  z-index: 3;
+  height: 3.125rem;
+  width: 7.5rem;
+  border-radius: 0.25rem;
+  left: 1.25rem;
+  bottom: 0.5rem;
+  background-color: var(--map-control-gb);
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  color: var(--map-control-font-color);
+}
+</style>

src/components/on-map-view/MapBottomShipType.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="ship-type-box" id="ship-type-box">
+    <ul>
+      <li v-for="(item,index) in shipTypes" :key="index">
+        <div :style="'background-color:'+ item.color"></div>
+        <span>{{ language === 'zh' ? item.name : item.tran }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue, Component} from 'vue-property-decorator'
+
+@Component({})
+export default class MapBottomShipType extends Vue {
+  private language = window.localStorage.getItem('language')
+  private shipTypes: any[] = [
+    {
+      name: '货船',
+      tran: 'Cargo Ship',
+      color: '#BD3154'
+    },
+    {
+      name: '游艇',
+      tran: 'Fishing vessel',
+      color: '#FFC24D'
+    }
+  ]
+
+  public mounted() {
+    window.addEventListener('setItemEvent', (e: any) => {
+      if (e.key === 'language') {
+        this.language = e.newValue
+      }
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ship-type-box {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  z-index: 999;
+  right: 1.25rem;
+  bottom: 1.25rem;
+  border-radius: 0.25rem;
+  background-color: #FFFFFF;
+  color: #333333;
+  padding: 0 0 0 1.25rem;
+
+  ul {
+    width: 100%;
+    display: flex;
+    margin-right: 0.625rem;
+    padding: 0 0.3125rem;
+    line-height: 0.625rem;
+    justify-content: space-between;
+
+    li {
+      :first-child {
+        display: inline-block;
+        border-radius: 0.5625rem;
+        width: 0.5625rem;
+        height: 0.5625rem;
+        margin-right: 0.25rem;
+      }
+
+      font-size: 0.75rem;
+      display: inline-block;
+      margin-right: 0.625rem;
+    }
+  }
+}
+</style>

src/components/on-map-view/MiniBox.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="mini-box" id="mini-box">
+    <div class="mini-item" v-for="(item,index) in miniList" :key="index">
+      <el-tooltip :content="item.title? item.title:$t(`message.menu.${item.type}`)">
+        <div class="title">
+          <span v-if="!item.title">{{ $t(`message.menu.${item.type}`) }}</span>
+          <span v-else>{{ item.title }}</span>
+        </div>
+      </el-tooltip>
+      <div class="operation">
+        <span @click="showDialog(item)" class="el-icon-full-screen"></span>
+        <span @click="closeDialog(item)" class="el-icon-close"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue, Component} from 'vue-property-decorator'
+import MiniUtil from "@/util/mini";
+import DialogUtil from "@/util/new-dialog";
+
+@Component({})
+export default class MiniBox extends Vue {
+  private miniList: any[] = (this as any).$MiniList
+
+  /**
+   * 从最小化变成正常显示
+   * @param data
+   * @private
+   */
+  private showDialog(data: any) {
+    MiniUtil.delMini(data.type)
+    DialogUtil.showCom(data.type)
+  }
+
+  /**
+   * 在最小化状态下关闭弹窗
+   * @param data
+   * @private
+   */
+  private closeDialog(data: any) {
+    DialogUtil.closeMini(data.type)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mini-box {
+  width: 18.75rem;
+  z-index: 2;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  padding: 3.125rem 0 2.5rem 0;
+  background: transparent;
+  pointer-events: none;
+
+  .mini-item {
+    width: 17.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    background: var(--theme-color);
+    border-left: 0.625rem solid #ffc412;
+    box-sizing: border-box;
+    margin: 0.3125rem 0;
+    pointer-events: auto;
+
+    .title {
+      width: 12.5rem;
+      color: #FFFFFF;
+      font-size: 1.125rem;
+      padding: 0 0.625rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .operation {
+      width: 5rem;
+      color: #FFFFFF;
+      font-size: 1.5rem;
+      display: flex;
+      justify-content: space-around;
+      padding: 0 0.625rem;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

src/components/on-map-view/OnClickWeather.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="popup" class="ol-popup">
+    <div class="mapboxgl-popup-content">
+      <div id="popup-content" class="popup-content"></div>
+      <div class="popup-space"></div>
+      <div class="popup-point"></div>
+      <button class="mapboxgl-popup-close-button" @click="closePopup" type="button" aria-label="Close popup"
+              aria-hidden="true">×
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import storeUtil from "@/util/store";
+
+@Component({})
+export default class OnClickWeather extends Vue {
+  private closePopup() {
+    (storeUtil.getMapFun() as any).removePopupOverlay()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ol-popup {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  width: 10rem;
+
+  .mapboxgl-popup-content {
+    position: relative;
+    border-radius: 0.1875rem;
+  }
+
+  .mapboxgl-popup-content .popup-content {
+    width: 100%;
+    height: 2.5rem;
+    line-height: 2.5rem;
+    background-color: rgba(35, 32, 87, 0.6);
+    align-self: flex-end;
+    text-align: center;
+  }
+
+  .mapboxgl-popup-content .popup-space {
+    width: 0.25rem;
+    height: 5.125rem;
+    background-color: rgba(35, 32, 87, 0.6);
+  }
+
+  .mapboxgl-popup-content .popup-point {
+    position: relative;
+    background-color: rgba(35, 32, 87, 0.6);
+    left: -0.125rem;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+
+  }
+
+  .mapboxgl-popup-content .popup-content p {
+    font-size: 1rem;
+    color: white;
+    margin: 0;
+  }
+
+  .mapboxgl-popup-close-button {
+    pointer-events: auto !important;
+    font-size: 1rem;
+    color: #a7a7a7;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: 0;
+    border-radius: 0 0.1875rem 0 0;
+    cursor: pointer;
+    background-color: transparent;
+  }
+}
+</style>

src/components/on-map-view/PortHoverView.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="showPortMessage"
+       class="showShipMessage"
+       style="min-width: 6.25rem">
+    <div><span>{{ $t('message.portHoverView.chineseName') }}:&nbsp;</span>{{ shipFloatMes.portNameCn }}</div>
+    <div><span>{{ $t('message.portHoverView.englishName') }}:&nbsp;</span>{{ shipFloatMes.portNameEn }}</div>
+    <div><span>{{ $t('message.portHoverView.portCode') }}:&nbsp;</span>{{ shipFloatMes.portCode }}</div>
+    <div><span>{{ $t('message.portHoverView.portPos') }}:&nbsp;</span>{{ shipFloatMes.portLatLon }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue, Component} from "vue-property-decorator";
+import store from "@/util/store";
+
+@Component({})
+export default class PortHoverView extends Vue {
+  private shipFloatMes: any = {}
+
+  public mounted() {
+    this.$nextTick(() => {
+      (store.getMapFun() as any).showShipPathMessage(store.getMapInstance(), this)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.showShipMessage {
+  position: absolute;
+  padding: 0.625rem;
+  background-color: white;
+  font-size: 0.75rem;
+  border-radius: 0.625rem;
+  text-align: left;
+  top: 0.625rem;
+  left: 0.625rem;
+  white-space: nowrap;
+
+  div {
+    height: 1.25rem;
+    line-height: 1.25rem;
+  }
+}
+</style>

src/components/on-map-view/ShipHoverView.vue

@@ -0,0 +1,52 @@
+<template>
+  <div id="showShipMessage"
+       class="showShipMessage"
+       style="min-width: 6.25rem">
+    <div>{{ $t('message.ShipHoverView.shipName') }}&nbsp;{{ shipFloatMes.shipnameEn }}</div>
+    <div>{{ $t('message.ShipHoverView.mmsi') }}&nbsp;{{ shipFloatMes.mmsi }}</div>
+    <div>{{ $t('message.ShipHoverView.lon') }}&nbsp;{{ shipFloatMes.lon }}</div>
+    <div>{{ $t('message.ShipHoverView.lat') }}&nbsp;{{ shipFloatMes.lat }}</div>
+    <div>{{ $t('message.ShipHoverView.time') }}&nbsp;{{ formatDate(shipFloatMes.time) }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import {getTimeForLong} from "@/util/date";
+import store from "@/util/store";
+
+@Component({})
+export default class ShipHoverView extends Vue {
+  private shipFloatMes: any = {}
+
+  private formatDate(time: any) {
+    return getTimeForLong(time * 1000, 'YYYY-MM-DD hh:mm:ss')
+  }
+
+  public mounted() {
+    this.$nextTick(() => {
+      (store.getMapFun() as any).showShipPathMessage(store.getMapInstance(), this)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.showShipMessage {
+  position: absolute;
+  padding: 0.625rem;
+  background-color: white;
+  font-size: 0.75rem;
+  border-radius: 0.625rem;
+  text-align: left;
+  top: 0.625rem;
+  left: 0.625rem;
+  white-space: nowrap;
+
+  div {
+    height: 1.25rem;
+    line-height: 1.25rem;
+  }
+}
+</style>

src/components/on-map-view/TrackHoverView.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="showPathPointMessage"
+       class="showShipMessage"
+       style="min-width: 6.25rem">
+    <div>{{ $t('message.TrackHoverView.course') }}&nbsp;{{ shipFloatMes.heading }}°</div>
+    <div>{{ $t('message.TrackHoverView.Speed') }}&nbsp;{{ shipFloatMes.sog }}knot</div>
+    <div>{{ $t('message.TrackHoverView.time') }}&nbsp;{{ formatDate(shipFloatMes.time) }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue, Component} from 'vue-property-decorator'
+import store from "@/util/store";
+import {getTimeForLong} from "@/util/date";
+
+@Component({})
+export default class TrackHoverView extends Vue {
+  private shipFloatMes: any = {}
+
+  private formatDate(time: any) {
+    return getTimeForLong(time * 1000, 'YYYY-MM-DD hh:mm:ss')
+  }
+
+  public mounted() {
+    this.$nextTick(() => {
+      (store.getMapFun() as any).showShipPathMessage(store.getMapInstance(), this)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.showShipMessage {
+  position: absolute;
+  padding: 0.625rem;
+  background-color: white;
+  font-size: 0.75rem;
+  border-radius: 0.625rem;
+  text-align: left;
+  top: 0.625rem;
+  left: 0.625rem;
+  white-space: nowrap;
+
+  div {
+    height: 1.25rem;
+    line-height: 1.25rem;
+  }
+}
+</style>

src/components/on-map-view/ViewAllPort.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="search-port" v-if="funSwitch && loadOk">
+    <el-button @click="viewPorts">{{
+        viewPort ? $t('message.closeAllPort') : $t('message.allPort')
+      }}
+    </el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import {Vue, Component, Watch} from 'vue-property-decorator'
+import {allPort} from '@/util/fun-switch'
+import storeUtil from "@/util/store";
+import ShipFun from "@/util/map/map.js";
+import HttpApi from "@/api";
+
+@Component({})
+export default class ViewAllPort extends Vue {
+  private map: any = storeUtil.getMapInstance()
+  private funSwitch = allPort
+  private viewPort = true
+  private portOptions: any[] = []
+  private loadOk = false
+
+  @Watch('$store.state.showPort', {
+    deep: true,
+    immediate: true
+  })
+  showChange(data: boolean) {
+    this.viewPort = data
+  }
+
+  public mounted() {
+    if (this.funSwitch) {
+      this.getAllPort()
+    }
+  }
+
+  private viewPorts() {
+    this.viewPort = !this.viewPort
+    this.$store.commit('setShowPort', this.viewPort);
+    (storeUtil.getMapFun() as any).clearallPort();
+    (storeUtil.getMapFun() as any).delSelect()
+    if (this.viewPort) {
+      if (this.portOptions.length > 1000) {
+        let one = parseInt(this.portOptions.length / 18 + '')
+        let nowZoom = (storeUtil.getMapFun() as any).getZoom()
+        this.layoutPort(nowZoom, one)
+        ShipFun.addZoomListener(storeUtil.getMapInstance(), (zoom: any) => {
+          if (this.viewPort) {
+            (storeUtil.getMapFun() as any).clearallPort();
+            (storeUtil.getMapFun() as any).delSelect()
+            this.layoutPort(zoom, one)
+          }
+        })
+      } else {
+        this.portOptions.forEach((port: any) => {
+          this.addPortToMap(port, true)
+        })
+      }
+    }
+  }
+
+  private addPortToMap(data: any, flag?: boolean) {
+    let itemLon = data.cLon / 600000
+    let itemLat = data.cLat / 600000
+    if (!flag) {
+      (storeUtil.getMapFun() as any).setCenter([itemLon, itemLat])
+    }
+    let itemLonStr = itemLon < 0 ? Math.abs(Math.floor(itemLon * 100) / 100) + 'W' : Math.floor(itemLon * 100) / 100 + 'E'
+    let itemLatStr = itemLat < 0 ? Math.abs(Math.floor(itemLat * 100) / 100) + 'S' : Math.floor(itemLat * 100) / 100 + 'N'
+    let portInfo: any = {
+      id: data.id,
+      nameCn: data.nameCn,
+      nameEn: data.nameEn,
+      code: data.unlocode,
+      latLonStr: itemLonStr + ' ' + itemLatStr,
+      lon: itemLon,
+      lat: itemLat
+    };
+    (storeUtil.getMapFun() as any).showPort(portInfo)
+  }
+
+  private getAllPort() {
+    const firstViewPort = [
+      "丹东", "大连", "营口", "锦州", "葫芦岛", "秦皇岛", "唐山", "天津", "黄骅", "龙口", "烟台", "威海", "青岛", "日照", "岚山", "连云港", "上海", "宁波", "舟山", "太仓", "常熟", "南通", "张家港", "靖江", "江阴", "常州", "泰州", "扬州", "镇江", "南京", "福州", "厦门", "揭阳", "惠州", "深圳", "盐田", "东莞", "广州", "南沙", "珠海", "茂名", "湛江", "北海", "钦州", "防城港", "海南"
+    ]
+    const firstViewPortList: any[] = []
+    HttpApi.getPortList({}).then((res: any) => {
+      if (res) {
+        for (let i = 0; i < res.length; i++) {
+          firstViewPort.forEach((item: string) => {
+            if (res[i].nameCn === item) {
+              firstViewPortList.push(res[i])
+              res.splice(i, 1);
+              i--
+            }
+          })
+        }
+        this.portOptions = []
+        firstViewPortList.forEach((port: any) => {
+          res.unshift(port)
+        })
+        res.forEach((port: any) => {
+          // port.name = this.getName(port)
+          this.portOptions.push(port)
+        })
+        this.loadOk = true
+        this.viewPorts()
+      }
+    })
+  }
+
+  private layoutPort(zoom: number, one: number) {
+    let endIndex = zoom * one > this.portOptions.length ? this.portOptions.length : zoom * one
+
+    if (zoom >= 16) {
+      endIndex = this.portOptions.length
+    } else if (zoom < 7) {
+      endIndex = this.portOptions.length * 0.02 * zoom
+    }
+    this.portOptions.slice(0, endIndex).forEach((port: any) => {
+      this.addPortToMap(port, true)
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-port {
+  position: absolute;
+  z-index: 2;
+  left: 1.25rem;
+  top: 1.25rem;
+  display: flex;
+  align-items: center;
+
+  .el-select {
+    margin-right: 1.25rem;
+    height: 2.5rem !important;
+  }
+
+  .el-button {
+    height: 2.5rem !important;
+  }
+}
+</style>

src/components/real-time-info/realTimeInfo.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="real-time-info" v-if="realInfoShow && funSwitch">
+    <el-carousel height="2.5rem"
+                 direction="vertical"
+                 indicator-position="none"
+                 :loop="false"
+                 :interval="5000">
+      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+        <div class="out-box" style="display: flex; float: left;height: 100%;align-items: center">
+          <div class="img_postionb">
+            <img :src="projectName + '/real-info-icon/horn.svg'" alt="">
+          </div>
+          <div class="words_class">
+            <span>{{ item.shipName }} {{ status(item.eventType) }}{{ item.areaName }}</span>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import HttpApi from '@/api'
+import {getLongByTime, getNowTime} from "@/util/date";
+import {messageRoll} from "@/util/fun-switch";
+
+@Component({})
+export default class realTimeInfo extends Vue {
+  private funSwitch = messageRoll
+  private carouselList: any[] = []
+  private realInfoShow = false
+  private projectName = '/' + window.localStorage.getItem('pgName')
+
+  public mounted() {
+    if (this.funSwitch) {
+      // this.getShipDataMinute()
+      setInterval(() => {
+        this.getShipDataMinute()
+      }, 60000)
+    }
+  }
+
+  private getShipDataMinute() {
+    const endTime = getLongByTime(getNowTime());
+    const startTime = endTime - (60 * 60 * 6);
+    HttpApi.getLastRemindInfo({startTime: startTime, endTime: endTime}).then((res: any) => {
+      if (res.code === '0') {
+        this.carouselList = res.data
+        if (this.carouselList.length > 0) {
+          this.realInfoShow = true
+        }
+      }
+    })
+  }
+
+  private status(val: number) {
+    return val === 1 ? '到达' : '离开'
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.real-time-info {
+  width: 25rem;
+  height: 2.5rem;
+  margin-top: 0.625rem;
+  position: absolute;
+  right: 1.25rem;
+  z-index: 3;
+  background-color: #FFFFFF;
+  display: flex;
+  align-items: center;
+
+  ::v-deep.el-carousel {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .el-carousel__container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .el-carousel__item {
+        display: flex !important;
+        align-items: center !important;
+        font-size: 0.875rem !important;
+
+        .out-box {
+          width: 100%;
+          height: 100%;
+
+          .img_postionb {
+            margin: 0 1.25rem 0 1.25rem;
+            display: flex;
+            align-items: center;
+            width: 1.875rem;
+            height: 1.875rem;
+            background-color: rgba(214, 24, 25, 0.08);
+            border-radius: 100%;
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/search/index.vue

@@ -0,0 +1,338 @@
+<template>
+  <div class="search-box" v-if="funSwitch.open">
+    <el-input ref="searchInput" v-model="searchValue" :placeholder="$t('message.search.info')" clearable @clear="clear"
+              @focus="searchFocus"
+              @input="querySearchAsync">
+    </el-input>
+    <div class="search-list" id="menu-search-list" v-if="isShowSearchList">
+      <div class="search-ship-box">
+        <div class="ship-info" v-for="(item,index) in searchResult.ship" :key="index" @click="chooseInfo(item,'ship')">
+          <img src="../../../public/img/ship_ico.png">&nbsp;
+          <div>{{ $t('message.search.shipName') }}:&nbsp;{{ item.name }}</div>&nbsp;&nbsp;&nbsp;&nbsp;
+          <div>{{ $t('message.search.mmsi') }}:&nbsp;{{ item.mmsi }}</div>&nbsp;&nbsp;&nbsp;&nbsp;
+          <div>{{ $t('message.search.lastUpdated') }}:&nbsp;{{ countTime(item.posTime) }}</div>
+        </div>
+      </div>
+<!--      <el-divider></el-divider>-->
+<!--      <div class="search-port-box">-->
+<!--        <div class="port-info" v-for="(item,index) in searchResult.port" :key="index" @click="chooseInfo(item,'port')">-->
+<!--          <img src="../../../public/img/mao_ico.png" alt="">&nbsp;-->
+<!--          <span>{{ `${item.nameEn}[${item.countryEn}]` }}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import HttpApi from "@/api";
+import {SearchLogUtil} from "@/util/tool";
+import storeUtil from "@/util/store";
+import DialogUtil from "@/util/new-dialog";
+import ShipInfoTemp from "@/views/new-dialog/ShipInfoTemp.vue";
+import {DialogType as DialogType2} from "@/util/temp-interface";
+import PortQueryTemp from "@/views/new-dialog/PortQueryTemp.vue";
+import {dateForNow} from "@/util/date";
+import {countryName, portName} from "@/util/format";
+import {search} from '@/util/fun-switch'
+import $ from 'jquery'
+import MessageUtil from "@/util/message";
+import {bind} from "xe-utils";
+
+@Component({})
+export default class Search extends Vue {
+  private searchValue = ''
+  private funSwitch = search
+  private placeholder = ''
+  private searchShip = true
+  private selectData: any = {}
+  private searchResult: any = {}
+  private isShowSearchList = false
+  private projectName = window.localStorage.getItem('pgName') ? '/' + window.localStorage.getItem('pgName') : location.origin
+
+  @Watch('$route.query', {deep: true, immediate: true})
+  urlChange(data: any) {
+    if (this.funSwitch.urlMMSI) {
+      if (data && data.mmsi) {
+        this.$nextTick(() => {
+          this.searchValue = data.mmsi
+          this.querySearchAsync(data.mmsi).then(() => {
+            if (this.searchResult.ship.length && this.searchResult.ship.length === 1) {
+              this.chooseInfo(this.searchResult.ship[0], 'ship')
+            } else if (this.searchResult.ship.length > 1) {
+              (document.getElementById('select-ships') as HTMLElement).click()
+              this.selectData = data
+            } else {
+              MessageUtil.info('没有找到这个MMSI的船舶')
+            }
+          })
+        })
+      }
+    }
+  }
+
+  /**
+   * 更具关键字查询港口或者是船舶
+   * @param data
+   * @private
+   */
+  private async querySearchAsync(data: any) {
+    if (!data) {
+      return
+    }
+    let result: any = []
+    const ship = new Promise((resolve, reject) => {
+      HttpApi.searchBoathouse({keyword: data}).then((res: any) => {
+        resolve(res)
+      })
+    })
+    // const port = new Promise((resolve, reject) => {
+    //   HttpApi.getPort(data).then((res: any) => {
+    //     if (data !== '') {
+    //       resolve(res)
+    //     } else {
+    //       resolve([])
+    //     }
+    //   })
+    // })
+    await Promise.all([ship]).then(([ship]) => {
+      result.ship = ship;
+      // result.port = port;
+    })
+    this.searchResult = result
+    this.isShowSearchList = true
+  }
+
+  private clear() {
+    console.log('清空')
+    this.isShowSearchList = false
+  }
+
+  private searchFocus(e: any) {
+    this.querySearchAsync(e.target.value)
+  }
+
+  /**
+   * 选择船舶的时候执行的方法
+   * @param data
+   * @private
+   */
+  private async chooseInfo(data: any, f: string) {
+    if (data) {
+      if (f === 'ship' && this.funSwitch.ship) {
+        let shipData: any = {}
+        let docData = {}
+        await HttpApi.getShipMessage({shipId: data.shipId}).then((res: any) => {
+          const SearchLog = (this as any).$SearchLog
+          let flag = true
+          if (SearchLog.length) {
+            for (let i = 0; i < SearchLog.length; i++) {
+              const item = SearchLog[i]
+              if (item.shipId === res[0].shipId) {
+                flag = false
+                break
+              }
+            }
+          }
+
+          if (flag) {
+            SearchLogUtil.addSearchLog(res[0])
+          }
+          storeUtil.setShipData(res[0])
+          shipData = res[0]
+        })
+        await HttpApi.getShipDoc({shipId: data.shipId}).then((res: any) => {
+          if (res) {
+            docData = res
+          }
+        })
+        DialogUtil.showDialog(ShipInfoTemp, DialogType2.SHIP_INFO, {
+          dialogData: {
+            title: shipData.shipnameEn,
+            vueName: DialogType2.SHIP_INFO
+          },
+          infoData: {
+            shipData: shipData,
+            docData: docData
+          },
+          show: true
+        })
+        this.isShowSearchList = false
+      } else {
+        let port: any
+        await HttpApi.getPortInfo(data.portId).then((res: any) => {
+          port = res
+          Object.assign(port, data)
+        });
+        (storeUtil.getMapFun() as any).clearallPort();
+        (storeUtil.getMapFun() as any).delSelect()
+        this.$store.commit('setShowPort', false)
+        Search.addPortToMap(port)
+        DialogUtil.showDialog(PortQueryTemp, DialogType2.PORT_QUERY, {
+          dialogData: {
+            title: `${data.nameChs}-${data.nameEn}`,
+            vueName: DialogType2.PORT_QUERY
+          },
+          infoData: {
+            portInfo: port
+          },
+          show: true
+        })
+        this.isShowSearchList = false
+      }
+    }
+  }
+
+  /**
+   * 改变搜索条件执行的方法
+   * @private
+   */
+  private changeSearch() {
+    this.searchShip = !this.searchShip
+    this.searchResult = []
+    this.selectData = ''
+    this.placeholder = `${this.searchShip ? this.$t('message.search.shipName') + '\xa0' + '\\' + '\xa0' + this.$t('message.search.mmsi') + '\xa0' + '\\' + '\xa0' + this.$t('message.search.imo') : this.$t('message.search.portName')}`
+  }
+
+  /**
+   * 当选择港口的时候将港口添加到地图上
+   * @param data
+   * @private
+   */
+  private static addPortToMap(data: any) {
+    let itemLon = data.lon / 600000
+    let itemLat = data.lat / 600000;
+    (storeUtil.getMapFun() as any).setCenter([itemLon, itemLat])
+    let itemLonStr = itemLon < 0 ? Math.abs(Math.floor(itemLon * 100) / 100) + 'W' : Math.floor(itemLon * 100) / 100 + 'E'
+    let itemLatStr = itemLat < 0 ? Math.abs(Math.floor(itemLat * 100) / 100) + 'S' : Math.floor(itemLat * 100) / 100 + 'N'
+    let portInfo: any = {
+      id: data.portId,
+      nameCn: data.nameCn,
+      nameEn: data.nameEn,
+      code: data.unlocode,
+      latLonStr: itemLonStr + ' ' + itemLatStr,
+      lon: itemLon,
+      lat: itemLat
+    };
+    (storeUtil.getMapFun() as any).showPort(portInfo)
+  }
+
+  private countTime(data: any) {
+    return dateForNow(data)
+  }
+
+  private getPortName(data: any) {
+    return portName(data)
+  }
+
+  private getCountryName(data: any) {
+    return countryName(data)
+  }
+
+  public mounted() {
+    this.searchResult = []
+    this.selectData = ''
+    this.placeholder = `${this.searchShip ? this.$t('message.search.shipName') + '\xa0' + '\\' + '\xa0' + this.$t('message.search.mmsi') + '\xa0' + '\\' + '\xa0' + this.$t('message.search.imo') : this.$t('message.search.portName')}`
+    window.addEventListener("setItemEvent", (e: any) => {
+      if (e.key === 'language') {
+        this.placeholder = `${this.searchShip ? this.$t('message.search.shipName') + '\xa0' + '\\' + '\xa0' + this.$t('message.search.mmsi') + '\xa0' + '\\' + '\xa0' + this.$t('message.search.imo') : this.$t('message.search.portName')}`
+      }
+    });
+    window.addEventListener('click', () => {
+      this.isShowSearchList = false
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.search-box {
+  width: 100%;
+  height: 3.125rem;
+  display: flex;
+  padding: 0 1.25rem;
+  box-sizing: border-box;
+  align-items: center;
+
+  ::v-deep .el-input__inner {
+    color: #FFFFFF !important;
+    height: 30px !important;
+  }
+
+  .search-list {
+    padding: 10px;
+    position: absolute;
+    top: 120px;
+    background: #FFFFFF;
+    z-index: 1000;
+    border-radius: 20px;
+
+    .search-ship-box {
+      max-height: 300px;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        display: none
+      }
+
+      .ship-info {
+        //border-bottom: 1px solid #ccc;
+        height: 35px;
+        box-sizing: border-box;
+        padding: 10px 10px;
+        display: flex;
+        align-items: center;
+
+        img {
+          width: 15px;
+          height: 15px
+        }
+      }
+
+      .ship-info:hover {
+        cursor: pointer;
+        background: rgba(118, 115, 240, 0.1);
+      }
+    }
+  }
+
+  .search-port-box {
+    max-height: 300px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      display: none
+    }
+
+    .port-info {
+      //border-bottom: 1px solid #ccc;
+      height: 35px;
+      box-sizing: border-box;
+      padding: 10px 10px;
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 15px;
+        height: 15px
+      }
+    }
+
+    .port-info:hover {
+      cursor: pointer;
+      background: rgba(118, 115, 240, 0.1);
+    }
+  }
+}
+
+.el-divider {
+  margin: 10px 0;
+}
+
+::v-deep .el-input__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/ship-fleet/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import {Vue, Component} from 'vue-property-decorator'
+import HttpApi from "@/api";
+
+@Component({})
+export default class ShipFleet extends Vue {
+  private getShips() {
+    HttpApi.getShipRanks({}).then((res: any) => {
+      const TreeData: any[] = []
+      let shipIds = ''
+      const newShipList: any = []
+      for (let i = 0; i < res.length; i++) {
+        const fleet = JSON.parse(JSON.stringify(res[i]))
+        let tempData: any = {}
+        tempData = JSON.parse(JSON.stringify(fleet))
+        tempData.status = true
+        tempData.followShipList = []
+
+        if (fleet.followShipList && fleet.followShipList.length > 0) {
+          for (let j = 0; j < fleet.followShipList.length; j++) {
+            const ship = JSON.parse(JSON.stringify(fleet.followShipList[j]))
+            ship.status = true
+            ship.color = fleet.color
+            ship.name = ship.customName
+            tempData.followShipList.push(ship)
+            shipIds += ship.shipId + ','
+          }
+        }
+
+        TreeData.push(tempData)
+      }
+      Vue.prototype.$fleetList = TreeData
+      const data = {shipId: shipIds}
+
+      HttpApi.getShipMessage(data).then((res: any) => {
+        if (res) {
+          const fleetList = Vue.prototype.$fleetList
+          for (let i = 0; i < fleetList.length; i++) {
+            const followShipList = fleetList[i].followShipList
+            if (followShipList) {
+              for (let j = 0; j < followShipList.length; j++) {
+                for (let m = 0; m < res.length; m++) {
+                  if (res[m].shipId === followShipList[j].shipId) {
+                    res[m].color = followShipList[j].color
+                    const element = res[m]
+                    element.isFleet = true
+                    Vue.prototype.$sourceShips.push(element)
+                    newShipList.push({
+                      y: element.shiptype,
+                      m: element.mmsi,
+                      h: element.heading,
+                      g: element.callsign,
+                      c: element.cog,
+                      o: element.imo,
+                      s: element.sog,
+                      v: element.aisNavStatus,
+                      l: element.length,
+                      p: element.destPort,
+                      b: element.breadth,
+                      r: element.eta,
+                      d: element.draught,
+                      t: element.posTime,
+                      i: element.shipId,
+                      n: element.lon,
+                      a: element.lat,
+                      e: element.shipnameEn,
+                      color: element.color,
+                      isFleet: true
+                    })
+                  }
+                }
+              }
+            }
+          }
+          Vue.prototype.$originAllShipRankList = JSON.parse(JSON.stringify(newShipList))
+        }
+      })
+    })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/table/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="table-box">
+    <vxe-grid :columns="columns"
+              :pager-config="hasPage?pagerConfig: null"
+              @page-change="pageChange"
+              :data="table"
+              :loading="loading"
+              row-class-name="table-row-css"
+              cell-class-name="table-cell-css"
+              header-row-class-name="table-header-row-css"
+              header-cell-class-name="table-header-cell-css"
+              :filter-config="filterConfig"
+              :export-config="exportConfig"
+              align="center"
+              :height="height"
+              show-overflow="tooltip"
+              stripe
+              auto-resize
+              round>
+    </vxe-grid>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+
+@Component({
+  props: {
+    id: {
+      type: String,
+      required: false
+    },
+    tableData: {
+      type: Array,
+      required: true
+    },
+    columns: {
+      type: Array,
+      required: true
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '18.75rem'
+    },
+    filterConfig: {
+      type: Object,
+      required: false
+    },
+    hasPage: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    exportConfig: {
+      type: Object,
+      required: false
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    checkboxChange: {
+      type: Function,
+      required: false
+    },
+    checkboxAll: {
+      type: Function,
+      required: false
+    }
+  }
+})
+export default class Table extends Vue {
+  private pagerConfig = {
+    layouts: ['PrevPage', 'Jump', 'PageCount', 'NextPage', 'Sizes', 'Total'],
+    currentPage: 1,
+    // autoHidden: true,
+    pageSize: 10,
+    total: this.$props.tableData.length,
+    pagerCount: 7,
+    pageSizes: [5, 10, 20, 50, 100],
+    className: 'custom-table-page'
+  }
+  private table: any[] = []
+
+  @Watch('tableData', {
+    deep: true,
+    immediate: true
+  })
+  tableDataChange(data: any) {
+    this.table = data
+  }
+
+  private pageChange(data: any) {
+    const tableData = this.$props.tableData
+    this.pagerConfig.currentPage = data.currentPage
+    this.pagerConfig.pageSize = data.pageSize
+    this.table = tableData.slice((data.currentPage - 1) * data.pageSize, data.currentPage * data.pageSize)
+  }
+}
+</script>

src/css/element/index.scss

@@ -0,0 +1,454 @@
+.el-aside {
+  background: var(--aside-bg) !important;
+  height: 100% !important;
+  border: none !important;
+  overflow-x: hidden !important;
+}
+
+.el-table-filter .el-table-filter__content .el-checkbox__label{
+    color: black;
+}
+
+.el-container {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.el-main {
+  overflow: hidden !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding: unset !important;
+}
+.el-tabs__item {
+ font-size: 0.875rem!important;
+}
+/* el-tabs 样式开始*/
+/*去掉切换时el-tab-pane底部的蓝色下划线*/
+/*//.el-tabs__active-bar {
+// background-color: transparent !important;
+//}
+
+!*去掉tabs底部的下划线*!
+//.el-tabs__nav-wrap::after {
+//  position: static !important;
+//}
+
+!*tabs  居中*!
+//.el-tabs__header {
+//  display: flex !important;
+//  justify-content: center !important;
+//  background: rgba(52, 51, 82, 0.7) !important;
+//  //border-radius: 0.12rem 0.12rem 0 0;
+//  border-radius: 12px 12px 0 0;
+//}
+
+!* tabs 选中字体颜色 *!
+//.el-tabs__item {
+//  color: var(--theme-color-no) !important;
+//}
+
+!* tabs 选中字体颜色 *!
+//.el-tabs__item.is-active {
+//  color: #ffffff !important;
+//}
+
+!* tabs 选中字体颜色 *!
+//.el-tabs__item:hover {
+//  color: var(--theme-color) !important;
+//}
+
+//.el-tabs__content {
+//  //padding: 0 0.2rem !important;;
+//  padding: 0 20px !important;
+//}*/
+
+/* el-tabs 样式结束*/
+
+
+/* el-button 样式开始 */
+.el-button {
+  height: 1.875rem;
+  width: 8.125rem;
+  line-height: unset;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  background: var(--theme-color) !important;
+  border-color: var(--theme-color) !important;
+  color: #ffffff !important;
+  margin-right: 0.62rem !important;
+}
+
+.cancel-btn .el-button {
+  background: var(--cancel-btn-gb) !important;
+  color: var(--theme-color) !important;
+  border-color: var(--theme-color) !important;
+}
+
+
+.el-button:hover {
+  opacity: 0.75 !important;
+}
+
+/* el-button 样式结束 */
+
+
+/* el-select 样式开始 */
+.el-select {
+  height: 1.875rem !important;
+}
+
+.el-select .el-input__inner {
+  height: 1.875rem;
+  background: rgba(255, 255, 255, 0.6);
+  color: black;
+  border-color: var(--aside-bg);
+}
+
+.el-select .el-input__suffix-inner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.el-select .el-input__suffix-inner .el-select__caret {
+  line-height: unset !important;
+}
+
+.el-select-dropdown__item.selected {
+  color: var(--theme-color) !important;
+}
+
+/* el-select 样式结束 */
+
+
+/* el-form 样式开始 */
+.el-form {
+  margin-top: 1.25rem;
+}
+
+.el-form .el-form-item {
+  height: 1.875rem !important;
+  margin-bottom: 0.62rem !important;
+}
+
+.el-form .el-form-item .el-form-item__label {
+  height: 1.875rem;
+  color: #ffffff;
+  line-height: 1.875rem;
+}
+
+.el-form .el-form-item .el-form-item__content {
+  line-height: 1.875rem;
+}
+
+/* el-form 样式结束*/
+
+
+/* el-input 样式开始*/
+
+.el-input .el-input__inner {
+  height: 2.5rem !important;
+  background: rgba(255, 255, 255, 0.2) !important;
+  color: black !important;
+  border-color: var(--aside-bg) !important;
+}
+
+.el-input .el-input__inner:focus {
+  border-color: var(--theme-color) !important;
+}
+
+.el-input__inner .el-input__icon {
+  height: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+/* el-input 样式结束*/
+
+/* .el-textarea 样式开始*/
+.el-textarea .el-textarea__inner {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--white-font);
+  border-color: var(--aside-bg);
+}
+
+.el-textarea .el-textarea__inner:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--white-font);
+  border-color: var(--aside-bg);
+}
+
+.el-textarea .el-textarea__inner:focus {
+  border-color: var(--theme-color) !important;
+}
+
+/* .el-textarea 样式结束*/
+
+
+/* 颜色选取器样式开始*/
+.el-color-picker, .el-color-picker .el-color-picker__trigger {
+  width: 1.875rem !important;
+  height: 1.875rem !important;
+}
+
+.el-color-dropdown__btns {
+  display: flex;
+}
+
+.el-color-dropdown__btns .el-button {
+  width: 3.125rem;
+  height: 1.875rem;
+}
+
+/* 颜色选取器样式结束*/
+
+
+/* el-menu 样式开始*/
+
+.el-menu {
+  border: none !important;
+}
+
+.el-submenu__title {
+  height: 2.5rem !important;
+  line-height: 2.5rem !important;
+  font-size: 0.875rem!important;
+}
+
+
+.el-menu-item {
+  height: 2.5rem !important;
+  line-height: 2.5rem !important;
+  font-size: 0.875rem!important;
+}
+
+
+.vxe-modal--body .el-menu {
+  background: transparent !important;
+}
+
+/* el-menu 样式结束*/
+
+
+/* 时间组件样式开始 */
+.el-date-editor {
+  width: 10.5rem !important;
+  height: 100% !important;
+}
+
+.el-date-editor .el-range-separator {
+  height: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center;
+}
+
+.el-picker-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.el-picker-panel__footer .el-button {
+  width: 5rem !important;
+}
+
+.el-picker-panel__footer .el-button:nth-child(1) {
+  background: transparent !important;
+  border: none !important;
+  color: var(--theme-color) !important;
+  width: 5rem;
+}
+
+.el-date-table td.today span {
+  color: var(--theme-color) !important;
+}
+
+.el-date-table td.available:hover {
+  color: var(--theme-color) !important;
+}
+
+.el-date-table td.end-date span, .el-date-table td.start-date span {
+  background: var(--theme-color) !important;
+}
+
+.el-date-range-picker__editor .el-input__inner {
+  //color: var(--white-font) !important;
+  color: black !important;
+}
+
+.el-table.el-table__body-wrapper.el-table__cell.el-table__body.el-table__row {
+  height: 2.5rem !important;
+}
+
+.el-range-editor.is-active {
+  border-color: var(--theme-color) !important;
+}
+
+.el-date-editor {
+  background: rgba(255, 255, 255, 0.2) !important;
+  //border: none !important;
+}
+
+.el-date-editor .el-range-input {
+  background: unset !important;
+  //color: var(--white-font) !important;
+}
+
+.el-range-separator {
+  //color: var(--white-font) !important;
+}
+
+/* 时间组件样式结束*/
+
+
+/*checkbox 样式开始*/
+.el-checkbox .el-checkbox__label {
+  color: var(--white-font);
+}
+
+.is-checked .el-checkbox__label {
+  color: var(--theme-color) !important;
+}
+
+.is-checked .el-checkbox__inner {
+  background: var(--theme-color) !important;
+  border-color: var(--theme-color) !important;
+}
+
+/*checkbox 样式结束*/
+
+
+/* loading 样式开始*/
+.el-loading-mask {
+  height: 100%;
+}
+
+.el-loading-mask .el-loading-spinner .circular {
+  width: 1.875rem;
+  height: 1.875rem;
+}
+
+.el-loading-mask .el-loading-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: unset;
+  margin: unset;
+}
+
+.el-loading-spinner .path {
+  stroke: var(--theme-color) !important;
+}
+
+/* loading 样式结束*/
+
+
+/* message  开始*/
+.el-message-box {
+  background: transparent !important;
+  border: unset !important;
+  padding: 0 !important;
+  position: relative;
+  border-radius: 0.875rem !important;
+}
+
+.el-message-box .el-message-box__header {
+  background: var(--theme-color) !important;
+}
+
+.el-message-box .el-message-box__header .el-message-box__title {
+  color: var(--white-font) !important;
+  font-family: "Microsoft YaHei", serif !important;
+  font-weight: 400 !important;
+}
+
+.el-message-box .el-message-box__header .el-message-box__headerbtn .el-message-box__close {
+  color: var(--white-font) !important;
+}
+
+.el-message-box .el-message-box__header .el-message-box__headerbtn .el-message-box__close:hover {
+  opacity: 0.7 !important;
+}
+
+.el-message-box .el-message-box__content .el-message-box__container {
+  color: var(--white-font) !important;
+}
+
+.el-message-box .el-message-box__content, .el-message-box .el-message-box__btns {
+  background: var(--modal-bg-color) !important;
+}
+
+.el-message-box .el-message-box__content {
+  font-size: 0.9rem !important;
+  height: 5rem !important;
+}
+
+.el-message-box .el-message-box__btns {
+  height: 3.125rem;
+}
+
+
+.el-message-box .el-message-box__btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row-reverse
+}
+
+.el-message-box .el-message-box__btns .el-button:nth-child(1) {
+  background: transparent !important;
+}
+
+/* message  结束*/
+
+
+/* 分页 开始*/
+.el-pagination {
+  height: 1.875rem !important;
+  box-sizing: border-box;
+  padding: 0 !important;
+  display: flex;
+  align-items: center;
+}
+
+.el-pagination .el-pagination__sizes {
+  height: 1.375rem !important;
+  box-sizing: border-box;
+}
+
+.el-pagination .el-pagination__sizes .el-select {
+  height: 1.375rem !important;
+}
+
+.el-pagination .el-pagination__sizes .el-select .el-input {
+  height: 1.375rem !important;
+}
+
+.el-pagination .el-pagination__sizes .el-select .el-input .el-input__inner {
+  height: 1.375rem !important;
+  box-sizing: border-box;
+}
+
+.el-pagination .el-pager .number {
+  color: var(--theme-color) !important;
+}
+
+.el-pagination .el-pagination__jump {
+  height: 1.375rem !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+.el-pagination .el-pagination__jump .el-input {
+  height: 1.375rem !important;
+}
+
+.el-pagination .el-pagination__jump .el-input .el-input__inner {
+  height: 1.375rem !important;
+}
+
+/* 分页 结束*/

src/css/global/index.scss

@@ -0,0 +1,157 @@
+html, body, #app {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 16px;
+}
+
+#__testStringWide {
+  display: none;
+  height: 1.375rem !important;
+  visibility: unset;
+  font-size: 0.875rem !important;
+}
+
+
+.confirm-btn-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 1.25rem;
+}
+
+/* 字体图标样式开始*/
+.iconfont {
+  color: #ffffff;
+  margin-left: 0.7rem;
+  font-size: 1.25rem !important;
+}
+
+.iconfont:hover {
+  color: var(--theme-color);
+}
+
+/* 字体图标样式结束*/
+
+
+.flex {
+  display: flex;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-column-center {
+  display: flex;
+  align-items: center;
+}
+
+.is-can-click {
+  cursor: pointer;
+}
+
+
+.static-title {
+  background: linear-gradient(to right, #703AAC 0%, rgba(112, 58, 172, 0) 100%);
+  box-shadow: 0 0 0.06rem 0 rgba(41, 137, 248, 0.5) inset;
+  width: 16.88rem;
+  height: 1.56rem;
+  font-size: 1rem;
+  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei, serif;
+  font-weight: bold;
+  color: #FFFFFF;
+}
+
+/* 滚动条样式 开始*/
+::-webkit-scrollbar {
+  height: 0.5rem;
+  width: 0.5rem;
+  background: var(--gun-dong-tiao-gb);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--theme-color);
+  border-radius: 0.31rem;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  cursor: pointer !important;
+}
+
+/* 滚动条样式 结束*/
+
+.mb-10 {
+  //margin-bottom: 0.1rem !important;
+  margin-bottom: 0.62rem !important;
+}
+
+.ml-10 {
+  margin-left: 0.62rem !important;
+}
+
+.ml-20 {
+  margin-left: 0.125rem !important;
+}
+
+.mr-10 {
+  margin-right: 0.62rem !important;
+}
+
+.mr-20 {
+  margin-right: 1.25rem !important;
+}
+
+.mr-5 {
+  margin-right: 0.31rem !important;
+}
+
+.mt-10 {
+  margin-top: 0.62rem !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.token-box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+.el-pagination {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+.el-table__header-wrapper {
+  height: 40px !important;
+
+  .el-table__header {
+    height: 40px !important;
+  }
+}
+
+.el-table .el-table__cell {
+  padding: 0 !important;
+}

src/css/index.css

@@ -0,0 +1,24 @@
+@import url('./global/index.scss');
+@import url('./element/index.scss');
+@import url('./vxe-table/index.scss');
+@import url('./message/index.scss');
+
+:root {
+    --theme-color: rgb(44, 70, 155);
+    --modal-bg-color: rgba(27, 26, 72, 0.75);
+    --white-font: #ffffff;
+    --aside-bg: rgb(44, 70, 155);
+    --cancel-btn-gb: rgba(0, 0, 0, 0);
+    --follow-list-bg: rgba(242, 242, 242, 0.9);
+    --table-header-row-bg: rgba(40, 39, 72, 1);
+    --gun-dong-tiao-gb: rgba(242, 242, 242, 0.9);
+    --aside-gbc: #2c469b;
+    --aside-font-color: #FFFFFF;
+    --map-control-gb: rgba(0, 60, 136, 0.3);
+    --map-control-font-color: #eee;
+    --dialog-bg: rgba(255, 255, 255, 0.6);
+    --dialog-header-bg: var(--aside-gbc);
+    --dialog-header-font-color: #FFFFFF;
+    --dialog-body-gb: rgba(255, 255, 255, 0.6)
+}
+

src/css/message/index.scss

@@ -0,0 +1,3 @@
+.toast-message {
+  font-size: 1rem !important;
+}

src/css/vxe-table/index.scss

@@ -0,0 +1,138 @@
+.vxe-modal--wrapper {
+}
+
+.vxe-modal--body {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 0 0 0.75rem 0.75rem !important;
+}
+
+.vxe-modal--header {
+  background: #2c469b !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 0.75rem 0.75rem 0 0 !important;
+  height: 2.5rem;
+  padding-left: 0.9rem;
+}
+
+.vxe-modal--box {
+  background: transparent !important;
+  border: none !important;
+}
+
+
+/* table 样式开始*/
+.table-header-row-css {
+  background: rgb(148, 161, 204);
+  color: var(--white-font);
+  border: none !important;
+}
+
+.vxe-table--main-wrapper {
+  border: none !important;
+}
+
+.vxe-table--body-wrapper {
+  color: black;
+}
+
+.custom-table-page {
+  background: transparent !important;
+  color: var(--white-font) !important;
+}
+
+.vxe-table--border-line {
+}
+
+.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line {
+  display: none !important;
+}
+
+.vxe-header--gutter {
+  background-position: unset !important;
+}
+
+.vxe-header--column {
+  border-bottom: none !important;
+  background-position: unset !important;
+}
+
+.table-row-css {
+  border: none !important;
+  height: 2.5rem !important;
+}
+
+.table-row-css:nth-child(odd) {
+  background: #343352 !important;
+  color: #B2B1CE !important;
+}
+
+.table-cell-css {
+  height: 2.5rem !important;
+  border-bottom: none !important;
+}
+
+.table-row-css:nth-child(even) {
+  background: #3C3B5B !important;
+  color: #B2B1CE !important;
+  border: none !important;
+}
+
+/* table 样式结束*/
+
+
+/* header 按钮样式开始*/
+.is--filter-active .vxe-cell--filter .vxe-filter--btn {
+  color: var(--theme-color) !important;
+}
+
+/* header 按钮样式结束*/
+
+
+/* 分页样式 开始*/
+.vxe-pager--wrapper .vxe-pager--prev-btn, .vxe-pager--wrapper .vxe-pager--next-btn {
+  background: var(--theme-color) !important;
+  color: var(--white-font) !important;
+}
+
+.vxe-pager--wrapper .vxe-pager--prev-btn:hover, .vxe-pager--wrapper .vxe-pager--next-btn:hover {
+  background: var(--theme-color) !important;
+  color: var(--white-font) !important;
+  opacity: 0.7 !important;
+}
+
+.vxe-pager--wrapper .vxe-pager--prev-btn:focus, .vxe-pager--wrapper .vxe-pager--next-btn:focus {
+  background: var(--theme-color) !important;
+  color: var(--white-font) !important;
+  opacity: 0.7 !important;
+}
+
+.vxe-pager--wrapper .vxe-pager--sizes {
+
+}
+
+.vxe-pager--wrapper .vxe-pager--sizes .vxe-select--panel .vxe-select-option--wrapper .is--selected {
+  color: var(--theme-color) !important;
+}
+
+.vxe-pager--wrapper .vxe-pager--sizes .vxe-select--panel .vxe-select-option--wrapper .is--hover {
+  color: var(--theme-color) !important;
+}
+
+.vxe-pager--wrapper .vxe-pager--sizes .vxe-input .vxe-input--inner:focus {
+  border-color: var(--theme-color) !important;
+}
+
+.vxe-pager--wrapper .vxe-pager--goto:focus {
+  border-color: var(--theme-color) !important;
+}
+
+/* 分页样式 结束*/
+
+
+/* 表格中的加载   开始*/
+.vxe-loading .vxe-loading--spinner:after, .vxe-loading .vxe-loading--spinner:before {
+  background: var(--theme-color) !important;
+}
+
+/* 表格中的加载   结束*/

src/font-icon/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/font-icon/demo_index.html

@@ -0,0 +1,901 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3410877" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe635;</span>
+                <div class="name">绘制 </div>
+                <div class="code-name">&amp;#xe635;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8c0;</span>
+                <div class="name">211铃铛</div>
+                <div class="code-name">&amp;#xe8c0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6b9;</span>
+                <div class="name">下拉</div>
+                <div class="code-name">&amp;#xe6b9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe623;</span>
+                <div class="name">用户-圆</div>
+                <div class="code-name">&amp;#xe623;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">钥匙</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6b1;</span>
+                <div class="name">港口</div>
+                <div class="code-name">&amp;#xe6b1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe712;</span>
+                <div class="name">list_码头</div>
+                <div class="code-name">&amp;#xe712;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">码头</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe642;</span>
+                <div class="name">固定顺岸码头</div>
+                <div class="code-name">&amp;#xe642;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe644;</span>
+                <div class="name">浮码头</div>
+                <div class="code-name">&amp;#xe644;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">港口物流</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60f;</span>
+                <div class="name">长三角港口群</div>
+                <div class="code-name">&amp;#xe60f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe639;</span>
+                <div class="name">9船舶</div>
+                <div class="code-name">&amp;#xe639;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61e;</span>
+                <div class="name">导入</div>
+                <div class="code-name">&amp;#xe61e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">导出</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe74b;</span>
+                <div class="name">删除</div>
+                <div class="code-name">&amp;#xe74b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe626;</span>
+                <div class="name">提醒</div>
+                <div class="code-name">&amp;#xe626;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8ac;</span>
+                <div class="name">编辑</div>
+                <div class="code-name">&amp;#xe8ac;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xebcd;</span>
+                <div class="name">眼睛_隐藏_o</div>
+                <div class="code-name">&amp;#xebcd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe685;</span>
+                <div class="name">眼睛-可见</div>
+                <div class="code-name">&amp;#xe685;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ae;</span>
+                <div class="name">user</div>
+                <div class="code-name">&amp;#xe7ae;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8df;</span>
+                <div class="name">301加-圆框</div>
+                <div class="code-name">&amp;#xe8df;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8e0;</span>
+                <div class="name">302减-方框</div>
+                <div class="code-name">&amp;#xe8e0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8e1;</span>
+                <div class="name">302减-圆框</div>
+                <div class="code-name">&amp;#xe8e1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe8de;</span>
+                <div class="name">301加-方框</div>
+                <div class="code-name">&amp;#xe8de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeaf3;</span>
+                <div class="name">加号</div>
+                <div class="code-name">&amp;#xeaf3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeaf5;</span>
+                <div class="name">减号</div>
+                <div class="code-name">&amp;#xeaf5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe65b;</span>
+                <div class="name">最大化</div>
+                <div class="code-name">&amp;#xe65b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe67a;</span>
+                <div class="name">最小化</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe73b;</span>
+                <div class="name">操作-全屏-展开</div>
+                <div class="code-name">&amp;#xe73b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xeaf2;</span>
+                <div class="name">关闭</div>
+                <div class="code-name">&amp;#xeaf2;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1659951671698') format('woff2'),
+       url('iconfont.woff?t=1659951671698') format('woff'),
+       url('iconfont.ttf?t=1659951671698') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huizhi"></span>
+            <div class="name">
+              绘制 
+            </div>
+            <div class="code-name">.icon-huizhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-lingdang"></span>
+            <div class="name">
+              211铃铛
+            </div>
+            <div class="code-name">.icon-lingdang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiala"></span>
+            <div class="name">
+              下拉
+            </div>
+            <div class="code-name">.icon-xiala
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yonghu-yuan"></span>
+            <div class="name">
+              用户-圆
+            </div>
+            <div class="code-name">.icon-yonghu-yuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yuechi"></span>
+            <div class="name">
+              钥匙
+            </div>
+            <div class="code-name">.icon-yuechi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gangkou"></span>
+            <div class="name">
+              港口
+            </div>
+            <div class="code-name">.icon-gangkou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-listmatou"></span>
+            <div class="name">
+              list_码头
+            </div>
+            <div class="code-name">.icon-listmatou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-matou"></span>
+            <div class="name">
+              码头
+            </div>
+            <div class="code-name">.icon-matou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gudingshunanmatou"></span>
+            <div class="name">
+              固定顺岸码头
+            </div>
+            <div class="code-name">.icon-gudingshunanmatou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fumatou"></span>
+            <div class="name">
+              浮码头
+            </div>
+            <div class="code-name">.icon-fumatou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-gangkouwuliu"></span>
+            <div class="name">
+              港口物流
+            </div>
+            <div class="code-name">.icon-gangkouwuliu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-changsanjiaogangkouqun"></span>
+            <div class="name">
+              长三角港口群
+            </div>
+            <div class="code-name">.icon-changsanjiaogangkouqun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chuanbo"></span>
+            <div class="name">
+              9船舶
+            </div>
+            <div class="code-name">.icon-chuanbo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daoru"></span>
+            <div class="name">
+              导入
+            </div>
+            <div class="code-name">.icon-daoru
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-daochu"></span>
+            <div class="name">
+              导出
+            </div>
+            <div class="code-name">.icon-daochu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shanchu"></span>
+            <div class="name">
+              删除
+            </div>
+            <div class="code-name">.icon-shanchu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-tixing"></span>
+            <div class="name">
+              提醒
+            </div>
+            <div class="code-name">.icon-tixing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-bianji"></span>
+            <div class="name">
+              编辑
+            </div>
+            <div class="code-name">.icon-bianji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yanjing_yincang_o"></span>
+            <div class="name">
+              眼睛_隐藏_o
+            </div>
+            <div class="code-name">.icon-yanjing_yincang_o
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yanjing-kejian"></span>
+            <div class="name">
+              眼睛-可见
+            </div>
+            <div class="code-name">.icon-yanjing-kejian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-user"></span>
+            <div class="name">
+              user
+            </div>
+            <div class="code-name">.icon-user
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jia-yuankuang"></span>
+            <div class="name">
+              301加-圆框
+            </div>
+            <div class="code-name">.icon-jia-yuankuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jian-fangkuang"></span>
+            <div class="name">
+              302减-方框
+            </div>
+            <div class="code-name">.icon-jian-fangkuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jian-yuankuang"></span>
+            <div class="name">
+              302减-圆框
+            </div>
+            <div class="code-name">.icon-jian-yuankuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jia-fangkuang"></span>
+            <div class="name">
+              301加-方框
+            </div>
+            <div class="code-name">.icon-jia-fangkuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiahao"></span>
+            <div class="name">
+              加号
+            </div>
+            <div class="code-name">.icon-jiahao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jianhao"></span>
+            <div class="name">
+              减号
+            </div>
+            <div class="code-name">.icon-jianhao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuidahua"></span>
+            <div class="name">
+              最大化
+            </div>
+            <div class="code-name">.icon-zuidahua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zuixiaohua"></span>
+            <div class="name">
+              最小化
+            </div>
+            <div class="code-name">.icon-zuixiaohua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-caozuo-quanping-zhankai"></span>
+            <div class="name">
+              操作-全屏-展开
+            </div>
+            <div class="code-name">.icon-caozuo-quanping-zhankai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-guanbi"></span>
+            <div class="name">
+              关闭
+            </div>
+            <div class="code-name">.icon-guanbi
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huizhi"></use>
+                </svg>
+                <div class="name">绘制 </div>
+                <div class="code-name">#icon-huizhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-lingdang"></use>
+                </svg>
+                <div class="name">211铃铛</div>
+                <div class="code-name">#icon-lingdang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiala"></use>
+                </svg>
+                <div class="name">下拉</div>
+                <div class="code-name">#icon-xiala</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yonghu-yuan"></use>
+                </svg>
+                <div class="name">用户-圆</div>
+                <div class="code-name">#icon-yonghu-yuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yuechi"></use>
+                </svg>
+                <div class="name">钥匙</div>
+                <div class="code-name">#icon-yuechi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gangkou"></use>
+                </svg>
+                <div class="name">港口</div>
+                <div class="code-name">#icon-gangkou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-listmatou"></use>
+                </svg>
+                <div class="name">list_码头</div>
+                <div class="code-name">#icon-listmatou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-matou"></use>
+                </svg>
+                <div class="name">码头</div>
+                <div class="code-name">#icon-matou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gudingshunanmatou"></use>
+                </svg>
+                <div class="name">固定顺岸码头</div>
+                <div class="code-name">#icon-gudingshunanmatou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fumatou"></use>
+                </svg>
+                <div class="name">浮码头</div>
+                <div class="code-name">#icon-fumatou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gangkouwuliu"></use>
+                </svg>
+                <div class="name">港口物流</div>
+                <div class="code-name">#icon-gangkouwuliu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-changsanjiaogangkouqun"></use>
+                </svg>
+                <div class="name">长三角港口群</div>
+                <div class="code-name">#icon-changsanjiaogangkouqun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chuanbo"></use>
+                </svg>
+                <div class="name">9船舶</div>
+                <div class="code-name">#icon-chuanbo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daoru"></use>
+                </svg>
+                <div class="name">导入</div>
+                <div class="code-name">#icon-daoru</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-daochu"></use>
+                </svg>
+                <div class="name">导出</div>
+                <div class="code-name">#icon-daochu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shanchu"></use>
+                </svg>
+                <div class="name">删除</div>
+                <div class="code-name">#icon-shanchu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tixing"></use>
+                </svg>
+                <div class="name">提醒</div>
+                <div class="code-name">#icon-tixing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bianji"></use>
+                </svg>
+                <div class="name">编辑</div>
+                <div class="code-name">#icon-bianji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yanjing_yincang_o"></use>
+                </svg>
+                <div class="name">眼睛_隐藏_o</div>
+                <div class="code-name">#icon-yanjing_yincang_o</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yanjing-kejian"></use>
+                </svg>
+                <div class="name">眼睛-可见</div>
+                <div class="code-name">#icon-yanjing-kejian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-user"></use>
+                </svg>
+                <div class="name">user</div>
+                <div class="code-name">#icon-user</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jia-yuankuang"></use>
+                </svg>
+                <div class="name">301加-圆框</div>
+                <div class="code-name">#icon-jia-yuankuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jian-fangkuang"></use>
+                </svg>
+                <div class="name">302减-方框</div>
+                <div class="code-name">#icon-jian-fangkuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jian-yuankuang"></use>
+                </svg>
+                <div class="name">302减-圆框</div>
+                <div class="code-name">#icon-jian-yuankuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jia-fangkuang"></use>
+                </svg>
+                <div class="name">301加-方框</div>
+                <div class="code-name">#icon-jia-fangkuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiahao"></use>
+                </svg>
+                <div class="name">加号</div>
+                <div class="code-name">#icon-jiahao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jianhao"></use>
+                </svg>
+                <div class="name">减号</div>
+                <div class="code-name">#icon-jianhao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuidahua"></use>
+                </svg>
+                <div class="name">最大化</div>
+                <div class="code-name">#icon-zuidahua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zuixiaohua"></use>
+                </svg>
+                <div class="name">最小化</div>
+                <div class="code-name">#icon-zuixiaohua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-caozuo-quanping-zhankai"></use>
+                </svg>
+                <div class="name">操作-全屏-展开</div>
+                <div class="code-name">#icon-caozuo-quanping-zhankai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-guanbi"></use>
+                </svg>
+                <div class="name">关闭</div>
+                <div class="code-name">#icon-guanbi</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/font-icon/iconfont.css

@@ -0,0 +1,139 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3410877 */
+  src: url('iconfont.woff2?t=1659951671698') format('woff2'),
+       url('iconfont.woff?t=1659951671698') format('woff'),
+       url('iconfont.ttf?t=1659951671698') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-huizhi:before {
+  content: "\e635";
+}
+
+.icon-lingdang:before {
+  content: "\e8c0";
+}
+
+.icon-xiala:before {
+  content: "\e6b9";
+}
+
+.icon-yonghu-yuan:before {
+  content: "\e623";
+}
+
+.icon-yuechi:before {
+  content: "\e627";
+}
+
+.icon-gangkou:before {
+  content: "\e6b1";
+}
+
+.icon-listmatou:before {
+  content: "\e712";
+}
+
+.icon-matou:before {
+  content: "\e629";
+}
+
+.icon-gudingshunanmatou:before {
+  content: "\e642";
+}
+
+.icon-fumatou:before {
+  content: "\e644";
+}
+
+.icon-gangkouwuliu:before {
+  content: "\e60e";
+}
+
+.icon-changsanjiaogangkouqun:before {
+  content: "\e60f";
+}
+
+.icon-chuanbo:before {
+  content: "\e639";
+}
+
+.icon-daoru:before {
+  content: "\e61e";
+}
+
+.icon-daochu:before {
+  content: "\e634";
+}
+
+.icon-shanchu:before {
+  content: "\e74b";
+}
+
+.icon-tixing:before {
+  content: "\e626";
+}
+
+.icon-bianji:before {
+  content: "\e8ac";
+}
+
+.icon-yanjing_yincang_o:before {
+  content: "\ebcd";
+}
+
+.icon-yanjing-kejian:before {
+  content: "\e685";
+}
+
+.icon-user:before {
+  content: "\e7ae";
+}
+
+.icon-jia-yuankuang:before {
+  content: "\e8df";
+}
+
+.icon-jian-fangkuang:before {
+  content: "\e8e0";
+}
+
+.icon-jian-yuankuang:before {
+  content: "\e8e1";
+}
+
+.icon-jia-fangkuang:before {
+  content: "\e8de";
+}
+
+.icon-jiahao:before {
+  content: "\eaf3";
+}
+
+.icon-jianhao:before {
+  content: "\eaf5";
+}
+
+.icon-zuidahua:before {
+  content: "\e65b";
+}
+
+.icon-zuixiaohua:before {
+  content: "\e67a";
+}
+
+.icon-caozuo-quanping-zhankai:before {
+  content: "\e73b";
+}
+
+.icon-guanbi:before {
+  content: "\eaf2";
+}
+

src/font-icon/iconfont.json

@@ -0,0 +1,226 @@
+{
+  "id": "3410877",
+  "name": "lng-icon",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "11741138",
+      "name": "绘制 ",
+      "font_class": "huizhi",
+      "unicode": "e635",
+      "unicode_decimal": 58933
+    },
+    {
+      "icon_id": "1727435",
+      "name": "211铃铛",
+      "font_class": "lingdang",
+      "unicode": "e8c0",
+      "unicode_decimal": 59584
+    },
+    {
+      "icon_id": "672036",
+      "name": "下拉",
+      "font_class": "xiala",
+      "unicode": "e6b9",
+      "unicode_decimal": 59065
+    },
+    {
+      "icon_id": "1304895",
+      "name": "用户-圆",
+      "font_class": "yonghu-yuan",
+      "unicode": "e623",
+      "unicode_decimal": 58915
+    },
+    {
+      "icon_id": "24941125",
+      "name": "钥匙",
+      "font_class": "yuechi",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "6452180",
+      "name": "港口",
+      "font_class": "gangkou",
+      "unicode": "e6b1",
+      "unicode_decimal": 59057
+    },
+    {
+      "icon_id": "724700",
+      "name": "list_码头",
+      "font_class": "listmatou",
+      "unicode": "e712",
+      "unicode_decimal": 59154
+    },
+    {
+      "icon_id": "19640760",
+      "name": "码头",
+      "font_class": "matou",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "5566964",
+      "name": "固定顺岸码头",
+      "font_class": "gudingshunanmatou",
+      "unicode": "e642",
+      "unicode_decimal": 58946
+    },
+    {
+      "icon_id": "5567308",
+      "name": "浮码头",
+      "font_class": "fumatou",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
+    {
+      "icon_id": "22580449",
+      "name": "港口物流",
+      "font_class": "gangkouwuliu",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "22580460",
+      "name": "长三角港口群",
+      "font_class": "changsanjiaogangkouqun",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "1411092",
+      "name": "9船舶",
+      "font_class": "chuanbo",
+      "unicode": "e639",
+      "unicode_decimal": 58937
+    },
+    {
+      "icon_id": "604485",
+      "name": "导入",
+      "font_class": "daoru",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "4770726",
+      "name": "导出",
+      "font_class": "daochu",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "577357",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e74b",
+      "unicode_decimal": 59211
+    },
+    {
+      "icon_id": "8765137",
+      "name": "提醒",
+      "font_class": "tixing",
+      "unicode": "e626",
+      "unicode_decimal": 58918
+    },
+    {
+      "icon_id": "11372640",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e8ac",
+      "unicode_decimal": 59564
+    },
+    {
+      "icon_id": "5388071",
+      "name": "眼睛_隐藏_o",
+      "font_class": "yanjing_yincang_o",
+      "unicode": "ebcd",
+      "unicode_decimal": 60365
+    },
+    {
+      "icon_id": "6302555",
+      "name": "眼睛-可见",
+      "font_class": "yanjing-kejian",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "4766293",
+      "name": "user",
+      "font_class": "user",
+      "unicode": "e7ae",
+      "unicode_decimal": 59310
+    },
+    {
+      "icon_id": "1727509",
+      "name": "301加-圆框",
+      "font_class": "jia-yuankuang",
+      "unicode": "e8df",
+      "unicode_decimal": 59615
+    },
+    {
+      "icon_id": "1727510",
+      "name": "302减-方框",
+      "font_class": "jian-fangkuang",
+      "unicode": "e8e0",
+      "unicode_decimal": 59616
+    },
+    {
+      "icon_id": "1727512",
+      "name": "302减-圆框",
+      "font_class": "jian-yuankuang",
+      "unicode": "e8e1",
+      "unicode_decimal": 59617
+    },
+    {
+      "icon_id": "1727506",
+      "name": "301加-方框",
+      "font_class": "jia-fangkuang",
+      "unicode": "e8de",
+      "unicode_decimal": 59614
+    },
+    {
+      "icon_id": "5387527",
+      "name": "加号",
+      "font_class": "jiahao",
+      "unicode": "eaf3",
+      "unicode_decimal": 60147
+    },
+    {
+      "icon_id": "5387532",
+      "name": "减号",
+      "font_class": "jianhao",
+      "unicode": "eaf5",
+      "unicode_decimal": 60149
+    },
+    {
+      "icon_id": "428403",
+      "name": "最大化",
+      "font_class": "zuidahua",
+      "unicode": "e65b",
+      "unicode_decimal": 58971
+    },
+    {
+      "icon_id": "1649166",
+      "name": "最小化",
+      "font_class": "zuixiaohua",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "3018839",
+      "name": "操作-全屏-展开",
+      "font_class": "caozuo-quanping-zhankai",
+      "unicode": "e73b",
+      "unicode_decimal": 59195
+    },
+    {
+      "icon_id": "5387522",
+      "name": "关闭",
+      "font_class": "guanbi",
+      "unicode": "eaf2",
+      "unicode_decimal": 60146
+    }
+  ]
+}

src/main.ts

@@ -0,0 +1,60 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import 'xe-utils'
+import '@/css/index.css'
+import VXETable from 'vxe-table'
+import "@/css/vxe-table/source-index.css"
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import '@/font-icon/iconfont.css'
+import i18n from '@/util/translate'
+import '@/util/init-data'
+import '@/util/vue-global/index'
+
+Vue.prototype.$myFleet = []
+const config = require('../public/config/sys-config.json')
+window.localStorage.setItem('pgName', config.projectName)
+Vue.use(VXETable)
+Vue.use(ElementUI)
+Vue.config.productionTip = false
+
+Object.keys(store.state).forEach((item: string) => {
+  const data = {
+    data: null,
+    type: item
+  }
+  store.commit('setDataNull', data)
+})
+
+function getParam(name: string) {
+  let result: any = null
+  let paramStr: string[] = []
+  let params: string[] = []
+  if (location.hash.indexOf('?') !== -1) {
+    paramStr = location.hash.split('?')
+  }
+  if (paramStr.length) {
+    params = paramStr[1].split('&')
+  }
+
+  for (let i = 0; i < params.length; i++) {
+    const str = params[i]
+    if (str.indexOf(name) !== -1) {
+      const p = str.split('=')
+      result = p[1]
+      break
+    }
+  }
+  return result
+}
+
+document.title = config.title
+
+new Vue({
+  router,
+  i18n,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/module/menu.ts

@@ -0,0 +1,39 @@
+export interface MenuType {
+  name: string,
+  title: string,
+  icon: string,
+  type: string,
+  children: MenuType[],
+  open: boolean,
+
+  [key: string]: any
+}
+
+export enum Language {
+  zh = 'zh', // 中文
+  en = 'en' // 英文
+}
+
+export interface DialogConfig {
+  show: boolean
+  template: string,
+  width: string,
+  height: string,
+  who: string
+  header: {
+    title: string,
+    hasIcon: boolean,
+    iconSrc: string,
+    hasMin: boolean,
+    hasMax: boolean
+  },
+  position: {
+    top: string,
+    left: string
+  }
+}
+
+export interface DialogAllConfig {
+  dialog: DialogConfig,
+  info: any
+}

src/router/index.ts

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+import VueRouter, {RouteConfig} from 'vue-router'
+
+const config = require('../../public/config/sys-config.json');
+
+Vue.use(VueRouter)
+
+const routes: Array<RouteConfig> = [
+  {
+    path: '/',
+    redirect: '/index'
+  },
+  {
+    path: '/index',
+    name: 'Home',
+    component: () => import('@/views/layout/Layout.vue')
+  }
+]
+
+const router = new VueRouter({
+  base: config.projectName,
+  routes
+})
+
+export default router

src/shims-tsx.d.ts

@@ -0,0 +1,11 @@
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}

src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

src/store/index.ts

@@ -0,0 +1,38 @@
+import {Vue} from 'vue-property-decorator'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+export default new Vuex.Store({
+  state: {
+    mapFun: null, // 封装了地图的方法
+    mapInstance: null, // 地图实例
+    dictionary: null, // 字典信息
+    ship: null, // 船舶信息,
+    showPort: false,
+    shipFleet: null
+  },
+  mutations: {
+    setData(state, data) {
+      // @ts-ignore
+      state[data.type] = data
+    },
+    setMapInstance(state, data) {
+      state.mapInstance = data
+    },
+    setMapFun(state, data) {
+      state.mapFun = data
+    },
+    setDataNull(state, data) {
+      // @ts-ignore
+      state[data.type] = data.data
+    },
+    setShowPort(state, data) {
+      state.showPort = data
+    },
+    setShipFleet(state, data) {
+      state.shipFleet = data
+    }
+  },
+  actions: {},
+  modules: {}
+})

src/util/axios/index.ts

@@ -0,0 +1,12 @@
+import axios from 'axios'
+const sysConfig = require('../../../public/config/sys-config.json')
+
+const Http = axios.create()
+Http.interceptors.request.use((config: any) => {
+  config.headers['appKey'] = sysConfig.appKey
+  return config
+})
+Http.interceptors.response.use((config) => {
+  return config
+})
+export default Http

src/util/bus/index.ts

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+
+const bus = new Vue()
+
+export default bus

src/util/date/index.ts

@@ -0,0 +1,113 @@
+import dayjs from 'dayjs'
+import i18n from "@/util/translate";
+import {Language} from "@/module/menu";
+
+/**
+ * 获取指定时间到当前的时间的时间间隔
+ * @param appointTime 指定时间
+ */
+export const dateForNow = function (appointTime: any) {
+  const nowTime = Date.parse(new Date() + '') / 1000
+  const time: number = nowTime - Number(appointTime)
+  const zn = window.localStorage.getItem('language')
+  if (time < 60) {
+    return `1${zn === 'Chinese' ? '分钟前' : 'minutes ago'}`
+  } else if (time < 3600) {
+    return parseInt(time / 60 + '') + `${zn === 'Chinese' ? '分钟前' : 'minutes ago'}`
+  } else if (time < 86400) {
+    return parseInt(time / 3600 + '') + `${zn === 'Chinese' ? '小时前' : 'hours ago'}`
+  } else if (time > 86400 && time < 2592000) {
+    return parseInt(time / (24 * 3600) + '') + `${zn === 'Chinese' ? '天前' : 'days ago'}`
+  } else {
+    return `30${zn === 'Chinese' ? '天前' : 'days ago'}`
+  }
+}
+/**
+ * 获取秒级字符串
+ * @param time
+ */
+export const getLongByTime = function (time: any) {
+  return new Date(time).getTime() / 1000
+}
+
+/**
+ * 获取当前的时间
+ */
+export const getNowTime = function () {
+  return dayjs().format('YYYY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 获取几天前的时间
+ * @param time
+ * @param day
+ */
+export const getBeforeTime = function (time: any, day: number) {
+  return dayjs(time).subtract(day, 'day').format('YYYY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 获取月份的第一天
+ */
+export const getFirstDayOfMonth = function (time: string) {
+  return dayjs(time).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 获取月份的最后一天
+ */
+export const getLastDayOfMonth = function (time: string) {
+  return dayjs(time).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+}
+
+/**
+ * 获取上一个月的时间
+ */
+export const getBeforeMonth = function (time: string) {
+  return dayjs(time).subtract(1, 'month').format('YYYY-MM')
+}
+export const getBeforeMonth2 = function (time: string, m: number) {
+  return dayjs(time).subtract(m, 'month')
+}
+/**
+ * 获取指定时间的月份
+ * @param time
+ */
+export const getMonthOfTime = function (time: string) {
+  return dayjs(time).get('month')
+}
+
+/**
+ * 根据时间戳返回时间
+ */
+export const getTimeByLong = function (data: number) {
+  return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
+}
+/**
+ * 根据时间戳返回时间
+ */
+export const getTimeByLongByFormat = function (data: number, format: string) {
+  return dayjs(data).format(format)
+}
+
+/**
+ * 根据时间戳返回时间
+ */
+export const getTimeByLong2 = function (data: number) {
+  return dayjs(data).format('YYYY-MM-DD HH:00:00')
+}
+
+export const getYMD = function (data: any) {
+  return dayjs(data).format('YYYYMMDD')
+}
+
+export const getFullStrDate = function () {
+  return dayjs().format('YYYYMMDDHHmmss')
+}
+
+export const formatDate = function (date: string, format: string) {
+  return dayjs(date).format(format)
+}
+export const getTimeForLong = function (data: number, format: string) {
+  return dayjs(data).format(format)
+}

src/util/drawMixin.js

@@ -0,0 +1,57 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '1',
+  height: '1',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920
+const baseHeight = 1080
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null
+    }
+  },
+  mounted() {
+    this.calcRate()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
+  },
+  methods: {
+    calcRate() {
+      const appRef = this.$refs["appRef"]
+      if (!appRef) return
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
+      if (appRef) {
+        if (currentRate > baseProportion) {
+          // 表示更宽
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
+          scale.height = (window.innerHeight / baseHeight).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        } else {
+          // 表示更高
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
+          scale.width = (window.innerWidth / baseWidth).toFixed(5)
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
+        }
+      }
+    },
+    resize() {
+      clearTimeout(this.drawTiming)
+      this.drawTiming = setTimeout(() => {
+        this.calcRate()
+      }, 200)
+    }
+  },
+}

src/util/excel/exporeExcel.ts

@@ -0,0 +1,34 @@
+//导入依赖项
+import FileSaver from 'file-saver';
+import * as  XLSX from "xlsx";
+
+/**
+ * elemet-ui el-table数据导出为xlsx表格
+ * @param {*} _targetId Element-UI el-table组件的id值
+ */
+export const exportTableAsXLSX = function (tableArray: any[], header: any, name: string) {
+  //根据table生成Book工作簿
+  // let wb = XLSX.utils.table_to_book(document.getElementById('_targetId'));
+
+  let wb = XLSX.utils.book_new()
+  let ws: any = XLSX.utils.json_to_sheet(tableArray, {header: header})
+  wb.SheetNames.push('sheet1');
+  wb.Sheets['sheet1'] = ws;
+  //将Book工作簿作为输出
+  let wbout = XLSX.write(wb, {
+    bookType: "xlsx",
+    bookSST: true,
+    type: "array"
+  });
+  //尝试将当前table内容保存为excel文件
+  try {
+    FileSaver.saveAs(
+      //被导出的blob二进制对象
+      new Blob([wbout], {type: "application/octet-stream"}),
+      //导出文件的名称+后缀名
+      name + ".xlsx"
+    );
+  } catch (e) {
+    if (typeof console !== "undefined") console.log(e, wbout);
+  }
+}

src/util/filters/filters.js

@@ -0,0 +1,78 @@
+/**
+ *格式化时间
+ *yyyy-MM-dd hh:mm:ss
+ */
+export function formatDate(time, fmt) {
+  if (time === undefined || time === '' || time === null || time === 0) {
+    return
+  }
+  if (typeof time === 'string') {
+    return time
+  }
+  time = time * 1000
+  const date = new Date(time)
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  const o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds()
+  }
+  for (const k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      const str = o[k] + ''
+      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
+    }
+  }
+  return fmt
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length)
+}
+
+export function timestampFormatDate(timestamp, format) {
+  let date = timestampFormatDate(timestamp);
+  let result = formatDate(date, format)
+  return result
+}
+
+var minute = 60;
+var hour = minute * 60;
+var day = hour * 24;
+var week = day * 7;
+var month = day * 30;
+
+export function getTimer(stringTime,language) {
+  var time1 = new Date().getTime() / 1000;//当前的时间戳
+  var time2 = stringTime; //Date.parse(new Date(stringTime));//指定时间的时间戳
+  var time = time1 - time2;
+  var result = null;
+  /*if(time < 0){
+
+  }else if(time/month >= 1){
+      result = parseInt(time/month) + "月前";
+  }else if(time/week >= 1){
+      result =  parseInt(time/week) + "周前";
+  }else */
+  if (time / day >= 30) {
+    result = language === 2 ? "30天前" : '30 days ago ';
+  } else if (time / day >= 1) {
+    result = language === 2 ? parseInt(time / day) + "天前" : parseInt(time / day) + 'days ago';
+  } else if (time / hour >= 1) {
+    result = language === 2 ? parseInt(time / hour) + "小时前" : parseInt(time / hour) + 'hours ago';
+  } else if (time / minute >= 1) {
+    result = language === 2 ? parseInt(time / minute) + "分钟前" : parseInt(time / minute) + 'minutes ago';
+  } else {
+    //  result = "刚刚";
+    result = language === 2 ? "1分钟前" : '1 minutes age';
+  }
+  return result;
+}
+
+
+
+

src/util/filters/index.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import * as filter from './filters'
+
+Object.keys(filter).forEach(k => Vue.filter(k, filter[k]))
+
+Vue.prototype.$formatDate = Vue.filter('formatDate')

src/util/fix/index.ts

@@ -0,0 +1,4 @@
+// 获取设备独立像素
+const screenWidth = window.screen.width
+const screenHeight = window.screen.height
+// 基于1920 * 1080

src/util/format/index.ts

@@ -0,0 +1,30 @@
+/**
+ * 格式化港口名称
+ * @param data
+ */
+export const portName = function (data: any) {
+  if (data) {
+    let name = ''
+    if (data.nameEn && data.nameChs) {
+      name += `${data.nameChs}(${data.nameEn})`
+    } else if (data.nameChs || data.nameEn) {
+      name += `${data.nameChs || data.nameEn}`
+    }
+    return name
+  }
+}
+/**
+ * 格式化国家名称
+ * @param data
+ */
+export const countryName = function (data: any) {
+  if (data) {
+    let name = ''
+    if (data.countryEn && data.countryChs) {
+      name += `${data.countryChs}(${data.countryEn})`
+    } else if (data.countryChs || data.countryEn) {
+      name += `${data.countryChs || data.countryEn}`
+    }
+    return name
+  }
+}

src/util/fun-switch/index.ts

@@ -0,0 +1,36 @@
+/*功能开关*/
+
+/*搜索中的功能开关*/
+export const search = {
+  open: true, // 搜索总开关
+  port: true, // 搜索港口功能
+  ship: true, // 搜索船舶功能}
+  urlMMSI: true // url 中传递没mmsi 进行船舶搜索
+}
+/* 头部的共能开关 */
+export const header = {
+  message: true, // 消息开关
+  trans: false // 翻译开关
+}
+/* 显示全部港口的功能开关 */
+export const allPort = false // 显示全部港口
+
+/* 港口信息中的功能开关 */
+export const portQuery = {
+  dongTai: false, // 港口信息中动态开关
+  weather: true // 港口信息中天气开关
+}
+/* 船舶信息中的功能开关 */
+export const shipInfo = {
+  doc: false, // 船舶信息中船舶档案开关
+  innerShip: false, // 船舶信息中内河船舶开关
+  pos: true, // 船舶信息中定位按钮开关
+  track: true, // 船舶信息中轨迹查询开关
+  portCalling: true, // 船舶信息中挂靠港记录开关
+  hc: false, // 船舶信息中航次开关
+  destPortJump: false, // 目的地跳转
+  shipEvent: false, // 船舶事件
+  routeYc: false // 航线预测
+}
+/*页面上消息滚动开关*/
+export const messageRoll = false

src/util/init-data/index.ts

@@ -0,0 +1,99 @@
+import HttpApi from "@/api";
+import storeUtil from "@/util/store";
+import Vue from "vue";
+
+/*----------------------初始化字典信息---------------------*/
+let dictionaryData: any = {};
+HttpApi.searchDictionary('1').then((res: any) => {
+  if (res) {
+    dictionaryData.shipCountry = res
+  }
+});
+HttpApi.searchDictionary('2').then((res: any) => {
+  if (res) {
+    dictionaryData.shipType = res
+  }
+});
+HttpApi.searchDictionary('3').then((res: any) => {
+  if (res) {
+    dictionaryData.shipStatus = res
+  }
+})
+
+setTimeout(() => {
+  storeUtil.setDictionary(dictionaryData)
+}, 1000)
+/*----------------------初始化字典信息结束---------------------*/
+
+/* 获取船队数据*/
+// HttpApi.getShipRanks({}).then((res: any) => {
+//   const TreeData: any[] = []
+//   let shipIds = ''
+//   const newShipList: any = []
+//   for (let i = 0; i < res.length; i++) {
+//     const fleet = JSON.parse(JSON.stringify(res[i]))
+//     let tempData: any = {}
+//     tempData = JSON.parse(JSON.stringify(fleet))
+//     tempData.status = true
+//     tempData.followShipList = []
+//
+//     if (fleet.followShipList && fleet.followShipList.length > 0) {
+//       for (let j = 0; j < fleet.followShipList.length; j++) {
+//         const ship = JSON.parse(JSON.stringify(fleet.followShipList[j]))
+//         ship.status = true
+//         ship.color = fleet.color
+//         ship.name = ship.customName
+//         tempData.followShipList.push(ship)
+//         shipIds += ship.shipId + ','
+//       }
+//     }
+//
+//     TreeData.push(tempData)
+//   }
+//   Vue.prototype.$fleetList = TreeData
+//   const data = {shipId: shipIds}
+//
+//   HttpApi.getShipMessage(data).then((res: any) => {
+//     if (res) {
+//       const fleetList = Vue.prototype.$fleetList
+//       for (let i = 0; i < fleetList.length; i++) {
+//         const followShipList = fleetList[i].followShipList
+//         if (followShipList) {
+//           for (let j = 0; j < followShipList.length; j++) {
+//             for (let m = 0; m < res.length; m++) {
+//               if (res[m].shipId === followShipList[j].shipId) {
+//                 res[m].color = followShipList[j].color
+//                 const element = res[m]
+//                 element.isFleet = true
+//                 Vue.prototype.$sourceShips.push(element)
+//                 newShipList.push({
+//                   y: element.shiptype,
+//                   m: element.mmsi,
+//                   h: element.heading,
+//                   g: element.callsign,
+//                   c: element.cog,
+//                   o: element.imo,
+//                   s: element.sog,
+//                   v: element.aisNavStatus,
+//                   l: element.length,
+//                   p: element.destPort,
+//                   b: element.breadth,
+//                   r: element.eta,
+//                   d: element.draught,
+//                   t: element.posTime,
+//                   i: element.shipId,
+//                   n: element.lon,
+//                   a: element.lat,
+//                   e: element.shipnameEn,
+//                   color: element.color,
+//                   isFleet: true
+//                 })
+//               }
+//             }
+//           }
+//         }
+//       }
+//       Vue.prototype.$originAllShipRankList = JSON.parse(JSON.stringify(newShipList))
+//     }
+//   })
+// })

src/util/map/img/marineWeather.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1643185999572" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4485" xmlns:xlink="http://www.w3.org/1999/xlink" width="15" height="15"><defs><style type="text/css"></style></defs><path d="M600 411.2H35.2c-8.8 0-15.2-7.2-15.2-15.2v-73.6c0-8.8 7.2-15.2 15.2-15.2H600c15.2 0 27.2-12 27.2-27.2s-12-27.2-27.2-27.2-27.2 12-27.2 27.2c0 8.8-7.2 15.2-15.2 15.2h-73.6c-8.8 0-15.2-7.2-15.2-15.2 0-72.8 59.2-132 132-132S732.8 207.2 732.8 280 672.8 411.2 600 411.2zM50.4 380.8H600c56 0 100.8-45.6 100.8-100.8S656 178.4 600 178.4c-50.4 0-92 36.8-100 85.6H544c7.2-24.8 29.6-42.4 56-42.4 32 0 58.4 26.4 58.4 58.4S632 337.6 600 337.6H50.4v43.2zM600 876.8c-72.8 0-132-59.2-132-132 0-8.8 7.2-15.2 15.2-15.2h73.6c8.8 0 15.2 7.2 15.2 15.2 0 15.2 12 27.2 27.2 27.2s27.2-12 27.2-27.2-12-27.2-27.2-27.2H35.2c-8.8 0-15.2-7.2-15.2-15.2v-73.6c0-8.8 7.2-15.2 15.2-15.2H600c72.8 0 132 59.2 132 132s-59.2 131.2-132 131.2zM500 760c7.2 48 49.6 85.6 100 85.6 56 0 100.8-45.6 100.8-100.8 0-56-45.6-100.8-100.8-100.8H50.4v42.4H600c32 0 58.4 26.4 58.4 58.4s-26.4 58.4-58.4 58.4c-26.4 0-49.6-18.4-56-42.4h-44z" p-id="4486" fill="#ffffff"></path><path d="M870.4 717.6c-72.8 0-132-59.2-132-132 0-8.8 7.2-15.2 15.2-15.2h73.6c8.8 0 15.2 7.2 15.2 15.2 0 15.2 12 27.2 27.2 27.2s27.2-12 27.2-27.2-12-27.2-27.2-27.2H35.2c-8.8 0-15.2-7.2-15.2-15.2v-73.6c0-8.8 7.2-15.2 15.2-15.2h835.2c72.8 0 132 59.2 132 132s-59.2 131.2-132 131.2zM770.4 600.8c7.2 48 49.6 85.6 100 85.6 56 0 100.8-45.6 100.8-100.8 0-56-45.6-100.8-100.8-100.8H50.4v42.4h820c32 0 58.4 26.4 58.4 58.4s-26.4 58.4-58.4 58.4c-26.4 0-49.6-18.4-56-42.4h-44zM600 411.2H35.2c-8.8 0-15.2-7.2-15.2-15.2v-73.6c0-8.8 7.2-15.2 15.2-15.2H600c15.2 0 27.2-12 27.2-27.2s-12-27.2-27.2-27.2-27.2 12-27.2 27.2c0 8.8-7.2 15.2-15.2 15.2h-73.6c-8.8 0-15.2-7.2-15.2-15.2 0-72.8 59.2-132 132-132S732.8 207.2 732.8 280 672.8 411.2 600 411.2zM50.4 380.8H600c56 0 100.8-45.6 100.8-100.8S656 178.4 600 178.4c-50.4 0-92 36.8-100 85.6H544c7.2-24.8 29.6-42.4 56-42.4 32 0 58.4 26.4 58.4 58.4S632 337.6 600 337.6H50.4v43.2z" p-id="4487" fill="#ffffff"></path><path d="M600 876.8c-72.8 0-132-59.2-132-132 0-8.8 7.2-15.2 15.2-15.2h73.6c8.8 0 15.2 7.2 15.2 15.2 0 15.2 12 27.2 27.2 27.2s27.2-12 27.2-27.2-12-27.2-27.2-27.2H35.2c-8.8 0-15.2-7.2-15.2-15.2v-73.6c0-8.8 7.2-15.2 15.2-15.2H600c72.8 0 132 59.2 132 132s-59.2 131.2-132 131.2zM500 760c7.2 48 49.6 85.6 100 85.6 56 0 100.8-45.6 100.8-100.8 0-56-45.6-100.8-100.8-100.8H50.4v42.4H600c32 0 58.4 26.4 58.4 58.4s-26.4 58.4-58.4 58.4c-26.4 0-49.6-18.4-56-42.4h-44z" p-id="4488" fill="#ffffff"></path><path d="M872.8 717.6c-72.8 0-132-59.2-132-132 0-8.8 7.2-15.2 15.2-15.2h73.6c8.8 0 15.2 7.2 15.2 15.2 0 15.2 12 27.2 27.2 27.2s27.2-12 27.2-27.2-12-27.2-27.2-27.2H36.8c-8.8 0-15.2-7.2-15.2-15.2v-73.6c0-8.8 7.2-15.2 15.2-15.2H872c72.8 0 132 59.2 132 132s-58.4 131.2-131.2 131.2zM772.8 600.8c7.2 48 49.6 85.6 100 85.6 56 0 100.8-45.6 100.8-100.8 0-56-45.6-100.8-100.8-100.8H52.8v42.4h820c32 0 58.4 26.4 58.4 58.4s-26.4 58.4-58.4 58.4c-26.4 0-49.6-18.4-56-42.4h-44z" p-id="4489" fill="#ffffff"></path></svg>

src/util/map/img/tool.svg

@@ -0,0 +1,35 @@
+<svg
+        width="15px"
+        height="15px"
+        viewBox="0 0 15 15"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <title>工具</title>
+    <desc>Created with Sketch.</desc>
+    <g
+            id="页面-1"
+            stroke="none"
+            stroke-width="1"
+            fill="none"
+            fill-rule="evenodd"
+    >
+        <g
+                id="船舶轨迹"
+                transform="translate(-21.000000, -604.000000)"
+                fill="#FFFFFF"
+                fill-rule="nonzero"
+        >
+            <g id="工具" transform="translate(21.000000, 604.000000)">
+                <path
+                        d="M11.9693024,14.9305556 C11.4011206,14.9305556 10.8645044,14.709596 10.4225852,14.2992424 L6.60314079,10.5113636 L7.73950442,9.375 L7.92889836,9.56439394 L8.37081755,9.12247474 L9.065262,9.8169192 L8.37081755,10.5113636 L11.274858,13.415404 C11.6220802,13.7626263 12.2218277,13.7626263 12.6006155,13.415404 L13.3897569,12.6262626 C13.7685448,12.2474747 13.7685448,11.6792929 13.3897569,11.300505 L10.4857165,8.39646465 L9.79127209,9.09090909 L9.09682765,8.39646465 L9.53874685,7.95454545 L9.38091856,7.73358586 L10.5172822,6.59722223 L14.305161,10.4166667 C15.1574337,11.2689394 15.1574337,12.6578283 14.305161,13.510101 L13.5160196,14.2992424 C13.0741004,14.7411616 12.5374842,14.9305556 11.9693024,14.9305556 Z M4.7723327,7.26010102 L3.50970644,6.02904041 L1.83672664,5.14520202 L0.00591856061,2.80934344 L2.815262,0 L5.15112058,1.83080808 L6.03495897,3.53535353 L7.36071655,4.82954545 L6.47687815,5.7449495 L4.55137311,3.81944444 L4.70920139,3.69318182 L4.17258523,2.65151515 L2.90995897,1.70454545 L1.71046402,2.90404041 L2.65743371,4.16666667 L3.69910038,4.70328283 L3.825363,4.54545455 L5.65617109,6.37626262 L4.7723327,7.26010102 Z"
+                        id="形状"
+                ></path>
+                <path
+                        d="M2.56273674,14.9305556 C2.12081755,14.9305556 1.71046402,14.7727273 1.36324179,14.425505 L0.574100379,13.6363636 C-0.0887784091,12.9734848 -0.0887784091,11.9002525 0.574100379,11.2373737 L7.26601958,4.54545455 C7.07662564,3.31439394 7.45541352,2.08333333 8.33925189,1.19949495 C9.53874685,1.42663659e-14 11.3379893,-0.284090909 12.8531408,0.5050505 L13.6107165,0.915404045 L11.4011206,3.125 L11.8746054,3.59848485 L14.0842014,1.38888889 L14.4945549,2.14646465 C15.2836963,3.66161617 14.9996054,5.46085859 13.8001105,6.66035353 C12.9162721,7.54419191 11.6536458,7.92297979 10.4541509,7.73358586 L3.7622317,14.4570707 C3.44657514,14.7727273 3.00465594,14.9305556 2.56273674,14.9305556 Z M11.085464,1.35732323 C10.4225852,1.35732323 9.75970644,1.60984848 9.25465594,2.11489898 C8.59177715,2.77777777 8.33925189,3.72474747 8.59177715,4.60858586 L8.68647412,4.95580808 L1.48950442,12.1527778 C1.33167614,12.3106061 1.33167614,12.594697 1.48950442,12.7525253 L2.27864583,13.5416667 C2.43647412,13.699495 2.72056503,13.699495 2.8783933,13.5416667 L10.075363,6.34469697 L10.4225852,6.43939394 C11.3064236,6.6919192 12.284959,6.40782829 12.9162721,5.77651515 C13.4844539,5.20833333 13.7685448,4.38762626 13.6738478,3.6300505 L11.9061711,5.39772727 L9.63344382,3.15656565 L11.4011206,1.38888889 C11.3064236,1.35732323 11.180161,1.35732323 11.085464,1.35732323 Z"
+                        id="形状"
+                ></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/util/map/index.ts

@@ -0,0 +1,22 @@
+import store from '@/util/store'
+
+class MapUtil {
+  /**
+   * 选择船舶
+   */
+  public chooseShip (data: any,isArea?: boolean) {
+    const shipFun: any = store.getMapFun()
+    let shipmes = data
+    let lon = shipmes.n / 600000
+    let lat = shipmes.a / 600000
+    if (isArea) {
+      shipFun.showShips(shipmes.i)
+    } else {
+      shipFun.addShip([data], 2, data.map)
+    }
+    shipFun.setCenter([lon, lat])
+    shipFun.addSelectByCoor([lon, lat])
+  }
+}
+
+export default new MapUtil()

src/util/map/map.d.ts

@@ -0,0 +1,4 @@
+declare module '@/util/map/map.js' {
+  import shipMap from '@/util/map/map.js'
+  export default shipMap
+}

src/util/map/style.js

@@ -0,0 +1,637 @@
+import Style from 'ol/style/Style' //样式总类
+import styleIcon from 'ol/style/Icon' //添加图标
+import styleText from 'ol/style/Text' //添加文字标注
+import styleFill from 'ol/style/Fill' //添加填充样式
+import styleStroke from 'ol/style/Stroke' //添加填充样式
+import styleCircle from 'ol/style/Circle' //添加填充样式
+import Polygon from 'ol/geom/Polygon' //面
+import start from './img/start.png'
+import end from './img/end.png'
+import kuang from './img/kuang.png'
+import sign from './img/blue.png'
+import port from './img/port.png'
+import berth from './img/berth.png'
+import { transform } from 'ol/proj' //坐标系转换
+import { Circle as CircleStyle, Fill, RegularShape } from 'ol/style'
+
+const shipStyle = new Object({})
+
+
+shipStyle.carStyle = function (f) {
+  let flag = new Style({
+    image: new styleIcon({
+      src: '/zero2/img/car.svg',
+      scale: 0.2,
+    }),
+    text: new styleText({
+      font: '16px Microsoft YaHei 100',
+      textAlign: 'center',
+      overflow: true,
+      fill: new styleFill({
+        color: '#000'
+      }),
+      stroke: new styleStroke({
+        color: '#fff',
+        width: 3
+      }),
+      textBaseline: 'bottom',
+      text: f.get('carNum')
+    })
+  })
+  return [flag]
+}
+// ---我的修改---
+var shipsize = null
+shipStyle.plotting = function (number) {
+  number = number <= 200 ? number : 200
+  shipsize = number
+}
+// ---我的修改---
+
+// ---我的修改
+shipStyle.lineStyle = function () {
+  return new Style({
+    stroke: new styleStroke({
+      color: 'rgba(77, 168, 213,0.7)',
+      width: 4
+    })
+  })
+}
+//---我的修改
+
+//普通船舶
+shipStyle.newshipStyle = function (f, r, map) {
+  let zoom = Math.ceil((Math.log(r) - Math.log(156543.03390625)) / Math.log(0.5))
+  let style = null
+  let gemo = null
+  let styles = []
+  let d = r * 7
+  let shipnameEn = f.get('shipnameEn') //船名
+  let heading = f.get('heading')
+  let direction = parseFloat(f.get('cog') / 10) //航向
+  let speed = parseFloat(f.get('sog') / 10) //速度
+  let o = f.get('geom').getCoordinates()
+  let lon = parseFloat(f.get('lon') / 60 / 10000)
+  let lat = parseFloat(f.get('lat') / 60 / 10000)
+  let shipColor = ''
+  let color = f.get('color')
+  if (color) {
+    shipColor = color
+  } else {
+    let shiptype = f.get('shiptype')
+    shiptype = shiptype ? Number(shiptype) : 90
+    switch (true) {
+      //70-79  货船
+      case shiptype >= 70 && shiptype <= 79:
+        shipColor = '#53cf90'
+        break
+      //80-89 油船
+      case shiptype >= 80 && shiptype <= 89:
+        shipColor = '#743675'
+        break
+      //60-69  客船
+      case shiptype >= 60 && shiptype <= 69 && shiptype === 73:
+        shipColor = '#ffc24d'
+        break
+      //渔船
+      case shiptype == 30:
+        shipColor = '#fc8a2a'
+        break
+      //拖船
+      case shiptype == 52:
+        shipColor = '#bd3154'
+        break
+      //工程船
+      case shiptype == 31 ||
+      shiptype == 32 ||
+      shiptype == 33 ||
+      shiptype == 34 ||
+      shiptype == 53:
+        shipColor = '#2fb3cc'
+        break
+      //公务执法船
+      case shiptype == 35 ||
+      shiptype == 50 ||
+      shiptype == 51 ||
+      shiptype == 55 ||
+      shiptype == 58:
+      // shiptype == 59:
+        shipColor = '#8d1d55'
+        break
+      //其他
+      default:
+        shipColor = '#065880'
+        break
+    }
+  }
+  style = new Style({
+    fill: new styleFill({
+      color: shipColor
+    }),
+    stroke: new styleStroke({
+      color: '#333',
+      width: 0.5
+    })
+  })
+  styles.push(style)
+  let nameStyle = null
+  let textline = null
+  //判断图层级别
+  var rot = heading
+  if (rot !== 0) {
+    if (!rot) {
+      rot = direction
+      if (!rot) {
+        rot = 0
+      }
+    }
+  }
+  let rot2 = 0
+  if (direction === 0) {
+    rot2 = 0
+  } else {
+    rot2 = direction ? direction : heading
+    if (!rot2) rot2 = 0
+  }
+  let geom = null
+  if (speed && speed >= 0.5) {//显示三角形
+    let x = [o[0], o[1] + (1.3 + speed * 0.1) * d]
+    let a = [o[0], o[1] + 1.3 * d]
+    let b = [o[0] - 0.7 * d, o[1] - d]
+    let c = [o[0] + 0.7 * d, o[1] - d]
+    geom = new Polygon([
+      [x, a, b, c, a]
+    ])
+    geom.rotate(-Math.PI / 180 * direction, o)
+  } else { //显示菱形
+    let x = [o[0] - 0.5 * d, o[1] - 0.5 * d]
+    let a = [o[0] + 0.5 * d, o[1] - 0.5 * d]
+    let b = [o[0] - 0.5 * d, o[1] + 0.5 * d]
+    let c = [o[0] + 0.5 * d, o[1] + 0.5 * d]
+    geom = new Polygon([
+      [x, a, c, b]
+    ])
+    geom.rotate(Math.PI / 180 * 45, o)
+  }
+  f.setGeometry(geom)
+
+  nameStyle = new Style({
+    text: new styleText({
+      font: '16px Microsoft YaHei 100',
+      textAlign: 'left',
+      overflow: true,
+      fill: new styleFill({
+        color: '#000'
+      }),
+      stroke: new styleStroke({
+        color: '#fff',
+        width: 3
+      }),
+      textBaseline: 'bottom',
+      offsetX: 10,
+      offsetY: 20,
+      text: shipnameEn
+    })
+  })
+
+  // let pix = map.getPixelFromCoordinate(o)
+  // let e = []
+  // e[0] = pix[0]
+  // e[1] = pix[1]
+  // e[0] += 20
+  // e[1] += 10
+  // let end = map.getCoordinateFromPixel(e)
+  // let slGeo = new LineString([o, end])
+  //  textline = new Style({
+  //   fill: new styleFill({
+  //     color: 'black'
+  //   }),
+  //   stroke: new styleStroke({
+  //     color: 'black',
+  //     width: 0.5
+  //   })
+  // })
+  // textline.setGeometry(slGeo)
+
+  if (zoom > 11) {
+    // if (nameStyle) {
+    //   styles.push(nameStyle)
+    // }
+    // if (textline) {
+    //   styles.push(textline)
+    // }
+  }
+
+  return styles
+}
+
+// 新的船舶样式
+shipStyle.newShipStyle = function (f, zoom, map) {
+  return new Style({
+    image: new RegularShape({
+      stroke: new styleStroke({
+        color: '#333333FF',
+        width: 1
+      }),
+      fill: new styleFill({
+        color: 'red'
+      }),
+      radius: 8,
+      points: 4
+    })
+  })
+}
+
+//测距最终显示的样式
+shipStyle.ceJuStyle = new Style({
+  fill: new styleFill({
+    color: 'red'
+  }),
+  stroke: new styleStroke({
+    color: 'red',
+    width: 3
+  }),
+  image: new CircleStyle({
+    radius: 7,
+    fill: new styleFill({
+      color: 'red'
+    })
+  })
+})
+//测距画笔的样式
+shipStyle.drawStyle = new Style({
+  fill: new styleFill({
+    color: 'red'
+  }),
+  stroke: new styleStroke({
+    color: 'red',
+    width: 3
+  }),
+  image: new CircleStyle({
+    radius: 5,
+    stroke: new styleStroke({
+      color: 'red'
+    }),
+    fill: new styleFill({
+      color: 'red'
+    })
+  })
+})
+
+shipStyle.newShip = function () {
+  return new Style({
+    image: new styleIcon({
+      // 点的颜色
+      fill: new styleFill({
+        color: '#000'
+      }),
+      // 圆形半径
+      radius: 7
+    })
+  })
+}
+//船舶样式
+shipStyle.shipStyle = function (f, r) {
+  let r1 = 0.0005 //r=0.0005代表着100米
+  let style = null
+  let gemo = null
+  let speed = parseFloat(f.get('sog'))
+  let direction = parseFloat(f.get('cog'))
+  let o = f.get('geom').getCoordinates()
+  let lon = parseFloat(f.get('lon') / 60 / 10000)
+  let lat = parseFloat(f.get('lat') / 60 / 10000)
+  let name = f.get('shipnameEn')
+  //判断图层级别
+  if (r < 13) {
+    style = new Style({
+      stroke: new styleStroke({
+        color: 'red',
+        width: 1
+      })
+    })
+    //判断航向是不是O 是就显示方块
+    // if (speed == 0) {
+    //   let a = changeCoor([lon - r1, lat - r1]);
+    //   let s = changeCoor([lon - r1, lat + r1]);
+    //   let v = changeCoor([lon + r1, lat + r1]);
+    //   let g = changeCoor([lon + r1, lat - r1]);
+    //   gemo = new Polygon([[a, s, v, g]]);
+    //   gemo.rotate(Math.PI / 180 * 45, o);
+    // } else {
+    let x = changeCoor([lon, lat + (1.8 + speed * 0.2) * r1])
+    let a1 = changeCoor([lon, lat + 1.8 * r1])
+    let b1 = changeCoor([lon - 0.4 * r1, lat + r1])
+    let c1 = changeCoor([lon + 0.4 * r1, lat + r1])
+    let d1 = changeCoor([lon - 0.4 * r1, lat - 1.5 * r1])
+    let e1 = changeCoor([lon + 0.4 * r1, lat - 1.5 * r1])
+    gemo = new Polygon([[x, a1, b1, d1, e1, c1, a1]])
+    gemo.rotate((-Math.PI / 180) * direction, o)
+    // }
+  } else {
+    r1 = r / 20000
+    style = new Style({
+      fill: new styleFill({ color: '#7CFC00' }),
+      stroke: new styleStroke({
+        color: '#333',
+        width: 0.5
+      })
+    })
+    let x = changeCoor([lon, lat + (1.3 + speed * 0.1) * r1])
+    let a = changeCoor([lon, lat + 1.3 * r1])
+    let b = changeCoor([lon - 0.7 * r1, lat - r1])
+    let c = changeCoor([lon + 0.7 * r1, lat - r1])
+    gemo = new Polygon([[x, a, b, c, a]])
+    gemo.rotate((-Math.PI / 180) * direction, o)
+  }
+  f.setGeometry(gemo)
+
+  let nameStyle = new Style({
+    text: new styleText({
+      font: '16px Microsoft YaHei 100',
+      textAlign: 'left',
+      overflow: true,
+      fill: new styleFill({
+        color: '#000'
+      }),
+      stroke: new styleStroke({
+        color: '#fff',
+        width: 3
+      }),
+      textBaseline: 'bottom',
+      /*backgroundStroke:new Stroke({
+          color: '#8D9080',
+          width: 1
+      }),*/
+      offsetX: 0,
+      offsetY: 20,
+      text: name
+    })
+  })
+  let flag = new Style({
+    image: new styleIcon({
+      src: '../img/end.png',
+      imgSize: [10, 22],
+      //scale: 0.5
+      offsetX: 0,
+      offsetY: 11
+    }),
+    text: new styleText({
+      font: '16px Microsoft YaHei 100',
+      textAlign: 'left',
+      overflow: true,
+      fill: new styleFill({
+        color: '#000'
+      }),
+      stroke: new styleStroke({
+        color: '#fff',
+        width: 3
+      }),
+      textBaseline: 'bottom',
+      /*backgroundStroke:new Stroke({
+          color: '#8D9080',
+          width: 1
+      }),*/
+      offsetX: 50,
+      offsetY: 20,
+      text: 'name'
+    })
+  })
+  let styles = []
+  styles.push(style)
+  if (r >= 11) {
+    styles.push(nameStyle)
+  }
+  return styles
+}
+//船舶选中框样式
+shipStyle.selectStyle = new Style({
+  image: new styleIcon({
+    anchor: [0.5, 0.5],
+    src: kuang
+  })
+})
+//标记的样式
+shipStyle.signStyle = new Style({
+  image: new styleIcon({
+    anchor: [0.5, 0.5],
+    src: sign
+  }),
+  text: new styleText({
+    text: '未命名', //f.get('name')
+    font: '12px Calibri,sans-serif',
+    offsetY: 20, //位置
+    offsetX: 0, //位置
+    fill: new styleFill({
+      color: 'black' //填充颜色
+    })
+  })
+});
+
+//轨迹路线颜色
+(shipStyle.pathColor = function () {
+  return new Style({
+    stroke: new styleStroke({
+      color: 'red',
+      width: 3
+    })
+  })
+}),
+  //范围线样式
+  (shipStyle.areastyle = function () {
+    return new Style({
+      stroke: new styleStroke({
+        color: 'rgba(230,162,60,0.8)',
+        width: 5
+      })
+    })
+  })
+//船舶点击样式
+shipStyle.clickStyle = function () {
+  return function (f, r) {
+    let r1 = 0.0005 //r=0.0005代表着100米
+    let style = null
+    let gemo = null
+    let speed = parseFloat(f.get('sog'))
+    let direction = parseFloat(f.get('cog'))
+    let o = f.get('geom').getCoordinates()
+    let lon = parseFloat(f.get('lon'))
+    let lat = parseFloat(f.get('lat'))
+    //判断图层级别
+    if (r < 13) {
+      style = new Style({
+        stroke: new styleStroke({
+          color: 'black',
+          width: 1
+        }),
+        fill: new styleFill({
+          color: '#7CFC00'
+        })
+      })
+      //判断航向是不是O 是就显示方块
+      if (speed == 0) {
+        let a = changeCoor([lon - r1, lat - r1])
+        let s = changeCoor([lon - r1, lat + r1])
+        let v = changeCoor([lon + r1, lat + r1])
+        let g = changeCoor([lon + r1, lat - r1])
+        gemo = new Polygon([[a, s, v, g]])
+        gemo.rotate((Math.PI / 180) * 45, o)
+      } else {
+        let x = changeCoor([lon, lat + (1.8 + speed * 0.2) * r1])
+        let a1 = changeCoor([lon, lat + 1.8 * r1])
+        let b1 = changeCoor([lon - 0.4 * r1, lat + r1])
+        let c1 = changeCoor([lon + 0.4 * r1, lat + r1])
+        let d1 = changeCoor([lon - 0.4 * r1, lat - 1.5 * r1])
+        let e1 = changeCoor([lon + 0.4 * r1, lat - 1.5 * r1])
+        gemo = new Polygon([[x, a1, b1, d1, e1, c1, a1]])
+        gemo.rotate((-Math.PI / 180) * direction, o)
+      }
+    } else {
+      r1 = r / 20000
+      style = new Style({
+        fill: new styleFill({ color: '#7CFC00' }),
+        stroke: new styleStroke({
+          color: '#333',
+          width: 0.5
+        })
+      })
+      let x = changeCoor([lon, lat + (1.3 + speed * 0.1) * r1])
+      let a = changeCoor([lon, lat + 1.3 * r1])
+      let b = changeCoor([lon - 0.7 * r1, lat - r1])
+      let c = changeCoor([lon + 0.7 * r1, lat - r1])
+      gemo = new Polygon([[x, a, b, c, a]])
+      gemo.rotate((-Math.PI / 180) * direction, o)
+    }
+    f.setGeometry(gemo)
+    return style
+  }
+}
+//历史轨迹样式
+shipStyle.pathStyle = function (time) {
+  return new Style({
+    image: new styleCircle({
+      // 点的颜色
+      fill: new styleFill({
+        color: 'yellow'
+      }),
+      // 圆形半径
+      radius: 5
+    }),
+    text: new styleText({
+      text: time, //f.get('name')
+      font: '12px Calibri,sans-serif',
+      offsetY: 20, //位置
+      offsetX: 0, //位置
+      fill: new styleFill({
+        color: '#00a0e9'
+      }),
+      stroke: new styleStroke({
+        color: 'white',
+        width: 4
+      })
+    })
+  })
+}
+//历史轨迹开始结束点的样式
+shipStyle.pathSEStyle = function (state) {
+  let style = null
+  if (state == 'start') {
+    style = new Style({
+      image: new styleIcon({
+        src: start,
+        anchor: [0.5, 1]
+      })
+    })
+  } else {
+    style = new Style({
+      image: new styleIcon({
+        src: end,
+        anchor: [0.5, 1]
+      })
+    })
+  }
+  return style
+}
+//自定义数据添加线段的样式
+shipStyle.agtStyle = (color, type) => {
+  color = color ? color : '#FF5454'
+  let style = null
+  if (type == 1) {
+    style = new Style({
+      stroke: new styleStroke({
+        color: color,
+        width: 2,
+        lineDash: [10, 10]
+      })
+    })
+  } else {
+    style = new Style({
+      stroke: new styleStroke({
+        color: color,
+        width: 2
+      })
+    })
+  }
+  return style
+}
+
+//等值线样式
+shipStyle.isobarStyle = new Style({
+  fill: new Fill({ color: 'transparent' }),
+  stroke: new styleStroke({
+    width: 2,
+    color: [241, 241, 241, 0.8],
+  }),
+  text: new styleText({
+    font: '12px Calibri,sans-serif',
+    placement: 'line',
+    fill: new styleFill({
+      color: '#000',
+    }),
+    stroke: new styleStroke({
+      color: '#fff',
+      width: 3,
+    }),
+  }),
+})
+//港口样式
+shipStyle.portStyle = function (f) {
+  return new Style({
+    image: new styleIcon({
+      anchor: [0.5, 0.5],
+      src: port
+    }),
+    text: new styleText({
+      text: f.get('name'),
+      font: '12px Calibri,sans-serif',
+      offsetY: -10, //位置
+      offsetX: 25, //位置
+      fill: new styleFill({
+        color: 'blue' //填充颜色
+      })
+    })
+  })
+}
+shipStyle.berthStyle = function (f) {
+  return new Style({
+    image: new styleIcon({
+      anchor: [0.5, 0.5],
+      src: berth,
+      size: [20, 20],
+      scale: 1
+    }),
+    text: new styleText({
+      text: f.get('name'),
+      font: '12px Calibri,sans-serif',
+      offsetY: -10, //位置
+      offsetX: 25, //位置
+      fill: new styleFill({
+        color: 'blue' //填充颜色
+      })
+    })
+  })
+}
+
+//定义一个函数用于转换坐标
+let changeCoor = (coor) => transform(coor, 'EPSG:4326', 'EPSG:3857')
+
+export default shipStyle

src/util/message/index.ts

@@ -0,0 +1,45 @@
+import '../../../node_modules/toastr/toastr.scss'
+
+const toastr = require('../../../node_modules/toastr/toastr')
+toastr.options = {
+  closeButton: true,//显示关闭按钮
+  debug: false,
+  progressBar: true,//显示进度条
+  positionClass: "toast-top-right",//位置
+  onclick: null,//点击消息框自定义事件
+  showDuration: "300",//显示动作时间
+  hideDuration: "1000",//隐藏动作时间
+  timeOut: "2000",//显示时间,0为永久显示
+  extendedTimeOut: "1000",//鼠标移动过后显示显示时间
+  showEasing: "swing",
+  hideEasing: "linear",
+  showMethod: "fadeIn",//显示方式
+  hideMethod: "fadeOut"//隐藏方式
+}
+class MessageUtil {
+  /**
+   * 正常消息弹窗
+   * @param data
+   */
+  public static info (data: any) {
+    return toastr.info(data)
+  }
+
+  /**
+   * 警告消息弹窗
+   * @param data
+   */
+  public static warring (data: any) {
+    return toastr.warring(data)
+  }
+
+  /**
+   * 错误消息弹窗
+   * @param data
+   */
+  public static error (data: any) {
+    return toastr.error(data)
+  }
+}
+
+export default MessageUtil

src/util/mini/index.ts

@@ -0,0 +1,46 @@
+import Vue from 'vue'
+
+/**
+ * 最小化列表
+ */
+class MiniUtil {
+  /**
+   * 添加最小化内容
+   * @param data
+   */
+  public static addMini(data: any) {
+    Vue.prototype.$MiniList.push(data)
+  }
+
+  /**
+   * 删除最小化内容
+   * @param type
+   */
+  public static delMini(type: string) {
+    const list = Vue.prototype.$MiniList
+    if (list) {
+      list.forEach((item: any, index: any) => {
+        if (item.type === type) {
+          Vue.prototype.$MiniList.splice(index, 1)
+        }
+      })
+    }
+  }
+
+  /**
+   * 判断传入的类型是否最小化显示
+   * @param type
+   */
+  public static isHasMini(type: string) {
+    let data = false
+    const list = Vue.prototype.$MiniList
+    list.forEach((item: any) => {
+      if (item.type === type) {
+        data = true
+      }
+    })
+    return data
+  }
+}
+
+export default MiniUtil

src/util/new-dialog/index.ts

@@ -0,0 +1,128 @@
+import Vue from 'vue'
+import MiniUtil from '@/util/mini'
+import store from '@/store'
+import i18n from '@/util/translate'
+
+class DialogUtil {
+  public static showDialog(vueTemplate: any, vueName: string, data: any) {
+    const flag = MiniUtil.isHasMini(vueName)
+    if (flag) this.closeMini(vueName)
+    const showComponents = Vue.prototype.$showComponents
+    const compent = showComponents.get(vueName)
+    if (!compent) {
+      const MountComponent = Vue.extend(vueTemplate)
+      const vm = new MountComponent({
+        propsData: {
+          tempData: data
+        },
+        store,
+        i18n
+      })
+      const menug = vm.$data.menuGroup
+      if (menug) {
+        const group: Map<string, any> = Vue.prototype.$menuGroup
+        if (!group.has(menug)) {
+          group.set(menug, vueName)
+        } else {
+          this.closeCom(group.get(menug))
+          group.set(menug, vueName)
+        }
+      }
+      vm.$mount(document.createElement('div'));
+      (document.getElementById('ship-type-box') as HTMLElement).append(vm.$el)
+      showComponents.set(vueName, vm)
+    } else {
+      compent.$props.tempData = data
+      compent.$forceUpdate()
+    }
+  }
+
+  /**
+   * 查看组件是否显示
+   * @param vueName
+   */
+  public static isShow(vueName: string) {
+    const showComponents = Vue.prototype.$showComponents
+    const component = showComponents.get(vueName)
+    if (component) {
+      return component.$options.propsData.tempData.show
+    } else {
+      return false
+    }
+  }
+
+  /**
+   * 隐藏组件
+   * @param vueName 组件名称
+   */
+  public static hideCom(vueName: string) {
+    const showComponents = Vue.prototype.$showComponents
+    const component = showComponents.get(vueName)
+    if (component) {
+      component.$props.tempData.show = false
+      component.$forceUpdate()
+    }
+  }
+
+  /**
+   * 显示组件
+   * @param vueName 组件名称
+   */
+  public static showCom(vueName: string) {
+    const showComponents = Vue.prototype.$showComponents
+    const component = showComponents.get(vueName)
+    if (component) {
+      component.$props.tempData.show = true
+      component.$forceUpdate()
+    }
+  }
+
+  /**
+   * 添加最小化显示
+   * @param vueName
+   */
+  public static showMini(vueName: string) {
+    const showComponents = Vue.prototype.$showComponents
+    const component = showComponents.get(vueName)
+    MiniUtil.addMini({
+      type: vueName,
+      title: component.dialogConfig.header.title
+    })
+    this.hideCom(vueName)
+  }
+
+  /**
+   * 关闭最小化显示
+   * @param vueName
+   */
+  public static closeMini(vueName: string) {
+    MiniUtil.delMini(vueName)
+    this.closeCom(vueName)
+  }
+
+  /**
+   * 关闭销毁组件
+   * @param vueName
+   */
+  public static closeCom(vueName: string) {
+    const showComponents = Vue.prototype.$showComponents
+    const component = showComponents.get(vueName)
+    if (component) {
+      if (MiniUtil.isHasMini(vueName)) {
+        MiniUtil.delMini(vueName)
+      }
+      const el = component.$el
+      component.$refs[vueName].cancel()
+      el.parentElement.removeChild(el)
+      component.$destroy()
+      showComponents.delete(vueName)
+    }
+  }
+
+  public static getCom(vueName: string) {
+    const showComponents = Vue.prototype.$showComponents
+    return showComponents.get(vueName)
+  }
+}
+
+export default DialogUtil

src/util/store/index.ts

@@ -0,0 +1,107 @@
+import store from '@/store'
+
+class StoreUtil {
+  /**
+   * 设置地图实例
+   * @param data
+   */
+  public setMapInstance(data: any) {
+    store.commit('setMapInstance', data)
+  }
+
+  /**
+   * 设置地图封装方法
+   * @param data
+   */
+  public setMapFun(data: any) {
+    store.commit('setMapFun', data)
+  }
+
+  /**
+   * 获取地图封装方法
+   */
+  public getMapFun() {
+    return store.state.mapFun
+  }
+
+  /**
+   * 获取地图实例
+   */
+  public getMapInstance() {
+    return store.state.mapInstance
+  }
+
+  /**
+   * 设置目录
+   * @param data
+   */
+  public setDictionary(data: any) {
+    store.state.dictionary = data
+  }
+
+  /**
+   * 设置船舶信息
+   * @param data
+   */
+  public setShipData(data: any) {
+    store.state.ship = data
+  }
+
+  /**
+   * 设置船舶信息
+   * @param data
+   */
+  public setShipFleet(data: any) {
+    store.state.shipFleet = data
+  }
+
+  /**
+   * 获取国籍字典
+   */
+  public getCountry() {
+    const data: any = store.state.dictionary
+    if (data) {
+      return data.shipCountry
+    } else {
+      return null
+    }
+  }
+
+  /**
+   * 获取船舶类型字典
+   */
+  public getShipType() {
+    const data: any = store.state.dictionary
+    if (data) {
+      return data.shipType
+    } else {
+      return null
+    }
+  }
+
+  /**
+   * 获取船舶状态字典
+   */
+  public getShipStatus() {
+    const data: any = store.state.dictionary
+    if (data) {
+      return data.shipStatus
+    } else {
+      return null
+    }
+  }
+
+  /**
+   * 获取船舶状态字典
+   */
+  public getShipFleet() {
+    const data: any = store.state.shipFleet
+    if (data) {
+      return data
+    } else {
+      return null
+    }
+  }
+}
+
+export default new StoreUtil()

src/util/temp-interface/index.ts

@@ -0,0 +1,31 @@
+/**
+ *  FOLLOW_SHIP_FROM   添加分组组件名称
+ *
+ */
+export enum DialogType {
+  TRACK_RECORD = 'TrackRecordTemp', // 轨迹查询弹窗
+  TRACK_RECORD_LOG = 'TrackRecordLogTemp', // 轨迹记录弹窗
+  SEARCH_LIST = 'SearchListTemp', // 搜索记录
+  DATA_ANALYSIS = 'DataAnalysisTemp', // 数据分析
+  MAP_TOOL = 'MapToolTemp', // 地图工具
+  SHIP_RANKS = 'ShipRanksTemp', // 全部船队
+  WEATHER = 'WeatherTemp', // 海况天气
+  PORT_QUERY = 'PortQueryTemp', // 港口查询
+  ROUTE_QUERY = 'RouteQueryTemp', // 航线查询
+  SHIP_INFO = 'ShipInfoTemp', // 船舶信息
+  CAR_INFO = 'CarInfoTemp', // 车辆信息
+  PORT_OF_CALL = 'PortOfCallTemp', // 到离港记录
+  CONTAINER_QUERY = 'ContainerQueryTemp', // 集装箱查询
+  AREA_LIST = 'AreaListTemp', // 区域列表
+  MESSAGE_LIST = 'MessageListTemp', // 消息列表
+  ARRIVE_LEAVE_QUERY = 'ArriveLeaveQueryTemp', // 到港查询
+  DEPARTURE_INQUIRY = 'DepartureInquiryTemp', // 离港查询
+  EXPECTED_ARRIVAL = 'ExpectedArrivalTemp', // 预计到港
+  SHIP_EVENT = 'ShipEventTemp', // 船舶事件
+  NUMBER_OF_BERTHS = 'NumberOfBerthsTemp', // 在泊统计
+  POINT_POINT_RES = 'PointToPointResTemp', // 点到点结果显示
+  ROUTE_YC = 'RouteYcTemp', // 航线预测
+  SHIP_IN_BERTH = 'ShipInBerthTemp', // 泊位统计中详情显示船舶信息
+  NOTAN = 'NotanTemp', // 航行通告
+  WEATHER_IMG = 'WeatherImgTemp' // 台风图例
+}

src/util/tool/index.ts

@@ -0,0 +1,274 @@
+import Vue from 'vue'
+import store from '@/util/store'
+
+class SearchLog {
+  public addSearchLog(data: any) {
+    Vue.prototype.$SearchLog.push(data)
+  }
+}
+
+class shipUtil {
+
+  /**
+   * 通过船舶类型代码获取船舶类型
+   * @param data 船舶类型代码
+   */
+  public getShipType(data: any, en?: boolean) {
+    const shipTypes = store.getShipType()
+    if (shipTypes) {
+      const shipType = shipTypes.find((val: any) => {
+        return val.id === data
+      })
+      if (shipType) {
+        if (en) {
+          return shipType.valueEn
+        } else {
+          return shipType.valueChs
+        }
+      } else {
+        if (en) {
+          return 'Other'
+        } else {
+          return '其他类型'
+        }
+      }
+    }
+  }
+
+  public newGetShipType(shipTypeId: any, en?: boolean) {
+    if (shipTypeId === '30') {
+      return en ? 'Fishing vessel' : '渔船'
+    } else if (shipTypeId === '52') {
+      return en ? 'TUG' : '拖轮'
+    } else if (['31', '32', '33', '34', '53'].indexOf(shipTypeId) !== -1) {
+      return en ? 'Working ship' : '工程船'
+    } else if (shipTypeId === '37') {
+      return en ? 'Passenger' : '客船'
+    } else if (shipTypeId[0] === '6') {
+      return en ? 'Passenger' : '客船'
+    } else if (['35', '50', '51', '55', '58', '59'].indexOf(shipTypeId) !== -1) {
+      return en ? 'Official law enforcement ship' : '公务执法船'
+    } else if (shipTypeId[0] === '7') {
+      return en ? 'Cargo ship' : '货船'
+    } else if (shipTypeId[0] === '8') {
+      return en ? 'Tanker' : '油船'
+    } else {
+      return en ? 'Other' : '其他'
+    }
+  }
+
+  /**
+   * 通过mmsi的前3位获取船籍国
+   * @param data mmsi的前3位
+   */
+  public getShipCountryImg(data: any) {
+    const countries = store.getCountry()
+    if (countries) {
+      const country = countries.find((val: any) => {
+        return val.id === data
+      })
+      return country ? require(`../../../public/country-img/${country.valueAbbr}.png`) : require(`../../../public/country-img/undefined.png`)
+    }
+  }
+
+  /**
+   * 通过mmsi的前3位获取国家名称
+   * @param data mmsi的前3位
+   */
+  public getShipCountryImgName(data: any) {
+    const countries = store.getCountry()
+    if (countries) {
+      const country = countries.find((val: any) => {
+        return val.id === data
+      })
+      return country && country.valueEn ? country.valueEn : ''
+    }
+  }
+
+  /**
+   * 通过mmsi的前3位获取船籍字符
+   * @param data mmsi的前3位
+   */
+  public getShipCountryCode(data: any) {
+    const countries = store.getCountry()
+    if (countries) {
+      const country = countries.find((val: any) => {
+        return val.id === data
+      })
+      return country ? `${country.valueEn ? country.valueEn + '/' : ''}${country.valueChs ? country.valueChs : ''}` : 'undefined'
+    }
+  }
+
+  /**
+   * 通过mmsi的前3位获取船籍对象
+   * @param data mmsi的前3位
+   */
+  public getShipCountry(data: any) {
+    const countries = store.getCountry()
+    if (countries) {
+      const country = countries.find((val: any) => {
+        return val.id === data
+      })
+      return country || 'undefined'
+    }
+  }
+
+  /**
+   * 通过状态码获取船舶状态
+   * @param data
+   */
+  public getShipStatus(data: any, en?: boolean) {
+    const status = store.getShipStatus()
+    if (status) {
+      const sta = status.find((val: any) => {
+        return val.id === data + ''
+      })
+      if (sta) {
+        if (en) {
+          return sta.valueEn
+        } else {
+          return sta.valueChs
+        }
+      } else {
+        if (en) {
+          return 'undefined'
+        } else {
+          return '未知'
+        }
+      }
+      // return sta ? sta.valueChs : '未知'
+    }
+  }
+
+  /**
+   * 纬度格式化
+   * @param value
+   */
+  public filterLat(value: any) {
+    if (value === undefined || value === '' || value === null) {
+      return
+    }
+    let dData = 0
+    if (Math.abs(value) < 90) {
+      dData = Math.abs(value)
+    } else {
+      dData = Math.abs(value / 10000 / 60)
+    }
+    let isPlus = value > 0 ? 'N' : 'S'
+    let degree = parseInt(dData + '')
+    let min = parseInt((dData - degree) * 60 + '')
+    let sec = (((dData - degree) * 60 - min) * 60).toFixed(2)
+    return `${degree}°${min}′${sec}″${isPlus}`
+  }
+
+  /**
+   * 经度格式化
+   * @param value
+   */
+  public filterLon(value: any) {
+    if (value === undefined || value === '' || value === null) {
+      return
+    }
+    let dDate = 0
+    if (Math.abs(value) < 180) {
+      dDate = Math.abs(value)
+    } else {
+      dDate = Math.abs(value / 10000 / 60)
+    }
+    let isPlus = value > 0 ? 'E' : 'W'
+    let degree = parseInt(dDate + '')
+    let min = parseInt((dDate - degree) * 60 + '')
+    let sec = (((dDate - degree) * 60 - min) * 60).toFixed(2)
+    return `${degree}°${min}′${sec}″${isPlus}`
+  }
+
+  /**
+   * 时间格式化
+   * @param data
+   */
+  public formatDate(time: any, fmt: any) {
+    if (time === undefined || time === '' || time === null || time === 0) {
+      return
+    }
+    if (typeof time === 'string') {
+      return time
+    }
+    time = time * 1000
+    const date = new Date(time)
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    }
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'h+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds()
+    }
+    for (const k in o) {
+      if (new RegExp(`(${k})`).test(fmt)) {
+        // @ts-ignore
+        const str = o[k] + ''
+        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str))
+      }
+    }
+    return fmt
+  }
+
+  private padLeftZero(str: any) {
+    return ('00' + str).substr(str.length)
+  }
+}
+
+/**
+ * 最小化列表
+ */
+class MiniList {
+
+  /**
+   * 添加最小化内容
+   * @param data
+   */
+  public addMini(data: any) {
+    Vue.prototype.$MiniList.push(data)
+  }
+
+  /**
+   * 删除最小化内容
+   * @param index
+   */
+  public delMini(type: string) {
+    const list = Vue.prototype.$MiniList
+    if (list) {
+      list.forEach((item: any, index: any) => {
+        if (item.type === type) {
+          Vue.prototype.$MiniList.splice(index, 1)
+        }
+      })
+    }
+  }
+
+  /**
+   * 判断传入的类型是否最小化显示
+   * @param type
+   */
+  public isHasMini(type: string) {
+    let data: any = null
+    const list = Vue.prototype.$MiniList
+    list.forEach((item: any) => {
+      if (item.type === type) {
+        data = item.data
+      }
+    })
+    return data
+  }
+}
+
+const SearchLogUtil = new SearchLog()
+const ShipUtils = new shipUtil()
+const MiniUtils = new MiniList()
+export {
+  SearchLogUtil,
+  ShipUtils,
+  MiniUtils
+}

src/util/translate/index.ts

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import {Language} from "@/module/menu";
+
+// @ts-ignore
+import ElLocal from 'element-ui/lib/locale'
+// @ts-ignore
+import enLocale from 'element-ui/lib/locale/lang/en'
+// @ts-ignore
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+const langZH = require('./lang/zh.json')
+const langEn = require('./lang/en.json')
+Vue.use(VueI18n)
+const i18n = new VueI18n({
+  locale: 'zh',
+  messages: {
+    en: {
+      message: {
+        ...langEn
+      },
+      ...enLocale
+    },
+    zh: {
+      message: {
+        ...langZH
+      },
+      ...zhLocale
+    }
+  }
+})
+ElLocal.i18n((key: any, value: any) => i18n.t(key, value))
+const nowL = window.localStorage.getItem('language')
+if (nowL) {
+  i18n.locale = nowL
+} else {
+  window.localStorage.setItem('language', Language.zh)
+}
+
+export default i18n

src/util/translate/lang/en.json

@@ -0,0 +1,420 @@
+{
+  "search": {
+    "shipName": "Ship name",
+    "mmsi": "Mmsi",
+    "imo": "Imo",
+    "lastUpdated": "Update time",
+    "port": "Port",
+    "country": "Country",
+    "portName": "Port name",
+    "info": "Enter Ship",
+    "minutesAgo": "minutes ago",
+    "hoursAgo": "hours ago",
+    "daysAgo": "days ago"
+  },
+  "portHoverView": {
+    "chineseName": "Chinese name",
+    "englishName": "English name",
+    "portCode": "Port code",
+    "portPos": "Port coordinates"
+  },
+  "ShipHoverView": {
+    "shipName": "Ship name",
+    "mmsi": "Mmsi",
+    "lon": "Lon",
+    "lat": "Lat",
+    "time": "Time"
+  },
+  "TrackHoverView": {
+    "course": "Course",
+    "Speed": "Speed",
+    "time": "Time'"
+  },
+  "PortQuery": {
+    "arrive": "Arrived",
+    "leave": "Departured",
+    "yj": "Arriving",
+    "crude": "Crude oil port",
+    "portTitle": "Port",
+    "portNameC": "Port name(CN)",
+    "portNameE": "Port name(En)",
+    "countryOfPort": "Country of port",
+    "areaOfPort": "Area of port",
+    "portTimeZone": "Time zone",
+    "maximumDraftLimit": "Maximum draft limit",
+    "maximumDWTLimit": "Maximum dwt limit",
+    "maximumCaptainLimit": "Maximum captain limit",
+    "dryBulkFacilities": "Dry bulk facilities",
+    "breakBulkFacilities": "Break bulk facilities",
+    "containerFacilities": "Container facilities",
+    "roRoFacilities": "Roro facilities",
+    "passengerFacilities": "Passenger facilities",
+    "liquidFacilities": "Liquid facilities",
+    "lngFacilities": "LNG facilities",
+    "lpgFacilities": "LPG facilities",
+    "dryDockFacilities": "Dry dock facilities",
+    "freeTradeZone": "Free trade zone",
+    "berthTitle": "Berth",
+    "noText": "null",
+    "allShowBerth": "All berths",
+    "berthName": "Berth name",
+    "berthOperator": "Berth operator",
+    "berthType": "Berth type",
+    "berthStatus": "Berth status",
+    "facilityType": "Facility type",
+    "nightBerthing": "Night berthing",
+    "nightBerthingNote": "Night berthing note",
+    "nightUnberthing": "Night unberthing",
+    "shipLOAMax": "Ship loa max",
+    "shipLOAMin": "Ship loa min",
+    "shipLOANote": "Ship loa note",
+    "shipDwtMax": "Ship dwt max",
+    "shipDwtMin": "Ship dwt min",
+    "shipDWTNote": "Ship dwt note",
+    "shipDispMax": "Ship disp max",
+    "shipDispMin": "ship disp min",
+    "shipDispNote": "Ship disp note",
+    "shipBeamMax": "Ship beam max",
+    "berthDispMax": "Berth disp max",
+    "gTMax": "GT max",
+    "TEU": "Teu",
+    "totalPBLMin": "Total pbl min",
+    "manifoldBCMMax": "Manifold bcm max",
+    "manifoldBCMMin": "Manifold bcm min",
+    "manifoldSCMMax": "Manifold scm max",
+    "manifoldSCMMin": "Manifold scm min",
+    "manifoldHeightMax": "Manifold height max",
+    "manifoldHeightMin": "Manifold height min",
+    "derrickSWLMin": "Derrick swl min",
+    "wLMastheadHeightMax": "Wl masthead height max",
+    "manifoldPBLMinFwd": "Manifold pbl min fwd",
+    "manifoldPBLMinAft": "Manifold pbl min aft",
+    "manifoldUsed": "Manifold used",
+    "roRo": "Ro ro",
+    "passengerType": "Passenger",
+    "rampWidth": "Ramp width(m)",
+    "rampSWL": "Ramp swl（t）",
+    "breakBulk": "Break bulk",
+    "naval": "Naval",
+    "coastal": "Coastal",
+    "timberProducts": "Timber products",
+    "fishing": "Fishing",
+    "container": "Container",
+    "transhipment": "Transhipment",
+    "offshore": "Off shore",
+    "projectHeavy": "Project heavy",
+    "steelProducts": "Steel products",
+    "twinSpan": "Twin span",
+    "cranesNote": "Cranes note",
+    "allWeatherBerth": "All weather berth",
+    "coldIroning": "Cold ironing",
+    "sideAlongside": "Side alongside",
+    "bunkersHFO": "Bunkers hfo",
+    "deliveryHFO": "Delivery hfo",
+    "gangwayUsed": "Gangway used",
+    "bunkersDOGO": "Bunkers do go",
+    "mooringsFwd": "Moorings fwd",
+    "mooringsAft": "Moorings aft",
+    "bunkersLNG": "Bunkers lng",
+    "deliveryLNG": "Delivery lng",
+    "freshWater": "Fresh water",
+    "deliveryFW": "Delivery fw",
+    "cow": "Cow",
+    "berthAdditionalInfo": "Berth additional info",
+    "reefer": "Reefer",
+    "waterLineHeightHWMaxDecimal": "Water line height hw max decimal",
+    "dryBulkCargo": "Dry bulk cargo",
+    "weather": "Weather",
+    "temperature": "Temperature",
+    "windSpeed": "Wind speed",
+    "waveHeight": "Wave height",
+    "rush": "Rush",
+    "windDirection": "Wind direction",
+    "surgeHeight": "Surge height",
+    "visibility": "Visibility",
+    "dongTai": "DongTai",
+    "day": "Day",
+    "week": "Week",
+    "month": "Month",
+    "mao": "Mao",
+    "berth": "Berth",
+    "port": "Port",
+    "maoTime": "Mao time",
+    "doTime": "Do time",
+    "chooseBerth": "Choose berth"
+  },
+  "arriveLeave": {
+    "choosePort": "Place choose port",
+    "port": "Port",
+    "portCountry": "Country",
+    "startTime": "Start time",
+    "endTime": "End time",
+    "search": "Search",
+    "chooseShip": "Ship screening",
+    "etaStartChoose": "ETA start",
+    "etaEndChoose": "ETA end",
+    "screen": "Screening",
+    "choose": "Place choose",
+    "shipName": "Ship name",
+    "shipType": "Ship type",
+    "draught": "Draught",
+    "sog": "Sog",
+    "destPort": "Dest port",
+    "eta": "ETA",
+    "latestTime": "Update time",
+    "arrivalTime": "Arrival time",
+    "berthTime": "Berth time",
+    "leaveTime": "Leave time",
+    "shipLength": "LOA",
+    "flag": "Flag",
+    "lastPortName": "Last port name",
+    "nextPortName": "Next port name",
+    "lastOutTime": "Last port Dep",
+    "nextInTime": "Next in time",
+    "export": "Export"
+  },
+  "shipInfo": {
+    "shipYc": "Route calculate",
+    "mmsi": "mmsi",
+    "shipHeading": "Ship heading",
+    "callsign": "Callsign",
+    "shipCoursing": "Ship coursing",
+    "imo": "Imo",
+    "speed": "Speed",
+    "vesselType": "Vessel type",
+    "lat": "Lat",
+    "status": "Status",
+    "lon": "Lon",
+    "shipLength": "Length",
+    "destination": "Destination",
+    "breadth": "Breadth",
+    "draught": "Draught",
+    "eta": "ETA",
+    "lastUpdated": "Last updated",
+    "shipFlag": "Flag",
+    "onTheWay": "On the way",
+    "arrival": "Arrival",
+    "noHc": "null",
+    "shipDoc": "Ship archives",
+    "ExName": "Ex name",
+    "FlagName": "Flag name",
+    "DateOfBuild": "Date Of build",
+    "shiptypeLevel3": "Ship type",
+    "Length": "Length",
+    "Depth": "Depth",
+    "GrossTonnage": "Gross tonnage",
+    "NetTonnage": "Net tonnage",
+    "Deadweight": "Dead weight",
+    "speedService": "Speed service",
+    "mainEngineModel": "Main engine model",
+    "mainEngineType": "Main engine type",
+    "fuelType1First": "Fuel type",
+    "fuelType1Capacity": "Fuel type capacity",
+    "groupBeneficialOwner": "Group beneficial owner",
+    "operator": "Operator",
+    "registeredOwner": "Registered owner",
+    "docCompany": "Doc company",
+    "cargoCapacitiesNarrative": "Cargo capacities narrative",
+    "innerShip": "China ship data",
+    "sailAreaName": "Sail area name",
+    "shipNameEn": "Ship name(en)",
+    "shipGrosston": "Ship grosston",
+    "shipType": "Ship type",
+    "shipEnginePower": "Ship engine power",
+    "shipPassengerNum": "Ship passenger number",
+    "location": "Location",
+    "trackHistory": "Track history",
+    "portCalling": "Port calling",
+    "ais": "Ais",
+    "shipName": "Ship name",
+    "predictionEta": "ETA (prediction by AI)"
+  },
+  "trackRecord": {
+    "history": "History",
+    "moreHistory": "More history",
+    "noData": "null",
+    "voyageList": "Voyage list",
+    "startTime": "Start time",
+    "endTime": "End Time",
+    "c": "End time",
+    "delete": "Delete"
+  },
+  "portOfCall": {
+    "oneMonth": "1 month",
+    "threeMonth": "3 months",
+    "sixMonth": "6 months",
+    "twelveMonth": "12 months",
+    "port": "Port",
+    "arriveTime": "Arrive time",
+    "departureTime": "Departure time",
+    "stopTime": "Stop time",
+    "portCalling": "Port calling"
+  },
+  "searchList": {
+    "shipName": "Ship name",
+    "imo": "imo",
+    "mmsi": "mmsi",
+    "type": "type",
+    "shipLength": "Length",
+    "countryFlag": "Flag",
+    "draught": "Draught",
+    "speed": "Speed",
+    "destination": "Destination"
+  },
+  "mapTool": {
+    "measureTool": "Measure tool",
+    "measureDistance": "Measure distance",
+    "measureArea": "Measure area",
+    "drawingArea": "Drawing area",
+    "shape": "Shape"
+  },
+  "weather": {
+    "reset": "Reset",
+    "marineWeather": "Marine weather",
+    "temperature": "Temperature",
+    "airPressure": "Air pressure",
+    "wind": "Wind",
+    "current": "Current",
+    "typhoon": "Typhoon",
+    "legend": "Legend",
+    "typhoonList": "Typhoon List",
+    "view": "View",
+    "close": "Close"
+  },
+  "routeQuery": {
+    "pol": "POL",
+    "pod": "POD",
+    "search": "Search",
+    "duration": "Voyage duration",
+    "mileage": "Mileage",
+    "averageSpeed": "Average speed",
+    "full": "Full",
+    "empty": "empty",
+    "origin": "origin",
+    "destination": "destination",
+    "port": "port",
+    "portToPort": "Port To Port",
+    "pointToPoint": "Point to Point",
+    "inputLon": "Enter longitude",
+    "inputLat": "Enter latitude",
+    "inputLonLatLong": "Please enter longitude and latitude, with longitude before latitude and then after latitude, separated by spaces, and multiple latitudes separated by commas",
+    "query": "Query",
+    "pointRoute": "Point to Point Route",
+    "route": "Route",
+    "voyageDistance": "Voyage Distance[nm]",
+    "timeInPort": "Time in Port",
+    "arrivePortTime": "Arrive Port Time",
+    "amount": "Amount",
+    "totalTime": "Total Time"
+  },
+  "messageList": {
+    "status": "Status",
+    "arrival": "Arrival",
+    "leave": "Leave",
+    "shipName": "Ship name",
+    "port": "Port",
+    "startTime": "Time",
+    "messageStatistics": "Message statistics",
+    "messageDetails": "Message details",
+    "arrive": "Arrival",
+    "leave2": "Leave",
+    "details": "Details"
+  },
+  "menu": {
+    "TrackRecordLogTemp": "Voyage history",
+    "AreaListTemp": "Area list",
+    "PortToPortTemp": "Port to port",
+    "SearchListTemp": "Search history",
+    "DataAnalysisTemp": "Data analysis",
+    "MapToolTemp": "Map selection",
+    "ShipRanksTemp": "My fleets",
+    "WeatherTemp": "Marine weather",
+    "RouteQueryTemp": "Voyage",
+    "ContainerQueryTemp": "Container module",
+    "portInfo": "Port Info",
+    "ArriveLeaveQueryTemp": "Arrived",
+    "DepartureInquiryTemp": "Departured",
+    "ExpectedArrivalTemp": "Arriving",
+    "crudeOilPort": "Crude oil port",
+    "messageList": "Message list",
+    "NumberOfBerthsTemp": "Ships at berths"
+  },
+  "fleets": {
+    "location": "Location",
+    "vc": "Show/Hide",
+    "total": "Total"
+  },
+  "containerQuery": {
+    "containerQuery": "Container code query",
+    "billOfLading": "Bill of lading",
+    "containerBoxNumber": "Number",
+    "tdCode": "Bol number",
+    "isoCode": "Iso code",
+    "containerPosName": "Container pos name",
+    "eventDescription": "Description",
+    "eventStatus": "Status",
+    "eventDate": "Date",
+    "eventActual": "Actual",
+    "eventType": "Type",
+    "vesselsName": "Name",
+    "eventVoyage": "Voyage",
+    "vesselCompliance": "Vessel compliance",
+    "eventlocationCompliance": "Location compliance",
+    "route": "Route"
+  },
+  "areaList": {
+    "shipStatistics": "Ship statistics",
+    "shipFlagStatistics": "Ship flag statistics",
+    "shipList": "Ship list",
+    "shipType": "Type",
+    "shipFlag": "Ship flag",
+    "shipLength": "Length",
+    "select": "Select",
+    "type": "Type",
+    "nationality": "Nationality",
+    "draft": "Draft",
+    "sog": "Sog",
+    "destPort": "Dest port",
+    "shipName": "Ship name",
+    "all": "All"
+  },
+  "allPort": "View all port",
+  "closeAllPort": "Close all port",
+  "shipEvent": {
+    "shipEvent": "Latest Event",
+    "eventName": "Event name",
+    "time": "Time",
+    "describe": "Describe",
+    "seaArea": "Sea area",
+    "screenPlaceholder": "Screen event name",
+    "oneMonth": "Last month",
+    "threeMonth": "Last three months",
+    "sixMonth": "Last six months",
+    "sevenDay": "Last seven days"
+  },
+  "NumberOfBerthsTemp": {
+    "portName": "Port name",
+    "numberOfBerth": "Number of berths",
+    "operationDuration": "Operation duration",
+    "numberOfMao": "Number of mooring",
+    "mooringDuration": "Mooring duration",
+    "numberOfLeave": "Number of leave",
+    "operate": "operate"
+  },
+  "typhoon": {
+    "name": "Name",
+    "start": "Start time",
+    "end": "End time",
+    "operate": "Operate"
+  },
+  "routeCalculate": {
+    "destination": "Destination",
+    "speed": "Speed",
+    "search": "Search",
+    "rd": "Remaining Distance（nm）",
+    "td": "Travelled Distance(nm)",
+    "remainder": "Remainder(h)",
+    "tt": "Traveled Time（h）"
+  }
+}
+

src/util/translate/lang/zh.json

@@ -0,0 +1,420 @@
+{
+  "search": {
+    "shipName": "船名",
+    "mmsi": "MMSI",
+    "imo": "imo",
+    "lastUpdated": "更新时间",
+    "port": "港口",
+    "country": "国家",
+    "portName": "港口名称",
+    "info": "船舶",
+    "minutesAgo": "分钟前",
+    "hoursAgo": "小时前",
+    "daysAgo": "天前"
+  },
+  "portHoverView": {
+    "chineseName": "中文名称",
+    "englishName": "英文名称",
+    "portCode": "港口代码",
+    "portPos": "港口坐标"
+  },
+  "ShipHoverView": {
+    "shipName": "船名",
+    "mmsi": "MMSI",
+    "lon": "经度",
+    "lat": "纬度",
+    "time": "时间"
+  },
+  "TrackHoverView": {
+    "course": "航向",
+    "Speed": "航速",
+    "time": "时间'"
+  },
+  "PortQuery": {
+    "arrive": "到港查询",
+    "leave": "离港查询",
+    "yj": "预计到港",
+    "yy-": "预计到港",
+    "portTitle": "港口信息",
+    "portNameC": "港口名称(CN)",
+    "portNameE": "港口名称(EN)",
+    "countryOfPort": "港口所属国家",
+    "areaOfPort": "港口所属区域",
+    "portTimeZone": "时区",
+    "maximumDraftLimit": "最大吃水限制",
+    "maximumDWTLimit": "最大DWT限制",
+    "maximumCaptainLimit": "最大船长限制",
+    "dryBulkFacilities": "是否有干散货装卸设施",
+    "breakBulkFacilities": "是否有件杂货散货装卸设施",
+    "containerFacilities": "是否有集装箱装卸设施",
+    "roRoFacilities": "是否有滚装货物装卸设施",
+    "passengerFacilities": "是否有旅客登离设施",
+    "liquidFacilities": "是否有液货装卸设施",
+    "lngFacilities": "是否有液化天然气装卸设施",
+    "lpgFacilities": "是否有液化石油气装卸设施",
+    "dryDockFacilities": "是否有干船坞设施",
+    "freeTradeZone": "是否有自由贸易试验区",
+    "berthTitle": "泊位信息",
+    "noText": "无匹配数据",
+    "allShowBerth": "全部显示",
+    "berthName": "泊位名称",
+    "berthOperator": "泊位操作公司",
+    "berthType": "泊位类型",
+    "berthStatus": "泊位状态",
+    "facilityType": "泊位设施类型",
+    "nightBerthing": "夜间靠泊限制",
+    "nightBerthingNote": "夜间靠泊标准",
+    "nightUnberthing": "夜间离泊限制",
+    "shipLOAMax": "泊位最大船长",
+    "shipLOAMin": "泊位最小船长",
+    "shipLOANote": "允许靠泊船长标准说明",
+    "shipDwtMax": "泊位最大载重吨",
+    "shipDwtMin": "泊位最小载重吨",
+    "shipDWTNote": "允许靠泊船舶载重吨标准",
+    "shipDispMax": "泊位最大排水量",
+    "shipDispMin": "泊位最小排水量",
+    "shipDispNote": "允许靠泊船舶排水量标准",
+    "shipBeamMax": "泊位最大船宽",
+    "berthDispMax": "泊位对排水量的标准",
+    "gTMax": "泊位总吨最大限制",
+    "TEU": "泊位载箱量最大限制",
+    "totalPBLMin": "泊位最小平行体长",
+    "manifoldBCMMax": "最大船艏至集管中心距",
+    "manifoldBCMMin": "最小船艏至集管中心距",
+    "manifoldSCMMax": "最大船尾至集管中心距",
+    "manifoldSCMMin": "最小船尾至集管中心距",
+    "manifoldHeightMax": "总管距离水线最大高度",
+    "manifoldHeightMin": "总管距离水线最小高度",
+    "derrickSWLMin": "泊位起重机安全工作载荷",
+    "wLMastheadHeightMax": "水线上最大安全高度",
+    "manifoldPBLMinFwd": "允许的总管至船头最小平行长度",
+    "manifoldPBLMinAft": "允许的总管至船尾最小平行长度",
+    "manifoldUsed": "集管装卸使用位置",
+    "roRo": "泊位装卸滚装货物的类型",
+    "passengerType": "泊位登离旅客的类型",
+    "rampWidth": "滚装坡道宽度（米）",
+    "rampSWL": "滚装坡道安全工作载荷（吨）",
+    "breakBulk": "泊位是否能接收散货",
+    "naval": "泊位是否能接收海军舰艇补给",
+    "coastal": "泊位是否能接收海巡船舶",
+    "timberProducts": "泊位是否能接收木材货物",
+    "fishing": "泊位是否能接收渔船停靠",
+    "container": "泊位是否能接收集装箱货物",
+    "transhipment": "泊位是否能接收中转运输",
+    "offshore": "泊位是否能接收海上支援供应船舶",
+    "projectHeavy": "泊位是否能接收重型、大件货物",
+    "steelProducts": "泊位是否能接收钢铁及其制品",
+    "twinSpan": "是否有双千斤吊货锁",
+    "cranesNote": "泊位起重机类型",
+    "allWeatherBerth": "是否为全天候泊位",
+    "coldIroning": "泊位是否有岸电供使用",
+    "sideAlongside": "船舶停靠舷边限制",
+    "bunkersHFO": "泊位是否有船用HFO供应",
+    "deliveryHFO": "HFO加装方式",
+    "gangwayUsed": "使用舷梯方式",
+    "bunkersDOGO": "泊位是否有船用DO,GO供应",
+    "mooringsFwd": "泊位前系泊装置类型",
+    "mooringsAft": "泊位后系泊装置类型",
+    "bunkersLNG": "泊位是否有船用LNG供应",
+    "deliveryLNG": "LNG加装方式",
+    "freshWater": "泊位是否有船用淡水供应",
+    "deliveryFW": "淡水加装方式",
+    "cow": "泊位是否允许在排油期间对油罐进行原油洗舱",
+    "berthAdditionalInfo": "泊位额外使用说明",
+    "reefer": "泊位是否能接收冷藏货物",
+    "waterLineHeightHWMaxDecimal": "水线到舱盖板顶部最大距离",
+    "dryBulkCargo": "泊位是否能接收杂件货物",
+    "weather": "天气",
+    "temperature": "温度",
+    "windSpeed": "风速",
+    "waveHeight": "浪高",
+    "rush": "涌向",
+    "windDirection": "风向",
+    "surgeHeight": "涌高",
+    "visibility": "能见度",
+    "dongTai": "动态",
+    "day": "天",
+    "week": "周",
+    "month": "月",
+    "mao": "锚地情况",
+    "berth": "泊位情况",
+    "port": "港口情况",
+    "maoTime": "锚泊时间",
+    "doTime": "作业时长",
+    "chooseBerth": "选择泊位",
+    "crude": "原油港口"
+  },
+  "arriveLeave": {
+    "choosePort": "请选择港口信息",
+    "port": "港口",
+    "portCountry": "国家",
+    "startTime": "开始时间",
+    "endTime": "结束时间",
+    "search": "搜索",
+    "chooseShip": "船舶查询",
+    "etaStartChoose": "ETA开始",
+    "etaEndChoose": "ETA结束",
+    "screen": "筛选",
+    "choose": "请选择",
+    "shipName": "船名",
+    "shipType": "类型",
+    "draught": "吃水",
+    "sog": "船速",
+    "destPort": "目的地",
+    "eta": "预到时间",
+    "latestTime": "最新时间",
+    "arrivalTime": "到港时间",
+    "berthTime": "靠泊时间",
+    "leaveTime": "离港时间",
+    "shipLength": "船长",
+    "flag": "船旗",
+    "lastPortName": "上一港",
+    "nextPortName": "下一港",
+    "lastOutTime": "离开上一港时间",
+    "nextInTime": "到达下一港时间",
+    "export": "导出"
+  },
+  "shipInfo": {
+    "shipYc": "航线预测",
+    "mmsi": "mmsi",
+    "shipHeading": "船艏向",
+    "callsign": "呼号",
+    "shipCoursing": "船航向",
+    "imo": "imo",
+    "speed": "船速",
+    "vesselType": "类型",
+    "lat": "纬度",
+    "status": "状态",
+    "lon": "经度",
+    "shipLength": "船长",
+    "destination": "目的地",
+    "breadth": "船宽",
+    "draught": "吃水",
+    "eta": "预计到港",
+    "lastUpdated": "更新时间",
+    "shipFlag": "船旗",
+    "onTheWay": "在途",
+    "arrival": "到港",
+    "noHc": "暂无航次",
+    "shipDoc": "船舶档案",
+    "ExName": "曾用名",
+    "FlagName": "船旗国",
+    "DateOfBuild": "建造年份",
+    "shiptypeLevel3": "船舶类型",
+    "Length": "船长",
+    "Depth": "深度",
+    "GrossTonnage": "总吨",
+    "NetTonnage": "净吨",
+    "Deadweight": "载重吨",
+    "speedService": "经济航速",
+    "mainEngineModel": "主机型号",
+    "mainEngineType": "主机类型",
+    "fuelType1First": "燃料",
+    "fuelType1Capacity": "燃料类型1容量",
+    "groupBeneficialOwner": "船舶受益所有公司",
+    "operator": "船舶操作公司",
+    "registeredOwner": "注册所有公司",
+    "docCompany": "DOC公司",
+    "cargoCapacitiesNarrative": "货物类型描述",
+    "innerShip": "内贸船档案",
+    "sailAreaName": "航区",
+    "shipNameEn": "英文船名",
+    "shipGrosston": "船舶总吨位",
+    "shipType": "船型",
+    "shipEnginePower": "主机功率",
+    "shipPassengerNum": "船舶客位(个)",
+    "location": "定位",
+    "trackHistory": "轨迹查询",
+    "portCalling": "挂靠港记录",
+    "ais": "AIS信息",
+    "shipName": "船名",
+    "predictionEta": "计算ETA"
+  },
+  "trackRecord": {
+    "history": "查询",
+    "moreHistory": "高级查询",
+    "noData": "暂无数据",
+    "voyageList": "轨迹列表",
+    "startTime": "开始时间",
+    "endTime": "结束时间",
+    "delete": "清除"
+  },
+  "portOfCall": {
+    "oneMonth": "1个月",
+    "threeMonth": "3个月",
+    "sixMonth": "6个月",
+    "twelveMonth": "12个月",
+    "port": "港口",
+    "arriveTime": "到港时间",
+    "departureTime": "离港时间",
+    "stopTime": "停时",
+    "portCalling": "挂靠港记录"
+  },
+  "searchList": {
+    "shipName": "船名",
+    "imo": "imo",
+    "mmsi": "mmsi",
+    "type": "类型",
+    "shipLength": "船长",
+    "countryFlag": "国籍",
+    "draught": "吃水",
+    "speed": "船速",
+    "destination": "目的地"
+  },
+  "mapTool": {
+    "measureTool": "测量工具",
+    "measureDistance": "测距离",
+    "measureArea": "测面积",
+    "drawingArea": "绘制区域",
+    "shape": "形状"
+  },
+  "weather": {
+    "reset": "重置",
+    "marineWeather": "海况天气",
+    "temperature": "温度",
+    "airPressure": "气压",
+    "wind": "风场",
+    "current": "洋流",
+    "typhoon": "台风",
+    "legend": "图例",
+    "typhoonList": "台风列表",
+    "view": "查看",
+    "close": "关闭"
+  },
+  "routeQuery": {
+    "pol": "起始港",
+    "pod": "目的港",
+    "search": "搜索",
+    "duration": "航时",
+    "mileage": "航行里程",
+    "averageSpeed": "平均航速",
+    "full": "满",
+    "empty": "空",
+    "origin": "起始港",
+    "destination": "目的港",
+    "port": "港口",
+    "portToPort": "港到港",
+    "pointToPoint": "点到点",
+    "inputLon": "请输入经度",
+    "inputLat": "请输入纬度",
+    "inputLonLatLong": "请输入经纬度，经度在前纬度在后，经纬度之间用空格隔开，多个经纬度之间用逗号间隔",
+    "query": "Query",
+    "pointRoute": "点到点航线",
+    "route": "航线",
+    "voyageDistance": "航程[nm]",
+    "timeInPort": "在港时间",
+    "arrivePortTime": "到港时间",
+    "amount": "合计",
+    "totalTime": "用时"
+  },
+  "messageList": {
+    "status": "状态",
+    "arrival": "到达区域",
+    "leave": "离开区域",
+    "shipName": "船名",
+    "port": "港口名称",
+    "startTime": "开始时间",
+    "messageStatistics": "消息统计",
+    "messageDetails": "消息详情",
+    "arrive": "到达",
+    "leave2": "离开",
+    "details": "详情"
+  },
+  "menu": {
+    "TrackRecordLogTemp": "轨迹记录",
+    "AreaListTemp": "区域列表",
+    "PortToPortTemp": "港间距",
+    "SearchListTemp": "搜索记录",
+    "DataAnalysisTemp": "数据分析",
+    "MapToolTemp": "地图工具",
+    "ShipRanksTemp": "我的船队",
+    "WeatherTemp": "海况天气",
+    "RouteQueryTemp": "航线查询",
+    "ContainerQueryTemp": "集装箱查询",
+    "portInfo": "港口信息",
+    "ArriveLeaveQueryTemp": "到港查询",
+    "DepartureInquiryTemp": "离港查询",
+    "ExpectedArrivalTemp": "预计到港",
+    "crudeOilPort": "原油港口",
+    "messageList": "消息列表",
+    "NumberOfBerthsTemp": "在泊统计"
+  },
+  "fleets": {
+    "location": "定位",
+    "vc": "显示/隐藏",
+    "total": "共"
+  },
+  "containerQuery": {
+    "containerQuery": "集装箱号查询",
+    "billOfLading": "提单号查询",
+    "containerBoxNumber": "集装箱编号",
+    "tdCode": "提单编号",
+    "isoCode": "集装箱ISO代码",
+    "containerPosName": "集装箱位置",
+    "eventDescription": "描述",
+    "eventStatus": "状态",
+    "eventDate": "时间",
+    "eventActual": "actual",
+    "eventType": "类型",
+    "vesselsName": "船舶名称",
+    "eventVoyage": "voyage",
+    "vesselCompliance": "vesselCompliance",
+    "eventlocationCompliance": "locationCompliance",
+    "route": "航线相关"
+  },
+  "areaList": {
+    "shipStatistics": "船舶统计",
+    "shipFlagStatistics": "船旗统计",
+    "shipList": "船舶列表",
+    "shipType": "船型",
+    "shipFlag": "船籍",
+    "shipLength": "船长",
+    "select": "筛选",
+    "type": "类型",
+    "nationality": "国籍",
+    "draft": "吃水",
+    "sog": "船速",
+    "destPort": "目的地",
+    "shipName": "船名",
+    "all": "全部"
+  },
+  "shipEvent": {
+    "shipEvent": "船舶事件",
+    "eventName": "事件名称",
+    "time": "时间",
+    "describe": "事件描述",
+    "seaArea": "所处海区",
+    "screenPlaceholder": "事件名称筛选",
+    "oneMonth": "最近一个月",
+    "threeMonth": "最近三个月",
+    "sixMonth": "最近六个月",
+    "sevenDay": "最近七天"
+  },
+  "allPort": "显示全部港口",
+  "closeAllPort": "关闭全部港口",
+  "NumberOfBerthsTemp": {
+    "portName": "港口名称",
+    "numberOfBerth": "在泊船舶数量",
+    "operationDuration": "作业时长",
+    "numberOfMao": "在锚船舶数量",
+    "mooringDuration": "锚泊时长",
+    "numberOfLeave": "离泊数量",
+    "operate": "操作"
+  },
+  "typhoon": {
+    "name": "名称",
+    "start": "开始时间",
+    "end": "结束时间",
+    "operate": "操作"
+  },
+  "routeCalculate": {
+    "destination": "目的地",
+    "speed": "航速",
+    "search": "搜索",
+    "rd": "剩余里程（海里）",
+    "td": "已行驶里程（海里）",
+    "remainder": "剩余时间（小时）",
+    "tt": "已行驶时间（小时）"
+  }
+}
+

src/util/vue-global/index.ts

@@ -0,0 +1,47 @@
+import Vue from 'vue'
+
+Vue.prototype.$SearchLog = []
+Vue.prototype.$fleetList = []
+Vue.prototype.$originAllShipRankList = []
+Vue.prototype.$sourceShips = []
+Vue.prototype.$MessageInfo = []
+Vue.prototype.$showComponents = new Map<string, any>() // 显示的组件
+Vue.prototype.$MiniList = [] // 最小化列表
+Vue.prototype.$HistoryLog = [] // 轨迹记录
+Vue.prototype.$menuGroup = new Map<string, any>() // 菜单分组
+
+let localStorageMock = (function (win) {
+  let storage = win.localStorage;
+  return {
+    setItem: function (key: any, value: any) {
+      let setItemEvent: any = new Event("setItemEvent");
+      let oldValue = storage[key];
+      setItemEvent.key = key;
+      // 新旧值深度判断，派发监听事件
+      if (oldValue !== value) {
+        setItemEvent.newValue = value;
+        setItemEvent.oldValue = oldValue;
+        win.dispatchEvent(setItemEvent);
+        storage[key] = value;
+        return true;
+      }
+      return false;
+    },
+    getItem: function (key: any) {
+      return storage[key];
+    },
+    removeItem: function (key: any) {
+      storage[key] = null;
+      return true;
+    },
+    clear: function () {
+      storage.clear();
+      return true;
+    },
+    key: function (index: any) {
+      return storage.key(index);
+    }
+  };
+}(window));
+
+Object.defineProperty(window, 'localStorage', {value: localStorageMock, writable: true});

src/views/index-c.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="../../node_modules/vxe-table/lib/style.css" type="text/css"/>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+</head>
+<body>
+<script>
+    axios.get('../../node_modules/vxe-table/lib/style.css').then((res) => {
+        function pxAndRemInterturn({content, unit, rule, updateUnit}) {
+            console.log(content)
+            rule = rule || 100
+            if (!rule) return content;
+            const reg = {
+                px: /[\:]*[\s]*[-]*[\s]*[0-9]*[\.]*[0-9]*px/g,
+                rem: /[\:]*[\s]*[-]*[\s]*[0-9]*[\.]*[0-9]*rem/g,
+                number: /[0-9]*[\.]*[0-9]*/g
+            }
+            // 获取到所有匹配的内容
+            const res = content.match(reg[unit])
+
+            // 传进来的是正则匹配的结构内容
+            function getRightData(arr) {
+                const result = []
+                for (let i = 0; i < arr.length; i++) {
+                    result.push(Number(arr[i].replace(new RegExp(' ', "gm"), '').replace(':', '').replace(unit, '')))
+                }
+                return result
+            }
+
+            const rightData = getRightData(res)
+
+            // 单位换算
+            function unitConversion({num, unit, updateUnit, rule}) {
+                let res = ''
+                if (unit === 'px' && updateUnit === 'rem') {
+                    res = num / rule
+                } else if (unit === 'rem' && updateUnit === 'px') {
+                    res = num * rule
+                }
+                return ' ' + res + updateUnit
+            }
+
+            for (let i = 0; i < rightData.length; i++) {
+                let txt = unitConversion({
+                    num: rightData[i],
+                    unit,
+                    updateUnit,
+                    rule
+                })
+                if (res[i].indexOf(':') >= 0) {
+                    txt = ': ' + txt
+                }
+                content = content.replace(res[i], txt)
+            }
+            return content
+        }
+
+        const updateContent = pxAndRemInterturn({
+            content: res.data,
+            unit: 'px',
+            rule: 16,
+            updateUnit: 'rem'
+        })
+        document.querySelector('body').innerHTML = updateContent
+    })
+
+</script>
+</body>
+</html>

src/views/layout/Layout.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="myShips-layout">
+    <el-container>
+<!--      <el-header>-->
+<!--        <Header></Header>-->
+<!--      </el-header>-->
+      <el-container>
+<!--        <el-aside id="el-aside" style="width: 15.625rem">-->
+<!--          <div class="shrink-btn" id="shrink-btn" @click="shrink">{{ isShrink ? "《" : "》" }}</div>-->
+<!--          <Search></Search>-->
+<!--          <Menu bg="rgb(44, 70, 155)" color="#ffffff"></Menu>-->
+<!--        </el-aside>-->
+        <el-main>
+          <Main></Main>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from 'vue-property-decorator'
+import Header from '@/components/header/index.vue'
+import Search from "@/components/search/index.vue"
+import Menu from '@/components/menu/index.vue'
+import Main from '@/views/main/Main.vue'
+import $ from 'jquery'
+
+@Component({
+  components: {
+    Header,
+    Search,
+    Menu,
+    Main
+  }
+})
+export default class Layout extends Vue {
+  private isShrink = true // 是否展开 true 是展开 false 是收缩
+
+  private shrink() {
+    this.isShrink = !this.isShrink
+    if (this.isShrink) {
+      $('#el-aside').animate({width: '15.625rem'}, 450);
+      $('#shrink-btn').animate({left: '15.625rem'}, 450);
+    } else {
+      $('#el-aside').animate({width: '0'}, 450);
+      $('#shrink-btn').animate({left: '0'}, 450);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.myShips-layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  ::v-deep .el-main {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .shrink-btn {
+    width: 1.875rem !important;
+    height: 3.125rem !important;
+    border-radius: 0 0.625rem 0.625rem 0 !important;
+    position: absolute;
+    left: 15.625rem;
+    z-index: 2 !important;
+    top: 50% !important;
+    background-color: rgba(255, 255, 255, 0.6);
+    font-size: 1.25rem !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    color: rgba(3, 3, 3, 0.5);
+
+    &:hover {
+      cursor: pointer !important;
+    }
+  }
+}
+</style>

src/views/main/Main.vue

@@ -0,0 +1,444 @@
+<template>
+  <div class="my-ships-main" id="map">
+    <!--气象点击显示内容-->
+    <OnClickWeather></OnClickWeather>
+    <!--   港口鼠标悬浮显示内容   -->
+    <PortHoverView></PortHoverView>
+    <!--船舶鼠标悬浮时显示信息-->
+    <ShipHoverView></ShipHoverView>
+    <!--    地图底部船舶类型备注框-->
+    <MapBottomShipType></MapBottomShipType>
+    <!--    地图底部鼠标位置经纬度显示-->
+    <MapBottomMousePos></MapBottomMousePos>
+    <!--    弹窗最小化-->
+    <MiniBox></MiniBox>
+    <!--    船舶轨迹鼠标悬浮时显示信息-->
+    <TrackHoverView></TrackHoverView>
+    <!--    消息列表循环滚动展示-->
+    <realTimeInfo></realTimeInfo>
+    <!--  显示全部港口  -->
+    <ViewAllPort></ViewAllPort>
+  </div>
+</template>
+
+<script lang="ts">
+import ShipFun from '@/util/map/map.js'
+import {Component, Vue} from 'vue-property-decorator'
+import storeUtil from '@/util/store'
+import OnClickWeather from "@/components/on-map-view/OnClickWeather.vue";
+import PortHoverView from "@/components/on-map-view/PortHoverView.vue";
+import ShipHoverView from "@/components/on-map-view/ShipHoverView.vue";
+import MapBottomShipType from "@/components/on-map-view/MapBottomShipType.vue";
+import MapBottomMousePos from "@/components/on-map-view/MapBottomMousePos.vue";
+import MiniBox from "@/components/on-map-view/MiniBox.vue";
+import TrackHoverView from "@/components/on-map-view/TrackHoverView.vue";
+import realTimeInfo from "@/components/real-time-info/realTimeInfo.vue";
+import HttpApi from "@/api";
+import DialogUtil from "@/util/new-dialog";
+import PortQueryTemp from '../new-dialog/PortQueryTemp.vue';
+import {DialogType} from '@/util/temp-interface';
+import {SearchLogUtil} from "@/util/tool";
+import bus from '@/util/bus';
+import ShipInfoTemp from '../new-dialog/ShipInfoTemp.vue';
+import CarInfoTemp from '../new-dialog/CarInfoTemp.vue';
+import ViewAllPort from "@/components/on-map-view/ViewAllPort.vue";
+import {Style} from 'ol/style.js'
+import Icon from 'ol/style/Icon'
+import styleText from 'ol/style/Text' //添加文字标注
+import styleFill from 'ol/style/Fill' //添加填充样式
+import styleStroke from 'ol/style/Stroke' //添加填充样式
+
+const warningImg = require('../../util/map/img/shipWarningIcon.png') 
+const config = require('../../../public/config/sys-config.json')
+const elementResizeDetectorMaker = require("element-resize-detector")
+
+@Component({
+  components: {
+    OnClickWeather,
+    PortHoverView,
+    ShipHoverView,
+    MapBottomShipType,
+    MapBottomMousePos,
+    MiniBox,
+    TrackHoverView,
+    realTimeInfo,
+    ViewAllPort
+  }
+})
+export default class Main extends Vue {
+  private map: any
+
+  private shipData = []
+  private carData = []
+  private async getShips() {
+    const ships: any = []
+    await HttpApi.getShipRanks({}).then((res: any) => {
+      res.forEach((item: any) => {
+        if (item.idw !== -1 && item.followShipList && item.followShipList.length) {
+          item.followShipList.forEach(async (item2: any) => {
+            item2.groupName = item.name;
+            item2.color = item.color;
+            ships.push(item2)
+          })
+        }
+      })
+    })
+
+    const shipIds: any[] = []
+    for (let i = 0; i < ships.length; i++) {
+      shipIds.push(ships[i].shipId)
+    }
+    if (shipIds.length <= 100) {
+      await HttpApi.getShipMessage({shipId: shipIds.toString()}).then((res: any[]) => {
+        for (let i = 0; i < ships.length; i++) {
+          res.forEach((item: any) => {
+            if (ships[i].shipId === item.shipId) {
+              Object.keys(item).forEach((key) => {
+                ships[i][key] = item[key]
+              })
+            }
+          })
+        }
+      })
+    } else {
+      const p: any[] = []
+      const idGroup = this.spArray(shipIds, 100);
+      for (let i = 0; i < idGroup.length; i++) {
+        const ids = idGroup[i];
+        p.push(new Promise((resolve) => {
+          HttpApi.getShipMessage({shipId: ids.toString()}).then((res) => {
+            resolve(res)
+          })
+        }))
+      }
+
+      const newGetShips: any[] = []
+      await Promise.all(p).then((res) => {
+        for (let i = 0; i < res.length; i++) {
+          const shipG: any[] = res[i];
+          for (let j = 0; j < shipG.length; j++) {
+            newGetShips.push(shipG[j])
+          }
+        }
+      })
+
+      for (let i = 0; i < ships.length; i++) {
+        newGetShips.forEach((item: any) => {
+          if (ships[i].shipId === item.shipId) {
+            Object.keys(item).forEach((key) => {
+              ships[i][key] = item[key]
+            })
+          }
+        })
+      }
+    }
+    this.shipData = ships
+    this.jiexiRanks(ships);
+    storeUtil.setShipFleet(ships);
+    // this.setShipWarning(ships);
+  }
+  private getCars() {
+    const carData: any = []
+    HttpApi.getCarInfo().then((res) => {
+      for (let i = 0; i < Object.keys(res).length; i++) {
+        const key = Object.keys(res)[i];
+        carData.push({
+          carNum: res[key].carNum,
+          companyName: res[key].companyName,
+          customsCreateDate: res[key].customsCreateDate,
+          gpsTime: res[key].data && res[key].data.GpsTime ? res[key].data.GpsTime : '',
+          latitude: res[key].data && res[key].data.Latitude ? res[key].data.Latitude : '',
+          longitude: res[key].data && res[key].data.Longitude ? res[key].data.Longitude : '',
+          entryId: res[key].entryId,
+          firstRegistrationDate: res[key].firstRegistrationDate,
+          vehicleModel: res[key].vehicleModel
+        })
+      }
+      this.carData = carData
+      ShipFun.addCar(carData.filter((item: any) => {
+        return item.latitude && item.longitude
+      }), this.map)
+      this.setCarWarning(carData.filter((item: any) => {
+        return item.latitude && item.longitude
+      }))
+    })
+  }
+  private spArray(array: any[], len: number) {
+    const newArray: any[] = [];
+    item(array, len)
+
+    function item(array: any[], len: number) {
+      if (array.length && array.length > len) {
+        newArray.push(array.splice(0, len))
+        item(array, len);
+      } else if (array.length && array.length < len) {
+        newArray.push(array)
+        array = []
+      }
+    }
+
+    return newArray
+  }
+
+  private jiexiRanks(data: any) {
+    const newShipList: any = []
+    data.forEach((item: any) => {
+      newShipList.push({
+        y: item.shiptype,
+        m: item.mmsi,
+        h: item.heading,
+        g: item.callsign,
+        c: item.cog,
+        o: item.imo,
+        s: item.sog,
+        v: item.aisNavStatus,
+        l: item.length,
+        p: item.destPort,
+        b: item.breadth,
+        r: item.eta,
+        d: item.draught,
+        t: item.posTime,
+        i: item.shipId,
+        n: item.lon,
+        a: item.lat,
+        e: item.shipnameEn,
+        color: item.color,
+        isFleet: true
+      })
+    })
+    ShipFun.addShip(JSON.parse(JSON.stringify(newShipList)), 11, storeUtil.getMapInstance())
+  }
+
+  private setShipWarning(ships: any[]) {  //将更新时间超出30天的游艇的图标设置为感叹号
+    const nowTime: number = (new Date()).getTime()
+    const temp: string[] = []
+    ships.forEach((item: any) => {
+      let timeDiff: number = item.posTime ? (nowTime - (item.posTime * 1000)) / (24 * 60 * 60 * 1000) : 0 
+      if (timeDiff > 30) {
+        temp.push(item.shipId)
+      }
+    })
+    const features = ShipFun.getShipFeaturesByIds(temp)
+    const iconStyle = new Style({
+      image: new Icon({
+        color: '#ffffff',
+        crossOrigin: 'anonymous',
+        src: warningImg,
+        scale: 0.18
+      })
+    })
+    features.forEach((f: any) => {
+      f.setStyle(iconStyle)
+    })
+  }
+
+  private setCarWarning(dataList: any[]) {
+    const nowTime: number = (new Date()).getTime()
+    const temp: string[] = []
+    dataList.forEach((item: any) => {
+      let timeDiff: number = item.gpsTime ? (nowTime - new Date(item.gpsTime).getTime()) / (24 * 60 * 60 * 1000) : 0 
+      if (timeDiff > 3) {
+        temp.push(item.carNum)
+      }
+    })
+    const features = ShipFun.getCarFeaturesByIds(temp)
+    features.forEach((f: any) => {
+      const iconStyle = new Style({
+        image: new Icon({
+          color: '#ffffff',
+          crossOrigin: 'anonymous',
+          src: warningImg,
+          scale: 0.25
+        }),
+        text: new styleText({
+          font: '16px Microsoft YaHei 100',
+          textAlign: 'center',
+          overflow: true,
+          fill: new styleFill({
+            color: '#000'
+          }),
+          stroke: new styleStroke({
+            color: '#fff',
+            width: 3
+          }),
+          textBaseline: 'bottom',
+          text: f.get('carNum')
+        })
+      })
+      f.setStyle(iconStyle)
+    })
+  }
+  private showAllData() {
+    //展示所有数据
+    //this.getShips()
+    //this.getCars()
+    this.jiexiRanks(this.shipData);
+    // this.setShipWarning(this.shipData);
+    ShipFun.addCar(this.carData.filter((item: any) => {
+      return item.latitude && item.longitude
+    }), this.map)
+    this.setCarWarning(this.carData.filter((item: any) => {
+      return item.latitude && item.longitude
+    }))
+  }
+  public mounted() {
+    this.map = ShipFun.creatMap()
+    this.map.updateSize()
+    storeUtil.setMapInstance(this.map)
+    storeUtil.setMapFun(ShipFun);
+    ShipFun.setmap(this.map)
+    ShipFun.setCenter([110, 19]);
+    ShipFun.setZoom(9)
+    ShipFun.changeMap(this.map, 'tdt')
+    ShipFun.createMeasureTooltip(this.map) //测距显示
+    // ShipFun.addFullScreen(this.map) // 全屏按钮显示
+    ShipFun.addScaleLine(this.map) // 添加比例尺
+    ShipFun.addMousePos(this.map) // 添加显示鼠标位置的经纬度信息
+    ShipFun.addZoomListener(this.map, () => {
+      this.map
+        .getControls()
+        .getArray()
+        .forEach((item: any) => {
+          if (
+            item.values_ &&
+            JSON.stringify(item.values_) !== '{}' &&
+            Object.keys(item.values_).includes('units') &&
+            item.values_.units === 'nautical'
+          ) {
+            ShipFun.plotting(parseInt(item.renderedHTML_))
+          }
+        })
+    })
+    ShipFun.addClick(async (res: any) => {
+      if (res.isType === 'port') {
+        let port: any = {}
+        await HttpApi.getPortInfo(res.portId).then((res2: any) => {
+          port = res2
+          Object.assign(port, res)
+        })
+        port.cLon = port.portLon * 600000
+        port.cLat = port.portLat * 600000
+        DialogUtil.showDialog(PortQueryTemp, DialogType.PORT_QUERY, {
+          dialogData: {
+            title: `${port.nameCn}-${port.nameEn}`,
+            vueName: DialogType.PORT_QUERY
+          },
+          infoData: {
+            portInfo: port
+          },
+          show: true
+        })
+      } else if (res.isType === 'ship') {
+        let shipData: any = {}
+        let docData = {}
+        await HttpApi.getShipMessage({shipId: res.shipId}).then((res: any) => {
+          const SearchLog = (this as any).$SearchLog
+          let flag = true
+          if (SearchLog.length) {
+            for (let i = 0; i < SearchLog.length; i++) {
+              const item = SearchLog[i]
+              if (item.shipId === res[0].shipId) {
+                flag = false
+                break
+              }
+            }
+          }
+
+          if (flag) {
+            SearchLogUtil.addSearchLog(res[0])
+          }
+          storeUtil.setShipData(res[0])
+          shipData = res[0]
+        })
+        await HttpApi.getShipDoc({shipId: res.shipId}).then((res: any) => {
+          if (res) {
+            docData = res
+          }
+        })
+        await HttpApi.getShipCnName({mmsi: shipData.mmsi}).then((res: any) => {
+          if (res) {
+            shipData.shipnameCn = res.nameCn
+          }
+        })
+        DialogUtil.showDialog(ShipInfoTemp, DialogType.SHIP_INFO, {
+          dialogData: {
+            title: shipData.shipnameCn,
+            vueName: DialogType.SHIP_INFO
+          },
+          infoData: {
+            shipData: shipData,
+            docData: docData
+          },
+          show: true
+        })
+      } else if (res.isType === 'car') {
+        DialogUtil.showDialog(CarInfoTemp, DialogType.CAR_INFO, {
+          dialogData: {
+            title: res.carNum,
+            vueName: DialogType.CAR_INFO
+          },
+          infoData: {
+            carData: res
+          },
+          show: true
+        })
+      }
+    })
+    // 当侧边栏修改的时候去地图去适应宽高的变化
+    elementResizeDetectorMaker().listenTo(document.getElementById('map'), () => {
+      this.map.updateSize()
+    })
+    this.getShips()
+    this.getCars()
+    bus.$on('showAllData', () => {
+      this.showAllData()
+    })
+  }
+}
+</script>
+<style scoped lang="scss">
+.my-ships-main {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-size: 0.875rem;
+
+  ::v-deep .ol-zoom {
+    position: absolute;
+    background: none;
+    left: 1.25rem !important;
+    bottom: 6.25rem !important;
+    top: auto !important;
+  }
+
+  ::v-deep .ol-full-screen {
+    position: absolute;
+    left: 1.25rem !important;
+    margin: 0 !important;
+    background: none !important;
+    top: auto !important;
+    right: auto !important;
+    bottom: 9.375rem !important;
+  }
+
+  ::v-deep .ol-scale-line {
+    position: absolute !important;
+    left: 9.375rem !important;
+    width: 7.5rem !important;
+    height: 3.125rem !important;
+    box-sizing: border-box !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    .ol-scale-line-inner {
+      width: 6.875rem !important;
+      height: 2.5rem !important;
+      font-size: 0.875rem !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+    }
+  }
+}
+</style>

src/views/new-dialog/AreaListTemp.vue

@@ -0,0 +1,75 @@
+<template>
+  <Dialog :show="tempData.show"
+          :vue-name="dialogConfig.vueName"
+          :height="dialogConfig.height"
+          :width="dialogConfig.width"
+          :resize="true"
+          :header="dialogConfig.header"
+          :dialog-type="dialogConfig.type"
+          :position="dialogConfig.position">
+    <template slot="default">
+      <AreaList ref="AreaListTemp" :data="tempData.infoData.data"></AreaList>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import Dialog from '@/components/dialog/index.vue'
+import AreaList from '@/views/on-map-view/AreaList.vue'
+
+@Component({
+  components: {
+    Dialog,
+    AreaList
+  },
+  props: {
+    tempData: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {}
+      }
+    }
+  }
+})
+export default class AreaListTemp extends Vue {
+  private dialogConfig = {
+    width: '40.625rem',
+    height: '29.5rem',
+    header: {
+      title: `${this.$t('message.menu.AreaListTemp')}(${this.$props.tempData.infoData.data.title})`,
+      hasIcon: false,
+      iconSrc: '',
+      hasMin: true,
+      hasMax: false
+    },
+    position: {
+      top: '6.25rem',
+      left: '53.125rem'
+    },
+    vueName: ''
+  }
+
+  @Watch('tempData', {
+    deep: true,
+    immediate: true
+  })
+  dataChange(data: any) {
+    const dialogData = data.dialogData
+    this.dialogConfig.vueName = dialogData.vueName
+    this.dialogConfig.header.title = `${this.$t('message.menu.AreaListTemp')}(${data.infoData.data.title})`
+  }
+
+  public mounted() {
+    window.addEventListener("setItemEvent", (e: any) => {
+      if (e.key === 'language') {
+        this.dialogConfig.header.title = `${this.$t('message.menu.AreaListTemp')}(${this.$props.data.infoData.data.title})`
+      }
+    });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/new-dialog/ArriveLeaveQueryTemp.vue

@@ -0,0 +1,95 @@
+<template>
+  <Dialog :show="tempData.show"
+          :vue-name="dialogConfig.vueName"
+          :height="dialogConfig.height"
+          :width="dialogConfig.width"
+          :resize="true"
+          :header="dialogConfig.header"
+          :dialog-type="dialogConfig.type"
+          :position="dialogConfig.position">
+    <template slot="default">
+      <ArriveLeaveQuery ref="ArriveLeaveQueryTemp"
+                        :type="tempData.infoData.type"
+                        :port-id="tempData.infoData.portId">
+      </ArriveLeaveQuery>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts">
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import Dialog from '@/components/dialog/index.vue'
+import ArriveLeaveQuery from "@/components/arrive-leave-query/index.vue";
+
+@Component({
+  components: {
+    Dialog,
+    ArriveLeaveQuery
+  },
+  props: {
+    tempData: {
+      type: Object,
+      required: true,
+      default: () => {
+        return {}
+      }
+    }
+  }
+})
+export default class ArriveLeaveQueryTemp extends Vue {
+  private dialogConfig = {
+    vueName: '',
+    width: '83.4rem',
+    // height: '37.5rem',
+    header: {
+      title: '',
+      hasIcon: false,
+      iconSrc: '',
+      hasMin: true,
+      hasMax: false
+    },
+    position: {
+      top: '10rem',
+      left: '18.125rem'
+    },
+    who: ''
+  }
+  private menuGroup = 'menu'
+  private language = window.localStorage.getItem('language')
+
+  @Watch('tempData', {
+    deep: true,
+    immediate: true
+  })
+  dataChange(data: any) {
+    const dialogData = data.dialogData
+    this.dialogConfig.vueName = dialogData.vueName
+    this.languageChange()
+  }
+
+  @Watch('language', {deep: true, immediate: true})
+  languageChange() {
+    const type = this.$props.tempData.infoData.type
+    if (type === 'arrive') {
+      this.dialogConfig.header.title = `${this.$t('message.PortQuery.arrive')}`
+    } else if (type === 'leave') {
+      this.dialogConfig.header.title = `${this.$t('message.PortQuery.leave')}`
+    } else if (type === 'yj') {
+      this.dialogConfig.header.title = `${this.$t('message.PortQuery.yj')}`
+    } else if (type === 'crude') {
+      this.dialogConfig.header.title = `${this.$t('message.PortQuery.Crude')}`
+    }
+  }
+
+  public mounted() {
+    window.addEventListener("setItemEvent", (e: any) => {
+      if (e.key === 'language') {
+        this.language = e.newValue
+      }
+    });
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>