提交 77a83081 作者: 曹云

改-首页-地图-全国维修接口(机构网点),服务网点接口对接

上级 0f44fa60
import request, { Response } from "~/api/request"; import request, { Response } from '~/api/request'
export interface PositioningInfoParams { export interface PositioningInfoParams {
lat?: number; lat: number
lon?: number; lon: number
pageNo?:number, pageNo: number
pageSize?:number pageSize: number
} }
export interface Entiy { export interface Entiy {
dizhi: string; dizhi: string
jd: number; jd: number
wd: number; wd: number
range: number; range: number
} }
export interface ListPageJobInfoResp { export interface ListPageJobInfoType {
id: number; address: string
adCode: string; name: string
province: string; lon: number
locationList: Array<Entiy>; lat: number
distance: number
} }
export interface FlyerBitmapEntiy { export interface FlyerBitmapEntiy {
flyerName: string, flyerName: string
phoneNum: string, phoneNum: string
lon: number, lon: number
lat: number, lat: number
distance: number distance: number
} }
export interface UavBitmapEntiy { export interface UavBitmapEntiy {
uavName: string, uavName: string
online: number, online: number
lon: number, lon: number
lat: number, lat: number
distance: number, distance: number
id: string id: string
} }
export interface BitmapInfo<T> { export interface BitmapInfo<T> {
pageNo: number, pageNo: number
pageSize: number, pageSize: number
list: T[], list: T[]
totalCount: number, totalCount: number
totalPage: number totalPage: number
} }
...@@ -48,19 +49,25 @@ export default { ...@@ -48,19 +49,25 @@ export default {
//web-首页-地图-全国点位 //web-首页-地图-全国点位
listPositioningInfo: ( listPositioningInfo: (
params: PositioningInfoParams params: PositioningInfoParams
): Promise<Response<ListPageJobInfoResp[]>> => { ): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request("/release/website/getWebsiteList", "get", params); return request('/release/website/getWebsiteList', 'get', params)
}, },
//web-首页-地图-全国飞手 //web-首页-地图-全国飞手
listFlyerBitmap: ( listFlyerBitmap: (
params: PositioningInfoParams params: PositioningInfoParams
): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => { ): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => {
return request("/release/website/flyer/bitmap", "get", params); return request('/release/website/flyer/bitmap', 'get', params)
}, },
//web-首页-地图-全国无人机 //web-首页-地图-全国无人机
listUavBitmap: ( listUavBitmap: (
params: PositioningInfoParams params: PositioningInfoParams
): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => { ): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => {
return request("/release/website/uav/bitmap", "get", params); return request('/release/website/uav/bitmap', 'get', params)
}, },
}; //web-首页-地图-全国维修-海点数据
listMaintainBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<ListPageJobInfoType>>> => {
return request('/release/website/maintain/bitmap', 'get', params)
},
}
...@@ -22,19 +22,21 @@ export default function MoreServicePoints() { ...@@ -22,19 +22,21 @@ export default function MoreServicePoints() {
//初始化地图 //初始化地图
const init = async () => { const init = async () => {
try { try {
const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader') const AMapLoader = await import(
/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader'
)
await AMapLoader.load({ await AMapLoader.load({
key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key,首次调用 load 时必填 key: '87b424e68754efc3ba9d11ae07475091', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表,如比例尺'AMap.Scale'等 plugins: [''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}) })
.then(async AMap => { .then(async (AMap) => {
Amap = AMap Amap = AMap
MAP = new AMap.Map('container', { MAP = new AMap.Map('container', {
// 设置地图容器id // 设置地图容器id
viewMode: '3D', // 是否为3D地图模式 viewMode: '3D', // 是否为3D地图模式
zoom: 9, // 初始化地图级别 zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291] // 初始化地图中心点位置 center: [113.93029, 22.53291], // 初始化地图中心点位置
}) })
//用户定位 //用户定位
AMap.plugin('AMap.Geolocation', function () { AMap.plugin('AMap.Geolocation', function () {
...@@ -43,10 +45,13 @@ export default function MoreServicePoints() { ...@@ -43,10 +45,13 @@ export default function MoreServicePoints() {
timeout: 10000, //超过10秒后停止定位,默认:5s timeout: 10000, //超过10秒后停止定位,默认:5s
position: 'RB', //定位按钮的停靠位置 position: 'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量,默认:[10, 20] offset: [10, 20], //定位按钮与设置的停靠位置的偏移量,默认:[10, 20]
zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点 zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
}) })
MAP.addControl(geolocation) MAP.addControl(geolocation)
geolocation.getCurrentPosition(function (status: string, result: any) { geolocation.getCurrentPosition(function (
status: string,
result: any
) {
console.log(result) console.log(result)
if (status == 'complete') { if (status == 'complete') {
...@@ -71,7 +76,7 @@ export default function MoreServicePoints() { ...@@ -71,7 +76,7 @@ export default function MoreServicePoints() {
} }
await mapEntiy(0) await mapEntiy(0)
}) })
.catch(e => { .catch((e) => {
console.log(e) console.log(e)
}) })
} catch (error) { } catch (error) {
...@@ -81,16 +86,15 @@ export default function MoreServicePoints() { ...@@ -81,16 +86,15 @@ export default function MoreServicePoints() {
const showPositioningInfo = async (index: number, data?: UserInfoType) => { const showPositioningInfo = async (index: number, data?: UserInfoType) => {
const res = await api.listPositioningInfo({ const res = await api.listPositioningInfo({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291 lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: 10,
}) })
const list = res.result const list = res.result?.list
?.map(item => item.locationList)
.flat()
.filter((item: { dizhi: string }) => item.dizhi.includes('省'))
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map(item => { list?.map((item) => {
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi) const EntiyValue = addEntiy(item.lon, item.lat, item.address)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
setServicePoints(list) setServicePoints(list)
...@@ -100,17 +104,21 @@ export default function MoreServicePoints() { ...@@ -100,17 +104,21 @@ export default function MoreServicePoints() {
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView()
} }
const showFlyerBitmap = async (index: number, data?: UserInfoType, pageSize?: number) => { const showFlyerBitmap = async (
index: number,
data?: UserInfoType,
pageSize?: number
) => {
const res = await api.listFlyerBitmap({ const res = await api.listFlyerBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: pageSize || 40 pageSize: pageSize || 40,
}) })
const list = res.result?.list const list = res.result?.list
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map(item => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName) const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
...@@ -121,17 +129,42 @@ export default function MoreServicePoints() { ...@@ -121,17 +129,42 @@ export default function MoreServicePoints() {
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView() MAP?.setFitView()
} }
const showMaintainBitmap = async (
index: number,
data?: UserInfoType,
pageSize?: number
) => {
const res = await api.listMaintainBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1,
pageSize: pageSize || 40,
})
const list = res.result?.list
const markerList: any = []
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.address)
markerList.push(EntiyValue)
})
setServicePoints(list)
if (markerList.length) MAP?.add(markerList)
setMarkerCol(markerList)
}
//自适应显示多个点位
MAP?.setFitView()
}
const showUavBitmap = async (index: number, data?: UserInfoType) => { const showUavBitmap = async (index: number, data?: UserInfoType) => {
const res = await api.listUavBitmap({ const res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029, lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291, lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo: 1, pageNo: 1,
pageSize: 40 pageSize: 40,
}) })
const list = res.result?.list const list = res.result?.list
const markerList: any = [] const markerList: any = []
if (list?.length) { if (list?.length) {
list?.map(item => { list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName) const EntiyValue = addEntiy(item.lon, item.lat, item.uavName)
markerList.push(EntiyValue) markerList.push(EntiyValue)
}) })
...@@ -155,7 +188,7 @@ export default function MoreServicePoints() { ...@@ -155,7 +188,7 @@ export default function MoreServicePoints() {
} else if (index === 2) { } else if (index === 2) {
showUavBitmap(index, data) showUavBitmap(index, data)
} else { } else {
showFlyerBitmap(index, data, 30) showMaintainBitmap(index, data, 30)
} }
setMapItem(index) setMapItem(index)
} }
...@@ -165,14 +198,14 @@ export default function MoreServicePoints() { ...@@ -165,14 +198,14 @@ export default function MoreServicePoints() {
const icons = new Amap.Icon({ const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸 size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像 image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60) // 根据所设置的大小拉伸或压缩图片 imageSize: new Amap.Size(60, 60), // 根据所设置的大小拉伸或压缩图片
}) })
const marker = new Amap.Marker({ const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat), position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10), offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例 icon: icons, // 添加 Icon 实例
title: name, title: name,
zoom: 13 zoom: 13,
}) })
return marker return marker
} }
...@@ -182,12 +215,12 @@ export default function MoreServicePoints() { ...@@ -182,12 +215,12 @@ export default function MoreServicePoints() {
var infoWindow = new Amap.InfoWindow({ var infoWindow = new Amap.InfoWindow({
position: p, position: p,
offset: new Amap.Pixel(20, -10), offset: new Amap.Pixel(20, -10),
content: item.dizhi || item.flyerName || item.uavName content: item.dizhi || item.flyerName || item.uavName || item.address,
}) })
infoWindow.open(MAP) infoWindow.open(MAP)
if (item.dizhi) { if (item.dizhi) {
return MAP?.setCenter([item.jd, item.wd]) return MAP?.setCenter([item.jd, item.wd])
} else if (item.flyerName || item.uavName) { } else if (item.flyerName || item.uavName || item.address) {
return MAP?.setCenter([item.lon, item.lat]) return MAP?.setCenter([item.lon, item.lat])
} }
return message.warning('暂无位置信息') return message.warning('暂无位置信息')
...@@ -204,26 +237,48 @@ export default function MoreServicePoints() { ...@@ -204,26 +237,48 @@ export default function MoreServicePoints() {
<Layout> <Layout>
<Box> <Box>
<div className="title"> <div className="title">
<div onClick={() => mapEntiy(0)} className={`item ${mapItem === 0 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(0)}
className={`item ${mapItem === 0 ? 'active' : ''}`}
>
服务网点 服务网点
</div> </div>
<div onClick={() => mapEntiy(1)} className={`item ${mapItem === 1 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(1)}
className={`item ${mapItem === 1 ? 'active' : ''}`}
>
培训网点 培训网点
</div> </div>
<div onClick={() => mapEntiy(2)} className={`item ${mapItem === 2 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(2)}
className={`item ${mapItem === 2 ? 'active' : ''}`}
>
租赁网点 租赁网点
</div> </div>
<div onClick={() => mapEntiy(3)} className={`item ${mapItem === 3 ? 'active' : ''}`}> <div
onClick={() => mapEntiy(3)}
className={`item ${mapItem === 3 ? 'active' : ''}`}
>
机构网点 机构网点
</div> </div>
</div> </div>
<div className="content"> <div className="content">
<div className="left"> <div className="left">
<div className="left-title">服务网点</div> {mapItem === 0 && <div className="left-title">服务网点</div>}
{mapItem === 1 && <div className="left-title">培训网点</div>}
{mapItem === 2 && <div className="left-title">租赁网点</div>}
{mapItem === 3 && <div className="left-title">机构网点</div>}
<div className="left-content"> <div className="left-content">
{servicePoints.map((item: any, index: number) => ( {servicePoints.map((item: any, index: number) => (
<div key={item.id} onClick={() => moveTo(item, index)} className="left-content-item" title={item.dizhi || item.flyerName || item.uavName}> <div
{item.dizhi || item.flyerName || item.uavName} key={item.id}
onClick={() => moveTo(item, index)}
className="left-content-item"
title={
item.dizhi || item.flyerName || item.uavName || item.address
}
>
{item.dizhi || item.flyerName || item.uavName || item.address}
</div> </div>
))} ))}
</div> </div>
......
import request, { Response } from '~/api/request'; import request, { Response } from '~/api/request'
export interface ListPageJobInfoParams { export interface ListPageJobInfoParams {
pageNo:number, pageNo: number
pageSize:number, pageSize: number
appTypeId?:number, appTypeId?: number
industryId?:number, industryId?: number
inspectionName?:string, inspectionName?: string
string?:number, string?: number
regionId?:number, regionId?: number
} }
export interface JobDetail { export interface JobDetail {
id?: number, id?: number
content?: string, content?: string
contentImgs?: string[] | null, contentImgs?: string[] | null
contentVideo?: string | null, contentVideo?: string | null
star?: number, star?: number
img?: string | null, img?: string | null
type?: number, type?: number
name?:string, name?: string
time?:number | string time?: number | string
} }
export interface ListPageJobInfoResp { export interface ListPageJobInfoResp {
id: number, id: number
serviceName: string, serviceName: string
pictureUrl: string, pictureUrl: string
videoUrl: string, videoUrl: string
teamPoster:string, teamPoster: string
evaluateInfo:Array<JobDetail>, evaluateInfo: Array<JobDetail>
item:number item: number
} }
export interface GetJobServicesDetailParams { export interface GetJobServicesDetailParams {
id: number id: number
} }
export interface GetOrderTaskParams {
address?: string
city?: string
endTime: string
images?: []
inspectionId?: number
lat?: number
lon?: number
province?: string
startTime: string
taskDescription?: string
}
export default { export default {
//web-作业服务-详情 //web-作业服务-详情
listDetailJobServicesInfo: (params:GetJobServicesDetailParams): Promise<Response<ListPageJobInfoResp>> => { listDetailJobServicesInfo: (
params: GetJobServicesDetailParams
): Promise<Response<ListPageJobInfoResp>> => {
return request('/release/work/selectInspection', 'get', params) return request('/release/work/selectInspection', 'get', params)
}, },
} //web-作业服务-详情-立即预约
\ No newline at end of file insertOrderTask: (params: GetOrderTaskParams): Promise<Response<null>> => {
return request('/oms/serviceOrderTask/insertOrderTask', 'post', params)
},
}
import styled from "styled-components" import styled from 'styled-components'
export default function Style() { export default function Style() {
return <></>; return <></>
} }
export const Box = styled.div` export const Box = styled.div`
box-sizing: border-box; box-sizing: border-box;
width: 1200px; width: 1200px;
height: 1338px; height: 1338px;
margin-top: 18px; margin-top: 18px;
background-color: #FFFFFF; background-color: #ffffff;
.top{ .top {
display: flex; display: flex;
height: 300px; height: 300px;
padding: 24px 0 0 24px; padding: 24px 0 0 24px;
&-image{ &-image {
width: 300px; width: 300px;
height: 300px; height: 300px;
background-color: #F4F5F7; background-color: #f4f5f7;
border-radius: 6px; border-radius: 6px;
margin-right: 32px; margin-right: 32px;
position: relative; position: relative;
}
&-right {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
.right-top {
.title {
height: 26px;
font-size: 28px;
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI;
font-weight: bold;
color: #090909;
line-height: 26px;
} }
&-right{ .detail {
display: flex; display: flex;
flex-direction: column; margin-top: 27px;
justify-content: space-between; .tab {
height: 300px; width: 64px;
.right-top{ height: 18px;
.title{ line-height: 18px;
height: 26px; text-align: center;
font-size: 28px; background: linear-gradient(270deg, #3e62e5 0%, #3588f7 100%);
font-family: MicrosoftYaHeiUI-Bold, MicrosoftYaHeiUI; border-radius: 9px;
font-weight: bold; font-size: 12px;
color: #090909; font-family: PingFangSC-Medium, PingFang SC;
line-height: 26px; font-weight: 500;
} color: #f6fdfe;
.detail{ margin-right: 5px;
display: flex; }
margin-top: 27px; .content {
.tab{ font-size: 14px;
width: 64px; font-family: PingFangSC-Regular, PingFang SC;
height: 18px; font-weight: 400;
line-height: 18px; color: #999999;
text-align: center; line-height: 20px;
background: linear-gradient(270deg, #3E62E5 0%, #3588F7 100%); }
border-radius: 9px; }
font-size: 12px; .more {
font-family: PingFangSC-Medium, PingFang SC; display: flex;
font-weight: 500; margin-top: 25px;
color: #F6FDFE; .tab {
margin-right: 5px; width: 131px;
} height: 23px;
.content{ line-height: 23px;
font-size: 14px; text-align: center;
font-family: PingFangSC-Regular, PingFang SC; border-radius: 3px;
font-weight: 400; font-family: MicrosoftYaHei;
color: #999999; background-color: #f4f4f4;
line-height: 20px; color: #333333;
} margin-right: 8px;
} &.filst {
.more{ color: #6e411e;
display: flex; background-color: #f9e3d1;
margin-top: 25px;
.tab{
width: 131px;
height: 23px;
line-height: 23px;
text-align: center;
border-radius: 3px;
font-family: MicrosoftYaHei;
background-color: #F4F4F4;
color: #333333;
margin-right: 8px;
&.filst{
color: #6E411E;
background-color: #F9E3D1;
}
}
}
}
.right-bottom{
.bottom-btn{
.btn-left{
width: 207px;
height: 40px;
background-color: #FFE4D1;
border: 1px solid #EBBAAF;
font-family: MicrosoftYaHei;
color: #FF552D;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right{
width: 207px;
height: 40px;
background: #FF552D;
font-family: MicrosoftYaHei;
color: #FFFFFF;
letter-spacing: 1px;
}
}
} }
}
} }
} }
.tabs{ .right-bottom {
padding: 0 24px; .bottom-btn {
margin-top: 69px; .btn-left {
.teamIntroduction{ width: 207px;
width: 100%; height: 40px;
background-color: #ffe4d1;
border: 1px solid #ebbaaf;
font-family: MicrosoftYaHei;
color: #ff552d;
letter-spacing: 1px;
margin-right: 12px;
}
.btn-right {
width: 207px;
height: 40px;
background: #ff552d;
font-family: MicrosoftYaHei;
color: #ffffff;
letter-spacing: 1px;
}
} }
}
}
}
.tabs {
padding: 0 24px;
margin-top: 69px;
.teamIntroduction {
width: 100%;
}
}
.reservation {
.title {
display: flex;
align-items: center;
padding-bottom: 25px;
.left {
width: 58px;
height: 58px;
background: #d8d8d8;
border-radius: 2px;
}
.right {
margin-left: 10px;
font-weight: 700;
font-size: 16px;
}
} }
` }
\ No newline at end of file `
...@@ -42,8 +42,9 @@ export default function JobServices() { ...@@ -42,8 +42,9 @@ export default function JobServices() {
{/* <div className="com">{item.teamName}</div> */} {/* <div className="com">{item.teamName}</div> */}
</div> </div>
<div className="value-right"> <div className="value-right">
<span className="money">¥{item.price}</span>{' '} {/* <span className="money">¥{item.price}</span> */}
<span className="unit">/平</span> {/* <span className="unit">/平</span> */}
<span className="money">获取报价</span>
</div> </div>
</div> </div>
</div> </div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论