对接人群分析数据、调整饼图样式

components/bussiness/charts/chart-column-stack.vue

@@ -15,27 +15,93 @@ export default {
     },
     chartWidth: {
       type: String,
-      default: '100%'
+      default: "100%"
     },
     chartHeight: {
       type: String,
-      default: '320px'
+      default: "320px"
+    },
+    echartsData: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
-    return {};
+    return {
+      legendData: [],
+      yAxisData: [],
+      seriesData: [],
+    };
   },
   mounted() {
     vm = this;
-    this.drawColumn();
+  },
+  watch: {
+    echartsData: {
+      handler(newVal, oldValue) {
+        // console.log(newVal, oldValue);
+        vm.legendData = [];
+        vm.yAxisData = [];
+        vm.seriesData = [];
+        let cData, certList,  certLength = 0, certData = []
+        for(let i = 0; i < newVal.length; i ++){
+          certData = [];
+          cData = newVal[i];
+          vm.yAxisData.push(cData.eduName);
+          // vm.legendData.push(cData.eduName);
+          certLength = cData.certList.length;
+          for(let j = 0; j < certLength; j ++) {
+            certList = cData.certList;
+            certData.push(certList[j].value);
+            if(i == 0) {
+              vm.legendData.push(certList[j].name);
+              // vm.yAxisData.push(certList[j].name);
+            }
+          }
+          // vm.seriesData.push({
+          //   name: cData.eduName,
+          //   type: "bar",
+          //   stack: "总量",
+          //   barWidth: 16, //柱图宽度
+          //   data: certData              
+          // });
+        }
+        this.handlerSeriesData(newVal);
+        vm.drawColumn();
+      },
+      deep: true
+    }
   },
   methods: {
+
+    // 处理SeriesData
+    handlerSeriesData(chartData) {
+      if(chartData.length === 0) {
+        vm.legendData = [];
+        vm.yAxisData = [];
+        vm.seriesData = [];
+        return
+      }
+      let certLength = chartData[0].certList.length;
+      let sData = []
+      for(let i = 0; i < certLength; i ++){
+        sData = []
+        for(let j = 0; j < chartData.length; j ++){
+          sData.push(chartData[j].certList[i].value)
+        }
+        vm.seriesData.push({
+          name: chartData[0].certList[i].name,
+          type: "bar",
+          stack: "总量",
+          barWidth: 16, //柱图宽度
+          data: sData         
+        });
+      }
+    },
     // 画
     drawColumn() {
       // 基于准备好的dom，初始化echarts实例
-      let chartColumn = this.$echarts.init(
-        document.getElementById(this.id)
-      );
+      let chartColumn = this.$echarts.init(document.getElementById(this.id));
       // 绘制图表
       let options = {
         color: [
@@ -55,7 +121,8 @@ export default {
         },
         legend: {
           top: 20,
-          data: ["获优秀人数", "获及格人数", "未获证人数"],
+          data: vm.legendData,
+          // data: ["获优秀人数", "获及格人数", "未获证人数"],
           textStyle: {
             fontSize: 12,
             // fontWeight: "bolder",
@@ -90,7 +157,8 @@ export default {
         yAxis: {
           axisTick: false,
           type: "category",
-          data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"],
+          data: vm.yAxisData,
+          // data: ["其他", "中专以下", "大专", "本科", "硕士", "博士"],
           textStyle: {
             fontSize: 12,
             color: "#676869"
@@ -108,49 +176,50 @@ export default {
             }
           }
         },
-        series: [
-          {
-            name: "获优秀人数",
-            type: "bar",
-            stack: "总量",
-            barWidth: 16, //柱图宽度
-            label: {
-              normal: {
-                show: false,
-                position: "insideRight"
-              }
-            },
-            data: [320, 302, 301, 334, 390, 330, 320]
-          },
-          {
-            name: "获及格人数",
-            type: "bar",
-            stack: "总量",
-            barWidth: 16, //柱图宽度
-            label: {
-              normal: {
-                show: false,
-                position: "insideRight"
-              }
-            },
-            data: [120, 132, 101, 134, 90, 230, 210]
-          },
-          {
-            name: "未获证人数",
-            type: "bar",
-            stack: "总量",
-            barWidth: 16, //柱图宽度
-            label: {
-              normal: {
-                show: false,
-                position: "insideRight"
-              }
-            },
-            data: [220, 182, 191, 234, 290, 330, 310]
-          }
-        ]
+        series: vm.seriesData
+        // series: [
+        //   {
+        //     name: "获优秀人数",
+        //     type: "bar",
+        //     stack: "总量",
+        //     barWidth: 16, //柱图宽度
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //         position: "insideRight"
+        //       }
+        //     },
+        //     data: [320, 302, 301, 334, 390, 330, 320]
+        //   },
+        //   {
+        //     name: "获及格人数",
+        //     type: "bar",
+        //     stack: "总量",
+        //     barWidth: 16, //柱图宽度
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //         position: "insideRight"
+        //       }
+        //     },
+        //     data: [120, 132, 101, 134, 90, 230, 210]
+        //   },
+        //   {
+        //     name: "未获证人数",
+        //     type: "bar",
+        //     stack: "总量",
+        //     barWidth: 16, //柱图宽度
+        //     label: {
+        //       normal: {
+        //         show: false,
+        //         position: "insideRight"
+        //       }
+        //     },
+        //     data: [220, 182, 191, 234, 290, 330, 310]
+        //   }
+        // ]
       };
-      chartColumn.setOption(options);
+      chartColumn.setOption(options, true);
     }
   }
 };

components/bussiness/charts/chart-pie-edu.vue

 <!-- 人员学历情况饼图 -->
 <template>
-  <section class="chart-pie">
+  <section class="chart-pie-edu">
     <div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
   </section>
 </template>
@@ -11,14 +11,15 @@ let vm = null;
 export default {
   name: "eduPie",
   props: {
-    pieData: {
+    dataList: {
       type: Array,
       default: () => [
         { value: 335, name: "优秀证书" },
         { value: 310, name: "及格证书" },
         { value: 234, name: "未获证" }
       ]
-    }
+    },
+    
   },
   data() {
     return {
@@ -30,8 +31,8 @@ export default {
       // 重置颜色，图标如果需要颜色，优先从用户提供的colors中依次提取，用户不提供，则根据默认的颜色进行选取
     };
   },
-  watch: {
-    pieData: {
+  watch: {  
+    dataList: {
       handler(newValue, oldValue) {
         this.handlePieData(newValue);
         this.drawPie();
@@ -39,16 +40,19 @@ export default {
       deep: true
     }
   },
-  mounted() {
-    vm = this;
+  created() {
+    if (process.client) {
+      vm = this;
+    }
   },
+  mounted() {},
   methods: {
     handlePieData(pieData) {
       this.legendData = pieData.map( item => {
-        return item.certName
+        return item.name
       })
       this.seriesData = pieData.map( item => {
-        return { name: item.certName, value: item.doneCount}
+        return { name: item.name, value: item.value}
       })
     },
     // 画饼图
@@ -78,7 +82,10 @@ export default {
           type: "scroll",
           orient: "vertical",
           // orient:'horizontal',
-          top: '30%',
+          itemWidth: 9,
+          itemHeight: 9,
+          borderRadius: 9,
+          top: '10%',
           left: '60%',
           bottom: 20,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
@@ -119,19 +126,19 @@ export default {
     },
     fmtLengend(name) {
       console.log(name);
-      let item = this.pieData.find(item => {
-        return item.certName === name;
+      let item = this.dataList.find(item => {
+        return item.name === name;
       });
-      return (item && item.doneCount) || "";
+      return (item && item.value) || "";
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.chart-pie {
+.chart-pie-edu {
   position: relative;
-  top: -6px;
+  top: -12px;
   // height: 280px;
   margin: 15px;
   background: rgba(255, 255, 255, 1);

components/bussiness/charts/chart-pie-title.vue

@@ -6,7 +6,7 @@
 </template>
 <script>
 import { format } from "path";
-import { echartColors } from '@/utils/index'
+import { echartColors } from "@/utils/index";
 let vm = null;
 export default {
   name: "titlePie",
@@ -18,11 +18,19 @@ export default {
         { value: 310, name: "及格证书" },
         { value: 234, name: "未获证" }
       ]
+    },
+    dataList: {
+      type: Array,
+      default: () => [
+        { value: 335, name: "优秀证书" },
+        { value: 310, name: "及格证书" },
+        { value: 234, name: "未获证" }
+      ]
     }
   },
   data() {
     return {
-      pieId: 'titlePieId',
+      pieId: "titlePieId",
       chartHeight: "1000px",
       handledData: {},
       legendData: [],
@@ -31,7 +39,14 @@ export default {
     };
   },
   watch: {
-    pieData: {
+    // pieData: {
+    //   handler(newValue, oldValue) {
+    //     this.handlePieData(newValue);
+    //     this.drawPie();
+    //   },
+    //   deep: true
+    // },
+    dataList: {
       handler(newValue, oldValue) {
         this.handlePieData(newValue);
         this.drawPie();
@@ -39,17 +54,20 @@ export default {
       deep: true
     }
   },
-  mounted() {
-    vm = this;
+  created() {
+    if (process.client) {
+      vm = this;
+    }
   },
+  mounted() {},
   methods: {
     handlePieData(pieData) {
-      this.legendData = pieData.map( item => {
-        return item.certName
-      })
-      this.seriesData = pieData.map( item => {
-        return { name: item.certName, value: item.doneCount}
-      })
+      this.legendData = pieData.map(item => {
+        return item.name;
+      });
+      this.seriesData = pieData.map(item => {
+        return { name: item.name, value: item.value };
+      });
     },
     // 画饼图
     drawPie() {
@@ -75,22 +93,55 @@ export default {
         },
 
         legend: {
-          type: "scroll",
+          // type: "scroll",
+          type: "plain", // 普通图例
           orient: "vertical",
+          itemWidth: 9,
+          itemHeight: 9,
+          borderRadius: 20,
           // orient:'horizontal',
-          top: '30%',
-          left: '60%',
+          top: '10%',
+          left: "60%",
           bottom: 20,
           data: vm.legendData, // ["优秀证书", "及格证书", "未获证"],
           textStyle: {
             fontSize: 12,
             // fontWeight: "bolder",
-            color: "#8C8C8C"
+            color: "#8C8C8C",
+            // rich: {
+            //   a: {
+            //     fontSize: 20,
+            //     verticalAlign: "top",
+            //     align: "center",
+            //     padding: [0, 0, 28, 0]
+            //   }
+            // }
           },
+          // textStyle: {
+          //   rich: {
+          //     a: {
+          //       width: 20
+          //     }
+          //   }
+          // },
           // icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略               position: "inner",
           formatter: function(name) {
             return name + " " + vm.fmtLengend(name);
-          }
+          },
+          // itemStyle: {
+          //   normal: {
+          //       shadowBlur: 10,
+          //       shadowColor: 'rgba(120, 36, 50, 0.5)',
+          //       shadowOffsetY: 5,
+          //       color: this.$echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
+          //           offset: 0,
+          //           color: 'rgb(251, 118, 123)'
+          //       }, {
+          //           offset: 1,
+          //           color: 'rgb(204, 46, 72)'
+          //       }])
+          //   }
+          // },          
         },
         series: [
           {
@@ -105,6 +156,7 @@ export default {
             radius: "65%",
             center: ["30%", "50%"],
             data: vm.seriesData, // vm.pieData,
+            
             itemStyle: {
               emphasis: {
                 shadowBlur: 10,
@@ -119,10 +171,10 @@ export default {
     },
     fmtLengend(name) {
       console.log(name);
-      let item = this.pieData.find(item => {
-        return item.certName === name;
+      let item = this.dataList.find(item => {
+        return item.name === name;
       });
-      return (item && item.doneCount) || "";
+      return (item && item.value) || "";
     }
   }
 };

components/bussiness/charts/chart-pie.vue

@@ -5,8 +5,8 @@
   </section>
 </template>
 <script>
-import { format } from "path";
 import { echartColors } from '@/utils/index'
+
 let vm = null;
 let chartPie = null;
 let options = null;
@@ -19,9 +19,9 @@ export default {
     pieData: {
       type: Array,
       default: () => [
-        { value: 335, name: "优秀证书" },
-        { value: 310, name: "及格证书" },
-        { value: 234, name: "未获证" }
+        { value: 10, name: "优秀证书" },
+        { value: 10, name: "及格证书" },
+        { value: 10, name: "未获证" }
       ]
     }
   },
@@ -45,6 +45,9 @@ export default {
   },
   mounted() {
     vm = this;
+    this.legendData = ["优秀证书", "及格证书", "未获证"];
+    this.seriesData = vm.pieData;
+    this.drawPie();
   },
   methods: {
     handlePieData(pieData) {
@@ -95,7 +98,8 @@ export default {
           },
           // icon: "image://./assets/images/left-array-black.png", //格式为'image://+icon文件地址'，其中image::后的//不能省略               position: "inner",
           formatter: function(name) {
-            return name + " " + vm.fmtLengend(name);
+            return name;
+            // return name + " " + vm.fmtLengend(name);
           }
         },
         series: [

components/bussiness/ranking-item.vue

@@ -9,7 +9,7 @@
         </div>
         <div class="content">
           <span class="desc-1">{{item.subName}}</span>
-          <span class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.certCount}}</span>
+          <span class="desc-2">完成人数 {{item.certCount}} | 参与人数 {{item.joinCount}}</span>
         </div>
         <div class="ratio">
           <span class="desc-1">{{(item.certRate * 100).toFixed(0)}}%</span>

components/bussiness/title-klg-point.vue

@@ -24,18 +24,7 @@ export default {
   },
   data() {
     return {
-      value1: 0,
-      value2: "a",
-      option1: [
-        { text: "全部商品", value: 0 },
-        { text: "新款商品", value: 1 },
-        { text: "活动商品", value: 2 }
-      ],
-      option2: [
-        { text: "默认排序", value: "a" },
-        { text: "好评排序", value: "b" },
-        { text: "销量排序", value: "c" }
-      ]
+
     };
   },
   methods: {}

components/common/common-swiper-item.vue

@@ -13,7 +13,7 @@
       </div>
       <div class="statics">
         <span>已获证人数 {{percentData.finishCount}}</span>
-        <span>应参与人数 {{percentData.joinCount}}</span>
+        <span>应参与人数 {{percentData.doctorCount}}</span>
       </div>
     </article>
     <article class="mini">
@@ -25,8 +25,8 @@
           </span>
           <img src="../../assets/images/tips-2.png" />
         </div>
-        <span class="desc-num">已参与人数 {{percentData.doctorCount}}</span>
-        <span class="desc-num">应参与人数 {{percentData.joinCount}}</span>
+        <span class="desc-num">已参与人数 {{percentData.joinCount}}</span>
+        <span class="desc-num">应参与人数 {{percentData.doctorCount}}</span>
       </div>
       <div class="item">
         <div class="wrapper">

components/common/common-title-with-btn.vue

+<!-- 标题组件 -->
+<template>
+  <div class="common-title-wb-wrapper">
+    <ul class="mini">
+      <li class="left">{{title}}</li>
+      <li class="right">
+        <span @click="btnClick(0)" :class="{'active': cIndex === 0}">参与</span><span @click="btnClick(1)" :class="{'active': cIndex === 1}">完成</span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: "证书分布情况"
+    },
+    needRightBtn: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      cIndex: 0
+    };
+  },
+  methods: {
+    btnClick(index) {
+      this.cIndex = index;
+      this.$emit('btnClick', index);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.common-title-wb-wrapper {
+  height: 44px;
+  line-height: 44px;
+  // background: #f8f9fa;
+  font-size: 14px;
+  margin-top: 15px;
+  .mini {
+    padding: 0px 15px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    height: 44px;
+    line-height: 44px;
+    // background: #f8f9fa;
+    li {
+      display: inline-block;
+      &.left {
+        // width: 216px;
+        display: block;
+        height: 44px;
+        line-height: 44px;
+        font-size: 18px;
+        font-weight: 700;
+        color: #373839;
+      }
+      &.right {
+        span {
+          display: inline-block;
+          line-height: 13px;
+          height: 13px;
+          font-size: 13px;
+          font-weight: 700;
+          color: #979899;
+          padding: 8px 15px;
+          background: #F8F9FA;
+          &.active {
+            color: #449284;
+            background: #E3EFED;
+          }
+          &:nth-child(1) {
+            border-radius: 5px 0 0 5px;
+          }
+          &:nth-child(2) {
+            border-radius: 0 5px 5px 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages/index.vue

@@ -7,27 +7,28 @@
     <article v-show="cIndex === 0">
       <CommonSwiperItem :percentData="allData.percentData"></CommonSwiperItem>
       <CommonTitle title="证书分布情况"></CommonTitle>
-      <ChartPie id="certPieId2" :pieData="allData.certData"></ChartPie>
+      <ChartPie id="certPieId2" :pieData="(allData && allData.certData)"></ChartPie>
       <CommonTitle title="证书级别按学历分布情况"></CommonTitle>
-      <ChartColumnStack></ChartColumnStack>
+      <ChartColumnStack :echartsData="echartsData"></ChartColumnStack>
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="项目情况排名"></CommonTitle>
-      <RankingList :studyRank="allData.studyRank"></RankingList>
+      <RankingList :studyRank="(allData && allData.studyRank)"></RankingList>
       <ShowAll @action="gotoPage('/rank-edu')"></ShowAll>
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="完成天数排名"></CommonTitle>
-      <RankingItemDays :rankList="allData.costRank"></RankingItemDays>
+      <RankingItemDays :rankList="(allData && allData.costRank)"></RankingItemDays>
       <ShowAll @action="gotoPage('/rank-days')"></ShowAll>
       <CommonBottomInfo></CommonBottomInfo>
     </article>
 
     <!-- 人群分析 -->
     <article v-show="cIndex === 1">
-      <CommonTitle title="人员学历情况"></CommonTitle>
-      <ChartPieEdu :pieData="allData.certData"></ChartPieEdu>
+      <CommonTitleWithBtn title="人员学历情况" @btnClick="analysisEduClick"></CommonTitleWithBtn>
+      <ChartPieEdu :dataList="analysisEduData"></ChartPieEdu>
       <CommonSplitLine></CommonSplitLine>
-      <CommonTitle title="人员职称情况"></CommonTitle>
-      <ChartPieTitle :pieData="allData.certData"></ChartPieTitle>
+      <!-- <CommonTitle title="人员职称情况"></CommonTitle> -->
+      <CommonTitleWithBtn title="人员职称情况" @btnClick="analysisTitleClick"></CommonTitleWithBtn>
+      <ChartPieTitle :dataList="analysisTitleData"></ChartPieTitle>
     </article>
 
     <!-- 课程分析 -->
@@ -84,9 +85,14 @@
 const cookies = require("cookie-universal")();
 import { goPageByNative } from "@/utils";
 import { mapGetters, mapActions } from "vuex";
+import {
+  getProvinceList,
+  getUserAnalysis
+} from "@/service";
 
 import CommonHeader from "@/components/common/common-header";
 import CommonTitle from "@/components/common/common-title";
+import CommonTitleWithBtn from "@/components/common/common-title-with-btn";
 import CommonLoading from "@/components/common/common-loading";
 import CommonTaps from "@/components/common/common-tabs";
 import CommonSwiperItem from "@/components/common/common-swiper-item";
@@ -139,7 +145,8 @@ export default {
     ChartColumnVertical,
     ExamList,
     ChartColumnVerticalTC,
-    ChartColumnHorizontalTC
+    ChartColumnHorizontalTC,
+    CommonTitleWithBtn
   },
   data() {
     return {
@@ -171,10 +178,33 @@ export default {
         provinceId: "",
         provinceName: "",
         townId: "",
-        townName: ""
+        townName: "",
       },
-      projectId: "666666",
-      token: "77777"
+      projectId: "",
+      token: '4556EDEAAE134FE1B6E1356BF9C1B8F9' || "C284B868425D494386EAEF6C9AE99937",
+      isOrgStat: false,
+      // 区域选择通用接口参数
+      queryParams: {
+        projectId: 256,
+        regionId: ""
+      },
+      // 查询概况数据
+      queryGDParams: {
+        beginDate: "",
+        endDate: "",
+        hospitalIdList: [],
+        originalFlag: 0,    // 默认值0：0不查看原始数据
+        projectId: 256,
+        regionId: "",
+        timeFlag: 0
+      },
+      echartsData: null,
+      analysisData: {
+        eduList: [], 
+        titleList: []
+      },
+      analysisEduData: [],
+      analysisTitleData: []
     };
   },
   async asyncData() {
@@ -182,12 +212,14 @@ export default {
   },
   created() {
     if (process.client) {
-      this.projectId =
-        (this.$router && this.$route.query && this.$route.query.projectId) ||
-        "666666";
-      this.setProjectId(this.projectId);
-      this.setUserToken(this.token);
-      this.getUserInfo();
+      this.projectId = (this.$router && this.$route.query && this.$route.query.projectId) || 256;
+      if(this.$rocNative.isWeb) {
+        this.setUserToken(this.token);
+        cookies.set("token", this.token);
+        this.setProjectId(this.projectId);
+      } else {
+        this.getUserInfo();
+      }
     }
     // console.log(this.$route)
     // console.log(this.$router)
@@ -195,19 +227,21 @@ export default {
     // this.$store.dispatch('searchHospital', { name: '测试' });
   },
   mounted() {
-    // window.addEventListener("resize", this.resizeTheChart);
-    let queryData = {
-      cityId: 0,
-      countyId: 0,
-      hospitalIdList: [0],
-      originalFlag: 0,
-      projectId: 11111,
-      provinceId: 0,
-      townId: 0
-    };
-    this.getGeneralData(queryData);
+    if(this.$rocNative.isWeb) {
+      this.getProvinceData(this.queryParams);
+    }
   },
   methods: {
+    async getProvinceData(params) {
+      await getProvinceList(params).then(res => {
+        if (res.code === "000000") {
+          this.queryGDParams.regionId = res.data.list[0].id;
+          this.setProvinceList(res.data.list);
+          this.getGeneralData(this.queryGDParams);
+          this.getUserAnalysis(this.queryGDParams);
+        }
+      });
+    },
     getUserInfo() {
       this.$rocNative.getUserInfo &&
         this.$rocNative.getUserInfo().then(params => {
@@ -215,12 +249,28 @@ export default {
           // this.userMobile = params.userMobile;
           cookies.set("token", this.token);
           this.setUserToken(this.token);
+          this.setProjectId(this.projectId);
+          this.getProvinceData(this.queryParams);
         });
     },
     async getGeneralData(queryData) {
       await getGeneralData(queryData).then(res => {
         if (res.code === "000000") {
           this.allData = res.data;
+          this.echartsData = res.data.eduData;
+        }
+      });
+    },
+    // 
+    async getUserAnalysis(queryData) {
+      await getUserAnalysis(queryData).then(res => {
+        if (res.code === "000000") {
+          this.analysisData = res.data
+          this.analysisEduData = res.data.eduList.join
+          this.analysisTitleData = res.data.titleList.join
+          // console.log('#########', res)
+          // this.allData = res.data;
+          // this.echartsData = res.data.eduData;
         }
       });
     },
@@ -228,17 +278,16 @@ export default {
       this.cIndex = index;
     },
     areaConfirm(selData) {
-      console.log(selData);
-      this.areaSelected = selData;
-      this.patientSimpleAddress = "";
-      this.psAddress = "";
+      this.queryGDParams.regionId = selData.regionId
       this.isShowArea = false;
+      this.getGeneralData(this.queryGDParams);
     },
     areaCancel() {
       this.isShowArea = false;
     },
     orgConfirm(selData) {
       this.isShowOrg = false;
+      console.log(selData)
     },
     orgCancel() {
       this.isShowOrg = false;
@@ -264,36 +313,18 @@ export default {
       }
     },
 
-    // 跳转到项目情况排名
-    gotoProjectRank() {
-      // let pathUrl = `/lreport_ssr/rank-edu?projectId=${this.projectId}&token=${this.token}`
-      let pathUrl = `/rank-edu?projectId=${this.projectId}&token=${this.token}`;
-      if (this.$rocNative.isWeb) {
-        this.$router.push(pathUrl);
-      } else {
-        goPageByNative(`/lreport_ssr${pathUrl}`);
-      }
+    analysisEduClick(index) {
+      this.analysisEduData = this.analysisData.eduList[index ? 'join' : 'finish']
     },
-    // 跳转到完成天数排名
-    gotoDaysRank() {
-      let pathUrl = `/rank-days?projectId=${this.projectId}&token=${this.token}`;
-      // let pathUrl = `/lreport_ssr/rank-edu?projectId=${this.projectId}&token=${this.token}`
-      if (this.$rocNative.isWeb) {
-        this.$router.push({
-          path: pathUrl
-          // query: {
-          //   projectId: this.provinceId,
-          //   token: this.token
-          // }
-        });
-      } else {
-        goPageByNative(pathUrl);
-      }
+    analysisTitleClick(index) {
+      this.analysisTitleData = this.analysisData.titleList[index ? 'join' : 'finish']
     },
+    // 映射Store中的Actions
     ...mapActions({
-      setProjectId: 'setProjectId',
-      setRegionId: 'setRegionId',
-      setUserToken: 'setUserToken'
+      setProjectId: "setProjectId",
+      setRegionId: "setRegionId",
+      setUserToken: "setUserToken",
+      setProvinceList: "setProvinceList"
     })
   }
 };

pages/rank-days.vue

@@ -13,6 +13,7 @@ import CommonHeader from "@/components/common/common-header";
 import CommonTitleMini from "@/components/common/common-title-mini";
 import RankingItemDays from "@/components/bussiness/ranking-item-days";
 import CommonNoMore from "@/components/common/common-no-more";
+
 export default {
   props: {
     rankList: {

service/api.js

@@ -20,7 +20,7 @@ Axios.interceptors.request.use(
     if (method === 'post' || method === 'put' || method === 'delete') {}
     if (config.withCredentials) {
       // config.headers.token = 'C284B868425D494386EAEF6C9AE99937';
-      // config.headers.token = '3BDACDC8B709441AA6EBCE634BD113E0';
+      // config.headers.token = '3EB9111164E84A45B5B00428D52BC966';
       config.headers.token = cookies.get('token') || 'C284B868425D494386EAEF6C9AE99937';
     }
     return config;

service/index copy.js

+import qs from 'qs';
+import request from './api';
+
+export const getHospital = async (params) => {
+  let query = { pageNum: 1, pageSize: 1, ...params };
+  const str = qs.stringify(query);
+  
+  return request({ url: `/api-ws/hospitals/?${str}` });
+};
+
+/**
+ * 获取省列表
+ */
+export const getProvinceList = async params => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: `/basic-data/position/provinces`
+  });
+};
+
+/**
+ * 获取市列表
+ */
+export const getCityList = async params => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: `/basic-data/position/cities`
+  });
+};
+
+/**
+ * 获取县/区列表
+ */
+export const getCountyList = async params => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: `/basic-data/position/counties`
+  });
+};
+
+/**
+ * 获取乡镇列表
+ */
+export const getTownList = async params => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: `/basic-data/position/towns`
+  });
+};
+
+/**
+ * 获取区域（一般是乡镇）下的机构列表
+ */
+export const getOrgListByTownId = async params => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: `/basic-data/position/towns`
+  });
+};
+
+/**
+ * 总体情况-选择地区下
+ */
+export const getGeneralData = async data => {
+  return request({
+    baseURL: 'http://10.177.11.156:10443/',
+    method: 'post',
+    data: data,
+    withCredentials: true,
+    url: `stats/report/general`
+  });
+};
+
+/**
+ * 总体情况-选择地区下
+ */
+export const getGeneralData = async data => {
+  return request({
+    // baseURL: 'http://10.177.11.156:10443/',
+    method: 'get',
+    // data: data,
+    params: data,
+    withCredentials: true,
+    url: `stats/region?projectId=256`
+  });
+};
\ No newline at end of file

service/index.js

@@ -16,7 +16,7 @@ export const getProvinceList = async params => {
     method: 'get',
     params: params,
     withCredentials: true,
-    url: `/basic-data/position/provinces`
+    url: `stats/region`
   });
 };
 
@@ -28,7 +28,7 @@ export const getCityList = async params => {
     method: 'get',
     params: params,
     withCredentials: true,
-    url: `/basic-data/position/cities`
+    url: `stats/region`
   });
 };
 
@@ -40,7 +40,7 @@ export const getCountyList = async params => {
     method: 'get',
     params: params,
     withCredentials: true,
-    url: `/basic-data/position/counties`
+    url: `stats/region`
   });
 };
 
@@ -52,7 +52,7 @@ export const getTownList = async params => {
     method: 'get',
     params: params,
     withCredentials: true,
-    url: `/basic-data/position/towns`
+    url: `stats/region`
   });
 };
 
@@ -73,10 +73,35 @@ export const getOrgListByTownId = async params => {
  */
 export const getGeneralData = async data => {
   return request({
-    baseURL: 'http://10.177.11.156:10443/',
+    // baseURL: 'http://10.177.11.156:10443/',
     method: 'post',
     data: data,
     withCredentials: true,
     url: `stats/report/general`
   });
-};
+};
\ No newline at end of file
+
+/**
+ * 根据地区获取机构列表
+ */
+export const getHospitalsByRegionId = async params => {
+  return request({
+    method: 'get',
+    params: params,
+    withCredentials: true,
+    url: `stats/region/hospital`
+  });
+};
+
+/**
+ * 人群分析
+ */
+export const getUserAnalysis = async data => {
+  return request({
+    // baseURL: 'http://10.177.11.156:10443/',
+    method: 'post',
+    data: data,
+    withCredentials: true,
+    url: `stats/report/userAnalysis`
+  });
+};

store/index.js

 export const state = () => ({
   projectId: '',
   regionId: '',
+  regionDegree: '',
   userToken: '',
   userMobile: '',
+  provinceList: [],
+  orgList: []
 })
 export const getters = {
   projectId(state) {
@@ -10,12 +13,18 @@ export const getters = {
   },
   regionId(state) {
     return state.regionId
+  },  
+  regionDegree(state) {
+    return state.regionDegree
   },
   userToken(state) {
     return state.userToken
   },
   userMobile(state) {
     return state.userMobile
+  },
+  provinceList(state) {
+    return state.provinceList
   }
 }
 export const mutations = {
@@ -24,12 +33,18 @@ export const mutations = {
   },
   SET_REGION_ID(state, regionId) {
     state.regionId  = regionId
+  },  
+  SET_REGION_DEGREE(state, regionDegree) {
+    state.regionDegree  = regionDegree
   },
   SET_USER_TOKEN(state, userToken) {
     state.userToken  = userToken
   },
   SET_USER_MOBILE(state, userMobile) {
     state.userMobile  = userMobile
+  },  
+  SET_PROVINCE_LIST(state, provinceList) {
+    state.provinceList  = provinceList
   },
 }
 export const actions = {
@@ -38,11 +53,17 @@ export const actions = {
   },
   setRegionId({ commit }, regionId) {
     commit('SET_REGION_ID', regionId);
+  },  
+  setRegionDegree({ commit }, regionDegree) {
+    commit('SET_REGION_DEGREE', regionDegree);
   },
   setUserToken({ commit }, userToken) {
     commit('SET_USER_TOKEN', userToken);
   },
   setUserMobile({ commit }, userMobile) {
     commit('SET_USER_MOBILE', userMobile);
+  },  
+  setProvinceList({ commit }, provinceList) {
+    commit('SET_PROVINCE_LIST', provinceList);
   },
 }
\ No newline at end of file