From 58f0440d84dfcf062e4b07a48b92d1c5e7dba8aa Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Fri, 11 Jul 2025 12:00:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A3=9E=E8=A1=8C=E5=99=A8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E8=AE=A2=E5=8D=95=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9A=84=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/aircraft.js                           |  42 ++
 src/router/routers.js                         |  23 +-
 src/views/aircraft/aircraftDetail/index.vue   | 301 +++++++++++++
 src/views/aircraft/index.vue                  | 399 ++++++++++++++++++
 src/views/order/loadOrder/index.vue           | 209 +++++++++
 .../order/loadOrder/loadOrderDetail/index.vue | 330 +++++++++++++++
 .../settlementOrder/generateOrder/index.vue   | 311 ++++++++++++++
 src/views/order/settlementOrder/index.vue     | 196 +++++++++
 .../settlementOrder/orderDetail/index.vue     | 331 +++++++++++++++
 9 files changed, 2141 insertions(+), 1 deletion(-)
 create mode 100644 src/api/aircraft.js
 create mode 100644 src/views/aircraft/aircraftDetail/index.vue
 create mode 100644 src/views/aircraft/index.vue
 create mode 100644 src/views/order/loadOrder/index.vue
 create mode 100644 src/views/order/loadOrder/loadOrderDetail/index.vue
 create mode 100644 src/views/order/settlementOrder/generateOrder/index.vue
 create mode 100644 src/views/order/settlementOrder/index.vue
 create mode 100644 src/views/order/settlementOrder/orderDetail/index.vue

diff --git a/src/api/aircraft.js b/src/api/aircraft.js
new file mode 100644
index 0000000..0825989
--- /dev/null
+++ b/src/api/aircraft.js
@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+export function add(data) {
+  return request({
+    url: 'api/aircraft',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/aircraft',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/aircraft',
+    method: 'put',
+    data
+  })
+}
+
+export function get(id) {
+  return request({
+    url: 'api/aircraft/' + id,
+    method: 'get'
+  })
+}
+
+export function getAll(params) {
+  return request({
+    url: 'api/aircraft',
+    method: 'get',
+    params
+  })
+}
+
+export default { add, edit, del, get, getAll }
diff --git a/src/router/routers.js b/src/router/routers.js
index bbbc87d..ef5d1e5 100644
--- a/src/router/routers.js
+++ b/src/router/routers.js
@@ -57,7 +57,28 @@ export const constantRouterMap = [
         meta: { title: '个人中心' }
       }
     ]
