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" id="news-content" class="news-content"></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;

    }

    .news-content{
      margin-top: 20px;
    }
    #news-content p{
      margin: 20px 0;
      text-align: left;
      line-height: 20px;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
    #news-content a {
      text-shadow: none;
      color: #337ab7;
    }

  </style>