Merge branch 'main' of https://git.zdool.com/xs/yxdt/h5 into main

This commit is contained in:
liuyalei 2024-02-19 10:47:38 +08:00
commit e43877e9ff
8 changed files with 689 additions and 161 deletions

View File

@ -1,15 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优享地图</title>
</head>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=4e6d9067f64ad8101ca0f4ceb7cb4083"></script>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优享地图</title>
</head>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=4e6d9067f64ad8101ca0f4ceb7cb4083" crossorigin></script>
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js" crossorigin></script> -->
<script>
// var vConsole = new VConsole();
</script>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

View File

@ -8,6 +8,7 @@
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.6.3",
"pinia": "^2.1.7",
"vant": "^4.8.0",
"vue": "^3.3.4",

BIN
src/assets/home/xzwz.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

66
src/router/dtzh.js Normal file
View File

@ -0,0 +1,66 @@
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;
function gcj02towgs84(lng, lat) {
var lat = +lat;
var lng = +lng;
if (out_of_china(lng, lat)) {
return [lng, lat]
} else {
var dlat = transformlat(lng - 105.0, lat - 35.0);
var dlng = transformlng(lng - 105.0, lat - 35.0);
var radlat = lat / 180.0 * PI;
var magic = Math.sin(radlat);
magic = 1 - ee * magic * magic;
var sqrtmagic = Math.sqrt(magic);
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
var mglat = lat + dlat;
var mglng = lng + dlng;
return [lng * 2 - mglng, lat * 2 - mglat]
}
};
function out_of_china(lng, lat) {
var lat = +lat;
var lng = +lng;
// 纬度3.86~53.55,经度73.66~135.05
return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
};
function transformlat(lng, lat) {
var lat = +lat;
var lng = +lng;
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
return ret
};
function transformlng(lng, lat) {
var lat = +lat;
var lng = +lng;
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
return ret
};
function latLng2WebMercator(lng, lat) {
var earthRad = 6378137.0;
var x = lng * Math.PI / 180 * earthRad;
var a = lat * Math.PI / 180;
var y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
return [x, y]; //[12727039.383734727, 3579066.6894065146]
}
function wgs84utmToGCJ02() {
var retransformX = document.getElementById("retransformX");
var retransformY = document.getElementById("retransformY");
var transformX = document.getElementById("transformX");
var transformY = document.getElementById("transformY");
var g84 = gcj02towgs84(Number(retransformX.value), Number(retransformY.value))
var mer = latLng2WebMercator(g84[0], g84[1])
transformX.value = mer[0];
transformY.value = mer[1];
}
export default gcj02towgs84;

137
src/utils/request.js Normal file
View File

@ -0,0 +1,137 @@
import axios from 'axios';
// import { ElMessage } from 'element-plus'
// import tools from '@/utils/tools'
import { useRoute, useRouter } from "vue-router";
import { Toast } from "vant";
const Route = useRoute(); //路由数据
const Router = useRouter(); //方法可以跳转 添加路由
// axios.defaults.baseURL = 'https://www.zdool.com/'
axios.defaults.timeout = 600000
// HTTP request 拦截器
axios.interceptors.request.use(
(config) => {
// if(config.method === 'get') {
// // 给data赋值以绕过if判断
// config.data = true
// }
let user = sessionStorage.getItem('token')
if (user) {
config.headers['x-token'] = 'Bearer ' + user;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// HTTP response 拦截器
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if (error.response) {
if (error.response.status == 401) {
// Toast.fail('请重新登录!')
// 跳转登录页
// Router.push('/longn')
// localStorage.removeItem("user");
} else if (error.response.status == 404) {
// Toast.fail("Status:404正在请求不存在的服务器记录")
// Router.push('/404')
} else if (error.response.status == 500) {
// Toast.fail('Status:500服务器发生错误')
// Router.push('/500')
} else if (error.response.status == '访问受限') {
// Router.push('/fwsx')
} else {
// Toast.fail(`Status:${error.response.status},未知错误!`)
// Router.push('/qtcw')
}
} else {
Toast.fail("请求服务器无响应!")
}
return Promise.reject(error.response);
}
);
var http = {
/** get
* @param {接口地址} url
* @param {请求参数} params
*/
get: function (url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
})
},
/** post
* @param {接口地址} url
* @param {请求参数} params
*/
post: function (url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
})
},
put: function (url, params) {
return new Promise((resolve, reject) => {
axios.put(url, params)
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
})
},
delete: function (url, params) {
return new Promise((resolve, reject) => {
axios.delete(url, params)
.then((response) => {
resolve(response.data);
})
.catch((error) => {
reject(error);
});
})
},
// download: function (url) {
// let user = tools.data.get('user');
// let token = "x-token=" + user.token;
// url = url + (url.indexOf("?") > 0 ? "&" : "?") + token;
// window.open(url);
// },
// downloadFile(url, params) {
// return new Promise((resolve, reject) => {
// axios({ url, params, responseType: 'blob', }).then((res) => {
// resolve(res);
// })
// })
// }
}
export default http;

