From 25864fb449272ee9cb28b4bb384f843f50feb5d3 Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Thu, 22 Feb 2024 13:48:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E4=B8=80=E6=9C=BA?=
 =?UTF-8?q?=E4=B8=80=E6=A1=A3=E7=9A=84=E8=AF=A6=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/api/tower/equipment/index.ts              |  14 +-
 src/views/passport/login/index.vue            |  32 +-
 .../machine/components/equipment-edit.vue     |   5 +
 src/views/tower/machine/components/search.vue |  12 +-
 .../detail/components/app-about-edit.vue      | 247 +++++++++
 .../machine/detail/components/app-about.vue   |  60 +++
 .../detail/components/app-annex-edit.vue      | 221 ++++++++
 .../machine/detail/components/app-annex.vue   | 302 +++++++++++
 .../detail/components/app-field-edit.vue      | 177 +++++++
 .../detail/components/app-field-search.vue    |  13 +
 .../machine/detail/components/app-field.vue   | 208 ++++++++
 .../detail/components/app-info-edit.vue       | 500 ++++++++++++++++++
 .../machine/detail/components/app-info.vue    | 194 +++++++
 .../machine/detail/components/app-nenew.vue   | 255 +++++++++
 .../detail/components/app-photo-edit.vue      | 220 ++++++++
 .../machine/detail/components/app-photo.vue   |  52 ++
 .../detail/components/app-profile-edit.vue    | 256 +++++++++
 .../machine/detail/components/app-profile.vue |  66 +++
 .../detail/components/app-secret-form.vue     | 210 ++++++++
 .../detail/components/app-task-search.vue     |  34 ++
 .../machine/detail/components/app-task.vue    | 298 +++++++++++
 .../machine/detail/components/app-users.vue   | 121 +++++
 src/views/tower/machine/detail/index.vue      | 200 +++++++
 src/views/tower/machine/index.vue             |  12 +-
 25 files changed, 3681 insertions(+), 32 deletions(-)
 create mode 100644 src/views/tower/machine/detail/components/app-about-edit.vue
 create mode 100644 src/views/tower/machine/detail/components/app-about.vue
 create mode 100644 src/views/tower/machine/detail/components/app-annex-edit.vue
 create mode 100644 src/views/tower/machine/detail/components/app-annex.vue
 create mode 100644 src/views/tower/machine/detail/components/app-field-edit.vue
 create mode 100644 src/views/tower/machine/detail/components/app-field-search.vue
 create mode 100644 src/views/tower/machine/detail/components/app-field.vue
 create mode 100644 src/views/tower/machine/detail/components/app-info-edit.vue
 create mode 100644 src/views/tower/machine/detail/components/app-info.vue
 create mode 100644 src/views/tower/machine/detail/components/app-nenew.vue
 create mode 100644 src/views/tower/machine/detail/components/app-photo-edit.vue
 create mode 100644 src/views/tower/machine/detail/components/app-photo.vue
 create mode 100644 src/views/tower/machine/detail/components/app-profile-edit.vue
 create mode 100644 src/views/tower/machine/detail/components/app-profile.vue
 create mode 100644 src/views/tower/machine/detail/components/app-secret-form.vue
 create mode 100644 src/views/tower/machine/detail/components/app-task-search.vue
 create mode 100644 src/views/tower/machine/detail/components/app-task.vue
 create mode 100644 src/views/tower/machine/detail/components/app-users.vue
 create mode 100644 src/views/tower/machine/detail/index.vue

diff --git a/.env.development b/.env.development
index 1af570f..537e29b 100644
--- a/.env.development
+++ b/.env.development
@@ -1,3 +1,3 @@
 VITE_APP_NAME=后台管理系统
