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 class="header">
          <div class="left">
            <img src="../../../public/img/8b2c7255e9b19c71d68b33a08f20f74.png" alt="">

          </div>
         <div class="right">
            <div class="top">
              {{ nowDate }}
            </div>
            <div class="bottom">
              {{ nowTime }}
            </div>
          </div>
        </div>
        <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>
        <div class="content2">
          <el-row class="content2-aside">
            <h3 class="title">采购合同完成进度</h3>
            <el-col :span="12" class="chart-card">
              <div style="font-weight: bold;" class="">
                <div ref="myEchart1" style="height: 288px;" class="roseChart"></div>
                <div class="bottom-tip">统计单位：吨</div>
              </div>
            </el-col>
            <el-col :span="12" class="chart-card">
              <div style="font-weight: bold;">
                <div ref="myEchart2" style="height: 288px;" class="roseChart"></div>
                <div class="bottom-tip">统计单位：元</div>
              </div>
            </el-col>
            <el-col :span="12" class="chart-card">
              <div style="font-weight: bold;">
                <div ref="myEchart3" style="height: 288px;" class="roseChart"></div>
                <div class="bottom-tip">统计单位：元</div>
              </div>
            </el-col>
          </el-row>
          <div class="content2-middle">
            <el-row class="left">
              <el-col :span="12">
                <h3>在途信息统计</h3>
                <div class="left-card">
                  <div class="item">
                    <p>在途车辆</p>
                    <p><span class="number">{{carCount1}}</span><span class="number-text">台</span></p>
                  </div>
                  <div class="item">
                    <p>装货车辆</p>
                     <p><span class="number" style="color:#ffa523">{{carCount2}}</span><span class="number-text">台</span></p>
                  </div>
                  <div class="item">
                    <p>卸货车辆</p>
                     <p><span class="number" style="color:#2483ff">{{carCount3}}</span><span class="number-text">台</span></p>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <h3>粮食总储量</h3>
                <div ref="myEchart7" style="height: 208px;"></div>
              </el-col>
            </el-row>
            <el-row>
              <h3 class="content2-map">库点流向分布</h3>
              <div class="center-map">
                <map-drag></map-drag>
              </div>
            </el-row>
            <el-row>
              <h3>库存成本</h3>
              <div class="content3">
                <div class="left">
                  <img src="../../../public/img/1637204557176-s4AMbBA8.png" alt="">
                  <span>总库存量</span>
                  <span class="content3-number blue">{{inventoryCost}}</span>
                  <span style="margin-top: 10px;">吨</span>
                </div>
                <div class="right">
                  <img src="../../../public/img/1637204768818-70JRjz0H.png" alt="">
                  <span>库存价值</span>
                  <span class="content3-number yellow">{{inventoryValue}}</span>
                  <span style="margin-top: 10px;">元</span>
                </div>
              </div>
            </el-row>
          </div>
          <el-row class="content2-aside">
            <h3 class="left-title">采购合同完成进度</h3>
            <el-col :span="12" class="chart-card">
              <div style="font-weight: bold;">
                <div ref="myEchart4" style="height: 288px;" class="roseChart"></div>
                <div class="bottom-tip">统计单位：吨</div>
              </div>
            </el-col>
            <el-col :span="12" class="chart-card">
              <div style="font-weight: bold;">
                <div ref="myEchart5" style="height: 288px;" class="roseChart"></div>
                <div class="bottom-tip">统计单位：元</div>
              </div>
            </el-col>
            <el-col :span="12" class="chart-card">
              <div style="font-weight: bold;">
                <div ref="myEchart6" style="height: 288px;" class="roseChart"></div>
                <div class="bottom-tip">统计单位：元</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-dialog :append-to-body="true" :show-close='false' :visible.sync="dialogVisible" width="30%"
          :before-close="handleClose">
          <span>这是一段信息</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <!-- <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'

  import mapDrag from '@/components/mapdrag/indexMap'
  // 统计图end
  // 正式租户
  import successfulDialog from './components/successfulDialog'
  // 试用租户
  import trialNotExpired from './components/trialNotExpired'
  // 新 api
  import {
    noticeNumber,
    queryCircularManagementReceiveList,
    getStaffHomeShowList,
    gChartsData
  } 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';
  import axios from 'axios'
  export default {
    name: 'index',
    components: {
      mapDrag,
      axios,
      News,
      ShipMap,
      Panel,
      successfulDialog,
      trialNotExpired,
      //统计图start
      maintenance,
      shipCertificate,
      sparePartsMaterial,
      procurement
      //统计图end
    },

    data() {
      return {
        totalReserves:'',
        inventoryCost:'',
        inventoryValue:'',
        carCount1:'',
        carCount2:'',
        carCount3:'',
        chartsData: [],
        nowDate: null, //存放年月日变量
        nowTime: null, //存放时分秒变量
        timer: '', //定义一个定时器的变量
        currentTime: new Date(), // 获取当前时间
        timer: '',
        dialogVisible: false,
        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: localStorage.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()
      // {
        this.timer = setInterval(this.getTime, 1000);
      // }
    },
    beforeDestroy() {
      clearInterval(this.timer);
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
      }
    },
    async mounted() {
      let that = this
      this.getChartsData()
      // this.timer = setInterval(function(){
      //      // that.getRouteList()
      //            axios.get('https://live.eliangeyun.com/api/v1/device/channellist')
      //              .then(resp =>{
      // 图表重置 myChart.setOption
      //                that.aa = resp.data.ChannelList
      //                for(var i=0;i<that.dataList.length;i++){
      //                  console.log('ssss',that.dataList[i].Status);
      //                }

      //              }).catch(err =>{
      //                console.log(err);
      //              });
      //    }, 2000);
      //获取新闻列表
      // this.getNewList()
      gChartsData().toPromise().then(res => {
        console.log(res)
        this.chartsData = res
        this.carCount1 = res[6].biViewInfoList[0].count
        this.carCount2 = res[6].biViewInfoList[1].count
        this.carCount3 = res[6].biViewInfoList[2].count
        this.inventoryCost = res[7].biViewInfoList[0].count
        this.inventoryValue =  res[7].biViewInfoList[1].count
        this.totalReserves = res[8].biViewInfoList
        this.initCharts()
      })
      // 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']),
      getChartsData() {
        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
        })
      },
      getTime() {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        this.month = check(month);
        this.day = check(day);
        this.hour = check(hour);
        this.minute = check(minute);
        this.second = check(second);

        function check(i) {
          const num = (i < 10) ? ('0' + i) : i;
          return num;
        }
        this.nowDate = year + '-' + this.month + '-' + this.day;
        this.nowTime = this.hour + ':' + this.minute + ':' + this.second;
      },
      initCharts() {
        let app = this;
        var roseCharts = document.getElementsByClassName('roseChart');
        for (let i = 0; i < roseCharts.length; i++) {
          let myChart = app.$echarts.init(roseCharts[i]);
          let color = []
          let data = []
          let text = ''
          let formatter = ''
          let graphicText = ''
          switch (i) {
            case 0:
              // 圆环图各环节的颜色
              color = ['#75d1f4', '#3a3b40'];
              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
              data = [{
                name: '已完成量',
                value: this.chartsData[i].biViewInfoList[0].count
              }, {
                name: '待完成量',
                value: this.chartsData[i].biViewInfoList[1].count
              }]
              text = '合同总量'
              formatter = '{b}{c}吨 </br> 占比{d}%'
              graphicText = ' \n\n总量合计\n\n' +Number(this.chartsData[i].total).toFixed(2)

              break;
            case 1:
              // 圆环图各环节的颜色
              color = ['#247ef4', '#3a3b40'];
              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
              data = [{
                name: '已开票',
                value: this.chartsData[i].biViewInfoList[0].count
              }, {
                name: '待开票',
                value: this.chartsData[i].biViewInfoList[1].count
              }]
              text = '合同总额'
              formatter = '{b}{c}元 </br> 占比{d}%'
                graphicText = ' \n\n开票合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
              break;
            case 2:
              // 圆环图各环节的颜色
              color = ['#f49f23', '#3a3b40'];
              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
              data = [{
                name: '已付款',
                value: this.chartsData[i].biViewInfoList[0].count
              }, {
                name: '待付款',
                value: this.chartsData[i].biViewInfoList[1].count
              }]
              text = '合同总额'
              formatter = '{b}{c}元 </br> 占比{d}%'
               graphicText = ' \n\n付款合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
              break;
            case 3:
              // 圆环图各环节的颜色
              color = ['#75d1f4', '#3a3b40'];
              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
              data = [{
                name: '已完成量',
                value: this.chartsData[i].biViewInfoList[0].count
              }, {
                name: '待完成量',
                value: this.chartsData[i].biViewInfoList[1].count
              }]
              text = '合同总量'
              formatter = '{b}{c}吨 </br> 占比{d}%'
               graphicText = ' \n\n总量合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
            case 4:
              // 圆环图各环节的颜色
              color = ['#247ef4', '#3a3b40'];
              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
              data = [{
                name: '已开票',
                value: this.chartsData[i].biViewInfoList[0].count
              }, {
                name: '待开票',
                value: this.chartsData[i].biViewInfoList[1].count
              }]
              text = '合同总额'
              formatter = '{b}{c}元 </br> 占比{d}%'
              graphicText = ' \n\n开票合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
              break;
            case 5:
              // 圆环图各环节的颜色
              color = ['#f49f23', '#3a3b40'];
              // 圆环图各环节的名称和值(系列中各数据项的名称和值)
              data = [{
                name: '已付款',
                value: this.chartsData[i].biViewInfoList[0].count
              }, {
                name: '待付款',
                value: this.chartsData[i].biViewInfoList[1].count
              }]
              text = '合同总额'
              formatter = '{b}{c}元 </br> 占比{d}%'
               graphicText = ' \n\n付款合计\n\n' + Number(this.chartsData[i].total).toFixed(2)
              break;
          }
          myChart.setOption({
            title: [{
              text: text,
              top: '2%',
              left: '3%',
              textStyle: {
                color: '#f4f4f4',
                fontSize: 18,
              }
            }],
            // 图例
            legend: [{
              selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
              top: '10%',
              left: 'center',
              con: 'circle',
              itemWidth: 10, // 设置宽度
              itemHeight: 10, // 设置高度
              itemGap: 40, // 设置间距
              textStyle: { // 图例的公用文本样式。
                fontSize: 14,
                color: '#fff'
              },
              data: data
            }],

            // 提示框
            tooltip: {
              show: true, // 是否显示提示框
              formatter: formatter // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
            },

            // graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
            graphic: {
              type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
              top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom，则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素，父元素是 echarts 图表容器。如果是 group 的子元素，父元素就是 group 元素。
              left: 'center', // 同上
              style: {
                text: graphicText, // 文本块文字。可以使用 \n 来换行。[ default: '' ]
                fill: '#fff', // 填充色。
                fontSize: 16, // 字体大小
                fontWeight: 'bold' // 文字字体的粗细，可选'normal'，'bold'，'bolder'，'lighter'
              }
            },

            // 系列列表
            series: [{
              name: '', // 系列名称
              type: 'pie', // 系列类型
              center: ['50%', '55%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
              radius: ['45%', '55%'], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
              hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
              color: color, // 圆环图的颜色
              label: { // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
                normal: {
                  show: true, // 是否显示标签[ default: false ]
                  position: 'outside', // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
                  formatter: '{c}', // 标签内容
                  color: '#d5d5d6',
                  fontSize: 16,
                }
              },
              labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
                normal: {
                  show: true, // 是否显示视觉引导线。
                  length: 15, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                  length2: 10, // 视觉引导项第二段的长度。
                  lineStyle: { // 视觉引导线的样式
                    //color: '#000',
                    //width: 1
                  }
                }
              },
              data: data // 系列中的数据内容数组。
            }]
          })
          myChart.off('click');
          myChart.on('click', function(params) {
            //  var a = params.dataIndex
            console.log(params, '我被点击了');
            app.dialogVisible = true
          })
        }
        debugger
        console.log(this.totalReserves)
        let _x = []
        let _y = []
        for(let i = 0;i<this.totalReserves.length;i++){
          _x.push(this.totalReserves[i].name)
          _y.push(this.totalReserves[i].count)
        }
        
        // 柱状图
        let myChart7 = app.$echarts.init(this.$refs.myEchart7);
        var zoption = {
          grid: {
            left: '0',
            right: '0',
            bottom: '0',
            top: '30',
            containLabel: true
          },
          // ---  提示框 ----
          tooltip: {
            show: true, // 是否显示提示框，默认为true
            trigger: 'item', // 数据项图形触发
            axisPointer: { // 指示样式
              type: 'shadow',
              axis: 'auto'
            },
            padding: 5,
            textStyle: { // 提示框内容的样式
              color: '#fff'
            }
          },
        
          //  ------  X轴 ------
          xAxis: {
          
            axisLabel: { // 坐标轴标签
              show: true, // 是否显示
              inside: false, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 10, // 刻度标签与轴线之间的距离
              color: '#666', // 默认取轴线的颜色
              interval: 0,
              rotate: 40
            },
         
            splitArea: { // 网格区域
              show: false // 是否显示，默认为false
            },
            data: _x
          },
          //   ------   y轴  ----------
          yAxis: {
          
            axisLine: { // 坐标轴 轴线
              show: false, // 是否显示
           
            },
           
            axisLabel: { // 坐标轴的标签
              show: true, // 是否显示
              inside: false, // 是否朝内
              rotate: 0, // 旋转角度
              margin: 8, // 刻度标签与轴线之间的距离
              color: '#666', // 默认轴线的颜色
            },
            splitLine: { // gird 区域中的分割线
              show: true, // 是否显示
              lineStyle: {
                color: '#666',
                width: 1,
                type: 'dashed'
              }
            }
          },
          //  -------   内容数据 -------
          series: [{
            name: '储量', // 序列名称
            type: 'bar', // 类型
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            // label: {   // 图形上的文本标签
            //   show: false,
            //   position: 'insideTop', // 相对位置
            //   rotate: 0,  // 旋转角度
            //   color: '#eee'
            // },
            itemStyle: { // 图形的形状
              color: '#3779fd'
              // barBorderRadius: [18, 18, 0 ,0]


            },
            barWidth: 20, // 柱形的宽度
            barCategoryGap: '20%', // 柱形的间距
            label: {
              show: true,
              position: 'top',
              color: '#b0b1b3'
            },
            data: _y
          }]
        };
        myChart7.setOption(zoption)
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 下载通知通函
      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(localStorage.getItem('ws_login_getTenantInfoByUser'))
        if (statusFlag * 1 === 3) {
          // 判断后台返回的是空 还是 0  是空还是 0 的时候请求后台接口 不懂啥意思 为啥要这么弄
          if (!loginFlag && !localStorage.getItem('isShowTryUserDialog') * 1) {
            let newId = JSON.parse(localStorage.getItem('ws_login_accountId'))
            this.phone = customerServiceStaffPhone
            this.successfulDialog = true
            localStorage.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 && !localStorage.getItem(
            'isShowTryUserDialog') * 1) {
          this.day = daysRemaining
          this.phone = customerServiceStaffPhone
          this.trialNotExpired = true
          localStorage.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: localStorage.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: localStorage.getItem('ws-pf_userId'),
          typeId: 'shipMap',
          showFlag: false
        }])
      },
      getRouteList() {
        let data = {
          accountId: localStorage.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: localStorage.getItem('ws-pf_userId'),
          compId: localStorage.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:
      //       localStorage.getItem('ws-pf_vesselBankFlag') === 'V'
      //         ? localStorage.getItem('ws-pf_vesselId')
      //         : localStorage.getItem('ws-pf_deptId'),
      //     compId: localStorage.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 = '';
            var flag = false;
            for (var i = value.length - 1; i >= 0; i--) {
              var tmp = String.fromCharCode(value[i])
              if (tmp == '=') {
                flag = true
              }
              if (flag && result.length < 9 && tmp != '=') {
                result += tmp
              }
            }

            // setTimeout(1000)
            if (parseInt(result)) {
              console.log('result:', result);
              this.text = parseInt(result)
            }
            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 - 80px);
    }

    .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;
    }
  }

  .header {
    // background: rgb(36, 38, 45);
    background: #2a2a2a;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .right {
      color: white;
      font-weight: 700;
      text-align: center;

      .top {
        font-size: 14px;
      }

      .bottom {
        font-size: 26px;
      }
    }
  }

  .chart-card {
    // background: rgb(36, 38, 45);
    position: relative;
    background: #2a2a2a;
    width: 350px;
    margin-top: 10px;
    height: 288px;
    // height: 288px;
  }

  .title2 {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-family: "Microsoft Yahei", Arial, "sans-serif";
    font-size: 15px;
    writing-mode: horizontal-tb;
    letter-spacing: 0px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;

  }

  .content2 {
    // background-color: rgb(27, 28, 30);
    display: flex;
    margin-top: 10px;
    height: calc(100% - 170px);

    h3 {
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: rgb(204, 204, 204);
      font-weight: bold;
      font-family: "Microsoft Yahei", Arial, "sans-serif";
      font-size: 24px;
      writing-mode: horizontal-tb;
      letter-spacing: 0px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .center-map {
      // background: yellow;
    }

    .content2-aside {
      width: 360px;
      // height: 288px;
      // background: red;
    }

    .content2-middle {
      width: calc(100% - 720px);
      margin: 0 20px 0 15px;

      .left-card {
        display: flex;
        // background: green;
        justify-content: space-evenly;

        .item {
          background: #2a2a2a;
          width: 28%;
          height: 208px;
          position: relative;
          padding-left: 20px;

          p:nth-of-type(1) {
            color: #d5d5d5;
            position: absolute;
            bottom: 70px;
            font-size: 16px;
          }

          p:nth-of-type(2) {
            position: absolute;
            bottom: 0px;

            .number {
              color: #50cad4;
              font-size: 53px;
              font-weight: 700;
            }

            .number-text {
              color: #d5d5d5;
            }
          }
        }
      }

    }
  }

  .home {
    background: rgb(27, 28, 30);
    padding-bottom: 20px
  }

  .home .body-middle-height {
    height: auto;
  }

  .content2-map {
    margin: 0;
  }

  .content3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2a2a2a;
    padding: 10px 60px;

    .content3-number {
      margin-left: 40px;
    }

    .blue {
      font-size: 30px;
      color: #50cad4;
      font-weight: 600;
    }

    .yellow {
      font-size: 30px;
      color: #ffa523;
      font-weight: 600;
    }

    .left,
    .right {
      display: flex;
      align-items: center;
      color: #d5d5d5;
    }

    img {
      display: inline-block;
      width: 35px;
      height: 35px;
    }

  }
  .bottom-tip{
    position: absolute;
    z-index: 11;
    color: #8c8c8d;
    right: 10px;
    bottom: 10px;
  }

</style>