shuishen
2021-12-21 0e461a232cce6e52fbfd071788bdd7294d51e397
src/components/mobilePopupOur/index.vue
@@ -17,7 +17,7 @@
              <el-dropdown-item
                v-for="(item, index) in choiceData"
                :key="index"
                :command="item.name"
                :command="item"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
@@ -26,12 +26,33 @@
      </div>
    </div>
    <div class="m_p_center">
      <el-tabs v-model="activeName" @tab-click="handleClick">
      <div
        class="m_p_c_tableIn"
        style="padding-top: 10px"
        v-if="tabTable.length <= 0"
      >
        <el-empty
          v-show="onlyData.length == 0"
          description="暂无数据"
        ></el-empty>
        <mobilePopupOurOnce
          v-for="(citem, cindex) in onlyData"
          :key="citem.bgImg + ''"
          :ends="onlyData.length - 1 == cindex"
          :onceData="citem"
        ></mobilePopupOurOnce>
        <div v-show="onlyData.length != 0">
          <el-divider content-position="left">
            <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
          </el-divider>
        </div>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" v-else>
        <el-tab-pane
          v-for="(item, index) in tabTable"
          :key="index"
          :label="item.label"
          :name="item.value"
          :label="item.title"
          :name="item.key"
        >
          <div class="m_p_c_tableIn">
            <el-empty
@@ -40,7 +61,7 @@
            ></el-empty>
            <mobilePopupOurOnce
              v-for="(citem, cindex) in item.child"
              :key="cindex"
              :key="citem.icon + ''"
              :ends="item.child.length - 1 == cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
