修改下拉选择

components/common/common-title-mini-2.vue → components/common/common-title-with-dropdown.vue

-<!-- 标题组件 -->
+<!-- 标题组件 - 带下拉选择 -->
 <template>
   <div class="common-title-wrapper">
-    <div class="mask"></div>
+    <div v-show="isShowDropdown" class="mask" @click="isShowDropdown = !isShowDropdown"></div>
     <ul class="mini">
       <li class="left">{{title}}</li>
-      <li class="right" v-if="needRightBtn">
-        <span>按获证比例排名</span>
+      <li class="right" v-if="needRightBtn" @click="isShowDropdown = !isShowDropdown">
+        <span>{{cDesc || (dataList[0] && dataList[0].desc)}}</span>
         <img src="../../assets/images/arr-down.png" alt />
       </li>
     </ul>
-    <ul class="dropdown-menu">
-      <li v-for="(item, index) in dataList" :key="index">
+    <ul v-show="isShowDropdown" class="dropdown-menu">
+      <li v-for="(item, index) in dataList" :key="index" @click="selectSortItem(index)">
         <span :class="{'active': cIndex === index }">{{item.desc}}</span>
         <img v-show="cIndex === index" src="../../assets/images/sort-select-icon.png" alt="">
       </li>
@@ -27,27 +27,29 @@ export default {
     needRightBtn: {
       type: Boolean,
       default: true
+    },
+    dataList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
     return {
-      dataList: [{
-        desc: '按获证比例排名',
-        type: 1
-      },{
-        desc: '按获证人数排名',
-        type: 2
-      },{
-        desc: '按参与人数排名',
-        type: 3
-      }],
+      isShowDropdown: false,
       cIndex: 0,
-      cDesc: '按获证比例排名',
+      cDesc: '',
       cType: 1
     };
   },
-  methods: {
 
+  methods: {
+    selectSortItem(index) {
+      this.isShowDropdown = false;
+      this.cIndex = index;
+      this.cDesc = this.dataList[index].desc;
+      this.cType = this.dataList[index].type;
+      this.$emit('selectSortItem', this.cType);
+    }
   }
 };
 </script>
@@ -64,7 +66,7 @@ export default {
   .mask {
     position: fixed;
     left: 0;
-    top: 0;
+    top: 100px;
     z-index: 1002;
     bottom: 0;
     right: 0;

pages/index.vue

@@ -217,7 +217,7 @@ export default {
       allData: {},
       projectId: "",
       token:
-        "8F88F86408314155B6840723FAB7DAEC" ||
+        "A7F0A8A4BB5C4EC4B78E71261B753C9C" ||
         "A62E9F92365547A29724F21F29BED4F6" ||
         "4556EDEAAE134FE1B6E1356BF9C1B8F9",
       isOrgStat: false,

pages/rank-days.vue

 <template>
   <section>
     <CommonHeader title="完成天数排名"></CommonHeader>
-    <CommonTitleMini :title="listTitle"></CommonTitleMini>
+    <CommonTitleMiniWithDropdown :dataList="dataList" :title="listTitle" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleMiniWithDropdown>
     <RankingItemDays :rankList="rankList"></RankingItemDays>
     <CommonNoMore class="mt-10"></CommonNoMore>
   </section>
@@ -11,14 +11,14 @@ const cookies = require("cookie-universal")();
 import { getStudyTimeData } from "@/service";
 
 import CommonHeader from "@/components/common/common-header";
-import CommonTitleMini from "@/components/common/common-title-mini";
+import CommonTitleMiniWithDropdown from "@/components/common/common-title-with-dropdown";
 import RankingItemDays from "@/components/bussiness/ranking-item-days";
 import CommonNoMore from "@/components/common/common-no-more";
 
 export default {
   data() {
     return {
-      listTitle: "共34个省",
+      listTitle: '共0个省',
       rankList: [],
       queryGDParams: {
         // appSelectType: 1,
@@ -36,11 +36,21 @@ export default {
           type: 1
         }
       },
+      dataList: [{
+        desc: '按获证比例排名',
+        type: 1
+      },{
+        desc: '按获证人数排名',
+        type: 2
+      },{
+        desc: '按参与人数排名',
+        type: 3
+      }],
     };
   },
   components: {
     CommonHeader,
-    CommonTitleMini,
+    CommonTitleMiniWithDropdown,
     RankingItemDays,
     CommonNoMore
   },
@@ -63,9 +73,15 @@ export default {
       await getStudyTimeData(params).then(res => {
         if (res.code === "000000") {
           this.rankList = res.data.costRank;
+          this.listTitle = `共${this.rankList.length}个省`
         }
       });
+    },
+    selectSortItem(type) {
+      // this.queryGDParams.pageCfg.type = type;
+      // this.getStudyTimeData(this.queryGDParams);
     }
+
   }
 };
 </script>

pages/rank-edu.vue

 <template>
   <section>
     <CommonHeader title="项目情况排名"></CommonHeader>
-    <CommonTitleMini2 :title="listTitle" :needRightBtn="needRightBtn"></CommonTitleMini2>
+    <CommonTitleMini2 :dataList="dataList" :title="listTitle" :needRightBtn="needRightBtn" @selectSortItem="selectSortItem"></CommonTitleMini2>
     <RankingList :rankList="rankList"></RankingList>
     <CommonNoMore class="mt-10"></CommonNoMore>
   </section>
@@ -11,14 +11,14 @@ const cookies = require("cookie-universal")();
 import { getStudyRankData } from "@/service";
 
 import CommonHeader from "@/components/common/common-header";
-import CommonTitleMini2 from "@/components/common/common-title-mini-2";
+import CommonTitleMini2 from "@/components/common/common-title-with-dropdown";
 import CommonNoMore from "@/components/common/common-no-more";
 import RankingList from "@/components/bussiness/ranking-item";
 
 export default {
   data() {
     return {
-      listTitle: '共34个省',
+      listTitle: '共0个省',
       rankList: [],
       needRightBtn: true,
       queryGDParams: {
@@ -37,6 +37,16 @@ export default {
           type: 1
         }
       },
+      dataList: [{
+        desc: '按获证比例排名',
+        type: 1
+      },{
+        desc: '按获证人数排名',
+        type: 2
+      },{
+        desc: '按参与人数排名',
+        type: 3
+      }],
     };
   },
   components: {
@@ -65,9 +75,13 @@ export default {
       await getStudyRankData(params).then(res => {
         if (res.code === "000000") {
           this.rankList = res.data.studyRank;
-          // this.knowledgeEffectList = res.data.knowledgeEffectList;
+          this.listTitle = `共${this.rankList.length}个省`
         }
       });
+    },
+    selectSortItem(type) {
+      this.queryGDParams.pageCfg.type = type;
+      this.getStudyRankData(this.queryGDParams);
     }
 
   },

service/index.js

@@ -214,7 +214,7 @@ export const getStudyRankData = async data => {
     method: 'post',
     data: data,
     withCredentials: true,
-    url: `stats/report/studyRank/1`
+    url: `stats/report/studyRank/${data.pageCfg.type}`
   });
 };
 
@@ -226,6 +226,6 @@ export const getStudyTimeData = async data => {
     method: 'post',
     data: data,
     withCredentials: true,
-    url: `stats/report/studyTime/1`
+    url: `stats/report/studyTime/${data.pageCfg.type}`
   });
 };
\ No newline at end of file