Skip to content

W
web
提交 41d18de7 作者: 曹云
操作

改-飞手培训-地域级联选择更改为省份下拉（只显示一级菜单，省级）,价格免费改为免费听课 

删-设备租赁-筛选条件“类目”分类
添-首页-地图-更多网点-点击网点跳转并显示名称
上级 32a78480
正在显示 包含 575 行增加 和 800 行删除
pages/equipmentLeasing/index.page.tsx
import React, { useEffect, useState , useRef } from "react"; import { Pagination } from 'antd'
import { useRouter } from "next/router"; import Image from 'next/image'
import { Pagination } from "antd"; import { useRouter } from 'next/router'
import { Box } from "./styled"; import { useEffect, useRef, useState } from 'react'
import Layout from "~/components/layout"; import ContentBox from '~/components/contentBox'
import ContentBox from "~/components/contentBox"; import Filter, { AdapterResult, FilterResult } from '~/components/filter'
import Filter, { FilterResult, AdapterResult } from "~/components/filter"; import Layout from '~/components/layout'
import Image from "next/image"; import api, { Advertisement, Device } from './api'
import api, { Device, Advertisement } from "./api"; import { Box } from './styled'
// 此函数在构建时被调用 // 此函数在构建时被调用
export async function getStaticProps() { export async function getStaticProps() {
//获取筛选数据，进行静态渲染 //获取筛选数据，进行静态渲染
return { return {
props: {}, props: {}
}; }
} }
type Props = {}; type Props = {}
export default function EquipmentLeasing(props: Props) { export default function EquipmentLeasing(props: Props) {
const router = useRouter(); const router = useRouter()
const filter = useRef<any>() const filter = useRef<any>()
const [productList, setProductList] = useState( const [productList, setProductList] = useState(Array<{ element: JSX.Element }>)
Array<{ element: JSX.Element }> const [rightProductList, setRightProductList] = useState(Array<{ element: JSX.Element }>)
);
const [rightProductList, setRightProductList] = useState(
Array<{ element: JSX.Element }>
);
const leftDom = (item: Device) => { const leftDom = (item: Device) => {
return ( return (
<div <div key={item.id} className="item" onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}>
key={item.id}
className="item"
onClick={() => router.push(`/equipmentLeasing/detail/${item.id}`)}
>
<div className="item-top"> <div className="item-top">
<div className="item-top-image"> <div className="item-top-image">
<Image <Image src={item.wareImgs[0].imgUrl} alt="error" fill />
src={item.wareImgs[0].imgUrl}
alt="error"
fill
/>
</div> </div>
</div> </div>
<div className="item-bottom"> <div className="item-bottom">
...@@ -53,137 +41,119 @@ export default function EquipmentLeasing(props: Props) { ...@@ -53,137 +41,119 @@ export default function EquipmentLeasing(props: Props) {
</div> </div>
</div> </div>
</div> </div>
); )
}; }
const rightDom = (item: Advertisement) => { const rightDom = (item: Advertisement) => {
return ( return (
<div key={item.id} className="right-box-item right-item"> <div key={item.id} className="right-box-item right-item">
<Image src={item.imageUrl} alt="error" fill /> <Image src={item.imageUrl} alt="error" fill />
</div> </div>
); )
}; }
const [filterResult, setFilterResult] = useState<AdapterResult>({}); //筛选结果 const [filterResult, setFilterResult] = useState<AdapterResult>({}) //筛选结果
const [count, setCount] = useState(0); //商品总数 const [count, setCount] = useState(0) //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断 const [abort, setAbort] = useState<AbortController | null>(null) //请求中断
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
pageNo: 1, pageNo: 1,
pageSize: 15, pageSize: 15
}); //分页器对象 }) //分页器对象
const onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page, pageNo: page
}); })
}; }
useEffect(() => { useEffect(() => {
//中断前一次列表请求 //中断前一次列表请求
abort?.abort(); abort?.abort()
setAbort(new AbortController()); setAbort(new AbortController())
}, [filterResult, pageParams]); }, [filterResult, pageParams])
//端口列表请求 //端口列表请求
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)); let queryVal = JSON.parse(JSON.stringify(router.query))
const idArr = filter.current.idArr const idArr = filter.current.idArr
let rs let rs
for (const key in queryVal) { for (const key in queryVal) {
if (idArr.includes(key)) { if (idArr.includes(key)) {
rs = {[key]:router.query[key]} rs = { [key]: router.query[key] }
} }
} }
api api
.listPageDeviceInfo( .listPageDeviceInfo(
{ {
...filterResult, ...filterResult,
...pageParams, ...pageParams,
...rs, ...rs
}, },
{ {
signal: abort?.signal, signal: abort?.signal
} }
) )
.then((res) => { .then(res => {
setProductList( setProductList(
res.result?.list?.map((item) => { res.result?.list?.map(item => {
return { element: leftDom(item) }; return { element: leftDom(item) }
}) || [] }) || []
); )
setCount(res.result?.totalCount || 0); setCount(res.result?.totalCount || 0)
}); })
}, [abort]); }, [abort])
const onFilterChange = ( const onFilterChange = (filterResult: FilterResult, adapterFilterResult: AdapterResult) => {
filterResult: FilterResult, console.log('filterResult', filterResult, adapterFilterResult)
adapterFilterResult: AdapterResult setFilterResult(adapterFilterResult)
) => { }
console.log("filterResult", filterResult, adapterFilterResult);
setFilterResult(adapterFilterResult);
};
useEffect(() => { useEffect(() => {
api.listAdvertisementInfo().then((res) => { api.listAdvertisementInfo().then(res => {
setRightProductList( setRightProductList(
res.result?.map((item) => { res.result?.map(item => {
return { element: rightDom(item) }; return { element: rightDom(item) }
}) || [] }) || []
); )
}); })
}, []); }, [])
useEffect(() => { useEffect(() => {
let queryVal = JSON.parse(JSON.stringify(router.query)); let queryVal = JSON.parse(JSON.stringify(router.query))
if (router.query) { if (router.query) {
const idArr = filter.current.idArr const idArr = filter.current.idArr
for (const key in queryVal) { for (const key in queryVal) {
if (idArr.includes(key)) { if (idArr.includes(key)) {
setFilterResult({ [key]:router.query[key] }); setFilterResult({ [key]: router.query[key] })
} }
} }
} }
}, [router]); }, [router])
return ( return (
<Layout> <Layout>
<Box> <Box>
<Filter <Filter types={['地域', '设备品牌', '设备型号']} showResultItem onChange={onFilterChange} ref={filter}></Filter>
types={["地域", "设备类目", "设备品牌", "设备型号"]}
showResultItem
onChange={onFilterChange}
ref={filter}
></Filter>
<div style={{ paddingTop: 13 }}> <div style={{ paddingTop: 13 }}>
<ContentBox <ContentBox
boxIndex={5} boxIndex={5}
leftcontentstyle={{ leftcontentstyle={{
width: "1010px", width: '1010px',
margin: { top: 0, right: "12px", bottom: "12px", left: 0 }, margin: { top: 0, right: '12px', bottom: '12px', left: 0 }
}} }}
leftRenderDom={{ leftRenderDom={{
columns: productList, columns: productList,
pagination: ( pagination: (
<div className="pagination-page"> <div className="pagination-page">
<Pagination <Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} />
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div> </div>
), )
}} }}
rightRenderDom={{ columns: rightProductList }} rightRenderDom={{ columns: rightProductList }}
/> />
</div> </div>
</Box> </Box>
</Layout> </Layout>
); )
} }
pages/flyingHandService/index.page.tsx
import React, { useEffect, useState , useContext} from "react"; import { Button, Cascader, Checkbox, Form, Input, Modal, Pagination, Select, Space, message } from 'antd'
import { Box } from "./styled"; import type { CheckboxValueType } from 'antd/es/checkbox/Group'
import Image from "next/image"; import Image from 'next/image'
import { Button, Select, Space, Pagination, Cascader, Modal , Form ,Input,Checkbox, message} from "antd"; import { useRouter } from 'next/router'
import type { CheckboxValueType } from 'antd/es/checkbox/Group'; import { useContext, useEffect, useState } from 'react'
import Layout from "~/components/layout"; import ContentBox from '~/components/contentBox'
import ContentBox from "~/components/contentBox"; import Layout from '~/components/layout'
import api, { Flying, SkillsType, RegionResp } from "./api"; import { UserContext } from '~/lib/userProvider'
import { useRouter } from "next/router"; import { phoneNumber } from '~/lib/validateUtils'
import { UserContext } from "~/lib/userProvider"; import api, { Flying, RegionResp, SkillsType } from './api'
import {phoneNumber} from '~/lib/validateUtils' import { Box } from './styled'
interface FilterInfoParams { interface FilterInfoParams {
regionId?: number; regionId?: number
flightSkillsId?: number; flightSkillsId?: number
licenseId?: number; licenseId?: number
} }
export default function FlyingHandService() { export default function FlyingHandService() {
const {Option} = Select const { Option } = Select
const router = useRouter(); const router = useRouter()
const { userInfo, setNeedLogin } = useContext(UserContext); const { userInfo, setNeedLogin } = useContext(UserContext)
const [list, setList] = useState([ const [list, setList] = useState(['https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg', 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg'])
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844-1(1).jpg", const [productList, setProductList] = useState(Array<{ element: JSX.Element }>)
"https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/540X844(1).jpg", const [rightDomList, setRightDomList] = useState(Array<{ element: JSX.Element }>)
]); const [secondDistrictInfo, setSecondDistrictInfo] = useState(Array<RegionResp>)
const [productList, setProductList] = useState( const [skills, setSkills] = useState(Array<RegionResp>)
Array<{ element: JSX.Element }> const [skillsDefault, setSkillsDefault] = useState<Array<number>>()
); const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>)
const [rightDomList, setRightDomList] = useState( const [flightDefault, setFlightDefault] = useState<number | null>()
Array<{ element: JSX.Element }>
);
const [secondDistrictInfo, setSecondDistrictInfo] = useState(
Array<RegionResp>
);
const [skills, setSkills] = useState(
Array<RegionResp>
);
const [skillsDefault, setSkillsDefault] = useState<Array<number>>();
const [flightSkillsList, setFlightSkillsList] = useState(Array<SkillsType>);
const [flightDefault, setFlightDefault] = useState<number | null>();
const leftDom = (item: Flying) => { const leftDom = (item: Flying) => {
return ( return (
<div <div
className="item" className="item"
key={item.id} key={item.id}
onClick={() => { onClick={() => {
userInfo ? router.push({ userInfo
pathname: `/flyingHandService/detail/${item.id}`, ? router.push({
query: { pathname: `/flyingHandService/detail/${item.id}`,
videoUrl: item.videoUrl , query: {
curriculumName: item.curriculumName videoUrl: item.videoUrl,
}, curriculumName: item.curriculumName
}) : setNeedLogin(true) }
} } })
> : setNeedLogin(true)
}}>
<div className="item-top"> <div className="item-top">
<Image <Image src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`} alt="#" fill />
src={`${item.videoUrl}?x-oss-process=video/snapshot,t_1000,m_fast`}
alt="#"
fill
/>
</div> </div>
<div className="item-bottom"> <div className="item-bottom">
<div className="bottom-title">{item.curriculumName}</div> <div className="bottom-title">{item.curriculumName}</div>
...@@ -72,7 +58,7 @@ export default function FlyingHandService() { ...@@ -72,7 +58,7 @@ export default function FlyingHandService() {
<div className="price-right-label">{item.price}</div> <div className="price-right-label">{item.price}</div>
) : ( ) : (
<div> <div>
<span className="price-right-label">限免</span> <span className="price-right-label">免费听课</span>
{/* <span className='price-right-money'>{`¥${item.price}`}</span> */} {/* <span className='price-right-money'>{`¥${item.price}`}</span> */}
</div> </div>
)} )}
...@@ -80,64 +66,64 @@ export default function FlyingHandService() { ...@@ -80,64 +66,64 @@ export default function FlyingHandService() {
</div> </div>
</div> </div>
</div> </div>
); )
}; }
const rightDom = (item: string) => { const rightDom = (item: string) => {
return ( return (
<div className="right-box-item right-item" key={item}> <div className="right-box-item right-item" key={item}>
<Image src={item} alt="error" fill /> <Image src={item} alt="error" fill />
</div> </div>
); )
}; }
const [pageParams, setPageParams] = useState({ const [pageParams, setPageParams] = useState({
pageNo: 1, pageNo: 1,
pageSize: 12, pageSize: 12
}); //分页器对象 }) //分页器对象
const [filterParams, setFilterParams] = useState<FilterInfoParams>(); const [filterParams, setFilterParams] = useState<FilterInfoParams>()
const [count, setCount] = useState(0); //商品总数 const [count, setCount] = useState(0) //商品总数
const [abort, setAbort] = useState<AbortController | null>(null); //请求中断 const [abort, setAbort] = useState<AbortController | null>(null) //请求中断
const onPageChange = (page: number, pageSize: number) => { const onPageChange = (page: number, pageSize: number) => {
setPageParams({ setPageParams({
...pageParams, ...pageParams,
pageNo: page, pageNo: page
}); })
}; }
useEffect(() => { useEffect(() => {
//中断前一次列表请求 //中断前一次列表请求
abort?.abort(); abort?.abort()
setAbort(new AbortController()); setAbort(new AbortController())
}, [filterParams, pageParams]); }, [filterParams, pageParams])
//端口列表请求 //端口列表请求
useEffect(() => { useEffect(() => {
console.log(router); console.log(router)
let queryVal = JSON.parse(JSON.stringify(router.query)); let queryVal = JSON.parse(JSON.stringify(router.query))
for (const key in queryVal) { for (const key in queryVal) {
queryVal[key] = Number(queryVal[key]); queryVal[key] = Number(queryVal[key])
} }
api api
.listPageJobServicesInfo({ .listPageJobServicesInfo({
...pageParams, ...pageParams,
...filterParams, ...filterParams,
...queryVal, ...queryVal
}) })
.then((res) => { .then(res => {
setProductList( setProductList(
res.result?.list?.map((item) => { res.result?.list?.map(item => {
return { element: leftDom(item) }; return { element: leftDom(item) }
}) || [] }) || []
); )
setCount(res.result?.totalCount || 0); setCount(res.result?.totalCount || 0)
clearRouter() clearRouter()
}); })
}, [abort]); }, [abort])
const clearRouter = () => { const clearRouter = () => {
if (Object.keys(router.query).length) { if (Object.keys(router.query).length) {
...@@ -150,134 +136,137 @@ export default function FlyingHandService() { ...@@ -150,134 +136,137 @@ export default function FlyingHandService() {
clearRouter() clearRouter()
if (value) { if (value) {
setFlightDefault(value) setFlightDefault(value)
}else{ } else {
setFlightDefault(null) setFlightDefault(null)
} }
setFilterParams((props) => { setFilterParams(props => {
return { return {
...props, ...props,
licenseId: Number(value), licenseId: Number(value)
}; }
}); })
}; }
const onChange = (value: any) => { const onChange = (value: any) => {
clearRouter() clearRouter()
if (value) { if (value) {
setSkillsDefault([value]) setSkillsDefault([value])
}else{ } else {
setSkillsDefault([]) setSkillsDefault([])
} }
setFilterParams((props) => { setFilterParams(props => {
return { return {
...props, ...props,
flightSkillsId: (value && value[value.length - 1]) || undefined, flightSkillsId: (value && value[value.length - 1]) || undefined
}; }
}); })
}; }
const onChangeRegion = (value: any) => { const onChangeRegion = (value: any) => {
clearRouter() clearRouter()
setFilterParams((props) => { // setFilterParams((props) => {
// return {
// ...props,
// regionId: (value && value[value.length - 1]) || undefined,
// };
// });
setFilterParams(props => {
return { return {
...props, ...props,
regionId: (value && value[value.length - 1]) || undefined, regionId: value || undefined
}; }
}); })
}; }
useEffect(() => { useEffect(() => {
setRightDomList( setRightDomList(
list.map((item: string) => { list.map((item: string) => {
return { element: rightDom(item) }; return { element: rightDom(item) }
}) })
); )
api.region().then((res) => { api.region().then(res => {
setSecondDistrictInfo(res.result || []); setSecondDistrictInfo(res.result || [])
}); })
api.PilotLicense().then((res) => { api.PilotLicense().then(res => {
setSkills(res.result || []); setSkills(res.result || [])
}); })
api.IndustryFlightSkills().then((res) => { api.IndustryFlightSkills().then(res => {
const list = res.result?.map((item)=>{ const list = res.result?.map(item => {
item.label = item.skillsName item.label = item.skillsName
item.value = item.id item.value = item.id
return item return item
}) })
setFlightSkillsList(list || []); setFlightSkillsList(list || [])
}); })
}, []); }, [])
useEffect(() => { useEffect(() => {
if (Object.keys(router.query).length) { if (Object.keys(router.query).length) {
let queryVal = JSON.parse(JSON.stringify(router.query)); let queryVal = JSON.parse(JSON.stringify(router.query))
for (const key in queryVal) { for (const key in queryVal) {
queryVal[key] = Number(queryVal[key]); queryVal[key] = Number(queryVal[key])
} }
if (queryVal.flightSkillsId) { if (queryVal.flightSkillsId) {
setSkillsDefault([queryVal.flightSkillsId]) setSkillsDefault([queryVal.flightSkillsId])
}else{ } else {
setFlightDefault(queryVal.licenseId) setFlightDefault(queryVal.licenseId)
} }
setFilterParams((props) => { setFilterParams(props => {
return { return {
...props, ...props,
...queryVal, ...queryVal
}; }
}); })
} }
}, [router]); }, [router])
//报名 //报名
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false)
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false)
const handleOk = async (values: any) => { const handleOk = async (values: any) => {
form form
.validateFields() .validateFields()
.then(async (values) => { .then(async values => {
setLoading(true); setLoading(true)
try{ try {
const res = await api.PilotRegistrations({ const res = await api.PilotRegistrations({
...values, ...values,
city: values.city[values.city.length - 1] || undefined, city: values.city[values.city.length - 1] || undefined,
province: values.city[0] || undefined, province: values.city[0] || undefined,
uavLicenseLevelOne: values.uavLicenseLevelOne && values.uavLicenseLevelOne[0], uavLicenseLevelOne: values.uavLicenseLevelOne && values.uavLicenseLevelOne[0],
uavLicenseLevelTow: values.uavLicenseLevelOne && values.uavLicenseLevelOne[1], uavLicenseLevelTow: values.uavLicenseLevelOne && values.uavLicenseLevelOne[1],
uavLicenseLevelThree: values.uavLicenseLevelOne && values.uavLicenseLevelOne[2] uavLicenseLevelThree: values.uavLicenseLevelOne && values.uavLicenseLevelOne[2]
}); })
if (res.code === "200") { if (res.code === '200') {
setLoading(false); setLoading(false)
setIsModalOpen(false); setIsModalOpen(false)
form.resetFields() form.resetFields()
message.success('报名成功') message.success('报名成功')
}else{ } else {
setLoading(false); setLoading(false)
message.error(res.message) message.error(res.message)
} }
} catch (e: any) {
}catch(e:any){ message.error(e.message)
message.error(e.message) }
}
}).catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
}) })
.then(); .catch(err => {
}); message
.warning({
}; content: err.errorFields[0].errors[0]
})
.then()
})
}
const handleCancel = () => { const handleCancel = () => {
setIsModalOpen(false); setIsModalOpen(false)
}; }
const [form] = Form.useForm(); const [form] = Form.useForm()
const onChangeCheck = (checkedValues: CheckboxValueType[]) => { const onChangeCheck = (checkedValues: CheckboxValueType[]) => {
console.log('checked = ', checkedValues); console.log('checked = ', checkedValues)
}; }
return ( return (
<Layout> <Layout>
...@@ -285,7 +274,7 @@ export default function FlyingHandService() { ...@@ -285,7 +274,7 @@ export default function FlyingHandService() {
<div className="flyingTop"> <div className="flyingTop">
<div className="flyingTop-left"> <div className="flyingTop-left">
<Space> <Space>
<Cascader {/* <Cascader
allowClear allowClear
placeholder="地域" placeholder="地域"
bordered={false} bordered={false}
...@@ -299,7 +288,8 @@ export default function FlyingHandService() { ...@@ -299,7 +288,8 @@ export default function FlyingHandService() {
options={secondDistrictInfo} options={secondDistrictInfo}
onChange={onChangeRegion} onChange={onChangeRegion}
changeOnSelect changeOnSelect
/> /> */}
<Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="省份" size="large" onChange={onChangeRegion} options={secondDistrictInfo} fieldNames={{ value: 'id', label: 'name' }} allowClear />
<Cascader <Cascader
allowClear allowClear
placeholder="考证" placeholder="考证"
...@@ -307,34 +297,19 @@ export default function FlyingHandService() { ...@@ -307,34 +297,19 @@ export default function FlyingHandService() {
className="selectItem" className="selectItem"
size="large" size="large"
fieldNames={{ fieldNames={{
label: "licenseType", label: 'licenseType',
value: "id", value: 'id',
children: "childLicenses", children: 'childLicenses'
}} }}
options={skills} options={skills}
onChange={(value)=>onChange(value)} onChange={value => onChange(value)}
changeOnSelect changeOnSelect
value={skillsDefault} value={skillsDefault}
/> />
<Select <Select className="selectItem" bordered={false} popupMatchSelectWidth={false} placeholder="技能" size="large" onChange={value => onProvinceChange(value)} options={flightSkillsList} fieldNames={{ value: 'id', label: 'skillsName' }} allowClear value={flightDefault} />
className="selectItem"
bordered={false}
popupMatchSelectWidth={false}
placeholder="技能"
size="large"
onChange={(value) => onProvinceChange(value)}
options={flightSkillsList}
fieldNames={{ value: "id", label: "skillsName" }}
allowClear
value={flightDefault}
/>
</Space> </Space>
</div> </div>
<Button <Button type="primary" className="btn" onClick={() => (userInfo ? setIsModalOpen(true) : setNeedLogin(true))}>
type="primary"
className="btn"
onClick={() => userInfo ? setIsModalOpen(true) : setNeedLogin(true)}
>
报名学习课程 报名学习课程
</Button> </Button>
</div> </div>
...@@ -345,114 +320,80 @@ export default function FlyingHandService() { ...@@ -345,114 +320,80 @@ export default function FlyingHandService() {
onCancel={handleCancel} onCancel={handleCancel}
getContainer={false} getContainer={false}
footer={[ footer={[
<Button <Button style={{ width: '100%', background: 'linear-gradient(135deg, #278EFF 0%, #0052DA 100%)', height: 40 }} key="submit" type="primary" loading={loading} onClick={handleOk}>
style={{ width: "100%" ,background: "linear-gradient(135deg, #278EFF 0%, #0052DA 100%)",height: 40 }}
key="submit"
type="primary"
loading={loading}
onClick={handleOk}
>
立即报名 立即报名
</Button>, </Button>
]} ]}>
> <Form form={form} layout="vertical" name="application" initialValues={{ modifier: 'public' }}>
<Form <div style={{ display: 'flex', justifyContent: 'space-between' }}>
form={form} <Form.Item style={{ flex: 1, marginRight: 16 }} name="name" rules={[{ required: true, message: '请输入姓名!' }]}>
layout="vertical" <Input placeholder="姓名" />
name="application" </Form.Item>
initialValues={{ modifier: 'public' }} <Form.Item style={{ flex: 1 }} name="telephone" rules={[{ required: true, message: '请输入手机号!' }]}>
> <Input onInput={phoneNumber} allowClear maxLength={11} placeholder="手机号" />
<div style={{display:"flex",justifyContent:"space-between"}}> </Form.Item>
<Form.Item style={{flex:1,marginRight:16}} </div>
name="name" <Form.Item name="city" rules={[{ required: true, message: '请选择城市!' }]}>
rules={[{ required: true, message: '请输入姓名!' }]} <Cascader
>
<Input placeholder="姓名" />
</Form.Item>
<Form.Item style={{flex:1}} name="telephone" rules={[{ required: true, message: '请输入手机号!' }]}>
<Input onInput={phoneNumber} allowClear maxLength={11} placeholder="手机号" />
</Form.Item>
</div>
<Form.Item
name="city"
rules={[{ required: true, message: '请选择城市!' }]}
>
<Cascader
allowClear allowClear
placeholder="城市" placeholder="城市"
className="selectItem" className="selectItem"
fieldNames={{ fieldNames={{
label: "name", label: 'name',
value: "id", value: 'id',
children: "childInfo", children: 'childInfo'
}} }}
options={secondDistrictInfo} options={secondDistrictInfo}
changeOnSelect changeOnSelect
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item name="drivingLicense">
name="drivingLicense" <Select allowClear placeholder="是否有驾照">
> <Option value="0">是</Option>
<Select allowClear placeholder="是否有驾照"> <Option value="1">否</Option>
<Option value="0">是</Option> </Select>
<Option value="1">否</Option> </Form.Item>
</Select> <Form.Item name="uavLicenseLevelOne">
</Form.Item> <Cascader
<Form.Item
name="uavLicenseLevelOne"
>
<Cascader
allowClear allowClear
placeholder="是否有无人机执照" placeholder="是否有无人机执照"
className="selectItem" className="selectItem"
fieldNames={{ fieldNames={{
label: "licenseType", label: 'licenseType',
value: "id", value: 'id',
children: "childLicenses", children: 'childLicenses'
}} }}
options={skills} options={skills}
changeOnSelect changeOnSelect
/> />
</Form.Item> </Form.Item>
<Form.Item name="industryAppAuth" label="行业应用认证（多选）" className="collection-create-form_last-form-item"> <Form.Item name="industryAppAuth" label="行业应用认证（多选）" className="collection-create-form_last-form-item">
<Checkbox.Group <Checkbox.Group options={flightSkillsList} onChange={onChangeCheck} />
options={flightSkillsList} </Form.Item>
onChange={onChangeCheck} <Form.Item name="remark">
/> <Input placeholder="备注" />
</Form.Item> </Form.Item>
<Form.Item name="remark"> </Form>
<Input placeholder="备注" />
</Form.Item>
</Form>
</Modal> </Modal>
<ContentBox <ContentBox
boxIndex={4} boxIndex={4}
leftcontentstyle={{ leftcontentstyle={{
width: "925px", width: '925px',
margin: { top: 0, right: "10px", bottom: "10px", left: 0 }, margin: { top: 0, right: '10px', bottom: '10px', left: 0 }
}} }}
leftRenderDom={{ leftRenderDom={{
columns: productList, columns: productList,
pagination: ( pagination: (
<div className="pagination-page"> <div className="pagination-page">
<Pagination <Pagination current={pageParams.pageNo} pageSize={pageParams.pageSize} showSizeChanger={false} showQuickJumper total={count} onChange={onPageChange} hideOnSinglePage={true} style={{ marginTop: 20 }} />
current={pageParams.pageNo}
pageSize={pageParams.pageSize}
showSizeChanger={false}
showQuickJumper
total={count}
onChange={onPageChange}
hideOnSinglePage={true}
style={{ marginTop: 20 }}
/>
</div> </div>
), )
}} }}
rightRenderDom={{ columns: rightDomList }} rightRenderDom={{ columns: rightDomList }}
/> />
</Box> </Box>
</Layout> </Layout>
); )
} }
pages/home/waterfallFlowBody/api/index.ts
...@@ -45,9 +45,9 @@ export const equipmentLeasingApi = { ...@@ -45,9 +45,9 @@ export const equipmentLeasingApi = {
deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => { deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/deviceBrand"); return request("/pms/webDevice/deviceBrand");
}, },
deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => { // deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/category"); // return request("/pms/webDevice/category");
}, // },
deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => { deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
return request("/pms/webDevice/deviceModel"); return request("/pms/webDevice/deviceModel");
}, },
......
pages/home/waterfallFlowBody/components/map/moreServicePoints/index.page.tsx
import React,{useState,useEffect} from 'react' import { message } from 'antd'
import Layout from "~/components/layout"; import { useEffect, useState } from 'react'
import {Box} from './styled' import Layout from '~/components/layout'
import api from "../api"; import api from '../api'
import icon from '../assets/img.png' import icon from '../assets/img.png'
import { message } from 'antd'; import { Box } from './styled'
let MAP :any ; let MAP: any
let Amap:any; let Amap: any
interface UserInfoType { interface UserInfoType {
lat: number; lat: number
lon: number; lon: number
pageNo?:number, pageNo?: number
pageSize?:number pageSize?: number
} }
export default function MoreServicePoints() { export default function MoreServicePoints() {
const [mapItem, setMapItem] = useState(0); const [mapItem, setMapItem] = useState(0)
const [userPositioning, setUserPositioning] = useState<UserInfoType>(); const [userPositioning, setUserPositioning] = useState<UserInfoType>()
const [markerCol, setMarkerCol] = useState<any>([]); const [markerCol, setMarkerCol] = useState<any>([])
const [servicePoints, setServicePoints] = useState<any>([]); const [servicePoints, setServicePoints] = useState<any>([])
//初始化地图 //初始化地图
const init = async () => { const init = async () => {
try { try {
const AMapLoader = await import( const AMapLoader = await import(/* webpackChunkName: "amap" */ '@amap/amap-jsapi-loader')
/* 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 () {
const geolocation = new AMap.Geolocation({ const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, //是否使用高精度定位，默认:true enableHighAccuracy: true, //是否使用高精度定位，默认:true
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 ( geolocation.getCurrentPosition(function (status: string, result: any) {
status: string, console.log(result)
result: any
) {
console.log(result);
if (status == "complete") { if (status == 'complete') {
onComplete(result); onComplete(result)
} else { } else {
onError(result); onError(result)
} }
}); })
}); })
//解析定位结果 //解析定位结果
async function onComplete(data: any) { async function onComplete(data: any) {
console.log("定位成功"); console.log('定位成功')
setUserPositioning(data.position); setUserPositioning(data.position)
// return await mapEntiy(0,data.position); // return await mapEntiy(0,data.position);
} }
//解析定位错误信息 //解析定位错误信息
...@@ -74,167 +69,151 @@ export default function MoreServicePoints() { ...@@ -74,167 +69,151 @@ export default function MoreServicePoints() {
// 浏览器返回信息：${data.originMessage} // 浏览器返回信息：${data.originMessage}
// `) // `)
} }
await mapEntiy(0); await mapEntiy(0)
})
.catch(e => {
console.log(e)
}) })
.catch((e) => {
console.log(e);
});
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} }
}; }
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
}); })
const list = res.result const list = res.result
?.map((item) => item.locationList) ?.map(item => item.locationList)
.flat() .flat()
.filter((item: { dizhi: string }) => item.dizhi.includes("省")); .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.jd, item.wd, item.dizhi)
markerList.push(EntiyValue); markerList.push(EntiyValue)
}); })
setServicePoints(list); setServicePoints(list)
if (markerList.length) MAP?.add(markerList); if (markerList.length) MAP?.add(markerList)
setMarkerCol([...markerList]); setMarkerCol([...markerList])
} }
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView(); MAP?.setFitView()
}; }
const showFlyerBitmap = async ( const showFlyerBitmap = async (index: number, data?: UserInfoType, pageSize?: number) => {
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)
}); })
setServicePoints(list); setServicePoints(list)
if (markerList.length) MAP?.add(markerList); if (markerList.length) MAP?.add(markerList)
setMarkerCol(markerList); setMarkerCol(markerList)
} }
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView(); 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)
}); })
setServicePoints(list); setServicePoints(list)
if (markerList.length) MAP?.add(markerList); if (markerList.length) MAP?.add(markerList)
setMarkerCol(markerList); setMarkerCol(markerList)
} }
//自适应显示多个点位 //自适应显示多个点位
MAP?.setFitView(); MAP?.setFitView()
}; }
//添加点位 //添加点位
const mapEntiy = async (index: number, data?: UserInfoType) => { const mapEntiy = async (index: number, data?: UserInfoType) => {
MAP?.remove(markerCol); MAP?.remove(markerCol)
if (userPositioning) { if (userPositioning) {
MAP?.setCenter([userPositioning.lon, userPositioning.lat]); MAP?.setCenter([userPositioning.lon, userPositioning.lat])
} }
if (index === 0) { if (index === 0) {
showPositioningInfo(index, data); showPositioningInfo(index, data)
} else if (index === 1) { } else if (index === 1) {
showFlyerBitmap(index, data, 30); showFlyerBitmap(index, data, 30)
} else if (index === 2) { } else if (index === 2) {
showUavBitmap(index, data); showUavBitmap(index, data)
} else { } else {
showFlyerBitmap(index, data, 30); showFlyerBitmap(index, data, 30)
} }
setMapItem(index); setMapItem(index)
}; }
const addEntiy = (lon: any, lat: any, name: string) => { const addEntiy = (lon: any, lat: any, name: string) => {
if (!Amap) return; if (!Amap) return
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
}; }
const moveTo = (item: any,index:number) => { const moveTo = (item: any, index: number) => {
// const p = markerCol[index].getPosition() const p = markerCol[index].getPosition()
// 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 content: item.dizhi || item.flyerName || item.uavName
// }); })
// 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) {
return MAP?.setCenter([item.lon, item.lat]); return MAP?.setCenter([item.lon, item.lat])
} }
return message.warning("暂无位置信息"); return message.warning('暂无位置信息')
}; }
useEffect(() => { useEffect(() => {
(async () => { ;(async () => {
await init(); await init()
})(); })()
return MAP && MAP.destroy(); return MAP && MAP.destroy()
}, []); }, [])
return ( return (
<Layout> <Layout>
<Box> <Box>
<div className="title"> <div className="title">
<div <div onClick={() => mapEntiy(0)} className={`item ${mapItem === 0 ? 'active' : ''}`}>
onClick={() => mapEntiy(0)}
className={`item ${mapItem === 0 ? "active" : ""}`}
>
服务网点 服务网点
</div> </div>
<div <div onClick={() => mapEntiy(1)} className={`item ${mapItem === 1 ? 'active' : ''}`}>
onClick={() => mapEntiy(1)}
className={`item ${mapItem === 1 ? "active" : ""}`}
>
培训网点 培训网点
</div> </div>
<div <div onClick={() => mapEntiy(2)} className={`item ${mapItem === 2 ? 'active' : ''}`}>
onClick={() => mapEntiy(2)}
className={`item ${mapItem === 2 ? "active" : ""}`}
>
租赁网点 租赁网点
</div> </div>
<div <div onClick={() => mapEntiy(3)} className={`item ${mapItem === 3 ? 'active' : ''}`}>
onClick={() => mapEntiy(3)}
className={`item ${mapItem === 3 ? "active" : ""}`}
>
机构网点 机构网点
</div> </div>
</div> </div>
...@@ -242,13 +221,8 @@ export default function MoreServicePoints() { ...@@ -242,13 +221,8 @@ export default function MoreServicePoints() {
<div className="left"> <div className="left">
<div className="left-title">服务网点</div> <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 <div key={item.id} onClick={() => moveTo(item, index)} className="left-content-item" title={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.dizhi || item.flyerName || item.uavName} {item.dizhi || item.flyerName || item.uavName}
</div> </div>
))} ))}
...@@ -260,5 +234,5 @@ export default function MoreServicePoints() { ...@@ -260,5 +234,5 @@ export default function MoreServicePoints() {
</div> </div>
</Box> </Box>
</Layout> </Layout>
); )
} }
pages/home/waterfallFlowBody/index.tsx
import React, { useEffect, useState , useContext } from "react"; import { Select, Space, message } from 'antd'
import { Space, Select, Button, message } from "antd"; import { useRouter } from 'next/router'
import Image from "next/image"; import { useContext, useEffect, useState } from 'react'
import { useRouter } from "next/router"; import ContentBox from '~/components/contentBox'
import { Box } from "./styled"; import Map from './components/map'
import ContentBox from "~/components/contentBox"; import RotationChart from './components/rotationChart'
import RotationChart from "./components/rotationChart"; import { Box } from './styled'
import Map from "./components/map";
import { import { UserContext } from '~/lib/userProvider'
FilterOptionResp, import { AllType, NewsPageType, NewsTenderType, equipmentLeasingApi, flightSkillsApi, jobServicesApi, listNewsApi, mallApi } from './api'
RegionResp,
AllType,
AppType,
IndustryType,
SkillsType,
NewsPageType,
NewsTenderType,
equipmentLeasingApi,
jobServicesApi,
mallApi,
flightSkillsApi,
listNewsApi,
} from "./api";
import { BaseOptionType, DefaultOptionType } from "antd/es/select";
import { UserContext } from "~/lib/userProvider";
interface ColumnsType { interface ColumnsType {
title: string; title: string
router: string; router: string
} }
export default function WaterfallFlowBody() { export default function WaterfallFlowBody() {
const router = useRouter(); const router = useRouter()
const { userInfo, setNeedLogin } = useContext(UserContext); const { userInfo, setNeedLogin } = useContext(UserContext)
const [list, setList] = useState([ const [list, setList] = useState([
"中国人寿", '中国人寿',
"中国平安", '中国平安',
"中国人保", '中国人保',
"太平洋保险", '太平洋保险',
"新华保险", '新华保险',
"中国太平", '中国太平',
"泰康保险", '泰康保险',
"华夏保险", '华夏保险',
"阳光保险", '阳光保险',
"富德生命人寿", '富德生命人寿',
"中邮人寿", '中邮人寿',
"前海人寿", '前海人寿',
"百年人寿", '百年人寿',
"国华人寿", '国华人寿',
"工银安盛人寿", '工银安盛人寿',
"恒大人寿", '恒大人寿',
"君康人寿", '君康人寿',
"友邦保险", '友邦保险',
"建信人寿", '建信人寿',
"大家人寿", '大家人寿',
"农银人寿", '农银人寿',
"中信保城人寿", '中信保城人寿',
"合众人寿", '合众人寿'
]); ])
const [list2, setList2] = useState([ const [list2, setList2] = useState(['天目将PAAS平台', '天目将公安平台', '天目将应急平台', '天目将城管平台', '天目将电力平台', '天目将石油平台', 'SESP-U1无人机仿真软件', '云享飞服务号', '无人机商城', '云飞手', '云仓', '云享飞', '科比特智教'])
"天目将PAAS平台",
"天目将公安平台",
"天目将应急平台",
"天目将城管平台",
"天目将电力平台",
"天目将石油平台",
"SESP-U1无人机仿真软件",
"云享飞服务号",
"无人机商城",
"云飞手",
"云仓",
"云享飞",
"科比特智教",
]);
const columns = [ const columns = [
{ {
title: "无人机出租", title: '无人机出租',
router: "/equipmentLeasing", router: '/equipmentLeasing'
}, },
{ {
title: "无人机销售", title: '无人机销售',
router: "/mall", router: '/mall'
}, },
{ {
title: "无人机保险", title: '无人机保险',
router: "", router: ''
}, },
{ {
title: "无人机培训", title: '无人机培训',
router: "flyingHandService", router: 'flyingHandService'
}, },
{ {
title: "无人机服务", title: '无人机服务',
router: "/jobServices", router: '/jobServices'
}, },
{ {
title: "无人机工具软件", title: '无人机工具软件',
router: "", router: ''
}, }
]; ]
const [leftDomList, setLeftDomList] = useState( const [leftDomList, setLeftDomList] = useState(Array<{ element: JSX.Element; type?: string }>)
Array<{ element: JSX.Element; type?: string }>
);
const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>(); const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>()
const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>(); const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>()
const { deviceBrand , deviceCategory, deviceModel } = equipmentLeasingApi; const { deviceBrand, deviceModel } = equipmentLeasingApi
const eqApiTypeList = ["brandId", "categoryId", "modelId"]; const eqApiTypeList = ['brandId', 'categoryId', 'modelId']
const { listAllModel , listAllBrand , listAllCategory, listAllParts, listAllQuality } = mallApi; const { listAllModel, listAllBrand, listAllCategory, listAllParts, listAllQuality } = mallApi
const mallApiTypeList = [ const mallApiTypeList = ['brandId', 'productCategoryId', 'partsId', 'modelId', 'qualityId']
"brandId", const { IndustryFlightSkills, InDronePilotLicense } = flightSkillsApi
"productCategoryId", const flightApiTypeList = ['licenseId', 'flightSkillsId']
"partsId",
"modelId",
"qualityId",
];
const { IndustryFlightSkills , InDronePilotLicense} = flightSkillsApi;
const flightApiTypeList = ["licenseId", "flightSkillsId"];
const { listAllIndustry, listAllAppType } = jobServicesApi; const { listAllIndustry, listAllAppType } = jobServicesApi
const jobApiTypeList = ["industryId", "appTypeId"]; const jobApiTypeList = ['industryId', 'appTypeId']
const onMoreChange = ( const onMoreChange = (value: { value: string; label: number }, index: number, option: []) => {
value: { value: string; label: number }, const [item] = option.filter((item: any) => item.name === value.value)
index: number, routerPath(index, item)
option: [] }
) => {
const [item] = option.filter((item: any) => item.name === value.value);
routerPath(index, item);
};
useEffect(() => { useEffect(() => {
(async () => { ;(async () => {
let res1 = await Promise.all([ let res1 = await Promise.all([deviceBrand(), deviceModel()])
deviceBrand(), let res2 = await Promise.all([listAllBrand(), listAllCategory(), listAllParts(), listAllModel(), listAllQuality()])
deviceCategory(), let res3 = await Promise.all([IndustryFlightSkills(), InDronePilotLicense()])
deviceModel(), let res4 = await Promise.all([listAllIndustry(), listAllAppType()])
]);
let res2 = await Promise.all([
listAllBrand(),
listAllCategory(),
listAllParts(),
listAllModel(),
listAllQuality(),
]);
let res3 = await Promise.all([IndustryFlightSkills(),InDronePilotLicense()]);
let res4 = await Promise.all([listAllIndustry(), listAllAppType()]);
// let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) // let res4 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
// let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()]) // let res6 = await Promise.all([deviceCategory(),deviceBrand(),deviceModel()])
const resValuelist1 = res1 const resValuelist1 = res1
.map((item, index) => { .map((item, index) => {
if (item.code === "200") { if (item.code === '200') {
return item.result?.map((it) => { return item.result?.map(it => {
it.type = eqApiTypeList[index]; it.type = eqApiTypeList[index]
return it; return it
}); })
} }
return {} return {}
}) })
.flat(); .flat()
const resValuelist2 = res2 const resValuelist2 = res2
.map((item, index) => { .map((item, index) => {
if (item.code === "200") { if (item.code === '200') {
return item.result?.map((it) => { return item.result?.map(it => {
it.type = mallApiTypeList[index]; it.type = mallApiTypeList[index]
return it; return it
}); })
} }
return {} return {}
}) })
.flat(); .flat()
const resValuelist3 = res3 const resValuelist3 = res3
.map((item, index) => { .map((item, index) => {
if (item.code === "200") { if (item.code === '200') {
return item.result?.map((it) => { return item.result?.map(it => {
it.type = flightApiTypeList[index]; it.type = flightApiTypeList[index]
it.name = it.name || it.skillsName || it.licenseType; it.name = it.name || it.skillsName || it.licenseType
return it; return it
}); })
} }
return {} return {}
}) })
.flat(); .flat()
const resValuelist4 = res4 const resValuelist4 = res4
.map((item, index) => { .map((item, index) => {
if (item.code === "200") { if (item.code === '200') {
return item.result?.map((it) => { return item.result?.map(it => {
it.type = jobApiTypeList[index]; it.type = jobApiTypeList[index]
it.name = it.name || it.appName; it.name = it.name || it.appName
return it; return it
}); })
} }
return {} return {}
}) })
.flat(); .flat()
let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 }); let res7 = await listNewsApi.listNewsPage({ pageNo: 1, pageSize: 5 })
let res8 = await listNewsApi.listNewTenderInfo({ let res8 = await listNewsApi.listNewTenderInfo({
pageNo: 1, pageNo: 1,
pageSize: 6, pageSize: 6
}); })
const listValue: any = [ const listValue: any = [resValuelist1, resValuelist2, [], resValuelist3, resValuelist4, []]
resValuelist1, const listOption = JSON.parse(JSON.stringify(list)).map((item: string, index: number) => {
resValuelist2, return { id: index, name: item, value: index }
[], })
resValuelist3, const list2Option = JSON.parse(JSON.stringify(list2)).map((item: string, index: number) => {
resValuelist4, return { id: index, name: item, value: index }
[], })
];
const listOption = JSON.parse(JSON.stringify(list)).map(
(item: string, index: number) => {
return { id: index, name: item, value: index };
}
);
const list2Option = JSON.parse(JSON.stringify(list2)).map(
(item: string, index: number) => {
return { id: index, name: item, value: index };
}
);
const optionList = [ const optionList = [resValuelist1, resValuelist2, listOption, resValuelist3, resValuelist4, list2Option]
resValuelist1,
resValuelist2,
listOption,
resValuelist3,
resValuelist4,
list2Option,
];
setLeftDomList( setLeftDomList(
columns.map((item, index) => { columns.map((item, index) => {
if (index < 3) { if (index < 3) {
return { return {
element: leftDom(item, index, listValue, optionList[index]), element: leftDom(item, index, listValue, optionList[index]),
type: "left", type: 'left'
}; }
} }
return { return {
element: leftDom(item, index, listValue, optionList[index]), element: leftDom(item, index, listValue, optionList[index]),
type: "right", type: 'right'
}; }
}) })
); )
setRightTopDomList(rightDom(res7.result?.list!)); setRightTopDomList(rightDom(res7.result?.list!))
setRightBottomDomList(rightDom2(res8.result?.list!)); setRightBottomDomList(rightDom2(res8.result?.list!))
})(); })()
}, []); }, [])
const routerPath = (index: number, item?: AllType) => { const routerPath = (index: number, item?: AllType) => {
if ( item && (index === 0 || index === 1 || index === 3 || index === 4) ) { if (item && (index === 0 || index === 1 || index === 3 || index === 4)) {
router.push({ router.push({
pathname: columns[index].router, pathname: columns[index].router,
query: { [item?.type!]: item?.id! , name: item?.name || item?.appName || item?.skillsName }, query: { [item?.type!]: item?.id!, name: item?.name || item?.appName || item?.skillsName }
}); })
}else{ } else {
router.push({ router.push({
pathname: columns[index].router, pathname: columns[index].router
}); })
} }
}; }
const handleTenderApply = async (item:NewsTenderType)=>{ const handleTenderApply = async (item: NewsTenderType) => {
if (item.apply) return; if (item.apply) return
if (userInfo) { if (userInfo) {
let res = await listNewsApi.tenderApply({ let res = await listNewsApi.tenderApply({
tenderInfoId: item.id, tenderInfoId: item.id,
tenderNewsId: item.tenderNewsId, tenderNewsId: item.tenderNewsId,
userAccountId: userInfo.id, userAccountId: userInfo.id
})
try {
if (res.code === '200') {
message.success('申请成功')
let res8 = await listNewsApi.listNewTenderInfo({
pageNo: 1,
pageSize: 6
}) })
try{ setRightBottomDomList(rightDom2(res8.result?.list!))
if (res.code==="200") { } else {
message.success("申请成功")
let res8 = await listNewsApi.listNewTenderInfo({
pageNo: 1,
pageSize: 6,
});
setRightBottomDomList(rightDom2(res8.result?.list!));
}else{
message.error(res.message) message.error(res.message)
} }
}catch(e){ } catch (e) {
console.log(e); console.log(e)
} }
}else{ } else {
setNeedLogin(true) setNeedLogin(true)
} }
} }
const leftDom = ( const leftDom = (item: ColumnsType, index: number, resultList: Array<Array<AllType>>, option: []) => {
item: ColumnsType,
index: number,
resultList: Array<Array<AllType>>,
option: []
) => {
return ( return (
<div key={item.title} className="item"> <div key={item.title} className="item">
<div className="item-title"> <div className="item-title">
...@@ -314,13 +239,13 @@ export default function WaterfallFlowBody() { ...@@ -314,13 +239,13 @@ export default function WaterfallFlowBody() {
className="select-box" className="select-box"
placeholder="筛选" placeholder="筛选"
labelInValue labelInValue
onChange={(value) => onMoreChange(value, index, option)} onChange={value => onMoreChange(value, index, option)}
bordered={false} bordered={false}
dropdownMatchSelectWidth={false} dropdownMatchSelectWidth={false}
options={option} options={option}
fieldNames={{ fieldNames={{
value: "name", value: 'name',
label: "name", label: 'name'
}} }}
/> />
</div> </div>
...@@ -329,69 +254,42 @@ export default function WaterfallFlowBody() { ...@@ -329,69 +254,42 @@ export default function WaterfallFlowBody() {
<Space size={[15, 0]} wrap> <Space size={[15, 0]} wrap>
{index === 2 {index === 2
? list.map((item, index) => ( ? list.map((item, index) => (
<div <div key={item} className={`item-bubble ${index === 0 || index === 1 || index === 2 ? 'active' : ''}`}>
key={item}
className={`item-bubble ${
index === 0 || index === 1 || index === 2 ? "active" : ""
}`}
>
{item} {item}
</div> </div>
)) ))
: index === 5 : index === 5
? list2.map((item, index) => ( ? list2.map((item, index) => (
<div <div key={item} className={`item-bubble ${index === 0 || index === 1 || index === 2 ? 'active' : ''}`}>
key={item}
className={`item-bubble ${
index === 0 || index === 1 || index === 2 ? "active" : ""
}`}
>
{item} {item}
</div> </div>
)) ))
: resultList[index].map((item, indexer) => { : resultList[index].map((item, indexer) => {
return ( return (
<div <div key={item?.name || item?.appName || item?.skillsName} className={`item-bubble ${indexer === 0 || indexer === 1 || indexer === 2 ? 'active' : ''}`} onClick={() => routerPath(index, item)}>
key={item?.name || item?.appName || item?.skillsName}
className={`item-bubble ${
indexer === 0 || indexer === 1 || indexer === 2
? "active"
: ""
}`}
onClick={() => routerPath(index, item)}
>
{item?.name || item?.appName || item?.skillsName} {item?.name || item?.appName || item?.skillsName}
</div> </div>
); )
})} })}
</Space> </Space>
</div> </div>
</div> </div>
); )
}; }
const rightDom = (list: Array<NewsPageType>) => { const rightDom = (list: Array<NewsPageType>) => {
if(!list?.length) return; if (!list?.length) return
return ( return (
<div key={1009} className="right-box-item right-item"> <div key={1009} className="right-box-item right-item">
<div className="title"> <div className="title">
<div <div className="title-label" onClick={() => router.push('/projectInfo')}>
className="title-label"
onClick={() => router.push("/projectInfo")}
>
行业新闻 行业新闻
</div> </div>
</div> </div>
<div className="body"> <div className="body">
{list?.map((item, index) => ( {list?.map((item, index) => (
<div key={item.id} className="body-item" onClick={()=>router.push(`/projectInfo/newsArticle/${item.id}`)}> <div key={item.id} className="body-item" onClick={() => router.push(`/projectInfo/newsArticle/${item.id}`)}>
<div <div className={`item-ranking ${index === 0 ? 'one' : ''} ${index === 1 ? 'two' : ''} ${index === 2 ? 'san' : ''}`}>{index + 1}</div>
className={`item-ranking ${index === 0 ? "one" : ""} ${
index === 1 ? "two" : ""
} ${index === 2 ? "san" : ""}`}
>
{index + 1}
</div>
<div className="item-label" title={item.newsTitle}> <div className="item-label" title={item.newsTitle}>
{item.newsTitle} {item.newsTitle}
</div> </div>
...@@ -399,67 +297,59 @@ export default function WaterfallFlowBody() { ...@@ -399,67 +297,59 @@ export default function WaterfallFlowBody() {
))} ))}
</div> </div>
</div> </div>
); )
}; }
const rightDom2 = (list: Array<NewsTenderType>) => { const rightDom2 = (list: Array<NewsTenderType>) => {
if(!list?.length) return; if (!list?.length) return
return ( return (
<div key={1008} className="right-box-item right-item-second"> <div key={1008} className="right-box-item right-item-second">
<div className="item-box"> <div className="item-box">
<div className="title"> <div className="title">
<div <div className="title-label" onClick={() => router.push('/projectInfo')}>
className="title-label"
onClick={() => router.push("/projectInfo")}
>
招标快讯 招标快讯
</div> </div>
</div> </div>
<div className="body"> <div className="body">
{list?.map((item) => ( {list?.map(item => (
<div key={item.id} className="body-item"> <div key={item.id} className="body-item">
<div className="item-label" title={item.tenderContent}> <div className="item-label" title={item.tenderContent}>
{item.tenderContent} {item.tenderContent}
<div className="label-bottom">{item.tenderPrice}</div> <div className="label-bottom">{item.tenderPrice}</div>
</div> </div>
<div className={`item-right ${item.apply ? 'apply' : ''}`} onClick={()=>handleTenderApply(item)}> <div className={`item-right ${item.apply ? 'apply' : ''}`} onClick={() => handleTenderApply(item)}>
<div className="left">{`${item.tenderPrice}W`}</div> <div className="left">{`${item.tenderPrice}W`}</div>
{ {item.apply ? (
item.apply ? <div className="right">已申请</div> : <> <div className="right">已申请</div>
<div className="right">申请合作</div></> ) : (
} <>
<div className="right">申请合作</div>
</>
)}
</div> </div>
</div> </div>
))} ))}
</div> </div>
</div> </div>
</div> </div>
); )
}; }
return ( return (
<Box> <Box>
<ContentBox <ContentBox
boxIndex={1} //分为左右两列，每列一个,从上而下 boxIndex={1} //分为左右两列，每列一个,从上而下
leftcontentstyle={{ leftcontentstyle={{
width: "806px", width: '806px',
margin: { top: 0, right: "10px", bottom: "10px", left: 0 }, margin: { top: 0, right: '10px', bottom: '10px', left: 0 }
}} }}
leftWaterfallDom={{ leftWaterfallDom={{
columns: [ columns: [{ noFor: true, element: <RotationChart key={45645645} /> }, ...leftDomList]
{ noFor: true, element: <RotationChart key={45645645} /> },
...leftDomList,
],
}} }}
rightRenderDom={{ rightRenderDom={{
columns: [ columns: [{ element: <Map key={1001} /> }, { element: rightTopDomList as JSX.Element }, { element: rightBottomDomList as JSX.Element }]
{ element: <Map key={1001} /> },
{ element: rightTopDomList as JSX.Element },
{ element: rightBottomDomList as JSX.Element },
],
}} }}
/> />
</Box> </Box>
); )
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论