mobileBar实现消息分组显示

src/components/map.vue

@@ -267,7 +267,7 @@ export default {
             class: 'basemap',
             title: 'cdut',
             source: new TileSource({
-              url: 'http://cn-gz-ali-1.sakurafrp.com:10265/geoserver/CDUT/wms',
+              url: 'http://cn-cd-ali-1.natfrp.cloud:10265/geoserver/CDUT/wms',
               crossOrigin: 'anonymous',
               params: {
                 LAYERS: 'cdut_920',
@@ -965,12 +965,37 @@ export default {
       var that = this
 
       // mobile端：绘制报道标识与popup弹窗
-      bus.$on('showReportDetail', async id => {
-        that.loadReportByID(id)
-          .then(res => {
-            that.printFeature('markLayer', res, 'report', true, true, true)
-            that.isShow = true
-          })
+      bus.$on('showMsgDetail', async msg => {
+        let data
+        let id = msg.id
+        switch (msg.type) {
+          case 'notice':
+            await that.loadNoticeByID(id)
+              .then(res => {
+                data = res
+              })
+            break
+          case 'report':
+            await that.loadReportByID(id)
+              .then(res => {
+                data = res
+              })
+            break
+          case 'culture':
+            await that.loadCultureByID(id)
+              .then(res => {
+                data = res
+              })
+            break
+          case 'other':
+            await that.loadOthersByID(id)
+              .then(res => {
+                data = res
+              })
+            break
+        }
+        that.printFeature('markLayer', data, msg.type, true, true, true)
+        that.isShow = true
       })
 
       // PC端：根据各个类型的id 绘制地图标识与popup弹窗

src/components/mobileBar.vue

@@ -51,9 +51,9 @@
                 <b-list-group-item
                 style="font-size:10px"
                 button
-                v-for="item of reportData.reportList.slice((currentPage-1)*perPage,currentPage*perPage)"
+                v-for="item of listData.current.slice((currentPage-1)*perPage,currentPage*perPage)"
                 :key="item.id"
-                @click="showReportDetail(item.id)"
+                @click="showMsgDetail(item.id)"
                 >
                   <tr>
                     <td class="font-weight-bold">
@@ -66,15 +66,48 @@
           </div>
 
           <!-- 分页栏 -->
-          <div class="mt-2" id='pagin-div'>
+          <div id='pagin-div'>
             <b-pagination
-              v-model="currentPage"
+              pagination-small
               pills
+              v-model="currentPage"
               :total-rows="rows"
               :per-page="perPage"
-              align="center">
+              align="center" class="mt-0 mb-1">
             </b-pagination>
+          <!-- <el-row type="flex" class="row-bg" justify="center">
+            <el-pagination
+              :hide-on-single-page="value"
+              :total="5"
+              layout="prev, pager, next">
+            </el-pagination>
+          </el-row> -->
           </div>
+
+          <hr class="mt-0 mb-2"/>
+
+          <!-- 标签栏（按钮） -->
+          <div style="text-align:center; margin-bottom: 10px" id='list-btn-div'>
+            <!-- <b-button size="sm" pill variant="outline-success" @click="getNoticeList()">通知</b-button>
+            <b-button size="sm" pill variant="outline-success" @click="getReportList()">报道</b-button>
+            <b-button size="sm" pill variant="outline-success" @click="getCultureList()">文化</b-button>
+            <b-button size="sm" pill variant="outline-success" @click="getOthersList()">更多</b-button> -->
+            <b-form-radio-group
+              id="btn-radios-2"
+              v-model="selected"
+              buttons
+              button-variant="outline-primary"
+              size="sm"
+              name="radio-btn-outline"
+            >
+              <template v-for="option in options">
+                <b-form-radio :value="option.value" :key="option.text" class="rounded-pill mx-1"
+                 @change="updateList(option.value)">
+                {{ option.text }}
+                </b-form-radio>
+              </template>
+            </b-form-radio-group>
+        </div>
         </div>
       </div>
     </div>
@@ -94,9 +127,26 @@ export default {
       midHeight: window.screen.height * 0.32, //  底部栏中等高度
       isExpand: false, // 底部栏伸缩状态
       expandClass: 1, //  底部栏拉伸等级，0为最小，1为中，2为最大
-      reportData: {
-        reportList: [] // 通知列表数据
+
+      selected: 'radio1',
+      options: [
+        { text: '通知', value: 'radio1' },
+        { text: '报道', value: 'radio2' },
+        { text: '文化', value: 'radio3' },
+        { text: '更多', value: 'radio4' }
+      ],
+
+      // 列表数据
+      listData: {
+        current: [], // 当前，为以下4组数据之一
+        notice: [], // 通知
+        report: [], // 报道
+        culture: [], // 文化
+        others: [] // 更多
       },
+
+      currentMsgType: 'notice', // 通知列表当前显示的类型 0通知；1报道；2文化；3更多
+
       currentPage: 1, // 通知列表当前页数
       resetListener: true //  重置监听器的开关
     }
@@ -180,6 +230,19 @@ export default {
       resize.addEventListener('touchend', touchEnd, false)
     },
 
+    // 获取通知列表
+    getNoticeList: function () {
+      var that = this
+      this.$axios
+        .get('/notice/list')
+        .then(function (response) {
+          that.listData.notice = response.data
+          // 浅拷贝到当前的通知列表数组
+          that.listData.current = JSON.parse(JSON.stringify(that.listData.notice))
+          that.currentMsgType = 'notice'
+        })
+    },
+
     /**
      * @description:获取报道列表数据
      * @returns {void}
@@ -189,16 +252,71 @@ export default {
       this.$axios
         .get('/report/list')
         .then(function (response) {
-          that.reportData.reportList = response.data
+          that.listData.report = response.data
+          // 浅拷贝到当前的通知列表数组
+          that.listData.current = JSON.parse(JSON.stringify(that.listData.report))
+          that.currentMsgType = 'report'
         })
     },
 
+    /**
+     * @description:获取文化列表数据
+     */
+    getCultureList: function () {
+      var that = this
+      this.$axios
+        .get('/culture/list')
+        .then(function (response) {
+          that.listData.culture = response.data
+          // 浅拷贝到当前的通知列表数组
+          that.listData.current = JSON.parse(JSON.stringify(that.listData.culture))
+          that.currentMsgType = 'culture'
+        })
+    },
+
+    /**
+     * @description:获取更多列表数据
+     */
+    getOthersList: function () {
+      var that = this
+      this.$axios
+        .get('/others/list')
+        .then(function (response) {
+          that.listData.others = response.data
+          // 浅拷贝到当前的通知列表数组
+          that.listData.current = JSON.parse(JSON.stringify(that.listData.others))
+          that.currentMsgType = 'others'
+        })
+    },
+
+    // 按钮点击事件，更新列表
+    updateList: function (value) {
+      switch (value) {
+        case 'radio1':
+          this.getNoticeList()
+          break
+        case 'radio2':
+          this.getReportList()
+          break
+        case 'radio3':
+          this.getCultureList()
+          break
+        case 'radio4':
+          this.getOthersList()
+          break
+      }
+    },
+
     /**
      * @description:将id值传给map.vue进行信息提取与渲染
      * @param {number} id:报道的id值
      */
-    showReportDetail: function (id) {
-      bus.$emit('showReportDetail', id)
+    showMsgDetail: function (id) {
+      let that = this
+      bus.$emit('showMsgDetail', {
+        id: id,
+        type: that.currentMsgType
+      })
       this.resetListener = false
       this.expandClass = 0
     },
@@ -209,7 +327,7 @@ export default {
     setSize: function () {
       let max = this.maxHeight
       let el = document.getElementById('list-div')
-      el.style.height = max - 24 - 34 - 16 + 'px'
+      el.style.height = max - 110 + 'px'
     },
 
     /**
@@ -290,7 +408,7 @@ export default {
      * @description: 通知列表总数目
      */
     rows: function () {
-      return this.reportData.reportList.length
+      return this.listData.notice.length
     },
 
     /**
@@ -307,6 +425,7 @@ export default {
       return Math.floor((this.maxHeight - 34 - 16 - 24) / 42)
     }
   },
+
   filters: {
     /**
      * @description:过滤器，超过16位显示省略号
@@ -319,9 +438,10 @@ export default {
       return value
     }
   },
+
   mounted () {
     this.heightListener('mobilebarBox')
-    this.getReportList()
+    this.getNoticeList()
     this.setSize()
     this.busOnAction()
   }
@@ -378,4 +498,5 @@ export default {
 #mobilebarBox {
   border-radius: 7px;
 }
+
 </style>

src/components/pcBar.vue

@@ -19,7 +19,7 @@
                 通知
               </template>
               <div>
-                  <b-list-group  class="listGroup" v-for="(item,index) in data.notice" :key=index>
+                  <b-list-group  class="listGroup" v-for="(item,index) in listData.notice" :key=index>
                       <b-list-group-item href="#" @click.self="selectItem($event,index)">
                         ● {{item.title|ellipsis}}
                         <span class="float-right font-italic font-weight-light" style="font-size:12px">{{item.time}}</span>
@@ -34,7 +34,7 @@
                 新闻
               </template>
               <div>
-                <b-list-group  class="listGroup" v-for="(item,index) in data.report" :key=index>
+                <b-list-group  class="listGroup" v-for="(item,index) in listData.report" :key=index>
                   <b-list-group-item href="#"
                   @click.self="selectItem($event,index)">
                     ● {{item.title|ellipsis}}
@@ -50,7 +50,7 @@
                 文化
               </template>
               <div>
-                <b-list-group class="listGroup" v-for="(item,index) in data.culture" :key=index>
+                <b-list-group class="listGroup" v-for="(item,index) in listData.culture" :key=index>
                   <b-list-group-item href="#" @click.self="selectItem($event,index)">
                     ● {{item.title|ellipsis}}
                   </b-list-group-item>
@@ -64,7 +64,7 @@
                 更多
               </template>
               <div>
-                <b-list-group class="listGroup" v-for="(item,index) in data.others" :key=index>
+                <b-list-group class="listGroup" v-for="(item,index) in listData.others" :key=index>
                   <b-list-group-item href="#" @click.self="selectItem($event,index)">
                     ● {{item.title|ellipsis}}
                   </b-list-group-item>
@@ -252,16 +252,18 @@ export default {
         errorMessage: '账号或密码输入错误'
       },
       //  列表数据
-      data: {
+      listData: {
         notice: [],
         report: [],
-        culture: []
+        culture: [],
+        others: []
       },
       // 列表备份数据
       colonData: {
         notice: [],
         report: [],
-        culture: []
+        culture: [],
+        others: []
       },
       // 工具栏可视控制
       toolShow: {
@@ -328,9 +330,9 @@ export default {
       this.$axios
         .get('/notice/list')
         .then(function (response) {
-          that.data.notice = response.data
+          that.listData.notice = response.data
           // items备份
-          that.colonData.notice = JSON.parse(JSON.stringify(that.data.notice))
+          that.colonData.notice = JSON.parse(JSON.stringify(that.listData.notice))
         })
     },
 
@@ -343,9 +345,9 @@ export default {
       this.$axios
         .get('/report/list')
         .then(function (response) {
-          that.data.report = response.data
+          that.listData.report = response.data
           // items备份
-          that.colonData.report = JSON.parse(JSON.stringify(that.data.report))
+          that.colonData.report = JSON.parse(JSON.stringify(that.listData.report))
         })
     },
 
@@ -357,9 +359,9 @@ export default {
       this.$axios
         .get('/culture/list')
         .then(function (response) {
-          that.data.culture = response.data
+          that.listData.culture = response.data
           // items备份
-          that.colonData.culture = JSON.parse(JSON.stringify(that.data.culture))
+          that.colonData.culture = JSON.parse(JSON.stringify(that.listData.culture))
         })
     },
 
@@ -371,9 +373,9 @@ export default {
       this.$axios
         .get('/others/list')
         .then(function (response) {
-          that.data.others = response.data
+          that.listData.others = response.data
           // items备份
-          that.colonData.others = JSON.parse(JSON.stringify(that.data.others))
+          that.colonData.others = JSON.parse(JSON.stringify(that.listData.others))
         })
     },
 
@@ -574,7 +576,7 @@ export default {
      */
     getSelectedItems: function () {
       var item
-      var data = this.data
+      var data = this.listData
       switch (this.tabIndex) {
         case 0:
           item = data.notice