src/views/home.vue

<template>
  <div>
    <div class="index_cont" v-show="see">
      <div class="banner">
        <div class="ban-tit"></div>
      </div>
      <div class="berth">
        <h1 class="title">泊位分布</h1>
        <div class="map" id="map"></div>
        <div class="berth-num">
          <p>区域泊位规划</p>
          <ul class="berth-list">
            <li v-for="(result,id) in resultMap" :key="id" >
              <span class="fl">{{result.areaName}}</span>
              <span class="fr">{{result.berthNum}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="news-wrap">
        <h1 class="title">新闻/公告中心</h1>
        <div class="fl news-bg"></div>
        <ul class="fl news-con">
          <li class="clearfix" v-for="(news,id) in newsList" :key="id" @click="showNews(news.noticeId)">
            <span class="ITD-hidden-nowrap ITD-common-color070">{{news.noticeTitle}}</span>
            <span class="ITD-common-color050">{{news.effDate | string2Date(1)}}</span>
          </li>
        </ul>
        <!--分页器-->
        <i-pagination
          :total="pageTotal"
          :page="currentPage"
          :limit="pageSize"
          :layout="'total, prev, pager, next'"
          :page-sizes="pageSizeS"
          :hidden="false"
          @pagination="handleSizeChange"
        />
      </div>
    </div>
    <div class="news_cont" v-if="!see">
      <div class="returnLastbtn" @click="backIndex()">返回</div>
      <div v-html="newscontent"></div>
    </div>
  </div>
</template>
<script>
  import {queryParkLotInfoByOrgId,queryNoticeForPage,queryNotice} from '@/api/park';
  import pagination from '@/components/Pagination/index.vue'
  import {string2Date} from '@/filters/index';
  import parkIco from '../assets/home/parkIco.png'; //以import的方式导入图片文件
  export default {
    name: 'home',
    components: {
      'i-pagination': pagination,
      // timeOneFormatter,
    },
    data() {
      return {
        parkList: [],
        resultMap: [],
        newsList: [],
        //新闻详情开关
        see:true,
        /** 分页*/
        currentPage: 1,
        pageSize: 7,
        pageSizeS: [8, 16],
        pageTotal: 0,
        //新闻详情
        newscontent:'',
      }
    },
    computed: {
     /* hsgtotalSumAll() {
        let hsgtotalSumAll = 0;
        this.parkList.map((item) => {
          if (item.plCountryName === '黄石港区') {
            hsgtotalSumAll += item.plBerthNum;
          }
        });
        return hsgtotalSumAll;
      },*/
    },
    created() {
      queryParkLotInfoByOrgId({
        sysCode: '1001',
        orgId: '10079',
        plBusiType:'3',
      }).then((response) => {
        const mapDatas = response.data;
        this.parkList = mapDatas;
        this.baiduMap(mapDatas);
        this.getAreaData(mapDatas);
      })
    },
    mounted() {
      this.getNoticeForPage();
    },
    methods: {
      //泊位分布 list 区间---泊位数
      getAreaData(arrayData) {
        let berthMap = {};
        let areaMap = {};
        if (arrayData === null || arrayData === undefined || arrayData.length === 0) {
          return resultMap;
        }
        arrayData.forEach((item,index)=>{
          let plBerthNum = item.plBerthNum;
          if(plBerthNum === undefined || plBerthNum === null){
            plBerthNum = 0;
          }
          if(areaMap[item.plCountryId] === null || areaMap[item.plCountryId] === undefined){
            areaMap[item.plCountryId] = item.plCountryName;
          }
          if(berthMap[item.plCountryId] === null || berthMap[item.plCountryId] === undefined){
            berthMap[item.plCountryId] =plBerthNum;
          }else{
            berthMap[item.plCountryId] = berthMap[item.plCountryId]+plBerthNum;
          }
        });
        for(let berthId in berthMap){
          this.resultMap.push({
            areaName:areaMap[berthId],
            berthNum:berthMap[berthId]
          })
        }
      },
      //泊位分布 地图展示
      baiduMap(mapDatas) {
        if (mapDatas.length === 0) {
          // 百度地图API功能
          let map = new BMap.Map("map", {enableMapClick: false});
          let point = new BMap.Point(115.078186, 30.232887);
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
          let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
          let top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
          let top_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
          }); //右上角，仅包含平移和缩放按钮
          map.addControl(top_left_control);
          map.addControl(top_left_navigation);
          map.addControl(top_right_navigation);
          map.clearOverlays();
        }
        else {
          // 百度地图API功能
          let map = new BMap.Map("map", {enableMapClick: false});
          let point = new BMap.Point(mapDatas[0].lonId, mapDatas[0].latId);
          map.centerAndZoom(point, 18);
          map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
          let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
          let top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
          let top_right_navigation = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_SMALL
          }); //右上角，仅包含平移和缩放按钮
          map.addControl(top_left_control);
          map.addControl(top_left_navigation);
          map.addControl(top_right_navigation);
          map.clearOverlays();
          let i = 0;
          let points = [];
          /* data.reduce((acc, character) => {
             return character.name === '黄石港区' ? acc += character.num : acc
           }, 0)*/
          for (let item in mapDatas) {
            (function (x) {
              let itemthat = item;
              //创建标注
              let pt = new BMap.Point(mapDatas[item].lonId, mapDatas[item].latId);
              points[i] = pt;
              let myIcon = new BMap.Icon(parkIco,
                new BMap.Size(29, 40), {
                  offset: new BMap.Size(10, 40),
                  textColor: '#fff'
                });
              let marker = new BMap.Marker(pt, {icon: myIcon});
              // marker.setTop(true,27000000);
              map.addOverlay(marker);
              let myLabel;
              marker.addEventListener("mouseover", (e) => {
                map.removeOverlay(myLabel);
                let that = this;
                myLabel = new BMap.Label(
                  `<div class="dislog-wrap" title="${mapDatas[itemthat].plName}">${mapDatas[itemthat].plName}</div>`,
                  {
                    offset: new BMap.Size(40, 0),   //label的偏移量，为了让label的中心显示在点上
                    position: pt
                  });
                myLabel.setStyle({
                    color: "#fff",
                    fontSize: "14px",
                    //
                    whiteSpace: "nowrap",
                    height: "24px",
                    width: "auto",
                    textAlign: "center",
                    lineHeight: "24px",
                    padding: "0 8px",
                    border: "0",
                    backgroundColor: "#ff8600",
                    borderRadius: "10px",
                    zIndex: "1000"
                  }
                );
                marker.setLabel(myLabel)
                marker.setTop(true, 27000000);
              });
              marker.addEventListener("mouseout", function (e) {
                map.removeOverlay(myLabel);
              });
              i++;
            })(i);
          }
        }
      },
      //新闻中心
      getNoticeForPage(){
        let req={
          baseRequest:{
            pageNum:this.currentPage,
            pageSize:this.pageSize
          },
          sysCode: '1001',
          noticeBigTypes: [100,200],
          orgIds: [10079],
        };
        queryNoticeForPage(req).then((response) => {
           this.pageTotal = response.data.total;
           this.newsList = response.data.rows;
           console.log(this.newsList)
        })
      },
      // 获取子组件页码方法
      handleSizeChange: function(pages) {
        this.currentPage = pages.page;
        this.pageSize = pages.limit;
        this.getNoticeForPage();
      },
      //新闻详情
      showNews (showNews) {
        let noticeId=showNews;
        queryNotice({
          sysCode: '1001',
          orgId: '10079',
          noticeId:noticeId,
        }).then((response) => {
          scrollTo(0, 800);
          this.see = false;
          this.newscontent = response.data.noticeContent;
        })
      },
      //返回首页
      backIndex:function () {
        this.see = true;
      },
    }
  }