-VITE_API_URL=http://127.0.0.1:10041/api
-#VITE_API_URL=http://1.14.159.185:10041/api
+#VITE_API_URL=http://127.0.0.1:10041/api
+VITE_API_URL=http://1.14.159.185:10041/api
diff --git a/src/api/tower/equipment/index.ts b/src/api/tower/equipment/index.ts
index 3d2a343..3ad2d8d 100644
--- a/src/api/tower/equipment/index.ts
+++ b/src/api/tower/equipment/index.ts
@@ -8,9 +8,7 @@ import type {
  * 设备数据
  */
 export async function towerEquipmentData() {
-  const res = await request.get(
-    '/tower/tower-equipment/data'
-  );
+  const res = await request.get('/tower/tower-equipment/data');
   if (res.data.code === 0) {
     return res.data.data;
   }
@@ -49,6 +47,16 @@ export async function listTowerEquipment(params?: TowerEquipmentParam) {
   return Promise.reject(new Error(res.data.message));
 }
 
+export async function getTowerEquipment(id: number) {
+  const res = await request.get<ApiResult<TowerEquipment>>(
+    '/tower/tower-equipment/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
 /**
  * 添加设备
  */
diff --git a/src/views/passport/login/index.vue b/src/views/passport/login/index.vue
index 2c857fb..d855f74 100644
--- a/src/views/passport/login/index.vue
+++ b/src/views/passport/login/index.vue
@@ -23,18 +23,18 @@
         >
       </a-space>
       <template v-if="loginType === 'account'">
-        <a-form-item v-bind="validateInfos.tenantId">
-          <a-input
-            allow-clear
-            size="large"
-            v-model:value="form.tenantId"
-            :placeholder="`企业ID`"
-          >
-            <template #prefix>
-              <BankOutlined />
-            </template>
-          </a-input>
-        </a-form-item>
+        <!--        <a-form-item v-bind="validateInfos.tenantId">-->
+        <!--          <a-input-->
+        <!--            allow-clear-->
+        <!--            size="large"-->
+        <!--            v-model:value="form.tenantId"-->
+        <!--            :placeholder="`企业ID`"-->
+        <!--          >-->
+        <!--            <template #prefix>-->
+        <!--              <BankOutlined />-->
+        <!--            </template>-->
+        <!--          </a-input>-->
+        <!--        </a-form-item>-->
         <a-form-item v-bind="validateInfos.username">
           <a-input
             allow-clear
@@ -80,9 +80,7 @@
           </div>
         </a-form-item>
         <a-form-item>
-          <a-checkbox v-model:checked="form.remember">
-            记住密码
-          </a-checkbox>
+          <a-checkbox v-model:checked="form.remember"> 记住密码 </a-checkbox>
           <!--        <router-link-->
           <!--          to="/forget"-->
           <!--          class="ele-pull-right"-->
@@ -157,7 +155,7 @@
   import { login, getCaptcha, getWxWorkQrConnect } from '@/api/passport/login';
   // import { navTo } from '@/utils/common';
   import { User } from '@/api/system/user/model';
-  import { THEME_STORE_NAME } from "@/config/setting";
+  import { THEME_STORE_NAME } from '@/config/setting';
 
   const useForm = Form.useForm;
 
@@ -176,7 +174,7 @@
     password: '',
     code: '',
     remember: true,
-    tenantId: undefined
+    tenantId: 10049
   });
   // 验证码 base64 数据
   const captcha = ref('');
diff --git a/src/views/tower/machine/components/equipment-edit.vue b/src/views/tower/machine/components/equipment-edit.vue
index e60963a..8ade7ae 100644
--- a/src/views/tower/machine/components/equipment-edit.vue
+++ b/src/views/tower/machine/components/equipment-edit.vue
@@ -51,6 +51,11 @@
                   disabled
                   v-model:value="form.surplusYear"
                 />
+                <!--                <a-input-->
+                <!--                  allow-clear-->
+                <!--                  placeholder="请输入设备编号"-->
+                <!--                  v-model:value="form.equipmentNo"-->
+                <!--                />-->
               </a-form-item>
             </a-col>
             <a-col
diff --git a/src/views/tower/machine/components/search.vue b/src/views/tower/machine/components/search.vue
index fee1d49..52d1c84 100644
--- a/src/views/tower/machine/components/search.vue
+++ b/src/views/tower/machine/components/search.vue
@@ -1,12 +1,12 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button class="ele-btn-icon">
-      <template #icon>
-        <QrcodeOutlined />
-      </template>
-      <span>批量生产二维码</span>
-    </a-button>
+<!--    <a-button class="ele-btn-icon">-->
+<!--      <template #icon>-->
+<!--        <QrcodeOutlined />-->
+<!--      </template>-->
+<!--      <span>批量生产二维码</span>-->
+<!--    </a-button>-->
     <!--    <a-space>-->
     <!--      <a-button @click="onTab(undefined)"-->
     <!--        >设备总数：{{ equipmentData.totalNum }}</a-button-->
diff --git a/src/views/tower/machine/detail/components/app-about-edit.vue b/src/views/tower/machine/detail/components/app-about-edit.vue
new file mode 100644
index 0000000..857e04b
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-about-edit.vue
@@ -0,0 +1,247 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '新增'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+        ref="formRef"
+        :model="form"
+        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <!-- 编辑器 -->
+      <byte-md-editor
+          v-model:value="content"
+          placeholder="请输入您的内容，图片请直接粘贴"
+          :locale="zh_Hans"
+          mode="split"
+          :plugins="plugins"
+          height="500px"
+          :editorConfig="{ lineNumbers: true }"
+          @paste="onPaste"
+      />
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import {assignObject} from "ele-admin-pro";
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  // 链接、删除线、复选框、表格等的插件
+  // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import highlight from '@bytemd/plugin-highlight';
+  // 中文语言文件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 预览界面的样式，这里用的 github 的 markdown 主题
+  import 'github-markdown-css/github-markdown-light.css';
+  import {FormInstance} from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from "@/api/system/file";
+  import { TOKEN_STORE_NAME } from "@/config/setting";
+
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 项目介绍
+    content: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const { resetFields, validate, validateInfos } = useForm(form);
+
+  const config = ref({
+    height: 500,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadFile(<File>file)
+        .then((result) => {
+          if (result.length) {
+            if (file.size / 1024 / 1024 > 2) {
+              error('图片大小不能超过 2MB');
+            }
+            success(result.url);
+          } else {
+            error('上传失败');
+          }
+        })
+        .catch((e) => {
+          message.error(e.message);
+        });
+    },
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (!file.type.startsWith('image')) {
+      message.error('只能选择图片');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      message.error('大小不能超过 2MB');
+      return;
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/tower/machine/detail/components/app-about.vue b/src/views/tower/machine/detail/components/app-about.vue
new file mode 100644
index 0000000..a03d41b
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-about.vue
@@ -0,0 +1,60 @@
+<template>
+  <a-descriptions title="项目介绍" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <byte-md-viewer :value="data.content" :plugins="plugins" />
+  <a-empty
+    v-if="data.content == ''"
+    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+    :image-style="{
+      height: '60px'
+    }"
+  >
+    <template #description>
+      <span class="ele-text-placeholder">请填写项目介绍</span>
+    </template>
+    <a-button type="primary" @click="openEdit">立即填写</a-button>
+  </a-empty>
+  <!-- 编辑弹窗 -->
+  <AppAboutEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import AppAboutEdit from './app-about-edit.vue';
+
+  defineProps<{
+    data: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+</script>
diff --git a/src/views/tower/machine/detail/components/app-annex-edit.vue b/src/views/tower/machine/detail/components/app-annex-edit.vue
new file mode 100644
index 0000000..e35e936
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-annex-edit.vue
@@ -0,0 +1,221 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="600"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="isUpdate ? '编辑内容' : '上传文件'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="上传文件" name="fileName" v-if="!isUpdate">
+        <span
+          class="ele-text-success"
+          v-if="fileName"
+          style="margin-right: 10px"
+        >
+          {{ fileName }}
+        </span>
+        <a-upload
+          :show-upload-list="false"
+          :accept="'video/*'"
+          v-if="!fileName"
+          :customRequest="onUpload"
+        >
+          <a-button type="primary" class="ele-btn-icon">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            <span>上传文件</span>
+          </a-button>
+        </a-upload>
+      </a-form-item>
+      <a-form-item label="设置分类" name="name">
+        <SelectDict
+          dict-code="groupId"
+          :placeholder="`选择分类`"
+          v-model:value="form.groupName"
+          @done="chooseGroupId"
+        />
+      </a-form-item>
+      <a-form-item label="文件名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="20"
+          placeholder="请输入文件名称"
+          v-model:value="form.name"
+        />
+      </a-form-item>
+      <a-form-item label="描述" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="这一刻的想法.."
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { FileRecord } from '@/api/system/file/model';
+  import { messageLoading } from 'ele-admin-pro';
+  import { addFiles, updateFiles, uploadFile } from '@/api/system/file';
+  import { UploadOutlined } from '@ant-design/icons-vue';
+  import { RuleObject } from 'ant-design-vue/es/form';
+  import { DictData } from '@/api/system/dict-data/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: FileRecord | null;
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+  const fileName = ref('');
+  // 是否是修改
+  const isUpdate = ref(false);
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<FileRecord>({
+    id: 0,
+    name: '',
+    comments: ''
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    fileName: [
+      {
+        required: true,
+        message: '请上传文件',
+        type: 'string',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject) => {
+          if (!isUpdate.value && fileName.value.length == 0) {
+            return Promise.reject('请上传文件');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入文件名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseGroupId = (item: DictData) => {
+    form.groupId = item.dictDataId;
+    form.groupName = item.dictDataName;
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (!file.type.startsWith('video')) {
+      message.error('文件格式不正确！');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadFile(file)
+      .then((data) => {
+        hide();
+        fileName.value = String(data.name);
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateFiles : addFiles;
+        saveOrUpdate(form)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields(props.data);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
diff --git a/src/views/tower/machine/detail/components/app-annex.vue b/src/views/tower/machine/detail/components/app-annex.vue
new file mode 100644
index 0000000..cbacca4
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-annex.vue
@@ -0,0 +1,302 @@
+<template>
+  <!-- 表格 -->
+  <ele-pro-table
+    ref="tableRef"
+    row-key="id"
+    :columns="columns"
+    :datasource="datasource"
+    :customRow="customRow"
+    :scroll="{ x: 800 }"
+    cache-key="proAppAnnexTable"
+  >
+    <template #toolbar>
+      <a-space>
+        <a-upload :show-upload-list="false" :customRequest="onUpload">
+          <a-button class="ele-btn-icon">
+            <template #icon>
+              <UploadOutlined />
+            </template>
+            <span>上传文件{{}}</span>
+          </a-button>
+        </a-upload>
+        <a-button
+          danger
+          type="primary"
+          class="ele-btn-icon"
+          v-if="selection.length > 0"
+          @click="removeBatch"
+        >
+          <template #icon>
+            <delete-outlined />
+          </template>
+          <span>删除</span>
+        </a-button>
+        <a-input-search
+          allow-clear
+          v-model:value="searchText"
+          placeholder="请输入关键词"
+          @search="reload"
+          @pressEnter="reload"
+        />
+      </a-space>
+    </template>
+    <template #bodyCell="{ column, record }">
+      <template v-if="column.dataIndex === 'name'">
+        <span>{{ record.name }}</span>
+        <a-tooltip :title="`复制链接地址`">
+          <copy-outlined
+            style="padding-left: 4px"
+            @click="copyText(record.url)"
+          />
+        </a-tooltip>
+      </template>
+      <template v-if="column.key === 'action'">
+        <a @click="openNew(record.url)">预览</a>
+        <a-divider type="vertical" />
+        <a :href="record.downloadUrl" target="_blank">下载</a>
+        <a-divider type="vertical" />
+        <a @click="openEdit(record)">修改</a>
+        <a-divider type="vertical" />
+        <a-popconfirm
+          placement="topRight"
+          title="确定要删除此文件吗？"
+          @confirm="remove(record)"
+        >
+          <a class="ele-text-danger">删除</a>
+        </a-popconfirm>
+      </template>
+    </template>
+  </ele-pro-table>
+  <!-- 编辑弹窗 -->
+  <app-annex-edit v-model:visible="showEdit" :data="current" @done="reload" />
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    UploadOutlined,
+    DeleteOutlined,
+    CopyOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading, toDateString } from 'ele-admin-pro/es';
+  import AppAnnexEdit from './app-annex-edit.vue';
+  import {
+    pageFiles,
+    removeFile,
+    removeFiles,
+    uploadFileLocal
+  } from '@/api/system/file';
+  import type { FileRecord, FileRecordParam } from '@/api/system/file/model';
+  import { copyText, openNew } from '@/utils/common';
+
+  const props = defineProps<{
+    appId: any;
+    data: any;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格选中数据
+  const selection = ref<FileRecord[]>([]);
+  // 当前编辑数据
+  const current = ref<FileRecord | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  const type = ref('name');
+  const groupId = ref<number>(0);
+  const searchText = ref('');
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      key: 'index',
+      width: 48,
+      align: 'center',
+      fixed: 'left',
+      hideInSetting: true,
+      customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
+    },
+    {
+      title: '文件名称',
+      dataIndex: 'name',
+      ellipsis: true
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '文件大小',
+      dataIndex: 'length',
+      sorter: true,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => {
+        if (text < 1024) {
+          return text + 'B';
+        } else if (text < 1024 * 1024) {
+          return (text / 1024).toFixed(1) + 'KB';
+        } else if (text < 1024 * 1024 * 1024) {
+          return (text / 1024 / 1024).toFixed(1) + 'M';
+        } else {
+          return (text / 1024 / 1024 / 1024).toFixed(1) + 'G';
+        }
+      },
+      width: 120
+    },
+    {
+      title: '上传者',
+      width: 120,
+      dataIndex: 'createNickname'
+    },
+    {
+      title: '上传时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      width: 180,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 260,
+      align: 'center'
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    where = {};
+    if (type.value == 'name') {
+      where.name = searchText.value;
+    }
+    if (type.value == 'createNickname') {
+      where.createNickname = searchText.value;
+    }
+    if (groupId.value > 0) {
+      where.groupId = groupId.value;
+    }
+    // where.contentType = 'application';
+    where.appId = props.appId;
+    return pageFiles({ ...where, ...orders, page, limit });
+  };
+
+  /* 搜索 */
+  const reload = (where?: FileRecordParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ page: 1, where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: FileRecord) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: FileRecord) => {
+    const hide = messageLoading('请求中..', 0);
+    removeFile(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的文件吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = messageLoading('请求中..', 0);
+        removeFiles(selection.value.map((d) => d.id))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    if (file.size / 1024 / 1024 > 100) {
+      message.error('大小不能超过 100MB');
+      return;
+    }
+    const hide = messageLoading({
+      content: '上传中..',
+      duration: 0,
+      mask: true
+    });
+    uploadFileLocal(file, props.data.appId)
+      .then((data) => {
+        console.log(data);
+        hide();
+        message.success('上传成功');
+        reload();
+      })
+      .catch((e) => {
+        message.error(e.message);
+        hide();
+      });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: FileRecord) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        window.open(record.url);
+      }
+    };
+  };
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        console.log(appId);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppAnnexIndex'
+  };
+</script>
diff --git a/src/views/tower/machine/detail/components/app-field-edit.vue b/src/views/tower/machine/detail/components/app-field-edit.vue
new file mode 100644
index 0000000..d9422f4
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-field-edit.vue
@@ -0,0 +1,177 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="1000"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑参数' : '添加参数'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 21 }, sm: { span: 22 }, xs: { span: 24 } }"
+    >
+      <a-form-item label="名称" name="name">
+        <a-input allow-clear placeholder="字段名称" v-model:value="form.name" />
+      </a-form-item>
+      <a-form-item label="参数" name="comments">
+        <!-- 编辑器 -->
+        <byte-md-editor
+          v-model:value="form.comments"
+          placeholder="参数内容"
+          :locale="zh_Hans"
+          mode="split"
+          :plugins="plugins"
+          height="300px"
+          maxLength="500"
+          :editorConfig="{ lineNumbers: true }"
+        />
+      </a-form-item>
+      <a-form-item label="排序" name="sortNumber">
+        <a-input-number
+          :min="0"
+          :max="99999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { AppField } from '@/api/oa/app/field/model';
+  import useFormData from '@/utils/use-form-data';
+  import { decrypt, encrypt } from '@/utils/common';
+  import { addAppField, updateAppField } from '@/api/oa/app/field';
+  import { message } from 'ant-design-vue/es';
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    appId: number | null | undefined;
+    // 修改回显的数据
+    data?: AppField | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+
+  const formRef = ref<FormInstance | null>(null);
+
+  const { form, resetFields, assignFields } = useFormData<AppField>({
+    id: undefined,
+    appId: undefined,
+    name: '',
+    comments: '',
+    status: 0,
+    sortNumber: 0
+  });
+
+  // 表单验证规则
+  const rules = reactive({
+    comments: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写参数内容'
+      }
+    ],
+    name: [
+      {
+        required: true,
+        message: '请输入名称'
+      }
+    ]
+  });
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const data = {
+          ...form,
+          appId: props.appId
+        };
+        // 加密信息处理
+        if (form.comments != '') {
+          data.comments = encrypt(form.comments);
+        } else {
+          data.comments = undefined;
+        }
+        const saveOrUpdate = isUpdate.value ? updateAppField : addAppField;
+        console.log(isUpdate.value);
+        saveOrUpdate(data)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          const comments = decrypt(props.data.comments);
+          assignFields(props.data);
+          form.comments = comments;
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/tower/machine/detail/components/app-field-search.vue b/src/views/tower/machine/detail/components/app-field-search.vue
new file mode 100644
index 0000000..c72d354
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-field-search.vue
@@ -0,0 +1,13 @@
+<template>
+  <a-button @click="add">添加参数</a-button>
+</template>
+
+<script lang="ts" setup>
+  const emit = defineEmits<{
+    (e: 'add'): void;
+  }>();
+
+  const add = () => {
+    emit('add');
+  };
+</script>
diff --git a/src/views/tower/machine/detail/components/app-field.vue b/src/views/tower/machine/detail/components/app-field.vue
new file mode 100644
index 0000000..6bd51b2
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-field.vue
@@ -0,0 +1,208 @@
+<template>
+  <div class="app-task">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <AppFieldSearch @add="openEdit" @remove="removeBatch" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'comments'">
+          <byte-md-viewer
+            :value="decrypt(record.comments)"
+            :plugins="plugins"
+          />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+          <a-divider type="vertical" />
+          <a @click="openEdit(record)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
+            <a class="ele-text-danger">删除</a>
+          </a-popconfirm>
+        </template>
+      </template>
+    </ele-pro-table>
+    <!-- 编辑弹窗 -->
+    <AppFieldEdit
+      v-model:visible="showEdit"
+      :app-id="data.appId"
+      :data="current"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import AppFieldSearch from './app-field-search.vue';
+  import { decrypt } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+  import AppFieldEdit from './app-field-edit.vue';
+  import { AppField, AppFieldParam } from '@/api/oa/app/field/model';
+  import {
+    pageAppField,
+    removeAppField,
+    removeBatchAppField,
+    updateAppField
+  } from '@/api/oa/app/field';
+  import { ArrowUpOutlined } from '@ant-design/icons-vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+
+  const props = defineProps<{
+    appId: any;
+    data: App;
+  }>();
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  // 当前编辑数据
+  const current = ref<AppField | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where.appId = props.appId;
+    return pageAppField({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '名称',
+      dataIndex: 'name',
+      width: 180
+    },
+    {
+      title: '内容',
+      dataIndex: 'comments',
+      key: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      sorter: true,
+      width: 100,
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  const moveUp = (row?: AppField) => {
+    updateAppField({
+      id: row?.id,
+      sortNumber: Number(row?.sortNumber) + 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: AppField) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 搜索 */
+  const reload = (where?: AppFieldParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 删除单个 */
+  const remove = (row: AppField) => {
+    const hide = message.loading('请求中..', 0);
+    removeAppField(row.id)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchAppField(selection.value.map((d) => d.id))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppFieldIndex'
+  };
+</script>
diff --git a/src/views/tower/machine/detail/components/app-info-edit.vue b/src/views/tower/machine/detail/components/app-info-edit.vue
new file mode 100644
index 0000000..729ea64
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-info-edit.vue
@@ -0,0 +1,500 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '新增'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <a-descriptions title="基本信息" :column="2" bordered>
+        <a-descriptions-item
+          label="AppId"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+          >{{ data.appId }}</a-descriptions-item
+        >
+        <a-descriptions-item
+          label="状态"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <DictSelect
+            dict-code="appstoreStatus"
+            placeholder="请选择应用状态"
+            style="width: 200px"
+            v-model:value="form.appStatus"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="AppSecret"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <span>****</span>
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="名称"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-input
+            allow-clear
+            placeholder="请输入应用名称"
+            v-model:value="form.appName"
+        /></a-descriptions-item>
+        <a-descriptions-item
+          label="标识"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+          ><a-input
+            allow-clear
+            placeholder="请输入应用标识(英文字母)"
+            v-model:value="form.appCode"
+            @change="changeAppCode"
+        /></a-descriptions-item>
+        <a-descriptions-item
+          label="所属企业"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <SelectCompany
+            :placeholder="`所属企业`"
+            v-model:value="form.companyName"
+            @done="chooseCompanyName"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="主域名"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-input
+            allow-clear
+            placeholder="请输入主域名"
+            v-model:value="form.appUrl"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="项目类型"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <DictSelect
+            dict-code="appType"
+            placeholder="请选择项目类型"
+            v-model:value="form.appType"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="描述"
+          :span="2"
+          layout="vertical"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <a-textarea
+            :rows="4"
+            :maxlength="200"
+            placeholder="请输入应用描述"
+            v-model:value="form.comments"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="头像"
+          layout="vertical"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <ele-image-upload
+            v-model:value="logo"
+            :item-style="{ width: '90px', height: '90px' }"
+            :limit="1"
+            @upload="onUploadIcon"
+          />
+        </a-descriptions-item>
+        <a-descriptions-item
+          label="二维码"
+          layout="vertical"
+          :labelStyle="{ width: '200px', color: '#808080' }"
+        >
+          <ele-image-upload
+            v-model:value="appQrcode"
+            :item-style="{ width: '90px', height: '90px' }"
+            :limit="1"
+            @upload="onUploadQrcode"
+          />
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, ipReg, isChinese } from 'ele-admin-pro';
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
+  import { Company } from '@/api/system/company/model';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from '@/api/system/file';
+  import { TOKEN_STORE_NAME } from '@/config/setting';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 当期时间
+  // 已上传数据
+  const logo = ref<ItemType[]>([]);
+  const appQrcode = ref<ItemType[]>([]);
+  const images = ref<ItemType[]>([]);
+  // 日期范围选择
+  const content = ref('');
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 应用秘钥
+    appSecret: '',
+    enName: '',
+    // 应用名称
+    appName: '',
+    // 上级id, 0是顶级
+    parentId: undefined,
+    // 应用编号
+    appCode: '',
+    // 应用图标
+    appIcon: '',
+    appQrcode: '',
+    // 应用截图
+    images: '',
+    appType: undefined,
+    appTypeMultiple: undefined,
+    // 菜单类型
+    menuType: undefined,
+    // 应用地址
+    appUrl: '',
+    // 后台管理地址
+    adminUrl: undefined,
+    // 下载地址
+    downUrl: undefined,
+    serverUrl: undefined,
+    callbackUrl: undefined,
+    gitUrl: undefined,
+    docsUrl: undefined,
+    prototypeUrl: undefined,
+    ipAddress: undefined,
+    fileUrl: undefined,
+    // 应用包名
+    packageName: '',
+    // 点击次数
+    clicks: '',
+    // 安装次数
+    installs: '',
+    // 项目介绍
+    content: '',
+    // 开发者(个人)
+    developer: '',
+    director: '',
+    projectDirector: '',
+    salesman: '',
+    // 软件定价
+    price: '',
+    // 评分
+    score: '',
+    // 星级
+    star: '',
+    // 菜单组件地址
+    component: '',
+    // 菜单路由地址
+    path: '',
+    // 权限标识
+    authority: '',
+    // 打开位置
+    target: '',
+    // 是否隐藏, 0否, 1是(仅注册路由不显示在左侧菜单)
+    hide: undefined,
+    // 菜单侧栏选中的path
+    active: '',
+    // 其它路由元信息
+    meta: '',
+    // 版本
+    edition: '',
+    // 版本号
+    version: '',
+    // 是否已安装
+    isUse: undefined,
+    // 排序
+    sortNumber: undefined,
+    // 备注
+    comments: undefined,
+    tenantName: '',
+    companyName: '',
+    // 租户编号
+    tenantCode: '',
+    // 租户id
+    tenantId: undefined,
+    // 创建时间
+    createTime: '',
+    appStatus: '开发中',
+    // 状态
+    status: undefined,
+    // 发布者
+    userId: '',
+    // 发布者昵称
+    nickname: '',
+    // 子菜单
+    children: [],
+    // 权限树回显选中状态, 0未选中, 1选中
+    checked: false,
+    //
+    key: undefined,
+    //
+    value: undefined,
+    //
+    parentIds: [],
+    //
+    openType: undefined,
+    //
+    search: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    appName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入应用名称',
+        trigger: 'blur'
+      }
+    ],
+    companyName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择所属企业',
+        trigger: 'blur'
+      }
+    ],
+    appCode: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入应用标识(英文字母)',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (isChinese(value)) {
+            return Promise.reject('请输入正确的应用标识');
+          }
+          return Promise.resolve();
+        }
+      }
+    ],
+    appType: [
+      {
+        required: true,
+        message: '请选择项目类型'
+      }
+    ],
+    ipAddress: [
+      {
+        pattern: ipReg,
+        message: 'IP地址不合法',
+        type: 'string'
+      }
+    ],
+    appStatus: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择应用状态',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields, validate } = useForm(form, rules);
+
+  const chooseCompanyName = (data: Company) => {
+    form.appUrl = data.domain;
+    form.companyName = data.companyName;
+    form.companyId = data.companyId;
+    form.tenantId = data.tenantId;
+  };
+
+  const changeAppCode = (e) => {
+    form.packageName = `com.gxwebsoft.${form.appCode}`;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value,
+          search: form.search ? 1 : 0,
+          images: JSON.stringify(images.value)
+          // appTypeMultiple: JSON.stringify(form.appTypeMultiple)
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  // 上传文件:应用图标
+  const onUploadIcon = (item) => {
+    const { file } = item;
+    logo.value = [];
+    uploadFile(file)
+      .then((data) => {
+        logo.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+        form.appIcon = data.url;
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const onUploadQrcode = (item) => {
+    const { file } = item;
+    appQrcode.value = [];
+    uploadFile(file)
+      .then((data) => {
+        appQrcode.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+        form.appQrcode = data.url;
+        message.success('上传成功');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const reload = () => {
+    loading.value = true;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        logo.value = [];
+        images.value = [];
+        appQrcode.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.appIcon) {
+            logo.value.push({
+              uid: 0,
+              url: props.data.appIcon,
+              status: 'done'
+            });
+          }
+          if (props.data.appQrcode) {
+            appQrcode.value.push({
+              uid: 0,
+              url: props.data.appQrcode,
+              status: 'done'
+            });
+          }
+          if (props.data.companyId) {
+            console.log(props.data);
+          }
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          if (props.data.search) {
+            form.search = props.data.search == 1 ? true : 0;
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+          reload();
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/tower/machine/detail/components/app-info.vue b/src/views/tower/machine/detail/components/app-info.vue
new file mode 100644
index 0000000..136df8c
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-info.vue
@@ -0,0 +1,194 @@
+<template>
+  <a-descriptions bordered>
+    <!--    <template #extra>-->
+    <!--      <a @click="openEdit">编辑</a>-->
+    <!--    </template>-->
+    <a-descriptions-item
+      label="设备名称"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.name }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="设备状态"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+    >
+      <a-tag v-if="data.status === 0" color="green">闲置</a-tag>
+      <a-tag v-if="data.status === 1" color="red">报废</a-tag>
+      <a-tag v-if="data.status === 2" color="purple">注销</a-tag>
+      <a-tag v-if="data.status === 3" color="orange">转卖</a-tag>
+    </a-descriptions-item>
+    <a-descriptions-item
+      label="二维码"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      ><ele-qr-code
+        :value="`http://1.14.159.185:10042/tower/machine/detail/${data.equipmentId}`"
+        :size="100"
+    /></a-descriptions-item>
+
+    <a-descriptions-item
+      label="设备型号"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.model }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="备案编号"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.filingNo }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="出厂编号"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.factoryNo }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="出厂日期"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.factoryDate }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="制造厂家"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.manufactor }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="报废日期"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.scrapDate }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="自编号"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.name }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="使用年限"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.lifeYear }}</a-descriptions-item
+    >
+
+    <a-descriptions-item
+      label="剩余使用年限"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.surplusYear }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="产权单位"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.company }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="所属仓库"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.warehouse }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="采购日期"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.buyDate }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="设备来源"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.source }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="设计高度"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.designHeight }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="额定载重"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.ratedLoad }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="最大起升高度(m)"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.maxLiftingHeight }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="独立高度"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.height }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="最大幅度处额定载重"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.maxRatedLoad }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="臂长"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.armLength }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="采购合同"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file1 }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="发票"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file2 }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="制造许可证"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file3 }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="出厂合格证"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file4 }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="备案证书"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file5 }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="整机性能参数表"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file6 }}</a-descriptions-item
+    >
+    <a-descriptions-item
+      label="其他"
+      :labelStyle="{ width: '200px', color: '#808080' }"
+      >{{ data.file7 }}</a-descriptions-item
+    >
+  </a-descriptions>
+  <!-- 编辑弹窗 -->
+  <AppInfoEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import AppInfoEdit from './app-info-edit.vue';
+  import { TowerEquipment } from '@/api/tower/equipment/model';
+
+  defineProps<{
+    data: TowerEquipment;
+    logo: [] | any;
+    appQrcode: any | undefined;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  const showAppSecretForm = ref<boolean>(false);
+
+  const openAppSecretForm = () => {
+    showAppSecretForm.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+</script>
diff --git a/src/views/tower/machine/detail/components/app-nenew.vue b/src/views/tower/machine/detail/components/app-nenew.vue
new file mode 100644
index 0000000..b7d5a87
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-nenew.vue
@@ -0,0 +1,255 @@
+<template>
+      <a-button @click="addRecord" style="margin-bottom: 10px">添加</a-button>
+      <table
+          class="ele-table ele-table-border ele-table-stripe ele-table-medium"
+      >
+        <thead>
+        <tr>
+          <th>状态</th>
+          <th>续费金额</th>
+          <th>开始时间</th>
+          <th>结束时间</th>
+          <th width="360">描述</th>
+          <th style="text-align: center">操作</th>
+        </tr>
+        </thead>
+        <tr v-for="(item, index) in list" :key="index">
+          <td>
+            <template v-if="item.editStatus">
+              <a-select placeholder="请选择" v-model:value="item.status">
+                <a-select-option :value="0">待缴费</a-select-option>
+                <a-select-option :value="1">已缴费</a-select-option>
+              </a-select>
+            </template>
+            <template v-else>
+              <span v-if="item.status == 1">已缴费</span>
+              <span v-if="item.status == 0">待缴费</span>
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input-number
+                  :min="0"
+                  :max="999999"
+                  class="ele-fluid"
+                  placeholder="请输入续费金额"
+                  v-model:value="item.money"
+              />
+            </template>
+            <template v-else> ￥{{ item.money }} </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                  placeholder="开始日期"
+                  value-format="YYYY-MM-DD"
+                  v-model:value="item.startTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.startTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-date-picker
+                  placeholder="结束日期"
+                  value-format="YYYY-MM-DD"
+                  v-model:value="item.endTime"
+              />
+            </template>
+            <template v-else>
+              {{ toDateString(item.endTime, 'yyyy-MM-dd') }}
+            </template>
+          </td>
+          <td>
+            <template v-if="item.editStatus">
+              <a-input
+                  class="ele-fluid"
+                  placeholder="请输入描述内容"
+                  v-model:value="item.comments"
+              />
+              <a-upload
+                  v-model:file-list="item.images"
+                  class="upload-list-inline"
+                  list-type="picture"
+                  :before-upload="beforeUpload"
+              >
+                <a-button>
+                  <UploadOutlined />
+                  上传附件
+                </a-button>
+              </a-upload>
+            </template>
+            <template v-else>
+              <div class="comments">{{ item.comments }}</div>
+              <div class="files">
+                <a-upload
+                    v-model:file-list="item.images"
+                    class="upload-list-inline"
+                >
+                </a-upload>
+              </div>
+            </template>
+          </td>
+          <td style="text-align: center">
+            <template v-if="item.editStatus">
+              <a-space>
+                <a @click="save(item, index)">保存</a>
+                <a-divider type="vertical" />
+                <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+            <template v-else>
+              <a-space>
+                <a @click="openEdit(index)">编辑</a>
+                <a-divider type="vertical" v-if="hasRole('superAdmin')" @confirm="removeRel(index)" />
+                <a-popconfirm title="确定要删除此记录吗？" v-if="hasRole('superAdmin')" @confirm="removeRel(index)">
+                  <a class="ele-text-info">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </td>
+        </tr>
+      </table>
+</template>
+
+<script setup lang="ts">
+import { hasRole } from '@/utils/permission';
+import { ref, watch } from 'vue';
+import { addAppRenew, pageAppRenew, removeAppRenew } from "@/api/oa/app/renew";
+import { AppRenew } from '@/api/oa/app/renew/model';
+import { useUserStore } from '@/store/modules/user';
+import { message } from 'ant-design-vue';
+import { toDateString } from 'ele-admin-pro';
+import { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+import { uploadOss } from "@/api/system/file";
+import { isImage } from "@/utils/common";
+
+const props = defineProps<{
+  visible: boolean;
+  editStatus?: boolean;
+  appId?: number;
+  companyId?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'done'): void;
+  (e: 'update:visible', visible: boolean): void;
+}>();
+
+const userStore = useUserStore();
+const list = ref<AppRenew[]>([]);
+const files = ref<ItemType[]>([]);
+
+const addRecord = () => {
+  list.value.unshift({
+    money: undefined,
+    comments: undefined,
+    startTime: undefined,
+    endTime: undefined,
+    nickname: userStore.info?.nickname,
+    status: 1,
+    images: undefined,
+    editStatus: true
+  });
+};
+
+// 文件上传事件
+const beforeUpload = (file: File) => {
+  const item: ItemType = {
+    file,
+    uid: (file as any).uid,
+    name: file.name
+  }
+  if (!file.type.startsWith("image")) {
+    if (file.size / 1024 / 1024 > 100) {
+      message.error("大小不能超过 100MB");
+      return;
+    }
+  }
+  onUpload(item);
+  return false;
+};
+
+const onUpload = (d: ItemType) => {
+  uploadOss(<File>d.file)
+      .then((result) => {
+        files.value.push({
+          uid: result.id,
+          url: result.path,
+          name: isImage(result.path) ? 'image' : result.name,
+          status: "done"
+        });
+        message.success("上传成功");
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+};
+
+const remove = (index: number) => {
+  list.value.splice(index, 1);
+};
+
+const openEdit = (index: number) => {
+  list.value[index].editStatus = true
+}
+
+const removeRel = (index: number) => {
+  removeAppRenew(list.value[index].appRenewId).then(() => {
+    list.value.splice(index, 1);
+    message.success('删除成功')
+  })
+}
+
+const save = (item: AppRenew, index: number) => {
+  item.appId = props.appId;
+  item.companyId = props.companyId;
+  item.startTime = item.startTime ? item.startTime + ' 00:00:00' : '';
+  item.endTime = item.endTime ? item.endTime + ' 23:59:59' : '';
+  item.nickname = userStore.info?.nickname;
+  item.userId = userStore.info?.userId;
+  if(files.value.length > 0){
+    item.images = JSON.stringify(files.value)
+  }
+  if (item.money == undefined || item.money == 0) {
+    message.error('请填写金额');
+    return false;
+  }
+  addAppRenew(item).then(() => {
+    list.value[index].editStatus = false;
+    message.success('保存成功');
+  });
+};
+
+const reload = () => {
+  pageAppRenew({ appId: props.appId }).then((res) => {
+    if (res?.list) {
+      list.value = res?.list.map((d) => {
+        d.editStatus = false;
+        if(d.images){
+          d.images = JSON.parse(d.images);
+        }
+        return d;
+      });
+    }
+  });
+};
+
+watch(
+    () => props.appId,
+    (options) => {
+      if (options) {
+        reload();
+      }
+    },
+    {
+      immediate: true
+    }
+);
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/tower/machine/detail/components/app-photo-edit.vue b/src/views/tower/machine/detail/components/app-photo-edit.vue
new file mode 100644
index 0000000..850b98f
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-photo-edit.vue
@@ -0,0 +1,220 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '添加'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <div class="content">
+        <ele-image-upload
+          v-model:value="images"
+          :limit="6"
+          :drag="true"
+          :item-style="{ width: '150px', height: '267px' }"
+          :upload-handler="uploadHandler"
+          @upload="onUpload"
+        />
+        <small class="ele-text-placeholder">
+          请上传应用截图(最多6张)，建议宽度300*533像素，小于2M/张
+        </small>
+      </div>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFileLocal } from '@/api/system/file';
+  import { TOKEN_STORE_NAME } from '@/config/setting';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 当期时间
+  const logo = ref<ItemType[]>([]);
+  const appQrcode = ref<ItemType[]>([]);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+  const requirement = ref('');
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 应用截图
+    images: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const { resetFields } = useForm(form);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value,
+          requirement: requirement.value,
+          search: form.search ? 1 : 0,
+          images: JSON.stringify(images.value)
+          // appTypeMultiple: JSON.stringify(form.appTypeMultiple)
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (!file.type.startsWith('image')) {
+      message.error('只能选择图片');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      message.error('大小不能超过 2MB');
+      return;
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFileLocal(file, props.data?.appId)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const reload = () => {
+    loading.value = true;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        requirement.value = '';
+        logo.value = [];
+        images.value = [];
+        appQrcode.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.appIcon) {
+            logo.value.push({
+              uid: 0,
+              url: props.data.appIcon,
+              status: 'done'
+            });
+          }
+          if (props.data.appQrcode) {
+            appQrcode.value.push({
+              uid: 0,
+              url: props.data.appQrcode,
+              status: 'done'
+            });
+          }
+          if (props.data.companyId) {
+            console.log(props.data);
+          }
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d, i) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          if (props.data.search) {
+            form.search = props.data.search == 1 ? true : 0;
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          if (props.data.requirement) {
+            requirement.value = props.data.requirement;
+          }
+          isUpdate.value = true;
+          reload();
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/tower/machine/detail/components/app-photo.vue b/src/views/tower/machine/detail/components/app-photo.vue
new file mode 100644
index 0000000..f81208d
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-photo.vue
@@ -0,0 +1,52 @@
+<template>
+  <a-descriptions title="应用截图" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <div class="content">
+    <template v-if="data.appType === 'web'">
+      <a-image-preview-group>
+        <a-space :size="20" v-for="(item, index) in images" :key="index">
+          <a-image :width="360" :src="item.url" />
+        </a-space>
+      </a-image-preview-group>
+    </template>
+    <template v-else>
+      <a-image-preview-group>
+        <a-space :size="20" v-for="(item, index) in images" :key="index">
+          <a-image :width="200" :src="item.url" />
+        </a-space>
+      </a-image-preview-group>
+    </template>
+  </div>
+  <!-- 编辑弹窗 -->
+  <AppPhotoEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { App } from '@/api/oa/app/model';
+  import { ref } from 'vue';
+  import AppPhotoEdit from './app-photo-edit.vue';
+
+  defineProps<{
+    visible: boolean;
+    data: App;
+    images: any[];
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+</script>
diff --git a/src/views/tower/machine/detail/components/app-profile-edit.vue b/src/views/tower/machine/detail/components/app-profile-edit.vue
new file mode 100644
index 0000000..0d28aad
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-profile-edit.vue
@@ -0,0 +1,256 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    width="80%"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑' : '新增'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+        ref="formRef"
+        :model="form"
+        :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
+        :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
+    >
+      <!-- 编辑器 -->
+      <byte-md-editor
+          v-model:value="requirement"
+          placeholder="请输入您的内容，图片请直接粘贴"
+          :locale="zh_Hans"
+          mode="split"
+          :plugins="plugins"
+          height="500px"
+          :editorConfig="{ lineNumbers: true }"
+          @paste="onPaste"
+      />
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import {assignObject} from "ele-admin-pro";
+  import { addApp, updateApp } from '@/api/oa/app';
+  import type { App } from '@/api/oa/app/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  // 中文语言文件
+  import zh_Hans from 'bytemd/locales/zh_Hans.json';
+  // 链接、删除线、复选框、表格等的插件
+  // 插件的中文语言文件
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import highlight from '@bytemd/plugin-highlight';
+  // 中文语言文件
+  import gfm from '@bytemd/plugin-gfm';
+  // // 预览界面的样式，这里用的 github 的 markdown 主题
+  import 'github-markdown-css/github-markdown-light.css';
+  import {FormInstance} from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from "@/api/system/file";
+  import { TOKEN_STORE_NAME } from "@/config/setting";
+
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: App | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  const images = ref<ItemType[]>([]);
+  const content = ref('');
+  const requirement = ref('');
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+
+  const token = localStorage.getItem(TOKEN_STORE_NAME);
+  const formRef = ref<FormInstance | null>(null);
+
+
+  // 用户信息
+  const form = reactive<App>({
+    // 应用id
+    appId: undefined,
+    // 项目需求
+    requirement: ''
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  const { resetFields, validate, validateInfos } = useForm(form);
+
+  const config = ref({
+    height: 500,
+    images_upload_handler: (blobInfo, success, error) => {
+      const file = blobInfo.blob();
+      // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
+      const formData = new FormData();
+      formData.append('file', file, file.name);
+      uploadFile(<File>file)
+        .then((result) => {
+          if (result.length) {
+            if (file.size / 1024 / 1024 > 2) {
+              error('图片大小不能超过 2MB');
+            }
+            success(result.url);
+          } else {
+            error('上传失败');
+          }
+        })
+        .catch((e) => {
+          message.error(e.message);
+        });
+    },
+  });
+
+  /* 粘贴图片上传服务器并插入编辑器 */
+  const onPaste = (e) => {
+    console.log(e);
+    const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+    console.log(items);
+    let hasFile = false;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        let file = items[i].getAsFile();
+        const item: ItemType = {
+          file,
+          uid: (file as any).lastModified,
+          name: file.name
+        };
+        uploadFile(<File>item.file)
+          .then((result) => {
+            const addPath = '!['+result.name+']('+ result.url+')\n\r';
+            content.value = content.value + addPath
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
+        hasFile = true;
+      }
+    }
+    if (hasFile) {
+      e.preventDefault();
+    }
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          content: content.value,
+          requirement: requirement.value,
+          images: JSON.stringify(images.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateApp : addApp;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (!file.type.startsWith('image')) {
+      message.error('只能选择图片');
+      return;
+    }
+    if (file.size / 1024 / 1024 > 2) {
+      message.error('大小不能超过 2MB');
+      return;
+    }
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: data.url,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        content.value = '';
+        requirement.value = '';
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.requirement){
+            requirement.value = props.data.requirement;
+          }
+          if (props.data.content) {
+            content.value = props.data.content;
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>
diff --git a/src/views/tower/machine/detail/components/app-profile.vue b/src/views/tower/machine/detail/components/app-profile.vue
new file mode 100644
index 0000000..63c23a7
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-profile.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-descriptions title="协同文档" :bordered="false">
+    <template #extra>
+      <a @click="openEdit">编辑</a>
+    </template>
+  </a-descriptions>
+  <byte-md-viewer :value="data.requirement" :plugins="plugins" />
+  <a-empty
+    v-if="data.requirement == ''"
+    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
+    :image-style="{
+      height: '60px'
+    }"
+  >
+    <template #description>
+      <span class="ele-text-placeholder">类似腾讯文档的功能，支持多人编辑</span>
+    </template>
+    <a-button type="primary" @click="openEdit">编辑</a-button>
+  </a-empty>
+  <!-- 编辑弹窗 -->
+  <AppProfileEdit v-model:visible="showEdit" :data="data" @done="reload" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import gfm from '@bytemd/plugin-gfm';
+  import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
+  import highlight from '@bytemd/plugin-highlight';
+  import 'bytemd/dist/index.min.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import 'github-markdown-css/github-markdown-light.css';
+  import AppProfileEdit from './app-profile-edit.vue';
+
+  defineProps<{
+    appId: number;
+    data: any;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+  }>();
+
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+
+  /* 打开编辑弹窗 */
+  const openEdit = () => {
+    showEdit.value = true;
+  };
+
+  const reload = () => {
+    emit('done');
+  };
+
+  // 插件
+  const plugins = ref([
+    gfm({
+      locale: zh_HansGfm
+    }),
+    highlight()
+  ]);
+</script>
+<style lang="less">
+  .app-profile * {
+    max-width: 1000px;
+  }
+</style>
diff --git a/src/views/tower/machine/detail/components/app-secret-form.vue b/src/views/tower/machine/detail/components/app-secret-form.vue
new file mode 100644
index 0000000..bf42af6
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-secret-form.vue
@@ -0,0 +1,210 @@
+<!-- 角色编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="550"
+    :visible="visible"
+    :confirm-loading="loading"
+    title="重置AppSecret"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    ok-text="重置"
+    cancel-text="关闭"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <template v-if="!appSecret">
+        <a-form-item label="手机号码" name="phone">
+          <a-input
+            :maxlength="20"
+            :disabled="true"
+            placeholder="请输入短信验证码"
+            v-model:value="form.phone"
+          />
+        </a-form-item>
+        <a-form-item label="短信验证码" name="code">
+          <div class="login-input-group">
+            <a-input
+              placeholder="请输入验证码"
+              v-model:value="form.code"
+              :maxlength="6"
+              allow-clear
+            />
+            <a-button
+              class="login-captcha"
+              :disabled="!!countdownTime"
+              @click="openImgCodeModal"
+            >
+              <span v-if="!countdownTime" @click="sendCode">发送验证码</span>
+              <span v-else>已发送 {{ countdownTime }} s</span>
+            </a-button>
+          </div>
+        </a-form-item>
+      </template>
+      <template v-else>
+        <a-form-item label="AppID" name="appId">
+          <a-typography-text copyable code class="ele-text-secondary">{{
+            appId
+          }}</a-typography-text>
+        </a-form-item>
+        <a-form-item label="AppSecret" name="appSecret">
+          <a-typography-text copyable code class="ele-text-secondary">{{
+            appSecret
+          }}</a-typography-text>
+        </a-form-item>
+      </template>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { User } from '@/api/system/user/model';
+  import { sendSmsCaptcha } from '@/api/login';
+  import { updateAppSecret } from '@/api/oa/app';
+  import { createCode } from '@/utils/common';
+  import { pageAppUser } from '@/api/oa/app/user';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    appId?: number;
+  }>();
+
+  const formRef = ref<FormInstance | null>(null);
+  // 验证码倒计时时间
+  const countdownTime = ref(0);
+  // 验证码倒计时定时器
+  let countdownTimer: number | null = null;
+  const loading = ref(false);
+  const appSecret = ref('');
+
+  // 表单数据
+  const { form, resetFields } = useFormData<User>({
+    phone: '',
+    userId: undefined
+  });
+
+  /* 显示发送短信验证码弹窗 */
+  const openImgCodeModal = () => {
+    if (!form.phone) {
+      message.error('请输入手机号码');
+      return;
+    }
+  };
+  /* 发送短信验证码 */
+  const sendCode = () => {
+    sendSmsCaptcha({ phone: form.phone }).then(() => {
+      message.success('短信验证码发送成功, 请注意查收!');
+      countdownTime.value = 60;
+      // 开始对按钮进行倒计时
+      countdownTimer = window.setInterval(() => {
+        if (countdownTime.value <= 1) {
+          countdownTimer && clearInterval(countdownTimer);
+          countdownTimer = null;
+        }
+        countdownTime.value--;
+      }, 1000);
+    });
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    if (appSecret.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        updateAppSecret({
+          phone: form.phone,
+          appCode: form.code,
+          appId: props.appId,
+          appSecret: encrypt(createCode())
+        })
+          .then((res) => {
+            loading.value = false;
+            message.success(res.message);
+            appSecret.value = String(res.data);
+            // updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        pageAppUser({ appId: props.appId, role: 30 }).then((res) => {
+          if (res?.list) {
+            form.phone = res.list[0].phone;
+          }
+        });
+        console.log(props.appId);
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  /* 验证码 */
+  .login-input-group {
+    display: flex;
+    align-items: center;
+
+    :deep(.ant-input-affix-wrapper) {
+      flex: 1;
+    }
+
+    .login-captcha {
+      width: 102px;
+      height: 33px;
+      margin-left: 10px;
+      padding: 0;
+
+      & > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/views/tower/machine/detail/components/app-task-search.vue b/src/views/tower/machine/detail/components/app-task-search.vue
new file mode 100644
index 0000000..75a557d
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-task-search.vue
@@ -0,0 +1,34 @@
+<template>
+  <a-button
+    @click="openNew(`/oa/task/add?appid=${data.appId}&appName=${data.appName}`)"
+    >提交工单</a-button
+  >
+</template>
+
+<script lang="ts" setup>
+  import { TaskParam } from '@/api/oa/task/model';
+  import useSearch from '@/utils/use-search';
+  import { openNew } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+
+  defineProps<{
+    data: App;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where: TaskParam): void;
+    (e: 'remove'): void;
+  }>();
+
+  // 表单数据
+  const { where } = useSearch<TaskParam>({
+    keywords: '',
+    status: undefined,
+    commander: undefined
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+</script>
diff --git a/src/views/tower/machine/detail/components/app-task.vue b/src/views/tower/machine/detail/components/app-task.vue
new file mode 100644
index 0000000..7754149
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-task.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="app-task">
+    <!-- 表格 -->
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :datasource="datasource"
+      :customRow="customRow"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <AppTaskSearch :data="data" @search="reload" @remove="removeBatch" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <div class="user-box">
+            <div class="user-info">
+              <a-badge
+                :dot="!record.isRead && record.userId != userStore.info?.userId"
+              >
+                <a-avatar :src="record.avatar" size="large" />
+              </a-badge>
+            </div>
+            <div class="content" style="display: flex; flex-direction: column">
+              <div class="nickname">
+                <a-typography-text strong>
+                  {{ `${record.nickname}` }}
+                </a-typography-text>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.createTime)
+                }}</span>
+              </div>
+              <a
+                class="ele-text-heading"
+                @click="openNew('/oa/task/detail/' + record.taskId)"
+              >
+                {{ `工单标题：${record.name}` }}
+              </a>
+              <div class="ele-text-placeholder">{{
+                record.appId > 0 ? `项目名称：【${record.appName}】` : ''
+              }}</div>
+              <div
+                class="ele-text-secondary"
+                style="display: flex; align-items: center"
+              >
+                <a-avatar :size="18" :src="record.lastAvatar" />
+                <div class="content" style="padding-left: 8px">
+                  {{ record.content }}
+                </div>
+                <span class="ele-text-placeholder" style="padding-left: 10px">{{
+                  timeAgo(record.updateTime)
+                }}</span>
+              </div>
+            </div>
+            <div class="last-time ele-text-info"> </div>
+          </div>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+          <div class="ele-text-danger" v-if="record.overdueDays">
+            已逾期{{ record.overdueDays }}天
+          </div>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+        <template v-if="column.key === 'action'">
+          <a-space>
+            <a @click="onDetail(record)">查看</a>
+            <a-divider type="vertical" />
+            <a-popconfirm
+              title="确定要删除此记录吗？"
+              @confirm="remove(record)"
+            >
+              <a class="ele-text-danger">删除</a>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, watch } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { timeAgo } from 'ele-admin-pro';
+  import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import { useUserStore } from '@/store/modules/user';
+  import AppTaskSearch from './app-task-search.vue';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  import { hasRole } from '@/utils/permission';
+  import { openNew } from '@/utils/common';
+  import { App } from '@/api/oa/app/model';
+
+  const props = defineProps<{
+    appId: number | undefined;
+    data: App;
+  }>();
+
+  const userStore = useUserStore();
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const selection = ref<any[]>();
+  const status = ref<number>();
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    // 工单发起人
+    if (hasRole('promoter') || hasRole('user')) {
+      where.commander = undefined;
+      where.userId = userStore.info?.userId;
+    }
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 工单受理人员
+    if (hasRole('commander')) {
+      where.commander = userStore.info?.userId;
+    }
+    return pageTask({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<any[]>([
+    {
+      title: '工单号',
+      dataIndex: 'taskId',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 100
+    },
+    {
+      title: '工单信息',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: TaskParam) => {
+    status.value = where?.status;
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  const onDetail = (record?: Task) => {
+    window.location.href = 'detail?id=' + record?.taskId;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Task) => {
+    const hide = message.loading('请求中..', 0);
+    removeTask(row.taskId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value?.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    if (selection.value?.length) {
+      Modal.confirm({
+        title: '提示',
+        content: '确定要删除选中的记录吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+        maskClosable: true,
+        onOk: () => {
+          const hide = message.loading('请求中..', 0);
+          removeBatchTask(selection.value.map((d) => d.taskId))
+            .then((msg) => {
+              hide();
+              message.success(msg);
+              reload();
+            })
+            .catch((e) => {
+              hide();
+              message.error(e.message);
+            });
+        }
+      });
+    }
+  };
+
+  // 是否展现多选按钮及批量删除按钮
+  if (hasRole('superAdmin') || hasRole('admin')) {
+    selection.value = [];
+  }
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+      }
+    };
+  };
+
+  watch(
+    () => props.appId,
+    (appId) => {
+      if (appId) {
+        reload({ appId });
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'AppTaskIndex'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      margin-right: 7px;
+    }
+    .last-time {
+      margin-left: 12px;
+    }
+    .content {
+      .text {
+        max-width: 90%;
+      }
+    }
+  }
+  .nickname {
+    .ele-text-heading {
+      font-weight: bold;
+    }
+  }
+</style>
diff --git a/src/views/tower/machine/detail/components/app-users.vue b/src/views/tower/machine/detail/components/app-users.vue
new file mode 100644
index 0000000..afab4ad
--- /dev/null
+++ b/src/views/tower/machine/detail/components/app-users.vue
@@ -0,0 +1,121 @@
+<template>
+  <a-space style="margin-bottom: 20px">
+    <SelectStaff
+      v-if="hasRole('superAdmin') || hasRole('admin')"
+      :placeholder="`添加开发成员`"
+      @done="addAppDevUser"
+    />
+    <SelectUser
+      style="margin-left: 10px"
+      v-if="hasRole('superAdmin') || hasRole('admin')"
+      :placeholder="`添加体验成员`"
+      @done="addAppExpUser"
+    />
+    <a-button>邀请添加</a-button>
+  </a-space>
+  <div class="content">
+    <table class="ele-table ele-table-border ele-table-stripe ele-table-medium">
+      <thead>
+        <tr>
+          <th>用户</th>
+          <th>角色</th>
+          <!--          <th>邮箱</th>-->
+          <th>加入时间</th>
+          <th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(user, index) in data.users" :key="index">
+          <td>
+            <a-avatar :src="user.avatar">
+              <template #icon>
+                <user-outlined />
+              </template>
+            </a-avatar>
+            <span style="padding-left: 5px">{{ user.nickname }}</span>
+          </td>
+          <td>
+            <span v-if="user.role === 10">体验成员</span>
+            <span v-if="user.role === 20">开发成员</span>
+            <span v-if="user.role === 30">管理员</span>
+          </td>
+          <!--          <td>{{ user.email }}</td>-->
+          <td>{{ user.createTime }}</td>
+          <td>
+            <div v-if="user.role !== 30">
+              <a
+                @click="removeUser(user)"
+                v-if="hasRole('superAdmin') || hasRole('admin')"
+              >
+                移除
+              </a>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { User } from '@/api/system/user/model';
+  import { App } from '@/api/oa/app/model';
+  import { hasRole } from '@/utils/permission';
+  import { getMobile } from '@/utils/common';
+  import { AppUser } from '@/api/oa/app/user/model';
+  import { addAppUser, removeAppUser } from '@/api/oa/app/user';
+  import { message } from 'ant-design-vue';
+
+  const props = defineProps<{
+    appId: any;
+    data: App;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 添加开发成员
+  const addAppDevUser = (data: User) => {
+    addAppUser({
+      userId: data.userId,
+      appId: props.data?.appId,
+      role: 20
+    })
+      .then((msg) => {
+        message.success(msg);
+        emit('done');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  // 添加体验成员
+  const addAppExpUser = (data: User) => {
+    addAppUser({
+      userId: data.userId,
+      appId: props.data?.appId,
+      role: 10
+    })
+      .then((msg) => {
+        message.success(msg);
+        emit('done');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  // 移除成员
+  const removeUser = (data: AppUser) => {
+    removeAppUser(data.appUserId)
+      .then((msg) => {
+        message.success(msg);
+        emit('done');
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+</script>
diff --git a/src/views/tower/machine/detail/index.vue b/src/views/tower/machine/detail/index.vue
new file mode 100644
index 0000000..3f42635
--- /dev/null
+++ b/src/views/tower/machine/detail/index.vue
@@ -0,0 +1,200 @@
+<template>
+  <a-page-header
+    :title="title"
+    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
+    @back="() => $router.go(-1)"
+  >
+    <a-spin :spinning="spinning">
+      <a-card
+        :bordered="false"
+        :body-style="{ paddingTop: '5px' }"
+        v-if="isShow"
+      >
+        <a-tabs v-model:active-key="active" @change="onChange">
+          <a-tab-pane tab="基本信息" key="base">
+            <AppInfo
+              :data="form"
+              :appField="appField"
+              :logo="logo"
+              :app-qrcode="appQrcode"
+              @done="reload"
+            />
+          </a-tab-pane>
+          <!--          <a-tab-pane tab="当前项目" key="profile" />-->
+        </a-tabs>
+      </a-card>
+      <a-card v-else :bordered="false">
+        <div style="max-width: 960px; margin: 0 auto">
+          <a-result
+            status="error"
+            title="无查看权限"
+            sub-title="请先添加为项目成员"
+          >
+            <template #extra>
+              <a-space size="middle">
+                <a-button type="primary" @click="openUrl('/oa/app/index')"
+                  >返回</a-button
+                >
+              </a-space>
+            </template>
+          </a-result>
+        </div>
+      </a-card>
+    </a-spin>
+  </a-page-header>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import AppInfo from './components/app-info.vue';
+  import useFormData from '@/utils/use-form-data';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { hasRole } from '@/utils/permission';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { getTowerEquipment } from '@/api/tower/equipment';
+  import { TowerEquipment } from '@/api/tower/equipment/model';
+  import { openUrl } from '@/utils/common';
+
+  const { currentRoute } = useRouter();
+  // 当前选项卡
+  const active = ref('base');
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { screenWidth } = storeToRefs(themeStore);
+  const title = ref('设备详情');
+  const spinning = ref(true);
+  const isShow = ref(true);
+  const logo = ref<any[]>([]);
+  const equipmentId = ref<number>(0);
+  const appQrcode = ref<any[]>([]);
+  const images = ref<ItemType[]>([]);
+  const appField = ref<TowerEquipment[]>();
+
+  // 应用信息
+  const { form, assignFields, resetFields } = useFormData<TowerEquipment>({
+    equipmentId: undefined,
+    name: undefined,
+    model: undefined,
+    equipmentNo: undefined,
+    factoryNo: undefined,
+    factoryDate: undefined,
+    manufactor: undefined,
+    lifeYear: undefined,
+    surplusYear: undefined,
+    scrapDate: undefined,
+    beianNo: undefined,
+    licenceNo: undefined,
+    company: undefined,
+    organization: undefined,
+    warehouse: undefined,
+    source: undefined,
+    filingNo: undefined,
+    machineNo: undefined,
+    maxLiftingHeight: undefined,
+    armLength: undefined,
+    isOutOrg: undefined,
+    buyDate: undefined,
+    currentLocation: undefined,
+    designHeight: undefined,
+    height: undefined,
+    ratedLoad: undefined,
+    files: undefined,
+    file1: undefined,
+    file2: undefined,
+    file3: undefined,
+    file4: undefined,
+    file5: undefined,
+    file6: undefined,
+    file7: undefined,
+    users: undefined,
+    status: undefined,
+    comments: undefined,
+    userId: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    maxRatedLoad: undefined,
+    securityStatus: undefined,
+    projectName: undefined,
+    competentDepartment: undefined,
+    projectList: undefined
+  });
+
+  const onChange = () => {
+    reload();
+  };
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    resetFields();
+    logo.value = [];
+    appQrcode.value = [];
+    images.value = [];
+    appField.value = [];
+    // 加载项目详情
+    getTowerEquipment(equipmentId.value)
+      .then((data) => {
+        assignFields(data);
+        if (data.name) {
+          title.value = data.name;
+          // 修改页签标题
+          setPageTabTitle(data.name);
+        }
+        // if (data.appIcon) {
+        //   logo.value.push({
+        //     uid: data.appId,
+        //     url: data.appIcon,
+        //     status: 'done'
+        //   });
+        // }
+        // if (data.appQrcode) {
+        //   appQrcode.value.push({
+        //     uid: data.appId,
+        //     url: data.appQrcode,
+        //     status: 'done'
+        //   });
+        // }
+        // if (data.images) {
+        //   const arr = JSON.parse(data.images);
+        //   arr.map((d, i) => {
+        //     images.value.push({
+        //       uid: d.uid,
+        //       url: d.url,
+        //       status: 'done'
+        //     });
+        //   });
+        // }
+        isShow.value = true;
+        spinning.value = false;
+      })
+      .catch((err) => {
+        isShow.value = false;
+        spinning.value = false;
+      });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      console.log(id);
+      if (id) {
+        equipmentId.value = Number(id);
+      }
+      reload();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'EquipmentIdDetail'
+  };
+</script>
diff --git a/src/views/tower/machine/index.vue b/src/views/tower/machine/index.vue
index a1183ad..50ef62b 100644
--- a/src/views/tower/machine/index.vue
+++ b/src/views/tower/machine/index.vue
@@ -57,7 +57,6 @@
           row-key="equipmentId"
           :columns="columns"
           :datasource="datasource"
-          v-model:selection="selection"
           :customRow="customRow"
           tool-class="ele-toolbar-form"
           :scroll="{ x: 1200 }"
@@ -88,7 +87,7 @@
             </template>
             <template v-if="column.key === 'action'">
               <a-space>
-                <a>一机一档</a>
+                <a @click="openInfo(record)">一机一档</a>
               </a-space>
             </template>
           </template>
@@ -111,14 +110,15 @@
   } from 'ele-admin-pro/es/ele-pro-table/types';
   import { toDateString } from 'ele-admin-pro';
   import Search from './components/search.vue';
+  import { openUrl } from '@/utils/common';
   import EquipmentEdit from './components/equipment-edit.vue';
   import {
     pageTowerEquipment,
     removeBatchTowerEquipment,
     towerEquipmentData,
+    getTowerEquipment,
     // statusBatchTowerEquipment,
-    updateBatchTowerEquipment,
-    updateTowerEquipment
+    updateBatchTowerEquipment
   } from '@/api/tower/equipment';
   import {
     TowerEquipment,
@@ -310,6 +310,10 @@
     });
   };
 
+  const openInfo = (record: TowerEquipment) => {
+    openUrl('/tower/machine/detail/' + record.equipmentId);
+  };
+
   /* 自定义行属性 */
   const customRow = (record: TowerEquipment) => {
     return {