Skip to content

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

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

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