From 110a57082b286c50edf4b28badbd670992dd4802 Mon Sep 17 00:00:00 2001
From: zhufu <17863654727@163.com>
Date: Wed, 11 Jun 2025 15:29:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=94=BB=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workmanagement/device/Aerocraft/index.vue |  72 +++++++++++
 .../workmanagement/device/Aerocraft/utils.ts  |  93 ++++++++++++++
 .../device/Airport/DeviceBindModal/index.vue  |  40 ++++++
 .../FeedbackDrawer/Equipment/index.vue        |  67 ++++++++++
 .../Airport/FeedbackDrawer/Equipment/utils.ts |  95 ++++++++++++++
 .../FeedbackDrawer/LogFeedback/index.vue      |  67 ++++++++++
 .../FeedbackDrawer/LogFeedback/utils.ts       |  90 +++++++++++++
 .../device/Airport/FeedbackDrawer/index.vue   |  20 +++
 .../workmanagement/device/Airport/index.vue   | 101 +++++++++++++++
 .../workmanagement/device/Airport/utils.ts    | 119 ++++++++++++++++++
 .../demo/workmanagement/device/index.vue      |  30 +++++
 11 files changed, 794 insertions(+)
 create mode 100644 src/views/demo/workmanagement/device/Aerocraft/index.vue
 create mode 100644 src/views/demo/workmanagement/device/Aerocraft/utils.ts
 create mode 100644 src/views/demo/workmanagement/device/Airport/DeviceBindModal/index.vue
 create mode 100644 src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/index.vue
 create mode 100644 src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/utils.ts
 create mode 100644 src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/index.vue
 create mode 100644 src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/utils.ts
 create mode 100644 src/views/demo/workmanagement/device/Airport/FeedbackDrawer/index.vue
 create mode 100644 src/views/demo/workmanagement/device/Airport/index.vue
 create mode 100644 src/views/demo/workmanagement/device/Airport/utils.ts
 create mode 100644 src/views/demo/workmanagement/device/index.vue