</script>
<style  lang="scss">
  .index_cont .banner {
    background: url("../assets/home/hs_bannerico.jpg") no-repeat center center;
    background-size: 100% 100%;
    padding-top: 108px;
    .ban-tit {
      height: 80px;
      width: 776px;
      background: url("../assets/home/hs_banner_msg.png") no-repeat center center;
      background-size: 100% 100%;
      margin: 0 auto;
      /*margin-top: 108px;*/
    }
  }
  .index_cont .berth {
    width: 1200px;
    height: 823px;
    padding: 50px 0;
    position: relative;
    margin: 0 auto;
  }
  .index_cont .map {
    width: 1200px;
    height: 600px;
  }
  .index_cont .berth-num {
    width: 323px;
    height: 368px;
    position: absolute;
    top: 200px;
    right: 80px;
    background: url("../assets/home/berth.png") no-repeat;
    p {
      padding-top: 20px;
      font-size: 20px;
    }
  }
  .index_cont .berth-list {
    margin-top: 50px;
    li {
      height: 21px;
      line-height: 21px;
      font-size: 16px;
      color: #314659;
      padding: 0 40px 30px 60px;
      background: url("../assets/home/berth-list.png") no-repeat 30px 0;
      margin-bottom: 15px;
    }
  }
  .index_cont .news-wrap {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    overflow: hidden;
  }
  .index_cont .title {
    padding-bottom: 50px;
    font-size: 38px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(49, 70, 89, 1);
    line-height: 46px;
  }
  .index_cont .news-bg {
    width: 589px;
    height: 341px;
    margin-right: 45px;
    background: url("../assets/home/newsBg.png") no-repeat;
  }
  .index_cont .news-con {
    width: 535px;
    height: 301px;
  }
  .index_cont .news-con > li {
    cursor: pointer;
    /*padding: 5px 0;*/
    font-size: 16px;
    color: #000;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid rgba(216, 216, 216, 1);
    span:first-of-type{
      float: left;
      width: calc(100% - 80px);
      display: inline-block;
      vertical-align: middle;
      font-size: 16px;
      text-align: left;
    }
    span:nth-of-type(2){
      font-size: 14px;
      color: rgba(0,0,0,0.5);
      float: right;
      text-align: justify;
    }
  }
