add 新闻中心请求后端动态显示新闻详情页面展示

Andy
1 parent 8957e288
Showing 5 changed files with 388 additions and 135 deletions
src/api/park.js
src/assets/home/newsBg.png
src/assets/home/parkIco.png
src/components/Pagination/index.vue
src/views/home.vue
 import request from '@/utils/request'
  
 /**
- * 获取车主账户
+ * 获取车场 泊位区间 泊位等信息
  * @param param
  */
 export function queryParkLotInfoByOrgId(param) {
@@ -11,3 +11,26 @@ export function queryParkLotInfoByOrgId(param) {
     data:param
   })
 }
+
+/**
+ * 获取新闻中心信息
+ * @param param
+ */
+export function queryNoticeForPage(param) {
+  return request({
+    url: 'http://sys.service.huangshiparking.com/sysNotice/queryNoticeForPage',
+    method: 'post',
+    data:param
+  })
+}
+/**
+ * 获取新闻中心信息
+ * @param param
+ */
+export function queryNotice(param) {
+  return request({
+    url: 'http://sys.service.huangshiparking.com/sysNotice/queryNotice',
+    method: 'post',
+    data:param
+  })
+}
@@ -77,13 +77,13 @@ export default {
     handleSizeChange(val) {
       this.$emit('pagination', { page: this.currentPage, limit: val })
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        //scrollTo(0, 800)
       }
     },
     handleCurrentChange(val) {
       this.$emit('pagination', { page: val, limit: this.pageSize })
       if (this.autoScroll) {
-        scrollTo(0, 800)
+        //scrollTo(0, 800)
       }
     }
   }
 <template>
   <div>
-    <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>
-            <span class="fl">黄石铁山区</span>
-            <span class="fr">123</span>
-          </li>
-          <li>
-            <span class="fl">黄石下陆区</span>
-            <span class="fr">5007</span>
-          </li>
-          <li>
-            <span class="fl">黄石黄石港区</span>
-            <span class="fr">2395</span>
-          </li>
-          <li>
-            <span class="fl">黄石西塞山区</span>
-            <span class="fr">1188</span>
-          </li>
-          <li>
-            <span class="fl">黄石经济开发区</span>
-            <span class="fr">413</span>
+    <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-wrap">
-      <h1 class="title">新闻中心</h1>
-      <div class="fl news-bg"></div>
-      <ul class="fl news-con">
-        <li>
-          <ul>
-            <li class="fl date">
-              <h3>06</h3>
-              <h5>06</h5>
-            </li>
-            <li class="fl des">
-              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16613')"><a>集聚人才新优势   激活发展新动能</a></h3>
-              <p>6月6日上午，市城发集团召开优秀青年人才表彰会，对四家重才爱才先进单位和十名优秀青年人才进行了表彰。</p>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <ul>
-            <li class="fl date">
-              <h3>06</h3>
-              <h5>06</h5>
-            </li>
-            <li class="fl des">
-              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16611')"><a>黄石城发集团春季招聘体检公告</a></h3>
-              <p>根据《黄石市城市发展投资集团有限公司春季招聘公告》及复试情况，现将体检人员名单及有关事项公告如下。</p>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <ul>
-            <li class="fl date">
-              <h3>06</h3>
-              <h5>05</h5>
-            </li>
-            <li class="fl des">
-              <h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16610')"><a>黄石城发集团再添新成员</a></h3>
-              <p>6月4日，市妇联和市城发集团签订协议，将市妇联所属市天宝幼儿园和市儿童活动中心移交给市城发集团。</p>
-            </li>
-          </ul>
-        </li>
-      </ul>
+    <div class="news_cont" v-if="!see">
+      <div class="returnLastbtn" @click="backIndex()">返回</div>
+      <div v-html="newscontent"></div>
     </div>
   </div>
 </template>
  
 <script>
