yiliangyiyun-pc-jj/src/views/home/index.vue

<!-- 首页模块 首页面 -->
<template>
  <div class="home">
    <div class="body-middle"
         :class="{ 'body-middle-height': blockList[0].flag }">
      <div class="body-middle-left">
        <!-- 任务、消息、提醒、超期 -->
        <Panel :data-list="panelList"
               @click="gotoNewRw"></Panel>
        <div v-show="false">
          <el-input v-model="param"/>
          <el-button @click="openPort()">openPort</el-button>
          <el-button @click="closePort()">closePort</el-button>
          <div>{{text}}</div>
        </div>
       <img style='width:100%;margin-top:10px;' src="../../../public/img/tmt.gif" alt="">
      </div>
    </div>
    <div id="mapXY"></div>
    <!-- </ws-dialog> -->
    <!-- 第一次登陆的租户 -->
    <successfulDialog v-if="successfulDialog"
                      :phone="phone"
                      :successfulDialog="successfulDialog"
                      @close="successfulDialogClose">
    </successfulDialog>
    <!-- 试用租户 -->
    <trialNotExpired v-if="trialNotExpired"
                     :day="day"
                     :phone="phone"
                     :trialNotExpired="trialNotExpired"
                     @close="trialNotExpiredClose">
    </trialNotExpired>
  </div>
</template>

<script>
// import serialport from 'serialport' 
// 统计图start
import maintenance from './components/maintenance'
import shipCertificate from './components/shipCertificate'
import sparePartsMaterial from './components/sparePartsMaterial'
import procurement from './components/procurement'
// 统计图end
// 正式租户
import successfulDialog from './components/successfulDialog'
// 试用租户
import trialNotExpired from './components/trialNotExpired'
// 新 api
import {  noticeNumber, queryCircularManagementReceiveList, getStaffHomeShowList } from '@/model/home/index'
import {
  getUserVesselList,
  findHottestRouting
} from '@/model/indexRx'
import News from './components/News'
import ShipMap from './components/ShipMap'
import { getCnCity, getCnWea } from './city'
import { getLanguage } from '@/lang'
import Panel from './components/Panel'
import { getChangeLoginFlag } from '@/model/indexRx'
import { zipDown } from '@/utils/batchDown'
import { EventBus } from 'base-core-lib'
import { mapActions, mapGetters, mapState } from 'vuex';