/*
  .date {
    width: 83px;
    height: 83px;
    margin-right: 20px;
    background: #FF5656;
    position: relative;
    h3 {
      padding-top: 15px;
      font-size: 32px;
      color: rgba(255, 255, 255, 1);
    }
    h5 {
      font-size: 12px;
      text-align: right;
      padding-right: 10px;
      color: #Fff;
    }
    &:before {
      content: '';
      position: absolute;
      right: 14px;
      bottom: 36px;
      transform: rotate(-45deg);
      width: 25px;
      height: 1px;
      background: rgba(255, 255, 255, 1)
    }
  }
  .des h3 {
    padding-bottom: 15px;
    font-size: 20px;
    color: #0D1A26;
    cursor: pointer;
  }
  .des p {
    width: 430px;
    line-height: 22px;
    color: #314659;
  }*/
  /*.index_cont .dislog-wrap {
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding: 0 4px;
    border-radius: 4px;
    background-color: #3a8ee6;
    color: #fff;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
  }*/
  /*新闻内容 样式*/
  .news_cont h1 {
    font-size: 36px !important;
  }
  .news_cont h1,.news_cont h2,.news_cont h3,.news_cont h4,.news_cont h5,.news_cont h6 {
    font-weight: 300 !important;
  }
  .news_cont h2 {
    font-size: 36px !important;
  }
  .index_cont a {
    text-shadow: none !important;
    color: #337ab7 !important;
  }
  .news_cont{
    padding: 20px;
  }
  .news_cont .returnLastbtn{
    cursor: pointer;
    width: 60px;
    height: 24px;
    text-align: center;
    line-height: 22px;
    background: #da2431 !important;
    color: #fff !important;
    border: 1px solid #da2431 !important;
    border-radius: 4px!important;
    box-sizing: border-box;
  }
  .news_cont #title p {
    margin: 20px 0 !important;
    text-align: center;
  }
  .news_cont #content p {
    margin: 20px 0 !important;
    text-align: left;
    text-indent: 24px;
    line-height:24px;
  }
</style>