157 lines
4.0 KiB
TypeScript
157 lines
4.0 KiB
TypeScript
import {useEffect, useState} from "react";
|
||
import {Map} from '@tarojs/components'
|
||
import {Search} from '@nutui/icons-react-taro'
|
||
import {Button, Input} from '@nutui/nutui-react-taro'
|
||
import Taro from '@tarojs/taro'
|
||
import {useRouter} from '@tarojs/taro'
|
||
import {getHjmCar, pageHjmCar} from "@/api/hjm/hjmCar";
|
||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||
import './location.scss'
|
||
|
||
/**
|
||
* 文章终极列表
|
||
* @constructor
|
||
*/
|
||
const Location = () => {
|
||
const {params} = useRouter();
|
||
const [keywords, setKeywords] = useState<string>()
|
||
const [item, setItem] = useState<HjmCar>()
|
||
const [longitude, setLongitude] = useState<any>()
|
||
const [latitude, setLatitude] = useState<any>()
|
||
const [scale, setScale] = useState<any>(16)
|
||
|
||
const onKeywords = (keywords: string) => {
|
||
setKeywords(keywords)
|
||
}
|
||
|
||
// 获取当前位置
|
||
const getLocation = async () => {
|
||
try {
|
||
const res = await Taro.getLocation({
|
||
type: 'gcj02' //返回可以用于wx.openLocation的经纬度
|
||
})
|
||
if (res.latitude) {
|
||
setLatitude(res.latitude)
|
||
}
|
||
if (res.longitude) {
|
||
setLongitude(res.longitude)
|
||
}
|
||
console.log('当前位置：', res.latitude, res.longitude);
|
||
return res;
|
||
} catch (err) {
|
||
console.error('获取位置失败：', err);
|
||
}
|
||
}
|
||
|
||
// 打开地图选择位置
|
||
// const chooseLocation = async () => {
|
||
// try {
|
||
// const res = await Taro.chooseLocation({
|
||
// latitude, // 默认纬度
|
||
// longitude // 默认经度
|
||
// })
|
||
// console.log('选择的位置：', res);
|
||
// } catch (err) {
|
||
// console.error('选择位置失败：', err);
|
||
// }
|
||
// }
|
||
const reload = () => {
|
||
const id = Number(params.id);
|
||
setScale(16)
|
||
getLocation()
|
||
// 执行搜索
|
||
if (keywords) {
|
||
pageHjmCar({keywords}).then(res => {
|
||
if (res?.list && res?.list?.length > 0) {
|
||
const data = res?.list[0];
|
||
setItem(data)
|
||
setLatitude(data.latitude)
|
||
setLongitude(data.longitude)
|
||
setKeywords(data.code)
|
||
}
|
||
})
|
||
return false;
|
||
}
|
||
// 获取车辆信息
|
||
if (id) {
|
||
getHjmCar(id).then(data => {
|
||
setItem(data)
|
||
setLatitude(data.latitude)
|
||
setLongitude(data.longitude)
|
||
setKeywords(data.code)
|
||
})
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
reload()
|
||
}, [])
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className={'fixed z-20 top-5 left-0 w-full'}>
|
||
<div className={'px-4'}>
|
||
<div
|
||
style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
background: '#fff',
|
||
padding: '0 10px',
|
||
borderRadius: '20px'
|
||
}}
|
||
>
|
||
<Search/>
|
||
<Input
|
||
placeholder="车辆编号"
|
||
value={keywords}
|
||
onChange={onKeywords}
|
||
/>
|
||
<div
|
||
className={'flex items-center'}
|
||
>
|
||
<Button type="warning" onClick={reload}>
|
||
查询
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{item ? (
|
||
<div className={'car-info fixed bottom-0 left-0 w-full z-20 bg-white p-4'}>
|
||
<div className={'car-info-item'}>
|
||
<div className={'car-info-item-title'}>
|
||
最后更新时间：{item?.updateTime}
|
||
</div>
|
||
<div className={'car-info-item-content'}>
|
||
操作员：{item?.driver}
|
||
</div>
|
||
<div className={'car-info-item-content'}>
|
||
位置信息：{item?.address}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : ''}
|
||
|
||
<Map
|
||
id="map"
|
||
longitude={longitude}
|
||
latitude={latitude}
|
||
scale={scale}
|
||
markers={[{
|
||
id: 1,
|
||
latitude: latitude,
|
||
longitude: longitude,
|
||
// @ts-ignore
|
||
name: '位置'
|
||
}]}
|
||
onTap={() => {
|
||
console.log('map tap')
|
||
}}
|
||
style={{width: '100%', height: '100vh'}}
|
||
/>
|
||
</>
|
||
)
|
||
}
|
||
export default Location
|