From b55f605d6d2711dda1e670ef685900e62f1964f9 Mon Sep 17 00:00:00 2001
From: liangbin <15536829364@163.com>
Date: Fri, 16 Jan 2026 11:30:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B7=A5=E5=8D=95=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B7=A5=E5=8D=95=E7=BC=96=E8=BE=91=E5=92=8C?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=8F=8A=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加工单编辑页面和工单详情页面，包括基础信息表单和地图功能
在工单审批页面增加新建工单按钮跳转功能
引入天地图API用于地图展示
更新页面路由配置
---
 index.html                                    |   1 +
 src/pages.json                                |  14 ++
 src/pages/WorkOrderApproval/index.vue         |  26 +++-
 src/pages/WorkOrderDetails/index.vue          |  80 ++++++++++
 .../WorkOrderEdit/compoents/BasicsInfo.vue    | 139 ++++++++++++++++++
 src/pages/WorkOrderEdit/index.vue             | 115 +++++++++++++++
 6 files changed, 370 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/WorkOrderDetails/index.vue
 create mode 100644 src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
 create mode 100644 src/pages/WorkOrderEdit/index.vue
diff --git a/index.html b/index.html
index 63f6485..e19f439 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <title>uniapp-vue3-template</title>
   <link rel="icon" href="/favicon.ico">
+  <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=627214536ffef28d296fab6a9578679e"></script>
 </head>
 <body>
   <div id="app"></div>
diff --git a/src/pages.json b/src/pages.json
index 80a9d0a..afc62d1 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -14,6 +14,20 @@
         "enablePullDownRefresh": true
       }
     },
