From 4500458826c6d4fb2cd03b16575bd0a3f30fbf3a Mon Sep 17 00:00:00 2001
From: dong_bo0602 <358256383@qq.com>
Date: Fri, 31 Jul 2020 17:23:49 +0800
Subject: [PATCH] area

---
 src/pages/CultureActivity/CultureActivity.vue |  11 +-
 src/pages/CultureDynamics/CultureDynamics.vue |  39 +++++-
 src/pages/CultureVenue/CultureVenue.vue       |  12 +-
 .../IntangibleHeritage/IntangibleHeritage.vue | 111 ++++++++++++++----
 4 files changed, 142 insertions(+), 31 deletions(-)

diff --git a/src/pages/CultureActivity/CultureActivity.vue b/src/pages/CultureActivity/CultureActivity.vue
index 0bff384..954aa08 100644
--- a/src/pages/CultureActivity/CultureActivity.vue
+++ b/src/pages/CultureActivity/CultureActivity.vue
@@ -17,7 +17,7 @@
             <span>选择区域></span>
             <div style="display: inline-block;width: 94%;">
               <button :class="{active: page.county == ''}" @click="changeArea(null)">全部</button>
-              <button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.dictionaryId)" :class="{active: page.county == btn.dictionaryId}">{{btn.dictionaryName}}</button>
+              <button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: page.county == btn.areaId}">{{btn.areaName}}</button>
             </div>
           </div>
         </div>
@@ -117,11 +117,13 @@ export default {
     }
   },
   methods: {
-    changeArea: function (area) {
+    changeArea: function (area, lv) {
       this.page.page = 1
       this.changePage = 1
       if (area) {
         this.page.county = area
+        var areaLv = 'area' + (parseInt(lv) + 1)
+        console.log(areaLv)
       } else {
         this.page.county = ''
       }
@@ -168,8 +170,7 @@ export default {
     },
     getAreaList: function () {
       var self = this
-      axios.get(self.url + 'culturalactivity/app/dictionaryself/listdictionarybyparentidrelease/a9410e79-54fa-4c04-9276-17da889da86b').then(function (res) {
-        console.log(res)
+      axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
         self.areaList = res.data
       })
     }
@@ -206,6 +207,8 @@ export default {
         color #565656
         display inline-block
         margin-right 5px
+        vertical-align top
+        line-height 30px
       button
         width 80px
         height 30px
diff --git a/src/pages/CultureDynamics/CultureDynamics.vue b/src/pages/CultureDynamics/CultureDynamics.vue
index 46f5fe5..86cb365 100644
--- a/src/pages/CultureDynamics/CultureDynamics.vue
+++ b/src/pages/CultureDynamics/CultureDynamics.vue
@@ -14,6 +14,13 @@
           <li v-for="(btn,idx) in typeList" :key="idx" :class="{active: page.newsDirectoriesId == btn.newsDirectoriesId}" @click="changeType(btn.newsDirectoriesId)">{{btn.directoriesName}}</li>
         </ul>
       </div>
+      <div class="type-container">
+        <span>区域：</span>
+        <ul style="display: inline-block;width: 95%;">
+          <li :class="{active: area == ''}" @click="changeArea">全部</li>
+          <li v-for="(btn,idx) in areaList" :key="idx" :class="{active: area == btn.areaId}" @click="changeArea(btn.areaId, btn.areaLevel)">{{btn.areaName}}</li>
+        </ul>
+      </div>
     </div>
     <div class="dynamics">
       <div class="dynamics-left">
@@ -81,6 +88,7 @@ export default {
   },
   data () {
     return {
+      areaList: [],
       changePage: 1,
       typeList: [],
       dynamicList: [],
@@ -93,6 +101,7 @@ export default {
         newsDirectoriesId: '',
         newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
       },
+      area: '',
       url: common.url,
       isLoading: false
     }
@@ -106,6 +115,25 @@ export default {
     }
   },
   methods: {
+    changeArea: function (area, lv) {
+      this.page.page = 1
+      this.changePage = 1
+      this.area = area
+      if (area) {
+        var level = 'area' + (parseInt(lv) + 1)
+        this.$set(this.page, level, area)
+      } else {
+        this.area = ''
+        this.page = {
+          page: 1,
+          rows: 8,
+          totalPage: 1,
+          newsDirectoriesId: '',
+          newsDirectoriesParentId: 'f497904b-7727-4832-891c-604c36ae4167'
+        }
+      }
+      this.getNews()
+    },
     doJumpPage: function () {
       this.page.page = this.changePage
       this.getNews()
@@ -156,11 +184,18 @@ export default {
         this.page.newsDirectoriesId = ''
       }
       this.getNews()
+    },
+    getAreaList: function () {
+      var self = this
+      axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
+        self.areaList = res.data
+      })
     }
   },
   mounted () {
     this.getNews()
     this.getTypeList()
+    this.getAreaList()
   }
 }
 </script>
@@ -180,10 +215,12 @@ export default {
   background #f0f0f0
   .type-container
     width 1200px
-    margin 0 auto
+    margin 0 auto 10px
     overflow hidden
     font-size 14px
     color #565656
+    &:last-child
+      margin-bottom 0
     span
       float left
       line-height 30px
diff --git a/src/pages/CultureVenue/CultureVenue.vue b/src/pages/CultureVenue/CultureVenue.vue
index db60da5..f42f550 100644
--- a/src/pages/CultureVenue/CultureVenue.vue
+++ b/src/pages/CultureVenue/CultureVenue.vue
@@ -17,7 +17,7 @@
             <span>选择区域></span>
             <div style="display: inline-block;width: 95%;">
               <button :class="{active: page.venueArea == ''}" @click="changeArea(null)">全部</button>
-              <button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.dictionaryId)" :class="{active: page.venueArea == btn.dictionaryId}">{{btn.dictionaryName}}</button>
+              <button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: page.venueArea == btn.areaId}">{{btn.areaName}}</button>
             </div>
           </div>
         </div>