-  import {queryParkLotInfoByOrgId} from '@/api/park';
+  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() {
-      // 百度地图API功能
-      var map = new BMap.Map("map", {enableMapClick:false});
-      var point = new BMap.Point(115.078186, 30.232887);
-      map.centerAndZoom(point, 15);
-      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
-      var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
-      var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
-      var 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);
-      this.showParking();
+      this.getNoticeForPage();
     },
-    methods:{
-      showParking:function () {
-        let req={
-          sysCode:'1001',
-          orgId:'1003'
+    methods: {
+      //泊位分布 list 区间---泊位数
+      getAreaData(arrayData) {
+        let berthMap = {};
+        let areaMap = {};
+        if (arrayData === null || arrayData === undefined || arrayData.length === 0) {
+          return resultMap;
         }
-        queryParkLotInfoByOrgId(req).then(response =>{
-          if(response.code=='8888'){
-            debugger
-            this.orgs = response.data;
+        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{
-            console.log(response);
+            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 scoped lang="scss">
-  .banner {
+<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{
+    .ban-tit {
       height: 80px;
       width: 776px;
       background: url("../assets/home/hs_banner_msg.png") no-repeat center center;
@@ -130,33 +286,35 @@
     }
   }
  
-  .berth {
+  .index_cont .berth {
     width: 1200px;
     height: 823px;
     padding: 50px 0;
     position: relative;
     margin: 0 auto;
   }
-  .map{
+
+  .index_cont .map {
     width: 1200px;
     height: 600px;
   }
  
-  .berth-num{
+  .index_cont .berth-num {
     width: 323px;
     height: 368px;
     position: absolute;
-    top:200px;
+    top: 200px;
     right: 80px;
     background: url("../assets/home/berth.png") no-repeat;
-    p{
+    p {
       padding-top: 20px;
       font-size: 20px;
     }
   }
-  .berth-list{
+
+  .index_cont .berth-list {
     margin-top: 50px;
-    li{
+    li {
       height: 21px;
       line-height: 21px;
       font-size: 16px;
@@ -166,59 +324,77 @@
       margin-bottom: 15px;
     }
   }
-  .news-wrap{
+
+  .index_cont .news-wrap {
     width: 1200px;
     margin: 0 auto;
     padding: 50px 0;
     overflow: hidden;
   }
-  .title{
+
+  .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;
+    font-size: 38px;
+    font-family: PingFangSC-Semibold;
+    font-weight: 600;
+    color: rgba(49, 70, 89, 1);
+    line-height: 46px;
   }
-  .news-bg{
-    width: 535px;
-    height: 401px;
+
+  .index_cont .news-bg {
+    width: 589px;
+    height: 341px;
     margin-right: 45px;
-    background: url("../assets/home/news-bg.png") no-repeat;
+    background: url("../assets/home/newsBg.png") no-repeat;
   }
  
-  .news-con {
+  .index_cont .news-con {
     width: 535px;
-    height: 401px;
+    height: 301px;
   }
  
-  .news-con>li{
-    height: 129px;
-    border-bottom: 1px solid rgba(216,216,216,1);
-    ul{
-      padding: 25px 0 0;
-      overflow: hidden;
+  .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{
+/*
+  .date {
     width: 83px;
     height: 83px;
     margin-right: 20px;
     background: #FF5656;
     position: relative;
-    h3{
+    h3 {
       padding-top: 15px;
-      font-size:32px;
-      color:rgba(255,255,255,1);
+      font-size: 32px;
+      color: rgba(255, 255, 255, 1);
     }
-    h5{
+    h5 {
       font-size: 12px;
       text-align: right;
       padding-right: 10px;
       color: #Fff;
     }
-    &:before{
+    &:before {
       content: '';
       position: absolute;
       right: 14px;
@@ -226,18 +402,72 @@
       transform: rotate(-45deg);
       width: 25px;
       height: 1px;
-      background:rgba(255,255,255,1)
+      background: rgba(255, 255, 255, 1)
     }
   }
-  .des h3{
+
+  .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>