From 81773ab04fd259e893c2d7f08dbdc9be772d01c4 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 21 Dec 2021 17:18:45 +0800
Subject: [PATCH] +,请求数据，弹框显示，优化代码长度
---
src/components/mobileWindow/index.vue | 117 ++++--
src/api/mobile/livingFacilities/index.js | 74 ++++
src/components/mobilemap/index.vue | 10
src/components/mobileCortrolButtom/index.vue | 60 ++
src/components/mobilePopupOurAfter/index.vue | 68 ++-
src/styles/mobile/popup.scss | 97 +++++
src/components/mobilePopupOur/index.vue | 290 ++++-------------
src/store/modules/mobile.js | 86 +++++
src/components/mobileCortrol/index.vue | 62 ---
src/api/mobile/stop/index.js | 19 +
src/components/mobilePopupOurOnce/index.vue | 19
src/mobileDivForms/mobileDivForms.js | 9
12 files changed, 527 insertions(+), 384 deletions(-)
diff --git a/src/api/mobile/livingFacilities/index.js b/src/api/mobile/livingFacilities/index.js
index a0e051a..9430cfa 100644
--- a/src/api/mobile/livingFacilities/index.js
+++ b/src/api/mobile/livingFacilities/index.js
@@ -2,7 +2,7 @@
* @Author: Morpheus
* @Date: 2021-05-09 15:17:44
* @Last Modified by: liu
- * @Last Modified time: 2021-12-20 17:05:16
+ * @Last Modified time: 2021-12-21 09:57:32
*/
// 生活设施
import request from '@/router/axios'
@@ -25,3 +25,75 @@
})
}
+//医疗
+export const getListmedical = (params) => { //获取生活设施
+ return request({
+ url: 'blade-medical/medical/list',
+ method: 'get',
+ params: params
+ })
+}
+
+//快递
+export const getListmail = (params) => { //获取生活设施
+ return request({
+ url: 'blade-mail/mail/list',
+ method: 'get',
+ params: params
+ })
+}
+
+//浴室
+export const getListbathroom = (params) => { //获取生活设施
+ return request({
+ url: 'blade-bathroom/bathroom/list',
+ method: 'get',
+ params: params
+ })
+}
+
+//打字复印
+export const getListduplicate = (params) => { //获取生活设施
+ return request({
+ url: 'blade-duplicate/duplicate/list',
+ method: 'get',
+ params: params
+ })
+}
+
+//银行网点
+export const getListnetwork = (params) => { //获取生活设施
+ return request({
+ url: 'blade-network/network/list',
+ method: 'get',
+ params: params
+ })
+}
+
+//AED
+export const getListaed = (params) => { //获取生活设施
+ return request({
+ url: 'blade-aed/aed/list',
+ method: 'get',
+ params: params
+ })
+}
+
+//通讯
+export const getListsignal = (params) => { //获取生活设施
+ return request({
+ url: 'blade-signal/signal/list',
+ method: 'get',
+ params: params
+ })
+}
+
+// //停车场
+// export const getListnetwork = (params) => { //获取生活设施
+// return request({
+// url: 'blade-parking/parking/list',
+// method: 'get',
+// params: params
+// })
+// }
+
diff --git a/src/api/mobile/stop/index.js b/src/api/mobile/stop/index.js
new file mode 100644
index 0000000..a2d1b98
--- /dev/null
+++ b/src/api/mobile/stop/index.js
@@ -0,0 +1,19 @@
+/*
+ * @Author: Morpheus
+ * @Date: 2021-05-09 15:17:44
+ * @Last Modified by: liu
+ * @Last Modified time: 2021-12-21 10:00:12
+ */
+// 停车场
+import request from '@/router/axios'
+
+
+
+export const getListparking = (params) => { //获取生活设施
+ return request({
+ url: 'blade-parking/parking/list',
+ method: 'get',
+ params: params
+ })
+}
+
diff --git a/src/components/mobileCortrol/index.vue b/src/components/mobileCortrol/index.vue
index b3a1cbc..726fd18 100644
--- a/src/components/mobileCortrol/index.vue
+++ b/src/components/mobileCortrol/index.vue
@@ -23,59 +23,13 @@
},
methods: {
zoomIn(val) {
- let that = this;
- // console.log(val);
- // 121.49592752204283 31.23567802276832
- this.mviewer.zoomToPosition(
- new that.DC.Position(
- 121.49592752204283,
- 31.23567802276832 - 0.012,
- 2530,
- 0,
- -45
- )
- );
- // let camera = this.mviewer.camera;
- // // console.log(camera.moveStart());
- // // this.mviewer.getImageryLayerInfo().then((res) => {
- // // console.log(res);
- // // });
- // var ellipsoid = this.mviewer.scene.globe.ellipsoid;
- // var cartesian3 = DC.Namespace.Cesium.cartesian3(
- // camera.position.x,
- // camera.position.y,
- // camera.position.z
- // );
- // // // var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
- // // // var lat = Cesium.Math.toDegrees(cartograhphic.latitude);
- // // // var lng = Cesium.Math.toDegrees(cartograhpinc.longitude);
- // // // var alt = cartographic.height;
- // console.log(cartesian3);
- // let position = camera.position;
- // for (let k in position) {
- // if (k == "x" || k == "y" || k == "z") {
- // console.log(k, " : ", position[k]);
- // }
- // }
- // if (val == "+") {
- // camera.position.x -= 614.8521;
- // camera.position.y -= 1002.9298;
- // camera.position.z += 682.3683;
- // } else if (val == "-") {
- // camera.position.x += 614.8521;
- // camera.position.y += 1002.9298;
- // camera.position.z -= 682.3683;
- // }
- // camera.flyTo({
- // destination: position,
- // orientation: {
- // heading: camera.heading,
- // pitch: camera.pitch,
- // roll: camera.roll,
- // },
- // duration: 0.5,
- // convert: false,
- // });
+ this.$store.dispatch("mapFlyTo", {
+ //飞入
+ lntLat: [121.50492752204283, 31.21567802276832, 2530],
+ heading: 0,
+ pitch: -45,
+ roll: 0,
+ });
},
},
};
@@ -86,7 +40,7 @@
position: fixed;
left: 20px;
top: 87px;
- z-index: 201 !important;
+ z-index: 20 !important;
.m-l-inbut {
width: 35px;
height: 35px;
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index 350cbad..417eede 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/src/components/mobileCortrolButtom/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="m-left-mobileCortrolButtom">
- <div class="m-l-inbut"><i class="el-icon-s-help"></i></div>
+ <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div>
<div class="m-l-inbut">
<!-- <i class="el-icon-s-flag"></i> -->
<el-dropdown trigger="click" @command="handleCommand">
@@ -34,6 +34,24 @@
return {
DC: "",
tabTable: [],
+ ccData: [
+ {
+ lnt: 115.87071885,
+ lat: 28.74382592,
+ },
+ {
+ lnt: 121.50266534548483,
+ lat: 31.24357506330159,
+ },
+ {
+ lnt: 121.56405019,
+ lat: 31.20845211,
+ },
+ {
+ lnt: 121.55500463461836,
+ lat: 31.257934074839717,
+ },
+ ],
};
},
computed: {
@@ -45,19 +63,21 @@
},
mounted() {},
methods: {
+ mubiao() {
+ let that = this;
+ //测试fllyTo
+ },
handleCommand(command) {
let that = this;
console.log(command, "定位");
// 定位
- // this.mviewer.zoomToPosition(
- // new that.DC.Position(
- // command.position[0],
- // command.position[1] - 0.012,
- // 1530,
- // 0,
- // -45
- // )
- // );
+ this.$store.dispatch("mapFlyTo", {
+ //飞入
+ lntLat: [command.lnt, command.lat, 2530],
+ heading: 0,
+ pitch: -45,
+ roll: 0,
+ });
},
openBigPopupAfter() {
this.$store.commit("MSET_BIGPOPUPAFTER", true);
@@ -77,16 +97,28 @@
// });
},
getStreet() {
+ let that = this;
getListarc().then((res) => {
let title = [];
- res.data.data.forEach((item) => {
+ const data = res.data.data;
+ for (let k = 0; k < data.length; k++) {
title.push({
- title: item.dictValue,
+ title: data[k].dictValue,
flag: false,
- key: item.dictKey,
+ key: data[k].dictKey,
child: [],
+ lnt: that.ccData[k].lnt,
+ lat: that.ccData[k].lat,
});
- });
+ }
+ // res.data.data.forEach((item) => {
+ // title.push({
+ // title: item.dictValue,
+ // flag: false,
+ // key: item.dictKey,
+ // child: [],
+ // });
+ // });
this.tabTable = title;
this.$store.commit("MSET_POPUPTABLENAME", title);
});
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
index b848294..0c89a11 100644
--- a/src/components/mobilePopupOur/index.vue
+++ b/src/components/mobilePopupOur/index.vue
@@ -78,12 +78,7 @@
</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 { getListarc } from "@/api/mobile/public/arc"; //头部下标签页数据
import { mapGetters } from "vuex";
export default {
computed: {
@@ -95,89 +90,61 @@
searchLabel: "",
choiceValue: "",
choiceKey: "",
+ choiceMethod: "",
choiceData: [],
tabTable: [],
fullscreenLoading: false,
activeName: "1",
choiceMain: "",
onlyData: [],
- OURAPI_FORLIFE: {},
};
},
mounted() {
this.fullscreenLoading = true;
if (this.mBigPopup.search) {
+ //搜索事件
this.searchLabel = this.mBigPopup.value;
// console.log("查询搜索结果", this.mBigPopup.value);
this.fullscreenLoading = false;
this.choiceMain = "搜索";
return;
}
- this.choiceMain = this.popupOurOpenData.qurey;
- this.choiceData = this.popupOurOpenData.main;
+ this.choiceMain = this.popupOurOpenData.qurey; // 进入的主题：列：机构单位，校园建筑
+ this.choiceData = this.popupOurOpenData.main; //带入数据 包括name、type、method
+
this.choiceValue = this.popupOurOpenData.main[0].name;
this.choiceKey = this.popupOurOpenData.main[0].type;
- this.$store.commit("MSET_BIGPOPUPAFTER", false);
+ this.choiceMethod = this.popupOurOpenData.main[0].method;
+
+ 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;
- }
+ this.getDataHeardDown();
},
methods: {
handleClick(tab, event) {
+ //头下部标签
this.fullscreenLoading = true;
- if (this.choiceMain == "校园建筑") {
- this.getListCampus(this.activeName, this.choiceKey);
- } else if (this.choiceMain == "生活设施") {
- this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
- }
+ this.getOutList(this.activeName, this.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定位请求函数
- }
+ this.choiceMethod = command.method; //更改请求
+ // console.log("请求对应头部下拉菜单接口", command);
+ this.getOutList(this.activeName, this.choiceKey);
},
closeBigPopup() {
this.$store.commit("MSET_BIGPOPUP", false);
},
- //"生活设施"↓
- getDatalivingFacilities(data) {
- let that = this;
+ getDataHeardDown() {
+ if (this.choiceMain == "机构单位") {
+ //不请求头部标签页数据
+ this.getOutList(this.activeName, this.choiceKey);
+ return;
+ }
+ //获取头下部标签页
getListarc().then((res) => {
let title = [];
res.data.data.forEach((item) => {
@@ -189,173 +156,66 @@
});
});
this.tabTable = title;
-
- this.getListlivingFacilities(this.activeName, this.choiceKey); //生活设施 用choiceKey定位请求函数
+ this.getOutList(this.activeName, this.choiceKey);
});
},
- getListlivingFacilities(campus, type) {
+ //请求
+ getOutList(campus, type) {
let that = this;
- this.OURAPI_FORLIFE[type]({ campus: campus }).then((res) => {
- const data = res.data.data.records;
- // console.log(data);
- // return;
+ this.choiceMethod({ campus: campus, type: type }).then((res) => {
+ const data = res.data.data;
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 == "文化风景"
- ? ["定位", "实景", "图集"]
- : ["定位"],
+ if (this.choiceMain == "校园建筑") {
+ // 校园建筑使用该id获取具体信息
+ 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 == "文化风景"
+ ? ["定位", "实景", "图集"]
+ : ["定位"],
+ });
});
- });
+ } else {
+ //正常获取全部数据
+ 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,
+ address: item.address,
+ introduce: item.introduce,
+ buts:
+ that.mBigPopup.name == "校园建筑" ||
+ that.mBigPopup.name == "文化风景"
+ ? ["定位", "实景", "图集"]
+ : ["定位"],
+ });
+ });
+ }
that.fullscreenLoading = false;
+ if (this.choiceMain == "机构单位") {
+ that.onlyData = outList;
+ return;
+ }
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>
-
-<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;
- }
- }
- .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>
\ No newline at end of file
diff --git a/src/components/mobilePopupOurAfter/index.vue b/src/components/mobilePopupOurAfter/index.vue
index 5d8e20c..d5714e1 100644
--- a/src/components/mobilePopupOurAfter/index.vue
+++ b/src/components/mobilePopupOurAfter/index.vue
@@ -32,6 +32,20 @@
</template>
<script>
+import { getList } from "@/api/mobile/orgnav/index"; //机构单位
+import { getChildNavList } from "@/api/mobile/public/arc"; //校园建筑
+import {
+ getListlivingFacilitiesr,
+ getListsupermarket,
+ getListmedical,
+ getListmail,
+ getListbathroom,
+ getListduplicate,
+ getListnetwork,
+ getListaed,
+ getListsignal,
+} from "@/api/mobile/livingFacilities/index"; //生活设施
+import { getListparking } from "@/api/mobile/stop/index"; //停车场
export default {
name: "mobilePopupOurAfter",
data() {
@@ -72,36 +86,40 @@
},
],
openData1: [
- { name: "党群机构", type: 1 },
- { name: "职能部处", type: 2 },
- { name: "直属及附属单位", type: 3 },
- { name: "教学与科研机构", type: 4 },
- { name: "其他机构", type: 5 },
+ { name: "党群机构", type: 1, method: getList },
+ { name: "职能部处", type: 2, method: getList },
+ { name: "直属及附属单位", type: 3, method: getList },
+ { name: "教学与科研机构", type: 4, method: getList },
+ { name: "其他机构", type: 5, method: getList },
],
openData2: [
- { name: "行政办公", type: 1 },
- { name: "教学科研", type: 2 },
- { name: "校内场馆", type: 3 },
- { name: "宿舍公寓", type: 4 },
- { name: "文化风景", type: 5 },
- { name: "家属住宅", type: 6 },
- { name: "其他楼宇", type: 7 },
+ { name: "行政办公", type: 1, method: getChildNavList },
+ { name: "教学科研", type: 2, method: getChildNavList },
+ { name: "校内场馆", type: 3, method: getChildNavList },
+ { name: "宿舍公寓", type: 4, method: getChildNavList },
+ { name: "文化风景", type: 5, method: getChildNavList },
+ { name: "家属住宅", type: 6, method: getChildNavList },
+ { name: "其他楼宇", type: 7, method: getChildNavList },
],
openData3: [
- { name: "食堂餐厅", type: 1 },
- { name: "购物超市", type: 2 },
- { name: "校内医疗", type: 3 },
- { name: "邮寄快递", type: 4 },
- { name: "学生浴室", type: 5 },
- { name: "圈存机", type: 6 },
- { name: "打字复印", type: 7 },
- { name: "AED", type: 8 },
- { name: "银行网点", type: 9 },
- { name: "通信营业厅", type: 10 },
+ { name: "食堂餐厅", type: 1, method: getListlivingFacilitiesr },
+ { name: "购物超市", type: 2, method: getListsupermarket },
+ { name: "校内医疗", type: 3, method: getListmedical },
+ { name: "邮寄快递", type: 4, method: getListmail },
+ { name: "学生浴室", type: 5, method: getListbathroom },
+ // { name: "圈存机", type: 6 ,method:getListlivingFacilitiesr},
+ { name: "打字复印", type: 7, method: getListduplicate },
+ { name: "AED", type: 8, method: getListaed },
+ { name: "银行网点", type: 9, method: getListnetwork },
+ { name: "通信营业厅", type: 10, method: getListsignal },
],
- openData4: [{ name: "文化风景", type: 1 }],
- openData5: [{ name: "出入口", type: 1 }],
- openData6: [{ name: "停车场", type: 1 }],
+ openData4: [
+ { name: "文化风景", type: 1, method: getListlivingFacilitiesr },
+ ],
+ openData5: [
+ { name: "出入口", type: 1, method: getListlivingFacilitiesr },
+ ],
+ openData6: [{ name: "停车场", type: 1, method: getListparking }],
};
},
mounted() {},
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
index 6ef5d47..bb20d60 100644
--- a/src/components/mobilePopupOurOnce/index.vue
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -23,7 +23,15 @@
<div class="mobilePopupOurOnce_r_down">
<div v-for="(item, index) in seebut" :key="index">
<el-link
- icon="el-icon-map-location"
+ :icon="
+ item.name == '实景'
+ ? 'el-icon-place'
+ : item.name == '图集'
+ ? 'el-icon-data-board'
+ : item.name == '定位'
+ ? 'el-icon-map-location'
+ : ''
+ "
class="mobilePopupOurOnce_r_d_in"
@click="openOnce(item.name)"
>{{ item.name }}</el-link
@@ -48,17 +56,13 @@
name: "mobilePopupOurOnce",
created() {
this.DC = global.DC;
- // console.log(this.onceData);
if (this.onceData.icon) {
this.srcList = this.onceData.icon;
this.icon = this.srcList[0];
}
if (this.onceData.from == "校园建筑") {
this.getOnceCampus(this.onceData.id);
- } else if (
- this.onceData.from == "机构单位" ||
- this.onceData.from == "生活设施"
- ) {
+ } else {
this.ourData = this.onceData;
}
},
@@ -111,7 +115,6 @@
"https://www.kuleiman.com/110487/index.html?m=1"
);
} else if (val == "图集") {
- console.log(this.srcList);
let imgsDom = document.getElementById("mobileBigImgs" + this.icon + "");
imgsDom.click();
}
@@ -120,7 +123,6 @@
getOnceCampus(id) {
getChildNavDetail({ id: id }).then((res) => {
var result = res.data.data[0].list;
- // console.log(result);
let d = {
name: result.mechanismname,
lntLat: [result.jd, result.wd],
@@ -132,6 +134,7 @@
QRImg: result.codeurl,
websiteUrl: result.websiteurl,
telePhone: result.telephone,
+ address: result.address,
};
this.ourData = d;
});
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
index 957a407..42a25d3 100644
--- a/src/components/mobileWindow/index.vue
+++ b/src/components/mobileWindow/index.vue
@@ -4,41 +4,55 @@
v-show="!MobileWindowsHide"
id="mobile-map_content_content"
>
- <div class="mobile-popup-imgs-heard">
- <img :src="url" alt="" />
- <el-image
- style="width: 100px; height: 100px"
- :src="url"
- id="mobileBigImgs"
- v-show="false"
- :preview-src-list="srcList"
- >
- </el-image>
- <!-- <div>{{ query.query }}</div> -->
- <div class="mobileBig-center-our">
- <div
- v-for="(item, index) in center"
- :key="index"
- class="mobileBig-center"
+ <div class="mobiletitle">{{ title }}</div>
+ <div class="mobilelabel-content">
+ <div class="mobile-popup-imgs-heard">
+ <div class="mobile-popup-imgs-h-close">
+ <i class="el-icon-circle-close icon" @click="closeWindow"></i>
+ </div>
+ <img :src="url" alt="" />
+ <el-image
+ style="width: 100px; height: 100px"
+ :src="url"
+ id="mobileBigImgs"
+ v-show="false"
+ :preview-src-list="srcList"
>
- <div class="m-c-title">{{ item.name }}：</div>
- <span class="m-c-center">{{ item.value }}</span>
+ </el-image>
+ <!-- <div>{{ query.query }}</div> -->
+ <div class="mobileBig-center-our">
+ <div
+ v-for="(item, index) in center"
+ :key="index"
+ class="mobileBig-center"
+ >
+ <div class="m-c-title">{{ item.name }}：</div>
+ <span class="m-c-center">{{ item.value }}</span>
+ </div>
</div>
</div>
- </div>
- <div class="mobile-popup-control">
- <div v-for="(item, index) in seebut" :key="index">
- <el-link
- icon="el-icon-map-location"
- class="mobilePopupOurOnce_r_d_in"
- @click="openOnce(item.name)"
- >{{ item.name }}</el-link
- >
- <el-divider
- direction="vertical"
- class="mobilePopupOurOnce_r_d_in"
- v-if="index != seebut.length - 1"
- ></el-divider>
+ <div class="mobile-popup-control">
+ <div v-for="(item, index) in seebut" :key="index">
+ <el-link
+ :icon="
+ item.name == '实景'
+ ? 'el-icon-place'
+ : item.name == '图集'
+ ? 'el-icon-data-board'
+ : item.name == '去这'
+ ? 'el-icon-finished'
+ : ''
+ "
+ class="mobilePopupOurOnce_r_d_in"
+ @click="openOnce(item.name)"
+ >{{ item.name }}</el-link
+ >
+ <el-divider
+ direction="vertical"
+ class="mobilePopupOurOnce_r_d_in"
+ v-if="index != seebut.length - 1"
+ ></el-divider>
+ </div>
</div>
</div>
</div>
@@ -71,11 +85,23 @@
this.seebut.push({
name: "去这",
});
+ } else {
+ this.seebut = [
+ {
+ name: "实景",
+ },
+ {
+ name: "图集",
+ },
+ {
+ name: "去这",
+ },
+ ];
}
this.center = [];
for (let k in this.query.query) {
for (let n in this.getCenter) {
- if (k == this.getCenter[n].name) {
+ if (k == this.getCenter[n].name && this.query.query[k]) {
this.center.push({
name: this.getCenter[n].value,
value: this.query.query[k] ? this.query.query[k] : "暂无",
@@ -97,6 +123,14 @@
name: "telePhone",
value: "电话",
},
+ {
+ name: "address",
+ value: "地址",
+ },
+ {
+ name: "introduce",
+ value: "详情",
+ },
],
title: "",
fullscreenLoading: false,
@@ -104,12 +138,7 @@
positions: "",
srcList: [],
seebut: [],
- center: [
- {
- name: "网址",
- value: "123",
- },
- ],
+ center: [],
};
},
methods: {
@@ -119,12 +148,20 @@
if (val == "去这") {
//定位
} else if (val == "实景") {
- this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
+ this.$store.commit(
+ "MSET_OPENMOBILEPANORAMA",
+ "https://www.kuleiman.com/110487/index.html?m=1"
+ );
} else if (val == "图集") {
let imgsDom = document.getElementById("mobileBigImgs");
imgsDom.click();
}
},
+ closeWindow() {
+ if (!this.MobileWindowsHide) {
+ this.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
+ }
+ },
},
};
</script>
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index d289e6d..7309ca1 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -184,7 +184,7 @@
that.$store.commit("MSET_ICONHIDE", true);
}
if (!that.MobileWindowsHide) {
- that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
+ // that.$store.dispatch("closeMobileWindowsDom"); //关闭随地图弹窗
}
// if (!that.MobileWindowsHideFixed) {
// that.$store.dispatch("CLOSE_WIDOWFIXED"); //关闭固定弹窗
@@ -219,8 +219,8 @@
viewer.use(new DC.Measure());
tileset.setStyle(style);
- // layer.addOverlay(tileset);
- // viewer.flyTo(tileset);
+ layer.addOverlay(tileset);
+ viewer.flyTo(tileset);
tileset.on(DC.MouseEventType.CLICK, (e) => {
// that.popupFlag = true
@@ -229,7 +229,7 @@
viewer.scene.globe.depthTestAgainstTerrain = false;
// console.log(document.getElementById("mobile-map_content_content"));
- console.log(e);
+ // console.log(e);
// 定制化窗体
that.openPopupS(e.position, [e.wgs84Position.lng, e.wgs84Position.lat]);
@@ -258,7 +258,7 @@
let d = {
position,
lntLat,
- query: { ...(query || {}), position, lntLat },
+ query: { ...(query || {}), introduce: position, address: lntLat },
useJWD: true, //仅使用经纬度
};
that.$store.dispatch("setMobileWindows", d);
diff --git a/src/mobileDivForms/mobileDivForms.js b/src/mobileDivForms/mobileDivForms.js
index aacdde5..25cb2ed 100644
--- a/src/mobileDivForms/mobileDivForms.js
+++ b/src/mobileDivForms/mobileDivForms.js
@@ -74,11 +74,12 @@
var el = $("<div class=''></div>")
- var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
- var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)
+ // var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
+ // var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)
- el.append(titleDiv)
- el.append(labelContent)
+ // el.append(titleDiv)
+ // el.append(labelContent)
+ el.append(this._content)
el.attr('id', id)
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 3cca045..a99ce68 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -62,7 +62,9 @@
},
},
actions: {
- setMobileWindows({ state, commit, }, data) {//打开随地图移动窗口，暂不使用
+ setMobileWindows({ state, commit, dispatch }, data) {//打开随地图移动窗口
+ // 关闭前一个弹窗？
+ dispatch("closeMobileWindowsDom");
if (data.useJWD) {
var ellipsoid = state.mviewer.scene.globe.ellipsoid;
var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
@@ -82,10 +84,31 @@
content: document.getElementById("mobile-map_content_content"),
position: [data.position],
});
- commit("MSET_MOBILEWINDOWSHIDE", false)
- state.mviewer.zoomToPosition(
- new global.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
+ // commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
+ // dispatch("CHANGETOC3", { // 转换坐标
+ // lnt: data.lntLat[0],
+ // lat: data.lntLat[1]
+ // }).then(res => {
+ // console.log(res)
+
+ //基于高度基础设置
+ // h：1530
+ // lnt： + 0.01187 x轴
+ // Lat + 0.0108 y轴
+ let Position = new global.DC.Position(//转坐标
+ +data.lntLat[0] + 0.01187,
+ +data.lntLat[1] - 0.0108,
+ 1530,
+ 0,
+ -45
);
+ dispatch("mapFlyTo", {//飞入
+ lntLat: [Position.lng, Position.lat, Position.alt],
+ heading: Position.heading,
+ pitch: Position.pitch,
+ roll: Position.roll,
+ })
+ // })
commit("MSET_POPUPDOM", popupsDom)
},
closeMobileWindowsDom({ state, commit }) {
@@ -98,7 +121,7 @@
var ellipsoid = state.mviewer.scene.globe.ellipsoid;
var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
data.lnt,
- data.lat - 0.0004,
+ data.lat - 0.00006,
data.alt || "90.648862227"
);
var position = ellipsoid.cartographicToCartesian(cartographic);
@@ -124,6 +147,59 @@
//加入当时的选点
JOIN_POINT({ state, commit }, data) {
+ },
+ //flyTo
+ mapFlyTo({ state, commit, dispatch }, data) {
+ state.mviewer.camera.flyTo({
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ data.lntLat[0] - 0.012, data.lntLat[1],
+ data.lntLat[2] || 15000.0
+ ),
+ // destination: data.res,
+ orientation: {
+ heading: global.DC.Namespace.Cesium.Math.toRadians(data.heading),
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(data.pitch),
+ // heading: data.heading,
+ // pitch: data.pitch,
+ roll: data.roll
+ },
+ duration: 2, //定位的时间间隔
+ complete: () => {//完成后的回调
+ setTimeout(() => {
+ !state.MobileWindowsHide ||
+ commit("MSET_MOBILEWINDOWSHIDE", false)//显示弹窗
+ }, 0);
+ }
+ });
+ //官网flyto使用方法
+ // 1. Fly to a position with a top-down view
+ // viewer.camera.flyTo({
+ // destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
+ // });
+
+ // // 2. Fly to a Rectangle with a top-down view
+ // viewer.camera.flyTo({
+ // destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
+ // });
+
+ // // 3. Fly to a position with an orientation using unit vectors.
+ // viewer.camera.flyTo({
+ // destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
+ // orientation : {
+ // direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
+ // up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
+ // }
+ // });
+
+ // // 4. Fly to a position with an orientation using heading, pitch and roll.
+ // viewer.camera.flyTo({
+ // destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
+ // orientation : {
+ // heading : Cesium.Math.toRadians(175.0),
+ // pitch : Cesium.Math.toRadians(-35.0),
+ // roll : 0.0
+ // }
+ // });
}
}
}
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index cae4d19..f7eedc5 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -3,11 +3,12 @@
align-items: center;
justify-content: center;
}
+//随地图移动弹窗
#mobile-map_popup_content {
//弹窗
width: 100%;
position: fixed;
- z-index: 999;
+ z-index: 100;
left: -1000px;
box-sizing: border-box;
#mobilePopup {
@@ -18,18 +19,10 @@
background-color: #fff;
border-radius: 10px;
position: relative;
- &::before {
- content: "";
- width: 0px;
- height: 0px;
- border: 8px solid #ebebeb;
- position: absolute;
- bottom: -8px;
- left: calc(50% - 8px);
- transform: rotate(45deg);
- }
+
.mobiletitle {
- width: calc(90% - 1px);
+ // width: calc(90% - 1px);
+ width: 100%;
height: 35px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
@@ -43,6 +36,19 @@
height: auto;
// 内容样式
.mobile-popup-imgs-heard {
+ .mobile-popup-imgs-h-close {
+ width: 35px;
+ height: 35px;
+ background-color: #f7f7f7;
+ position: absolute;
+ @extend .centersFlex;
+ border-radius: 100px;
+ right: 0;
+ top: 0;
+ .icon {
+ font-size: 25px;
+ }
+ }
width: 100%;
padding: 10px;
text-align: justify;
@@ -66,7 +72,7 @@
}
.m-c-center {
width: 75%;
- text-indent: 2em;
+ // text-indent: 2em;
word-wrap: break-word;
line-height: 25px;
}
@@ -83,11 +89,23 @@
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
+ &::before {
+ content: "";
+ width: 0px;
+ height: 0px;
+ border: 8px solid #ebebeb;
+ position: absolute;
+ bottom: -8px;
+ left: calc(50% - 8px);
+ transform: rotate(45deg);
+ }
}
}
}
}
+//地图基础样式更改
$controllerw: 35px !important;
#mobile-viewer-container {
// 继承类
@@ -262,3 +280,56 @@
}
}
}
+
+//全屏弹窗
+#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;
+ }
+ }
+ .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;
+ }
+ }
+}
--
Gitblit v1.9.3