解决前面四层

components/common/common-area-select copy.vue

+<!-- 区域与机构选择（表头）组件 -->
+<template>
+  <ul class="common-area-select">
+    <li class="center" @click="areaClick">
+      {{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
+    </li>
+    <li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
+      {{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
+    </li>
+  </ul>
+</template>
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    areaName: {
+      type: String,
+      default: "全部"
+    },
+    orgName: {
+      type: String,
+      default: "全部机构"
+    },
+    showArea: {
+      type: Boolean,
+      default: false,
+    },
+    showOrg: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...mapGetters({
+      orgList: 'orgList',
+      areaDegree: 'areaDegree'
+    }),
+    isNotVisible() {
+      if((this.orgList && this.orgList.length == 0) || this.areaDegree == 0 || this.areaDegree == 1 || this.areaDegree == 2) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+
+  methods: {
+    areaClick() {
+      this.$emit("areaClick");
+    },
+    orgClick() {
+      this.$emit("orgClick");
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.common-area-select {
+  &.fixed {
+    position: fixed;
+    top: 69px;
+    z-index: 10000000;
+  }
+  // padding-top: 50px;
+  display: flex;
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  margin: 2px 0 0px;
+  flex-direction: row nowrap;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  justify-content: center; /* 水平居中 */
+  .center {
+    flex: 1;
+    font-size: 15px;
+    font-weight: 400;
+    color: #676869;
+    &.gray {
+      color: #C7C8C9;
+    }
+  }
+  img {
+    // padding-top: 10px;
+    position: relative;
+    left: 3px;
+    top: 1px;
+    width: 12px;
+    height: 12px;
+  }
+}
+</style>

components/common/common-area-select.vue

@@ -2,11 +2,11 @@
 <template>
   <ul class="common-area-select">
     <li class="center" @click="areaClick">
-      {{areaName}}<img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
+      <span><img class="map" src="../../assets/images/map-icon.png"/>{{areaName}}</span><img v-show="!showArea" src="../../assets/images/arr-down.png"/><img v-show="showArea" src="../../assets/images/arr-up.png"/>
     </li>
-    <li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
+    <!-- <li class="center" :class="{'gray': isNotVisible}" @click="orgClick">
       {{orgName}}<img v-show="isNotVisible" src="../../assets/images/arr-down-white.png"/><img v-show="!showOrg && !isNotVisible" src="../../assets/images/arr-down.png"/><img v-show="showOrg && !isNotVisible" src="../../assets/images/arr-up.png"/>
-    </li>
+    </li> -->
   </ul>
 </template>
 <script>
@@ -48,9 +48,9 @@ export default {
     areaClick() {
       this.$emit("areaClick");
     },
-    orgClick() {
-      this.$emit("orgClick");
-    }
+    // orgClick() {
+    //   this.$emit("orgClick");
+    // }
   }
 };
 </script>
@@ -65,8 +65,8 @@ export default {
   // padding-top: 50px;
   display: flex;
   width: 100%;
-  height: 35px;
-  line-height: 35px;
+  height: 44px;
+  line-height: 44px;
   margin: 2px 0 0px;
   flex-direction: row nowrap;
   align-content: center;
@@ -74,13 +74,28 @@ export default {
   text-align: center;
   justify-content: center; /* 水平居中 */
   .center {
-    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    align-items: center;
+    padding: 0 15px;
+    width: 100%;
+    // flex: 1;
     font-size: 15px;
     font-weight: 400;
     color: #676869;
+    background: #F8F9FA;
     &.gray {
       color: #C7C8C9;
     }
+    .map {
+      position: relative;
+      top: 2.5px;
+      margin-right: 7px;
+      width: 16px;
+      height: 16px;
+    }
   }
   img {
     // padding-top: 10px;

components/common/pica-area copy 2.vue

+<!-- 选择地区组件 -->
+<template>
+  <div class="select-wrapper" @touchmove.prevent.stop>
+    <div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
+      <div class="address-wrap" @click.stop @touchmove.prevent.stop>
+        <div class="tip-header">
+          <span class="cancel-btn" @click="cancelSelect">取消</span>
+          <h3>选择地区</h3>
+          <button class="submit-btn" @click="confirm">确定</button>
+          <!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
+        </div>
+        <div class="address-select">
+          <ul class="show-address-header">
+            <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)">
+              {{
+              value.provinceName
+              ? value.provinceName
+              : '请选择'
+              }}
+            </li>
+            <li
+              v-show="value.provinceName  && value.provinceName != '全部' && rank > 1 && areaList.cityList.length"
+              :class="{ active: isShowCity }"
+              class="item"
+              @click="tabAddressClick(2)"
+            >{{ value.cityName ? value.cityName : '请选择' }}</li>
+            <li
+              v-show="value.cityName && rank > 2 && areaList.countyList.length"
+              :class="{ active: isShowCounty }"
+              class="item"
+              @click="tabAddressClick(3)"
+            >
+              {{
+              value.countyName ? value.countyName : '请选择'
+              }}
+            </li>
+            <li
+              v-show="value.countyName && rank > 3 && areaList.townList.length"
+              :class="{ active: isShowTown }"
+              class="item"
+              @click="tabAddressClick(4)"
+            >{{ value.townName ? value.townName : '请选择' }}</li>
+          </ul>
+          <div class="address-content" @touchmove.stop>
+            <ul v-show="isShowProvince" id="province">
+              <li
+                v-for="(provinceItem, index) in areaList.provinceList"
+                :key="index"
+                :class="{ active: provinceItem.selected }"
+                @click="provinceSelect(provinceItem, index)"
+              >
+                <span>{{ provinceItem.label }}</span>
+                <span v-show="provinceItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+            <ul v-show="isShowCity" id="city">
+              <li
+                v-for="(cityItem, index) in areaList.cityList"
+                :key="index"
+                :class="{ active: cityItem.selected }"
+                @click="citySelect(cityItem, index)"
+              >
+                <span>{{ cityItem.label }}</span>
+                <span v-show="cityItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+            <ul v-show="isShowCounty" id="county">
+              <li
+                v-for="(countyItem, index) in areaList.countyList"
+                :key="index"
+                :class="{ active: countyItem.selected }"
+                @click="countySelect(countyItem, index)"
+              >
+                <span>{{ countyItem.label }}</span>
+                <span v-show="countyItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+            <ul v-show="isShowTown" id="town">
+              <li
+                v-for="(townItem, index) in areaList.townList"
+                :key="index"
+                :class="{ active: townItem.selected }"
+                @click="townSelect(townItem, index)"
+              >
+                <span>{{ townItem.label }}</span>
+                <span v-show="townItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters, mapActions } from "vuex";
+import {
+  getProvinceList,
+  getCityList,
+  getCountyList,
+  getTownList,
+  // getHospitalsByRegionId
+} from "../../service";
+
+export default {
+  name: "PicaArea",
+  data() {
+    return {
+      areaList: {
+        provinceList: [],
+        cityList: [],
+        countyList: [],
+        townList: []
+      },
+      value: {
+        cityId: "",
+        cityName: "",
+        countyId: "",
+        countyName: "",
+        patientAddress: "",
+        provinceId: "",
+        provinceName: "",
+        townId: "",
+        townName: "",
+        regionId: "",
+        areaDegree: 0
+      },
+      isDisabled: true,
+      isShowProvince: true,
+      isShowCity: false,
+      isShowCounty: false,
+      isShowTown: false,
+      // 区域选择通用接口参数
+      queryParams: {
+        projectId: 374,
+        regionId: ""
+      }
+    };
+  },
+  props: {
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    rank: {
+      type: Number | String,
+      default: 4
+    }
+  },
+  created() {
+    if (process.client) {
+      if (this.$route && this.$route.query) {
+        let cQuery = this.$route.query;
+        let hospitalIdList = cQuery.hospitalIdList || "";
+        this.queryParams.projectId = cQuery.projectId || "";
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({
+      projectId: "projectId",
+      provinceList: "provinceList"
+    })
+  },
+  watch: {
+    projectId(newVal) {
+      this.queryParams.projectId = newVal;
+    },
+    provinceList(newVal) {
+      this.areaList.provinceList = newVal;
+      this.areaList.provinceList[0].selected = true;
+      this.value.provinceName = this.areaList.provinceList[0].label;
+      this.value.areaDegree = this.areaList.provinceList[0].degree;
+      // this.value.provinceName = "全部";
+    }
+  },
+  methods: {
+
+    // 映射Store中的Actions
+    ...mapActions({
+      setOrgList: "setOrgList",
+      setAreaDegree: "setAreaDegree"
+    }),
+
+    // // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
+    // async getHospitalsByRegionId(params) {
+    //   await getHospitalsByRegionId(params).then(res => {
+    //     if (res.code === "000000") {
+    //       this.setOrgList(res.data.list || []);
+    //     }
+    //   });
+    // },
+
+    // 获取省列表
+    async getProvinceData(params) {
+      await getProvinceList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.provinceList = (res.data && res.data.list) || [];
+          this.areaList.provinceList.map(a => {
+            if (a.id == this.value.provinceId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 获取城市列表
+    async getCityData(params) {
+      await getCityList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.cityList = (res.data && res.data.list) || [];
+          if (this.areaList.cityList.length === 0) {
+            this.isShowProvince = true;
+            this.isShowCity = false;
+            this.isDisabled = false;
+          }
+          this.areaList.cityList.map(a => {
+            if (a.id == this.value.cityId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 获取区/县列表
+    async getCountyData(params) {
+      await getCountyList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.countyList = (res.data && res.data.list) || [];
+          if (this.areaList.countyList.length === 0) {
+            this.isShowProvince = false;
+            this.isShowCity = true;
+            this.isShowCounty = false;
+            this.isDisabled = false;
+          }
+          this.areaList.countyList.map(a => {
+            if (a.id == this.value.countyId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 获取乡/镇列表
+    async getTownData(params) {
+      await getTownList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.townList = (res.data && res.data.list) || [];
+          if (this.areaList.townList.length === 0) {
+            this.isShowProvince = false;
+            this.isShowCity = false;
+            this.isShowCounty = true;
+            this.isShowTown = false;
+            this.isDisabled = false;
+          }
+          this.areaList.townList.map(a => {
+            if (a.id == this.value.townId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 选择省份的操作
+    provinceSelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.provinceId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.provinceName = item.label;
+      this.value.patientAddress = "";
+      this.value.cityId = null;
+      this.value.cityName = "";
+      this.value.countyId = null;
+      this.value.countyName = "";
+      this.value.townId = null;
+      this.value.townName = "";
+
+      // 当前选中的样式
+      this.areaList.provinceList.map(a => (a.selected = false));
+      this.areaList.provinceList[idx].selected = true;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
+      //控制省市县乡数据展示与隐藏
+      this.isShowProvince = false;
+      this.isShowCounty = false;
+      this.isShowTown = false;
+      if (this.rank > 1 && item.degree != 5) {
+        this.isShowCity = true;
+        this.isDisabled = true;
+        this.getCityData(this.queryParams);
+      } else {
+        this.isShowProvince = true;
+        this.isShowCity = false;
+        this.isDisabled = false;
+      }
+    },
+
+    // 选择市的操作
+    citySelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.cityId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.cityName = item.label;
+      this.value.patientAddress = "";
+      this.value.countyId = null;
+      this.value.countyName = "";
+      this.value.townId = null;
+      this.value.townName = "";
+      // 当前选中的样式
+      this.areaList.cityList.map(a => (a.selected = false));
+      this.areaList.cityList[idx].selected = true;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
+      // 控制省市县乡数据展示与隐藏
+      this.isShowProvince = false;
+      this.isShowCity = false;
+      this.isShowTown = false;
+      if (this.rank > 2 && item.degree != 5) {
+        this.isShowCounty = true;
+        this.isDisabled = true;
+        this.getCountyData(this.queryParams);
+      } else {
+        this.isShowProvince = false;
+        this.isShowCity = true;
+        this.isShowCounty = false;
+        this.isDisabled = false;
+      }
+    },
+
+    // 选择区/县的操作
+    countySelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.countyId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.countyName = item.label;
+      this.value.townId = null;
+      this.value.townName = "";
+      this.value.patientAddress = "";
+      // 当前选中的样式
+      this.areaList.countyList.map(a => (a.selected = false));
+      this.areaList.countyList[idx].selected = true;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
+      // 控制省市县乡数据展示与隐藏
+      this.isShowProvince = false;
+      this.isShowCity = false;
+      this.isShowCounty = false;
+      if (this.rank > 3 && item.degree != 5) {
+        this.isShowTown = true;
+        this.isDisabled = true;
+          this.getTownData(this.queryParams);
+      } else {
+        this.isShowProvince = false;
+        this.isShowCity = false;
+        this.isShowCounty = true;
+        this.isShowTown = false;
+        this.isDisabled = false;
+      }
+    },
+
+    // 选择乡镇的操作
+    townSelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.townId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.townName = item.label;
+      this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
+      // 当前选中的样式
+      this.areaList.townList.map(a => (a.selected = false));
+      this.areaList.townList[idx].selected = true;
+      this.isDisabled = false;
+    },
+    tabAddressClick(tab) {
+      if (tab === 1) {
+        this.isShowProvince = true;
+        this.isShowCity = false;
+        this.isShowCounty = false;
+        this.isShowTown = false;
+      } else if (tab === 2) {
+        this.isShowProvince = false;
+        this.isShowCity = true;
+        this.isShowCounty = false;
+        this.isShowTown = false;
+      } else if (tab === 3) {
+        this.isShowProvince = false;
+        this.isShowCity = false;
+        this.isShowCounty = true;
+        this.isShowTown = false;
+      } else if (tab === 4) {
+        this.isShowProvince = false;
+        this.isShowCity = false;
+        this.isShowCounty = false;
+        this.isShowTown = true;
+      }
+    },
+    confirm() {
+      this.$emit("confirm", this.value);
+    },
+    cancelSelect() {
+      this.$emit("cancel", false);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+  .select-wrapper {
+    font-family: PingFangSC-Regular;
+    .mask {
+      position: fixed;
+      z-index: 1000000015;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      background: rgba(55, 56, 57, 0.6);
+    }
+
+    .address-wrap {
+      position: absolute;
+      width: 100%;
+      height: 293px;
+      background-color: #ffffff;
+      box-sizing: border-box;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000000016;
+      .tip-header {
+        position: relative;
+        height: 58px;
+        line-height: 58px;
+        width: 100%;
+        font-size: 17px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 15px;
+        box-sizing: border-box;
+
+        .cancel-btn {
+          color: #999;
+        }
+
+        h3 {
+          font-size: 18px;
+          color: #373839;
+          font-weight: 400;
+        }
+
+        .submit-btn {
+          font-size: 17px;
+          outline: none;
+          border: 1px solid transparent;
+          background-color: transparent;
+          color: #449284 !important;
+
+          &:disabled {
+            color: #c7c8c9;
+          }
+        }
+      }
+
+      .address-select {
+        width: 100%;
+        height: auto;
+        /*height: 196px;*/
+        box-sizing: border-box;
+
+        .show-address-header {
+          width: 100%;
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: flex;
+          position: relative;
+          padding-bottom: 4px;
+
+          &:after {
+            content: " ";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            height: 1px;
+            border-bottom: 1px solid #f0f1f2;
+            color: #f0f1f2;
+            -webkit-transform-origin: 0 0;
+            transform-origin: 0 0;
+            -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+          }
+
+          .item {
+            display: inline-block;
+            font-size: 15px;
+            line-height: 35px;
+            height: 35px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            max-width: 25%;
+            text-align: left;
+            color: #676869;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            position: relative;
+
+            &:last-of-type {
+              padding-right: 15px;
+            }
+
+            &.active {
+              color: #373839;
+              font-family: PingFangSC-Medium;
+              /*font-weight:500;*/
+            }
+
+            &.active:after {
+              content: " ";
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              right: 0;
+              width: 10px;
+              height: 3px;
+              /*border-radius: 2px;*/
+              border-radius: 30%;
+              text-align: center;
+              background-color: #449284;
+              transform: translateX(-50%);
+            }
+          }
+        }
+
+        .address-content {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          /*height: 196px;*/
+          overflow: hidden;
+          box-sizing: border-box;
+
+          ul {
+            width: 100%;
+            height: 196px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding: 10px 13px;
+            -webkit-overflow-scrolling: touch;
+            position: static;
+            -webkit-transform: translateZ(0px);
+
+            li {
+              height: 35px;
+              line-height: 35px;
+              font-size: 15px;
+              width: 100%;
+              overflow-x: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              color: #676869;
+              cursor: pointer;
+              box-sizing: border-box;
+              display: -webkit-box;
+              display: -webkit-flex;
+              display: flex;
+              -webkit-box-align: center;
+              -webkit-align-items: center;
+              align-items: center;
+              justify-content: space-between;
+              -webkit-justify-content: space-between;
+
+              &.active {
+                color: #449284;
+              }
+
+              img {
+                width: 10px;
+                height: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file

components/common/pica-area copy.vue

+<!-- 选择地区组件 -->
+<template>
+  <div class="select-wrapper" @touchmove.prevent.stop>
+    <div class="mask" @click="cancelSelect" @touchmove.prevent.stop>
+      <div class="address-wrap" @click.stop @touchmove.prevent.stop>
+        <div class="tip-header">
+          <span class="cancel-btn" @click="cancelSelect">取消</span>
+          <h3>选择地区</h3>
+          <button class="submit-btn" @click="confirm">确定</button>
+          <!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
+        </div>
+        <div class="address-select">
+          <ul class="show-address-header">
+            <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)">
+              {{
+              value.provinceName
+              ? value.provinceName
+              : '请选择'
+              }}
+            </li>
+            <li
+              v-show="value.provinceName  && value.provinceName != '全部' && rank > 1 && areaList.cityList.length"
+              :class="{ active: isShowCity }"
+              class="item"
+              @click="tabAddressClick(2)"
+            >{{ value.cityName ? value.cityName : '请选择' }}</li>
+            <li
+              v-show="value.cityName && rank > 2 && areaList.countyList.length"
+              :class="{ active: isShowCounty }"
+              class="item"
+              @click="tabAddressClick(3)"
+            >
+              {{
+              value.countyName ? value.countyName : '请选择'
+              }}
+            </li>
+            <li
+              v-show="value.countyName && rank > 3 && areaList.townList.length"
+              :class="{ active: isShowTown }"
+              class="item"
+              @click="tabAddressClick(4)"
+            >{{ value.townName ? value.townName : '请选择' }}</li>
+          </ul>
+          <div class="address-content" @touchmove.stop>
+            <ul v-show="isShowProvince" id="province">
+              <li
+                v-for="(provinceItem, index) in areaList.provinceList"
+                :key="index"
+                :class="{ active: provinceItem.selected }"
+                @click="provinceSelect(provinceItem, index)"
+              >
+                <span>{{ provinceItem.label }}</span>
+                <span v-show="provinceItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+            <ul v-show="isShowCity" id="city">
+              <li
+                v-for="(cityItem, index) in areaList.cityList"
+                :key="index"
+                :class="{ active: cityItem.selected }"
+                @click="citySelect(cityItem, index)"
+              >
+                <span>{{ cityItem.label }}</span>
+                <span v-show="cityItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+            <ul v-show="isShowCounty" id="county">
+              <li
+                v-for="(countyItem, index) in areaList.countyList"
+                :key="index"
+                :class="{ active: countyItem.selected }"
+                @click="countySelect(countyItem, index)"
+              >
+                <span>{{ countyItem.label }}</span>
+                <span v-show="countyItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+            <ul v-show="isShowTown" id="town">
+              <li
+                v-for="(townItem, index) in areaList.townList"
+                :key="index"
+                :class="{ active: townItem.selected }"
+                @click="townSelect(townItem, index)"
+              >
+                <span>{{ townItem.label }}</span>
+                <span v-show="townItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters, mapActions } from "vuex";
+import {
+  getProvinceList,
+  getCityList,
+  getCountyList,
+  getTownList,
+  getHospitalsByRegionId
+} from "../../service";
+
+export default {
+  name: "PicaArea",
+  data() {
+    return {
+      areaList: {
+        provinceList: [],
+        cityList: [],
+        countyList: [],
+        townList: []
+      },
+      value: {
+        cityId: "",
+        cityName: "",
+        countyId: "",
+        countyName: "",
+        patientAddress: "",
+        provinceId: "",
+        provinceName: "",
+        townId: "",
+        townName: "",
+        regionId: "",
+        areaDegree: 0
+      },
+      isDisabled: true,
+      isShowProvince: true,
+      isShowCity: false,
+      isShowCounty: false,
+      isShowTown: false,
+      // 区域选择通用接口参数
+      queryParams: {
+        projectId: 374,
+        regionId: ""
+      }
+    };
+  },
+  props: {
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    rank: {
+      type: Number | String,
+      default: 4
+    }
+  },
+  created() {
+    if (process.client) {
+      if (this.$route && this.$route.query) {
+        let cQuery = this.$route.query;
+        let hospitalIdList = cQuery.hospitalIdList || "";
+        this.queryParams.projectId = cQuery.projectId || "";
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({
+      projectId: "projectId",
+      provinceList: "provinceList"
+    })
+  },
+  watch: {
+    projectId(newVal) {
+      this.queryParams.projectId = newVal;
+    },
+    provinceList(newVal) {
+      this.areaList.provinceList = newVal;
+      this.areaList.provinceList[0].selected = true;
+      this.value.provinceName = this.areaList.provinceList[0].label;
+      this.value.areaDegree = this.areaList.provinceList[0].degree;
+      // this.value.provinceName = "全部";
+    }
+  },
+  methods: {
+
+    // 映射Store中的Actions
+    ...mapActions({
+      setOrgList: "setOrgList",
+      setAreaDegree: "setAreaDegree"
+    }),
+
+    // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
+    async getHospitalsByRegionId(params) {
+      await getHospitalsByRegionId(params).then(res => {
+        if (res.code === "000000") {
+          this.setOrgList(res.data.list || []);
+        }
+      });
+    },
+
+    // 获取省列表
+    async getProvinceData(params) {
+      await getProvinceList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.provinceList = (res.data && res.data.list) || [];
+          this.areaList.provinceList.map(a => {
+            if (a.id == this.value.provinceId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 获取城市列表
+    async getCityData(params) {
+      await getCityList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.cityList = (res.data && res.data.list) || [];
+          if (this.areaList.cityList.length === 0) {
+            this.isShowProvince = true;
+            this.isShowCity = false;
+            this.isDisabled = false;
+          }
+          this.areaList.cityList.map(a => {
+            if (a.id == this.value.cityId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 获取区/县列表
+    async getCountyData(params) {
+      await getCountyList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.countyList = (res.data && res.data.list) || [];
+          if (this.areaList.countyList.length === 0) {
+            this.isShowProvince = false;
+            this.isShowCity = true;
+            this.isShowCounty = false;
+            this.isDisabled = false;
+          }
+          this.areaList.countyList.map(a => {
+            if (a.id == this.value.countyId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 获取乡/镇列表
+    async getTownData(params) {
+      await getTownList(params).then(res => {
+        if (res.code === "000000") {
+          this.areaList.townList = (res.data && res.data.list) || [];
+          if (this.areaList.townList.length === 0) {
+            this.isShowProvince = false;
+            this.isShowCity = false;
+            this.isShowCounty = true;
+            this.isShowTown = false;
+            this.isDisabled = false;
+          }
+          this.areaList.townList.map(a => {
+            if (a.id == this.value.townId) {
+              a.selected = true;
+            }
+          });
+        }
+      });
+    },
+
+    // 选择省份的操作
+    provinceSelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.provinceId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.provinceName = item.label;
+      this.value.patientAddress = "";
+      this.value.cityId = null;
+      this.value.cityName = "";
+      this.value.countyId = null;
+      this.value.countyName = "";
+      this.value.townId = null;
+      this.value.townName = "";
+
+      // 当前选中的样式
+      this.areaList.provinceList.map(a => (a.selected = false));
+      this.areaList.provinceList[idx].selected = true;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+      if (item.degree == 3 || item.degree == 4) {
+        this.getHospitalsByRegionId(this.queryParams);
+      }
+      //控制省市县乡数据展示与隐藏
+      this.isShowProvince = false;
+      this.isShowCounty = false;
+      this.isShowTown = false;
+      if (this.rank > 1) {
+        this.isShowCity = true;
+        this.getCityData(this.queryParams);
+        this.isDisabled = true;
+      } else {
+        this.isDisabled = false;
+      }
+    },
+
+    // 选择市的操作
+    citySelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.cityId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.cityName = item.label;
+      this.value.patientAddress = "";
+      this.value.countyId = null;
+      this.value.countyName = "";
+      this.value.townId = null;
+      this.value.townName = "";
+      // 当前选中的样式
+      this.areaList.cityList.map(a => (a.selected = false));
+      this.areaList.cityList[idx].selected = true;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+      if (item.degree == 3 || item.degree == 4) {
+        this.getHospitalsByRegionId(this.queryParams);
+      }
+      // 控制省市县乡数据展示与隐藏
+      this.isShowProvince = false;
+      this.isShowCity = false;
+      this.isShowTown = false;
+      if (this.rank > 2) {
+        this.isShowCounty = true;
+        this.getCountyData(this.queryParams);
+        this.isDisabled = true;
+      } else {
+        this.isDisabled = false;
+      }
+    },
+
+    // 选择区/县的操作
+    countySelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.countyId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.countyName = item.label;
+      this.value.townId = null;
+      this.value.townName = "";
+      this.value.patientAddress = "";
+      // 当前选中的样式
+      this.areaList.countyList.map(a => (a.selected = false));
+      this.areaList.countyList[idx].selected = true;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+      if (item.degree == 3 || item.degree == 4) {
+        this.getHospitalsByRegionId(this.queryParams);
+      }
+      // 控制省市县乡数据展示与隐藏
+      this.isShowProvince = false;
+      this.isShowCity = false;
+      this.isShowCounty = false;
+      if (this.rank > 3) {
+        this.isShowTown = true;
+        this.getTownData(this.queryParams);
+        this.isDisabled = true;
+      } else {
+        this.isDisabled = false;
+      }
+    },
+
+    // 选择乡镇的操作
+    townSelect(item, idx) {
+      this.value.regionId = item.id;
+      this.value.townId = item.id;
+      this.queryParams.regionId = item.id;
+      this.value.townName = item.label;
+      this.value.patientAddress = `${this.value.provinceName}${this.value.cityName}${this.value.countyName}${this.value.townName}`;
+      // this.setAreaDegree(item.degree)
+      this.value.areaDegree = item.degree;
+      if (item.degree == 0) {
+        return;
+      }
+      if (item.degree == 3 || item.degree == 4) {
+        this.getHospitalsByRegionId(this.queryParams);
+      }
+      // 当前选中的样式
+      this.areaList.townList.map(a => (a.selected = false));
+      this.areaList.townList[idx].selected = true;
+      this.isDisabled = false;
+    },
+    tabAddressClick(tab) {
+      if (tab === 1) {
+        this.isShowProvince = true;
+        this.isShowCity = false;
+        this.isShowCounty = false;
+        this.isShowTown = false;
+      } else if (tab === 2) {
+        this.isShowProvince = false;
+        this.isShowCity = true;
+        this.isShowCounty = false;
+        this.isShowTown = false;
+      } else if (tab === 3) {
+        this.isShowProvince = false;
+        this.isShowCity = false;
+        this.isShowCounty = true;
+        this.isShowTown = false;
+      } else if (tab === 4) {
+        this.isShowProvince = false;
+        this.isShowCity = false;
+        this.isShowCounty = false;
+        this.isShowTown = true;
+      }
+    },
+    confirm() {
+      this.$emit("confirm", this.value);
+    },
+    cancelSelect() {
+      this.$emit("cancel", false);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+  .select-wrapper {
+    font-family: PingFangSC-Regular;
+    .mask {
+      position: fixed;
+      z-index: 1000000015;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      background: rgba(55, 56, 57, 0.6);
+    }
+
+    .address-wrap {
+      position: absolute;
+      width: 100%;
+      height: 293px;
+      background-color: #ffffff;
+      box-sizing: border-box;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000000016;
+      .tip-header {
+        position: relative;
+        height: 58px;
+        line-height: 58px;
+        width: 100%;
+        font-size: 17px;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 15px;
+        box-sizing: border-box;
+
+        .cancel-btn {
+          color: #999;
+        }
+
+        h3 {
+          font-size: 18px;
+          color: #373839;
+          font-weight: 400;
+        }
+
+        .submit-btn {
+          font-size: 17px;
+          outline: none;
+          border: 1px solid transparent;
+          background-color: transparent;
+          color: #449284 !important;
+
+          &:disabled {
+            color: #c7c8c9;
+          }
+        }
+      }
+
+      .address-select {
+        width: 100%;
+        height: auto;
+        /*height: 196px;*/
+        box-sizing: border-box;
+
+        .show-address-header {
+          width: 100%;
+          display: -webkit-box;
+          display: -webkit-flex;
+          display: flex;
+          position: relative;
+          padding-bottom: 4px;
+
+          &:after {
+            content: " ";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            height: 1px;
+            border-bottom: 1px solid #f0f1f2;
+            color: #f0f1f2;
+            -webkit-transform-origin: 0 0;
+            transform-origin: 0 0;
+            -webkit-transform: scaleY(0.5);
+            transform: scaleY(0.5);
+          }
+
+          .item {
+            display: inline-block;
+            font-size: 15px;
+            line-height: 35px;
+            height: 35px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            max-width: 25%;
+            text-align: left;
+            color: #676869;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            position: relative;
+
+            &:last-of-type {
+              padding-right: 15px;
+            }
+
+            &.active {
+              color: #373839;
+              font-family: PingFangSC-Medium;
+              /*font-weight:500;*/
+            }
+
+            &.active:after {
+              content: " ";
+              position: absolute;
+              left: 50%;
+              bottom: 0;
+              right: 0;
+              width: 10px;
+              height: 3px;
+              /*border-radius: 2px;*/
+              border-radius: 30%;
+              text-align: center;
+              background-color: #449284;
+              transform: translateX(-50%);
+            }
+          }
+        }
+
+        .address-content {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          /*height: 196px;*/
+          overflow: hidden;
+          box-sizing: border-box;
+
+          ul {
+            width: 100%;
+            height: 196px;
+            overflow-y: auto;
+            box-sizing: border-box;
+            padding: 10px 13px;
+            -webkit-overflow-scrolling: touch;
+            position: static;
+            -webkit-transform: translateZ(0px);
+
+            li {
+              height: 35px;
+              line-height: 35px;
+              font-size: 15px;
+              width: 100%;
+              overflow-x: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              color: #676869;
+              cursor: pointer;
+              box-sizing: border-box;
+              display: -webkit-box;
+              display: -webkit-flex;
+              display: flex;
+              -webkit-box-align: center;
+              -webkit-align-items: center;
+              align-items: center;
+              justify-content: space-between;
+              -webkit-justify-content: space-between;
+
+              &.active {
+                color: #449284;
+              }
+
+              img {
+                width: 10px;
+                height: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
\ No newline at end of file

components/common/pica-area.vue

@@ -9,6 +9,23 @@
           <button class="submit-btn" @click="confirm">确定</button>
           <!-- <button :disabled="isDisabled" class="submit-btn" @click="confirm">确定</button> -->
         </div>
+        <div class="my-org" >
+          <span>我所在机构</span>
+          <ul>
+              <li
+                class="list"
+                v-for="(provinceItem, index) in areaList.currentOrgList"
+                :key="index"
+                :class="{ active: provinceItem.selected }"
+                @click="provinceSelect(provinceItem, index, true)"
+              >
+                <span>{{ provinceItem.label }}</span>
+                <span v-show="provinceItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+          </ul>
+        </div>
         <div class="address-select">
           <ul class="show-address-header">
             <li :class="{ active: isShowProvince }" class="item" @click="tabAddressClick(1)">
@@ -107,7 +124,7 @@ import {
   getCityList,
   getCountyList,
   getTownList,
-  getHospitalsByRegionId
+  // getHospitalsByRegionId
 } from "../../service";
 
 export default {
@@ -115,6 +132,7 @@ export default {
   data() {
     return {
       areaList: {
+        currentOrgList: [],
         provinceList: [],
         cityList: [],
         countyList: [],
@@ -142,7 +160,8 @@ export default {
       queryParams: {
         projectId: 374,
         regionId: ""
-      }
+      },
+      currentOrgList: []
     };
   },
   props: {
@@ -175,10 +194,30 @@ export default {
       this.queryParams.projectId = newVal;
     },
     provinceList(newVal) {
-      this.areaList.provinceList = newVal;
-      this.areaList.provinceList[0].selected = true;
-      this.value.provinceName = this.areaList.provinceList[0].label;
-      this.value.areaDegree = this.areaList.provinceList[0].degree;
+
+      newVal[0].selected = true;
+      this.value.provinceName = newVal[0].label;
+      this.value.areaDegree = newVal[0].degree;
+
+      this.value.regionId = newVal[0].id;
+      this.value.provinceId = newVal[0].id;
+      this.queryParams.regionId = newVal[0].id;
+      this.value.provinceName = newVal[0].label;
+
+      // this.areaList.provinceList = newVal;
+      // this.areaList.provinceList[0].selected = true;
+      // this.value.provinceName = this.areaList.provinceList[0].label;
+      // this.value.areaDegree = this.areaList.provinceList[0].degree;
+
+      if(newVal[0].containHospitalFlag == 1) {
+        // this.value.provinceName = newVal[1].label;
+        // this.value.provinceName = '请选择';
+        this.areaList.currentOrgList = newVal.slice(0, 1);
+        this.areaList.provinceList = newVal.slice(1);
+      } else {
+        this.areaList.currentOrgList = [];
+        this.areaList.provinceList = newVal;
+      }
       // this.value.provinceName = "全部";
     }
   },
@@ -190,14 +229,14 @@ export default {
       setAreaDegree: "setAreaDegree"
     }),
 
-    // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
-    async getHospitalsByRegionId(params) {
-      await getHospitalsByRegionId(params).then(res => {
-        if (res.code === "000000") {
-          this.setOrgList(res.data.list || []);
-        }
-      });
-    },
+    // // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
+    // async getHospitalsByRegionId(params) {
+    //   await getHospitalsByRegionId(params).then(res => {
+    //     if (res.code === "000000") {
+    //       this.setOrgList(res.data.list || []);
+    //     }
+    //   });
+    // },
 
     // 获取省列表
     async getProvinceData(params) {
@@ -274,7 +313,7 @@ export default {
     },
 
     // 选择省份的操作
-    provinceSelect(item, idx) {
+    provinceSelect(item, idx, isCurrent) {
       this.value.regionId = item.id;
       this.value.provinceId = item.id;
       this.queryParams.regionId = item.id;
@@ -289,25 +328,40 @@ export default {
 
       // 当前选中的样式
       this.areaList.provinceList.map(a => (a.selected = false));
-      this.areaList.provinceList[idx].selected = true;
+      if(isCurrent) {
+        this.areaList.currentOrgList.map(a => (a.selected = true));
+      } else {
+        this.areaList.currentOrgList.map(a => (a.selected = false));
+        this.areaList.provinceList[idx].selected = true;
+      }
+      // this.areaList.provinceList.map(a => (a.selected = false));
+      // this.areaList.provinceList[idx].selected = true;
       // this.setAreaDegree(item.degree)
       this.value.areaDegree = item.degree;
       if (item.degree == 0) {
         return;
       }
-      if (item.degree == 3 || item.degree == 4) {
-        this.getHospitalsByRegionId(this.queryParams);
-      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
       //控制省市县乡数据展示与隐藏
       this.isShowProvince = false;
       this.isShowCounty = false;
       this.isShowTown = false;
-      if (this.rank > 1) {
+      if (this.rank > 1 && item.degree != 5) {
         this.isShowCity = true;
-        this.getCityData(this.queryParams);
         this.isDisabled = true;
+        this.getCityData(this.queryParams);
       } else {
+        this.isShowProvince = true;
+        this.isShowCity = false;
         this.isDisabled = false;
+        this.areaList.cityList = [];
+        this.areaList.countyList = [];
+        this.areaList.townList = [];
       }
     },
 
@@ -330,19 +384,27 @@ export default {
       if (item.degree == 0) {
         return;
       }
-      if (item.degree == 3 || item.degree == 4) {
-        this.getHospitalsByRegionId(this.queryParams);
-      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
       // 控制省市县乡数据展示与隐藏
       this.isShowProvince = false;
       this.isShowCity = false;
       this.isShowTown = false;
-      if (this.rank > 2) {
+      if (this.rank > 2 && item.degree != 5) {
         this.isShowCounty = true;
-        this.getCountyData(this.queryParams);
         this.isDisabled = true;
+        this.getCountyData(this.queryParams);
       } else {
+        this.isShowProvince = false;
+        this.isShowCity = true;
+        this.isShowCounty = false;
         this.isDisabled = false;
+        this.areaList.countyList = [];
+        this.areaList.townList = [];
       }
     },
 
@@ -363,19 +425,27 @@ export default {
       if (item.degree == 0) {
         return;
       }
-      if (item.degree == 3 || item.degree == 4) {
-        this.getHospitalsByRegionId(this.queryParams);
-      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
       // 控制省市县乡数据展示与隐藏
       this.isShowProvince = false;
       this.isShowCity = false;
       this.isShowCounty = false;
-      if (this.rank > 3) {
+      if (this.rank > 3 && item.degree != 5) {
         this.isShowTown = true;
-        this.getTownData(this.queryParams);
         this.isDisabled = true;
+          this.getTownData(this.queryParams);
       } else {
+        this.isShowProvince = false;
+        this.isShowCity = false;
+        this.isShowCounty = true;
+        this.isShowTown = false;
         this.isDisabled = false;
+        this.areaList.townList = [];
       }
     },
 
@@ -391,9 +461,12 @@ export default {
       if (item.degree == 0) {
         return;
       }
-      if (item.degree == 3 || item.degree == 4) {
-        this.getHospitalsByRegionId(this.queryParams);
-      }
+
+      // // Modified By Anndy Yang
+      // if (item.degree == 3 || item.degree == 4) {
+      //   this.getHospitalsByRegionId(this.queryParams);
+      // }
+
       // 当前选中的样式
       this.areaList.townList.map(a => (a.selected = false));
       this.areaList.townList[idx].selected = true;
@@ -423,6 +496,7 @@ export default {
       }
     },
     confirm() {
+      console.log(this.areaList);
       this.$emit("confirm", this.value);
     },
     cancelSelect() {
@@ -447,7 +521,8 @@ export default {
     .address-wrap {
       position: absolute;
       width: 100%;
-      height: 293px;
+      height: 353px;
+      // height: 293px;
       background-color: #ffffff;
       box-sizing: border-box;
       bottom: 0;
@@ -610,5 +685,25 @@ export default {
         }
       }
     }
+    .my-org {
+      margin: 0 15px 15px;
+      & > span {
+        font-size: 12px;
+        color: #979899;
+      }
+      .list {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 4px;
+        span {
+          font-size: 15px;
+          color: #676869;
+        }
+        img {
+          width: 10px;
+        }
+      }
+    }
   }
 </style>
\ No newline at end of file

components/common/pica-org copy.vue

+<!-- 选择机构组件 -->
+<template>
+  <div class="select-wrapper" @touchmove.prevent.stop>
+    <div class="mask" @click="cancel" @touchmove.prevent.stop>
+      <div class="address-wrap" @click.stop @touchmove.prevent.stop>
+        <div class="tip-header">
+          <span class="cancel-btn" @click="cancel">取消</span>
+          <h3>选择机构</h3>
+          <span class="submit-btn" @click="confirm">确定</span>
+        </div>
+        <div class="address-select">
+          <ul class="show-address-header">
+            <li class="item active">
+              请选择
+            </li>
+          </ul>
+          <div class="address-content" @touchmove.stop>
+            <ul id="province">
+              <li
+                v-for="(orgItem, index) in dataList"
+                :key="index"
+                :class="{ active: orgItem.selected }"
+                @click="orgSelect(orgItem, index)"
+              >
+                <span>{{ orgItem.hospitalName }}</span>
+                <span v-show="orgItem.selected">
+                  <img src="../../assets/images/sort-select-icon.png" />
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "PicaOrg",
+  data() {
+    return {
+      dataList: [],
+    };
+  },
+  props: {
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    rank: {
+      type: Number | String,
+      default: 4
+    }
+  },
+  computed: {
+    ...mapGetters({
+      orgList: "orgList"
+    })
+  },
+  watch: {
+    orgList: {
+      handler(newList) {
+        this.dataList = newList || [];
+        this.dataList.map(a => {
+          a.selected = false;
+        });
+      },
+      deep: true
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+    orgSelect(item, idx) {
+      this.dataList[idx].selected = !this.dataList[idx].selected;
+      this.$forceUpdate()
+    },
+
+    confirm() {
+      this.$emit("confirm", this.dataList);
+    },
+
+    cancel() {
+      this.$emit("cancel", false);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.select-wrapper {
+  font-family: PingFangSC-Regular;
+
+  .mask {
+    position: fixed;
+    z-index: 1000000005;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: rgba(55, 56, 57, 0.6);
+  }
+
+  .address-wrap {
+    position: absolute;
+    width: 100%;
+    height: 293px;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000000006;
+    .tip-header {
+      position: relative;
+      height: 58px;
+      line-height: 58px;
+      width: 100%;
+      font-size: 17px;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 15px;
+      box-sizing: border-box;
+      .cancel-btn {
+        color: #999;
+      }
+
+      h3 {
+        font-size: 18px;
+        color: #373839;
+        font-weight: 400;
+      }
+
+      .submit-btn {
+        font-size: 17px;
+        outline: none;
+        border: 1px solid transparent;
+        background-color: transparent;
+        color: #449284 !important;
+
+        &:disabled {
+          color: #c7c8c9;
+        }
+      }
+    }
+
+    .address-select {
+      width: 100%;
+      height: auto;
+      /*height: 196px;*/
+      box-sizing: border-box;
+
+      .show-address-header {
+        width: 100%;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        position: relative;
+        padding-bottom: 4px;
+
+        &:after {
+          content: " ";
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          height: 1px;
+          border-bottom: 1px solid #f0f1f2;
+          color: #f0f1f2;
+          -webkit-transform-origin: 0 0;
+          transform-origin: 0 0;
+          -webkit-transform: scaleY(0.5);
+          transform: scaleY(0.5);
+        }
+
+        .item {
+          display: inline-block;
+          font-size: 15px;
+          line-height: 35px;
+          height: 35px;
+          padding: 0 15px;
+          box-sizing: border-box;
+          max-width: 25%;
+          text-align: left;
+          color: #676869;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          position: relative;
+
+          &:last-of-type {
+            padding-right: 15px;
+          }
+
+          &.active {
+            color: #373839;
+            font-family: PingFangSC-Medium;
+            /*font-weight:500;*/
+          }
+
+          &.active:after {
+            content: " ";
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            right: 0;
+            width: 10px;
+            height: 3px;
+            /*border-radius: 2px;*/
+            border-radius: 30%;
+            text-align: center;
+            background-color: #449284;
+            transform: translateX(-50%);
+          }
+        }
+      }
+
+      .address-content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        /*height: 196px;*/
+        overflow: hidden;
+        box-sizing: border-box;
+
+        ul {
+          width: 100%;
+          height: 196px;
+          overflow-y: auto;
+          box-sizing: border-box;
+          padding: 10px 13px;
+          -webkit-overflow-scrolling: touch;
+          position: static;
+          -webkit-transform: translateZ(0px);
+
+          li {
+            height: 35px;
+            line-height: 35px;
+            font-size: 15px;
+            width: 100%;
+            overflow-x: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #676869;
+            cursor: pointer;
+            box-sizing: border-box;
+            display: -webkit-box;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-box-align: center;
+            -webkit-align-items: center;
+            align-items: center;
+            justify-content: space-between;
+            -webkit-justify-content: space-between;
+
+            &.active {
+              color: #449284;
+            }
+
+            img {
+              width: 10px;
+              height: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

pages/index copy.vue

+<template>
+<section class="container">
+  <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
+  <CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" @orgClick="orgTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg">
+  </CommonAreaSelect>
+  <CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
+  <!-- 总体概况 -->
+  <div v-show="isScroll" class="pd-top-60"></div>
+  <article v-show="cIndex === 0">
+    <CommonSwiperItem :isSingleOrg="isSingleOrg" :percentData="allData.percentData || {}" :certFlag="projectInfo.certFlag" @tipsClick="tipsSwiperClick"></CommonSwiperItem>
+    <div v-show="!isSingleOrg">
+      <CommonTitle v-if="projectInfo.certFlag" title="证书分布情况"></CommonTitle>
+      <ChartPie v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" id="certPieId2" :pieData="(allData && allData.certData)"></ChartPie>
+      <CommonTitle v-if="projectInfo.certFlag" title="证书级别按学历分布情况"></CommonTitle>
+      <ChartColumnStack v-if="projectInfo.certFlag" :certFlag="projectInfo.certFlag" :echartsData="echartsData"></ChartColumnStack>
+      <CommonSplitLine></CommonSplitLine>
+      <CommonTitle title="项目情况排名"></CommonTitle>
+      <RankingList :certFlag="projectInfo.certFlag" :rankList="studyRankList.slice(0, 5)"></RankingList>
+      <ShowAll v-show="studyRankList.length > 5" @action="gotoPage('/rankedu', true)"></ShowAll>
+      <CommonSplitLine></CommonSplitLine>
+      <CommonTitleWithWhat @tipsClick="tipsRankingItemClick" title="完成天数排名"></CommonTitleWithWhat>
+      <RankingItemDays :rankList="costRankList.slice(0, 5)"></RankingItemDays>
+      <ShowAll v-show="costRankList.length > 5" @action="gotoPage('/rankdays')"></ShowAll>
+    </div>
+    <div v-show="isSingleOrg">
+      <CommonTitle title="培训机构情况"></CommonTitle>
+      <OrgDoctorList @orgDoctorTabChange="orgDoctorTabChange" :certUserList="orgDoctorTabData.certUserList" :noCertUserList="orgDoctorTabData.noCertUserList" :noJoinList="orgDoctorTabData.noJoinList" :certFlag="projectInfo.certFlag" :containOfficialFlag="projectInfo.containOfficialFlag"></OrgDoctorList>
+    </div>
+    <CommonBottomInfo></CommonBottomInfo>
+  </article>
+
+  <!-- 人群分析 -->
+  <article v-show="cIndex === 1">
+    <CommonTitleWithBtn title="人员学历情况" @btnClick="analysisEduClick"></CommonTitleWithBtn>
+    <ChartPieEdu :dataList="analysisEduData"></ChartPieEdu>
+    <CommonSplitLine></CommonSplitLine>
+    <CommonTitleWithBtn title="人员职称情况" @btnClick="analysisTitleClick"></CommonTitleWithBtn>
+    <ChartPieTitle :dataList="analysisTitleData"></ChartPieTitle>
+    <CommonBottomInfo></CommonBottomInfo>
+  </article>
+
+  <!-- 课程分析 -->
+  <article ref="courseAnalysitRef" v-show="(cIndex === 2) && (projectInfo.existCourse == 1)" style="padding-top: 8px;">
+    <CourseTimesStat :totalSize="courseInfo.totalSize" :maxDuration="courseInfo.pCourseTotalTime" :avgDuration="courseInfo.pCourseAvg" :processDataObj="processDataObj"></CourseTimesStat>
+    <CommonSplitLine></CommonSplitLine>
+    <CommonTitle title="课程列表"></CommonTitle>
+    <CourseTimesList :dataList="courseInfo.pCourseList"></CourseTimesList>
+    <CommonBottomInfo :class="{'fixed-bottom-info': needFixedBottomInfo}"></CommonBottomInfo>
+  </article>
+
+  <!-- 考试分析 -->
+  <article v-show="(cIndex === 3) && (projectInfo.existExam == 1)">
+    <CommonCard :cardList="examCardList"></CommonCard>
+    <CommonSplitLine></CommonSplitLine>
+
+    <div v-if="projectInfo.containOfficialFlag">
+      <CommonTitle title="完成项目考试次数情况"></CommonTitle>
+      <ChartColumnVerticalTimes :dataList="(generalExamData.examTimesList || []).slice(0, 5)" id="chartCourseTimesId" :colors="colors"></ChartColumnVerticalTimes>
+      <!-- <ShowAll v-show="generalExamData.examTimesList.length" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll> -->
+      <ShowAll v-show="generalExamData && generalExamData.examTimesList.length > 5" @action="gotoPage('/examtimes')" class="mt-10"></ShowAll>
+      <CommonSplitLine></CommonSplitLine>
+      <CommonTitle title="完成项目考试分数情况"></CommonTitle>
+      <ChartColumnVerticalScore id="chartCourseScoreId" :dataList="(generalExamData.examScoreList || []).slice(0, 5)"></ChartColumnVerticalScore>
+      <ShowAll v-show="generalExamData.examScoreList && generalExamData.examScoreList.length > 5" @action="gotoPage('/examscore')" class="mt-10"></ShowAll>
+      <CommonSplitLine></CommonSplitLine>
+    </div>
+    <CommonTitle title="考试列表"></CommonTitle>
+    <ExamList :dataList="examInfoList"></ExamList>
+    <CommonBottomInfo :class="{'fixed-bottom-info': !projectInfo.containOfficialFlag && examInfoList.length < 4}"></CommonBottomInfo>
+  </article>
+
+  <!-- 学习效果分析 -->
+  <article v-show="(cIndex === 4) && (projectInfo.existEffect == 1)">
+    <CommonCard :needBG="needBG" :cardList="effectCardList"></CommonCard>
+    <CommonSplitLine></CommonSplitLine>
+    <CommonTitle title="不同学历培训前后正确率对比"></CommonTitle>
+    <ChartColumnVerticalTC :dataList="studyEffect.educationEffectList || []" id="chartColumnVerticalTC"></ChartColumnVerticalTC>
+    <CommonSplitLine style="margin-top: 10px;"></CommonSplitLine>
+    <CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
+    <ChartColumnHorizontalTC :dataList="(studyEffect.knowledgeEffectList || []).slice(0, 5)" id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
+    <ShowAll v-show="studyEffect.knowledgeEffectList && studyEffect.knowledgeEffectList.length > 5" @action="gotoPage('/klgpoint')" class="mt-10"></ShowAll>
+    <CommonBottomInfo></CommonBottomInfo>
+  </article>
+
+  <PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel" :projectId="projectId" :token="token"></PicaArea>
+  <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
+  <CommonLoading v-show="false"></CommonLoading>
+  <PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
+  <Loading v-show="isShowLoading"></Loading>
+</section>
+</template>
+
+<script>
+const cookies = require("cookie-universal")();
+import {
+  goPageByNative
+} from "@/utils";
+import {
+  mapGetters,
+  mapActions
+} from "vuex";
+import {
+  getProvinceList,
+  getUserAnalysis,
+  getHospitalsCNT,
+  getGeneralPersonal,
+  getGeneralCourse,
+  getGeneralExam,
+  getProjectInfo,
+  getGeneralExamList,
+  getStudyEffect,
+  getHospitalsByRegionId
+} from "@/service";
+
+import CommonHeader from "@/components/common/common-header";
+import CommonTitle from "@/components/common/common-title";
+import CommonTitleWithWhat from "@/components/common/common-title-with-what";
+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";
+import CommonSplitLine from "@/components/common/common-split-line";
+import RankingList from "@/components/bussiness/ranking-item";
+import ShowAll from "@/components/common/common-show-all";
+import CommonBottomInfo from "@/components/common/common-bottom-info";
+import RankingItemDays from "@/components/bussiness/ranking-item-days";
+import ChartPie from "@/components/bussiness/charts/chart-pie";
+import ChartPieEdu from "@/components/bussiness/charts/chart-pie-edu";
+import ChartPieTitle from "@/components/bussiness/charts/chart-pie-title";
+import ChartColumnStack from "@/components/bussiness/charts/chart-column-stack";
+import ChartColumnVerticalTimes from "@/components/bussiness/charts/chart-column-vertical-times";
+import ChartColumnVerticalScore from "@/components/bussiness/charts/chart-column-vertical-score";
+import ChartColumnVerticalTC from "@/components/bussiness/charts/chart-column-vertical-tc";
+import ChartColumnHorizontalTC from "@/components/bussiness/charts/chart-column-horizontal-tc";
+import PicaArea from "@/components/common/pica-area";
+import PicaOrg from "@/components/common/pica-org";
+import CommonAreaSelect from "@/components/common/common-area-select";
+import ProcessBar from "@/components/common/pica-process";
+import CourseTimesStat from "@/components/bussiness/course-times-stat";
+import CourseTimesList from "@/components/bussiness/course-times-list";
+import OrgDoctorList from "@/components/bussiness/org-doctor-list";
+import ExamList from "@/components/bussiness/exam-list";
+import PopTips from "@/components/bussiness/pop-tips";
+import CommonCard from "@/components/common/common-card";
+import Loading from "@/components/common/common-loading";
+
+import {
+  getGeneralData
+} from "@/service/index";
+let timeOutId = null;
+export default {
+  components: {
+    CommonHeader,
+    CommonTitle,
+    CommonLoading,
+    CommonTaps,
+    CommonSwiperItem,
+    CommonSplitLine,
+    RankingList,
+    ChartPie,
+    ChartPieEdu,
+    ChartPieTitle,
+    ShowAll,
+    CommonBottomInfo,
+    RankingItemDays,
+    ChartColumnStack,
+    PicaArea,
+    PicaOrg,
+    CommonAreaSelect,
+    ProcessBar,
+    CourseTimesStat,
+    CourseTimesList,
+    CommonCard,
+    ExamList,
+    // ChartColumnVertical,
+    ChartColumnVerticalTC,
+    ChartColumnHorizontalTC,
+    CommonTitleWithBtn,
+    OrgDoctorList,
+    ChartColumnVerticalTimes,
+    ChartColumnVerticalScore,
+    PopTips,
+    CommonTitleWithWhat,
+    Loading
+  },
+  data() {
+    return {
+      isShowLoading: true,
+      isScroll: false,
+      isShowArea: false,
+      isShowOrg: false,
+      isShowTips: false,
+      isShowRankingItemTips: false,
+      tipsContent: '',
+      areaName: '全部',
+      orgName: '全部机构',
+      cIndex: 0,
+      colors: ["#39AF9A", "#FF9A4B", "#abb7bb", "#76d2d2"],
+      needBG: true,
+      effectCardList: [{
+          count: 65,
+          unitName: "%",
+          description: "培训前正确率"
+        },
+        {
+          count: 80,
+          unitName: "%",
+          description: "培训后正确率"
+        }
+      ],
+      allData: {},
+      studyRankList: [],
+      costRankList: [],
+      projectId: "",
+      token: "6774A32CF72F4AA0ABB86DF37DB7F916" ||
+        "79A005DB585C45C389ED1DD0C76E3633" ||
+        "A220943B006347799F277CC524EBB662",
+      isOrgStat: false,
+      // 区域选择通用接口参数
+      queryParams: {
+        projectId: 374,
+        regionId: ""
+      },
+      // 查询概况数据
+      queryGDParams: {
+        beginDate: "",
+        endDate: "",
+        hospitalIdList: [],
+        originalFlag: 2, // 默认值2：1.查看原始数据 2.查看调整后的数据
+        projectId: 374,
+        regionId: "",
+        timeFlag: 1,
+        pageNo: 0,
+        pageSize: 0,
+        sourceType: 1,
+        pageCfg: {
+          type: 1
+        }
+      },
+      echartsData: null,
+      analysisData: {
+        eduList: {
+          join: [],
+          finish: []
+        },
+        titleList: {
+          join: [],
+          finish: []
+        },
+      },
+      analysisEduData: [],
+      analysisTitleData: [],
+      CNTParams: {
+        projectId: 374,
+        regionId: ""
+      },
+      hospitalCnt: 2,
+      isSingleOrg: false,
+      orgDoctorTabData: {
+        certUserList: [],
+        noCertUserList: [],
+        noJoinList: []
+      },
+      projectInfo: {
+        projectName: '项目名称',
+        certFlag: 0, // 项目证书情况 0：无证；1：单证书；2：多证书
+        existCourse: 2, // 是否显示课程分析 1：显示 2：不显示
+        existEffect: 2, // 是否显示学习效果分析 1：显示 2：不显示
+        existExam: 2, // 是否显示考试分析 1：显示 2：不显示
+        roleType: 0, // 0：普通人 1：内部管理员 2：项目负责人 3：次级负责人
+        status: 0, // 是否显示查看原始数据 1：显示 2：不显示
+        containOfficialFlag: 0 // 0: 无正式考考试 1: 有正式考考试
+      },
+      courseInfo: {
+        pCourseTotalTime: 0,
+        pCourseAvg: 0,
+        pCourseList: []
+      },
+      generalExamData: {
+        beforeExamCount: 4,
+        afterExamCount: 4,
+        examTitleCount: 800,
+        examTimesList: [],
+        examScoreList: [],
+        fiveExamScoreList: [],
+        tenExamScoreList: []
+      },
+      examCardList: [],
+      examInfoList: [],
+      studyEffect: {
+        beforeRate: 0,
+        afterRate: 0,
+        educationEffectList: [],
+        knowledgeEffectList: []
+      },
+      processDataObj: {
+
+      },
+      needFixedBottomInfo: false,
+    };
+  },
+  filters: {
+    shortName: function (value, length = 15, append = '...') {
+      if (value && value.length > length) {
+        return value.substring(0, length) + append
+      } else {
+        return value
+      }
+    }
+  },
+  computed: {
+    ...mapGetters({
+      orgList: "orgList",
+      areaDegree: "areaDegree"
+    }),
+  },
+  asyncData() {
+    return {};
+  },
+  created() {
+    if (process.client) {
+      this.token = (this.$route && this.$route.query && this.$route.query.token) || this.token;
+      this.projectId = (this.$route && this.$route.query && this.$route.query.projectId) || 374;
+      this.queryGDParams.projectId = this.projectId;
+      this.CNTParams.projectId = this.projectId;
+      this.queryParams.projectId = this.projectId;
+      if (this.$rocNative.isWeb) {
+        this.setUserToken(this.token);
+        cookies.set("lreporttoken", this.token);
+        this.setProjectId(this.projectId);
+      } else {
+        this.getUserInfo();
+      }
+    }
+    // this.$store.dispatch('searchHospital', { name: '测试' });
+  },
+  mounted() {
+    if (this.$rocNative.isWeb) {
+      this.getProjectInfo(this.queryParams);
+    }
+
+    window.addEventListener('scroll', () => { this.handleScroll() }, false);
+  },
+  methods: {
+    handleScroll() {
+      var scrollTop = window.scrollY;
+      if (scrollTop > 40) {
+        this.isScroll = true;
+      } else {
+        this.isScroll = false;
+      }
+    },
+
+    // 获取可区域高度
+    getViewportHeight() {
+      var doc = document;
+      var docE = doc.documentElement;
+      var body = doc.body;
+      return docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0;
+      // return {
+      //   'width': docE && docE.clientWidth || body && body.offsetWidth || window.innerWidth || 0,
+      //   'height': docE && docE.clientHeight || body && body.offsetHeight || window.innerHeight || 0
+      // };
+    },
+
+    // 切换机构人员列表中的tabs
+    orgDoctorTabChange(index) {
+      this.queryGDParams.pageCfg.type = index + 1;
+      this.getGeneralPersonal(this.queryGDParams);
+    },
+
+    // 查询用户信息和权限
+    getProjectInfo(params) {
+      getProjectInfo({
+        projectId: this.projectId
+      }).then(res => {
+        if (res.code === "000000") {
+          this.projectInfo = res.data;
+          getProvinceList(params).then(res => {
+            if (res.code === "000000") {
+              let regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
+              this.queryGDParams.regionId = regionId;
+              this.CNTParams.regionId = regionId;
+              let proviceList = (res.data && res.data.list) || [];
+              let degree = (proviceList.length && proviceList[0].degree) || 0;
+              this.areaName = (proviceList.length && proviceList[0].label) || '全部';
+              this.queryParams.projectId = this.projectId;
+              this.queryParams.regionId = regionId;
+              this.getHospitalsByRegionId(this.queryParams);
+              this.setProvinceList(proviceList);
+              this.setAreaDegree(degree);
+              // if( degree == 3 || degree == 4) {
+              //   this.isShowOrg = true;
+              // }
+              this.getHospitalsCNT(this.CNTParams);
+            }
+          });
+        }
+      });
+    },
+
+    // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
+    async getHospitalsByRegionId(params) {
+      await getHospitalsByRegionId(params).then(res => {
+        if (res.code === "000000") {
+          this.setOrgList(res.data.list || []);
+        }
+      });
+    },
+
+    // 异步延迟调用其它Tabs接口（除了数据概述）
+    otherInterface() {
+      setTimeout(() => {
+        this.getUserAnalysis(this.queryGDParams);
+        this.projectInfo.existCourse == 1 && this.getGeneralCourse(this.queryGDParams);
+        this.projectInfo.existExam == 1 && this.getGeneralExam(this.queryGDParams);
+        this.projectInfo.existEffect == 1 && this.getStudyEffect(this.queryGDParams);
+      }, 100);
+    },
+
+    // 根据地区查询地区下是否有机构
+    getHospitalsCNT(params) {
+      getHospitalsCNT(params).then(res => {
+        if (res.code === "000000") {
+          this.hospitalCnt = res.data.hospitalCnt;
+          this.isSingleOrg = res.data.hospitalCnt === 1;
+          if (this.isSingleOrg) {
+            // 只有一个机构，则调用另外一个接口（机构下人员）
+            this.queryGDParams.hospitalIdList = [];
+            this.queryGDParams.hospitalIdList.push(res.data.list[0].hospitalId);
+            this.getGeneralPersonal(this.queryGDParams);
+          } else {
+            this.getGeneralData(this.queryGDParams);
+          }
+          this.otherInterface();
+        }
+      });
+    },
+
+    // 请求单个机构下的数据(总体概述的数据)
+    getGeneralPersonal(params) {
+      getGeneralPersonal(params).then(res => {
+        if (res.code === "000000") {
+          this.isShowLoading = false;
+          this.allData = res.data;
+          this.studyRankList = this.allData.studyRank || [];
+          this.costRankList = this.allData.costRank || [];
+          if (params.pageCfg.type === 1) {
+            this.orgDoctorTabData.certUserList = res.data.personData;
+          } else if (params.pageCfg.type === 2) {
+            this.orgDoctorTabData.noCertUserList = res.data.personData;
+          } else {
+            this.orgDoctorTabData.noJoinList = res.data.personData;
+          }
+        }
+      });
+    },
+
+    // 请求多个机构下的数据
+    getGeneralData(queryData) {
+      getGeneralData(queryData).then(res => {
+        if (res.code === "000000") {
+          this.isShowLoading = false;
+          this.allData = res.data;
+          this.studyRankList = this.allData.studyRank || []
+          this.costRankList = this.allData.costRank || [];
+          this.echartsData = res.data.eduData;
+        }
+      });
+    },
+
+    // 人群分析
+    getUserAnalysis(queryData) {
+      getUserAnalysis(queryData).then(res => {
+        if (res.code === "000000") {
+          this.analysisData = res.data;
+          this.analysisEduData = res.data.eduList.join;
+          this.analysisTitleData = res.data.titleList.join;
+        }
+      });
+    },
+
+    // 考试分析
+    getGeneralExam(queryData) {
+      // 上面三个图标数据
+      getGeneralExam(queryData).then(res => {
+        if (res.code === "000000") {
+          this.generalExamData = res.data;
+          this.setExamTimesList(res.data.examTimesList)
+          this.setExamScoreList(res.data.examScoreList)
+          this.examCardList = [{
+              count: res.data.afterExamCount,
+              unitName: "门",
+              description: "正式考试数"
+            },
+            {
+              count: res.data.beforeExamCount,
+              unitName: "门",
+              description: "模拟考试数"
+            },
+            {
+              count: res.data.examTitleCount,
+              unitName: "道",
+              description: "所有考题数"
+            }
+          ];
+        }
+      });
+      // 下面一个列表数据
+      getGeneralExamList(queryData).then(res => {
+        if (res.code === "000000") {
+          this.examInfoList = res.data.examInfoList || []
+        }
+      });
+    },
+
+    // 课程数据
+    getGeneralCourse(params) {
+      getGeneralCourse(params).then(res => {
+        if (res.code === "000000") {
+          this.processDataObj = {
+            maxDuration: res.data.pCourseTotalTime,
+            avgDuration: res.data.pCourseAvg
+          }
+          this.processDataObj.maxDuration = res.data.pCourseTotalTime;
+          this.processDataObj.avgDuration = res.data.pCourseAvg;
+          this.courseInfo = res.data;
+          let viewportHeight = this.getViewportHeight();
+          let courseLength = res.data.pCourseList.length;
+          // 上面的高度 468   每一条数据的高度 60
+          if (viewportHeight > (468 + (courseLength - 1) * 60)) {
+            this.needFixedBottomInfo = true;
+          }
+        }
+      });
+    },
+
+    // 学习效果分析
+    getStudyEffect(params) {
+      getStudyEffect(params).then(res => {
+        if (res.code === "000000") {
+          this.studyEffect = res.data;
+          this.effectCardList[0].count = (res.data.beforeRate * 100).toFixed(1);
+          this.effectCardList[1].count = (res.data.afterRate * 100).toFixed(1);
+        }
+      });
+    },
+
+    // Tabs切换
+    tabClicked(index) {
+      this.cIndex = index;
+    },
+
+    // 清空参数
+    clearParams() {
+      this.orgName = '全部机构';
+      this.queryGDParams.hospitalIdList = [];
+    },
+
+    // 确认选择区域
+    areaConfirm(selData) {
+      this.clearParams();
+      this.queryGDParams.regionId = selData.regionId;
+      this.CNTParams.regionId = selData.regionId;
+      this.getHospitalsCNT(this.CNTParams);
+      this.isShowArea = false;
+      this.setAreaDegree(selData.areaDegree);
+      if (selData.townName || selData.countyName || selData.cityName || selData.provinceName) {
+        this.areaName = this.shortName(selData.townName || selData.countyName || selData.cityName || selData.provinceName, 6)
+      }
+    },
+
+    // 取消选择区域
+    areaCancel() {
+      this.isShowArea = false;
+    },
+
+    // 确认选择机构
+    orgConfirm(selData) {
+      let hospitalIds = [];
+      let hospitalNames = [];
+      let orgName = '';
+      selData.forEach(org => {
+        if (org.selected) {
+          hospitalIds.push(org.hospitalId);
+          hospitalNames.push(org.hospitalName);
+        }
+      });
+
+      // 如果没有选择机构，则重新获取所有数据
+      this.isShowOrg = false;
+      this.orgName = this.shortName(hospitalNames[0] || '全部机构', 6);
+      this.queryGDParams.hospitalIdList = hospitalIds;
+      if (hospitalIds.length == 0) {
+        this.getHospitalsCNT(this.CNTParams);
+        return;
+      }
+      if (hospitalIds.length === 1) {
+        // this.hospitalCnt = 1
+        this.orgDoctorTabData.certUserList = [];
+        this.orgDoctorTabData.noCertUserList = [];
+        this.orgDoctorTabData.noJoinList = [];
+        this.isSingleOrg = true;
+        this.getGeneralPersonal(this.queryGDParams);
+      } else {
+        this.isSingleOrg = false;
+        this.getGeneralData(this.queryGDParams);
+      }
+      this.otherInterface();
+    },
+
+    // 取消选择机构
+    orgCancel() {
+      this.isShowOrg = false;
+    },
+
+    // 弹出选择区域控件
+    areaTabClick() {
+      if (this.isShowOrg) {
+        this.isShowOrg = false;
+      }
+      this.isShowArea = !this.isShowArea;
+    },
+
+    // 弹出选择机构控件
+    orgTabClick() {
+      if (this.areaDegree !== 3 && this.areaDegree !== 4) {
+        this.$toast('选择区/县后才可选择机构');
+        return;
+      }
+      if (this.orgList.length === 0) {
+        this.$toast('此区域下无机构');
+        return;
+      }
+
+      this.isShowOrg = !this.isShowOrg;
+    },
+
+    // 通用跳转页面
+    gotoPage(subUrl, hasCert) {
+      let subUrlAndParams = `${subUrl}?token=${this.token}&projectId=${this.queryGDParams.projectId}&regionId=${this.queryGDParams.regionId}&hospitalIdList=${this.queryGDParams.hospitalIdList.join(',')}`
+      if (hasCert) {
+        subUrlAndParams += `&certFlag=${this.projectInfo.certFlag}`
+      }
+      if (this.$rocNative.isWeb) {
+        this.$router.push(subUrlAndParams);
+      } else {
+        let nativeUrl = `/lreport_ssr${subUrlAndParams}`
+        goPageByNative(this, nativeUrl);
+      }
+    },
+
+    // 人员学历情况切换按钮
+    analysisEduClick(index) {
+      this.analysisEduData = this.analysisData.eduList[
+        index ? "finish" : "join"
+      ] || [];
+      this.$forceUpdate();
+    },
+
+    // 人员职称情况切换按钮
+    analysisTitleClick(index) {
+      this.analysisTitleData = this.analysisData.titleList[
+        index ? "finish" : "join"
+      ] || [];
+      this.$forceUpdate();
+    },
+
+    // 与原生交互，获取用户信息
+    getUserInfo() {
+      this.$rocNative.getUserInfo &&
+        this.$rocNative.getUserInfo().then(params => {
+          this.token = params.userToken; // 测试用时注释掉
+          cookies.set("lreporttoken", this.token);
+          this.setUserToken(this.token);
+          this.setProjectId(this.projectId);
+          this.getProjectInfo(this.queryParams);
+        });
+    },
+
+    // 弹出提示信息一
+    tipsRankingItemClick() {
+      this.tipsContent = '在线项目完成天数=完成项目时间-开始参与项目时间'
+      this.isShowTips = true
+    },
+
+    // 弹出提示信息二
+    tipsSwiperClick(tipsContent) {
+      this.tipsContent = tipsContent; //'是已获证人数/应参与人数*100%'
+      this.isShowTips = true
+    },
+
+    // 关闭提示信息
+    clickTips() {
+      this.isShowTips = false
+    },
+
+    // 文本截断
+    shortName: function (value, length = 15, append = '...') {
+      if (value && value.length > length) {
+        return value.substring(0, length) + append
+      } else {
+        return value
+      }
+    },
+
+    // 映射Store中的Actions
+    ...mapActions({
+      setOrgList: "setOrgList",
+      setProjectId: "setProjectId",
+      setRegionId: "setRegionId",
+      setUserToken: "setUserToken",
+      setProvinceList: "setProvinceList",
+      setExamTimesList: "setExamTimesList",
+      setExamScoreList: "setExamScoreList",
+      setAreaDegree: "setAreaDegree"
+    })
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.container {
+  margin: 0 auto;
+  font-size: 17px;
+
+  h1 {
+    font-size: 36px;
+    text-align: center;
+  }
+
+  .m1 {
+    width: 100%;
+
+    >div {
+      width: 100%;
+    }
+  }
+
+  .mt-10 {
+    margin-top: 0;
+  }
+
+  .fixed-bottom-info {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .pd-top-60 {
+    padding-top: 85px;
+  }
+}
+</style>

pages/index.vue

 <template>
 <section class="container">
   <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
-  <CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" @orgClick="orgTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg">
+  <CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg">
   </CommonAreaSelect>
+  <!-- <CommonAreaSelect v-show="!isScroll" @areaClick="areaTabClick" @orgClick="orgTabClick" :areaName="areaName" :orgName="orgName" :showArea="isShowArea" :showOrg="isShowOrg">
+  </CommonAreaSelect>   -->
   <CommonTaps :needFixed="isScroll" :projectInfo="projectInfo" @tabClicked="tabClicked"></CommonTaps>
   <!-- 总体概况 -->
   <div v-show="isScroll" class="pd-top-60"></div>
@@ -83,7 +85,7 @@
   </article>
 
   <PicaArea v-show="isShowArea" @confirm="areaConfirm" @cancel="areaCancel" :projectId="projectId" :token="token"></PicaArea>
-  <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
+  <!-- <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg> -->
   <CommonLoading v-show="false"></CommonLoading>
   <PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
   <Loading v-show="isShowLoading"></Loading>
@@ -109,7 +111,7 @@ import {
   getProjectInfo,
   getGeneralExamList,
   getStudyEffect,
-  getHospitalsByRegionId
+  // getHospitalsByRegionId
 } from "@/service";
 
 import CommonHeader from "@/components/common/common-header";
@@ -185,7 +187,7 @@ export default {
   },
   data() {
     return {
-      isShowLoading: true,
+      isShowLoading: false,
       isScroll: false,
       isShowArea: false,
       isShowOrg: false,
@@ -344,7 +346,7 @@ export default {
   methods: {
     handleScroll() {
       var scrollTop = window.scrollY;
-      if (scrollTop > 40) {
+      if (scrollTop > 49) {
         this.isScroll = true;
       } else {
         this.isScroll = false;
@@ -378,7 +380,15 @@ export default {
           this.projectInfo = res.data;
           getProvinceList(params).then(res => {
             if (res.code === "000000") {
-              let regionId = (res.data && res.data.list[0] && res.data.list[0].id) || '';
+              // 如果直接是5级，则将其进行拆分（区域ID与机构ID）
+              let regionId = '', orgId = '', firstData = res.data.list[0];
+              if(firstData.degree == 5) {
+                let regionIdAndOrgId = firstData.id, lindex = regionIdAndOrgId.lastIndexOf('_');
+                regionId = regionIdAndOrgId.slice(0, lindex);
+                orgId = regionIdAndOrgId.slice(lindex + 1);
+              } else {
+                regionId = firstData.id || '';
+              }
               this.queryGDParams.regionId = regionId;
               this.CNTParams.regionId = regionId;
               let proviceList = (res.data && res.data.list) || [];
@@ -386,27 +396,45 @@ export default {
               this.areaName = (proviceList.length && proviceList[0].label) || '全部';
               this.queryParams.projectId = this.projectId;
               this.queryParams.regionId = regionId;
-              this.getHospitalsByRegionId(this.queryParams);
+              // this.getHospitalsByRegionId(this.queryParams);
+              // 数据包含本人所在机构，则将数据进行拆分
+              // if(res.data.containHospitalFlag == 1) {
+              //   this.setCurrentOrgList(proviceList.slice(0, 1));
+              //   this.setProvinceList(proviceList.slice(1));
+              // } else {
+              //   this.setCurrentOrgList([]);
+              //   this.setProvinceList(proviceList);
+              // }
+              if(proviceList.length && res.data.containHospitalFlag == 1) {
+                proviceList[0].containHospitalFlag = 1;
+              }
               this.setProvinceList(proviceList);
               this.setAreaDegree(degree);
               // if( degree == 3 || degree == 4) {
               //   this.isShowOrg = true;
               // }
-              this.getHospitalsCNT(this.CNTParams);
+              if(firstData.degree == 5) {
+                this.isSingleOrg = true;
+                this.queryGDParams.hospitalIdList = [];
+                this.queryGDParams.hospitalIdList.push(orgId);
+                this.getGeneralPersonal(this.queryGDParams);
+              } else {
+                this.getHospitalsCNT(this.CNTParams);
+              }
             }
           });
         }
       });
     },
 
-    // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
-    async getHospitalsByRegionId(params) {
-      await getHospitalsByRegionId(params).then(res => {
-        if (res.code === "000000") {
-          this.setOrgList(res.data.list || []);
-        }
-      });
-    },
+    // // 根据区域获取机构列表（一般在是三、四级区域才调用此方法）
+    // async getHospitalsByRegionId(params) {
+    //   await getHospitalsByRegionId(params).then(res => {
+    //     if (res.code === "000000") {
+    //       this.setOrgList(res.data.list || []);
+    //     }
+    //   });
+    // },
 
     // 异步延迟调用其它Tabs接口（除了数据概述）
     otherInterface() {
@@ -559,15 +587,21 @@ export default {
 
     // 确认选择区域
     areaConfirm(selData) {
+      console.log(selData);
+      if (selData.townName || selData.countyName || selData.cityName || selData.provinceName) {
+        this.areaName = this.shortName(selData.townName || selData.countyName || selData.cityName || selData.provinceName, 18)
+      }      
+      if(selData.areaDegree == 5) {
+        this.orgConfirmNew(selData);
+        return;
+      }
       this.clearParams();
       this.queryGDParams.regionId = selData.regionId;
       this.CNTParams.regionId = selData.regionId;
       this.getHospitalsCNT(this.CNTParams);
       this.isShowArea = false;
       this.setAreaDegree(selData.areaDegree);
-      if (selData.townName || selData.countyName || selData.cityName || selData.provinceName) {
-        this.areaName = this.shortName(selData.townName || selData.countyName || selData.cityName || selData.provinceName, 6)
-      }
+
     },
 
     // 取消选择区域
@@ -575,8 +609,47 @@ export default {
       this.isShowArea = false;
     },
 
+    // 确认选择机构
+    orgConfirmNew(selData) {
+      console.log(selData);
+      let regionIdAndOrgId = selData.regionId, lindex = regionIdAndOrgId.lastIndexOf('_');
+      let regionId = regionIdAndOrgId.slice(0, lindex), orgId = regionIdAndOrgId.slice(lindex + 1);
+      let hospitalIds = [orgId];
+      this.isShowArea = false;
+      // let hospitalNames = [];
+      // let orgName = '';
+      // selData.forEach(org => {
+      //   if (org.selected) {
+      //     hospitalIds.push(org.hospitalId);
+      //     hospitalNames.push(org.hospitalName);
+      //   }
+      // });
+
+      // 如果没有选择机构，则重新获取所有数据
+      // this.isShowOrg = false;
+      // this.orgName = this.shortName(hospitalNames[0] || '全部机构', 6);
+      this.queryGDParams.hospitalIdList = hospitalIds;
+      if (hospitalIds.length == 0) {
+        this.getHospitalsCNT(this.CNTParams);
+        return;
+      }
+      if (hospitalIds.length === 1) {
+        // this.hospitalCnt = 1
+        this.orgDoctorTabData.certUserList = [];
+        this.orgDoctorTabData.noCertUserList = [];
+        this.orgDoctorTabData.noJoinList = [];
+        this.isSingleOrg = true;
+        this.getGeneralPersonal(this.queryGDParams);
+      } else {
+        this.isSingleOrg = false;
+        this.getGeneralData(this.queryGDParams);
+      }
+      this.otherInterface();
+    },
+
     // 确认选择机构
     orgConfirm(selData) {
+      console.log(selData);
       let hospitalIds = [];
       let hospitalNames = [];
       let orgName = '';
@@ -609,32 +682,32 @@ export default {
       this.otherInterface();
     },
 
-    // 取消选择机构
-    orgCancel() {
-      this.isShowOrg = false;
-    },
+    // // 取消选择机构
+    // orgCancel() {
+    //   this.isShowOrg = false;
+    // },
 
     // 弹出选择区域控件
     areaTabClick() {
-      if (this.isShowOrg) {
-        this.isShowOrg = false;
-      }
+      // if (this.isShowOrg) {
+      //   this.isShowOrg = false;
+      // }
       this.isShowArea = !this.isShowArea;
     },
 
-    // 弹出选择机构控件
-    orgTabClick() {
-      if (this.areaDegree !== 3 && this.areaDegree !== 4) {
-        this.$toast('选择区/县后才可选择机构');
-        return;
-      }
-      if (this.orgList.length === 0) {
-        this.$toast('此区域下无机构');
-        return;
-      }
+    // // 弹出选择机构控件
+    // orgTabClick() {
+    //   if (this.areaDegree !== 3 && this.areaDegree !== 4) {
+    //     this.$toast('选择区/县后才可选择机构');
+    //     return;
+    //   }
+    //   if (this.orgList.length === 0) {
+    //     this.$toast('此区域下无机构');
+    //     return;
+    //   }
 
-      this.isShowOrg = !this.isShowOrg;
-    },
+    //   this.isShowOrg = !this.isShowOrg;
+    // },
 
     // 通用跳转页面
     gotoPage(subUrl, hasCert) {
@@ -713,7 +786,8 @@ export default {
       setProvinceList: "setProvinceList",
       setExamTimesList: "setExamTimesList",
       setExamScoreList: "setExamScoreList",
-      setAreaDegree: "setAreaDegree"
+      setAreaDegree: "setAreaDegree",
+      setCurrentOrgList: 'setCurrentOrgList'
     })
   }
 };
@@ -748,7 +822,7 @@ export default {
   }
 
   .pd-top-60 {
-    padding-top: 85px;
+    padding-top: 94px;
   }
 }
 </style>

store/index.js

@@ -8,7 +8,8 @@ export const state = () => ({
   orgList: [],
   examTimesList: [],
   examScoreList: [],
-  areaDegree: 0
+  areaDegree: 0,
+  currentOrgList: []
 })
 export const getters = {
   projectId(state) {
@@ -41,6 +42,9 @@ export const getters = {
   areaDegree(state) {
     return state.areaDegree;
   },
+  currentOrgList(state) {
+    return state.currentOrgList;
+  }
 }
 export const mutations = {
   SET_PROJECT_ID(state, projectId) {
@@ -72,6 +76,9 @@ export const mutations = {
   },
   SET_AREA_DEGREE(state, areaDegree) {
     state.areaDegree = areaDegree;
+  },  
+  SET_CURRENT_ORG_LIST(state, currentOrgList) {
+    state.currentOrgList = currentOrgList;
   },
 }
 export const actions = {
@@ -105,4 +112,7 @@ export const actions = {
   setAreaDegree({ commit }, areaDegree) {
     commit('SET_AREA_DEGREE', areaDegree);
   },
+  setCurrentOrgList({ commit }, currentOrgList) {
+    commit('SET_CURRENT_ORG_LIST', currentOrgList);
+  },
 }
\ No newline at end of file