@@ -92,7 +92,8 @@ export default {
         rows: 8,
         totalPage: 1,
         venueType: '',
-        venueArea: ''
+        venueArea: '',
+        areaLevel: ''
       },
       url: common.url,
       isLoading: false
@@ -107,11 +108,12 @@ export default {
     }
   },
   methods: {
-    changeArea: function (area) {
+    changeArea: function (area, lv) {
       this.page.page = 1
       this.changePage = 1
       if (area) {
         this.page.venueArea = area
+        this.page.areaLevel = 'area' + (parseInt(lv) + 1)
       } else {
         this.page.venueArea = ''
       }
@@ -143,8 +145,8 @@ export default {
     },
     getAreaList: function () {
       var self = this
-      axios.get(self.url + 'venuebooking/app/venuedictionary/listvenuedictionarybyparentidrelease/fbd845d6-a74b-457a-8da1-fec66ab0d400').then(function (res) {
-        self.areaList = res.data.data
+      axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
+        self.areaList = res.data
       })
     },
     getVenueList: function () {
diff --git a/src/pages/IntangibleHeritage/IntangibleHeritage.vue b/src/pages/IntangibleHeritage/IntangibleHeritage.vue
index ecfd66e..00e23a7 100644
--- a/src/pages/IntangibleHeritage/IntangibleHeritage.vue
+++ b/src/pages/IntangibleHeritage/IntangibleHeritage.vue
@@ -15,31 +15,42 @@
             <p>国家级名录将非物质文化遗产分为十大门类，其中五个门类的名称在2008年有所调整，并沿用至今。十大门类分别为：民间文学，传统音乐，传统舞蹈，传统戏剧，曲艺，传统体育、游艺与杂技，传统美术，传统技艺，传统医药，民俗。每个代表性项目都有一个专属的项目编号。编号中的罗马数字代表所属门类，如传统音乐类国家级项目“侗族大歌”的项目编号为“Ⅱ-28”。</p>
           </div>
         </div>
+        <div class="select">
+          <div class="select-container">
+            <div class="select-line">
+              <span>选择区域></span>
+              <div style="display: inline-block;width: 94%;">
+                <button :class="{active: area == ''}" @click="changeArea(null)">全部</button>
+                <button v-for="(btn,idx) in areaList" :key="idx" @click="changeArea(btn.areaId, btn.areaLevel)" :class="{active: area == btn.areaId}">{{btn.areaName}}</button>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="heritage-list" v-if="!isLoading">
           <table v-if="hasData">
             <thead>
-              <tr>
-                <th width="8%">序号</th>
-                <th width="8%">编号</th>
-                <th width="20%">名称</th>
-                <th width="10%">公布时间</th>
-                <th width="10%">类型</th>
-                <th width="15%">申报地区或单位</th>
-                <th width="20%">保护单位</th>
-                <th width="9%">操作</th>
-              </tr>
+            <tr>
+              <th width="8%">序号</th>
+              <th width="8%">编号</th>
+              <th width="20%">名称</th>
+              <th width="10%">公布时间</th>
+              <th width="10%">类型</th>
+              <th width="15%">申报地区或单位</th>
+              <th width="20%">保护单位</th>
+              <th width="9%">操作</th>
+            </tr>
             </thead>
             <tbody>
-              <tr v-for="(list,idx) in heritageList" :key="idx">
-                <td>{{idx+1}}</td>
-                <td>{{list.libraryNumber}}</td>
-                <td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}">{{list.libraryTitle}}</router-link></td>
-                <td><span :title="list.libraryOpenDateValue">{{list.libraryOpenDateValue}}</span></td>
-                <td>{{list.libraryTypeValue}}</td>
-                <td>{{list.libraryArea}}</td>
-                <td><span :title="list.libraryAuthor">{{list.libraryAuthor}}</span></td>
-                <td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}" class="go-detail">查看详情</router-link></td>
-              </tr>
+            <tr v-for="(list,idx) in heritageList" :key="idx">
+              <td>{{idx+1}}</td>
+              <td>{{list.libraryNumber}}</td>
+              <td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}">{{list.libraryTitle}}</router-link></td>
+              <td><span :title="list.libraryOpenDateValue">{{list.libraryOpenDateValue}}</span></td>
+              <td>{{list.libraryTypeValue}}</td>
+              <td>{{list.libraryArea}}</td>
+              <td><span :title="list.libraryAuthor">{{list.libraryAuthor}}</span></td>
+              <td><router-link :to="{path: '/intangibleHeritageDetail/' + list.intangibleLibraryId}" class="go-detail">查看详情</router-link></td>
+            </tr>
             </tbody>
           </table>
           <div class="no-data" v-else>
@@ -99,7 +110,9 @@ export default {
       },
       heritageList: [],
       url: common.url,
-      isLoading: false
+      isLoading: false,
+      areaList: [],
+      area: ''
     }
   },
   computed: {
@@ -128,9 +141,33 @@ export default {
     paging: function (page) {
       this.page.page = page
       this.getHeritageInfo()
+    },
+    getAreaList: function () {
+      var self = this
+      axios.get(self.url + 'usercenter/app/dataarea/listareabyparentidrelease/640675').then(function (res) {
+        self.areaList = res.data
+      })
+    },
+    changeArea: function (area, lv) {
+      this.page.page = 1
+      this.changePage = 1
+      if (area) {
+        var level = 'area' + (parseInt(lv) + 1)
+        this.$set(this.page, level, area)
+        this.area = area
+      } else {
+        this.area = ''
+        this.page = {
+          page: 1,
+          rows: 8,
+          totalPage: 1
+        }
+      }
+      this.getHeritageInfo()
     }
   },
   mounted () {
+    this.getAreaList()
     this.getHeritageInfo()
   }
 }
@@ -138,6 +175,38 @@ export default {
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 @import "~styles/public.styl"
+.select
+  padding 10px 0 0
+  overflow hidden
+  .select-container
+    width 1200px
+    margin 0 auto
+    .select-line
+      margin-bottom 10px
+      font-size 14px
+      span
+        color #565656
+        display inline-block
+        margin-right 5px
+        vertical-align top
+        line-height 30px
+      button
+        width 80px
+        height 30px
+        padding 0 5px
+        box-sizing border-box
+        border none
+        background none
+        outline none
+        color #565656
+        border-radius 4px
+        cursor pointer
+        white-space nowrap
+        overflow hidden
+        text-overflow: ellipsis
+        &.active
+          color #fff
+          background $main-color
 .loading
   position fixed
   top 50%