From f5233339920a59103d53e8efadc6f3f5d0b64f31 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期三, 08 五月 2024 14:45:37 +0800
Subject: [PATCH] 移动端
---
src/components/leftMenu/sousuo.vue | 546 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 377 insertions(+), 169 deletions(-)
diff --git a/src/components/leftMenu/sousuo.vue b/src/components/leftMenu/sousuo.vue
index 993092d..9e6d294 100644
--- a/src/components/leftMenu/sousuo.vue
+++ b/src/components/leftMenu/sousuo.vue
@@ -5,7 +5,10 @@
<span
@click="ssjmxs"
style="float: left; height: 100%; width: 80%; overflow: hidden"
- ><i class="el-icon-search" style="padding: 0px 15px 0px 20px"></i
+ ><i
+ class="el-icon-search"
+ style="padding: 0px 15px 0px 20px; font-size: 0.15rem"
+ ></i
>{{ syssval }}</span
>
<span
@@ -25,13 +28,9 @@
right: -3px;
"
>
- <img
- src="@/assets/img/navigation/addf.png"
- style="width: 20px"
- @click.stop="AddFavorite"
- />
+ <!-- <img src="@/assets/img/navigation/addf.png" style="width: 20px" @click.stop="AddFavorite" /> -->
</span>
- <span
+ <!-- <span
v-show="syssval == '璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘'"
style="float: right; height: 100%; width: 10%"
>
@@ -40,17 +39,13 @@
style="width: 20px"
@click.stop="showAddFavorite"
/>
- </span>
+ </span> -->
</div>
<!-- 鎼滅储鐣岄潰 -->
- <div class="ssjm" v-show="ssjm">
- <!-- 鎼滅储鐣岄潰椤堕儴 -->
- <div class="menutop">
- <div class="menutitle">鎼滅储</div>
- <div class="menuback" @click="cancless">鍏抽棴</div>
- </div>
+ <div class="ssjm" v-if="ssjm">
<!-- 鎼滅储妗� -->
- <div style="margin: 0.1rem 0">
+ <div class="search-container">
+ <div class="back" @click="cancless"></div>
<el-input
placeholder="杈撳叆鍏抽敭瀛楁悳绱㈠湴鍥�"
autofocus
@@ -58,11 +53,15 @@
@input="changeInput"
clearable
>
- <el-button
- slot="append"
- icon="el-icon-search"
- @click="search"
- ></el-button>
+ <el-select v-model="select" slot="prepend" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="(item, index) in options"
+ :key="index"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <el-button slot="append" @click="search">鎼滅储</el-button>
</el-input>
</div>
<!-- 缁撴灉鏄剧ず -->
@@ -74,47 +73,36 @@
:key="index"
@click="flyTo(item)"
>
- <div style="margin: 0.05rem 0">
- <i class="el-icon-map-location"></i>{{ item.name }}
+ <div class="poiName" style="margin: 0.05rem 0">
+ <img src="@/assets/img/navigation/location.png" alt="" />
+ <span>{{ item.name }}</span>
</div>
- <div style="font-size: 0.12rem; color: black">
- <!-- <span>鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span><br />
- <span>鐢佃瘽:{{ item.telphone ? item.telphone : "鏆傛棤鑱旂郴鏂瑰紡" }}</span> -->
- <!-- <span>鍖哄煙:{{ item.area ? item.area : "鏆傛棤鍖哄煙淇℃伅" }}</span> -->
- <!-- <br /> -->
- <span
- >鍦板潃:{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span
- >
+ <div class="addressBox">
+ <span>{{ item.address ? item.address : "鏆傛棤璇︾粏鍦板潃" }}</span>
</div>
</div>
</div>
</div>
<div v-else>
- <div class="ssjg" v-show="ssjgxs">璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘</div>
+ <div class="ssjg" v-show="ssjgxs">鏈悳绱㈠埌缁撴灉</div>
</div>
</div>
</div>
</template>
<style scoped>
-/* 鎼滅储鎸夐挳鐨勬牱寮� */
-.iszd {
- position: absolute;
- left: 0.2rem;
- top: 0.3rem;
-}
/* 鎼滅储妗嗙殑鏍峰紡 */
.ssk {
position: absolute;
/* text-align: center; */
left: 2.5%;
- bottom: 0.2rem;
+ top: 0.15rem;
width: 95%;
border: 1px solid white;
height: 0.4rem;
line-height: 0.4rem;
background: #fff;
- border-radius: 0.2rem;
+ border-radius: 0.14rem;
color: black;
font-size: 0.14rem;
}
@@ -127,28 +115,109 @@
width: 100%;
height: 100%;
top: 0;
+ left: 0;
background-color: #f3f3f3;
- z-index: 3000;
+ z-index: 1099;
+}
+.search-container {
+ /* background-color: #fff; */
+ background-color: #fff;
+ display: flex;
+ height: 52px;
+ align-items: center;
+}
+.back {
+ background: url("~@/assets/img/search/back.png") center center no-repeat;
+ background-size: 10px 17px;
+ height: 40px;
+ width: 50px;
}
-/* 姣忔潯鎼滅储缁撴灉 */
-.everyinfo {
- color: #409eff;
- padding: 0.05rem;
- font-size: 0.16rem;
- border-bottom: 1px solid lightgray;
+.el-input {
+ width: 85%;
+ background-color: #eee;
+ border-radius: 13px;
+}
+.el-input /deep/ .el-input-group__append,
+.el-input /deep/ .el-input-group__prepend {
+ background-color: transparent;
+ border: none;
}
+.el-input /deep/ .el-input__inner {
+ border: none;
+ font-weight: 500;
+ font-size: 0.14rem;
+ color: #3e3d3d;
+}
+.el-select {
+ width: 0.8rem;
+ position: relative;
+ font-size: 0.14rem;
+}
+.el-select:after {
+ content: "";
+ position: absolute;
+ right: 0;
+ height: 24px;
+ border-left: 1px solid #dcdcdc;
+ top: 50%;
+ transform: translateY(-50%);
+}
+.el-input /deep/ .el-input-group__append {
+ width: 50px;
+ padding-right: 25px;
+}
+.el-input /deep/ .el-input-group__append .el-button {
+ font-size: 0.14rem;
+ color: #ffffff;
+ background: #2477ff;
+ border-radius: 13px;
+ padding: 10px;
+}
+
+.el-scrollbar .hover {
+ background: none;
+}
+
+/*
+ 鎼滅储缁撴灉
+*/
.ssjg {
overflow-x: hidden;
overflow-y: scroll;
/* max-height: 4rem; */
- max-height: 80vh;
+ max-height: calc(98vh - 50px);
background: white;
padding: 0.2rem;
border-radius: 0.05rem;
}
+.ssjg .everyinfo {
+ color: #409eff;
+ padding: 0.05rem;
+ font-size: 0.16rem;
+ border-bottom: 1px solid lightgray;
+}
+.ssjg .poiName {
+ display: flex;
+ align-items: center;
+ height: 20px;
+}
+.ssjg .poiName img {
+ width: 20px;
+}
+.ssjg .poiName span {
+ margin-left: 7px;
+ line-height: 20px;
+}
+.ssjg .addressBox {
+ margin-left: 27px;
+ margin-top: 5px;
+ color: #000;
+ font-weight: 500;
+ font-size: 13px;
+}
.ssjg::-webkit-scrollbar {
/*婊氬姩鏉℃暣浣撴牱寮�*/
width: 8px;
@@ -172,14 +241,15 @@
background: rgba(218, 218, 218, 0.1);
}
</style>
+
<script>
let timers = null;
-
import axios from "axios";
import store from "@/utils/store.js";
import common from "@/components/common";
-let flyPoint;
-let flyLine;
+
+window.flyPoint = null;
+window.flyLine = null;
let Allresults = [];
export default {
@@ -193,25 +263,40 @@
showList: false,
total: 0,
poiList: [],
+ select: "POI",
+ options: [
+ {
+ label: "鍏ㄩ儴",
+ value: "鍏ㄩ儴",
+ },
+ {
+ label: "POI",
+ value: "POI",
+ },
+ {
+ label: "鍦板潡",
+ value: "鍦板潡",
+ },
+ ],
};
},
methods: {
clearval() {
this.syssval = "璇疯緭鍏ュ叧閿瘝鎼滅储鍦板浘";
- flyPoint && Viewer.entities.remove(flyPoint);
- flyPoint = undefined;
- flyLine && sgworld.Creator.DeleteObject(flyLine);
- flyLine = undefined;
+ window.flyPoint && Viewer.entities.remove(window.flyPoint);
+ window.flyPoint = undefined;
+ window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
+ window.flyLine = undefined;
this.poi_text = "";
this.ssjgxs = false;
},
changeInput() {
if (this.poi_text === "") {
this.ssjgxs = false;
- flyPoint && Viewer.entities.remove(flyPoint);
- flyPoint = undefined;
- flyLine && sgworld.Creator.DeleteObject(flyLine);
- flyLine = undefined;
+ window.flyPoint && Viewer.entities.remove(window.flyPoint);
+ window.flyPoint = undefined;
+ window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
+ window.flyLine = undefined;
} else {
clearTimeout(timers);
timers = setTimeout(() => {
@@ -254,6 +339,100 @@
rectangle.maxy > 31.182515322 && (rectangle.maxy = 31.182515322);
return `RECT(${rectangle.minx} ${rectangle.miny},${rectangle.maxx} ${rectangle.maxy})`;
},
+ getGdPoi() {
+ axios
+ .get(common.poiserve, {
+ params: {
+ request: "GdPoi",
+ keywords: this.poi_text,
+ output: "json",
+ coord: "cgcs2000",
+ offset: 20,
+ page: 1,
+ },
+ })
+ .then((res) => {
+ // 楂樺痉
+ if (res.data.status == 1) {
+ res.data.pois &&
+ res.data.pois
+ .filter((item) => {
+ var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
+ return (
+ item.pname.includes("鍖椾含") &&
+ item.name.includes(this.poi_text) &&
+ !reg.test(item.typecode)
+ );
+ })
+ .forEach((val) => {
+ let poiarr = val.location.split(",");
+ let poi = {
+ lon: parseFloat(poiarr[0]),
+ lat: parseFloat(poiarr[1]),
+ };
+ let obj = {
+ adcode: val.adcode,
+ address: val.address,
+ adname: val.area,
+ citycode: val.citycode,
+ cityname: val.cityname,
+ id: val.uid,
+ lat: poi.lat,
+ lng: poi.lon,
+ name: val.name,
+ pcode: val.pcode,
+ pname: val.province,
+ type: val.type,
+ typecode: val.typecode,
+ };
+ Allresults.push(obj);
+ });
+ }
+ this.total = Allresults.length;
+ this.poiList = Allresults;
+ this.showList = true;
+ });
+ },
+ getData() {
+ axios
+ .post(common.poiserve2, {
+ adcode: "110115",
+ address: {
+ name: "",
+ type: "",
+ },
+ adname: "澶у叴鍖�",
+ cityname: "鍖椾含甯�",
+ name: {
+ name: this.poi_text,
+ type: "",
+ },
+ page: 1,
+ perPageCount: 20,
+ pcode: "110000",
+ pname: "",
+ resType: "",
+ })
+ .then((res) => {
+ if (res.status == 200) {
+ res.data.data.res &&
+ res.data.data.res
+ .filter((item) => {
+ // 鍒ゆ柇鍦板潡鏄惁鏈夋眽瀛�
+ var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
+ return (
+ item.name.includes(this.poi_text) && reg.test(item.typecode)
+ );
+ })
+ .forEach((val) => {
+ Allresults.push(val);
+ });
+ }
+ this.total = Allresults.length;
+ this.poiList = Allresults;
+ this.showList = true;
+ });
+ },
search() {
if (this.poi_text === "") {
this.poiList = [];
@@ -262,111 +441,140 @@
this.ssjgxs = true;
Allresults = [];
this.poiList = [];
- axios
- .all([
- // 115鎺ュ彛锛堝彲鏌ュ湴鍧楀悕锛�
- axios.post(common.poiserve2, {
- adcode: "110115",
- address: {
- name: "",
- type: "",
- },
- adname: "澶у叴鍖�",
- cityname: "鍖椾含甯�",
- name: {
- name: this.poi_text,
- type: "",
- },
- page: 1,
- perPageCount: 20,
- pcode: "110000",
- pname: "",
- resType: "",
- }),
- // // 甯傜骇骞冲彴锛堢櫨搴︼細浼氭煡鍒板鍦帮級
- // axios.get(common.poiserve, {
- // params: {
- // request: "bdPoi",
- // query: this.poi_text,
- // output: "json",
- // coord: "cgcs2000",
- // page_num: 0,
- // page_size: 20,
- // },
- // }),
- // 甯傜骇骞冲彴锛堥珮寰凤級
- axios.get(common.poiserve, {
- params: {
- request: "GdPoi",
- keywords: this.poi_text,
- output: "json",
- coord: "cgcs2000",
- offset: 20,
- page: 1,
- },
- }),
- ])
- .then(
- (data) => {
- // this.total = data.data.pois.length;
- // this.poiList =
- // data.data && data.data.pois;
- //115鎺ュ彛
- if (data[0].status == 200) {
- data[0].data.data.res
- .filter((item) => {
- return item.name.includes(this.poi_text);
- })
- .forEach((val) => {
- Allresults.push(val);
- });
- }
- // 甯傜骇骞冲彴
- // // 鐧惧害
- // if (data[1].data.status == 0) {
- // data[1].data.results.forEach((val) => {
- // let obj = {
- // address: val.address,
- // adname: val.area,
- // cityname: val.city,
- // id: val.uid,
- // lat: val.location.lat,
- // lng: val.location.lng,
- // name: val.name,
- // pname: val.province,
- // };
- // Allresults.push(obj);
- // });
- // }
- // 楂樺痉
- if (data[1].data.status == 1) {
- data[1].data.pois.forEach((val) => {
- let poiarr = val.location.split(",");
- let poi = {
- lon: parseFloat(poiarr[0]),
- lat: parseFloat(poiarr[1]),
- };
- let obj = {
- address: val.address,
- adname: val.area,
- cityname: val.city,
- id: val.uid,
- lat: poi.lat,
- lng: poi.lon,
- name: val.name,
- pname: val.province,
- };
- Allresults.push(obj);
- });
- }
- this.total = Allresults.length;
- this.poiList = Allresults;
- this.showList = true;
- },
- (response) => {
- console.log("error");
- }
- );
+ switch (this.select) {
+ case "鍏ㄩ儴":
+ this.getGdPoi();
+ this.getData();
+ // axios
+ // .all([
+ // // 115鎺ュ彛锛堝彲鏌ュ湴鍧楀悕锛�
+ // axios.post(common.poiserve2, {
+ // adcode: "110115",
+ // address: {
+ // name: "",
+ // type: "",
+ // },
+ // adname: "澶у叴鍖�",
+ // cityname: "鍖椾含甯�",
+ // name: {
+ // name: this.poi_text,
+ // type: "",
+ // },
+ // page: 1,
+ // perPageCount: 20,
+ // pcode: "110000",
+ // pname: "",
+ // resType: "",
+ // }),
+ // // // 甯傜骇骞冲彴锛堢櫨搴︼細浼氭煡鍒板鍦帮級
+ // // axios.get(common.poiserve, {
+ // // params: {
+ // // request: "bdPoi",
+ // // query: this.poi_text,
+ // // output: "json",
+ // // coord: "cgcs2000",
+ // // page_num: 0,
+ // // page_size: 20,
+ // // },
+ // // }),
+ // // 甯傜骇骞冲彴锛堥珮寰凤級
+ // axios.get(common.poiserve, {
+ // params: {
+ // request: "GdPoi",
+ // keywords: this.poi_text,
+ // output: "json",
+ // coord: "cgcs2000",
+ // offset: 20,
+ // page: 1,
+ // },
+ // }),
+ // ])
+ // .then(
+ // (data) => {
+ // // this.total = data.data.pois.length;
+ // // this.poiList =
+ // // data.data && data.data.pois;
+ // //115鎺ュ彛
+ // if (data[0].status == 200) {
+ // data[0].data.data.res &&
+ // data[0].data.data.res
+ // .filter((item) => {
+ // return item.name.includes(this.poi_text);
+ // })
+ // .forEach((val) => {
+ // Allresults.push(val);
+ // });
+ // }
+ // // 甯傜骇骞冲彴
+ // // // 鐧惧害
+ // // if (data[1].data.status == 0) {
+ // // data[1].data.results.forEach((val) => {
+ // // let obj = {
+ // // address: val.address,
+ // // adname: val.area,
+ // // cityname: val.city,
+ // // id: val.uid,
+ // // lat: val.location.lat,
+ // // lng: val.location.lng,
+ // // name: val.name,
+ // // pname: val.province,
+ // // };
+ // // Allresults.push(obj);
+ // // });
+ // // }
+ // // 楂樺痉
+
+ // console.log(data, "鏁版嵁");
+ // if (data[0].data.status == 1) {
+ // data[0].data.pois &&
+ // data[0].data.pois
+ // .filter((item) => {
+ // return (
+ // item.pname.includes("鍖椾含") &&
+ // item.name.includes(this.poi_text)
+ // );
+ // })
+ // .forEach((val) => {
+ // let poiarr = val.location.split(",");
+ // let poi = {
+ // lon: parseFloat(poiarr[0]),
+ // lat: parseFloat(poiarr[1]),
+ // };
+ // let obj = {
+ // adcode: val.adcode,
+ // address: val.address,
+ // adname: val.area,
+ // citycode: val.citycode,
+ // cityname: val.cityname,
+ // id: val.uid,
+ // lat: poi.lat,
+ // lng: poi.lon,
+ // name: val.name,
+ // pcode: val.pcode,
+ // pname: val.province,
+ // type: val.type,
+ // typecode: val.typecode,
+ // };
+ // Allresults.push(obj);
+ // });
+ // }
+ // this.total = Allresults.length;
+ // this.poiList = Allresults;
+ // this.showList = true;
+ // console.log(Allresults);
+ // },
+ // (response) => {
+ // console.log("error");
+ // }
+ // );
+ break;
+ case "POI":
+ this.getGdPoi();
+ break;
+ case "鍦板潡":
+ this.getData();
+ break;
+ }
}
},
getPosition(geo) {
@@ -380,8 +588,8 @@
// let degrees = item.location.split(',');
// let degrees = [item.location.lng, item.location.lat];
let degrees = [item.lng, item.lat];
- flyPoint && Viewer.entities.remove(flyPoint);
- flyLine && sgworld.Creator.DeleteObject(flyLine);
+ window.flyPoint && Viewer.entities.remove(window.flyPoint);
+ window.flyLine && sgworld.Creator.DeleteObject(window.flyLine);
sgworld.Navigate.flyToPointsInterest({
destination: Cesium.Cartesian3.fromDegrees(
degrees[0],
@@ -390,16 +598,16 @@
),
});
// 娣诲姞鐐逛綅
- flyPoint = Viewer.entities.add({
+ window.flyPoint = Viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
billboard: {
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scale: 1,
- image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
+ image: window.SmartEarthRootUrl + "/Workers/image/mark1.png",
heightReference: 1,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
},
- properties:item
+ properties: item,
});
// 濡傛灉鏄湴鍧楋紝娣诲姞鑼冨洿绾�
if (item.type == "澶у叴鐢ㄥ湴") {
@@ -428,7 +636,7 @@
z: 0,
});
}
- flyLine = sgworld.Creator.createPolyline(
+ window.flyLine = sgworld.Creator.createPolyline(
geometry,
"#ff0000",
1,
--
Gitblit v1.9.3