From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/components/mobilePopupOur/index.vue | 833 ++++++++++++++++++++++++-----------------------------------
1 files changed, 343 insertions(+), 490 deletions(-)
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
index b3c26ad..20480d8 100644
--- a/src/components/mobilePopupOur/index.vue
+++ b/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> 暂无更多
- </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> 暂无更多
+ </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> 暂无更多
+ </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>
\ No newline at end of file
+</script>
--
Gitblit v1.9.3