+    {
+      "path": "pages/WorkOrderEdit/index",
+      "style": {
+        "navigationBarTitleText": "工单编辑",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/WorkOrderDetails/index",
+      "style": {
+        "navigationBarTitleText": "工单详情",
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/ProjectList/index",
       "style": {
diff --git a/src/pages/WorkOrderApproval/index.vue b/src/pages/WorkOrderApproval/index.vue
index b6e38a7..4d42264 100644
--- a/src/pages/WorkOrderApproval/index.vue
+++ b/src/pages/WorkOrderApproval/index.vue
@@ -7,7 +7,7 @@
                     @update:current="TypeValue = $event"></u-select>
             </view>
             <view class="BtnBox">
-                <u-button type="primary" text="查询">新建工单</u-button>
+                <u-button type="primary" text="查询" @click="HandleNewAdd">新建工单</u-button>
             </view>
 
 
@@ -22,10 +22,12 @@
                         </view>
                         <view class="CodeTxt">项目编号：{{ item.projectCode }}</view>
                         <view class="TagBox">
-                            <up-tag text="代填工作票" plain shape="circle"></up-tag>
+                            <u-tag text="代填工作票"  shape="circle"></u-tag>
                         </view>
-                        <view class="BtnBox">
-                            <up-tag text="代填工作票" plain shape="circle"></up-tag>
+                        <view class="BtnList">
+                            <u-button text="修改" plain color="#2979ff" size="small"></u-button>
+                            <u-button text="撤回" plain color="#ff9900" size="small"></u-button>
+                            <u-button text="删除" plain color="#fa3534" size="small"></u-button>
                         </view>
                     </view>
                 </template>
@@ -55,6 +57,12 @@ const dataSource = ref([
     { id: 7, name: '工单7', projectCode: '123462' },
 ])
 
+// 跳转新建工单
+const HandleNewAdd = () => {
+    uni.navigateTo({
+        url: '/pages/WorkOrderEdit/index'
+    })
+}
 
 </script>
 <style lang="scss" scoped>
@@ -67,7 +75,7 @@ const dataSource = ref([
 .PageBox {
     padding: 20rpx;
     background-color: #fff;
-    height: calc(100vh - 400rpx);
+    height: calc(100vh - 170rpx);
 
     .TopBox {
         .SelectBox {
@@ -107,6 +115,7 @@ const dataSource = ref([
             margin-bottom: 20rpx;
             background-color: #fff;
             border-radius: 10rpx;
+            overflow: auto;
             .Title {
                 font-size: 32rpx;
                 font-weight: bold;
@@ -124,6 +133,13 @@ const dataSource = ref([
             .TagBox {
                 margin-top: 20rpx;
             }
+            .BtnList {
+                margin-top: 20rpx;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                gap: 20rpx;
+            }
         }
     }
 
diff --git a/src/pages/WorkOrderDetails/index.vue b/src/pages/WorkOrderDetails/index.vue
new file mode 100644
index 0000000..b1d1b7f
--- /dev/null
+++ b/src/pages/WorkOrderDetails/index.vue
@@ -0,0 +1,80 @@
+<!-- 工单详情 -->
+<template>
+    <view class="PageBox">
+        <view class="TopBox FlexBox">
+            <view class="iconBox FlexBox">
+                <!-- 返回上一页 -->
+                <u-icon name="arrow-leftward" size="24"></u-icon>
+            </view>
+            <view class="Title">工单详情</view>
+            <view class="informBox">
+                <u-icon name="bell-fill" size="24"></u-icon>
+                <view class="MsgTxt"></view>
+            </view>
+        </view>
+        <view class="ContentBox">
+            展示内容
+        </view>
+        <view class="FootBox">
+            <u-button text="撤回"  type="info"></u-button>
+            <u-button text="提交实施"  color="#2979ff"></u-button>
+
+        </view>
+    </view>
+</template>
+<style lang="scss" scoped>
+.FlexBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20rpx;
+}
+
+.PageBox {
+    background-color: #ff9900;
+    height: 100vh;
+    overflow: hidden;
+
+    .TopBox {
+        height: 100rpx;
+        padding: 20rpx;
+        background-color: #fff;
+        .iconBox {
+           font-size: 32rpx;
+        }
+        .Title{
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #333;
+        }
+        .informBox {
+          .MsgTxt{
+            padding: 8rpx;
+            background-color: hsla(17, 100%, 50%, 0.849);
+            color: #fff;
+            position: absolute;
+            top: 16rpx;
+            right: 16rpx;
+            border-radius: 50%;
+          }
+        }
+    }
+
+    .ContentBox {
+        padding: 20rpx;
+        background-color: #c5d5d6;
+        height: calc(100vh - 200rpx);
+        overflow: hidden;
+    }
+
+    .FootBox {
+        height: 100rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20rpx;
+        padding: 20rpx;
+        background-color: #fff;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
new file mode 100644
index 0000000..dc3c7d8
--- /dev/null
+++ b/src/pages/WorkOrderEdit/compoents/BasicsInfo.vue
@@ -0,0 +1,139 @@
+<!-- 工单基础信息 -->
+<template>
+    <view class="MainBox">
+        <view class="FormBox">
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">项目名称</view>
+                <view class="FormValueBox">
+                    <u-input v-model="formData.ProjectName" placeholder="请输入项目名称"></u-input>
+                </view>
+            </view>
+            <view class="FormItem">
+                <view class="FormLableBox mustBox">作业地点</view>
+                <view class="MapBox" id="tianditu-map">
+                </view>
+                <view class="FormValueBox">
+                    <u-input v-model="formData.SpecificAddress" placeholder="请输入具体楼层或区域"></u-input>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+
+// 地图实例
+let mapEntity = null;
+// 当前标记点
+let currentMarker = null;
+
+// 表单信息
+const formData = ref({
+    ProjectName: '', // 项目名称
+    Location: '', // 作业地点（经纬度）
+    SpecificAddress: '', // 具体楼层或区域
+})
+
+// 初始化地图
+onMounted(() => {
+    // 确保 DOM 渲染完成后初始化地图
+    initTiandituMap();
+});
+
+// 初始化天地图
+
+const initTiandituMap = () => {
+    try {
+        // 1. 创建地图容器
+        const container = document.getElementById('tianditu-map');
+        if (!container) {
+            console.error('地图容器未找到');
+            return;
+        }
+
+        // 2. 初始化地图（中心点设为北京，缩放级别12）
+        mapEntity = new T.Map('tianditu-map');
+        const centerPoint = new T.LngLat(116.403874, 39.914885);
+        mapEntity.centerAndZoom(centerPoint, 12);
+
+        // 3. 开启地图拖拽、缩放交互
+        mapEntity.enableDrag();
+        mapEntity.enableScrollWheelZoom();
+
+        // 4. 添加天地图图层（矢量图层 + 注记图层）
+        const vecLayer = new T.TileLayer('vec_w', { key: '你的天地图Key' });
+        const cvaLayer = new T.TileLayer('cva_w', { key: '你的天地图Key' });
+        const layerGroup = new T.LayerGroup([vecLayer, cvaLayer]);
+        mapEntity.addLayer(layerGroup);
+
+        // 5. 添加地图点击事件监听器
+        mapEntity.addEventListener('click', (e) => {
+            const lng = e.lnglat.getLng();
+            const lat = e.lnglat.getLat();
+
+            // 如果已存在标记点，先移除
+            if (currentMarker) {
+                mapEntity.removeOverLay(currentMarker);
+            }
+
+            // 创建新的标记点
+            const marker = new T.Marker(new T.LngLat(lng, lat));
+            mapEntity.addOverLay(marker);
+            currentMarker = marker;
+
+            // 将经纬度存储到Location字段
+            formData.value.Location = `${lng},${lat}`;
+
+            console.log('标记点位置：', lng, lat);
+        });
+
+        console.log('天地图初始化成功');
+    } catch (error) {
+        console.error('天地图初始化失败：', error);
+    }
+}
+
+
+
+</script>
+<style lang="scss" scoped>
+.MainBox {
+    padding: 20rpx;
+    background-color: #fff;
+    height: 100%;
+    overflow: hidden;
+}
+
+.mustBox::after {
+    content: '*';
+    color: red;
+    font-size: 30rpx;
+    margin-left: 10rpx;
+}
+
+.MapBox {
+    width: 100%;
+    height: 400rpx;
+}
+
+.FormBox {
+    background-color: #f5f5f5;
+    height: 100%;
+
+    .FormItem {
+        padding: 20rpx;
+        background-color: #fff;
+
+        .FormLableBox {
+            font-size: 30rpx;
+            font-weight: bold;
+            margin-bottom: 20rpx;
+        }
+
+        .FormValueBox {
+            font-size: 30rpx;
+            margin-top: 20rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/WorkOrderEdit/index.vue b/src/pages/WorkOrderEdit/index.vue
new file mode 100644
index 0000000..ecf37b3
--- /dev/null
+++ b/src/pages/WorkOrderEdit/index.vue
@@ -0,0 +1,115 @@
+<!-- 工单编辑-外壳 -->
+<template>
+    <view class="PageBox">
+        <view class="TopBox FlexBox">
+            <view class="iconBox FlexBox">
+                <!-- 返回上一页 -->
+                <u-icon name="arrow-leftward" size="24"></u-icon>
+                <!-- 返回主页 -->
+                 <u-icon name="home" size="24"></u-icon>
+            </view>
+            <view class="Title">工单编辑</view>
+            <view class="informBox">
+                <u-icon name="bell-fill" size="24"></u-icon>
+                <view class="MsgTxt"></view>
+            </view>
+        </view>
+        <view class="ContentBox">
+            <BasicsInfo :ref="basicsInfoRef"></BasicsInfo>
+        </view>
+        <view class="FootBox" v-for="item in stepList" :key="item.id">
+            <u-button :text="item.PrevBtnName"  type="info"></u-button>
+            <u-button :text="item.NextBtnName"  color="#2979ff" @click="nextStep"></u-button>
+        </view>
+    </view>
+</template>
+<script setup>
+import { ref } from 'vue'
+import BasicsInfo from './compoents/BasicsInfo.vue'
+const currentStep = ref(1)// 当前步骤
+const basicsInfoRef = ref(null); // 基础信息组件引用
+
+// 步骤列表
+const stepList = ref([
+    {   
+        id: 1,
+        Title: '工单基础信息',
+        PrevBtnName: '保存草稿',
+        NextBtnName: '下一步（申请出入证）',
+    },
+    {
+        id: 2,
+        Title: '出入证申请',
+        PrevBtnName: '返回修改',
+        NextBtnName: '提交+下一步（填写工作票）',
+    },
+    {
+        id: 3,
+        Title: '填写工作票',
+        PrevBtnName: '保存草稿',
+        NextBtnName: '提交工单',
+    },
+])
+
+// 点击下一步
+const nextStep = () => {
+    console.log(basicsInfoRef.value);
+}
+
+
+</script>
+<style lang="scss" scoped>
+.FlexBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20rpx;
+}
+
+.PageBox {
+    background-color: #ff9900;
+    height: 100vh;
+    overflow: hidden;
+
+    .TopBox {
+        height: 100rpx;
+        padding: 20rpx;
+        background-color: #fff;
+        .iconBox {
+           font-size: 32rpx;
+        }
+        .Title{
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #333;
+        }
+        .informBox {
+          .MsgTxt{
+            padding: 8rpx;
+            background-color: hsla(17, 100%, 50%, 0.849);
+            color: #fff;
+            position: absolute;
+            top: 16rpx;
+            right: 16rpx;
+            border-radius: 50%;
+          }
+        }
+    }
+
+    .ContentBox {
+        background-color: #c5d5d6;
+        height: calc(100vh - 200rpx);
+        overflow: hidden;
+    }
+
+    .FootBox {
+        height: 100rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20rpx;
+        padding: 20rpx;
+        background-color: #fff;
+    }
+}
+</style>
\ No newline at end of file
