补充了<文化>类型消息的管理功能；新增了<更多>类型的消息；补充了对不同消息类型的显示控制

src/components/LayerSelector.vue

@@ -17,17 +17,17 @@
           v-model="checkMapList"
           @change="checkedMapsChange"
         >
-          <el-checkbox label="文化地图"></el-checkbox>
-          <el-checkbox label="在线地图"></el-checkbox>
+          <el-checkbox label="cdut">文化地图</el-checkbox>
+          <el-checkbox label="tiandi">在线地图</el-checkbox>
         </el-checkbox-group>
       </div>
 
       <div class='info-content' id="info-content" v-show="infomapShow">
         <el-checkbox-group v-model="checkTagList" @change="checkedTagsChange">
-          <el-checkbox label="最新通知"></el-checkbox>
-          <el-checkbox label="实时新闻"></el-checkbox>
-          <el-checkbox label="校园文化" disabled></el-checkbox>
-          <el-checkbox label="更多" ></el-checkbox>
+          <el-checkbox label="noticeLayer">最新通知</el-checkbox>
+          <el-checkbox label="reportLayer">实时新闻</el-checkbox>
+          <el-checkbox label="cultureLayer" disabled>校园文化</el-checkbox>
+          <el-checkbox label="otherLayer" >更多</el-checkbox>
         </el-checkbox-group>
       </div>
     </div>
@@ -42,8 +42,9 @@ export default {
     basemapShow: false,
     // 信息控件 可见性
     infomapShow: false,
-    checkMapList: ['文化地图', '在线地图'],
-    checkTagList: ['最新通知', '实时新闻', '校园文化', '更多']
+    // checkMapList: ['文化地图', '在线地图'],
+    checkMapList: ['cdut', 'tiandi'],
+    checkTagList: ['noticeLayer', 'reportLayer', 'cultureLayer', 'otherLayer']
   }),
 
   watch: {

src/components/map.vue

@@ -124,7 +124,7 @@ export default {
           image: new Icon({
             crossOrigin: 'anonymous',
             src: info,
-            scale: 0.3
+            scale: 0.25
           })
         }),
         LineString: new Style({
@@ -140,7 +140,7 @@ export default {
           image: new Icon({
             crossOrigin: 'anonymous',
             src: report,
-            scale: 0.3
+            scale: 0.25
           })
         }),
         LineString: new Style({
@@ -156,7 +156,7 @@ export default {
           image: new Icon({
             crossOrigin: 'anonymous',
             src: culture,
-            scale: 0.3
+            scale: 0.25
           })
         }),
         LineString: new Style({
@@ -166,6 +166,23 @@ export default {
           })
         })
       },
