修复：保险支持5张图片

2025-06-14 17:12:45 +08:00
parent de0f6c43b1
commit 47b6a3d8de
17 changed files with 746 additions and 184 deletions
--- a/src/api/cms/cmsWebsiteField/index.ts
+++ b/src/api/cms/cmsWebsiteField/index.ts
@@ -2,17 +2,13 @@ import request from '@/utils/request';
 import type { ApiResult, PageResult } from '@/api/index';
 import type {CmsWebsiteField, CmsWebsiteFieldParam, Config} from './model';

-const config = useRuntimeConfig();
-
 /**
 * 分页查询应用参数
 */
 export async function pageCmsWebsiteField(params: CmsWebsiteFieldParam) {
  const res = await request.get<ApiResult<PageResult<CmsWebsiteField>>>(
    '/cms/cms-website-field/page',
-    {
-      params
-    }
+    params
  );
  if (res.code === 0) {
    return res.data;
@@ -26,9 +22,7 @@ export async function pageCmsWebsiteField(params: CmsWebsiteFieldParam) {
 export async function listCmsWebsiteField(params?: CmsWebsiteFieldParam) {
  const res = await request.get<ApiResult<CmsWebsiteField[]>>(
    '/cms/cms-website-field',
-    {
-      params
-    }
+    params
  );
  if (res.code === 0 && res.data) {
    return res.data;
--- a/src/api/cms/cmsWebsiteField/model/index.ts
+++ b/src/api/cms/cmsWebsiteField/model/index.ts
@@ -1,4 +1,4 @@
-import type { PageParam } from '@/api';
+import type { PageParam } from '@/api/index';

 /**
 * 应用参数
@@ -35,6 +35,7 @@ export interface CmsWebsiteField {
 */
 export interface CmsWebsiteFieldParam extends PageParam {
  id?: number;
+  name?: string;
  keywords?: string;
 }

--- a/src/api/hjm/hjmBxLog/model/index.ts
+++ b/src/api/hjm/hjmBxLog/model/index.ts
@@ -15,7 +15,7 @@ export interface HjmBxLog {
  // 车辆编号
  carNo?: string;
  // 保险图片
-  image?: string;
+  image?: any;
  // 排序(数字越小越靠前)
  sortNumber?: number;
  // 备注
--- a/src/api/hjm/hjmCar/model/index.ts
+++ b/src/api/hjm/hjmCar/model/index.ts
@@ -73,5 +73,6 @@ export interface HjmCarParam extends PageParam {
  status?: number;
  latitude?: number;
  longitude?: number;
+  deleted?: number;
  keywords?: string;
 }
--- a/src/api/hjm/hjmGpsLog/index.ts
+++ b/src/api/hjm/hjmGpsLog/index.ts
@@ -0,0 +1,101 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api/index';
+import type { HjmGpsLog, HjmGpsLogParam } from './model';
+
+/**
+ * 分页查询黄家明_gps轨迹
+ */
+export async function pageHjmGpsLog(params: HjmGpsLogParam) {
+  const res = await request.get<ApiResult<PageResult<HjmGpsLog>>>(
+    '/hjm/hjm-gps-log/page',
+    params
+  );
+  if (res.code === 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 查询黄家明_gps轨迹列表
+ */
+export async function listHjmGpsLog(params?: HjmGpsLogParam) {
+  const res = await request.get<ApiResult<HjmGpsLog[]>>(
+    '/hjm/hjm-gps-log',
+    params
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 添加黄家明_gps轨迹
+ */
+export async function addHjmGpsLog(data: HjmGpsLog) {
+  const res = await request.post<ApiResult<unknown>>(
+    '/hjm/hjm-gps-log',
+    data
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 修改黄家明_gps轨迹
+ */
+export async function updateHjmGpsLog(data: HjmGpsLog) {
+  const res = await request.put<ApiResult<unknown>>(
+    '/hjm/hjm-gps-log',
+    data
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 删除黄家明_gps轨迹
+ */
+export async function removeHjmGpsLog(id?: number) {
+  const res = await request.del<ApiResult<unknown>>(
+    '/hjm/hjm-gps-log/' + id
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 批量删除黄家明_gps轨迹
+ */
+export async function removeBatchHjmGpsLog(data: (number | undefined)[]) {
+  const res = await request.del<ApiResult<unknown>>(
+    '/hjm/hjm-gps-log/batch',
+    {
+      data
+    }
+  );
+  if (res.code === 0) {
+    return res.message;
+  }
+  return Promise.reject(new Error(res.message));
+}
+
+/**
+ * 根据id查询黄家明_gps轨迹
+ */
+export async function getHjmGpsLog(id: number) {
+  const res = await request.get<ApiResult<HjmGpsLog>>(
+    '/hjm/hjm-gps-log/' + id
+  );
+  if (res.code === 0 && res.data) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.message));
+}
--- a/src/api/hjm/hjmGpsLog/model/index.ts
+++ b/src/api/hjm/hjmGpsLog/model/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam } from '@/api/index';
+
+/**
+ * 黄家明_gps轨迹
+ */
+export interface HjmGpsLog {
+  // 自增ID
+  id?: number;
+  // 车辆ID
+  carId?: number;
+  // gps编号
+  gpsNo?: string;
+  // 经度
+  longitude?: string;
+  // 纬度
+  latitude?: string;
+  // 时间
+  ddmmyy?: string;
+  // 时分秒
+  hhmmss?: string;
+  // 备注
+  comments?: string;
+  // 状态, 0正常, 1冻结
+  status?: number;
+  // 租户id
+  tenantId?: number;
+  // 创建时间
+  createTime?: string;
+}
+
+/**
+ * 黄家明_gps轨迹搜索条件
+ */
+export interface HjmGpsLogParam extends PageParam {
+  id?: number;
+  gpsNo?: string;
+  ddmmyy?: string;
+  hhmmss?: string;
+  keywords?: string;
+}
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -48,6 +48,7 @@ export default defineAppConfig({
        "exam/exam",
        "bx/bx",
        "bx/bx-add",
+        "trajectory/trajectory"
        // "bx/bx-list",
        // "question/detail"
      ]
--- a/src/hjm/BestSellers.tsx
+++ b/src/hjm/BestSellers.tsx
@@ -17,7 +17,7 @@ const BestSellers = (props: any) => {
        {props.data?.map((item, index) => {
          return (
            <div key={index} className={'flex bg-white rounded-lg w-full p-3 mb-3'}
-                 onClick={() => Taro.navigateTo({url: '/hjm/query?id=' + item.id})}>
+                 onClick={() => Taro.navigateTo({url: '/hjm/query?id=' + item.code})}>
              <Image src={item.image} mode={'scaleToFill'}
                     radius="10%" width="80" height="80"/>
              <div className={'mx-3 flex flex-col'}>
--- a/src/hjm/bx/bx-add.tsx
+++ b/src/hjm/bx/bx-add.tsx
@@ -1,32 +1,38 @@
-import {useEffect, useState, useCallback} from "react";
+import {useEffect, useState} from "react";
 import Taro from '@tarojs/taro'
 import {
-  Image,
  Button,
  TextArea,
  Cell,
  Loading,
  Space
 } from '@nutui/nutui-react-taro'
-import {Camera, Truck} from '@nutui/icons-react-taro'
+import {Truck} from '@nutui/icons-react-taro'
 import {addHjmBxLog} from "@/api/hjm/hjmBxLog";
 import {pageHjmCar} from "@/api/hjm/hjmCar";
-import {uploadFile} from "@/api/system/file";
 import {HjmBxLog} from "@/api/hjm/hjmBxLog/model";
 import {HjmCar} from "@/api/hjm/hjmCar/model";
+import {listCmsWebsiteField} from "@/api/cms/cmsWebsiteField";
+import {CmsWebsiteField} from "@/api/cms/cmsWebsiteField/model";
+
+// 图片数据接口
+interface UploadedImageData {
+  url: string;
+}

 /**
 * 一键报险 - 添加报险记录页面
 */
 function BxAdd() {
  const [loading, setLoading] = useState<boolean>(false)
-  const [uploading, setUploading] = useState<boolean>(false)
+  const [bxFiled, setBxFiled] = useState<CmsWebsiteField>()
+  const [bxFiled2, setBxFiled2] = useState<CmsWebsiteField>()
  const [carInfo, setCarInfo] = useState<HjmCar | null>(null)
-  const [lastClickTime, setLastClickTime] = useState<number>(0)
+  const [fileList, setFileList] = useState<any[]>([]) // 图片文件列表
  const [formData, setFormData] = useState<HjmBxLog>({
    carId: undefined,
    accidentType: undefined,
-    image: '',
+    image: undefined,
    comments: '',
    status: 0 // 0: 待审核, 1: 已通过, 2: 已驳回
  })
@@ -46,6 +52,16 @@ function BxAdd() {
  // 初始化页面数据
  const initPageData = async () => {
    try {
+      listCmsWebsiteField({}).then(data => {
+        const bxPhone = data.find(item => item.name === 'bxPhone');
+        const bxPhone2 = data.find(item => item.name === 'bxPhone2');
+        if (bxPhone) {
+          setBxFiled(bxPhone);
+        }
+        if (bxPhone2) {
+          setBxFiled2(bxPhone2);
+        }
+      })
      pageHjmCar({driverId: Taro.getStorageSync('UserId')}).then(res => {
        const car = res?.list[0];
        setLoading(true)
@@ -76,77 +92,130 @@ function BxAdd() {
    }
  }

-  // 拍照上传 - 使用 useCallback 防止重复触发
-  const takePhoto = useCallback((event?: any) => {
-    // 阻止事件冒泡
-    if (event) {
-      event.stopPropagation()
-      event.preventDefault()
-    }
-
-    // 防抖：防止快速连续点击
-    const now = Date.now()
-    if (now - lastClickTime < 1000) { // 1秒内不允许重复点击
-      console.log('点击过于频繁，请稍候...')
-      return
-    }
-    setLastClickTime(now)
-
-    // 防止重复点击
-    if (uploading) {
-      console.log('正在上传中，请稍候...')
+  // 选择并上传图片
+  const handleChooseImage = () => {
+    if (fileList.length >= 5) {
      Taro.showToast({
-        title: '正在上传中...',
-        icon: 'loading'
+        title: '最多只能上传5张图片',
+        icon: 'none'
      })
      return
    }

-    console.log('开始拍照上传...')
-
    Taro.chooseImage({
-      count: 1,
+      count: 5 - fileList.length, // 剩余可选择的数量
      sizeType: ['compressed'],
-      sourceType: ['camera'],
-      success: async (res) => {
-        try {
-          setUploading(true)
-          console.log('选择图片成功:', res.tempFilePaths[0])
+      sourceType: ['album', 'camera'],
+      success: (res) => {
+        console.log('选择图片成功:', res)

-          // 这里应该调用实际的上传接口
-          const uploadResult = await uploadFile()
-
-          setFormData(prev => ({
-            ...prev,
-            image: uploadResult.url || res.tempFilePaths[0]
-          }))
-
-          Taro.showToast({
-            title: '照片上传成功',
-            icon: 'success'
-          })
-        } catch (error) {
-          console.error('上传失败:', error)
-          Taro.showToast({
-            title: '上传失败，请重试',
-            icon: 'error'
-          })
-        } finally {
-          setUploading(false)
-        }
+        // 逐个上传选中的图片
+        res.tempFilePaths.forEach((filePath, index) => {
+          uploadSingleImage(filePath, index)
+        })
      },
-      fail: (error) => {
-        console.error('选择图片失败:', error)
+      fail: (err) => {
+        console.log('选择图片失败:', err)
        Taro.showToast({
          title: '选择图片失败',
          icon: 'error'
        })
-        setUploading(false)
      }
    })
-  }, [uploading, lastClickTime])
+  }

-  // 提交表单
+  // 上传单张图片
+  const uploadSingleImage = (filePath: string, index: number) => {
+    const TenantId = Taro.getStorageSync('TenantId')
+
+    Taro.uploadFile({
+      url: 'https://server.gxwebsoft.com/api/oss/upload',
+      filePath: filePath,
+      name: 'file',
+      header: {
+        'content-type': 'application/json',
+        TenantId
+      },
+      success: (res) => {
+        try {
+          const data = JSON.parse(res.data);
+          console.log('上传成功', data)
+          if (data.code === 0) {
+            // 更新文件列表
+            const newFile = {
+              name: `图片${Date.now()}_${index}`,
+              url: data.data.url,
+              status: 'success',
+              message: '上传成功',
+              type: 'image',
+              uid: `${Date.now()}_${index}`,
+            }
+
+            setFileList(prev => {
+              const newList = [...prev, newFile]
+              // 同时更新表单数据 - 使用JSON格式存储
+              const imageData: UploadedImageData[] = newList.map(f => ({
+                url: f.url
+              }))
+              setFormData(prevForm => ({
+                ...prevForm,
+                image: JSON.stringify(imageData)
+              }))
+              return newList
+            })
+
+            Taro.showToast({
+              title: '上传成功',
+              icon: 'success'
+            })
+          } else {
+            Taro.showToast({
+              title: data.message || '上传失败',
+              icon: 'error'
+            })
+          }
+        } catch (error) {
+          console.error('解析响应失败:', error)
+          Taro.showToast({
+            title: '上传失败',
+            icon: 'error'
+          })
+        }
+      },
+      fail: (err) => {
+        console.log('上传请求失败', err);
+        Taro.showToast({
+          title: '上传失败',
+          icon: 'error'
+        })
+      }
+    })
+  }
+
+  // 处理文件删除
+  const handleFileRemove = (file: any) => {
+    console.log('删除文件:', file)
+    const newFileList = fileList.filter(f => f.uid !== file.uid)
+    setFileList(newFileList)
+
+    // 更新表单数据 - 使用JSON格式存储
+    if (newFileList.length === 0) {
+      setFormData(prev => ({
+        ...prev,
+        image: undefined
+      }))
+    } else {
+      const imageData: UploadedImageData[] = newFileList.map(f => ({
+        url: f.url
+      }))
+      setFormData(prev => ({
+        ...prev,
+        image: JSON.stringify(imageData)
+      }))
+    }
+  }
+
+// 提交表单
  const handleSubmit = async () => {
    // 表单验证
    if (!formData.carId) {
@@ -165,9 +234,9 @@ function BxAdd() {
      return
    }

-    if (!formData.image) {
+    if (!formData.image || fileList.length === 0) {
      Taro.showToast({
-        title: '请上传事故现场照片',
+        title: '请上传现场照片',
        icon: 'none'
      })
      return
@@ -183,6 +252,25 @@ function BxAdd() {
        comments: `${accidentDescription || '无'}`
      }

+      console.log('提交的图片数据:', formData.image)
+      console.log('完整提交数据:', submitData)
+
+      // 解析JSON格式的图片数据示例
+      if (formData.image) {
+        try {
+          const parsedImages: UploadedImageData[] = JSON.parse(formData.image)
+          console.log('解析后的图片数据:', parsedImages)
+          console.log('图片数量:', parsedImages.length)
+          parsedImages.forEach((img, index) => {
+            console.log(`图片${index + 1}:`, {
+              url: img.url
+            })
+          })
+        } catch (error) {
+          console.error('解析图片数据失败:', error)
+        }
+      }
+
      await addHjmBxLog(submitData)

      Taro.showToast({
@@ -206,7 +294,9 @@ function BxAdd() {
  }

  useEffect(() => {
-    initPageData()
+    initPageData().then(r => {
+      console.log(r,'rr')
+    })
  }, [])

  if (loading && !carInfo) {
@@ -228,6 +318,16 @@ function BxAdd() {
      minHeight: '100vh',
      paddingBottom: '80px'
    }}>
+      <div style={{
+        backgroundColor: '#fff',
+        margin: '16px',
+        borderRadius: '12px',
+        padding: '16px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
+      }}>
+        {bxFiled && (<div>{bxFiled.comments}：{bxFiled.value}</div>)}
+        {bxFiled2 && (<div>{bxFiled2.comments}：{bxFiled2.value}</div>)}
+      </div>
      {/* 车辆信息卡片 */}
      {carInfo && (
        <div style={{
@@ -264,6 +364,95 @@ function BxAdd() {
        </div>
      )}

+
+
+      {/* 现场照片 */}
+      <div style={{
+        backgroundColor: '#fff',
+        margin: '0 16px 16px',
+        borderRadius: '12px',
+        padding: '16px'
+      }}>
+        <div style={{marginBottom: '12px'}}>
+          <span style={{fontSize: '16px', fontWeight: 'bold'}}>现场照片</span>
+          <span style={{color: '#ff4d4f', fontSize: '12px', marginLeft: '8px'}}>*必填（最多5张）</span>
+          {fileList.length > 0 && (
+            <span style={{color: '#52c41a', fontSize: '12px', marginLeft: '8px'}}>
+              已上传{fileList.length}张
+            </span>
+          )}
+        </div>
+        <div style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '12px'
+        }}>
+          {/* 显示已上传的图片 */}
+          {fileList.map((file) => (
+            <div key={file.uid} style={{
+              position: 'relative',
+              width: '100px',
+              height: '100px',
+              borderRadius: '8px',
+              overflow: 'hidden',
+              border: '1px solid #d9d9d9'
+            }}>
+              <img
+                src={file.url}
+                alt={file.name}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover'
+                }}
+              />
+              <Button
+                size="small"
+                type="default"
+                style={{
+                  position: 'absolute',
+                  top: '-8px',
+                  right: '-8px',
+                  width: '24px',
+                  height: '24px',
+                  borderRadius: '12px',
+                  fontSize: '12px',
+                  minWidth: '24px',
+                  padding: 0
+                }}
+                onClick={() => handleFileRemove(file)}
+              >
+                ×
+              </Button>
+            </div>
+          ))}
+
+          {/* 添加图片按钮 */}
+          {fileList.length < 5 && (
+            <Button
+              size="small"
+              onClick={handleChooseImage}
+              style={{
+                width: '100px',
+                height: '100px',
+                borderRadius: '8px',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                border: '2px dashed #d9d9d9',
+                backgroundColor: '#fafafa'
+              }}
+            >
+              <span style={{fontSize: '24px', color: '#d9d9d9'}}>+</span>
+              <span style={{fontSize: '12px', marginTop: '4px', color: '#666'}}>
+                添加图片
+              </span>
+            </Button>
+          )}
+        </div>
+      </div>
+
      {/* 事故信息表单 */}
      <div style={{
        backgroundColor: '#fff',
@@ -277,9 +466,7 @@ function BxAdd() {
        }}>
          <span style={{fontSize: '16px', fontWeight: 'bold'}}>事故信息</span>
        </div>
-
        <Cell.Group>
-          {/* 事故类型 */}
          <Cell
            title="事故类型"
            description={accidentType || '请选择事故类型'}
@@ -292,16 +479,6 @@ function BxAdd() {
              })
            }}
          />
-
-          {/* 事故时间 */}
-          {/*<Cell*/}
-          {/*  title="事故时间"*/}
-          {/*  description={accidentTime ? new Date(accidentTime).toLocaleString() : '请选择事故时间'}*/}
-          {/*  onClick={() => {*/}
-          {/*    const now = new Date()*/}
-          {/*    setAccidentTime(now.toISOString().slice(0, 16))*/}
-          {/*  }}*/}
-          {/*/>*/}
        </Cell.Group>
      </div>

@@ -323,79 +500,6 @@ function BxAdd() {
        />
      </div>

-      {/* 现场照片 */}
-      <div style={{
-        backgroundColor: '#fff',
-        margin: '0 16px 16px',
-        borderRadius: '12px',
-        padding: '16px'
-      }}>
-        <div style={{marginBottom: '12px'}}>
-          <span style={{fontSize: '16px', fontWeight: 'bold'}}>现场照片</span>
-          <span style={{color: '#ff4d4f', fontSize: '12px', marginLeft: '8px'}}>*必填</span>
-        </div>
-
-        <div style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          gap: '12px'
-        }}>
-          {formData.image && (
-            <div style={{position: 'relative'}}>
-              <Image
-                src={formData.image}
-                width="100"
-                height="100"
-                radius="8px"
-                mode="aspectFill"
-              />
-              <Button
-                size="small"
-                type="default"
-                style={{
-                  position: 'absolute',
-                  top: '-8px',
-                  right: '-8px',
-                  width: '24px',
-                  height: '24px',
-                  borderRadius: '12px',
-                  fontSize: '12px'
-                }}
-                onClick={() => setFormData(prev => ({...prev, image: ''}))}
-              >
-                ×
-              </Button>
-            </div>
-          )}
-
-          {!formData.image && (
-            <Button
-              size="small"
-              loading={uploading}
-              disabled={uploading}
-              onClick={takePhoto}
-              style={{
-                width: '100px',
-                height: '100px',
-                borderRadius: '8px',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                border: '2px dashed #d9d9d9',
-                opacity: uploading ? 0.6 : 1,
-                cursor: uploading ? 'not-allowed' : 'pointer'
-              }}
-            >
-              <Camera size={24}/>
-              <span style={{fontSize: '12px', marginTop: '4px'}}>
-                {uploading ? '上传中...' : '拍照'}
-              </span>
-            </Button>
-          )}
-        </div>
-      </div>
-
      {/* 提交按钮 */}
      <div style={{
        position: 'fixed',
--- a/src/hjm/list.tsx
+++ b/src/hjm/list.tsx
@@ -20,7 +20,7 @@ const List = () => {

  const reload = () => {
    // 获取车辆列表
-    pageHjmCar({status: 1, keywords}).then(res => {
+    pageHjmCar({status: 1,deleted: 0, keywords}).then(res => {
      setList(res?.list || [])
    })
  }
--- a/src/hjm/location.tsx
+++ b/src/hjm/location.tsx
@@ -140,9 +140,9 @@ const Location = () => {
            <div className={'car-info-item-content'}>
              操作员：{item?.driver}
            </div>
-            <div className={'car-info-item-content pr-6'}>
-              位置信息：{item?.address}
-            </div>
+            {/*<div className={'car-info-item-content pr-6'}>*/}
+            {/*  位置信息：{item?.address}*/}
+            {/*</div>*/}
          </div>
        </div>
      ) : ''}
--- a/src/hjm/query.tsx
+++ b/src/hjm/query.tsx
@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 import Taro, {useRouter} from '@tarojs/taro'
-import {getHjmCar, pageHjmCar, updateHjmCar} from "@/api/hjm/hjmCar";
+import {getHjmCarByCode, pageHjmCar, updateHjmCar} from "@/api/hjm/hjmCar";
 import {HjmCar} from "@/api/hjm/hjmCar/model";
 import './location.scss'
 import {copyText} from "@/utils/common";
@@ -168,7 +168,7 @@ const Query = () => {
  //   }
  // }
  const reload = () => {
-    const id = Number(params.id);
+    const code = params.id;
    // 获取数据字典
    pageDictData({dictCode: 'InsuranceStatus'}).then(res => {
      setDict(res?.list || [])
@@ -192,8 +192,8 @@ const Query = () => {
      }
    })
    // 获取车辆信息
-    if (id) {
-      getHjmCar(id).then(data => {
+    if (code) {
+      getHjmCarByCode(code).then(data => {
        if(data){
          setFormData(data)
          setKeywords(data.code)
@@ -273,7 +273,7 @@ const Query = () => {
              </Form.Item>
              <Form.Item
                label={'电子围栏'}
-                name="fence"
+                name="fenceName"
                rules={[{message: '电子围栏'}]}
              >
                <Input placeholder="电子围栏" type="text"/>
@@ -370,20 +370,28 @@ const Query = () => {
              GPS编号：{FormData?.gpsNo}
            </Cell>
            <Cell className={'car-info-item-content'}>
-              电子围栏：{FormData?.fenceName}
+              电子围栏：{FormData.fenceName}
            </Cell>
-            <Button nativeType="submit" block type="info" onClick={
-              () => {
-                Taro.navigateTo({
-                  url: `/hjm/location?id=${FormData?.id}`
-                })
-              }
-            }>
-              查看定位
-            </Button>
-            {/*<Cell className={'car-info-item-content'}>*/}
-            {/*  状态：{FormData?.status == 1 ? '已安装' : '未安装'}*/}
-            {/*</Cell>*/}
+            <div className={'flex justify-around'}>
+              <Button nativeType="submit" type="info" onClick={
+                () => {
+                  Taro.navigateTo({
+                    url: `/hjm/location?id=${FormData?.id}`
+                  })
+                }
+              }>
+                查看定位
+              </Button>
+              <Button nativeType="submit" type="warning" onClick={
+                () => {
+                  Taro.navigateTo({
+                    url: `/hjm/trajectory/trajectory?id=${FormData?.id}`
+                  })
+                }
+              }>
+                播放轨迹
+              </Button>
+            </div>
          </div>
        </div>
      ) : ''}
--- a/src/hjm/trajectory/trajectory.config.ts
+++ b/src/hjm/trajectory/trajectory.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '查看轨迹'
+})
--- a/src/hjm/trajectory/trajectory.scss
+++ b/src/hjm/trajectory/trajectory.scss
@@ -0,0 +1,4 @@
+page {
+  //background: url("https://oss.wsdns.cn/20250414/58cac36d806a40e298def726bcd9e44b.jpeg");
+  //background-size: cover;
+}
--- a/src/hjm/trajectory/trajectory.tsx
+++ b/src/hjm/trajectory/trajectory.tsx
@@ -0,0 +1,266 @@
+import {useEffect, useState} from "react";
+import {Map} from '@tarojs/components'
+import Taro, {useRouter} from '@tarojs/taro'
+import {DatePicker, Button, type PickerOption} from '@nutui/nutui-react-taro'
+import {getHjmCar, getHjmCarByCode} from "@/api/hjm/hjmCar";
+import {HjmCar} from "@/api/hjm/hjmCar/model";
+import './trajectory.scss'
+import {pageHjmGpsLog} from "@/api/hjm/hjmGpsLog";
+import {formatCurrentDate, getCurrentHour} from "@/utils/time";
+
+/**
+ * 文章终极列表
+ * @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 [showCircles, setShowCircles] = useState<boolean>(false)
+  const [points, setPoints] = useState<any[]>([])
+  const [hjmGpsLog, setHjmGpsLog] = useState<any[]>([])
+  const [dateTime, setDateTime] = useState<string>('')
+  const [ddmmyy, setDdmmyy] = useState<string>(formatCurrentDate())
+  const [hhmmss, setHhmmss] = useState<string>(getCurrentHour())
+  const [show1, setShow1] = useState(false)
+  const [value, setValue] = useState(new Date())
+  const defaultValue = new Date()
+  const defaultDescription = `${defaultValue.getFullYear()}年${defaultValue.getMonth() + 1}月${defaultValue.getDate()}日`
+  const [desc1, setDesc1] = useState(defaultDescription)
+  // 选择时分秒
+  const startDate = new Date(2025, 0, 1)
+  const endDate = new Date(2030, 10, 1)
+  const [show, setShow] = useState(false)
+  const [desc, setDesc] = useState<string>()
+
+  // 通用的坐标字符串转数组函数
+  const parseCoordinateString = (coordStr: string) => {
+    if (!coordStr) return {points: []};
+
+    try {
+      // 分割坐标点
+      const coordPairs = coordStr.split(';');
+
+      // 转为多边形点数组
+      const points = coordPairs.map(coord => {
+        const [lat, lng] = coord.split(',');
+        return {
+          latitude: parseFloat(lat),
+          longitude: parseFloat(lng)
+        }
+      });
+
+      return {points};
+    } catch (error) {
+      console.error('解析坐标字符串失败:', error);
+      return {points: []};
+    }
+  }
+
+  // const onKeywords = (keywords: string) => {
+  //   setKeywords(keywords)
+  // }
+
+  // @ts-ignore
+  const confirm = (values: any, options: PickerOption[]) => {
+    // 截取字符串后2位
+    console.log(`${String(values[2]).padStart(2, '0')}${String(values[1]).padStart(2, '0')}${String(values[0]).slice(-2)}`, 'options')
+    setDdmmyy(`${String(values[2]).padStart(2, '0')}${String(values[1]).padStart(2, '0')}${String(values[0]).slice(-2)}`);
+    setDesc1(options.map((option) => option.text).join(' '))
+    // const v = values.join('-')
+    // setValue(v)
+    getLocationRecord(item)
+  }
+
+  const onAfter = () => {
+    setHhmmss(`${String(Number(hhmmss) + 1).padStart(2, '0')}`)
+    getLocationRecord(item)
+  }
+  const onBefore = () => {
+    setHhmmss(`${String(Number(hhmmss) - 1).padStart(2, '0')}`)
+    getLocationRecord(item)
+  }
+  // const change = (options: PickerOption[], values: (string | number)[]) => {
+  //   // console.log(values,'values')
+  //   // 截取字符串后2位
+  //   // console.log(`${String(values[2]).padStart(2, '0')}${String(values[1]).padStart(2, '0')}${String(values[0]).slice(-2)}`,'options')
+  //   setDdmmyy(`${String(values[2]).padStart(2, '0')}${String(values[1]).padStart(2, '0')}${String(values[0]).slice(-2)}`);
+  //   // const v = values.join('-')
+  //   // if (v) {
+  //   //   setValue(v)
+  //   // }
+  //   // setDesc1(options.map((option) => option.text).join(''))
+  // }
+
+  const getLocationRecord = (data?: HjmCar) => {
+    const where = {
+      gpsNo: data?.gpsNo,
+      ddmmyy: ddmmyy,
+      hhmmss: hhmmss,
+      limit: 200
+    }
+    Taro.showLoading({title: '加载中...'});
+    pageHjmGpsLog(where).then(res => {
+      console.log(res?.list, 'list')
+      setPoints(res?.list.map(item => {
+        console.log(item, 'item.')
+        return {
+          latitude: item.latitude,
+          longitude: item.longitude
+        }
+      }) || [])
+      setHjmGpsLog(res?.list || []);
+    }).finally(() => {
+      Taro.hideLoading();
+    })
+  }
+
+  const reload = () => {
+    const id = Number(params.id);
+    setScale(16)
+    // 执行搜索
+    if (keywords) {
+      getHjmCarByCode(keywords).then(data => {
+        console.log('执行搜索', data)
+        setItem(data)
+        setLatitude(data.latitude)
+        setLongitude(data.longitude)
+        setKeywords(data.code)
+        // 获取车辆轨迹信息
+        getLocationRecord(data);
+        if (data.fence) {
+          // 方法2：使用实际的 fence 数据（如果是字符串格式）
+          const coordStr = data.fence.points || '';
+
+          // 使用通用函数解析坐标字符串
+          const {points} = parseCoordinateString(coordStr);
+          console.log('解析结果 - 多边形点:', points);
+          setShowCircles(true)
+        }
+      })
+      return false;
+    }
+    // 获取车辆信息
+    if (id) {
+      getHjmCar(id).then(data => {
+        setItem(data)
+        setLatitude(data.latitude)
+        setLongitude(data.longitude)
+        setKeywords(data.code)
+        // 获取车辆轨迹信息
+        getLocationRecord(data);
+        if (data.fence) {
+          // 方法2：使用实际的 fence 数据（如果是字符串格式）
+          const coordStr = data.fence.points || '';
+
+          // 使用通用函数解析坐标字符串
+          const {points} = parseCoordinateString(coordStr);
+          console.log('解析结果 - 多边形点:', points);
+          setShowCircles(true)
+        }
+      })
+    }
+  }
+
+  useEffect(() => {
+    reload()
+  }, [])
+
+  // 监听圈圈数据变化
+  useEffect(() => {
+  }, [showCircles])
+
+  return (
+    <>
+      <div className={'fixed z-20 top-0 left-0 w-full'}>
+        <div className={'px-0'}>
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              background: '#ffffff',
+              borderTop: '1px solid #f7f7f7',
+              borderBottom: '1px solid #f7f7f7',
+            }}
+          >
+            <DatePicker
+              title="日期选择"
+              visible={show1}
+              value={value}
+              showChinese
+              defaultValue={new Date(`${defaultDescription}`)}
+              onClose={() => setShow1(false)}
+              threeDimensional={false}
+              onConfirm={(options, values) => confirm(values, options)}
+            />
+            <div className={'flex w-full justify-between items-center p-2'}>
+              <Button type="info" size={'mini'} onClick={onBefore}>
+                前一小时
+              </Button>
+              <div className={'gap-1 flex'}>
+                <span onClick={() => setShow1(true)}>{desc1}</span>
+                <span onClick={() => setShow(true)}>{(Number(hhmmss) + 8) + ':00'}</span>
+              </div>
+              <Button type="info" size={'mini'} onClick={onAfter}>
+                后一小时
+              </Button>
+            </div>
+            <DatePicker
+              title="时间选择"
+              type="hour-minutes"
+              defaultValue={new Date(`${defaultDescription}`)}
+              startDate={startDate}
+              endDate={endDate}
+              visible={show}
+              onClose={() => setShow(false)}
+              onConfirm={(options, values) => confirm(options, values)}
+            />
+          </div>
+        </div>
+      </div>
+      {/*<Map polyline={{hjmGpsLog}}></Map>*/}
+      <Map
+        id="map"
+        longitude={longitude}
+        latitude={latitude}
+        scale={scale}
+        markers={[{
+          id: 1,
+          title: '车辆编号XXX',
+          label: {
+            content: `${item?.code}`,
+            color: '#000000',
+            fontSize: 12,
+            borderRadius: 5,
+            bgColor: '#FFFFFF',
+            // @ts-ignore
+            padding: '5px 5px',
+            borderWidth: 1
+          },
+          latitude: latitude,
+          longitude: longitude,
+          // @ts-ignore
+          name: '位置'
+        }]}
+        polyline={[
+          {
+            points: hjmGpsLog,
+            color: '#FF0000',
+            width: 2,
+            dottedLine: false
+          }
+        ]}
+        onTap={() => {
+          console.log('map tap')
+        }}
+        style={{width: '100%', height: '100vh'}}
+      />
+
+    </>
+  )
+}
+export default Location
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -144,7 +144,7 @@ function Home() {

  const reload = () => {
    setMarkers([])
-    pageHjmCar({keywords}).then(res => {
+    pageHjmCar({keywords,deleted: 0}).then(res => {
      setList(res?.list || [])
      if (res?.list && res?.list.length > 0) {
        setScale(16)
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -0,0 +1,39 @@
+/**
+ * 获取当前时间
+ */
+export function formatCurrentDate() {
+  // 创建一个Date对象，表示当前日期和时间
+  const now = new Date();
+
+  // 获取年、月、日，并进行必要的格式化
+  const day = String(now.getDate()).padStart(2, '0'); // 获取日，并确保是两位数
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月，并确保是两位数，月份是从0开始的，所以要加1
+  const year = String(now.getFullYear()).slice(-2); // 获取年份的最后两位数字
+
+  return `${day}${month}${year}`;
+}
+
+/**
+ * 获取当前时分秒
+ */
+export function formatHhmmss(){
+  // 创建一个Date对象，表示当前日期和时间
+  const now = new Date();
+  // 获取当前的小时
+  const hour = String(now.getHours()).padStart(2, '0');
+  // 获取当前的分钟
+  const minute = String(now.getMinutes()).padStart(2, '0');
+  // 获取当前的秒数
+  const second = String(now.getSeconds()).padStart(2, '0');
+  return `${String(Number(hour) - 8).padStart(2, '0')}${minute}${second}`;
+}
+
+/**
+ * 获取当前小时
+ */
+export function getCurrentHour() {
+  const now = new Date();
+  // 获取当前的小时
+  const hour = String(now.getHours()).padStart(2, '0');
+  return `${String(Number(hour) - 8).padStart(2, '0')}`;
+}