@@ -57,257 +78,230 @@
</template>
<script>
import { getList } from "@/api/mobile/orgnav/index";
import { getListarc, getChildNavList } from "@/api/mobile/public/arc";
import {
  getListlivingFacilitiesr,
  getListsupermarket,
} from "@/api/mobile/livingFacilities/index";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["mBigPopup"]),
    ...mapGetters(["mBigPopup", "popupOurOpenData"]),
  },
  name: "mobilePopupOur",
  data() {
    return {
      searchLabel: "",
      choiceValue: "",
      choiceData: [
        {
          name: "党群机构",
          value: "1",
        },
        {
          name: "职能部门",
          value: "2",
        },
        {
          name: "其他机构",
          value: "3",
        },
      ],
      tabTable: [
        {
          label: "西东大街",
          value: "first",
          child: [
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              lntLat: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              lntLat: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              lntLat: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
          ],
        },
        {
          label: "长江路",
          value: "second",
          child: [
            {
              name: "电力部门1",
              icon: "",
              position: [121.49190702133591, 31.234911741858513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门1",
              icon: "",
              position: [121.49907021413591, 31.234911741895513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆1",
              icon: "",
              position: [121.49901024133591, 31.234911749581513],
              buts: ["定位"],
            },
          ],
        },
        {
          label: "科技园",
          value: "third",
          child: [],
        },
        {
          label: "逸夫楼",
          value: "fourth",
          child: [],
        },
      ],
      choiceKey: "",
      choiceData: [],
      tabTable: [],
      fullscreenLoading: false,
      activeName: "first",
      activeName: "1",
      choiceMain: "",
      onlyData: [],
      OURAPI_FORLIFE: {},
    };
  },
  // watch: {
  //   mBigPopup() {
  //     console.log(this.mBigPopup.name);
  //     this.choiceValue = this.mBigPopup.name;
  //   },
  // },
  mounted() {
    this.fullscreenLoading = true;
    setTimeout(() => {
      if (this.mBigPopup.search) {
        this.searchLabel = this.mBigPopup.value;
        console.log("查询搜索结果", this.mBigPopup.value);
        this.fullscreenLoading = false;
        return;
      }
      this.choiceValue = this.mBigPopup.name;
    if (this.mBigPopup.search) {
      this.searchLabel = this.mBigPopup.value;
      // console.log("查询搜索结果", this.mBigPopup.value);
      this.fullscreenLoading = false;
      this.$store.commit("MSET_BIGPOPUPAFTER", false);
      console.log("请求对应街道接口");
    }, 500);
    // this.choiceValue = this.choiceData[0].name;
      this.choiceMain = "搜索";
      return;
    }
    this.choiceMain = this.popupOurOpenData.qurey;
    this.choiceData = this.popupOurOpenData.main;
    this.choiceValue = this.popupOurOpenData.main[0].name;
    this.choiceKey = this.popupOurOpenData.main[0].type;
    this.$store.commit("MSET_BIGPOPUPAFTER", false);
    // console.log("请求对应街道接口", this.popupOurOpenData);
    if (this.choiceMain == "校园建筑") {
      //校园建筑:加入街道的选择
      this.getDataCampus();
    } else if (this.choiceMain == "机构单位") {
      this.getInstitutional(this.choiceKey);
    } else if (this.choiceMain == "生活设施") {
      // 加入所有请求接口函数
      this.OURAPI_FORLIFE = {
        1: getListlivingFacilitiesr,
        2: getListsupermarket,
        3: getListlivingFacilitiesr,
        4: getListlivingFacilitiesr,
        5: getListlivingFacilitiesr,
        6: getListlivingFacilitiesr,
        7: getListlivingFacilitiesr,
        8: getListlivingFacilitiesr,
        9: getListlivingFacilitiesr,
        10: getListlivingFacilitiesr,
      };
      this.getDatalivingFacilities();
    } else if (this.choiceMain == "文化风景") {
      console.log(this.choiceKey, " : ", this.choiceMain);
      this.fullscreenLoading = false;
    } else if (this.choiceMain == "出入口") {
      console.log(this.choiceKey, " : ", this.choiceMain);
      this.fullscreenLoading = false;
    } else if (this.choiceMain == "停车场") {
      console.log(this.choiceKey, " : ", this.choiceMain);
      this.fullscreenLoading = false;
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
    },
    choiceIt(name) {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.choiceValue = name;
        this.fullscreenLoading = false;
        console.log("请求对应头部下拉菜单接口");
      }, 500);
      if (this.choiceMain == "校园建筑") {
        this.getListCampus(this.activeName, this.choiceKey);
      } else if (this.choiceMain == "生活设施") {
        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
      }
    },
    choiceIt(command) {
      this.fullscreenLoading = true;
      this.choiceValue = command.name;
      this.choiceKey = command.type;
      console.log("请求对应头部下拉菜单接口", command);
      if (this.choiceMain == "校园建筑") {
        this.getListCampus(this.activeName, this.choiceKey);
      } else if (this.choiceMain == "机构单位") {
        this.getInstitutional(this.choiceKey);
      } else if (this.choiceMain == "生活设施") {
        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
      }
    },
    closeBigPopup() {
      this.$store.commit("MSET_BIGPOPUP", false);
    },
    //"生活设施"↓
    getDatalivingFacilities(data) {
      let that = this;
      getListarc().then((res) => {
        let title = [];
        res.data.data.forEach((item) => {
          title.push({
            title: item.dictValue,
            flag: false,
            key: item.dictKey,
            child: [],
          });
        });
        this.tabTable = title;
        this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
      });
    },
    getListlivingFacilities(campus, type) {
      let that = this;
      this.OURAPI_FORLIFE[type]({ campus: campus }).then((res) => {
        const data = res.data.data.records;
        // console.log(data);
        // return;
        let outList = [];
        data.forEach((item) => {
          let icon = item.tpurl.split(",");
          outList.push({
            name: item.mechanismname,
            lntLat: [item.jd, item.wd],
            alt: item.gd,
            heading: item.heading,
            pitch: item.pitch,
            roll: item.roll,
            bgImg: item.tpurl,
            icon: icon,
            from: this.choiceMain,
            QRImg: item.codeurl,
            websiteUrl: item.websiteurl,
            telePhone: item.telephone,
            buts:
              that.mBigPopup.name == "校园建筑" ||
              that.mBigPopup.name == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
          });
        });
        that.fullscreenLoading = false;
        that.tabTable[+campus - 1].child = outList;
      });
    },
    //"生活设施"↑
    //""机构单位""↓
    getInstitutional(type) {
      let that = this;
      // console.log(type);
      getList({ type: type }).then((res) => {
        const data = res.data.data;
        let outList = [];
        data.records.forEach((item) => {
          let icon = item.tpurl.split(",");
          outList.push({
            name: item.mechanismname,
            lntLat: [item.jd, item.wd],
            alt: item.gd,
            heading: item.heading,
            pitch: item.pitch,
            roll: item.roll,
            bgImg: item.tpurl,
            icon: icon,
            from: this.choiceMain,
            QRImg: item.codeurl,
            websiteUrl: item.websiteurl,
            telePhone: item.telephone,
            buts:
              that.mBigPopup.name == "校园建筑" ||
              that.mBigPopup.name == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
          });
        });
        that.fullscreenLoading = false;
        that.onlyData = outList;
      });
    },
    //""机构单位""↑
    //"校园建筑"↓
    getDataCampus() {
      getListarc().then((res) => {
        let title = [];
        res.data.data.forEach((item) => {
          title.push({
            title: item.dictValue,
            flag: false,
            key: item.dictKey,
            child: [],
          });
        });
        this.tabTable = title;
        this.getListCampus(this.activeName, this.choiceKey);
      });
    },
    getListCampus(campus, type) {
      let that = this;
      getChildNavList({ campus: campus, type: type }).then((res) => {
        const data = res.data.data;
        let outList = [];
        data.forEach((item) => {
          let icon = item.tpurl.split(",");
          outList.push({
            id: item.id,
            name: item.mechanismname,
            icon: icon,
            from: this.choiceMain,
            buts:
              this.mBigPopup.name == "校园建筑" ||
              this.mBigPopup.name == "文化风景"
                ? ["定位", "实景", "图集"]
                : ["定位"],
          });
        });
        that.fullscreenLoading = false;
        that.tabTable[+campus - 1].child = outList;
      });
    },
    //"校园建筑"↑
  },
};
</script>