+
+      otherStyles: { // 更多 标注 样式
+        Point: new Style({
+          image: new Icon({
+            crossOrigin: 'anonymous',
+            src: more,
+            scale: 0.25
+          })
+        }),
+        LineString: new Style({
+          stroke: new Stroke({
+            color: '#f51a51',
+            width: 6
+          })
+        })
+      },
+
       // popup的overlay对象
       popup: null,
       popupData: { //  PC端 地图弹出框信息
@@ -226,18 +243,18 @@ export default {
             source: new XYZ({
               url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=a7baca459fe5be059d34849072e84fd0'
             }),
-            visible: true,
-            nameCN: '在线地图'
+            visible: true
+            // nameCN: '在线地图'
           }),
           //  天地图 地图标注
           new TileLayer({
             class: 'basemap',
-            title: 'tiandi-label',
+            title: 'tiandi',
             source: new XYZ({
               url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=a7baca459fe5be059d34849072e84fd0'
             }),
-            visible: true,
-            nameCN: '天地图标注'
+            visible: true
+            // nameCN: '天地图标注'
           }),
           // 文化地图
           new TileLayer({
@@ -252,8 +269,8 @@ export default {
               },
               servertype: 'geoserver',
               transition: 0
-            }),
-            nameCN: '文化地图'
+            })
+            // nameCN: '文化地图'
           })
         ],
         interactions: defaultInteractions({
@@ -349,13 +366,13 @@ export default {
         // 首次调用，创建图层
         layer = new VectorLayer({
           title: title,
+          class: 'layer',
           className: title,
           source: new VectorSource({
           })
         })
         map.addLayer(layer)
       }
-
       // GeoJSON格式转换为ol.feature格式，样式装载
       var geometry = msg.geometry
       var style
@@ -369,6 +386,9 @@ export default {
         case 'culture':
           style = this.cultureStyles
           break
+        case 'other':
+          style = this.otherStyles
+          break
       }
       var feature = this.GeoJSON_to_Feature(geometry, style)
 
@@ -621,6 +641,9 @@ export default {
             case 'culture':
               data = await that.loadCultureByID(id)
               break
+            case 'other':
+              data = await that.loadOthersByID(id)
+              break
           }
           that.printFeature('markLayer', data, type, true, true, true)
           that.isShow = true
@@ -724,6 +747,28 @@ export default {
       return res
     },
 
+    /**
+     * @description:通过id 查询载入'其他'信息
+    */
+    loadOthersByID: async function (id) {
+      var that = this
+      var res
+
+      await this.$axios
+        .post('/others/detail', {
+          id: id
+        })
+        .then(response => {
+          that.popupData.info = response.data
+          that.popupData.type = '活动通知'
+          res = response.data
+
+          res = response.data
+        })
+
+      return res
+    },
+
     /**
      * @description:设置并聚焦到popup的显示位置
      * @param {ol.coordinate}坐标
@@ -837,12 +882,12 @@ export default {
     // 底图选择 和 消息选择 的图层切换
     getCheckedMap: function (checkMapList) {
       this.checkMapList = checkMapList
-      util.map.setMapVisible(map, checkMapList)
+      util.map.setMapVisible(map, checkMapList, 'basemap')
     },
 
     getCheckedTag: function (checkTagList) {
       this.checkTagList = checkTagList
-      // util.map.setMapVisible(map, checkTagList)
+      util.map.setMapVisible(map, checkTagList, 'layer')
     },
 
     /**
@@ -935,6 +980,12 @@ export default {
                 data = res
               })
             break
+          case 'other':
+            await that.loadOthersByID(id)
+              .then(res => {
+                data = res
+              })
+            break
         }
         that.printFeature('markLayer', data, msg.type, true, true, true)
 
@@ -949,9 +1000,13 @@ export default {
       bus.$on('refreshMap', () => {
         map.removeLayer(that.getLayerByTitle('noticeLayer'))
         map.removeLayer(that.getLayerByTitle('reportLayer'))
+        map.removeLayer(that.getLayerByTitle('cultureLayer'))
+        map.removeLayer(that.getLayerByTitle('otherLayer'))
         map.removeLayer(that.getLayerByTitle('markLayer'))
         that.loadRecentNotices(7)
         that.loadRecentReports(7)
+        that.loadCulture()
+        that.loadOthers()
         that.closePopup()
       })
 
@@ -973,7 +1028,7 @@ export default {
     this.busOnAction()
     this.loadRecentReports(7)
     this.loadRecentNotices(7)
-    // this.loadOthers()
+    this.loadOthers()
     this.loadCulture()
     this.openCluster()
     this.mapClick()

src/components/pcBar.vue

@@ -57,11 +57,25 @@
                 </b-list-group>
              </div>
             </b-tab>
+             <!-- 更多 -->
+            <b-tab>
+              <template v-slot:title>
+                <i class="fa fa-flag-o" aria-hidden="true"></i>
+                更多
+              </template>
+              <div>
+                <b-list-group class="listGroup" v-for="(item,index) in data.others" :key=index>
+                  <b-list-group-item href="#" @click.self="selectItem($event,index)">
+                    ● {{item.title|ellipsis}}
+                  </b-list-group-item>
+                </b-list-group>
+             </div>
+            </b-tab>
           </b-tabs>
       </b-list-group-item>
       <!-- footer -->
       <b-list-group-item id="footer" align='center'>
-        <b-button-group  style="background:rgb(255,255,255)" v-show="tabIndex !== 2 && $store.state.isLogin === true" >
+        <b-button-group  style="background:rgb(255,255,255)" v-show="$store.state.isLogin === true" >
           <b-button variant="outline-dark" title="添加记录"  @click="$bvModal.show('addModal')"><i class="fa fa-plus" aria-hidden="true"  ></i></b-button>
 
           <b-button variant="outline-dark" title="删除记录" v-show="toolShow.delete" @click="deleteItem()"><i class="fa fa-minus" aria-hidden="true"></i></b-button>
@@ -192,22 +206,9 @@
         </b-form-group>
 
         <b-form-group id="input-group-8" label="消息附属线：" label-for="input-8">
-          <!-- <b-form-select
-            id="input-8"
-            v-model="form.related"
-            :options="['111', '222']"
-          >
-           <template v-slot:first>
-              <option :value="null">自定义</option>
-            </template>
-          </b-form-select> -->
           <b-link @click="drawRelate">添加消息附属线</b-link>
         </b-form-group>
 
-        <!-- <b-form-group id="input-group-7" label="图片：" label-for="input-7">
-          <b-form-file v-model="form.img" class="mt-3" plain  multiple accept=".jpg, .png, .gif, .jpeg, .svg"></b-form-file>
-        </b-form-group> -->
-
         <b-button type="reset" variant="danger">重置</b-button>
         <b-button type="submit" variant="primary">提交</b-button>
       </b-form>
@@ -274,7 +275,7 @@ export default {
       // 地点选择输入
       places: [],
       // 类型选择输入
-      types: ['报道', '通知'],
+      types: ['报道', '通知', '文化', '更多'],
       //  预删除的消息id号
       deleteArr: [],
       // 消息发布的表单绑定数据
@@ -330,10 +331,6 @@ export default {
           that.data.notice = response.data
           // items备份
           that.colonData.notice = JSON.parse(JSON.stringify(that.data.notice))
-
-          // 重置控制目标
-          // that.selectedID = null
-          // that.selected = null
         })
     },
 
@@ -349,10 +346,6 @@ export default {
           that.data.report = response.data
           // items备份
           that.colonData.report = JSON.parse(JSON.stringify(that.data.report))
-
-          // 重置控制目标
-          // that.selectedID = null
-          // that.selected = null
         })
     },
 
@@ -367,10 +360,20 @@ export default {
           that.data.culture = response.data
           // items备份
           that.colonData.culture = JSON.parse(JSON.stringify(that.data.culture))
+        })
+    },
 
-          // 重置控制目标
-          // that.selectedID = null
-          // that.selected = null
+    /**
+     * @description:获取更多列表数据
+     */
+    getOthersList: function () {
+      var that = this
+      this.$axios
+        .get('/others/list')
+        .then(function (response) {
+          that.data.others = response.data
+          // items备份
+          that.colonData.others = JSON.parse(JSON.stringify(that.data.others))
         })
     },
 
@@ -526,7 +529,9 @@ export default {
      * @returns {void}
      */
     deleteItem: function () {
-      var items = this.tabIndex === 0 ? this.data.notice : this.data.report
+      // var items = this.tabIndex === 0 ? this.data.notice : this.data.report
+      var items = this.getSelectedItems()
+
       var itemsType = this.getSelectedType()
       // var itemsType = this.tabIndex === 0 ? 'notice' : 'report'
 
@@ -556,9 +561,10 @@ export default {
      * @returns {void}
      */
     printMapMarkByID: function () {
+      let that = this
       bus.$emit('printMapMark', {
-        type: this.getSelectedType(),
-        id: this.getSelectedItems()[this.selectedIndex].id
+        type: that.getSelectedType(),
+        id: that.getSelectedItems()[this.selectedIndex].id
       })
     },
 
@@ -578,6 +584,10 @@ export default {
           break
         case 2:
           item = data.culture
+          break
+        case 3:
+          item = data.others
+          break
       }
       return item
     },
@@ -597,6 +607,9 @@ export default {
         case 2:
           res = 'culture'
           break
+        case 3:
+          res = 'other'
+          break
         default:
           res = null
       }
@@ -648,52 +661,6 @@ export default {
       return isSuccess
     },
 
-    // /**
-    // * @description: loginModel提交(submit)事件
-    // * @returns {void}
-    //  */
-    // submit_loginModal: function (e) {
-    //   var that = this
-    //   this.postLoginForm()
-    //     .then(res => {
-    //       if (res) {
-    //         // 登陆成功，设置登陆状态
-    //         that.$store.commit('userLogin', {
-    //           name: res.name,
-    //           uid: res.uid
-    //         })
-
-    //         // 设置token到cookie
-    //         cookie.setCookie(res.token, 0.5, 'token')
-
-    //         // 隐藏modal
-    //         that.$bvModal.hide('loginModal')
-    //       } else {
-    //         that.login.isRight = false
-    //       }
-    //     })
-    // },
-
-    // /**
-    //  * @description:向后端提交登陆表单
-    //  * @returns {void}
-    //  */
-    // postLoginForm: async function () {
-    //   var response
-
-    //   await this.$axios
-    //     .post('admin/login', {
-    //       form: {
-    //         account: this.login.account,
-    //         password: this.login.password
-    //       }
-    //     })
-    //     .then(res => {
-    //       response = res.data
-    //     })
-    //   return response
-    // },
-
     /**
      * @description:刷新列表，地图
      * @returns {void}
@@ -701,6 +668,8 @@ export default {
     refresh: function () {
       this.getNoticeList()
       this.getReportList()
+      this.getCultureList()
+      this.getOthersList()
       bus.$emit('refreshMap')
     },
 
@@ -766,6 +735,7 @@ export default {
     this.getNoticeList()
     this.getReportList()
     this.getCultureList()
+    this.getOthersList()
     this.getKeyPoint()
     this.getSlogan()
   },
@@ -824,13 +794,13 @@ export default {
         this.toolShow.delete = false
       } else {
         this.toolShow.delete = true
-        switch (this.tabIndex) {
-          case 0:
-            bus.$emit('markerShow', {
-              type: this.tabIndex,
-              id: this.data[this.tabIndex]
-            })
-        }
+        // switch (this.tabIndex) {
+        //   case 0:
+        //     bus.$emit('markerShow', {
+        //       type: this.tabIndex,
+        //       id: this.data[this.tabIndex]
+        //     })
+        // }
       }
     },
 

src/util/map.js

@@ -19,22 +19,23 @@ const basemapChange = (name) => {
   }
 }
 
-// @description：设置图层可见性
+// @description：设置底图图层可见性
 // @param {Array} titles:装有图层title的数组
-const setMapVisible = (map, titles) => {
+// @param {String} className:所操作图层的类别
+const setMapVisible = (map, titles, className) => {
   var layers = map.getLayers().array_
   for (var i = 0; i < layers.length; i++) {
-    if (layers[i].values_.class !== 'basemap') {
+    console.log(layers[i].values_.class)
+    if (layers[i].values_.class !== className) {
       continue
     }
-    if (titles.indexOf(layers[i].values_.nameCN) > -1) {
+    if (titles.indexOf(layers[i].values_.title) > -1) {
       layers[i].setVisible(true)
     } else {
       layers[i].setVisible(false)
     }
   }
 }
-
 export default {
   basemapChange,
   setMapVisible