BJ_web_developers / HSpark

<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="routebox">
          <div class="searchbox-content-common routebox-content">
            <div class="routebox-inputs">
              <div class="routebox-input route-start">
                <div class="route-input-icon"></div>
                <input autocomplete="off" id="startAddress" maxlength="256" placeholder="输入起点" class="route-start-input" type="text" value="">
              </div>
              <div class="routebox-input route-end">
                <div class="route-input-icon"></div>
                <input autocomplete="off" id="endAddress" maxlength="256" placeholder="输入终点" class="route-end-input" type="text" value="">
              </div>
            </div>
          </div>
        </div>
        <button id="search-button" data-title="搜索" @click='searchByStationName1()'></button>
        <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>
  var map;
  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,
        from: null,
        to: null,
        address_detail: null, //详细地址
        userlocation: {lng: "", lat: ""},
        //新闻详情
        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功能
          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);
          const ctrl = new BMapLib.TrafficControl({
            showPanel: true , // 是否显示路况提示面板
          });
          map.addControl(ctrl);
          ctrl.showTraffic({ predictDate: { hour: 15, weekday: 5 } });
          ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
          ctrl.setOffset(new BMap.Size(85, 27));
          var localSearch = new BMap.LocalSearch(map);
          localSearch.enableAutoViewport(); //允许自动调节窗体大小
          map.clearOverlays();
        }
        else {
          var th = this;
          // 百度地图API功能
          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);
          const ctrl = new BMapLib.TrafficControl({
            showPanel: true , // 是否显示路况提示面板
          });
          map.addControl(ctrl);
          ctrl.showTraffic({ predictDate: { hour: 15, weekday: 5 } });
          ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
          ctrl.setOffset(new BMap.Size(85, 27));
          var localSearch = new BMap.LocalSearch(map);
          localSearch.enableAutoViewport(); //允许自动调节窗体大小
          //起点自动搜索功能
          var ac1 = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
              "input": "startAddress","location": map
            })
          var myValue;
          ac1.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
            this.address_detail = myValue
            setPlace();
          });
          function setPlace() {
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun() {
              th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
              map.centerAndZoom(th.userlocation, 18);
              map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
            }

            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
          };
          //终点自动搜索功能
          var ac2 = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
              "input": "endAddress","location": map
            })
          var myValue1;
          ac2.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue1 = _value.province + _value.city + _value.district + _value.street + _value.business;
            this.address_detail = myValue1
            setPlace1();
          });
          function setPlace1() {
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun1() {
              th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
              map.centerAndZoom(th.userlocation, 18);
              map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
            }

            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun1
            });
            local.search(myValue);
          }
          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);
          }
        }
      },
      searchByStationName1: function () {
        var _this = this;
        var startAddrr = document.getElementById("startAddress").value;//获得起点地名
        var localSearch = new BMap.LocalSearch(map);
        localSearch.setSearchCompleteCallback(function (searchResult) {
          var poi = searchResult.getPoi(0);//获得起点经纬度坐标
          if (poi != null) { //判断地名是否存在
            console.log('from poi', poi);
            _this.from = poi.point;
            console.log('from', _this.from);
            _this.searchByStationName2();
          }
          else{
            alert("请输入正确的地名！")
          }
        });
        localSearch.search(startAddrr);
      },
      searchByStationName2: function () {
        var _this = this;
        var endAddrr = document.getElementById("endAddress").value; //获得目的地地名
        var localSearch = new BMap.LocalSearch(map);
        localSearch.setSearchCompleteCallback(function (searchResult) {
          var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
          if (poi != null) { //判断目的地是否存在
            _this.to = poi.point;
            _this.run();
          }
          else{
            alert("请输入正确的地名！")
          }

        });
        localSearch.search(endAddrr);
      },
      run: function () {
        map.clearOverlays() // 清除地图上所有的覆盖物
        var driving = new BMap.DrivingRoute(map) // 创建驾车实例
        driving.search(this.from, this.to) // 搜索
        let that = this;
        driving.setSearchCompleteCallback(function () {
          console.log('completeCallback start!');
          var pts = driving.getResults().getPlan(0).getRoute(0).getPath() // 通过步行实例，获得一系列点的数组

          var polyline = new BMap.Polyline(pts);
          map.addOverlay(polyline);
          console.log('pollyline!', polyline);
          var m1 = new BMap.Marker(that.from); // 创建2个marker
          var m2 = new BMap.Marker(that.to);
          map.addOverlay(m1)
          map.addOverlay(m2)

          var lab1 = new BMap.Label('起点', {position: that.from}) // 创建2个label
          var lab2 = new BMap.Label('终点', {position: that.to})
          map.addOverlay(lab1)
          map.addOverlay(lab2)
          console.log('setTimeout!');
          setTimeout(function () {
            map.setViewport([that.from, that.to]) // 调整到最佳视野
          }, 1000)
        })
      },
      //新闻中心
      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;
    bottom: 70px;
    left: 8px;
    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;
    }
  }
  #tcWrap .maplibTcColor{
    height: 15px;
  }
  /*路线规划*/
  .routebox {
    -webkit-transition: max-height 1s ease-in;
    transition: max-height 1s ease-in;
    overflow: hidden;
    position: absolute;
    top: 160px;
    right: 87px;
    width: 289px;
    height: 80px;
  }
  .routebox .routebox-content {
    height: auto!important;
    position: relative;
  }
  .searchbox-content .searchbox-content-common {
    box-sizing: border-box;
    float: left;
    width: 329px;
    height: 38px;
  }
  .routebox .routebox-content .routebox-input {
    height: 40px;
    width: 289px;
    border-bottom: 1px solid #eaebed;
    position: relative;
  }
  .routebox .routebox-content .routebox-input .route-input-icon {
    width: 11px;
    height: 10px;
    background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/start_ee17f81.png) no-repeat 0 0;
    position: absolute;
    top: 15px;
    left: 3px;
  }
  .routebox .routebox-content .routebox-input input {
    box-sizing: border-box;
    border: 0;
    height: 100%;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    border-left: 20px solid transparent;
    border-right: 27px solid transparent;
    line-height: 20px;
    outline: 0;
    font-family: inherit;
  }
  .routebox .routebox-content .routebox-input {
    height: 40px;
    width: 289px;
    border-bottom: 1px solid #eaebed;
    position: relative;
  }
  .routebox .routebox-content .routebox-input:last-child {
    border-bottom: 0;
  }
  .routebox .routebox-content .routebox-input.route-end .route-input-icon {
    background: url(//webmap0.bdimg.com/wolfman/static/common/images/new/end_e68ad9a.png) no-repeat 0 0;
  }
  #search-button {
    pointer-events: auto;
    background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/searchbox_5c0d97d.png) no-repeat 0 -76px #3385ff;
    width: 57px;
    height: 38px;
    float: left;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    box-shadow: 1px 2px 1px rgba(0,0,0,.15);
    outline: 0;
    font-family: inherit;
    position: absolute;
    top: 160px;
    right: 30px;
  }
  /*新闻内容 样式*/
  .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>