diff --git a/src/views/demo/workmanagement/device/Aerocraft/index.vue b/src/views/demo/workmanagement/device/Aerocraft/index.vue
new file mode 100644
index 0000000..af0f556
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Aerocraft/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary">导出飞行器信息</a-button>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:edit-outlined',
+              onClick: () => {
+              },
+            },
+            {
+              color: 'error',
+              icon: 'ant-design:delete-outlined',
+              onClick: () => {
+              },
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
+</template>
+
+<script setup lang="ts">
+import { h, } from "vue"
+import { EditOutlined } from '@ant-design/icons-vue'
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, dataSource, searchFormSchema } from './utils'
+const [registerTable, { reload, expandAll, getForm}] = useTable({
+  title: '飞行器',
+  // api: (params) => LoadCaseInfoLists(type,params),
+  dataSource,
+  columns,
+  rowKey: 'id',
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+  },
+  striped: false,
+  // 序号列
+  showIndexColumn: false,
+  // 使用搜索表单
+  useSearchForm: true,
+  // 显示表格设置工具
+  showTableSetting: true,
+  bordered: true,
+  beforeFetch(data) {
+    let params = {...data}
+    if(!params.nowStatus){
+      params.nowStatus = '复提待审核'
+    }
+    return params
+  },
+  afterFetch(data) {
+    console.log('afterFetch', data);
+  },
+  actionColumn: {
+    width: 100,
+    title: '操作',
+    dataIndex: 'action',
+  },
+  handleSearchInfoFn(info) {
+    return info;
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/workmanagement/device/Aerocraft/utils.ts b/src/views/demo/workmanagement/device/Aerocraft/utils.ts
new file mode 100644
index 0000000..589ed80
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Aerocraft/utils.ts
@@ -0,0 +1,93 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+export const columns = [
+  {
+    title: '设备型号',
+    dataIndex: 'model',
+  },
+  {
+    title: '设备SN',
+    dataIndex: 'sn',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '固件版本',
+    dataIndex: 'version',
+  },
+  {
+    title: '在线状态',
+    dataIndex: 'status',
+  },
+  {
+    title: '所属项目',
+    dataIndex: 'project',
+  },
+  {
+    title: '加入组织时间',
+    dataIndex: 'join_time',
+  },
+  {
+    title: '在线时间',
+    dataIndex: 'online_time',
+  },
+];
+export const dataSource = [
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, status: 555, project: 666, join_time: 777, online_time: 888 },
+]
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'project',
+    label: '项目',
+    component: 'Select',
+    componentProps: {
+      options: [
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'status',
+    label: '当前状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '在线', value: '在线' },
+        { label: '离线', value: '离线' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'model',
+    label: '设备型号',
+    component: 'Select',
+    componentProps: {
+      options: [
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sn',
+    label: '设备SN',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
\ No newline at end of file
diff --git a/src/views/demo/workmanagement/device/Airport/DeviceBindModal/index.vue b/src/views/demo/workmanagement/device/Airport/DeviceBindModal/index.vue
new file mode 100644
index 0000000..c836cca
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/DeviceBindModal/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="device-bind-content">
+    <p class="item-value">
+      请通过手机大疆行业 APP 或遥控器 DJI Pilot 2 的机场部署流程-云服务配置，以组织ID和设备绑定码来绑定机场
+    </p>
+    <div class="show-item">
+      <div class="item-label">组织名称</div>
+      <div class="item-value">TEST</div>
+    </div>
+    <div class="show-item">
+      <div class="item-label">组织 ID</div>
+      <div class="item-value">XDX9VU</div>
+    </div>
+    <div class="show-item">
+      <div class="item-label">设备绑定码</div>
+      <div class="item-value">6473D312</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {} from "vue"
+</script>
+
+<style lang="scss" scoped>
+.device-bind-content{
+  padding: 20px;
+  .item-value{
+    opacity: 0.7;
+  }
+  .show-item{
+    display: flex;
+    margin-bottom: 15px;
+    .item-label{
+      width: 150px; 
+      text-align: left;
+    }
+  }
+}
+</style>
diff --git a/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/index.vue b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/index.vue
new file mode 100644
index 0000000..b647f08
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:file-search-outlined',
+              onClick: () => {
+              },
+            },
+            {
+              icon: 'carbon:calendar-tools',
+              onClick: () => {
+              },
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
+</template>
+
+<script setup lang="ts">
+import {} from "vue"
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, dataSource, searchFormSchema } from './utils'
+const [registerTable, { reload, expandAll, getForm}] = useTable({
+  title: '设备定损',
+  // api: (params) => LoadCaseInfoLists(type,params),
+  dataSource,
+  columns,
+  rowKey: 'id',
+  formConfig: {
+    labelWidth: 100,
+    schemas: searchFormSchema,
+  },
+  striped: false,
+  // 序号列
+  showIndexColumn: false,
+  // 使用搜索表单
+  useSearchForm: true,
+  // 显示表格设置工具
+  showTableSetting: true,
+  bordered: true,
+  beforeFetch(data) {
+    let params = {...data}
+    if(!params.nowStatus){
+      params.nowStatus = '复提待审核'
+    }
+    return params
+  },
+  afterFetch(data) {
+    console.log('afterFetch', data);
+  },
+  actionColumn: {
+    width: 100,
+    title: '操作',
+    dataIndex: 'action',
+  },
+  handleSearchInfoFn(info) {
+    return info;
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/utils.ts b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/utils.ts
new file mode 100644
index 0000000..2b44112
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/Equipment/utils.ts
@@ -0,0 +1,95 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+export const columns = [
+  {
+    title: '操作时间',
+    dataIndex: 'operate_time',
+  },
+  {
+    title: '定损类型',
+    dataIndex: 'problem_type',
+  },
+  {
+    title: '操作人',
+    dataIndex: 'user',
+  },
+  {
+    title: '设备型号',
+    dataIndex: 'model',
+  },
+  {
+    title: '设备SN',
+    dataIndex: 'sn',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+  },
+];
+export const dataSource = [
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+  { operate_time: 111, problem_type:222, user: 333, model: 444, sn:'1.0.0', name:'test', status: 555},
+]
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'time',
+    component: 'RangePicker',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'type',
+    label: '定损类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '整机定损', value: '整机定损' },
+        { label: '空调制冷模块定损', value: '空调制冷模块定损' },
+        { label: '空调制热模块定损', value: '空调制热模块定损' },
+        { label: '快速定损', value: '快速定损' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'user',
+    label: '操作员',
+    component: 'Select',
+    componentProps: {
+      options: [
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待上传', value: '待上传' },
+        { label: '数据处理', value: '数据处理' },
+        { label: '上传中', value: '上传中' },
+        { label: '上传完成', value: '上传完成' },
+        { label: '上传失败', value: '上传失败' },
+        { label: '已暂停', value: '已暂停' },
+        { label: '已取消', value: '已取消' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sn',
+    label: '设备SN',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
\ No newline at end of file
diff --git a/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/index.vue b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/index.vue
new file mode 100644
index 0000000..4b7cedc
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:file-search-outlined',
+              onClick: () => {
+              },
+            },
+            {
+              icon: 'carbon:calendar-tools',
+              onClick: () => {
+              },
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
+</template>
+
+<script setup lang="ts">
+import {} from "vue"
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, dataSource, searchFormSchema } from './utils'
+const [registerTable, { reload, expandAll, getForm}] = useTable({
+  title: '日志反馈',
+  // api: (params) => LoadCaseInfoLists(type,params),
+  dataSource,
+  columns,
+  rowKey: 'id',
+  formConfig: {
+    labelWidth: 100,
+    schemas: searchFormSchema,
+  },
+  striped: false,
+  // 序号列
+  showIndexColumn: false,
+  // 使用搜索表单
+  useSearchForm: true,
+  // 显示表格设置工具
+  showTableSetting: true,
+  bordered: true,
+  beforeFetch(data) {
+    let params = {...data}
+    if(!params.nowStatus){
+      params.nowStatus = '复提待审核'
+    }
+    return params
+  },
+  afterFetch(data) {
+    console.log('afterFetch', data);
+  },
+  actionColumn: {
+    width: 100,
+    title: '操作',
+    dataIndex: 'action',
+  },
+  handleSearchInfoFn(info) {
+    return info;
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/utils.ts b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/utils.ts
new file mode 100644
index 0000000..a3fa020
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/LogFeedback/utils.ts
@@ -0,0 +1,90 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+export const columns = [
+  {
+    title: '反馈时间',
+    dataIndex: 'feedback_time',
+  },
+  {
+    title: '反馈人',
+    dataIndex: 'feedback_user',
+  },
+  {
+    title: '设备型号',
+    dataIndex: 'model',
+  },
+  {
+    title: '设备SN',
+    dataIndex: 'sn',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '设备异常描述',
+    dataIndex: 'description',
+  },
+  {
+    title: '上传状态',
+    dataIndex: 'status',
+  },
+];
+export const dataSource = [
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+  { feedback_time: 111, feedback_user:222, model: 333, sn: 444, name:'1.0.0', description:'test', status: 555},
+]
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'time',
+    component: 'RangePicker',
+    // componentProps: {
+    //   options: [
+    //     { label: '固件待升级', value: '固件待升级' },
+    //     { label: '固件一致性升级', value: '固件一致性升级' },
+    //     { label: '飞行安全数据库待升级', value: '飞行安全数据库待升级' },
+    //   ],
+    // },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'feedback_user',
+    label: '反馈人',
+    component: 'Select',
+    componentProps: {
+      options: [
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待上传', value: '待上传' },
+        { label: '数据处理', value: '数据处理' },
+        { label: '上传中', value: '上传中' },
+        { label: '上传完成', value: '上传完成' },
+        { label: '上传失败', value: '上传失败' },
+        { label: '已暂停', value: '已暂停' },
+        { label: '已取消', value: '已取消' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sn',
+    label: '设备SN',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
\ No newline at end of file
diff --git a/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/index.vue b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/index.vue
new file mode 100644
index 0000000..3efe975
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/FeedbackDrawer/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <a-tabs v-model:activeKey="activeKey" class="device-tabs">
+    <a-tab-pane key="log" tab="日志反馈">
+      <LogFeedback />
+    </a-tab-pane>
+    <a-tab-pane key="equipment" tab="设备定损">
+      <Equipment />
+    </a-tab-pane>
+  </a-tabs>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import LogFeedback from './LogFeedback/index.vue'
+import Equipment from './Equipment/index.vue'
+
+const activeKey = ref('log')
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/demo/workmanagement/device/Airport/index.vue b/src/views/demo/workmanagement/device/Airport/index.vue
new file mode 100644
index 0000000..defc52f
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
+    <template #toolbar>
+      <a-button type="primary" @click="openFeedbackDrawer">设备定损与反馈</a-button>
+      <a-button type="primary" @click="openDeviceBindingModal">设备绑定码</a-button>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:file-search-outlined',
+              onClick: () => {
+              },
+            },
+            {
+              icon: 'carbon:calendar-tools',
+              onClick: () => {
+              },
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
+  <a-drawer class="feedback-drawer" v-model:open="feedbackDrawer" width="80%" :closable="false">
+    <FeedbackDrawer />
+  </a-drawer>
+  <a-modal v-model:open="deviceBindingModal" title="设备绑定码" @ok="handleOk">
+    <DeviceBindModal />
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import { BasicTable, useTable, TableAction } from '@/components/Table';
+import { columns, dataSource, searchFormSchema } from './utils'
+import FeedbackDrawer from './FeedbackDrawer/index.vue'
+import DeviceBindModal from './DeviceBindModal/index.vue'
+
+const feedbackDrawer = ref(false)
+const deviceBindingModal = ref(false)
+const [registerTable, { reload, expandAll, getForm}] = useTable({
+  title: '机场',
+  // api: (params) => LoadCaseInfoLists(type,params),
+  dataSource,
+  columns,
+  rowKey: 'id',
+  formConfig: {
+    labelWidth: 100,
+    schemas: searchFormSchema,
+  },
+  striped: false,
+  // 序号列
+  showIndexColumn: false,
+  // 使用搜索表单
+  useSearchForm: true,
+  // 显示表格设置工具
+  showTableSetting: true,
+  bordered: true,
+  beforeFetch(data) {
+    let params = {...data}
+    if(!params.nowStatus){
+      params.nowStatus = '复提待审核'
+    }
+    return params
+  },
+  afterFetch(data) {
+    console.log('afterFetch', data);
+  },
+  actionColumn: {
+    width: 100,
+    title: '操作',
+    dataIndex: 'action',
+  },
+  handleSearchInfoFn(info) {
+    return info;
+  },
+});
+const openFeedbackDrawer = () => {
+  feedbackDrawer.value = true
+}
+const openDeviceBindingModal = () => {
+  deviceBindingModal.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+// .feedback-drawer{
+//   :deep(.ant-drawer-body){
+//     padding: 0px;
+//   }
+// }
+// </style>
+// <style lang="scss">
+// .feedback-drawer{
+//   .ant-drawer-body{
+//     padding: 0px;
+//   }
+// }
+</style>
diff --git a/src/views/demo/workmanagement/device/Airport/utils.ts b/src/views/demo/workmanagement/device/Airport/utils.ts
new file mode 100644
index 0000000..e68a4d7
--- /dev/null
+++ b/src/views/demo/workmanagement/device/Airport/utils.ts
@@ -0,0 +1,119 @@
+import { BasicColumn, FormSchema } from '@/components/Table';
+export const columns = [
+  {
+    title: '设备型号',
+    dataIndex: 'model',
+  },
+  {
+    title: '设备SN',
+    dataIndex: 'sn',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '固件版本',
+    dataIndex: 'version',
+  },
+  {
+    title: '固件升级',
+    dataIndex: 'upgrade',
+  },
+  {
+    title: '飞行安全数据库',
+    dataIndex: 'database',
+  },
+  {
+    title: '工作状态',
+    dataIndex: 'status',
+  },
+  {
+    title: '所属项目',
+    dataIndex: 'project',
+  },
+  {
+    title: '加入组织时间',
+    dataIndex: 'join_time',
+  },
+  {
+    title: '在线时间',
+    dataIndex: 'online_time',
+  },
+];
+export const dataSource = [
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+  { model: 111, sn:222, name: 333, version: 444, upgrade:'1.0.0', database:'test', status: 555, project: 666, join_time: 777, online_time: 888 },
+]
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'upgrade_status',
+    label: '升级状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '固件待升级', value: '固件待升级' },
+        { label: '固件一致性升级', value: '固件一致性升级' },
+        { label: '飞行安全数据库待升级', value: '飞行安全数据库待升级' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'work_status',
+    label: '工作状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '全部工作状态', value: '全部工作状态' },
+        { label: '设备空闲中', value: '设备空闲中' },
+        { label: '现场调试中', value: '现场调试中' },
+        { label: '远程调试中', value: '远程调试中' },
+        { label: '设备作业中', value: '设备作业中' },
+        { label: '设备升级中', value: '设备升级中' },
+        { label: '设备已离线', value: '设备已离线' },
+        { label: '未标定', value: '未标定' },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'project',
+    label: '项目',
+    component: 'Select',
+    componentProps: {
+      options: [
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'model',
+    label: '设备型号',
+    component: 'Select',
+    componentProps: {
+      options: [
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sn',
+    label: '设备SN',
+    component: 'Input',
+    colProps: { span: 6 },
+  },
+];
\ No newline at end of file
diff --git a/src/views/demo/workmanagement/device/index.vue b/src/views/demo/workmanagement/device/index.vue
new file mode 100644
index 0000000..0f57ae3
--- /dev/null
+++ b/src/views/demo/workmanagement/device/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="device-page">
+    <a-tabs v-model:activeKey="activeKey" class="device-tabs">
+      <a-tab-pane key="airport" tab="机场">
+        <Airport />
+      </a-tab-pane>
+      <a-tab-pane key="aerocraft" tab="飞行器">
+        <Aerocraft />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+import Airport from './Airport/index.vue'
+import Aerocraft from './Aerocraft/index.vue'
+const activeKey = ref('airport')
+
+</script>
+
+<style lang="scss" scoped>
+.device-page{
+  .device-tabs{
+    :deep(.ant-tabs-nav-wrap){
+      padding-left: 20px;
+    }
+  }
+}
+</style>

From be56bbf0fcc79516d17e10a7ae789a20d7260611 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Thu, 12 Jun 2025 15:07:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AA=92=E4=BD=93=E5=BA=93-=E7=AC=AC?=
 =?UTF-8?q?=E4=BA=8C=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  12 +-
 src/components/MapboxMaps/src/config.ts       |   2 +-
 src/views/demo/system/mediaLibrary/index.vue  | 279 +++++++-----
 .../demo/system/mediaLibrary/preview/Map.vue  | 332 ++++----------
 .../system/mediaLibrary/preview/preview.vue   |   8 +-
 .../mediaLibrary/preview/previewImage.vue     |   4 +-
 .../preview/previewInformation.vue            |   2 +-
 .../mediaLibrary/preview/previewVideo.vue     |   1 +
 .../mediaLibrary/priview2D3D/model2D.vue      | 428 ++++++++++++++++++
 .../mediaLibrary/priview2D3D/model3D.vue      | 126 ++++++
 .../mediaLibrary/priview2D3D/modelModal.vue   | 264 +++++++++++
 .../mediaLibrary/priview2D3D/preview.ts       |  10 -
 .../mediaLibrary/priview2D3D/preview.vue      |   5 -
 13 files changed, 1083 insertions(+), 390 deletions(-)
 create mode 100644 src/views/demo/system/mediaLibrary/priview2D3D/model2D.vue
 create mode 100644 src/views/demo/system/mediaLibrary/priview2D3D/model3D.vue
 create mode 100644 src/views/demo/system/mediaLibrary/priview2D3D/modelModal.vue
 delete mode 100644 src/views/demo/system/mediaLibrary/priview2D3D/preview.ts
 delete mode 100644 src/views/demo/system/mediaLibrary/priview2D3D/preview.vue

diff --git a/package.json b/package.json
index 8b8f1a1..6ea9c50 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
     "bpmn-js-properties-panel": "^5.13.0",
     "bpmn-js-token-simulation": "^0.33.1",
     "ceel-json-editor": "^0.0.3",
+    "cesium": "^1.130.0",
     "codemirror": "^5.65.16",
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
@@ -99,10 +100,14 @@
     "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "element-plus": "^2.6.0",
+    "esbuild": "^0.19.12",
     "exceljs": "^4.4.0",
     "fabric": "^4.6.0",
     "highlight.js": "^11.9.0",
+    "js-base64": "3.7.7",
     "js-md5": "^0.8.3",
+    "jsencrypt": "^3.3.2",
+    "jszip": "^3.10.1",
     "kml-geojson": "^1.2.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
@@ -126,6 +131,7 @@
     "qs": "^6.11.2",
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
+    "shpjs": "^6.1.0",
     "sortablejs": "^1.15.1",
     "terraformer-wkt-parser": "^1.2.1",
     "three": "^0.145.0",
@@ -134,6 +140,7 @@
     "uuid": "^9.0.1",
     "vditor": "^3.9.8",
     "video.js": "^8.6.1",
+    "vite-plugin-cesium": "^1.2.23",
     "vue": "3.3.4",
     "vue-color-kit": "^1.0.6",
     "vue-i18n": "^9.8.0",
@@ -148,10 +155,7 @@
     "vxe-table-plugin-export-xlsx": "^3.1.0",
     "xe-utils": "^3.5.14",
     "xlsx": "^0.18.5",
-    "xml-js": "^1.6.11",
-    "jszip":"^3.10.1",
-    "shpjs":"^6.1.0",
-    "js-base64":"3.7.7"
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",
diff --git a/src/components/MapboxMaps/src/config.ts b/src/components/MapboxMaps/src/config.ts
index 00eb631..4119bfa 100644
--- a/src/components/MapboxMaps/src/config.ts
+++ b/src/components/MapboxMaps/src/config.ts
@@ -1,5 +1,5 @@
 export enum MapboxConfig {
-  ACCESS_TOKEN = 'pk.eyJ1IjoiemhhbmcxMjM4ODk5OSIsImEiOiJja3N5Ync1cXcyMTR2Mm9xempmbGE4MnBtIn0.R-j78CRvbs6JZG-MDSoh8Q',
+  ACCESS_TOKEN = 'pk.eyJ1IjoiY3VybXVkZ2VvbnBoZCIsImEiOiJjbHAxZXU2dmwwajV6MmxwZzRpdXhobjB2In0.uIuuAtk1EtV7HSbjpUfeOw',
   // ACCESS_TOKEN = "1234",
   TDT_TOKEN = 'b6585bc41ee16251dbe6b1af64f375d9',
   // add more config options here
diff --git a/src/views/demo/system/mediaLibrary/index.vue b/src/views/demo/system/mediaLibrary/index.vue
index 2186830..080ab6b 100644
--- a/src/views/demo/system/mediaLibrary/index.vue
+++ b/src/views/demo/system/mediaLibrary/index.vue
@@ -59,6 +59,15 @@
       @ok="handleOk"
     >
       <Preview
+        v-if="nowPreviewRecord.type == 'img' || nowPreviewRecord.type == 'video'"
+        :nowPreviewRecord="nowPreviewRecord"
+        :previewRecordList="previewRecordList"
+        @chooseNowPreviewRecord="chooseNowPreviewRecord"
+        @closeModal="closeModal"
+        @reloadTable="reload"
+      />
+      <ModelModal
+        v-if="nowPreviewRecord.type.includes('model')"
         :nowPreviewRecord="nowPreviewRecord"
         :previewRecordList="previewRecordList"
         @chooseNowPreviewRecord="chooseNowPreviewRecord"
@@ -93,6 +102,7 @@
   import { CompressFileModal } from './modal/modal';
   import { RenameModal } from './modal/modal';
   import Preview from './preview/preview.vue';
+  import ModelModal from './priview2D3D/modelModal.vue';
   import { PermissionBtn } from '@/components/PermissionBtn/index';
   import { columns, searchFormSchema } from './modal.data';
   import dayjs from 'dayjs';
@@ -142,117 +152,125 @@
       ],
     },
     {
-      id: '1-2',
-      name: '南山风景照.jpg',
-      createTime: '2020-10-22 17:33:22',
-      type: 'img',
-      url: 'https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp',
-      imgtype: '原片',
-      taskname: '佛山大火救援项目',
-      airlineName: '火灾救援勘查航线',
-      width: 889,
-      height: 500,
-      size: '6.2M',
-      photographFeiji: '救援机1007',
-      photographNumber: 'GD610',
-      photographMan: 'zachzhou',
-      photographTime: '2020-10-22 00:00:00',
-      label: ['人', '车'],
-      lat: 35.362625,
-      lng: 118.033886,
-      canvasJson:
-        '{"version":"4.6.0","objects":[{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":520.5,"top":634,"width":0,"height":0,"fill":null,"stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",520.999,634.5],["L",521.001,634.5]]},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":523,"top":352.5,"width":100,"height":100,"fill":"#ffffff00","stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.73,"scaleY":0.73,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"textbox","version":"4.6.0","originX":"left","originY":"top","left":523,"top":426.5,"width":200,"height":22.6,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"fontFamily":"Times New Roman","fontWeight":"normal","fontSize":20,"text":"太阳","underline":false,"overline":false,"linethrough":false,"textAlign":"left","fontStyle":"normal","lineHeight":1.16,"textBackgroundColor":"","charSpacing":0,"styles":{},"direction":"ltr","path":null,"pathStartOffset":0,"pathSide":"left","minWidth":20,"splitByGrapheme":false},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":784,"top":436.5,"width":190.01,"height":85.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",785.996,438.496],["Q",786,438.5,786.5,438.5],["Q",787,438.5,790.5,440],["Q",794,441.5,798.5,443.5],["Q",803,445.5,808,448],["Q",813,450.5,820,453.5],["Q",827,456.5,880,480.5],["Q",933,504.5,940,508],["Q",947,511.5,952.5,514],["Q",958,516.5,962.5,518],["Q",967,519.5,970,521],["Q",973,522.5,974.5,523],["L",976.004,523.504]]},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":808,"top":417.5,"width":123.01,"height":124.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",933.004,419.496],["Q",933,419.5,931.5,420.5],["Q",930,421.5,928,425],["Q",926,428.5,921.5,433],["Q",917,437.5,914,441.5],["Q",911,445.5,905.5,450.5],["Q",900,455.5,894,462],["Q",888,468.5,883,473.5],["Q",878,478.5,872,484.5],["Q",866,490.5,861.5,495],["Q",857,499.5,851,504.5],["Q",845,509.5,841.5,513],["Q",838,516.5,833.5,520],["Q",829,523.5,826,526.5],["Q",823,529.5,820,533],["Q",817,536.5,815,538],["Q",813,539.5,812.5,540.5],["Q",812,541.5,811,542.5],["L",809.996,543.504]]}],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":889,"height":500,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1.46,"scaleY":1.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp","crossOrigin":null,"filters":[]}}',
+      id: '2',
+      name: '图片',
+      createtime: '2025-03-24 18:13:17',
+      type: 'folder',
+      children: [
+        {
+          id: '1-2',
+          name: '南山风景照.jpg',
+          createTime: '2020-10-22 17:33:22',
+          type: 'img',
+          url: 'https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp',
+          imgtype: '原片',
+          taskname: '佛山大火救援项目',
+          airlineName: '火灾救援勘查航线',
+          width: 889,
+          height: 500,
+          size: '6.2M',
+          photographFeiji: '救援机1007',
+          photographNumber: 'GD610',
+          photographMan: 'zachzhou',
+          photographTime: '2020-10-22 00:00:00',
+          label: ['人', '车'],
+          lat: 35.362625,
+          lng: 118.033886,
+          canvasJson:
+            '{"version":"4.6.0","objects":[{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":520.5,"top":634,"width":0,"height":0,"fill":null,"stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",520.999,634.5],["L",521.001,634.5]]},{"type":"rect","version":"4.6.0","originX":"left","originY":"top","left":523,"top":352.5,"width":100,"height":100,"fill":"#ffffff00","stroke":"#ffffff","strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.73,"scaleY":0.73,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"rx":0,"ry":0},{"type":"textbox","version":"4.6.0","originX":"left","originY":"top","left":523,"top":426.5,"width":200,"height":22.6,"fill":"#ffffff","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"fontFamily":"Times New Roman","fontWeight":"normal","fontSize":20,"text":"太阳","underline":false,"overline":false,"linethrough":false,"textAlign":"left","fontStyle":"normal","lineHeight":1.16,"textBackgroundColor":"","charSpacing":0,"styles":{},"direction":"ltr","path":null,"pathStartOffset":0,"pathSide":"left","minWidth":20,"splitByGrapheme":false},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":784,"top":436.5,"width":190.01,"height":85.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",785.996,438.496],["Q",786,438.5,786.5,438.5],["Q",787,438.5,790.5,440],["Q",794,441.5,798.5,443.5],["Q",803,445.5,808,448],["Q",813,450.5,820,453.5],["Q",827,456.5,880,480.5],["Q",933,504.5,940,508],["Q",947,511.5,952.5,514],["Q",958,516.5,962.5,518],["Q",967,519.5,970,521],["Q",973,522.5,974.5,523],["L",976.004,523.504]]},{"type":"path","version":"4.6.0","originX":"left","originY":"top","left":808,"top":417.5,"width":123.01,"height":124.01,"fill":null,"stroke":"#ffffff","strokeWidth":4,"strokeDashArray":null,"strokeLineCap":"round","strokeDashOffset":0,"strokeLineJoin":"round","strokeUniform":false,"strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",933.004,419.496],["Q",933,419.5,931.5,420.5],["Q",930,421.5,928,425],["Q",926,428.5,921.5,433],["Q",917,437.5,914,441.5],["Q",911,445.5,905.5,450.5],["Q",900,455.5,894,462],["Q",888,468.5,883,473.5],["Q",878,478.5,872,484.5],["Q",866,490.5,861.5,495],["Q",857,499.5,851,504.5],["Q",845,509.5,841.5,513],["Q",838,516.5,833.5,520],["Q",829,523.5,826,526.5],["Q",823,529.5,820,533],["Q",817,536.5,815,538],["Q",813,539.5,812.5,540.5],["Q",812,541.5,811,542.5],["L",809.996,543.504]]}],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":889,"height":500,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1.46,"scaleY":1.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://cdn.colorhub.me/QgpUMkZxNhU/rs:auto:0:500:0/g:ce/fn:colorhub/bG9jYWw6Ly8vZmIvNmYvMjlkMTE1NjRkNmI5ZmRhOTczYmU3ZmUyNmMyMDkwM2MwZjU5ZmI2Zi5qcGVn.webp","crossOrigin":null,"filters":[]}}',
+        },
+        {
+          id: '1-3',
+          name: '风景图.jpg',
+          createTime: '2020-10-22 17:33:22',
+          type: 'img',
+          url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
+          imgtype: '原片2',
+          taskname: '佛山大火救援项目2',
+          airlineName: '火灾救援勘查航线2',
+          width: 2000,
+          height: 1334,
+          size: '1.63M',
+          photographFeiji: '救援机1008',
+          photographNumber: 'GD610',
+          photographMan: 'zachzhou',
+          photographTime: '2020-10-22 00:00:00',
+          label: ['人', '车'],
+          lat: 35.362625,
+          lng: 118.033886,
+          canvasJson:
+            '{"version":"4.6.0","objects":[],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":2000,"height":1334,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.65,"scaleY":0.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871","crossOrigin":null,"filters":[]}}',
+        },
+        {
+          id: '1-4',
+          name: '红外照片.jpg',
+          createTime: '2020-10-22 17:33:22',
+          type: 'img',
+          url: 'https://pic.rmb.bdstatic.com/bjh/gallery/8c885a0e3cf0647b60548535e2e9ca39.jpeg',
+          imgtype: '红外照片',
+          taskname: '佛山大火救援项目-红外照片',
+          airlineName: '火灾救援勘查航线',
+          width: 640,
+          height: 480,
+          size: '6.2M',
+          photographFeiji: '救援机1007',
+          photographNumber: 'GD610',
+          photographMan: 'zachzhou',
+          photographTime: '2020-10-22 00:00:00',
+          label: ['人', '车'],
+          lat: 35.362625,
+          lng: 118.033886,
+        },
+        {
+          id: '1-5',
+          name: '广角照片.jpg',
+          createTime: '2020-10-22 17:33:22',
+          type: 'img',
+          url: 'https://img2.baidu.com/it/u=2490853491,3226002419&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
+          imgtype: '广角照片',
+          taskname: '佛山大火救援项目-广角照片',
+          airlineName: '火灾救援勘查航线',
+          width: 749,
+          height: 500,
+          size: '6.2M',
+          photographFeiji: '救援机1007',
+          photographNumber: 'GD610',
+          photographMan: 'zachzhou',
+          photographTime: '2020-10-22 00:00:00',
+          label: ['人', '车'],
+          lat: 35.362625,
+          lng: 118.033886,
+        },
+        {
+          id: '1-6',
+          name: '变焦照片.jpg',
+          createTime: '2020-10-22 17:33:22',
+          type: 'img',
+          url: 'https://img2.baidu.com/it/u=3778652155,475195343&fm=253&fmt=auto&app=138&f=PNG?w=500&h=518',
+          imgtype: '变焦照片',
+          taskname: '佛山大火救援项目-变焦照片',
+          airlineName: '火灾救援勘查航线',
+          width: 500,
+          height: 518,
+          size: '6.2M',
+          photographFeiji: '救援机1007',
+          photographNumber: 'GD610',
+          photographMan: 'zachzhou',
+          photographTime: '2020-10-22 00:00:00',
+          label: ['人', '车'],
+          lat: 35.362625,
+          lng: 118.033886,
+        },
+      ],
     },
     {
-      id: '1-3',
-      name: '风景图.jpg',
-      createTime: '2020-10-22 17:33:22',
-      type: 'img',
-      url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
-      imgtype: '原片2',
-      taskname: '佛山大火救援项目2',
-      airlineName: '火灾救援勘查航线2',
-      width: 2000,
-      height: 1334,
-      size: '1.63M',
-      photographFeiji: '救援机1008',
-      photographNumber: 'GD610',
-      photographMan: 'zachzhou',
-      photographTime: '2020-10-22 00:00:00',
-      label: ['人', '车'],
-      lat: 35.362625,
-      lng: 118.033886,
-      canvasJson:
-        '{"version":"4.6.0","objects":[],"backgroundImage":{"type":"image","version":"4.6.0","originX":"left","originY":"top","left":0,"top":0,"width":2000,"height":1334,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.65,"scaleY":0.6,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"src":"https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871","crossOrigin":null,"filters":[]}}',
-    },
-    {
-      id: '1-4',
-      name: '红外照片.jpg',
-      createTime: '2020-10-22 17:33:22',
-      type: 'img',
-      url: 'https://pic.rmb.bdstatic.com/bjh/gallery/8c885a0e3cf0647b60548535e2e9ca39.jpeg',
-      imgtype: '红外照片',
-      taskname: '佛山大火救援项目-红外照片',
-      airlineName: '火灾救援勘查航线',
-      width: 640,
-      height: 480,
-      size: '6.2M',
-      photographFeiji: '救援机1007',
-      photographNumber: 'GD610',
-      photographMan: 'zachzhou',
-      photographTime: '2020-10-22 00:00:00',
-      label: ['人', '车'],
-      lat: 35.362625,
-      lng: 118.033886,
-    },
-    {
-      id: '1-5',
-      name: '广角照片.jpg',
-      createTime: '2020-10-22 17:33:22',
-      type: 'img',
-      url: 'https://img2.baidu.com/it/u=2490853491,3226002419&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
-      imgtype: '广角照片',
-      taskname: '佛山大火救援项目-广角照片',
-      airlineName: '火灾救援勘查航线',
-      width: 749,
-      height: 500,
-      size: '6.2M',
-      photographFeiji: '救援机1007',
-      photographNumber: 'GD610',
-      photographMan: 'zachzhou',
-      photographTime: '2020-10-22 00:00:00',
-      label: ['人', '车'],
-      lat: 35.362625,
-      lng: 118.033886,
-    },
-    {
-      id: '1-6',
-      name: '变焦照片.jpg',
-      createTime: '2020-10-22 17:33:22',
-      type: 'img',
-      url: 'https://img2.baidu.com/it/u=3778652155,475195343&fm=253&fmt=auto&app=138&f=PNG?w=500&h=518',
-      imgtype: '变焦照片',
-      taskname: '佛山大火救援项目-变焦照片',
-      airlineName: '火灾救援勘查航线',
-      width: 500,
-      height: 518,
-      size: '6.2M',
-      photographFeiji: '救援机1007',
-      photographNumber: 'GD610',
-      photographMan: 'zachzhou',
-      photographTime: '2020-10-22 00:00:00',
-      label: ['人', '车'],
-      lat: 35.362625,
-      lng: 118.033886,
-    },
-    {
-      id: '41',
+      id: '3',
       name: '视频',
       createtime: '2025-03-24 18:13:17',
       type: 'folder',
       children: [
         {
-          id: '4-4',
+          id: '3-4',
           name: 'XZD153狼窝沟西南',
           createTime: '',
           type: 'video',
@@ -260,7 +278,7 @@
           manufacturer: '海康',
         },
         {
-          id: '4-5',
+          id: '3-5',
           name: '费县马庄镇陈家鱼后村南斜坡后村',
           createTime: '',
           type: 'video',
@@ -268,7 +286,7 @@
           manufacturer: '腾讯',
         },
         {
-          id: '4-6',
+          id: '3-6',
           name: '可落',
           createTime: '',
           type: 'video',
@@ -276,7 +294,7 @@
           manufacturer: '乐橙',
         },
         {
-          id: '4-7',
+          id: '3-7',
           name: '费县薛庄镇东张林村村南可见光',
           createTime: '',
           type: 'video',
@@ -285,6 +303,44 @@
         },
       ],
     },
+    {
+      id: '4',
+      name: '模型',
+      createtime: '2025-03-24 18:13:17',
+      type: 'folder',
+      children: [
+        {
+          id: '4-1',
+          name: '天空之城 二维模型',
+          createtime: '2025-03-24 18:13:17',
+          type: 'model2D',
+          url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
+          boundary: {
+            end_lat: 22.57965964566081,
+            end_lng: 113.93899440765381,
+            max_level: 23,
+            min_level: 12,
+            start_lat: 22.578193485606185,
+            start_lng: 113.93697738647461,
+          },
+        },
+        {
+          id: '4-2',
+          name: '天空之城 三维模型',
+          createtime: '2025-03-24 18:13:17',
+          type: 'model3D',
+          url: 'https://m.tuniucdn.com/fb2/t1/G5/M00/44/52/Cii-s1soezyIF2UxABn76u-yKl8AAIwBgB34jAAGfwC3020871',
+          boundary: {
+            end_lat: 22.57965964566081,
+            end_lng: 113.93899440765381,
+            max_level: 23,
+            min_level: 12,
+            start_lat: 22.578193485606185,
+            start_lng: 113.93697738647461,
+          },
+        },
+      ],
+    },
   ]);
 
   const tableType = ref('table');
@@ -301,15 +357,6 @@
     },
     rowSelection: {
       type: 'checkbox',
-      // onChange: (selectedRowKeys, selectedRows) => {
-      //   console.log(selectedRowKeys, selectedRows);
-      // },
-      // onSelect: (record, selected, selectedRows) => {
-      //   console.log(record, selected, selectedRows);
-      // },
-      // onSelectAll: (selected, selectedRows, changeRows) => {
-      //   console.log(selected, selectedRows, changeRows);
-      // },
     },
     striped: false,
     bordered: false,
diff --git a/src/views/demo/system/mediaLibrary/preview/Map.vue b/src/views/demo/system/mediaLibrary/preview/Map.vue
index 827fed7..926f38d 100644
--- a/src/views/demo/system/mediaLibrary/preview/Map.vue
+++ b/src/views/demo/system/mediaLibrary/preview/Map.vue
@@ -1,261 +1,97 @@
 <template>
-  <div
-    style="position: relative; height: 100%"
-    ref="vChartRef"
-    :id="'mars3d-container-' + name"
-  ></div>
+  <div :id="mapId" class="map"> </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue';
-  import * as mars3d from 'mars3d';
-  import { useModal } from '@/components/Modal';
-  import { EventBus } from '@/utils/eventBus';
+  import { defineProps, ref, onMounted, onUnmounted, defineEmits, computed } from 'vue';
+  import { v4 as uuidv4 } from 'uuid';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
   import axios from 'axios';
+  import {
+    ExpandOutlined,
+    CompressOutlined,
+    PlusOutlined,
+    MinusOutlined,
+    HeatMapOutlined,
+  } from '@ant-design/icons-vue';
 
-  const [editModal, { openModal: openEidtModal }] = useModal();
-
-  let map: mars3d.Map; // 地图对象
-
-  let mapIns: any = null;
-  let markers: any = [];
-  let AMapIns: any = null;
-
-  const vChartRef = ref<HTMLElement>();
   const props = defineProps(['nowPreviewRecord']);
+  const emits = defineEmits(['getMap']);
+
+  const mapId = `modal-map-${uuidv4()}`;
+  const networkType = ref('WAN');
+  let map: Map;
+
+  const initMap = () => {
+    let mapDataSources: any = {
+      'raster-tiles': {
+        type: 'raster',
+        tiles: [
+          `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
+        ],
+        tileSize: 256,
+        minzoom: 1,
+        maxzoom: 17,
+      },
+      'raster-tiles-font': {
+        type: 'raster',
+        tiles: [
+          `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
+        ],
+        tileSize: 256,
+      },
+    };
+    let mapDataLayers: any = [
+      {
+        id: 'tdt-vec-tiles',
+        type: 'raster',
+        source: 'raster-tiles-font',
+      },
+      {
+        id: 'tdt-img-tiles',
+        type: 'raster',
+        source: 'raster-tiles',
+      },
+    ];
+
+    return new mapboxgl.Map({
+      container: mapId,
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      style: {
+        glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+        version: 8,
+        sources: mapDataSources,
+        layers: mapDataLayers,
+      },
+      maxZoom: 22,
+      minZoom: 8,
+      pitch: 0,
+      zoom: 14,
+      center: [117.984425, 35.270654],
+    });
+  };
 
   onMounted(() => {
-    let options = {
-      scene: {
-        center: {
-          lat: props.nowPreviewRecord.lat,
-          lng: props.nowPreviewRecord.lng,
-          alt: 8306.3,
-          heading: 360,
-          pitch: -45,
-        },
-        scene3DOnly: false,
-        shadows: false,
-        removeDblClick: true,
-        sceneMode: 3,
-        showSun: true,
-        showMoon: true,
-        showSkyBox: true,
-        showSkyAtmosphere: true,
-        fog: true,
-        fxaa: true,
-        requestRenderMode: true,
-        contextOptions: {
-          requestWebgl1: false,
-          webgl: {
-            preserveDrawingBuffer: true,
-            alpha: false,
-            stencil: true,
-            powerPreference: 'high-performance',
-          },
-        },
-        globe: {
-          depthTestAgainstTerrain: false,
-          baseColor: '#546a53',
-          showGroundAtmosphere: true,
-          enableLighting: false,
-        },
-        cameraController: {
-          zoomFactor: 3,
-          minimumZoomDistance: 1,
-          maximumZoomDistance: 50000000,
-          enableRotate: true,
-          enableTranslate: true,
-          enableTilt: true,
-          enableZoom: true,
-          enableCollisionDetection: true,
-          minimumCollisionTerrainHeight: 15000,
-        },
-      },
-      control: {
-        homeButton: false,
-        baseLayerPicker: false,
-        sceneModePicker: false,
-        vrButton: false,
-        fullscreenButton: false,
-        navigationHelpButton: false,
-        animation: false,
-        timeline: false,
-        infoBox: false,
-        geocoder: false,
-        selectionIndicator: false,
-        showRenderLoopErrors: true,
-        contextmenu: {
-          hasDefault: true,
-        },
-        mouseDownView: true,
-        zoom: {
-          insertIndex: 1,
-        },
-      },
-      method: {
-        templateValues: {
-          dataServer: '//data.mars3d.cn',
-          gltfServerUrl: '//data.mars3d.cn/gltf',
-        },
-      },
-      terrain: {
-        url: '//data.mars3d.cn/terrain',
-        show: true,
-        clip: true,
-      },
-      basemaps: [
-        {
-          id: 10,
-          name: '地图底图',
-          type: 'group',
-          opacity: 1,
-        },
-        {
-          id: 2021,
-          pid: 10,
-          name: '天地图影像',
-          icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-          type: 'group',
-          layers: [
-            {
-              name: '底图',
-              type: 'tdt',
-              layer: 'img_d',
-              eventParent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              private: false,
-              id: 'm-a57ecb7d-ba05-47a3-b1be-2e28411a5954',
-              opacity: 1,
-              pid: 2021,
-              parent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              zIndex: 1,
-            },
-            {
-              name: '注记',
-              type: 'tdt',
-              layer: 'img_z',
-              eventParent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              private: false,
-              id: 'm-671f9d42-dda7-45ec-9d0f-4259c915b2cb',
-              opacity: 1,
-              pid: 2021,
-              parent: {
-                id: 2021,
-                pid: 10,
-                name: '天地图影像',
-                icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
-                type: 'group',
-                layers: [
-                  {
-                    name: '底图',
-                    type: 'tdt',
-                    layer: 'img_d',
-                    show: true,
-                  },
-                  {
-                    name: '注记',
-                    type: 'tdt',
-                    layer: 'img_z',
-                    show: true,
-                  },
-                ],
-                show: true,
-              },
-              zIndex: 2,
-            },
-          ],
-          show: true,
-          opacity: 1,
-        },
-      ],
-      layers: [],
-    };
-    initMap(options);
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // 获取网络环境后加载地图
+    map = initMap();
   });
 
-  const isFirstLoad = ref(true);
-  const initMap = (newData: any) => {
-    // 第一次加载
-    if (isFirstLoad.value) {
-      map = new mars3d.Map(vChartRef.value, newData);
-    } else {
-      // 之后更新
-      map.setSceneOptions(newData.scene);
-    }
-    isFirstLoad.value = false;
-  };
-  function flyToPoint(data) {
-    map.flyToPoint(data, {
-      radius: 5000, // 距离目标点的距离
-      duration: 4,
-    });
-  }
-
-  defineExpose({
-    flyToPoint,
+  onUnmounted(() => {
+    map && map.remove();
   });
 </script>
-<style lang="less" scoped></style>
+
+<style lang="scss" scoped>
+  .map {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  ::v-deep .mapboxgl-ctrl {
+    display: none !important;
+  }
+</style>
diff --git a/src/views/demo/system/mediaLibrary/preview/preview.vue b/src/views/demo/system/mediaLibrary/preview/preview.vue
index 964dcf8..be9b2ed 100644
--- a/src/views/demo/system/mediaLibrary/preview/preview.vue
+++ b/src/views/demo/system/mediaLibrary/preview/preview.vue
@@ -59,6 +59,8 @@
   const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
   const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);
 
+  console.log(props.nowPreviewRecord);
+
   // 选择
   function chooseNowPreviewRecord(value) {
     emit('chooseNowPreviewRecord', value);
@@ -75,7 +77,7 @@
 <style lang="less">
   .modal {
     width: 100%;
-    height: 920px;
+    height: 1020px;
 
     // 页面不能被选中
     -webkit-user-select: none; /* Safari */
@@ -107,7 +109,7 @@
   }
   .mainBody {
     width: 100%;
-    height: 100%;
+    height: 1020px;
     display: flex;
     position: absolute;
     top: 0px;
@@ -115,7 +117,7 @@
 
     .imgOrVideo {
       width: 80%;
-      height: 920px;
+      height: 1020px;
       background: #101010;
 
       .image {
diff --git a/src/views/demo/system/mediaLibrary/preview/previewImage.vue b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
index e971580..689488a 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewImage.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewImage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="image">
-    <div class="canvas">
+    <div class="canvas" @mouseleave="document.body.style.cursor = 'auto'">
       <div
         ref="mouseCanvasRef"
         @mousedown="onMouseDown"
@@ -757,7 +757,7 @@
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 820px;
+    height: 920px;
   }
 
   .bottom {
diff --git a/src/views/demo/system/mediaLibrary/preview/previewInformation.vue b/src/views/demo/system/mediaLibrary/preview/previewInformation.vue
index 18f9b33..378fcad 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewInformation.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewInformation.vue
@@ -265,7 +265,7 @@
 
   .map {
     width: 100%;
-    height: 200px;
+    height: 300px;
     margin-left: 10px;
   }
 </style>
diff --git a/src/views/demo/system/mediaLibrary/preview/previewVideo.vue b/src/views/demo/system/mediaLibrary/preview/previewVideo.vue
index efc43b0..f812e1a 100644
--- a/src/views/demo/system/mediaLibrary/preview/previewVideo.vue
+++ b/src/views/demo/system/mediaLibrary/preview/previewVideo.vue
@@ -41,5 +41,6 @@
   import { MonitorQX } from './preview';
 
   const props = defineProps(['nowPreviewRecord']);
+  console.log(props.nowPreviewRecord);
 </script>
 <style lang="less"></style>
diff --git a/src/views/demo/system/mediaLibrary/priview2D3D/model2D.vue b/src/views/demo/system/mediaLibrary/priview2D3D/model2D.vue
new file mode 100644
index 0000000..1f3b9fa
--- /dev/null
+++ b/src/views/demo/system/mediaLibrary/priview2D3D/model2D.vue
@@ -0,0 +1,428 @@
+<template>
+  <div class="model2D">
+    <div :id="mapId" class="map">
+      <!-- 全屏 -->
+      <div class="expandButton" @click="clickExpandButton">
+        <ExpandOutlined v-if="!fullscreenFlag" style="color: #3c3c3c; font-size: 25px" />
+        <CompressOutlined v-if="fullscreenFlag" style="color: #3c3c3c; font-size: 25px" />
+      </div>
+      <div class="angleViewButton">
+        <div class="button_child" @click="lookTopView">
+          <span style="color: #3c3c3c; font-size: 16px">顶视</span>
+        </div>
+        <div class="button_child" @click="lookDownView">
+          <span style="color: #3c3c3c; font-size: 16px">俯视</span>
+        </div>
+      </div>
+      <div class="plusAndMinusButton">
+        <div class="button_child" @click="clickPlusButton">
+          <PlusOutlined style="color: #3c3c3c; font-size: 25px" />
+        </div>
+        <div class="button_child" @click="clickMinusButton">
+          <MinusOutlined style="color: #3c3c3c; font-size: 25px" />
+        </div>
+      </div>
+    </div>
+    <div class="info">
+      <div class="left">键盘</div>
+      <div class="right4">123</div>
+      <div class="right3"> ASL: {{ asl }}m</div>
+      <div class="right2"> HAE: {{ hae }}m</div>
+      <div class="right1">
+        <HeatMapOutlined style="margin-right: 15px; font-size: 20px" />
+        WGS 84
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { defineProps, ref, onMounted, onUnmounted, defineEmits, computed } from 'vue';
+  import { v4 as uuidv4 } from 'uuid';
+  import mapboxgl, { Map } from 'mapbox-gl';
+  import { MapboxConfig, MapboxDefaultStyle } from '@/components/MapboxMaps/src/config';
+  import axios from 'axios';
+  import {
+    ExpandOutlined,
+    CompressOutlined,
+    PlusOutlined,
+    MinusOutlined,
+    HeatMapOutlined,
+  } from '@ant-design/icons-vue';
+
+  const props = defineProps(['nowPreviewRecord']);
+  const emits = defineEmits(['getMap']);
+
+  const mapId = `modal-map-${uuidv4()}`;
+  const networkType = ref('WAN');
+  let map: Map;
+
+  const initMap = () => {
+    // let mapDataSources: any = {
+    //   'raster-tiles': {
+    //     type: 'raster',
+    //     tiles: [
+    //       `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
+    //     ],
+    //     tileSize: 256,
+    //     minzoom: 1,
+    //     maxzoom: 17,
+    //   },
+    //   'raster-tiles-font': {
+    //     type: 'raster',
+    //     tiles: [
+    //       `https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${MapboxConfig.TDT_TOKEN}`,
+    //     ],
+    //     tileSize: 256,
+    //   },
+    // };
+    // let mapDataLayers: any = [
+    //   {
+    //     id: 'tdt-vec-tiles',
+    //     type: 'raster',
+    //     source: 'raster-tiles-font',
+    //   },
+    //   {
+    //     id: 'tdt-img-tiles',
+    //     type: 'raster',
+    //     source: 'raster-tiles',
+    //   },
+    // ];
+
+    return new mapboxgl.Map({
+      container: mapId,
+      language: 'zh-cmn',
+      projection: 'equirectangular', // wgs84参考系
+      //   style: {
+      //     glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+      //     version: 8,
+      //     sources: mapDataSources,
+      //     layers: mapDataLayers,
+      //   },
+      style: {
+        version: 8,
+        sources: {},
+        layers: [
+          {
+            id: 'background',
+            type: 'background',
+            paint: {
+              'background-color': '#000', // 黑色背景
+            },
+          },
+        ],
+      },
+      maxZoom: 22,
+      minZoom: 8,
+      pitch: 0,
+      zoom: 18,
+      center: props.nowPreviewRecord.boundary
+        ? [
+            (props.nowPreviewRecord.boundary.start_lng + props.nowPreviewRecord.boundary.end_lng) /
+              2,
+            (props.nowPreviewRecord.boundary.start_lat + props.nowPreviewRecord.boundary.end_lat) /
+              2,
+          ]
+        : [117.984425, 35.270654],
+    });
+  };
+
+  // 示例函数：生成网格线的 GeoJSON 数据
+  function createGridFeatures() {
+    const features: any = [];
+    const gridSize = 10; // 每隔 10 度画一条线
+    for (let lat = -90; lat <= 90; lat += gridSize) {
+      features.push({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [-180, lat],
+            [180, lat],
+          ],
+        },
+      });
+    }
+    for (let lng = -180; lng <= 180; lng += gridSize) {
+      features.push({
+        type: 'Feature',
+        geometry: {
+          type: 'LineString',
+          coordinates: [
+            [lng, -90],
+            [lng, 90],
+          ],
+        },
+      });
+    }
+    return { type: 'FeatureCollection', features: features };
+  }
+
+  onMounted(() => {
+    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
+    // 获取网络环境后加载地图
+    // loadMapInfo();
+    map = initMap();
+    map.on('load', () => {
+      setImage(props.nowPreviewRecord.boundary);
+      move();
+      emits('getMap', map);
+    });
+  });
+
+  function setImage(boundary) {
+    let fourpoint: any = [
+      [parseFloat(boundary.start_lng), parseFloat(boundary.end_lat)],
+      [parseFloat(boundary.end_lng), parseFloat(boundary.end_lat)],
+      [parseFloat(boundary.end_lng), parseFloat(boundary.start_lat)],
+      [parseFloat(boundary.start_lng), parseFloat(boundary.start_lat)],
+    ];
+    // 图片预加载
+    let image = new Image();
+    image.crossOrigin = 'anonymous';
+    image.src = props.nowPreviewRecord.url;
+    image.onload = () => {
+      // 创建Canvas元素
+      const canvas = document.createElement('canvas');
+      canvas.width = image.width;
+      canvas.height = image.height;
+      // 获取Canvas绘图上下文
+      const ctx = canvas.getContext('2d');
+      // 在Canvas上绘制图片
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+      // 将Canvas内容转换为图片的数据URL
+      const dataURL = canvas.toDataURL('image/png');
+      // 移除旧的图层和源
+      if (map) {
+        if (map.getLayer('radar-layer')) {
+          map.removeLayer('radar-layer');
+        }
+        if (map.getSource('radar')) {
+          map.removeSource('radar');
+        }
+      }
+      // 添加新的源和图层
+      map.addSource('radar', {
+        type: 'image',
+        url: dataURL,
+        coordinates: fourpoint,
+      });
+      map.addLayer({
+        id: 'radar-layer',
+        type: 'raster',
+        source: 'radar',
+      });
+    };
+  }
+
+  // 全屏
+  const fullscreenFlag = ref(false);
+  function clickExpandButton() {
+    const mapContainer = document.getElementById(mapId);
+    if (mapContainer) {
+      if (!document.fullscreenElement) {
+        mapContainer.requestFullscreen();
+        fullscreenFlag.value = true;
+      } else {
+        document.exitFullscreen();
+        fullscreenFlag.value = false;
+      }
+    }
+  }
+  // 顶视角
+  function lookTopView() {
+    map.setPitch(0);
+    map.setBearing(0);
+    map.setZoom(18);
+    map.setCenter([
+      (parseFloat(props.nowPreviewRecord.boundary.start_lng) +
+        parseFloat(props.nowPreviewRecord.boundary.end_lng)) /
+        2,
+      (parseFloat(props.nowPreviewRecord.boundary.start_lat) +
+        parseFloat(props.nowPreviewRecord.boundary.end_lat)) /
+        2,
+    ]);
+  }
+  // 俯视角
+  function lookDownView() {
+    map.setPitch(60);
+    map.setBearing(0);
+    map.setZoom(18);
+    map.setCenter([
+      (parseFloat(props.nowPreviewRecord.boundary.start_lng) +
+        parseFloat(props.nowPreviewRecord.boundary.end_lng)) /
+        2,
+      (parseFloat(props.nowPreviewRecord.boundary.start_lat) +
+        parseFloat(props.nowPreviewRecord.boundary.end_lat)) /
+        2,
+    ]);
+  }
+  // 放大
+  function clickPlusButton() {
+    map.setZoom(map.getZoom() + 0.2);
+  }
+  // 缩小
+  function clickMinusButton() {
+    map.setZoom(map.getZoom() - 0.2);
+  }
+
+  const asl = ref(0);
+  const hae = ref(0);
+
+  function move() {
+    map.on('mousemove', (e) => {
+      const lngLat = e.lngLat;
+      asl.value = map.queryTerrainElevation(lngLat, { exaggerated: false }) || 0;
+      const geoidSeparation = 3.5;
+      hae.value = asl.value ? asl.value + geoidSeparation : 0;
+    });
+  }
+
+  onUnmounted(() => {
+    map && map.remove();
+  });
+</script>
+
+<style lang="scss" scoped>
+  .model2D {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .map {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      // 全屏
+      .expandButton {
+        position: absolute;
+        right: 20px;
+        bottom: 29%;
+        z-index: 500;
+        background: #ffffff;
+        border-radius: 5px;
+        width: 40px;
+        height: 40px;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      // 视角
+      .angleViewButton {
+        z-index: 500;
+        position: absolute;
+        right: 20px;
+        bottom: 18%;
+        background: #ffffff;
+        border-radius: 5px;
+        width: 40px;
+        height: 80px;
+
+        display: block;
+        align-items: center;
+        justify-content: center;
+      }
+      // 放大、缩小
+      .plusAndMinusButton {
+        z-index: 500;
+        position: absolute;
+        right: 20px;
+        bottom: 7%;
+        background: #ffffff;
+        border-radius: 5px;
+        width: 40px;
+        height: 80px;
+
+        display: block;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .info {
+      // 页面不能被选中
+      -webkit-user-select: none; /* Safari */
+      -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* IE/Edge */
+      user-select: none;
+
+      position: absolute;
+      width: 100%;
+      height: 4%;
+      bottom: 0px;
+      left: 0px;
+      display: flex;
+
+      .left {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        width: 150px;
+        color: #ffffff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .right4 {
+        position: absolute;
+        top: 0px;
+        right: 360px;
+        width: 120px;
+        color: #ffffff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .right3 {
+        position: absolute;
+        top: 0px;
+        right: 240px;
+        width: 120px;
+        color: #ffffff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .right2 {
+        position: absolute;
+        top: 0px;
+        right: 120px;
+        width: 120px;
+        color: #ffffff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .right1 {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        width: 120px;
+        color: #ffffff;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .button_child {
+    width: 40px;
+    height: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  ::v-deep .mapboxgl-ctrl {
+    display: none !important;
+  }
+</style>
diff --git a/src/views/demo/system/mediaLibrary/priview2D3D/model3D.vue b/src/views/demo/system/mediaLibrary/priview2D3D/model3D.vue
new file mode 100644
index 0000000..223129b
--- /dev/null
+++ b/src/views/demo/system/mediaLibrary/priview2D3D/model3D.vue
@@ -0,0 +1,126 @@
+<template>
+  <div id="mapContainer" class="map_container"></div>
+</template>
+
+<script setup lang="ts">
+  import { onMounted } from 'vue';
+  import * as Cesium from 'cesium';
+
+  // 设置资源路径
+  window.CESIUM_BASE_URL = '/node_modules/cesium/Build/Cesium/';
+  const props = defineProps(['nowPreviewRecord']);
+
+  // 保存原始模型矩阵
+  let originalModelMatrix: any = null;
+  // 声明Cesium Viewer实例
+  let viewer,
+    tileset: Cesium.Viewer | null = null;
+
+  const initMap = async () => {
+    const container = document.getElementById('mapContainer');
+    if (!container) {
+      console.error('地图容器未找到');
+      return;
+    }
+    viewer = new Cesium.Viewer(container, {
+      // 基础配置
+      animation: false, // 动画小部件
+      baseLayerPicker: false, // 底图选择器
+      fullscreenButton: false, // 全屏按钮
+      vrButton: false, // VR按钮
+      geocoder: false, // 地理编码搜索框
+      homeButton: false, // 主页按钮
+      infoBox: false, // 信息框 - 禁用点击弹窗
+      sceneModePicker: false, // 场景模式选择器
+      selectionIndicator: false, // 选择指示器
+      timeline: false, // 时间轴
+      navigationHelpButton: false, // 导航帮助按钮
+      navigationInstructionsInitiallyVisible: false, // 导航说明初始可见性
+      scene3DOnly: false, // 仅3D场景
+    });
+    // 隐藏logo
+    viewer.cesiumWidget.creditContainer.style.display = 'none';
+    viewer.scene.globe.enableLighting = true;
+    // 取消天空盒显示
+    // viewer.scene.skyBox.show = false;
+    // 禁用大气层和太阳
+    viewer.scene.skyAtmosphere.show = false;
+    // viewer.scene.sun.show = false;
+    // viewer.scene.moon.show = false;
+    // 设置背景为黑色
+    // viewer.scene.backgroundColor = Cesium.Color.BLACK;
+    //前提先把场景上的图层全部移除或者隐藏
+    // viewer.scene.globe.baseColor = Cesium.Color.BLACK; //修改地图蓝色背景
+    viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.1, 0.2, 1.0); //修改地图为暗蓝色背景
+    // 设置抗锯齿
+    viewer.scene.postProcessStages.fxaa.enabled = true;
+    // 清除默认底图
+    viewer.imageryLayers.remove(viewer.imageryLayers.get(0));
+    // 设置默认视图位置 - 默认显示全球视图
+    viewer.camera.setView({
+      destination: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 1000.0), // 中国中部上空
+      orientation: {
+        heading: 0.0,
+        pitch: -Cesium.Math.PI_OVER_TWO,
+        roll: 0.0,
+      },
+    });
+    // 启用地形深度测试，确保地形正确渲染
+    viewer.scene.globe.depthTestAgainstTerrain = true;
+    // // 清除默认地形
+    const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(3956);
+    viewer.terrainProvider = terrainProvider;
+    // 开启帧率
+    viewer.scene.debugShowFramesPerSecond = false;
+    // 添加经纬网格图层
+    viewer.imageryLayers.addImageryProvider(
+      new Cesium.GridImageryProvider({
+        color: Cesium.Color.WHITE,
+        tileWidth: 1024,
+        tileHeight: 1024,
+      }),
+    );
+
+    try {
+      const token: any =
+        'MTc0NzAzNTY0MXxqTllDaTdBbWZ3V2xfeDVpdG9zeXBkMHhTdzFwTW52NVRVN1d0SlUzc0NtNEtoWjhvWHZoemZHMTdMSjNzV21oR2N2eG1DWTB0cWRNT0pHalVwZU44dDR2THQ0ZUoxNmdUNTYzanJHY0xDc1pHU21VaTRHaVRqSmRfTXRNWWpoUFZhSWlmM1ZxSF9mbmxpS0hnX01oM1AwNURXSW42bEF4ejhJakJHY0JrMVU3SW9DeUJjdjVPRjFSM2RXVWJxUGhxSG1zdmdzNGJkRUlqazg5RHR2ZU1ReUJoR2s1QUlza1ZsOHU3X09uZ0JXZ0JlRllGcGhYTm5GYVJHQ2xsSHFkUlNtT0ZIS0o5WVhUNXd4a2lRU2l3bEFBZy1lN2xQV1B6NDREVEw4VXUzbGhyTURZemhwdzBTWkx4VE4teUticnZ3Z1I2NDNTa2RPOXdJN2otTkl1d3Z6NW1WZUhBV2EtTEtkVTlNNUgwZlo2VWhmVHhpTTM5ZHhuSUpVcVdrZ25EbFJwX3hObVJDdXNjZV9YblZTMlIzQmJqVGVxeXBLTTZ0VjNiLUxSZTZlTDJwRGY3c2tzWkhDNnFYbjY4alF6ZWhWTGl2NVcxQ2puMmdZZnNLaWRpeEFFM1Bwc29fSHpnSG1JZlZJN1lpNHpySUkxQzJzQlpJblBxZUl1SWo1QnNYdFQzZz09fF0gZYXPxsQ97VL9k-DRWUeNh3Prfq8ceE2jnmaNJjuq';
+      const resource = new Cesium.Resource({
+        url: '/public/Project1 2/B3DM/Model_0/tileset.json',
+        // url: 'https://file-storage.djicdn.com/model/19ba187f-7675-49de-b576-b00ffffba78d/dafdb629-18bf-4eb5-b33f-55fa27f1483d/dd091ab4-d8c9-4e14-9c05-bce61e8a0338/%E5%A4%A7%E7%96%86%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E_%E4%B8%89%E7%BB%B4%E6%A8%A1%E5%9E%8B%20%281%29/Project1%202/B3DM/ktx2_b3dms/BlockA/tileset-with-auth-key.json?auth_key=1746638980-0-0-4a3cf9893bb2e579e00633c51677db98&response-content-disposition=attachment&filename=%22tileset.json%22&filename*=utf-8%27%27tileset.json',
+        // headers: {
+        //   'x-auth-token': token,
+        // },
+      });
+      const tileset = await Cesium.Cesium3DTileset.fromUrl(resource);
+      console.log(tileset);
+      // 设置3DTiles的样式，确保每个要素都有一个唯一的ID
+      tileset.style = new Cesium.Cesium3DTileStyle({
+        // 使用默认样式，但确保每个要素都可以被单独选择
+        color: "color('white')",
+      });
+      // 保存原始模型矩阵，用于重置
+      originalModelMatrix = Cesium.Matrix4.clone(tileset.modelMatrix);
+      // 设置模型贴地
+      // 启用贴地属性
+      tileset.clampToGround = true;
+      viewer.scene.primitives.add(tileset);
+      viewer.zoomTo(tileset);
+    } catch (error) {
+      console.error('加载3D Tiles数据集失败:', error);
+    }
+  };
+
+  onMounted(() => {
+    initMap();
+  });
+</script>
+
+<style scoped>
+  .map_container {
+    width: 100%;
+    height: 100%;
+  }
+  ::v-deep .cesium-widget-credits {
+    display: none !important;
+  }
+</style>
diff --git a/src/views/demo/system/mediaLibrary/priview2D3D/modelModal.vue b/src/views/demo/system/mediaLibrary/priview2D3D/modelModal.vue
new file mode 100644
index 0000000..4f5bea3
--- /dev/null
+++ b/src/views/demo/system/mediaLibrary/priview2D3D/modelModal.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="modelDiv">
+    <div class="title">
+      <div class="title-1">{{ props.nowPreviewRecord.name }}</div>
+      <div class="title-2">
+        {{ props.nowPreviewRecord.createTime }}
+      </div>
+    </div>
+    <div class="closeButton">
+      <CloseOutlined @click="closeModal" style="font-size: 25px; color: white" />
+    </div>
+
+    <div class="modelDiv_2D3D">
+      <Model2D
+        v-if="props.nowPreviewRecord.type.includes('2D')"
+        :nowPreviewRecord="nowPreviewRecord"
+      />
+      <Model3D
+        v-if="props.nowPreviewRecord.type.includes('3D')"
+        :nowPreviewRecord="nowPreviewRecord"
+      />
+    </div>
+    <div class="modelDiv_bottom">
+      <div class="buttonList">
+        <!-- 下载 -->
+        <div class="button">
+          <DownloadOutlined @click="fetchAndDownloadImage(props.nowPreviewRecord.url)" />
+        </div>
+        <!-- 删除 -->
+        <div class="button"> <DeleteOutlined @click="deleteCanvas" /> </div>
+      </div>
+      <div class="imageList">
+        <div v-for="li in props.previewRecordList" :key="li.id" @click="chooseNowPreviewRecord(li)">
+          <div
+            v-if="li.type.includes('model')"
+            :class="li.id == props.nowPreviewRecord.id ? 'bottom_div_choose' : 'bottom_div'"
+          >
+            <FileOutlined style="font-size: 60px; color: white" />
+            <div
+              v-if="li.type.includes('2D')"
+              style="
+                position: absolute;
+                top: 20px;
+                left: 35px;
+                font-size: 25px;
+                color: #ffffff;
+                pointer-events: none;
+              "
+            >
+              2D
+            </div>
+            <div
+              v-if="li.type.includes('3D')"
+              style="
+                position: absolute;
+                top: 20px;
+                left: 35px;
+                justify-content: center;
+                font-size: 25px;
+                color: #ffffff;
+                pointer-events: none;
+              "
+            >
+              3D
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 上一张、下一张图片 -->
+    <div class="leftButton" @click="clickLeftOrRightButton('left')">
+      <LeftOutlined style="color: #ffffff; font-size: 30px" />
+    </div>
+    <div class="rightButton" @click="clickLeftOrRightButton('right')">
+      <RightOutlined style="color: #ffffff; font-size: 30px" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, watch, computed } from 'vue';
+  import {
+    CloseOutlined,
+    RightOutlined,
+    LeftOutlined,
+    DownloadOutlined,
+    DeleteOutlined,
+    FileOutlined,
+  } from '@ant-design/icons-vue';
+  import Model2D from './model2D.vue';
+  import Model3D from './model3D.vue';
+
+  const props = defineProps(['nowPreviewRecord', 'previewRecordList']);
+  const emit = defineEmits(['closeModal', 'chooseNowPreviewRecord', 'reloadTable']);
+
+  // 上一张、下一张图片
+  function clickLeftOrRightButton(direction) {
+    const list = props.previewRecordList.filter((item) => item.type.includes('model'));
+    for (let index = 0; index < list.length; index++) {
+      if (list[index].id == props.nowPreviewRecord.id) {
+        if (direction == 'left') {
+          if (index == 0) {
+            chooseNowPreviewRecord(list[list.length - 1]);
+          } else {
+            chooseNowPreviewRecord(list[index - 1]);
+          }
+        }
+        if (direction == 'right') {
+          if (index == list.length - 1) {
+            chooseNowPreviewRecord(list[0]);
+          } else {
+            chooseNowPreviewRecord(list[index + 1]);
+          }
+        }
+      }
+    }
+  }
+
+  // 选择
+  function chooseNowPreviewRecord(value) {
+    emit('chooseNowPreviewRecord', value);
+  }
+
+  // 关闭弹窗
+  function closeModal() {
+    emit('closeModal');
+  }
+</script>
+<style lang="less" scoped>
+  .modelDiv {
+    position: relative;
+    width: 100%;
+    height: 1020px;
+    display: block;
+  }
+
+  .title {
+    pointer-events: none;
+    position: absolute;
+    top: 10px;
+    left: 15px;
+    z-index: 100;
+
+    .title-1 {
+      font-size: 20px;
+      color: #ffffff;
+    }
+    .title-2 {
+      font-size: 16px;
+      color: #f0f3f3;
+    }
+  }
+  .closeButton {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    z-index: 50;
+  }
+
+  .modelDiv_2D3D {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 890px;
+    background: #000000;
+  }
+  .modelDiv_bottom {
+    // 页面不能被选中
+    -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE/Edge */
+    user-select: none;
+
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 130px;
+    background: #1c1c1c;
+    display: block;
+
+    .buttonList {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 50px;
+
+      .button {
+        position: relative;
+        padding-left: 10px;
+        padding-right: 10px;
+        color: #ffffff;
+        font-size: 22px;
+      }
+    }
+
+    .imageList {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 60px;
+
+      .bottom_div {
+        position: relative;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 20px;
+        padding-right: 20px;
+        margin-left: 5px;
+        margin-right: 5px;
+        border-radius: 10px;
+        background: #282828;
+      }
+
+      .bottom_div_choose {
+        position: relative;
+        padding-top: 5px;
+        padding-bottom: 5px;
+        padding-left: 20px;
+        padding-right: 20px;
+        outline: 3px solid #1088f2;
+        margin-left: 5px;
+        margin-right: 5px;
+        border-radius: 10px;
+        background: #282828;
+      }
+    }
+  }
+
+  // 上一张、下一张
+  .leftButton {
+    position: absolute;
+    left: 40px;
+    top: 40%;
+    z-index: 200;
+    background: #9c9c9c;
+    border-radius: 80px;
+    width: 80px;
+    height: 80px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .rightButton {
+    position: absolute;
+    right: 40px;
+    top: 40%;
+    z-index: 200;
+    background: #9c9c9c;
+    border-radius: 80px;
+    width: 80px;
+    height: 80px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
diff --git a/src/views/demo/system/mediaLibrary/priview2D3D/preview.ts b/src/views/demo/system/mediaLibrary/priview2D3D/preview.ts
deleted file mode 100644
index 6e8bf83..0000000
--- a/src/views/demo/system/mediaLibrary/priview2D3D/preview.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// export { default as PreviewImage } from './previewImage.vue';
-// export { default as PreviewCanvas } from './previewCanvas.vue';
-// export { default as PreviewVideo } from './previewVideo.vue';
-// export { default as PreviewInformation } from './previewInformation.vue';
-// export { default as MonitorHK } from './video/monitorHK.vue';
-// export { default as MonitorLC } from './video/monitorLC.vue';
-// export { default as MonitorQX } from './video/monitorQX.vue';
-// export { default as MonitorTX } from './video/monitorTX.vue';
-// export { default as PanoViewer } from './PanoViewer.vue';
-// export { default as Map } from './Map.vue';
\ No newline at end of file
diff --git a/src/views/demo/system/mediaLibrary/priview2D3D/preview.vue b/src/views/demo/system/mediaLibrary/priview2D3D/preview.vue
deleted file mode 100644
index d8bf32d..0000000
--- a/src/views/demo/system/mediaLibrary/priview2D3D/preview.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div> </div>
-</template>
-<script lang="ts" setup></script>
-<style lang="less"></style>