Skip to content

W
web
提交 0416414f 作者: 翁进城
操作

Merge remote-tracking branch 'origin/caoyun'

上级 a4e8172f fe95c198
正在显示 包含 306 行增加 和 144 行删除
pages/flyingHandService/api/index.tsx
......@@ -29,16 +29,29 @@ export interface ListPageFlyingInfoResp {
export interface SkillsType {
type: string;
id: 1,
skillsName: string
id: number,
skillsName: string,
label:string | number,
value:string | number
}
export interface RegionResp {
"childInfo": RegionResp[] | null,
"id": number,
"level": number,
"name": string,
"pid": number
childInfo: RegionResp[] | null,
id: number,
level: number,
name: string,
pid: number
}
export interface PilotRegistrationParams {
city?: number,
drivingLicense?: number,
industryAppAuth?: Array<number>,
province?: number,
remark?: string,
telephone?: string,
uavLicenseLevelOne?: number,
uavLicenseLevelTwo?: number
}
export default {
......@@ -55,4 +68,7 @@ export default {
IndustryFlightSkills: (): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/getIndustryFlightSkills');
},
PilotRegistrations: (params:PilotRegistrationParams): Promise<Response<Array<SkillsType>>> => {
return request('/release/curriculum/pilotRegistration',"post",params);
},
}
\ No newline at end of file
pages/flyingHandService/index.page.tsx
import React, { useEffect, useState } from "react";
import { Box } from "./styled";
import Image from "next/image";
import { Button, Select, Space, Pagination, Cascader, Modal } from "antd";
import { Button, Select, Space, Pagination, Cascader, Modal , Form ,Input,Checkbox, message} from "antd";
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import Layout from "~/components/layout";
import ContentBox from "~/components/contentBox";
import api, { Flying, SkillsType, RegionResp } from "./api";
......@@ -13,6 +14,7 @@ interface FilterInfoParams {
}
export default function FlyingHandService() {
const {Option} = Select
const router = useRouter();
const [list, setList] = useState([
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/925072db-5872-44dd-8b71-e408ad3adf41.jpg",
......@@ -163,7 +165,12 @@ export default function FlyingHandService() {
setSkills(res.result || []);
});
api.IndustryFlightSkills().then((res) => {
setFlightSkillsList(res.result || []);
const list = res.result?.map((item)=>{
item.label = item.skillsName
item.value = item.id
return item
})
setFlightSkillsList(list || []);
});
}, []);
......@@ -185,18 +192,29 @@ export default function FlyingHandService() {
//报名
const [isModalOpen, setIsModalOpen] = useState(false);
const [loading, setLoading] = useState(false);
const handleOk = () => {
const handleOk = async (values: any) => {
const value = form.getFieldsValue()
setLoading(true);
setTimeout(() => {
try{
const res = await api.PilotRegistrations(value)
setLoading(false);
setIsModalOpen(false);
}, 3000);
form.resetFields()
message.success('报名成功')
}catch(e:any){
message.error(e.message)
}
};
const handleCancel = () => {
setIsModalOpen(false);
};
const [form] = Form.useForm();
const onChangeCheck = (checkedValues: CheckboxValueType[]) => {
console.log('checked = ', checkedValues);
};
return (
<Layout>
<Box>
......@@ -272,7 +290,7 @@ export default function FlyingHandService() {
getContainer={false}
footer={[
<Button
style={{ width: "100%" }}
style={{ width: "100%" ,background: "linear-gradient(135deg, #278EFF 0%, #0052DA 100%)",height: 40 }}
key="submit"
type="primary"
loading={loading}
......@@ -282,9 +300,79 @@ export default function FlyingHandService() {
</Button>,
]}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<Form
form={form}
layout="vertical"
name="application"
initialValues={{ modifier: 'public' }}
>
<div style={{display:"flex",justifyContent:"space-between"}}>
<Form.Item style={{flex:1,marginRight:16}}
name="name"
rules={[{ required: true, message: 'Please input the title of collection!' }]}
>
<Input placeholder="姓名" />
</Form.Item>
<Form.Item style={{flex:1}} name="telephone">
<Input placeholder="手机号" />
</Form.Item>
</div>
<Form.Item
name="city"
rules={[{ required: true, message: 'Please select gender!' }]}
>
<Cascader
allowClear
placeholder="地域"
className="selectItem"
size="large"
fieldNames={{
label: "name",
value: "id",
children: "childInfo",
}}
options={secondDistrictInfo}
changeOnSelect
/>
</Form.Item>
<Form.Item
name="drivingLicense"
rules={[{ required: true, message: 'Please select gender!' }]}
>
<Select placeholder="是否有驾照">
<Option value="0">是</Option>
<Option value="1">否</Option>
</Select>
</Form.Item>
<Form.Item
name="uavLicenseLevelOne"
rules={[{ required: true, message: 'Please select gender!' }]}
>
<Cascader
allowClear
placeholder="是否有无人机执照"
className="selectItem"
size="large"
fieldNames={{
label: "licenseType",
value: "id",
children: "childLicenses",
}}
options={skills}
changeOnSelect
/>
</Form.Item>
<Form.Item name="industryAppAuth" label="行业应用认证（多选）" className="collection-create-form_last-form-item">
<Checkbox.Group
options={flightSkillsList}
onChange={onChangeCheck}
/>
</Form.Item>
<Form.Item name="remark">
<Input placeholder="备注" />
</Form.Item>
</Form>
</Modal>
<ContentBox
......
pages/home/waterfallFlowBody/components/map/api/index.tsx
import request, { Response } from "~/api/request";
export interface PositioningInfoParams {
lat: number;
lon: number;
lat?: number;
lon?: number;
pageNo?:number,
pageSize?:number
}
export interface Entiy {
......@@ -19,11 +21,46 @@ export interface ListPageJobInfoResp {
locationList: Array<Entiy>;
}
export interface FlyerBitmapEntiy {
flyerName: string,
phoneNum: string,
lon: number,
lat: number,
distance: number
}
export interface UavBitmapEntiy {
uavName: string,
online: number,
lon: number,
lat: number,
distance: number,
id: string
}
export interface BitmapInfo<T> {
pageNo: number,
pageSize: number,
list: T[],
totalCount: number,
totalPage: number
}
export default {
//web-作业服务-分页
//web-首页-地图-全国点位
listPositioningInfo: (
params: PositioningInfoParams
): Promise<Response<ListPageJobInfoResp[]>> => {
return request("/release/website/getWebsiteList", "get", params);
},
//web-首页-地图-全国飞手
listFlyerBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<FlyerBitmapEntiy>>> => {
return request("/release/website/flyer/bitmap", "get", params);
},
//web-首页-地图-全国无人机
listUavBitmap: (
params: PositioningInfoParams
): Promise<Response<BitmapInfo<UavBitmapEntiy>>> => {
return request("/release/website/uav/bitmap", "get", params);
},
};
pages/home/waterfallFlowBody/components/map/index.tsx
import React, { Component, useEffect, useState } from "react";
import { message } from 'antd';
import { Box } from "./styled";
import api from "./api";
let Map: any;
import icon from './assets/icon.png'
let MAP :any ;
let Amap:any;
interface UserInfoType {
lat: number;
lon: number;
pageNo?:number,
pageSize?:number
}
export default function MapComponent() {
const [mapItem, setMapItem] = useState(0);
const [userPositioning, setUserPositioning] = useState<UserInfoType>();
const [markerCol, setMarkerCol] = useState<any>([]);
//初始化地图
const init = async () => {
try {
const AMapLoader = await import(
/* webpackChunkName: "amap" */ "@amap/amap-jsapi-loader"
);
AMapLoader.load({
await AMapLoader.load({
key: "87b424e68754efc3ba9d11ae07475091", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then(async (AMap) => {
Map = new AMap.Map("container", {
Amap = AMap
MAP = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 9, // 初始化地图级别
center: [113.93029, 22.53291], // 初始化地图中心点位置
});
console.log(Map, "MapMapMapMapMapMapMapMapMapMapMap");
//用户定位
AMap.plugin('AMap.Geolocation', function() {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：5s
position:'RB', //定位按钮的停靠位置
offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
await mapEntiy(0, AMap);
});
MAP.addControl(geolocation);
geolocation.getCurrentPosition(function(status:string,result:any){
if(status=='complete'){
onComplete(result)
}else{
onError(result)
}
});
});
//解析定位结果
async function onComplete(data:any) {
console.log('定位成功');
setUserPositioning(data.position)
// return await mapEntiy(0,data.position);
}
//解析定位错误信息
async function onError(data:any) {
message.error(`定位失败
失败原因排查信息：${data.message}
浏览器返回信息：${data.originMessage}
`)
}
await mapEntiy(0)
})
.catch((e) => {
console.log(e);
......@@ -32,118 +77,10 @@ export default function MapComponent() {
console.log(error);
}
};
useEffect(() => {
(async () => {
await init();
})();
console.log("渲染6666666666666666666666");
}, []);
const addEntiy = (AMap: any, lan: any, lon: any, dizhi: string) => {
if (!AMap) return;
// // 创建 AMap.Icon 实例：
// const Icon = new AMap.Icon({
// size: new AMap.Size(40, 50), // 图标尺寸
// image: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // Icon的图像
// imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
// imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
// });
// // 将 Icon 实例添加到 marker 上:
// const marker = new AMap.Marker({
// position: new AMap.LngLat(lan, lon),
// offset: new AMap.Pixel(-10, -10),
// icon: Icon, // 添加 Icon 实例
// title: dizhi,
// zoom: 9,
// map: Map,
// });
const marker = new AMap.Marker({
map: Map,
position: [lan, lon],
title: dizhi,
});
// //鼠标点击marker弹出自定义的信息窗体
// AMap.Event.addListener(marker, "click", function () {
// infoWindow.open(map, marker.getPosition());
// });
// //实例化信息窗体
// var title =
// '方恒假日酒店<span style="font-size:11px;color:#F00;">价格:318</span>',
// content = [];
// content.push(
// "<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
// );
// content.push("电话：010-64733333");
// content.push(
// "<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>"
// );
// var infoWindow = new AMap.InfoWindow({
// isCustom: true, //使用自定义窗体
// content: createInfoWindow(title, content.join("<br/>")),
// offset: new AMap.Pixel(16, -15),
// anchor: "bottom-center",
// });
// //构建自定义信息窗体
// function createInfoWindow(title, content) {
// var info = document.createElement("div");
// info.className = "custom-info input-card content-window-card";
// //可以通过下面的方式修改自定义窗体的宽高
// //info.style.width = "400px";
// // 定义顶部标题
// var top = document.createElement("div");
// var titleD = document.createElement("div");
// var closeX = document.createElement("img");
// top.className = "info-top";
// titleD.innerHTML = title;
// closeX.src = "https://webapi.amap.com/images/close2.gif";
// closeX.onclick = closeInfoWindow;
// top.appendChild(titleD);
// top.appendChild(closeX);
// info.appendChild(top);
// // 定义中部内容
// var middle = document.createElement("div");
// middle.className = "info-middle";
// middle.style.backgroundColor = "white";
// middle.innerHTML = content;
// info.appendChild(middle);
// // 定义底部内容
// var bottom = document.createElement("div");
// bottom.className = "info-bottom";
// bottom.style.position = "relative";
// bottom.style.top = "0px";
// bottom.style.margin = "0 auto";
// var sharp = document.createElement("img");
// sharp.src = "https://webapi.amap.com/images/sharp.png";
// bottom.appendChild(sharp);
// info.appendChild(bottom);
// return info;
// }
// //关闭信息窗体
// function closeInfoWindow() {
// map.clearInfoWindow();
// }
return marker;
};
const mapEntiy = async (index: number, AMap?: any) => {
// api
// .listPositioningInfo({
// lat: 113.944825,
// lon: 22.573664,
// })
// .then((res) => {});
setMapItem(index);
const showPositioningInfo = async (index:number,data?:UserInfoType) => {
const res = await api.listPositioningInfo({
lat: 113.944825,
lon: 22.573664,
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
});
const list = res.result
?.map((item) => item.locationList)
......@@ -152,18 +89,89 @@ export default function MapComponent() {
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(AMap, item.jd, item.wd, item.dizhi);
const EntiyValue = addEntiy(item.jd, item.wd, item.dizhi);
markerList.push(EntiyValue);
});
Map?.add(markerList);
if(markerList.length) MAP?.add(markerList);setMarkerCol([...markerList]);
}
}
console.log(Map, "地图实例++++++++++++++++++++++++++++++");
const showFlyerBitmap = async (index:number,data?:UserInfoType,pageSize?:number) => {
const res = await api.listFlyerBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo:1,
pageSize: pageSize || 10
});
const list = res.result?.list
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.flyerName);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
}
}
const showUavBitmap = async (index:number,data?:UserInfoType) => {
console.log(MAP.panTo);
const res = await api.listUavBitmap({
lon: userPositioning?.lon || data?.lon || 113.93029,
lat: userPositioning?.lat || data?.lat || 22.53291,
pageNo:1,
pageSize: 10
});
const list = res.result?.list
const markerList: any = [];
if (list?.length) {
list?.map((item) => {
const EntiyValue = addEntiy(item.lon, item.lat, item.uavName);
markerList.push(EntiyValue);
});
if(markerList.length) MAP?.add(markerList);setMarkerCol(markerList)
}
}
//添加点位
const mapEntiy = async (index: number,data?:UserInfoType) => {
MAP.remove(markerCol);
if (index && list?.length) {
Map?.panTo([list![index].jd, list![index].wd]);
if (index === 0) {
showPositioningInfo(index,data)
}else if (index === 1) {
showFlyerBitmap(index,data)
} else if(index === 2) {
showUavBitmap(index,data)
}else{
showFlyerBitmap(index,data,30)
}
setMapItem(index);
};
const addEntiy = ( lon: any, lat: any, name: string) => {
if (!Amap) return;
const icons = new Amap.Icon({
size: new Amap.Size(60, 60), // 图标尺寸
image: icon.src, // Icon的图像
imageSize: new Amap.Size(60, 60) // 根据所设置的大小拉伸或压缩图片
});
const marker = new Amap.Marker({
position: new Amap.LngLat(lon, lat),
offset: new Amap.Pixel(-10, -10),
icon: icons, // 添加 Icon 实例
title: name,
zoom: 13
});
return marker;
};
useEffect(() => {
(async () => {
await init();
})();
return MAP && MAP.destroy();
}, []);
return (
<Box className="right-box-item">
<div id="container" className="map"></div>
......
pages/home/waterfallFlowBody/index.tsx
......@@ -129,8 +129,6 @@ export default function WaterfallFlowBody() {
index: number,
option: []
) => {
console.log("跳转",value,index,option);
const [item] = option.filter((item: any) => item.name === value.value);
routerPath(index, item);
};
......@@ -156,37 +154,49 @@ export default function WaterfallFlowBody() {
const resValuelist1 = res1
.map((item, index) => {
if (item.code === "200") {
return item.result?.map((it) => {
it.type = eqApiTypeList[index];
return it;
});
}
return {}
})
.flat();
const resValuelist2 = res2
.map((item, index) => {
if (item.code === "200") {
return item.result?.map((it) => {
it.type = mallApiTypeList[index];
return it;
});
}
return {}
})
.flat();
const resValuelist3 = res3
.map((item, index) => {
if (item.code === "200") {
return item.result?.map((it) => {
it.type = flightApiTypeList[index];
it.name = it.name || it.skillsName || it.licenseType;
return it;
});
}
return {}
})
.flat();
const resValuelist4 = res4
.map((item, index) => {
if (item.code === "200") {
return item.result?.map((it) => {
it.type = jobApiTypeList[index];
console.log(it);
it.name = it.name || it.appName;
return it;
});
}
return {}
})
.flat();
......@@ -222,7 +232,6 @@ export default function WaterfallFlowBody() {
resValuelist4,
list2Option,
];
console.log(optionList);
setLeftDomList(
columns.map((item, index) => {
......@@ -333,6 +342,7 @@ export default function WaterfallFlowBody() {
};
const rightDom = (list: Array<NewsPageType>) => {
if(!list?.length) return;
return (
<div key={1009} className="right-box-item right-item">
<div className="title">
......@@ -364,6 +374,7 @@ export default function WaterfallFlowBody() {
};
const rightDom2 = (list: Array<NewsTenderType>) => {
if(!list.length) return;
return (
<div key={1008} className="right-box-item right-item-second">
<div className="item-box">
......
pages/home/waterfallFlowBody/styled.tsx
......@@ -102,6 +102,7 @@ export const Box = styled.div`
}
}
.right-item {
background-color: #fff;
border-radius: 6px;
.title {
display: flex;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论