-  }
+  },
+  {
+    path: '/aircraft',
+    component: Layout,
+    hidden: false,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: 'aircraft',
+        component: (resolve) => require(['@/views/aircraft'], resolve),
+        name: '飞行器管理',
+        meta: { title: '飞行器管理', icon: 'develop', affix: true },
+      },
+      {
+        hidden: true,
+        path: 'aircraftDetail',
+        component: (resolve) => require(['@/views/aircraft/aircraftDetail'], resolve),
+        name: '查看飞行器',
+        meta: { title: '查看飞行器', icon: 'develop', affix: true },
+      },
+    ]
+  },
 ]
 
 export default new Router({
diff --git a/src/views/aircraft/aircraftDetail/index.vue b/src/views/aircraft/aircraftDetail/index.vue
new file mode 100644
index 0000000..c95780c
--- /dev/null
+++ b/src/views/aircraft/aircraftDetail/index.vue
@@ -0,0 +1,301 @@
+<template>
+  <div class="app-container">
+    <!-- 基本信息 -->
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="color: #027db4;">飞行器基本信息</span>
+      </div>
+      <el-form :model="form" label-width="100px" class="detail-form">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="名称">
+              <el-input v-model="form.name" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="型号">
+              <el-input v-model="form.model" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="类型">
+              <el-input v-model="form.type" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="区域">
+              <el-input v-model="form.region" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="景区">
+              <el-input v-model="form.scenicArea" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="负责人">
+              <el-input v-model="form.manager" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="备注">
+              <el-input type="textarea" v-model="form.remarks" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="无人机图片">
+              <div class="image-preview">
+                <div v-for="(url, index) in form.imageUrls" :key="index" class="image-item" @click="handlePreview(url)">
+                  <img :src="url" class="preview-image">
+                </div>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 维护记录表 -->
+    <el-card class="box-card" style="margin-top: 20px;">
+      <div slot="header" class="clearfix">
+        <span style="color: #027db4;">飞行器维护记录</span>
+      </div>
+      <el-table :data="maintenanceData" style="width: 100%">
+        <el-table-column prop="manager" label="负责人" />
+        <el-table-column prop="type" label="维护类型" />
+        <el-table-column prop="remarks" label="备注" />
+        <el-table-column prop="time" label="维护时间" width="180" />
+      </el-table>
+      <div class="pagination-container">
+        <el-pagination
+          :current-page.sync="maintenancePage.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="maintenancePage.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="maintenancePage.total"
+          @size-change="handleMaintenanceSizeChange"
+          @current-change="handleMaintenanceCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 保险记录表 -->
+    <el-card class="box-card" style="margin-top: 20px;">
+      <div slot="header">
+        <span style="color: #027db4;">飞行器保险记录</span>
+        <el-button
+          style="float: right; padding: 5px; background-color: #02a7f0; color: white;"
+          type="text"
+          icon="el-icon-plus"
+          @click="handleAddInsurance"
+        >新增保险</el-button>
+      </div>
+      <el-table :data="insuranceData" style="width: 100%">
+        <el-table-column prop="name" label="保险名称" />
+        <el-table-column prop="type" label="保险类型" />
+        <el-table-column prop="expireTime" label="截至时间" width="180" />
+        <el-table-column label="操作" width="200" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="handleInsuranceView(scope.row)">查看详情</el-button>
+            <el-button type="text" size="small" @click="handleInsuranceEdit(scope.row)">编辑</el-button>
+            <el-button type="text" size="small" @click="handleInsuranceDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-container">
+        <el-pagination
+          :current-page.sync="insurancePage.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="insurancePage.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="insurancePage.total"
+          @size-change="handleInsuranceSizeChange"
+          @current-change="handleInsuranceCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- API模块入口 -->
+    <div class="api-links">
+      <a href="javascript:void(0)" class="api-link" @click="handleApiClick('data')">飞行器数据记录</a>
+      <a href="javascript:void(0)" class="api-link" @click="handleApiClick('fault')">飞行器故障记录</a>
+      <a href="javascript:void(0)" class="api-link" @click="handleApiClick('video')">飞行器视频记录</a>
+    </div>
+
+    <!-- 图片预览 -->
+    <el-dialog :visible.sync="previewVisible" append-to-body>
+      <img :src="previewUrl" alt="Preview" style="width: 100%">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'aircraftDetail',
+  data() {
+    return {
+      form: {
+        name: '大疆',
+        model: 'T100',
+        type: '载人飞行',
+        region: '北京',
+        scenicArea: '白云山',
+        manager: '小明',
+        remarks: '设备状态良好',
+        imageUrls: Array(6).fill('https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png'),
+      },
+      maintenanceData: Array(10).fill({
+        manager: '小明',
+        type: '维修',
+        remarks: '电池损坏',
+        time: '2016-09-21 08:50:08'
+      }),
+      insuranceData: Array(2).fill({
+        name: '安全保险',
+        type: '三方险',
+        expireTime: '2016-09-21 08:50:08'
+      }),
+      maintenancePage: {
+        page: 1,
+        size: 10,
+        total: 20
+      },
+      insurancePage: {
+        page: 1,
+        size: 10,
+        total: 2
+      },
+      previewVisible: false,
+      previewUrl: ''
+    }
+  },
+  created() {
+    // 获取详情数据
+    const id = this.$route.query.id
+    if (id) {
+      this.getDetail(id)
+    }
+  },
+  methods: {
+    getDetail(id) {
+      // 调用接口获取详情
+      console.log('获取详情:', id)
+    },
+    handlePreview(url) {
+      this.previewUrl = url
+      this.previewVisible = true
+    },
+    handleMaintenanceSizeChange(val) {
+      this.maintenancePage.size = val
+      // 重新获取维护记录数据
+    },
+    handleMaintenanceCurrentChange(val) {
+      this.maintenancePage.page = val
+      // 重新获取维护记录数据
+    },
+    handleInsuranceSizeChange(val) {
+      this.insurancePage.size = val
+      // 重新获取保险记录数据
+    },
+    handleInsuranceCurrentChange(val) {
+      this.insurancePage.page = val
+      // 重新获取保险记录数据
+    },
+    handleAddInsurance() {
+      // 跳转到新增保险页面
+    },
+    handleInsuranceView(row) {
+      // 查看保险详情
+      console.log('查看保险详情:', row)
+    },
+    handleInsuranceEdit(row) {
+      // 编辑保险信息
+      console.log('编辑保险信息:', row)
+    },
+    handleInsuranceDelete(row) {
+      // 删除保险记录
+      console.log('删除保险记录:', row)
+    },
+    handleApiClick(type) {
+      // 跳转到对应的API模块
+      console.log('跳转到API模块:', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0;
+  margin-bottom: 33px;
+}
+.detail-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+::v-deep .el-input.is-disabled .el-input__inner {
+    background-color: white;
+    color: #686868;
+  }
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    background-color: white;
+    color: #686868;
+  }
+}
+.image-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  .image-item {
+    width: 120px;
+    height: 120px;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
+    &:hover {
+      border-color: #409EFF;
+    }
+    .preview-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+.box-card {
+  margin-bottom: 20px;
+  box-shadow: none;
+  border: none;
+  background: none;
+  .clearfix {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+.pagination-container {
+  text-align: right;
+  margin-top: 20px;
+}
+.api-links {
+  margin-top: 20px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  .api-link {
+    color: #027db4;
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>
diff --git a/src/views/aircraft/index.vue b/src/views/aircraft/index.vue
new file mode 100644
index 0000000..05b3c24
--- /dev/null
+++ b/src/views/aircraft/index.vue
@@ -0,0 +1,399 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div class="filter-container">
+        <el-input v-model="query.name" clearable size="small" placeholder="请输入飞行器名称" style="width: 200px;" class="filter-item" />
+        <el-input v-model="query.manager" clearable size="small" placeholder="请输入负责人" style="width: 200px;" class="filter-item" />
+        <el-select v-model="query.scenicArea" placeholder="景区" clearable size="small" style="width: 200px" class="filter-item">
+          <el-option label="北京" value="北京" />
+          <el-option label="上海" value="上海" />
+          <el-option label="广州" value="广州" />
+        </el-select>
+        <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="crud.toQuery">查询</el-button>
+        <el-button class="filter-item" size="small" type="success" icon="el-icon-plus" @click="crud.toAdd">新增飞行器</el-button>
+      </div>
+    </div>
+    <!--表单渲染-->
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="580px">
+      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="100px">
+        <el-form-item label="飞行器名称" prop="name">
+          <el-input v-model="form.name" style="width: 150px;" />
+        </el-form-item>
+        <el-form-item label="型号" prop="model">
+          <el-input v-model="form.model" style="width: 150px;" />
+        </el-form-item>
+        <el-form-item label="类型" prop="type">
+          <el-select v-model="form.type" style="width: 150px;">
+            <el-option label="载人飞行" value="载人飞行" />
+            <el-option label="无人机" value="无人机" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="角色" prop="role">
+          <el-select v-model="form.role" style="width: 150px;">
+            <el-option label="飞行员" value="飞行员" />
+            <el-option label="技术员" value="技术员" />
+            <el-option label="管理员" value="管理员" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="区域" prop="region">
+          <el-select v-model="form.region" style="width: 150px;">
+            <el-option label="北京" value="北京" />
+            <el-option label="上海" value="上海" />
+            <el-option label="广州" value="广州" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="景区" prop="scenicArea">
+          <el-select v-model="form.scenicArea" style="width: 150px;">
+            <el-option label="白云山" value="白云山" />
+            <el-option label="故宫" value="故宫" />
+            <el-option label="长城" value="长城" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="remarks" :label-width="'100px'">
+          <el-input
+            type="textarea"
+            :rows="2"
+            placeholder="请输入备注"
+            v-model="form.remarks"
+            style="width: 150px;">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="无人机图片" prop="imageUrls" v-if="form.type === '载人飞行'" style="width: 100%;">
+          <div class="image-list">
+            <el-upload
+              class="avatar-uploader"
+              action="api/upload"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+              style="background-color: #fafafa; display: inline-block; margin-right: 10px;"
+              >
+              <i class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <div v-for="(url, index) in form.imageUrls" :key="index" class="image-item">
+              <img :src="url" class="avatar">
+              <span class="delete-icon" @click="handleRemoveImage(index)">
+                <i class="el-icon-delete"></i>
+              </span>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+      </div>
+    </el-dialog>
+    <!--表格渲染-->
+    <el-table
+      ref="table"
+      v-loading="crud.loading"
+      :data="crud.data"
+      row-key="id"
+      @select="crud.selectChange"
+      @select-all="crud.selectAllChange"
+      @selection-change="crud.selectionChangeHandler"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="飞行器名称" prop="name" />
+      <el-table-column label="型号" prop="model" />
+      <el-table-column label="类型" prop="type" />
+      <el-table-column label="负责人" prop="manager" />
+      <el-table-column label="区域" prop="region" />
+      <el-table-column label="景区" prop="scenicArea" />
+      <el-table-column label="创建时间" prop="createTime" width="180" />
+      <el-table-column label="操作" width="150" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleView(scope.row)"
+          >
+            查看
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="crud.toEdit(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDelete(scope.row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        :background="true"
+        :current-page.sync="page.page"
+        :page-size.sync="page.size"
+        :layout="'total, sizes, prev, pager, next, jumper'"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="page.total"
+        @size-change="crud.sizeChangeHandler"
+        @current-change="crud.pageChangeHandler"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import udOperation from '@crud/UD.operation'
+import crudAircraft from '@/api/aircraft'
+
+// crud交由presenter持有
+const defaultForm = {
+  id: null,
+  name: null,
+  model: null,
+  type: '载人飞行',
+  manager: null,
+  role: '飞行员',
+  region: '北京',
+  scenicArea: '白云山',
+  imageUrls: [],
+  remarks: '',
+  createTime: null
+}
+export default {
+  name: 'aircraft',
+  components: { udOperation },
+  cruds() {
+    return CRUD({ title: '飞行器', url: 'api/aircraft', crudMethod: { ...crudAircraft }})
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  data() {
+    return {
+      page: {
+        page: 1,
+        size: 10,
+        total: 5
+      },
+      // 默认数据
+      defaultData: [{
+        id: 1,
+        name: '大疆',
+        model: 'T100',
+        type: '载人飞行',
+        manager: '小明',
+        region: '北京',
+        scenicArea: '白云山',
+        createTime: '2016-09-21 08:50:08',
+        imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
+      },
+    {
+        id: 2,
+        name: '大疆',
+        model: 'T100',
+        type: '载人飞行',
+        manager: '小明',
+        region: '北京',
+        scenicArea: '白云山',
+        createTime: '2016-09-21 08:50:08',
+        imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
+      },
+    {
+        id: 3,
+        name: '大疆',
+        model: 'T100',
+        type: '载人飞行',
+        manager: '小明',
+        region: '北京',
+        scenicArea: '白云山',
+        createTime: '2016-09-21 08:50:08',
+        imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
+      },
+    {
+        id: 4,
+        name: '大疆',
+        model: 'T100',
+        type: '载人飞行',
+        manager: '小明',
+        region: '北京',
+        scenicArea: '白云山',
+        createTime: '2016-09-21 08:50:08',
+        imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
+      },
+    {
+        id: 5,
+        name: '大疆',
+        model: 'T100',
+        type: '载人飞行',
+        manager: '小明',
+        region: '北京',
+        scenicArea: '白云山',
+        createTime: '2016-09-21 08:50:08',
+        imageUrls: ['https://axure-file.lanhuapp.com/md5__f344f816278c2a3f5164e4571c580ad9.png']
+      }],
+      permission: {
+        add: ['admin', 'aircraft:add'],
+        edit: ['admin', 'aircraft:edit'],
+        del: ['admin', 'aircraft:del']
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入飞行器名称', trigger: 'blur' }
+        ],
+        model: [
+          { required: true, message: '请输入型号', trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: '请选择类型', trigger: 'change' }
+        ],
+        manager: [
+          { required: true, message: '请输入负责人', trigger: 'blur' }
+        ],
+        role: [
+          { required: true, message: '请选择角色', trigger: 'change' }
+        ],
+        region: [
+          { required: true, message: '请选择区域', trigger: 'change' }
+        ],
+        scenicArea: [
+          { required: true, message: '请选择景区', trigger: 'change' }
+        ],
+        imageUrls: [
+          { required: true, message: '请上传无人机图片', trigger: 'change', type: 'array' }
+        ]
+      },
+      query: {
+        name: '',
+        manager: '',
+        scenicArea: '北京'
+      }
+    }
+  },
+  methods: {
+    [CRUD.HOOK.beforeRefresh]() {
+      // 在刷新前将默认数据添加到crud.data中
+      if (this.crud.data.length === 0) {
+        this.crud.data = this.defaultData
+        // this.crud.resetDataStatus()
+      }
+    },
+    handleView(row) {
+      this.$router.push({ path: '/aircraft/aircraftDetail', query: { id: row.id }})
+    },
+    handleAvatarSuccess(res, file) {
+      if (!this.form.imageUrls) {
+        this.form.imageUrls = []
+      }
+      this.form.imageUrls.push(res.url)
+    },
+    handleRemoveImage(index) {
+      this.form.imageUrls.splice(index, 1)
+    },
+    beforeAvatarUpload(file) {
+      const isImage = file.type.startsWith('image/')
+      const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isImage) {
+        this.$message.error('上传文件只能是图片格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 2MB!')
+      }
+      return isImage && isLt2M
+    },
+
+    handleDelete(row) {
+      this.$confirm(`此操作将永久删除飞行器"${row.name}"，是否继续？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.crud.toDelete(row.id)
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.avatar-uploader {
+  .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    &:hover {
+      border-color: #409EFF;
+    }
+  }
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+}
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  .image-item {
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    .avatar {
+      width: 120px;
+      height: 120px;
+      display: block;
+    }
+    .delete-icon {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      // background-color: rgba(0,0,0,0.5);
+      // color: white;
+      padding: 5px;
+      border-radius: 50%;
+      cursor: pointer;
+      &:hover {
+        background-color: rgba(0,0,0,0.7);
+      }
+    }
+  }
+}
+.pagination-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 200px;
+  height: 150px;
+  background: white;
+  padding: 10px;
+  text-align: left;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
+}
+.el-pagination {
+  padding: 2px 25px;
+}
+.app-container {
+  padding-bottom: 60px;
+}
+ ::v-deep .el-input-number .el-input__inner {
+    text-align: left;
+  }
+ ::v-deep .vue-treeselect__control,::v-deep .vue-treeselect__placeholder,::v-deep .vue-treeselect__single-value {
+    height: 30px;
+    line-height: 30px;
+  }
+</style>
diff --git a/src/views/order/loadOrder/index.vue b/src/views/order/loadOrder/index.vue
new file mode 100644
index 0000000..cc82b64
--- /dev/null
+++ b/src/views/order/loadOrder/index.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <div class="head-container">
+      <div class="filter-container">
+        <el-input
+          v-model="query.scenicArea"
+          placeholder="请输入景区名称"
+          class="filter-item"
+          style="width: 200px;"
+          clearable
+        />
+        <el-input
+          v-model="query.customerName"
+          placeholder="请输入客户名称"
+          class="filter-item"
+          style="width: 200px;"
+          clearable
+        />
+        <el-input
+          v-model="query.phone"
+          placeholder="请输入手机号"
+          class="filter-item"
+          style="width: 200px;"
+          clearable
+        />
+        <el-button type="primary" class="filter-item" @click="handleSearch">查询</el-button>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      ref="table"
+      v-loading="loading"
+      :data="tableData"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column prop="customerName" label="客户名称" align="left" />
+      <el-table-column prop="phone" label="手机号码" align="left" />
+      <el-table-column prop="orderTime" label="下单时间" width="180" align="left" />
+      <el-table-column prop="cost" label="下单费用" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.cost.toFixed(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="area" label="区域" align="left" />
+      <el-table-column prop="scenicArea" label="景区" align="left" />
+      <el-table-column prop="route" label="路线" align="left" />
+      <el-table-column prop="initiator" label="订单发起人" align="left" />
+      <el-table-column prop="type" label="订单类型" align="left" />
+      <el-table-column prop="status" label="订单状态" align="left">
+        <template slot-scope="scope">
+          <span class="status-text">{{ scope.row.status }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="settlementStatus" label="结算状态" align="left">
+        <template slot-scope="scope">
+          <span class="status-text">{{ scope.row.settlementStatus }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="120" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="handleDetail(scope.row)"
+          >
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page.sync="page.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'loadOrder',
+  data() {
+    return {
+      loading: false,
+      query: {
+        scenicArea: '',
+        customerName: '',
+        phone: ''
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 2
+      },
+      tableData: [
+        {
+          customerName: '小明',
+          phone: '12345678',
+          orderTime: '2025-07-07 18:28:51',
+          cost: 100.00,
+          area: '广州区域',
+          scenicArea: '白云山',
+          route: 'a-b',
+          initiator: '小红',
+          type: '载物飞行',
+          status: '未执行',
+          settlementStatus: '未结算'
+        },
+        {
+          customerName: '小明',
+          phone: '12345678',
+          orderTime: '2025-07-07 18:28:51',
+          cost: 100.00,
+          area: '广州区域',
+          scenicArea: '白云山',
+          route: 'a-b',
+          initiator: '小红',
+          type: '载物飞行',
+          status: '进行中',
+          settlementStatus: '结算中'
+        }
+      ],
+      selection: []
+    }
+  },
+  methods: {
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log('搜索条件:', this.query)
+    },
+    handleSelectionChange(val) {
+      this.selection = val
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      // 重新加载数据
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      // 重新加载数据
+    },
+    handleDetail(row) {
+      this.$router.push({ path: '/order/loadOrderDetail', query: { id: row.orderId }})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  gap: 10px;
+
+  .filter-item {
+    margin-right: 10px;
+  }
+}
+
+.pagination-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 200px;
+  height: 150px;
+  background: white;
+  padding: 10px;
+  text-align: left;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
+}
+.el-pagination {
+  padding: 2px 25px;
+}
+
+.status-text {
+  color: #f56c6c;
+}
+
+.el-button--text {
+  color: #409EFF;
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.el-table {
+  margin-top: 20px;
+  ::v-deep .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+}
+</style>
diff --git a/src/views/order/loadOrder/loadOrderDetail/index.vue b/src/views/order/loadOrder/loadOrderDetail/index.vue
new file mode 100644
index 0000000..66fb783
--- /dev/null
+++ b/src/views/order/loadOrder/loadOrderDetail/index.vue
@@ -0,0 +1,330 @@
+<template>
+  <div class="app-container">
+    <!-- 订单基本信息 -->
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="color: #027db4;">订单基本信息</span>
+      </div>
+      <el-form :model="form" label-width="100px" class="detail-form">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="订单号">
+              <el-input v-model="form.orderNo" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="订单类型">
+              <el-input v-model="form.orderType" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="订单发起人">
+              <el-input v-model="form.initiator" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="客户名称">
+              <el-input v-model="form.customerName" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="手机号码">
+              <el-input v-model="form.phoneNumber" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="区域">
+              <el-select v-model="form.region" placeholder="请选择区域">
+                <el-option label="区域1" value="area1" />
+                <el-option label="区域2" value="area2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="景区">
+              <el-select v-model="form.scenicArea" placeholder="请选择景区">
+                <el-option label="景区1" value="scenic1" />
+                <el-option label="景区2" value="scenic2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="路线">
+              <el-select v-model="form.route" placeholder="请选择路线">
+                <el-option label="路线1" value="route1" />
+                <el-option label="路线2" value="route2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="货物重量">
+              <el-input v-model="form.weight" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="附加费">
+              <el-input v-model="form.additionalFee" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="操作员">
+              <el-input v-model="form.operator" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="下单时间">
+              <el-date-picker
+                v-model="form.orderTime"
+                type="datetime"
+                placeholder="选择日期时间"
+                format="yyyy-MM-dd HH:mm:ss"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="订单状态">
+              <el-input v-model="form.orderStatus" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="订单确认人">
+              <el-input v-model="form.confirmer" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="订单金额">
+              <el-input v-model="form.amount" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
+    <!-- 飞行任务信息表 -->
+    <el-card class="box-card" style="margin-top: 20px;">
+      <div slot="header" class="clearfix">
+        <span style="color: #027db4;">飞行任务信息</span>
+      </div>
+      <el-table :data="flightTaskData" style="width: 100%">
+        <el-table-column prop="operator" label="操作员" />
+        <el-table-column prop="device" label="执行设备" />
+        <el-table-column label="货物图片">
+          <template slot-scope="scope">
+            <img :src="scope.row.cargoImage" style="height: 50px;" @click="handlePreview(scope.row.cargoImage)">
+          </template>
+        </el-table-column>
+        <el-table-column prop="weight" label="载货重量" />
+        <el-table-column prop="status" label="任务状态" />
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="handleVideoView(scope.row)">查看视频</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-container">
+        <el-pagination
+          :current-page.sync="taskPage.page"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="taskPage.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="taskPage.total"
+          @size-change="handleTaskSizeChange"
+          @current-change="handleTaskCurrentChange"
+        />
+      </div>
+    </el-card>
+
+    <!-- 图片预览 -->
+    <el-dialog :visible.sync="previewVisible" append-to-body>
+      <img :src="previewUrl" alt="Preview" style="width: 100%">
+    </el-dialog>
+
+    <!-- 视频预览 -->
+    <el-dialog
+      title="视频预览"
+      :visible.sync="videoDialogVisible"
+      width="50%"
+      append-to-body
+    >
+      <video
+        :src="currentVideoUrl"
+        controls
+        style="width: 100%"
+      >
+        您的浏览器不支持 video 标签。
+      </video>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'loadOrderDetail',
+  data() {
+    return {
+      form: {
+        orderNo: 'ORDER2025001',
+        orderType: '普通订单',
+        initiator: '张三',
+        customerName: '李四',
+        phoneNumber: '13800138000',
+        region: 'area1',
+        scenicArea: 'scenic1',
+        route: 'route1',
+        weight: '100kg',
+        additionalFee: '50',
+        operator: '小明',
+        orderTime: new Date(),
+        orderStatus: '进行中',
+        confirmer: '王五',
+        amount: '1000'
+      },
+      flightTaskData: [
+        {
+          operator: '小明',
+          device: 'T100',
+          cargoImage: 'https://axure-file.lanhuapp.com/md5__aa8db5b0612acabf7c9b92c53293d1d3.png',
+          weight: '100kg',
+          status: '进行中',
+          videoUrl: 'https://videos.pexels.com/video-files/32839562/13997147_2560_1440_30fps.mp4'
+        }
+      ],
+      taskPage: {
+        page: 1,
+        size: 10,
+        total: 3
+      },
+      previewVisible: false,
+      previewUrl: '',
+      videoDialogVisible: false,
+      currentVideoUrl: ''
+    }
+  },
+  created() {
+    // 获取详情数据
+    const id = this.$route.query.id
+    if (id) {
+      this.getDetail(id)
+    }
+  },
+  methods: {
+    getDetail(id) {
+      // 调用接口获取详情
+      console.log('获取详情:', id)
+    },
+    handlePreview(url) {
+      this.previewUrl = url
+      this.previewVisible = true
+    },
+    handleTaskSizeChange(val) {
+      this.taskPage.size = val
+      // 重新获取任务记录数据
+    },
+    handleTaskCurrentChange(val) {
+      this.taskPage.page = val
+      // 重新获取任务记录数据
+    },
+    handleVideoView(row) {
+      if (row.videoUrl) {
+        this.currentVideoUrl = row.videoUrl
+        this.videoDialogVisible = true
+      }
+    },
+    handleApiClick(type) {
+      // 跳转到对应的API模块
+      console.log('跳转到API模块:', type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 0;
+  margin-bottom: 33px;
+}
+.detail-form {
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  ::v-deep .el-input {
+    width: 240px;
+  }
+  ::v-deep .el-select {
+    width: 240px;
+  }
+  ::v-deep .el-date-editor {
+    width: 240px;
+  }
+::v-deep .el-input.is-disabled .el-input__inner {
+    background-color: white;
+    color: #686868;
+  }
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    background-color: white;
+    color: #686868;
+  }
+}
+.image-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  .image-item {
+    width: 120px;
+    height: 120px;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
+    &:hover {
+      border-color: #409EFF;
+    }
+    .preview-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+.box-card {
+  margin-bottom: 20px;
+  box-shadow: none;
+  border: none;
+  background: none;
+  .clearfix {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+.pagination-container {
+  text-align: right;
+  margin-top: 20px;
+}
+.api-links {
+  margin-top: 20px;
+  padding: 20px;
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  .api-link {
+    color: #027db4;
+    text-decoration: none;
+    padding: 10px 20px;
+    border: 1px solid #027db4;
+    border-radius: 4px;
+    &:hover {
+      background-color: #027db4;
+      color: white;
+    }
+  }
+}
+</style>
diff --git a/src/views/order/settlementOrder/generateOrder/index.vue b/src/views/order/settlementOrder/generateOrder/index.vue
new file mode 100644
index 0000000..008722b
--- /dev/null
+++ b/src/views/order/settlementOrder/generateOrder/index.vue
@@ -0,0 +1,311 @@
+<template>
+  <div class="app-container">
+    <!-- 页面标题 -->
+    <h2 class="page-title">生成结算单</h2>
+
+    <!-- 查询区域 -->
+    <div class="head-container">
+      <div class="filter-container">
+        <div class="filter-item">
+          <span class="label">景区：</span>
+          <el-select v-model="query.scenicArea" placeholder="请选择景区" clearable style="width: 200px;">
+            <el-option
+              v-for="item in scenicAreaOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <span class="label">日期：</span>
+          <el-date-picker
+            v-model="query.dateRange"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+            :default-value="defaultDateRange"
+            style="width: 350px;"
+          />
+        </div>
+        <el-button type="primary" class="filter-item" @click="handleSearch">
+          查询
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 订单列表区域 -->
+    <div class="order-list-container">
+      <div class="list-header">
+        <span class="list-title">订单列表：</span>
+        <el-button type="primary" class="select-all-btn" @click="handleSelectAll">
+          选择全部
+        </el-button>
+      </div>
+      <!-- 表格 -->
+      <el-table
+        ref="table"
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="customerName" label="客户名称" align="center" />
+        <el-table-column prop="phoneNumber" label="手机号码" align="center" />
+        <el-table-column prop="orderTime" label="下单时间" align="center" width="180" />
+        <el-table-column prop="orderAmount" label="下单费用" align="center" />
+        <el-table-column prop="scenicArea" label="景区" align="center" />
+        <el-table-column prop="route" label="路线" align="center" />
+        <el-table-column prop="initiator" label="订单发起人" align="center" />
+        <el-table-column prop="orderType" label="订单类型" align="center" />
+        <el-table-column prop="orderStatus" label="订单状态" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderStatus }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="settlementStatus" label="结算状态" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.settlementStatus }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page.sync="page.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+
+    <!-- 生成结算单按钮 -->
+    <div class="generate-btn-container">
+      <el-button type="primary" @click="handleGenerate">生成结算单</el-button>
+    </div>
+    <!-- 结算列表弹窗 -->
+    <el-dialog
+      title="结算列表"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <el-table :data="settlementList">
+        <el-table-column prop="scenicArea" label="委托方">
+          <template slot-scope="scope">
+            委托方：{{ scope.row.scenicArea }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="weight" label="重量">
+          <template slot-scope="scope">
+            重量：{{ scope.row.weight }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" label="金额">
+          <template slot-scope="scope">
+            金额：{{ scope.row.amount }}
+          </template>
+        </el-table-column>
+      </el-table>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确认生成</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'generateOrder',
+  data() {
+    const defaultStartDate = new Date('2015-10-02')
+    const defaultEndDate = new Date('2015-10-10')
+    return {
+      dialogVisible: false,
+      settlementList: [],
+      loading: false,
+      query: {
+        scenicArea: '',
+        dateRange: [defaultStartDate, defaultEndDate]
+      },
+      defaultDateRange: [defaultStartDate, defaultEndDate],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      scenicAreaOptions: [
+        { value: 'baiYunShan', label: '白云山' },
+        { value: 'huangShan', label: '黄山' },
+        { value: 'taiShan', label: '泰山' }
+      ],
+      tableData: [
+        {
+          customerName: '小明',
+          phoneNumber: '12345678',
+          orderTime: '2024-01-01 00:00:00',
+          orderAmount: '100.00',
+          scenicArea: '白云山',
+          route: 'a-b',
+          initiator: '小红',
+          orderType: '载物飞行',
+          orderStatus: '已完成',
+          settlementStatus: '未结算'
+        }
+      ],
+      selection: []
+    }
+  },
+  methods: {
+    handleSearch() {
+      // 仅显示已完成且未结算的订单
+      this.loading = true
+      // 实际环境中应该调用API
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    },
+
+    handleSelectAll() {
+      this.$refs.table.toggleAllSelection()
+    },
+    handleSelectionChange(val) {
+      this.selection = val
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.page.total = this.tableData.length // 更新总数
+      // 重新加载数据
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.page.total = this.tableData.length // 更新总数
+      // 重新加载数据
+    },
+    handleDetail(row) {
+      // 查看详情
+      console.log('查看详情:', row)
+    },
+    handlePrint(row) {
+      // 打印结算单
+      console.log('打印结算单:', row)
+    },
+    handleGenerate() {
+      if (this.selection.length === 0) {
+        this.$message.warning('请至少选择一个订单')
+        return
+      }
+
+      // 按景区分组并生成结算列表
+      const ordersByScenic = {}
+      this.selection.forEach(order => {
+        if (!ordersByScenic[order.scenicArea]) {
+          ordersByScenic[order.scenicArea] = []
+        }
+        ordersByScenic[order.scenicArea].push(order)
+      })
+
+      // 生成结算列表数据
+      this.settlementList = Object.keys(ordersByScenic).map(scenicArea => ({
+        scenicArea: scenicArea,
+        weight: '100kg', // 示例数据，实际应根据订单计算
+        amount: '100元' // 示例数据，实际应根据订单计算
+      }))
+
+      // 显示确认弹窗
+      this.dialogVisible = true
+    },
+
+    handleConfirm() {
+      this.dialogVisible = false
+      // 跳转到订单详情页
+      this.$router.push('/order/orderDetail')
+    },
+
+    handleCancel() {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.page-title {
+  margin-bottom: 20px;
+  color: #303133;
+  font-weight: bold;
+}
+
+.filter-container {
+  background-color: #fff;
+  margin-bottom: 20px;
+
+  .filter-item {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 20px;
+
+    .label {
+      margin-right: 8px;
+      color: #606266;
+    }
+  }
+}
+
+.order-list-container {
+  background-color: #fff;
+
+  .list-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+
+    .list-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+      margin-right: 20px;
+    }
+  }
+}
+
+
+
+.el-table {
+  margin-bottom: 70px;
+}
+
+
+.el-button--text {
+  color: #409EFF;
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.el-table {
+  margin-top: 20px;
+  ::v-deep .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+}
+
+.generate-btn-container {
+  text-align: center;
+  margin: 20px 0;
+  padding: 20px 0;
+}
+</style>
diff --git a/src/views/order/settlementOrder/index.vue b/src/views/order/settlementOrder/index.vue
new file mode 100644
index 0000000..235318e
--- /dev/null
+++ b/src/views/order/settlementOrder/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="app-container">
+    <!-- 查询及操作区域 -->
+    <div class="head-container">
+      <div class="filter-container">
+        <el-input
+          v-model="query.batchNo"
+          placeholder="请输入结算单批次号"
+          class="filter-item"
+          style="width: 200px;"
+          clearable
+        />
+        <el-button type="primary" class="filter-item" @click="handleSearch">
+          <i class="el-icon-search" style="color: white;" />
+          查询
+        </el-button>
+        <el-button type="primary" class="filter-item" @click="handleGenerate">
+          生成结算单
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      ref="table"
+      v-loading="loading"
+      :data="tableData"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column prop="batchNo" label="订单批次号" align="left" />
+      <el-table-column prop="status" label="结算状态" align="left">
+        <template slot-scope="scope">
+          <span>{{ scope.row.status }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="settlementTime" label="结算时间" width="180" align="left" />
+      <el-table-column prop="operator" label="制单人" align="left" />
+      <el-table-column prop="exportTime" label="导出时间" width="180" align="left" />
+      <el-table-column prop="settlementStatus" label="结算状态" align="left">
+        <template slot-scope="scope">
+          <span>{{ scope.row.settlementStatus }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" align="center">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="handleDetail(scope.row)"
+          >
+            查看详情
+          </el-button>
+          <el-button
+            type="text"
+            size="small"
+            @click="handlePrint(scope.row)"
+          >
+            打印结算单
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-container">
+      <el-pagination
+        :current-page.sync="page.current"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'settlementOrder',
+  data() {
+    return {
+      loading: false,
+      query: {
+        batchNo: ''
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 2
+      },
+      tableData: [
+        {
+          batchNo: 'JS123456789',
+          status: '结算中',
+          settlementTime: '2025-01-01 00:00:00',
+          operator: '小明',
+          exportTime: '2025-01-01 00:00:00',
+          settlementStatus: '结算中'
+        },
+        {
+          batchNo: 'JS123456789',
+          status: '待付款',
+          settlementTime: '2025-01-01 00:00:00',
+          operator: '小明',
+          exportTime: '2025-01-01 00:00:00',
+          settlementStatus: '已确认'
+        }
+      ],
+      selection: []
+    }
+  },
+  methods: {
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log('搜索条件:', this.query)
+    },
+    handleSelectionChange(val) {
+      this.selection = val
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      // 重新加载数据
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      // 重新加载数据
+    },
+    handleDetail(row) {
+      // 查看详情
+      console.log('查看详情:', row)
+    },
+    handlePrint(row) {
+      // 打印结算单
+      console.log('打印结算单:', row)
+    },
+    handleGenerate() {
+      this.$router.push('/order/generateOrder')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.filter-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  gap: 10px;
+
+  .filter-item {
+    margin-right: 10px;
+  }
+}
+
+.pagination-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 200px;
+  height: 150px;
+  background: white;
+  padding: 10px;
+  text-align: left;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
+}
+.el-pagination {
+  padding: 2px 25px;
+}
+
+
+.el-table {
+  margin-bottom: 70px;
+}
+
+
+.el-button--text {
+  color: #409EFF;
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.el-table {
+  margin-top: 20px;
+  ::v-deep .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+}
+</style>
diff --git a/src/views/order/settlementOrder/orderDetail/index.vue b/src/views/order/settlementOrder/orderDetail/index.vue
new file mode 100644
index 0000000..3a28dab
--- /dev/null
+++ b/src/views/order/settlementOrder/orderDetail/index.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="app-container">
+    <!-- 页面标题 -->
+    <h2 class="page-title">结算单详情</h2>
+
+    <!-- 查询区域 -->
+    <div class="head-container">
+      <div class="filter-container">
+        <div class="filter-item">
+          <span class="label">订单批次号：</span>
+          <el-input
+            v-model="query.batchNo"
+            placeholder="请输入订单批次号"
+            style="width: 200px"
+            clearable
+          />
+        </div>
+        <div class="filter-item">
+          <span class="label">景区：</span>
+          <el-select
+            v-model="query.scenicArea"
+            placeholder="请选择景区"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="item in scenicAreaOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div class="filter-item">
+          <span class="label">日期：</span>
+          <el-date-picker
+            v-model="query.dateRange"
+            type="daterange"
+            range-separator="~"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+            :default-value="defaultDateRange"
+            style="width: 350px"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 订单列表区域 -->
+    <div class="order-list-container">
+      <div class="list-header">
+        <span class="list-title">订单列表：</span>
+      </div>
+
+      <!-- 表格 -->
+      <el-table
+        ref="table"
+        v-loading="loading"
+        :data="tableData"
+        style="width: 100%"
+      >
+        <el-table-column prop="customerName" label="客户名称" align="center" />
+        <el-table-column prop="phoneNumber" label="手机号码" align="center" />
+        <el-table-column
+          prop="orderTime"
+          label="下单时间"
+          align="center"
+          width="180"
+        />
+        <el-table-column prop="orderAmount" label="下单费用" align="center" />
+        <el-table-column prop="scenicArea" label="景区" align="center" />
+        <el-table-column prop="route" label="路线" align="center" />
+        <el-table-column prop="initiator" label="订单发起人" align="center" />
+        <el-table-column prop="orderType" label="订单类型" align="center" />
+        <el-table-column prop="orderStatus" label="订单状态" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderStatus }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="settlementStatus"
+          label="结算状态"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span :class="getSettlementStatusClass(scope.row.settlementStatus)">
+              {{ scope.row.settlementStatus }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination
+          :current-page.sync="page.current"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="page.size"
+          :total="page.total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <el-button
+        type="primary"
+        @click="handleCancelSettlement"
+        :disabled="settlementStatus !== '结算中'"
+      >
+        取消结算
+      </el-button>
+      <el-button type="primary" @click="handlePrint"> 打印结算单 </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "orderDetail",
+  data() {
+    const defaultStartDate = new Date("2015-10-02");
+    const defaultEndDate = new Date("2015-10-10");
+    return {
+      loading: false,
+      settlementStatus: "结算中", // 当前结算单状态
+      scenicAreaOptions: [
+        { value: "baiYunShan", label: "白云山" },
+        { value: "huangShan", label: "黄山" },
+        { value: "taiShan", label: "泰山" },
+      ],
+      query: {
+        batchNo: "",
+        scenicArea: "",
+        dateRange: [defaultStartDate, defaultEndDate],
+      },
+      defaultDateRange: [defaultStartDate, defaultEndDate],
+      page: {
+        current: 1,
+        size: 10,
+        total: 3,
+      },
+      tableData: [
+        {
+          customerName: "小明",
+          phoneNumber: "12345678",
+          orderTime: "2024-01-01 00:00:00",
+          orderAmount: "100.00",
+          scenicArea: "白云山",
+          route: "a-b",
+          initiator: "小红",
+          orderType: "载物飞行",
+          orderStatus: "已完成",
+          settlementStatus: "未结算",
+        },
+        {
+          customerName: "小明",
+          phoneNumber: "12345678",
+          orderTime: "2024-01-01 00:00:00",
+          orderAmount: "100.00",
+          scenicArea: "白云山",
+          route: "a-b",
+          initiator: "小红",
+          orderType: "载物飞行",
+          orderStatus: "进行中",
+          settlementStatus: "结算中",
+        },
+        {
+          customerName: "小明",
+          phoneNumber: "12345678",
+          orderTime: "2024-01-01 00:00:00",
+          orderAmount: "100.00",
+          scenicArea: "白云山",
+          route: "a-b",
+          initiator: "小红",
+          orderType: "载物飞行",
+          orderStatus: "已完成",
+          settlementStatus: "结算完成",
+        },
+      ],
+      selection: [],
+    };
+  },
+  methods: {
+    handleSearch() {
+      // 实现搜索逻辑
+      console.log("搜索条件:", this.query);
+    },
+    getSettlementStatusClass(status) {
+      return {
+        "status-red": ["未结算", "结算中"].includes(status),
+      };
+    },
+
+    handleCancelSettlement() {
+      if (this.settlementStatus === "结算中") {
+        // 更新所有订单的结算状态为未结算
+        this.tableData.forEach((order) => {
+          order.settlementStatus = "未结算";
+        });
+        this.settlementStatus = "未结算";
+        this.$message.success("已取消结算");
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val;
+      // 重新加载数据
+    },
+    handleCurrentChange(val) {
+      this.page.current = val;
+      // 重新加载数据
+    },
+    handleDetail(row) {
+      // 查看详情
+      console.log("查看详情:", row);
+    },
+    handlePrint() {
+      // 根据当前状态流转到下一个状态
+      switch (this.settlementStatus) {
+        case "结算中":
+          this.settlementStatus = "已确认";
+          this.$message.success("结算单状态已更新为：已确认");
+          break;
+        case "已确认":
+          this.settlementStatus = "已完成";
+          this.$message.success("结算单状态已更新为：已完成");
+          break;
+        case "已完成":
+          // 执行打印逻辑
+          console.log("打印结算单");
+          break;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 20px;
+}
+
+.page-title {
+  margin-bottom: 20px;
+  font-size: 22px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.filter-container {
+  background-color: #fff;
+  margin-bottom: 20px;
+
+  .filter-item {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 20px;
+
+    .label {
+      color: #606266;
+      margin-right: 8px;
+    }
+  }
+}
+
+.order-list-container {
+  background-color: #fff;
+
+  .list-header {
+    margin-bottom: 20px;
+
+    .list-title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #303133;
+    }
+  }
+}
+
+.action-buttons {
+  text-align: center;
+  margin: 20px 0;
+  padding: 20px 0;
+
+  .el-button {
+    margin: 0 10px;
+  }
+}
+
+.status-red {
+  color: #f56c6c;
+}
+
+// .pagination-container {
+//   position: fixed;
+//   bottom: 0;
+//   left: 200px;
+//   right: 0;
+//   height: 60px;
+//   background: white;
+//   padding: 10px;
+//   text-align: left;
+//   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
+//   z-index: 1000;
+// }
+
+// .el-pagination {
+//   padding: 10px 20px;
+// }
+
+.el-table {
+  margin-bottom: 70px;
+}
+
+.el-button--text {
+  color: #409eff;
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.el-table {
+  margin-top: 20px;
+  ::v-deep .el-table__body-wrapper {
+    overflow-x: auto;
+  }
+}
+</style>