export default {
  name: 'index',
  components: {
    News,
    ShipMap,
    Panel,
    successfulDialog,
    trialNotExpired,
    //统计图start
    maintenance,
    shipCertificate,
    sparePartsMaterial,
    procurement
    //统计图end
  },

  data () {
    return {
      showEchart: false,
      phone: '', // 正式租户电话号码
      day: '', //试用租户剩余天数
      trialNotExpired: false, //试用租户 剩余天数
      successfulDialog: false, //第一次登陆的弹窗
      mapXY: undefined,
      shipService: undefined,
      blockList: [
        {
          name: this.$t('home.shortcutEntrance'),
          flag: true
        },
        {
          name: this.$t('home.shipMap'),
          flag: true
        }
      ],
      newList: [],
      noticeList: [],
      routeList: [],
      showBlockList: [],
      shipList: [],
      setFlag: false,

      todoCount: '-',
      msgCount: '-',
      weather: undefined,
      ships: [],
      selectShip: undefined,
      isFullScreen: false,
      number: {
        task: 0,
        remind: 0,
        overdue: 0,
        news: 0
      },
      vesselBankFlag: sessionStorage.getItem('ws-pf_vesselBankFlag'),
      shezhiVal: '',
      text:'数据',
      reader:null,
      param:9600
    }
  },
  computed: {
    ...mapState({
      showVesslBankFlag: state => state.commonStore.showVesslBankFlag
    }),
    ...mapGetters(['userSetting']),
    /** 计算属性计算属性节点 */
    panelList () {
      return [
        {
          type: '0',
          task: this.$t('homeIndex.task'),
          url: require('@/assets/newhome/rw01.png'),
          number: this.number.task,
          background: require('@/assets/newhome/rw.png'),
          remark: '任务'
        },
        {
          type: 'message',
          task: this.$t('homeIndex.message'),
          url: require('@/assets/newhome/xx01.png'),
          number: this.number.news,
          background: require('@/assets/newhome/xx.png'),
          remark: '消息'
        },
        {
          type: '1',
          task: this.$t('homeIndex.remind'),
          url: require('@/assets/newhome/tx01.png'),
          number: this.number.remind,
          background: require('@/assets/newhome/tx.png'),
          remark: '提醒'
        },
        {
          type: '2',
          task: this.$t('homeIndex.beyond'),
          url: require('@/assets/newhome/cq01.png'),
          number: this.number.overdue, 
          background: require('@/assets/newhome/cq.png'),
          remark: '超期'
        }
      ]
    },
    optionSingleHeightTime () {
      return {
        openWatch: true,
        limitMoveNum: -1, //启动无缝滚动最小数据量 this.dataList.length
        direction: 2,
        switchDelay: 1000
      }
    },
    getLanguage () {
      return this.$store.getters.language
    },
    isShowShipList () {
      return this.userSetting['shipMap'][0].showFlag && this.vesselBankFlag !== 'V' && this.permissionIf('map.mapManagement.view')
    },

  },
  async created () {
    //获取快捷路口列表
    this.getRouteList()
    // this.checkUserInfoDialog()
  },
  async mounted () {
    //获取新闻列表
    // this.getNewList()
    noticeNumber().toPromise().then(res => {
      const { task = 0, remind = 0, overdue = 0, news = 0 } = res
      this.number.task = task
      this.number.remind = remind
      this.number.overdue = overdue
      this.number.news = news
    })
    // if (this.vesselBankFlag !== 'V') {
    //   EventBus.$emit('addShipScript', () => {
    //     this.initShipMap()
    //   })
    // }
    // setTimeout(() => {
    //   this.showEchart = true
    // }, 900)

    // this.showBlockList = []
    // if (this.vesselBankFlag === 'V') {
    //   this.$refs.noticeList.style.width = 'calc(50% - 7px)'
    //   this.$refs.newsList.style.width = 'calc(50% - 7px)'
    // } else {
    //   this.showBlockList = []
    //   this.blockList[1].flag = false
    //   this.$refs.noticeList.style.width = 'calc(50% - 7px)'
    //   this.$refs.newsList.style.width = 'calc(50% - 7px)'
    //   if (this.userSetting['shipMap'] && this.userSetting['shipMap'][0].showFlag) {
    //     this.showBlockList.push('船舶动态')
    //     this.blockList[1].flag = true
    //   }
    // }
  },
  watch: {
    // getLanguage: function () {
    //   this.getShipList()
    // }
  },
  methods: {
    ...mapActions('user', ['toSetShow', 'changeVesslBank']),
    // 下载通知通函
    downloadNotification (item) {
      zipDown({
        appendixIds: item.attachmentPath,
        baseUrl: this.$store.getters.baseInfo.fileUrl,
        zipName: item.theme
      })
    },
    /**
     * 校验各种弹框问题
     * @Desc 不是本人原意, 请不要骂我 谢谢. 请联系 "后台开发人员" 梳理逻辑
     */
    async checkUserInfoDialog () {
      const {
        statusFlag,
        loginInfo: { loginFlag = 0 },
        daysRemaining,
        customerServiceStaffPhone
      } = JSON.parse(sessionStorage.getItem('ws_login_getTenantInfoByUser'))
      if (statusFlag * 1 === 3) {
        // 判断后台返回的是空 还是 0  是空还是 0 的时候请求后台接口 不懂啥意思 为啥要这么弄
        if (!loginFlag && !sessionStorage.getItem('isShowTryUserDialog') * 1) {
          let newId = JSON.parse(sessionStorage.getItem('ws_login_accountId'))
          this.phone = customerServiceStaffPhone
          this.successfulDialog = true
          sessionStorage.setItem('isShowTryUserDialog', '1')
          await getChangeLoginFlag({ accountId: newId }).toPromise()
        }
      }
      // 试用租户
      const dayDialog = [30, 15, 7, 5, 3, 2, 1, 0]
      if (statusFlag * 1 === 2 && dayDialog.indexOf(daysRemaining) > -1 && !sessionStorage.getItem('isShowTryUserDialog') * 1) {
        this.day = daysRemaining
        this.phone = customerServiceStaffPhone
        this.trialNotExpired = true
        sessionStorage.setItem('isShowTryUserDialog', '1')
      }
    },
    trialNotExpiredClose () {
      this.trialNotExpired = false
    },
    //第一次登陆的弹窗
    successfulDialogClose () {
      this.successfulDialog = false
    },
    initShipMap () {
      var options = {
        ak: '57df9eaa033b44809d4bdaf919af457e',
        // 初始中心点坐标
        centerPoint: [30.171, 121.27],
        zoom: 3,
        minZoom: 2,
        maxZoom: 18,
        defaultMapType: 'MT_SEA', //默认海图
        // 公司版权信息( 支持html )，默认Elane Inc.
        attribution: {
          isShow: false,
          emptyString:
            '&copy;2019 <a class="shipxy_small"></a>&nbsp;<a>WinSea Inc.</a>'
        },
        measureCtrl: { isShow: false },
        mousePostionCtrl: { isShow: false },
        zoomControlElane: { isShow: true, position: 'bottomright' },
        zoomviewControl: { isShow: false, position: 'bottomright' },
        basemapsControl: { isShow: false, position: 'topright' },
        scaleCtrl: { isShow: true, position: 'bottomleft' }
      }
      // 创建地图示例
      // eslint-disable-next-line no-undef
      this.mapXY = new ShipxyAPI.Map('mapXY', options)
      // eslint-disable-next-line no-undef
      this.shipService = ShipxyAPI.ShipService(this.mapXY, {
        enableAreaShip: false,
        enableFleetShip: false,
        isAutoUpdateSrvtime: false,
        // delayTime: 5000,
        lableFont: ['500 12px Arial', '500 12px 宋体'], // 船舶名称，文字字体，默认值：["600 12px Arial", "500 12px Arial"]
        lableTxtColor: ['#fff', '#fff'], // 船舶名称，文字颜色，默认值：["#000","#fff"]
        lableLineColor: ['rgba(1, 30, 62, 0)', 'rgba(1, 30, 62, 0)'], //  边框颜色，默认值：["#000","#000"]
        lableLinefillColor: ['rgba(0, 0, 0, 0.6)', 'rgba(0, 0, 0, 0.6)'], // 框内填充颜色，默认值：[null,null]
        obliqueLineColor: ['#000', '#000'], // 船舶名称，斜线颜色，默认值：[null,null]
        dShipColor: '#FF6437', // D+船颜色，默认：#ff6347
        zoomLevel_data: 1,
        zoomLevel_base: 1,
        getAreaShipsCallBack: (call) => {
          // console.info(call, 'getAreaShipsCallBack')
        },
        drawShipsEndCallBack: (call) => {
          // console.info(call, 'drawShipsEndCallBack')
        }
      })
      this.shipService.setPointerEvents(true)
      window.shipService = this.shipService
      //获取船舶列表
      this.getShipList()
    },
    toRoute (url) {
      this.$router.push(url)
    },
    toSetShow () {
      this.showBlockList = []
      this.setFlag = true
      // getStaffHomeShowList({
      //   staffId: sessionStorage.getItem('ws-pf_userId')
      // }).toPromise().then(data => {
      //   for (let i = 0; i < data.length; i++) {
      //     if (data[i].typeId === 'shipMap' && data[i].showFlag) {
      //       this.showBlockList.push('船舶动态')
      //     } else {
      //       this.showBlockList = []
      //     }
      //   }
      // })
    },

    toMap () {
      this.$router.push('/map/trajectory_child')
    },
    goNews () {
      this.$router.push('/news/noticeType')
    },
    goNewsDetail (id) {
      this.$router.push('/news/noticeDetails?id=' + id)
    },
    goNotice (data) {
      this.$router.push({
        name: 'notificationItDetail',
        query: { id: data.id }
      })
    },
    goNoticeMore () {
      this.$router.push('/notice/notificationCircularReleasedIt_child')
    },
    toHide (index) {
      this.changeVesslBank([{
        id: this.userSetting['shipMap'][0].id,
        staffId: sessionStorage.getItem('ws-pf_userId'),
        typeId: 'shipMap',
        showFlag: false
      }])
    },
    getRouteList () {
      let data = {
        accountId: sessionStorage.getItem('ws-pf_userId'),
        pageSize: 30
      }
      findHottestRouting(data).toPromise().then(res => {
        this.routeList = res
        if (res.length == 0) {
          this.blockList[0].flag = false
        }
      })
    },
    //获取新闻
    getNewList () {
      let data = {
        currentPage: 1,
        pageSize: 2,
        loginUserId: sessionStorage.getItem('ws-pf_userId'),
        compId: sessionStorage.getItem('ws-pf_compId'),
        releaseFlag: 0
      }
      // queryHomePage(data).toPromise().then(resNewList => {
      //   for (let i of resNewList) {
      //     i.content = '<p>' + i.content.replace(/<[^>]+>/g, '') + '</p>'
      //   }
      //   this.newList = resNewList
      //   for (let i of this.newList) {
      //     if (i.ossCoverUrl && i.ossCoverUrl.length > 0) {
      //     } else {
      //       this.$set(
      //         i,
      //         'imgUrl',
      //         require('@/assets/images/page/home/noImg.png')
      //       )
      //     }
      //   }
      // })
    },
    //获取通知通函
    // getNoticeList () {
    //   let pagesize = Math.floor((this.$refs.noticeList.clientHeight - 44) / 80)
    //   let data = {
    //     currentPage: 1,
    //     pageSize: pagesize || 3,
    //     vesselDeptId:
    //       sessionStorage.getItem('ws-pf_vesselBankFlag') === 'V'
    //         ? sessionStorage.getItem('ws-pf_vesselId')
    //         : sessionStorage.getItem('ws-pf_deptId'),
    //     compId: sessionStorage.getItem('ws-pf_compId')
    //   }
    //   // TODO: 【此处有问题】接口变更的不对
    //   queryCircularManagementReceiveList(data)
    //     .toPromise()
    //     .then(response => {
    //       this.noticeList = response.records
    //     })
    // },
    // 获取船舶状态
    getNaviStatusStr (t) {
      var array = [
        this.$t('home.navistatus0'),
        this.$t('home.navistatus1'),
        this.$t('home.navistatus2'),
        this.$t('home.navistatus3'),
        this.$t('home.navistatus4'),
        this.$t('home.navistatus5'),
        this.$t('home.navistatus6'),
        this.$t('home.navistatus7'),
        this.$t('home.navistatus8')
      ]

      if (t >= 0 && t <= 8) {
        return array[t]
      }
      return ''
    },
    // 获取船舶状态
    getNaviStatusBg (t) {
      var array = [
        'bg0',
        'bg1',
        'bg2',
        'bg3',
        'bg4',
        'bg5',
        'bg6',
        'bg7',
        'bg8'
      ]

      if (t >= 0 && t <= 8) {
        return array[t]
      }
      return ''
    },
    getShipList () {
      getUserVesselList({ vesselStatus: 'UNDER_CONTROL' }).toPromise().then(res => {
        this.shipList = []
        let num = res.length > 10 ? 10 : res.length
        let obj = {}
        for (let i = 0; i < num; i++) {
          if (res[i].mmsiCode && res[i].mmsiCode.length > 0) {
            obj = this.shipService.getShipByMmsi(res[i].mmsiCode)
              ? this.shipService.getShipByMmsi(res[i].mmsiCode)
              : {}
            obj.vesselName = res[i].vesselName

            this.shipList.push(obj)
          }
        }
        //我想不出还有什么招了:临时解决办法
        const oldList = this.shipList
        for (let i = 1; i < 5; i++) {
          oldList.forEach(item => {
            this.shipList.push(item)
          })
        }
      })
    },

    onTodoClick () {
      this.$router.push({ name: 'workNotification' })
    },
    onMsgClick () {
      this.$router.push({ name: 'message' })
    },
    onChange (list) { },
    onShipMenuItemClick (ship) {
      this.selectShip = ship
      if (ship) {
        this.$refs.shipMap.selectShip(ship.id)
      } else {
        this.$refs.shipMap.unSelectShip()
      }
    },
    onFullScreen () {
      this.isFullScreen = !this.isFullScreen
    },
    onNoticeMoreBtnClick () {
      this.$router.push({
        name: 'notice'
      })
    },
    onShipSelectEvent (shipid) {
      this.selectShip = this.ships.find(item => {
        return item.id == shipid
      })
    },
    getCityName (encity) {
      if (getLanguage() === 'zh') {
        return getCnCity(encity)
      }
      return encity
    },
    getWeaName (enwea) {
      if (getLanguage() === 'zh') {
        return getCnWea(enwea)
      }
      return enwea
    },
    gotoNewRw (data) {
      if (data === 'message') {
        this.$router.push({ name: 'message', query: { types: data } })
      } else {
        this.$router.push({ name: 'workNotification', query: { types: data } })
      }
    },
    test(){
      console.log('testtesttesttest');
    },
    async test1(){
      console.log('testtesttesttest111111');
    },
    async openPort(){
      console.log('openPort',navigator);
      if ('serial' in navigator) {
        // The Web Serial API is supported.
        console.log('the Web Serial API is supported.');
        console.log(this.param);
        const port = await navigator.serial.requestPort();
        await port.open({ baudRate: this.param }); // set baud rate
        this.reader = port.readable.getReader();
        // 监听来自串行设备的数据
        while (true) {
          const { value, done } = await this.reader.read();
          if (done) {
            // 允许稍后关闭串口。
            this.reader.releaseLock();
            break;
          }
          console.log('value:',value);

          var result='';
          //2。获取16进制字符串
          // var receData = HexConvert.ByteToString(value);
          // console.log("receData",receData);
          var flag = false;
          for(var i=0;i<value.length;i++){
              console.log('value[0]',value[0])
            var tmp = String.fromCharCode(value[i])
            if(value[0] != 49 && value[0] != 2){
              break
            }
            if (tmp == String.fromCharCode(32) ) {
              flag = true
            }
            if (flag && result.length < 7 && tmp != String.fromCharCode(32)) {
              // if(i-1 >=0 &&tmp == String.fromCharCode(48) && value[i-1] == 32){
              //   continue
              // }
              // if(i-2 >=0 &&tmp == String.fromCharCode(48) && value[i-2] == 32){
              //   continue
              // }
              result += tmp
            }
          }
          setTimeout(1000)
          if(parseInt(result)){
            console.log('result:',result);
            this.text = parseInt(result)*100
          }
          console.log('this.text:',this.text);
          
          // value 是一个 Uint8Array
        }
         await port.close();
      }
      else{
        console.log('the Web Serial API is not supported.',navigator);
      }
    },
    async closePort(){
      console.log('closePort');
      this.reader.cancel()
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 10px;
  overflow-y: auto;
  // background-color: #eee;
  width: 100%;
  height: calc(100vh - 60px);
  .set-img {
    width: 25px;
    height: 25px;
    position: fixed;
    right: 0;
    bottom: 99px;
    z-index: 1000;
  }
  .shortcut-entrance {
    width: 100%;
    height: 60px;
    background: #fff;
    margin-bottom: 10px;
    padding: 0 20px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shortcut-entrance-left {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      width: 50%;
      overflow: hidden;
      height: 100%;
    }
    .shortcut-entrance-right {
      width: 14px;
      height: 14px;
    }
  }
  .body-middle {
    display: flex;
    width: 100%;
    height: calc(100vh - 60px);
    .body-middle-left {
      width: 100%;
      // margin-right: 10px;
      .panel-list {
        display: flex;
        color: #ffffff;
        text-shadow: 0px 1px 1px rgba(111, 52, 0, 0.55);
      }
      .ship-list-body {
        position: relative;
        width: 300px;
        margin-top: 10px;
        .shipList-box {
          width: 85%;
          margin: 0 auto;
          .shipList-icon {
            position: absolute;
            top: 6px;
            left: 0px;
          }
          .shipList-name {
            cursor: context-menu;
            font-size: 16px;
            font-weight: bold;
            line-height: 26px;
            color: #333333;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .shipList-address {
            cursor: context-menu;
            font-size: 14px;
            color: #666666;
            line-height: 35px;
          }
          .shipList-time {
            cursor: context-menu;
            font-size: 14px;
            color: #666666;
            line-height: 20px;
          }
          .ship-list-status {
            cursor: context-menu;
            margin-left: 20px;
            padding: 5px 10px;
            border-radius: 20px;
            color: #fff;
            max-width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .bg0 {
            background: #7ed321;
          }
          .bg1 {
            background: #ff8f00;
          }
          .bg2 {
            background: #495b61;
          }
          .bg3 {
            background: #4fc3f7;
          }
          .bg4 {
            background: #26a69a;
          }
          .bg5 {
            background: #9c7fee;
          }
          .bg6 {
            background: #ff5722;
          }
          .bg7 {
            background: #8d6e63;
          }
          .bg8 {
            background: #fadd60;
          }
        }
      }
      .notice-list {
        width: calc(50% - 7px);
        background: #fff;
        margin-top: 10px;
        // height: calc(100% - 180px);
        // min-height: 460px;
        border-radius: 4px;
        // float: left;
      }

      .news-list {
        width: calc(50% - 7px);
        // float: left;
        background: #fff;
        margin-top: 10px;
        // height: calc(100% - 180px);
        height: 285px;
        overflow: hidden;
        // min-height: 460px;
        border-radius: 4px;
        // margin-right: 10px;
        .new-list-box {
          padding: 0 10px;
          .new-list-body:first-child {
            padding-bottom: 20px;
            border-bottom: 1px solid #eeeeee;
          }
          .new-list-body:last-child {
            padding-top: 20px;
          }
        }
        .new-list-body {
          width: 100%;
          padding: 10px 0;
          display: flex;
          border-bottom: 1px solid #eeeeee;
          // height: 50%;
          overflow: hidden;
          // padding: 10px;
          // display: flex;
          .new-list-img {
            // height: 100%;
            width: 160px;
            height: 100px;
            position: relative;
            // margin-right: 20px;
            .newsTJ {
              position: absolute;
              width: 54px;
              height: 50px;
              left: 0;
              top: 0;
            }
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .new-list-title {
            color: #343434;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            span {
              cursor: pointer;
              display: block;
            }
          }
          .new-list-content {
            color: #666666;
            font-size: 12px;
            line-height: 16px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            height: 48px;
            span {
              cursor: pointer;
              display: block;
            }
          }
          .new-list-date {
            color: #999999;
            font-size: 12px;
            text-align: right;
            line-height: 22px;
            span {
              cursor: pointer;
              display: block;
            }
          }
        }
        // .new-list-body:hover {
        //   background: #e2edfa;
        //   cursor: pointer;
        // }
        .no-line {
          border-bottom: 0px solid #eeeeee;
        }
      }
      .v-width {
        width: calc(50% - 7px);
      }
    }
    .body-middle-right {
      width: calc(30% - 10px);
      .notice-list {
        height: 50%;
        background: #fff;
        width: 100%;
        min-height: 300px;
        border-radius: 4px;
        .notice-list-body {
          border-bottom: 1px solid #eeeeee;
          padding: 20px 10px;
          .notice-list-title {
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .notice-list-type {
            margin: 9px 0 12px 0;
            color: #666666;
          }
          .notice-list-person {
            color: #666666;
            font-size: 12px;
          }
          .notice-list-date {
            color: #666666;
            font-size: 12px;
            margin-top: 10px;
          }
        }
        .notice-list-body:hover {
          background: #e2edfa;
          cursor: pointer;
        }
        .notice-body-height {
          height: 50%;
        }
        .notice-body-height1 {
          height: 20%;
        }
      }
      .notice-list-height {
        height: 100%;
        min-height: 638px;
      }
      .ship-list {
        height: calc(50% - 10px);
        margin-top: 10px;
        background: #fff;
        width: 100%;
        min-height: 327px;
        border-radius: 4px;
        .ship-list-body {
          padding: 20px 0;
          border-bottom: 1px solid #eeeeee;
          .ship-list-head {
            display: flex;
            img {
              width: 14px;
              height: 14px;
            }
            .ship-list-name {
              margin: 0 20px;
              font-weight: bold;
            }
            .ship-list-status {
              border-radius: 10px;
              padding: 4px 8px;
              color: #ffffff;
            }
            .bg0 {
              background: #7ed321;
            }
            .bg1 {
              background: #ff8f00;
            }
            .bg2 {
              background: #495b61;
            }
            .bg3 {
              background: #4fc3f7;
            }
            .bg4 {
              background: #26a69a;
            }
            .bg5 {
              background: #9c7fee;
            }
            .bg6 {
              background: #ff5722;
            }
            .bg7 {
              background: #8d6e63;
            }
            .bg8 {
              background: #fadd60;
            }
          }
          .ship-list-address {
            margin: 10px 0 10px 34px;
            color: #666666;
          }
          .ship-list-date {
            color: #666666;
            margin-left: 34px;
          }
        }
        /*.ship-list-body:hover{*/
        /*  background: #e2edfa;*/
        /*}*/
      }
    }
  }
  .body-middle-height {
    height: calc(100vh - 70px);
  }
  .list-title {
    width: 100%;
    // background: #f3f9fe;
    background: url('~@/assets/newhome/titilebg.png') no-repeat;
    background-size: 100% 100%;
    height: 44px;
    padding: 0 20px;
    display: flex;
    line-height: 44px;
    justify-content: space-between;
    border-radius: 4px 4px 0 0;
    .list-title-name {
      font-size: 16px;
      font-weight: bold;
      color: #333333;
    }
    .list-title-more {
      font-size: 14px;
      color: #666666;
      cursor: pointer;
      display: flex;
    }
  }
}
.el-dropdown-menu {
  margin-top: -20px !important;
  /*left: 1872px !important;*/
}
.seamless-warp {
  // width: 100%;
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
}
.home-tzthList:nth-of-type(3) {
  border: none;
}
.home-tzthList {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  .home-tzthList-type {
    width: 100%;
    display: flex;
    font-size: 14px;
    line-height: 28px;
    font-weight: bold;
    .home-tzthList-type-title {
      color: #343434;
      margin: 0;
      span {
        cursor: pointer;
      }
    }
    .home-tzthList-type-theme {
      color: #666666;
      margin: 0;
      width: 80%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        cursor: pointer;
      }
    }
  }
  .home-tzthList-people {
    display: flex;
    justify-content: space-between;
    line-height: 22px;
    .home-tzthList-Personnel,
    .home-tzthList-timer {
      font-size: 12px;
      color: #666666;
      span {
        cursor: pointer;
      }
    }
  }
}
.noMore {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.ship-list {
  width: 100%;
  border-radius: 4px;
  background-color: #fff;
}

//新增的图表的样式
.chart {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10px;
}
.home-tzthList-timer-left {
  width: 10%;
  display: flex;
  align-items: center;
  img {
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: block;
    align-items: center;
    margin: 0 auto;
  }
}
</style>