项目开发完成

src/hjm/location.tsx

@@ -0,0 +1,156 @@
+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