105
src/utils/tool.js Normal file
View File

@ -0,0 +1,105 @@
const tool = {
/**
*
* @param {*} 工具函数
* @param {*} length
* @returns
* truncateString(string, length) 该方法可以从指定长度处截断字符串
*
* tripHtml(html) 去除字符串中的HTML
*
* capitalize(str)字符串首字母大写
*
* timeFromDate(date)该方法可以用于将时间转化为hour:minutes:seconds的格式
*
* dayOfYear(date)该方法用于检测给出的日期位于今年的第几天
*
* dayDif(date1,date2)该方法用于计算两个日期之间的间隔时间
*
* isDateValid(...val)方法用于检测给出的日期是否有效
*
* removeDuplicates(arr)该方法用于移除数组中的重复项
*
* isNotEmpty(arr)该方法用于判断一个数组是否为空数组它将返回一个布尔值
*
* isEmpty(obj)方法用于检测一个JavaScript对象是否为空
*
* goToTop()该方法用于在页面中返回顶部
*
* scrolledToBottom()该方法用于判断页面是否已经底部
*
* trueTypeOf(obj)方法用于获取一个变量的类型
*/
// 该方法可以从指定长度处截断字符串
truncateString: (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`,
//去除字符串中的HTML
tripHtml: html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '',
//字符串首字母大写
capitalize: str => str.charAt(0).toUpperCase() + str.slice(1),
// 该方法可以用于将时间转化为hour:minutes:seconds的格式
timeFromDate: date => date.toTimeString().slice(0, 8),
// 该方法用于检测给出的日期位于今年的第几天
dayOfYear: (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24),
// 该方法用于计算两个日期之间的间隔时间
dayDif: (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000),
// 该方法用于检测给出的日期是否有效
isDateValid: (...val) => !Number.isNaN(new Date(...val).valueOf()),
// 该方法用于移除数组中的重复项
removeDuplicates: (arr) => [...new Set(arr)],
//该方法用于判断一个数组是否为空数组,它将返回一个布尔值
isNotEmpty: arr => Array.isArray(arr) && arr.length > 0,
// 该方法用于检测一个JavaScript对象是否为空
isEmpty: obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object,
//该方法用于在页面中返回顶部
goToTop: () => window.scrollTo(0, 0),
//该方法用于判断页面是否已经底部
scrolledToBottom: () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight,
// 该方法用于获取一个变量的类型
trueTypeOf: (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(),
// 阿拉伯数字转中文
convertToChineseNumeral: (num) => {
if (num == 10) {
return '十'
} else if (num == 1) {
return '一'
}
const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
const units = ['', '十', '百', '千', '万'];
let result = '';
let numStr = num.toString();
for (let i = 0; i < numStr.length; i++) {
let digit = parseInt(numStr.charAt(i));
let unit = units[numStr.length - i - 1];
if (digit === 0) {
// 当前数字为0时不需要输出汉字但需要考虑上一个数字是否为0避免出现连续的零
if (result.charAt(result.length - 1) !== '零') {
result += '零';
}
} else {
result += digits[digit] + unit;
}
}
// 对于一些特殊的数字如10、100等需要在最前面加上“一”
if (result.charAt(0) === '一') {
result = result.substr(1, result.length);
} else if (result.charAt(0) === '百') {
result = '一' + result;
} else if (result.charAt(0) === '千') {
result = '一' + result;
}
return result;
}
}
export default tool;

View File

@ -41,6 +41,7 @@
shape="round"
background="#4fc08d00"
placeholder=""
@change="getlist()"
/>
<van-dropdown-menu>
<van-dropdown-item
@ -61,36 +62,103 @@
<div
class="cardlist"
v-for="(item, index) in dropdown.rmyy"
@click="addClickHandls(item)"
:key="index"
>
<img class="imgse" :src="item.img" alt="" />
<img
class="imgse"
:src="
item.img ||
'https://ts4.cn.mm.bing.net/th?id=OIP-C.loXEDwoMcxdPH4Ka75v3qgHaFU&w=294&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
"
alt=""
/>
<div class="bodys">
<div class="bt">{{ item.name }}</div>
<div class="bt">{{ item.fu_wu_ti_gong_dan_wei_ming_chen }}</div>
<div class="dz">
<div class="tp">
<img class="ims" src="../assets/home/dz.png" alt="" />
</div>
<div class="zl">{{ item.jl }}</div>
<div class="xxdz">{{ item.dz }}</div>
<div class="xxdz">{{ item.xiang_xi_di_zhi }}</div>
</div>
<div class="bq">
<van-tag
v-for="(items, index) in item.tag"
:key="index"
plain
type="primary"
>{{ items }}</van-tag
>
<van-tag plain type="primary">{{
item.fu_wu_ti_gong_dan_wei_lei_xing
}}</van-tag>
</div>
</div>
</div>
<van-divider
v-if="dropdown.rmyy.length < count && dropdown.rmyy.length !== 0"
@click="getlists()"
:style="{
color: '#1989fa',
borderColor: '#1989fa',
padding: '0 16px',
}"
>
点击加载更多
</van-divider>
<van-divider
v-if="dropdown.rmyy.length >= count"
:style="{
color: '#969799',
borderColor: '#969799',
padding: '0 16px',
}"
>
没有更多了
</van-divider>
</div>
</van-popup>
</div>
<van-popup
v-model:show="show"
closeable
round
:style="{ padding: '45px 10px 45px 10px', width: '90%' }"
>
<div style="width: 99%; margin: 0 auto">
<div style="width: 60%; height: 130px; margin: 0 auto">
<img
style="width: 100%; height: 100%; border-radius: 5px"
:src="
showdata.img ||
'https://ts4.cn.mm.bing.net/th?id=OIP-C.loXEDwoMcxdPH4Ka75v3qgHaFU&w=294&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
"
alt=""
/>
</div>
<div
style="
font-size: 15px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000;
width: 100%;
"
>
<van-cell
title="名称"
:label="showdata.fu_wu_ti_gong_dan_wei_ming_chen"
/>
<van-cell
title="单位类型"
:label="showdata.fu_wu_ti_gong_dan_wei_lei_xing"
/>
<van-cell title="详细地址" :label="showdata.xiang_xi_di_zhi" />
<van-cell title="联系电话" :label="showdata.lian_xi_dian_hua" />
</div>
</div>
</van-popup>
<van-overlay :show="shows" z-index="100">
<div class="wrapper">
<van-loading />
</div>
</van-overlay>
</template>
<script setup>
import { onMounted, ref, reactive } from "vue";
import http from "@/utils/request";
import gcj02towgs84 from "@/router/dtzh";
import { onMounted, ref, reactive, nextTick } from "vue";
import img1 from "@/assets/home/yysy.png";
import img2 from "@/assets/home/yysyxz.png";
import img3 from "@/assets/home/xyyj.png";
@ -109,195 +177,142 @@ import img15 from "@/assets/home/yxfw.png";
import img16 from "@/assets/home/yxfwxz.png";
import img17 from "@/assets/home/yy.png";
import img18 from "@/assets/home/wdwz.png";
import img19 from "@/assets/home/xzwz.png";
const count = ref(0);
var map = null;
var control = null;
var T = window.T;
const show = ref(false);
const shows = ref(true);
const showdata = ref({});
const dropdown = reactive({
sesh: "",
value1: 0,
hinegh: 256,
hinegh: 280,
value1: 0,
value2: 0,
value3: 0,
option1: [{ text: "智能排序", value: 0 }],
option2: [{ text: "位置距离", value: 0 }],
option3: [{ text: "其他筛选", value: 0 }],
rmyy: [
{
name: "象山第一人民医院",
img: "http://store.is.autonavi.com/showpic/756391e986455206891ae6d6c27ac430?type=pic",
tag: ["综合医院", "二级甲等"],
dz: "宁波市象山县东谷路289-291",
jl: "1公里",
zb: [121.88637, 29.47231],
},
{
name: "象山县中医医院(新院区)",
img: "https://aos-comment.amap.com/B0FFKGTE0P/headerImg/40db9d22bfd0099a2e3418da8f3e9c5b_2048_2048_80.jpg",
tag: ["中医医院"],
dz: "宁波市象山县南部新城兴洋路7号",
jl: "6.7公里",
zb: [121.90277, 29.43579],
},
{
name: "象山第三人民医院",
img: "http://store.is.autonavi.com/showpic/a0ff397c63274b1438755089ccc972d1?type=pic",
tag: ["综合医院", "二级医院"],
dz: "宁波市象山县丹西街道樟树下村",
jl: "3.8公里",
zb: [121.89218, 29.44957],
},
{
name: "丹城中心卫生院",
img: "http://store.is.autonavi.com/showpic/fee5ebf4dd4ccae1908faf4993d557bf?type=pic",
tag: ["卫生院"],
dz: "宁波市象山县上吴村254-2号",
jl: "2.5公里",
zb: [121.892122, 29.449637],
},
{
name: "象山爱尔眼科医院",
img: "http://store.is.autonavi.com/showpic/1d00880c0dce4c237df8499b20eda61d?type=pic",
tag: ["眼科医院"],
dz: "宁波市象山县丹西街道象山港路118号",
jl: "3.4公里",
zb: [121.86596, 29.4603],
},
{
name: "西港村卫生室",
img: "http://store.is.autonavi.com/showpic/aeec5aeacbb4deebb2530a060b37091a?type=pic",
tag: ["卫生院"],
dz: "宁波市象山县规划路与滨海大道交叉口东460米",
jl: "7.5公里",
zb: [121.910589, 29.422593],
},
{
name: "翁敬堂骨伤医院",
img: "http://store.is.autonavi.com/showpic/eb553882ac643ce7edba3074d2b27516?type=pic",
tag: ["骨科医院"],
dz: "宁波市象山县新丰路298号",
jl: "2.6公里",
zb: [121.87011, 29.46552],
},
{
name: "宁波口腔医院象山分院",
img: "http://store.is.autonavi.com/showpic/0ada714ce414813321099165da07151d?type=pic",
tag: ["口腔医院"],
dz: "宁波市象山县丹河东路1098号",
jl: "1.6公里",
zb: [121.898524, 29.461311],
},
{
name: "星城医院",
img: "http://store.is.autonavi.com/showpic/89bfcbf76b4b197a4fb94b10d49b7bf4?type=pic",
tag: ["综合医院"],
dz: "宁波市象山县丹河东路1086号",
jl: "1.7公里",
zb: [121.89456, 29.46375],
},
{
name: "宁波港城口腔医院",
img: "http://store.is.autonavi.com/showpic/d77f446fcacc052f9d1aed8554d125c8?type=pic",
tag: ["口腔医院"],
dz: "宁波市象山县丹东街道新华路269号",
jl: "1.6公里",
zb: [121.88508, 29.46631],
},
{
name: "益民口腔",
img: "http://store.is.autonavi.com/showpic/b742650078a06ec8443c31c94fa4c32c?type=pic",
tag: ["口腔诊所"],
dz: "台州市天台县和合北路161-17号",
jl: "917米",
zb: [121.89336, 29.47956],
},
{
name: "象山妇幼保健院",
img: "http://store.is.autonavi.com/showpic/b742650078a06ec8443c31c94fa4c32c?type=pic",
tag: ["妇幼医院"],
dz: "宁波市象山县城东路1号",
jl: "3公里",
zb: [121.87026, 29.48092],
},
],
rmyy: [],
serch: null,
});
const list = reactive({
page: 1,
size: 10,
show: true,
index: 3,
index: 0,
yxfw: [
{
id: 0,
name: "幼有善育",
img: img1,
imgs: img2,
columnName: "Childcare",
},
{
id: 1,
name: "学有优教",
img: img3,
imgs: img4,
columnName: "Education",
},
{
id: 2,
name: "劳有所得",
img: img5,
imgs: img6,
columnName: "ObtainEmployment",
},
{
id: 3,
name: "病有良医",
img: img7,
imgs: img8,
columnName: "Health",
},
{
id: 4,
name: "老有康养",
img: img9,
imgs: img10,
columnName: "Retirement",
},
{
id: 5,
name: "住有宜居",
img: img11,
imgs: img12,
},
{
id: 6,
name: "弱有众扶",
img: img13,
imgs: img14,
columnName: "HelpDisabled",
},
// {
// id: 6,
// name: "",
// img: img11,
// imgs: img12,
// columnName: "HelpDisabled",
// },
],
});
const init = () => {
map = new T.Map("mapDiv");
// map.setMapType(window.TMAP_SATELLITE_MAP);
map.centerAndZoom(new T.LngLat(121.89248, 29.47474), 12);
control = new T.Control.Zoom();
//
map.addControl(control);
control.setPosition(T_ANCHOR_TOP_RIGHT);
var lo = new T.Geolocation();
// lo.getCurrentPosition(fn);
};
const fn = function (e) {
console.log(e);
var icon = new T.Icon({
iconUrl: img18,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
//
var marker = new T.Marker(new T.LngLat(121.89248, 29.47474), { icon: icon });
map.addOverLay(marker);
yxf();
let geocoder;
if (this.getStatus() == 0) {
map.centerAndZoom(e.lnglat, 15);
var marker = new T.Marker(e.lnglat, { icon: icon });
geocoder = new T.Geocoder();
geocoder.getLocation(e.lnglat, searchResult);
map.addOverLay(marker);
}
if (this.getStatus() == 1) {
map.centerAndZoom(e.lnglat, e.level);
var marker = new T.Marker(e.lnglat, { icon: icon });
geocoder = new T.Geocoder();
geocoder.getLocation(e.lnglat, searchResult);
map.addOverLay(marker);
}
if (this.getStatus() == 3) {
map.centerAndZoom(e.lnglat, 15);
var marker = new T.Marker(e.lnglat, { icon: icon });
geocoder = new T.Geocoder();
geocoder.getLocation(e.lnglat, searchResult);
map.addOverLay(marker);
}
};
const searchResult = function (result) {
if (result.getStatus() == 0) {
} else {
alert(result.getMsg());
}
};
const yxfwxz = (e) => {
list.index = e.id;
// map.clearOverLays();
dropdown.serch = e;
getlist();
list.page = 1;
};
const touchmove = (event) => {
if (
document.body.clientHeight - event.touches[0].clientY >= 256 &&
document.body.clientHeight - event.touches[0].clientY >= 280 &&
document.body.clientHeight - event.touches[0].clientY <=
document.body.clientHeight
) {
@ -312,21 +327,179 @@ const yxf = () => {
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
var LngLats = new T.Marker(new T.LngLat(item.zb[0], item.zb[1]), {
let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
ss = gcj02towgs84(ss[0], ss[1]);
var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
icon: icons,
});
map.addOverLay(LngLats);
addClickHandler(item, LngLats);
});
};
function addClickHandler(content, LngLats) {
LngLats.addEventListener("click", function (e) {
map.clearOverLays();
dropdown.rmyy.forEach((item, index) => {
if (
item.xiang_xi_di_zhi_jing_wei_du == content.xiang_xi_di_zhi_jing_wei_du
) {
var icons = new T.Icon({
iconUrl: img19,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
ss = gcj02towgs84(ss[0], ss[1]);
var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
icon: icons,
});
map.addOverLay(LngLats);
addClickHandler(item, LngLats);
} else {
var icons = new T.Icon({
iconUrl: img17,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
ss = gcj02towgs84(ss[0], ss[1]);
var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
icon: icons,
});
map.addOverLay(LngLats);
addClickHandler(item, LngLats);
}
});
show.value = true;
showdata.value = content;
});
}
const addClickHandls = (e) => {
let lest = e.xiang_xi_di_zhi_jing_wei_du.split(",");
lest = gcj02towgs84(lest[0], lest[1]);
map.centerAndZoom(new T.LngLat(lest[0], lest[1]), 17);
showdata.value = e;
map.clearOverLays();
dropdown.rmyy.forEach((item, index) => {
if (item.xiang_xi_di_zhi_jing_wei_du == e.xiang_xi_di_zhi_jing_wei_du) {
var icons = new T.Icon({
iconUrl: img19,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
ss = gcj02towgs84(ss[0], ss[1]);
console.log(ss);
var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
icon: icons,
});
map.addOverLay(LngLats);
addClickHandler(item, LngLats);
} else {
var icons = new T.Icon({
iconUrl: img17,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
let ss = item.xiang_xi_di_zhi_jing_wei_du.split(",");
ss = gcj02towgs84(ss[0], ss[1]);
var LngLats = new T.Marker(new T.LngLat(ss[0], ss[1]), {
icon: icons,
});
map.addOverLay(LngLats);
addClickHandler(item, LngLats);
}
});
};
onMounted(() => {
init();
columnList();
});
const columnList = (e) => {
http.get(`/srv/platform/map/columnList`).then((res) => {
if (res.code == 200) {
list.yxfw.forEach((elements, indexs) => {
list.yxfw[indexs].ids = res.data[elements.columnName];
});
}
getlist();
});
};
onMounted(() => {
init();
});
const getlist = () => {
dropdown.rmyy = [];
list.page = 1;
let paly = {
column_id: "",
keyword: dropdown.sesh,
data_query: [],
data_sorts: [],
};
let patle = "";
patle = list.yxfw[list.index].columnName;
paly.column_id = list.yxfw[list.index].ids;
shows.value = true;
http
.post(
`/srv/platform/map/list/${patle}?page=${list.page}&size=${list.size}`,
paly
)
.then((res) => {
if (res.code == 200) {
dropdown.rmyy = res.data;
if (dropdown.rmyy.length !== 0) {
let lest = dropdown.rmyy[0].xiang_xi_di_zhi_jing_wei_du.split(",");
lest = gcj02towgs84(lest[0], lest[1]);
map.centerAndZoom(new T.LngLat(lest[0], lest[1]), 12);
count.value = res.count;
map.clearOverLays();
yxf();
shows.value = false;
} else {
count.value = 0;
map.clearOverLays();
shows.value = false;
}
}
});
};
const getlists = () => {
list.page = list.page + 1;
let paly = {
column_id: "",
keyword: dropdown.sesh,
data_query: [],
data_sorts: [],
};
let patle = "";
patle = list.yxfw[list.index].columnName;
paly.column_id = list.yxfw[list.index].ids;
shows.value = true;
http
.post(
`/srv/platform/map/list/${patle}?page=${list.page}&size=${list.size}`,
paly
)
.then((res) => {
if (res.code == 200) {
dropdown.rmyy.push(...res.data);
map.clearOverLays();
yxf();
count.value = res.count;
shows.value = false;
}
});
};
</script>
<style scoped lang='scss'>
.home_body {
position: relative;
}
#mapDiv {
margin: 0px;
padding: 0px;
@ -334,6 +507,7 @@ onMounted(() => {
height: 80vh;
z-index: 0;
}
.yxfw {
margin-top: 15px;
margin-left: 16px;
@ -346,11 +520,13 @@ onMounted(() => {
text-align: center;
padding-bottom: 5px;
padding-top: 3px;
.yxfwtp {
width: 18px;
height: 18px;
margin: 2px auto 0;
}
.yxfwwz {
font-size: 8px;
font-family: PingFang SC, PingFang SC;
@ -358,6 +534,7 @@ onMounted(() => {
color: #4379ff;
line-height: 5px;
}
.yxfwwzs {
font-size: 8px;
font-family: PingFang SC, PingFang SC;
@ -366,6 +543,7 @@ onMounted(() => {
line-height: 5px;
}
}
.yxfwnr {
margin-top: 72px;
margin-left: 16px;
@ -375,12 +553,14 @@ onMounted(() => {
border-radius: 6px 6px 6px 6px;
opacity: 1;
text-align: center;
.fgx {
width: 50%;
height: 5px;
border-bottom: 1px solid #f1f1f1;
margin: 0 auto 3px;
}
.yxfws {
z-index: 2;
width: 40px;
@ -394,6 +574,7 @@ onMounted(() => {
height: 18px;
margin: 4px auto 0;
}
.yxfwwz {
font-size: 8px;
font-family: PingFang SC, PingFang SC;
@ -401,6 +582,7 @@ onMounted(() => {
color: #4379ff;
line-height: 8px;
}
.yxfwwzs {
font-size: 8px;
font-family: PingFang SC, PingFang SC;
@ -410,22 +592,31 @@ onMounted(() => {
}
}
}
.card {
width: 100%;
height: calc(100% - 132px);
overflow: auto;
padding-bottom: 80px;
.card ::-webkit-scrollbar {
display: none;
/* Chrome Safari */
}
.cardlist {
background-color: #fff;
padding: 14px 16px 0;
width: 100%;
height: 80px;
display: flex;
.imgse {
width: 100px;
border-radius: 3px;
height: 68px;
}
.bodys {
border-bottom: 1px solid #f1f1f1;
height: 68px;
@ -439,40 +630,46 @@ onMounted(() => {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.van-tag--primary.van-tag--plain {
margin-right: 2px;
}
}
.bt {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #333333;
width: 100%;
width: 98%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dz {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 12px;
line-height: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 2px;
display: flex;
.tp {
width: 12px;
}
.xxdz {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 170px;
width: 98%;
}
.zl {
padding-right: 5px;
}
@ -485,23 +682,33 @@ onMounted(() => {
}
}
}
:deep(.van-dropdown-menu__bar) {
box-shadow: 0 0px 0px rgba(100, 101, 102, 0.12);
border-bottom: 1px solid #f1f1f1;
}
.tzhz {
width: 100px;
height: 6px;
height: 7.5px;
border-radius: 6px 6px 6px 6px;
opacity: 1;
border: 1px solid #eaeaea;
margin: 10px auto 10px;
background-color: #eaeaea;
}
:deep(.tdt-bar a, .tdt-bar a:hover) {
color: #cacaca;
}
:deep(.van-search) {
padding: 0px 12px 10px;
}
.wrapper {
position: absolute;
top: 45%;
left: 45%;
}
</style>

View File

@ -137,15 +137,15 @@ anymatch@~3.1.2:
asynckit@^0.4.0:
version "0.4.0"
resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz"
resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
axios@^1.2.2:
version "1.6.7"
resolved "https://registry.npmmirror.com/axios/-/axios-1.6.7.tgz"
integrity sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==
axios@^1.6.3:
version "1.6.3"
resolved "https://registry.npmmirror.com/axios/-/axios-1.6.3.tgz#7f50f23b3aa246eff43c54834272346c396613f4"
integrity sha512-fWyNdeawGam70jXSVlKl+SUNVcL6j6W79CuSIPfi6HnDUmSCH6gyUys/HrqHeA/wU0Az41rRgean494d0Jb+ww==
dependencies:
follow-redirects "^1.15.4"
follow-redirects "^1.15.0"
form-data "^4.0.0"
proxy-from-env "^1.1.0"
@ -233,20 +233,25 @@ fill-range@^7.0.1:
dependencies:
to-regex-range "^5.0.1"
follow-redirects@^1.15.4:
version "1.15.5"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz"
integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
follow-redirects@^1.15.0:
version "1.15.4"
resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
form-data@^4.0.0:
version "4.0.0"
resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz"
resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
dependencies:
asynckit "^0.4.0"
combined-stream "^1.0.8"
mime-types "^2.1.12"
fsevents@~2.3.2:
version "2.3.3"
resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
glob-parent@~5.1.2:
version "5.1.2"
resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz"