1

mayisheng

2022-08-15 81f54040c2cb65537c6c6e1db8358a39a57dea0d

 src/components/mobilePopupOur/index.vue

@@ -1,502 +1,355 @@
<template>
  <div id="mobilePopupOur" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="m_p_heard">
      <div class="m_p_h_break" @click="closeBigPopup">
        <i class="el-icon-arrow-left icon"></i>
      </div>
      <div class="m_p_h_center">
        <div>
          <div v-if="mBigPopup.search" style="color: #fff">
            查询结果{{ searchLabel ? "--" + searchLabel : "" }}
          </div>
          <el-dropdown trigger="click" @command="choiceIt" v-else>
            <span class="el-dropdown-link">
              {{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in choiceData"
                :key="index"
                :command="item.name"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="m_p_center">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabTable"
          :key="index"
          :label="item.label"
          :name="item.value"
        >
          <div class="m_p_c_tableIn">
            <el-empty
              v-show="item.child.length == 0"
              description="暂无数据"
            ></el-empty>
            <mobilePopupOurOnce
              v-for="(citem, cindex) in item.child"
              :key="cindex"
              :ends="item.child.length - 1 == cindex"
              :onceData="citem"
            ></mobilePopupOurOnce>
            <div v-show="item.child.length != 0">
              <el-divider content-position="left">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
              </el-divider>
    <!-- 信息窗口主体mobilePopupOur -->
    <div id="mobilePopupOur" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="m_p_heard">
            <div class="m_p_h_break" @click="closeBigPopup">
                <i class="el-icon-arrow-left icon"></i>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
            <div class="m_p_h_center">
                <div>
                    <div
                        v-if="mBigPopup.search"
                        style="color: #fff"
                    >查询结果{{ searchLabel ? " -- " + searchLabel : "" }}</div>
                    <el-dropdown trigger="click" @command="choiceIt" v-else>
                        <span class="el-dropdown-link">
                            {{ choiceValue }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                v-for="(item, index) in choiceData"
                                :key="index"
                                :command="item"
                            >{{ item.name }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="m_p_center">
            <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.name + cindex"
                    :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.title"
                    :name="item.key"
                >
                    <div class="m_p_c_tableIn">
                        <el-empty v-show="item.child.length == 0" description="暂无数据"></el-empty>
                        <mobilePopupOurOnce
                            v-for="(citem, cindex) in item.child"
                            :key="citem.icons"
                            :ends="item.child.length - 1 == cindex"
                            :onceData="citem"
                        ></mobilePopupOurOnce>
                        <!-- {{ citem.icon }} -->
                        <div v-show="item.child.length != 0">
                            <el-divider content-position="left">
                                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;&nbsp;暂无更多
                            </el-divider>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getListarc } from '@/api/mobile/public/arc' // 头部下标签页数据
import { mapGetters } from 'vuex'
// 搜索
import { getListSearch } from '@/api/mobile/search/index'
export default {
  computed: {
    ...mapGetters(["mBigPopup"]),
  },
  name: "mobilePopupOur",
  data() {
    return {
      searchLabel: "",
      choiceValue: "",
      choiceData: [
        {
          name: "党群机构",
          value: "1",
        },
        {
          name: "职能部门",
          value: "2",
        },
        {
          name: "其他机构",
          value: "3",
        },
      ],
      tabTable: [
        {
          label: "西东大街",
          value: "first",
          child: [
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
            {
              name: "电力部门",
              icon: "",
              Cartesian3: {
                x: -2852016.545079094,
                y: 4654237.53861168,
                z: 3288210.9971253853,
              },
              position: [121.49907024133591, 31.234911748958513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门",
              icon: "",
              Cartesian3: {
                x: -2853624.057617497,
                y: 4654505.819491945,
                z: 3286416.3935731286,
              },
              position: [121.51198333955459, 31.216073280697593],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆",
              icon: "",
              Cartesian3: {
                x: -2852304.498038979,
                y: 4655537.369322868,
                z: 3286133.4029617086,
              },
              position: [121.4945198122125, 31.213002416673532],
              buts: ["定位"],
            },
          ],
        },
        {
          label: "长江路",
          value: "second",
          child: [
            {
              name: "电力部门1",
              icon: "",
              Cartesian3: {
                x: -2852016.545091094,
                y: 4654237.53861168,
                z: 3288210.9971238153,
              },
              position: [121.49190702133591, 31.234911741858513],
              buts: ["实景", "图集", "定位"],
            },
            {
              name: "保安部门1",
              icon: "",
              Cartesian3: {
                x: -2852016.541509094,
                y: 4654237.53816168,
                z: 3288210.9971125853,
              },
              position: [121.49907021413591, 31.234911741895513],
              buts: ["图集", "定位"],
            },
            {
              name: "图书馆1",
              icon: "",
              Cartesian3: {
                x: -2852016.545019094,
                y: 4654237.53861168,
                z: 3288210.9971123853,
              },
              position: [121.49901024133591, 31.234911749581513],
              buts: ["定位"],
            },
          ],
        },
        {
          label: "科技园",
          value: "third",
          child: [],
        },
        {
          label: "逸夫楼",
          value: "fourth",
          child: [],
        },
      ],
      fullscreenLoading: false,
      activeName: "first",
    };
  },
  // 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;
      this.fullscreenLoading = false;
      this.$store.commit("MSET_BIGPOPUPAFTER", false);
      console.log("请求对应街道接口");
    }, 500);
    // this.choiceValue = this.choiceData[0].name;
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name);
    computed: {
        ...mapGetters(['mBigPopup', 'popupOurOpenData'])
    },
    choiceIt(name) {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.choiceValue = name;
        this.fullscreenLoading = false;
        console.log("请求对应头部下拉菜单接口");
      }, 500);
    name: 'mobilePopupOur',
    data () {
        return {
            searchLabel: '',
            choiceValue: '',
            choiceKey: '',
            choiceMethod: '',
            choiceData: [],
            tabTable: [],
            fullscreenLoading: false,
            activeName: '1',
            choiceMain: '',
            onlyData: []
        }
    },
    closeBigPopup() {
      this.$store.commit("MSET_BIGPOPUP", false);
    },
  },
};
</script>
    mounted () {
        this.fullscreenLoading = true
        if (this.mBigPopup.search) {
            // 搜索事件
            this.searchLabel = this.mBigPopup.value
            // console.log("查询搜索结果", this.mBigPopup.value);
            this.fullscreenLoading = false
            this.choiceMain = '搜索'
            this.getListSearchMethod(this.mBigPopup.value)
            return
        }
        this.choiceMain = this.popupOurOpenData.qurey // 进入的主题：列：机构单位，校区建筑
        this.choiceData = this.popupOurOpenData.main // 带入数据  包括name、type、method

<style lang="scss" scoped>
#mobilePopupOur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 300;
  .m_p_heard {
    width: 100%;
    height: 50px;
    background-color: #a40000;
    .m_p_h_break {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        font-size: 22px;
        color: #fff;
      }
        this.choiceValue = this.popupOurOpenData.main[0].name
        this.choiceKey = this.popupOurOpenData.main[0].type
        this.choiceMethod = this.popupOurOpenData.main[0].method

        this.$store.commit('MSET_BIGPOPUPAFTER', false) // 关闭前一个弹窗
        // console.log("请求对应街道接口", this.popupOurOpenData);
        this.getDataHeardDown()
    },
    watch: {
        fullscreenLoading () {
            if (this.fullscreenLoading) {
                this.notLine()
            }
        }
    },
    methods: {
        handleClick (tab, event) {
            // 头下部标签
            this.fullscreenLoading = true
            this.getOutList(this.activeName, this.choiceKey)
        },
        choiceIt (command) {
            // 头部下拉菜单
            this.fullscreenLoading = true
            this.choiceValue = command.name
            this.choiceKey = command.type
            this.choiceMethod = command.method // 更改请求
            // console.log("请求对应头部下拉菜单接口", command);
            this.getOutList(this.activeName, this.choiceKey)
        },
        closeBigPopup () {
            this.$store.commit('MSET_BIGPOPUP', false)
        },
        getDataHeardDown () {
            if (this.choiceMain == '活动') {
                // 不请求头部标签页数据
                this.getOutList(this.choiceKey)
                return
            }
            if (this.choiceMain == '机构单位') {
                this.getOutList('', this.choiceKey)
                return
            }
            // 获取头下部标签页
            getListarc().then((res) => {
                const title = []
                res.data.data.forEach((item) => {
                    title.push({
                        title: item.dictValue,
                        flag: false,
                        key: item.dictKey,
                        child: []
                    })
                })
                this.tabTable = title
                this.getOutList(this.activeName, this.choiceKey)
            })
        },
        // 请求
        getOutList (campus, type) {
            // console.log(this.choiceMain, campus, type, "see");
            const that = this
            let d
            if (this.choiceMain == '机构单位') {
                // 不传标签页
                d = {
                    type: type
                }
            } else if (
                this.choiceMain == '生活设施' ||
                this.choiceMain == '出入口' ||
                this.choiceMain == '停车场'
            ) {
                // 改变传入属性
                d = {
                    campus: campus,
                    lifetype: type
                }
            } else {
                d = {
                    campus: campus,
                    type: type
                }
            }
            this.choiceMethod(d).then((res) => {
                console.log(res)
                const data = res.data.data
                const outList = []
                if (
                    this.mBigPopup.name == '校区建筑' ||
                    this.mBigPopup.name == '文化风景'
                ) {
                    // 校区建筑使用该id获取具体信息
                    data.forEach((item) => {
                        const icon = item.tpurl ? item.tpurl.split(',') : item.id
                        outList.push({
                            id: item.id,
                            name: item.mechanismname,
                            icon: icon,
                            icons: icon + item.mechanismname, // 图片响应改变
                            from: this.choiceMain,
                            video: item.videourl,
                            buts:
                                this.mBigPopup.name == '校区建筑' ||
                                    this.mBigPopup.name == '文化风景'
                                    ? ['定位', '实景', '图集']
                                    : ['定位']
                        })
                    })
                } else if (this.mBigPopup.name == '活动') {
                    // 校区建筑使用该id获取具体信息
                    data.records.forEach((item) => {
                        const icon = item.tpurl.split(',')
                        const useData = {
                            name: item.hdname,
                            // lntLat: [item.jd, item.wd],
                            // alt: item.gd,
                            // heading: item.heading,
                            // pitch: item.pitch,
                            // roll: item.roll,
                            bgImg: item.tpurl,
                            icon: icon,
                            icons: icon + item.hdname, // 图片响应改变
                            from: this.choiceMain,
                            // QRImg: item.codeurl,
                            websiteUrl: item.websiteurl,
                            telePhone: item.telephone,
                            // address: item.address,
                            introduce: item.context,
                            video: item.videourl,
                            buts:
                                that.mBigPopup.name == '校区建筑' ||
                                    that.mBigPopup.name == '文化风景'
                                    ? ['定位', '实景', '图集']
                                    : ['定位'],
                            // 活动添加的字段
                            addressname: item.addressname.split(';'),
                            address: item.address.split(';'),
                            lxname: item.lxname.split(';'),
                            lx: item.lx.split(';'),
                            lntLat: [
                                item.address.split(';')[0].split(',')[0],
                                item.address.split(';')[0].split(',')[1]
                            ],
                            panoramaurl: item.panoramaurl, // 全景
                            x: item.x
                        }
                        outList.push(useData)
                    })
                } else {
                    // 正常获取全部数据
                    data.records.forEach((item) => {
                        const icon = item.tpurl.split(',')
                        const useData = {
                            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,
                            icons: icon + item.mechanismname, // 图片响应改变
                            from: this.choiceMain,
                            QRImg: item.codeurl,
                            websiteUrl: item.websiteurl,
                            telePhone: item.telephone,
                            address: item.address,
                            introduce: item.introduce,
                            video: item.videourl,
                            buts:
                                that.mBigPopup.name == '校区建筑' ||
                                    that.mBigPopup.name == '文化风景'
                                    ? ['定位', '实景', '图集']
                                    : ['定位'],
                            panoramaurl: item.panoramaurl, // 全景
                            x: item.x
                        }
                        outList.push(useData)
                    })
                }
                that.fullscreenLoading = false
                if (this.choiceMain == '机构单位' || this.choiceMain == '活动') {
                    that.onlyData = outList
                    return
                }
                that.tabTable[+campus - 1].child = outList
            })
        },
        // 搜索请求
        getListSearchMethod (name) {
            const val = {
                mechanismName: name
            }
            const that = this
            getListSearch(val).then((res) => {
                if (res.data.code != 200) {
                    return
                }
                const data = res.data.data
                // 正常获取全部数据
                const outList = []
                data.forEach((item) => {
                    const icon = item.tpurl.split(',')
                    const useData = {
                        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,
                        icons: icon + item.mechanismname, // 图片响应改变
                        from: this.choiceMain,
                        QRImg: item.codeurl,
                        websiteUrl: item.websiteurl,
                        telePhone: item.telephone,
                        address: item.address,
                        introduce: item.introduce,
                        video: item.videourl,
                        buts:
                            that.mBigPopup.name == '校区建筑' ||
                                that.mBigPopup.name == '文化风景'
                                ? ['定位', '实景', '图集']
                                : ['定位'],
                        panoramaurl: item.panoramaurl, // 全景
                        x: item.x
                    }
                    outList.push(useData)
                })
                that.fullscreenLoading = false
                that.onlyData = outList
            })
        },
        notLine () {
            console.log('等待关闭')
            setTimeout(() => {
                this.fullscreenLoading = false
                console.log('关闭dolog')
            }, 5000)
        }
    }
    .m_p_h_center {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-dropdown-link {
        color: #fff;
      }
    }
  }
  .m_p_center {
    width: 100%;
    height: calc(100% - 50px);
    // border: 1px solid red
    box-sizing: border-box;
    .m_p_c_tableIn {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
</script>