diff --git a/src/api/order.js b/src/api/order.js
index 40ea641..625e45c 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -16,4 +16,13 @@
     method: 'post',
     data: data,
   });
-}
\ No newline at end of file
+}
+
+// /business/workOrder/{id}
+export function getWorkOrder(id) {
+  return request({
+    url: '/business/workOrder/' + id,
+    method: 'get',
+  });
+}
+

diff --git a/src/api/order.js b/src/api/order.js
index 40ea641..625e45c 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -16,4 +16,13 @@
     method: 'post',
     data: data,
   });
-}
\ No newline at end of file
+}
+
+// /business/workOrder/{id}
+export function getWorkOrder(id) {
+  return request({
+    url: '/business/workOrder/' + id,
+    method: 'get',
+  });
+}
+
diff --git a/src/store/modules/order.js b/src/store/modules/order.js
new file mode 100644
index 0000000..3dfbb10
--- /dev/null
+++ b/src/store/modules/order.js
@@ -0,0 +1,33 @@
+import { listDept } from '@/api/system/dept'; // 部门
+import { listUser } from '@/api/system/user';
+import { handleTree } from '@/utils/ruoyi';
+
+const useOrderStore = defineStore('order', {
+  state: () => {
+    return {
+      deptList: [],
+      userList: [],
+    };
+  },
+  actions: {
+    getDeptList(data = {}) {
+      /* 
+    {
+        deptName: undefined,
+        status: undefined,
+    }
+    */
+      listDept(data).then(response => {
+        this.deptList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listDept ~ this.deptList:', this.deptList, response);
+      });
+    },
+    getUserList(data = {}) {
+      listUser(data).then(response => {
+        this.userList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listUser ~ this.userList:', this.userList, response);
+      });
+    },
+  },
+});
+export default useOrderStore;

diff --git a/src/api/order.js b/src/api/order.js
index 40ea641..625e45c 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -16,4 +16,13 @@
     method: 'post',
     data: data,
   });
-}
\ No newline at end of file
+}
+
+// /business/workOrder/{id}
+export function getWorkOrder(id) {
+  return request({
+    url: '/business/workOrder/' + id,
+    method: 'get',
+  });
+}
+
diff --git a/src/store/modules/order.js b/src/store/modules/order.js
new file mode 100644
index 0000000..3dfbb10
--- /dev/null
+++ b/src/store/modules/order.js
@@ -0,0 +1,33 @@
+import { listDept } from '@/api/system/dept'; // 部门
+import { listUser } from '@/api/system/user';
+import { handleTree } from '@/utils/ruoyi';
+
+const useOrderStore = defineStore('order', {
+  state: () => {
+    return {
+      deptList: [],
+      userList: [],
+    };
+  },
+  actions: {
+    getDeptList(data = {}) {
+      /* 
+    {
+        deptName: undefined,
+        status: undefined,
+    }
+    */
+      listDept(data).then(response => {
+        this.deptList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listDept ~ this.deptList:', this.deptList, response);
+      });
+    },
+    getUserList(data = {}) {
+      listUser(data).then(response => {
+        this.userList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listUser ~ this.userList:', this.userList, response);
+      });
+    },
+  },
+});
+export default useOrderStore;
diff --git a/src/views/index.vue b/src/views/index.vue
index 0eeed56..4d799cb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -52,8 +52,11 @@
 
 <script setup name="homePage">
 import useUserStore from "@/store/modules/user";
+import useOrderStore from "@/store/modules/order";
+
 const router = useRouter();
 const userStore = useUserStore();
+const orderStore = useOrderStore();
 import { fullscreenToggel } from "@/utils/util";
 // 时间以及天气
 const timer = ref(null);
@@ -116,6 +119,10 @@
   currentTime();
   showPanel2.value = false;
   AllData.BottmBackGroundShow = true;
+
+  orderStore.getDeptList()
+  orderStore.getUserList()
+
 });
 </script>
 

diff --git a/src/api/order.js b/src/api/order.js
index 40ea641..625e45c 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -16,4 +16,13 @@
     method: 'post',
     data: data,
   });
-}
\ No newline at end of file
+}
+
+// /business/workOrder/{id}
+export function getWorkOrder(id) {
+  return request({
+    url: '/business/workOrder/' + id,
+    method: 'get',
+  });
+}
+
diff --git a/src/store/modules/order.js b/src/store/modules/order.js
new file mode 100644
index 0000000..3dfbb10
--- /dev/null
+++ b/src/store/modules/order.js
@@ -0,0 +1,33 @@
+import { listDept } from '@/api/system/dept'; // 部门
+import { listUser } from '@/api/system/user';
+import { handleTree } from '@/utils/ruoyi';
+
+const useOrderStore = defineStore('order', {
+  state: () => {
+    return {
+      deptList: [],
+      userList: [],
+    };
+  },
+  actions: {
+    getDeptList(data = {}) {
+      /* 
+    {
+        deptName: undefined,
+        status: undefined,
+    }
+    */
+      listDept(data).then(response => {
+        this.deptList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listDept ~ this.deptList:', this.deptList, response);
+      });
+    },
+    getUserList(data = {}) {
+      listUser(data).then(response => {
+        this.userList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listUser ~ this.userList:', this.userList, response);
+      });
+    },
+  },
+});
+export default useOrderStore;
diff --git a/src/views/index.vue b/src/views/index.vue
index 0eeed56..4d799cb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -52,8 +52,11 @@
 
 <script setup name="homePage">
 import useUserStore from "@/store/modules/user";
+import useOrderStore from "@/store/modules/order";
+
 const router = useRouter();
 const userStore = useUserStore();
+const orderStore = useOrderStore();
 import { fullscreenToggel } from "@/utils/util";
 // 时间以及天气
 const timer = ref(null);
@@ -116,6 +119,10 @@
   currentTime();
   showPanel2.value = false;
   AllData.BottmBackGroundShow = true;
+
+  orderStore.getDeptList()
+  orderStore.getUserList()
+
 });
 </script>
 
diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
index 027d7c5..0d40e59 100644
--- a/src/views/order/components/orderDia.vue
+++ b/src/views/order/components/orderDia.vue
@@ -4,24 +4,24 @@
       <!-- 基本情况 -->
       <div class="orderBox">
         <div class="boxTitle">基本情况</div>
-        <div class="boxContent">
+        <div class="boxContent" v-loading="infoLoading">
           <el-form ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm">
             <el-row justify="space-between">
               <el-col :span="7">
                 <el-form-item label="工单编码" prop="">
-                  <el-input v-model="orderForm.orderNum" placeholder="请输入工单编码" disabled />
+                  <el-input v-model="orderForm.orderNumber" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="工单类型" prop="">
-                  <el-select v-model="orderForm.orderType" placeholder="请选择工单类型" style="width: 100%" disabled>
+                  <el-select v-model="orderForm.orderType" style="width: 100%" disabled>
                     <el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="工单来源" prop="">
-                  <el-select v-model="orderForm.orderSource" placeholder="请选择工单来源" style="width: 100%" disabled>
+                  <el-select v-model="orderForm.orderSource" style="width: 100%" disabled>
                     <el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
                 </el-form-item>
@@ -30,13 +30,13 @@
             <el-row justify="space-between">
               <el-col :span="7">
                 <el-form-item label="上&ensp;报&ensp;人" prop="">
-                  <el-input v-model="orderForm.reportPerson" placeholder="请输入上报人" disabled />
+                  <el-input v-model="orderForm.reportPerson" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="联系方式" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
+                  <el-input v-model="orderForm.reportPersonPhone" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
@@ -44,7 +44,6 @@
                   <el-date-picker
                     v-model="orderForm.alarmTime"
                     type="datetime"
-                    placeholder="请选择警情时间"
                     format="YYYY-MM-DD HH:mm:ss"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     style="width: 100%"
@@ -57,7 +56,7 @@
               <el-col :span="16">
                 <el-form-item label="发送位置" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" disabled />
+                  <el-input v-model="orderForm.reportLocation" style="width: 97%" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
@@ -65,7 +64,6 @@
                   <el-date-picker
                     v-model="orderForm.registerTime"
                     type="datetime"
-                    placeholder="请选择登记时间"
                     format="YYYY-MM-DD HH:mm:ss"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     style="width: 100%"
@@ -78,13 +76,7 @@
               <el-col :span="24">
                 <el-form-item label="信&emsp;&emsp;息" prop="">
                   <!-- phone -->
-                  <el-input
-                    v-model="orderForm.message"
-                    :autosize="{ minRows: 2, maxRows: 4 }"
-                    type="textarea"
-                    placeholder="请输入工单信息"
-                    disabled
-                  />
+                  <el-input v-model="orderForm.message" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" disabled />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -94,7 +86,6 @@
                   <el-date-picker
                     v-model="orderForm.requireFinishTime"
                     type="datetime"
-                    placeholder="请选择要求完成时间"
                     format="YYYY-MM-DD HH:mm:ss"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     style="width: 100%"
@@ -105,13 +96,13 @@
               <el-col :span="7">
                 <el-form-item label="处理单位" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.handleDeptId" disabled />
+                  <el-input v-model="orderForm.handleDeptName" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="处理人" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.handlePersonId" disabled />
+                  <el-input v-model="orderForm.handlePersonName" disabled />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -121,31 +112,51 @@
       <!-- 附件 -->
       <div class="orderBox">
         <div class="boxTitle">附件</div>
-        <div class="boxContent">
-          <div>无</div>
+        <div class="boxContent" v-loading="infoLoading">
+          <div class="imgBox" v-if="orderForm?.orderFilesList?.length">
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="i.url"
+              v-for="(i, index) in orderForm.orderFilesList"
+              :key="i"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="
+                orderForm.orderFilesList.map(item => {
+                  return item.url;
+                })
+              "
+              :initial-index="index"
+              fit="cover"
+              class="imgItem"
+            />
+          </div>
+          <div v-else>无</div>
         </div>
       </div>
       <!-- 处理流程 -->
       <div class="orderBox">
         <div class="boxTitle">处理流程</div>
-        <div class="boxContent">
+        <div class="boxContent" v-loading="infoLoading">
           <div class="processBox">
             <div class="processItem" v-for="(item, i) in handleProcess.timeStep" :key="i">
               {{ item }}
             </div>
           </div>
           <el-steps :active="handleProcess.active">
+            <!-- :title="item.activityName" -->
             <el-step
-              :title="item.title"
-              :description="item.description"
+              :title="item.activityName"
+              :description="item.endTime"
               v-for="(item, index) in handleProcess.dataList"
               :key="index"
-              :status="item.status"
+              :status="item.processStatus"
             >
               <template #title>
                 <div class="titleBox">
-                  {{ item.title }}
-                  <div class="callBox" v-if="item.status == 'process'">
+                  {{ item.activityName }}
+                  <div class="callBox" v-if="item.processStatus == 'process'">
                     <div class="callTitle">催办</div>
                     <img src="@/assets/images/order/shortMessage_icon.png" alt="" class="callImg" />
                     <img src="@/assets/images/order/phone_icon.png" alt="" class="callImg" />
@@ -156,13 +167,15 @@
           </el-steps>
           <el-divider />
           <div class="processDesc">
-            <div class="descTitle">上一步操作：<span>【李先生】登记【工单2024102900001】，【城管局】【待受理】</span></div>
-            <div class="descTime">2024-10-29 16:00</div>
+            <div class="descTitle">
+              上一步操作：<span> {{ handleProcess.operation }} </span>
+            </div>
+            <div class="descTime">{{ handleProcess.operationTime }}</div>
           </div>
         </div>
       </div>
       <!-- 事务操作 -->
-      <div class="orderBox">
+      <div class="orderBox" v-if="props.status != 'xiangqing'">
         <div class="boxTitle">事务操作</div>
         <div class="boxContent">
           <el-form ref="confirmFormRef" :rules="rules" label-width="auto" :model="confirmForm">
@@ -402,8 +415,13 @@
           </el-form>
         </div>
       </div>
+      <!-- 处理明细 -->
+      <div class="orderBox" v-if="props.status == 'xiangqing'">
+        <div class="boxTitle">处理明细</div>
+        <div class="boxContent"></div>
+      </div>
     </div>
-    <div class="boxBtn">
+    <div class="boxBtn" v-if="props.status != 'xiangqing'">
       <el-button type="primary">提交</el-button>
       <el-button @click="close">返回</el-button>
     </div>
@@ -414,6 +432,8 @@
 import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
 import phone_icon from '@/assets/images/order/phone_icon.png';
 import shortMessage_icon from '@/assets/images/order/shortMessage_icon.png';
+import { getWorkOrder } from '@/api/order';
+import { onMounted, ref } from 'vue';
 
 const { proxy } = getCurrentInstance();
 // 工单类型： work_order_type
@@ -427,18 +447,19 @@
 
 const emit = defineEmits(['closeDialog']);
 const props = defineProps({
-  // 弹窗标题
   status: {
     type: String,
     default: '',
   },
+  orderId: {
+    type: String,
+    default: '',
+  },
 });
 
 const orderFormRef = ref();
 const confirmFormRef = ref();
-const dialogImageUrl = ref('');
-const dialogVisible = ref(false);
-
+const infoLoading = ref(false);
 const orderData = reactive({
   rules: {
     name: [
@@ -460,75 +481,16 @@
       },
     ],
   },
-  orderForm: {
-    name: '',
-    code: '',
-    date: '',
-    type: '',
-    ly: '',
-    sbr: '',
-    phone: '',
-    jqTime: '',
-    djTime: '',
-    location: '',
-    doneTime: '',
-    info: '',
-    state: '',
-  },
+  orderForm: {},
   handleProcess: {
     active: 4,
     // 'wait' | 'process' | 'finish' | 'error' | 'success'
     // 等待还未进行    进行    完成     错误    成功
-    dataList: [
-      {
-        title: '登记',
-        description: '2024-10-29 15:00:00',
-        status: 'finish',
-      },
-      {
-        title: '受理',
-        description: '2024-10-29 15:09:00',
-        status: 'finish',
-      },
-      {
-        title: '提交',
-        description: '',
-        status: 'finish',
-      },
-      {
-        title: '分派',
-        description: '',
-        status: 'process',
-      },
-      {
-        title: '响应',
-        description: '',
-        status: 'wait',
-      },
-      {
-        title: '上报',
-        description: '',
-        status: 'wait',
-      },
-      {
-        title: '核实',
-        description: '',
-        status: 'wait',
-      },
-      {
-        title: '结单',
-        description: '',
-        status: 'wait',
-      },
-    ],
+    dataList: [],
     // timeStep: ['9min','9min','9min','9min','9min','9min','9min'],
-    timeStep: ['9min'],
-    timeStep1: [
-      {
-        day: '1',
-        h: '2',
-      },
-    ],
+    timeStep: [],
+    operation: '',
+    operationTime: '',
   },
   confirmForm: {
     time: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
@@ -700,18 +662,29 @@
 
 const { rules, orderForm, handleProcess, confirmForm, threeData, presonThreeData } = toRefs(orderData);
 
-const handleRemove = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles);
+// 详情
+const getDetail = () => {
+  infoLoading.value = true;
+  getWorkOrder(props.orderId).then(res => {
+    console.log('----------', res);
+    orderForm.value = res.data;
+    handleProcess.value.dataList = res.data.workOrderWorkFlowStepVo?.workOrderWorkFlowHistoryVoList;
+    handleProcess.value.timeStep = res.data.workOrderWorkFlowStepVo?.timeStepList;
+    // previousOperation
+    handleProcess.value.operation = res.data.previousOperation?.operation || '';
+    handleProcess.value.operationTime = res.data.previousOperation?.operationTime || '';
+    infoLoading.value = false;
+  });
 };
-
-const handlePictureCardPreview = uploadFile => {
-  dialogImageUrl.value = uploadFile.url;
-  dialogVisible.value = true;
-};
+const handleSubmit = () => {};
 
 const close = () => {
   emit('closeDialog');
 };
+
+onMounted(() => {
+  getDetail();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -743,6 +716,7 @@
       padding-left: 20px;
     }
     .boxContent {
+      min-height: 50px;
       //   height: calc(100% - 120px);
       margin: 10px 0;
       //   border: 1px solid red;
@@ -782,6 +756,15 @@
           color: #666666;
         }
       }
+      .imgBox {
+        display: flex;
+        align-items: center;
+        .imgItem {
+          width: 100px;
+          height: 100px;
+          margin-right: 15px;
+        }
+      }
     }
   }
   .boxBtn {
@@ -824,4 +807,8 @@
 .el-divider {
   margin: 10px 0 15px 0;
 }
+
+:deep(.el-loading-spinner) {
+  top: 20%;
+}
 </style>

diff --git a/src/api/order.js b/src/api/order.js
index 40ea641..625e45c 100644
--- a/src/api/order.js
+++ b/src/api/order.js
@@ -16,4 +16,13 @@
     method: 'post',
     data: data,
   });
-}
\ No newline at end of file
+}
+
+// /business/workOrder/{id}
+export function getWorkOrder(id) {
+  return request({
+    url: '/business/workOrder/' + id,
+    method: 'get',
+  });
+}
+
diff --git a/src/store/modules/order.js b/src/store/modules/order.js
new file mode 100644
index 0000000..3dfbb10
--- /dev/null
+++ b/src/store/modules/order.js
@@ -0,0 +1,33 @@
+import { listDept } from '@/api/system/dept'; // 部门
+import { listUser } from '@/api/system/user';
+import { handleTree } from '@/utils/ruoyi';
+
+const useOrderStore = defineStore('order', {
+  state: () => {
+    return {
+      deptList: [],
+      userList: [],
+    };
+  },
+  actions: {
+    getDeptList(data = {}) {
+      /* 
+    {
+        deptName: undefined,
+        status: undefined,
+    }
+    */
+      listDept(data).then(response => {
+        this.deptList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listDept ~ this.deptList:', this.deptList, response);
+      });
+    },
+    getUserList(data = {}) {
+      listUser(data).then(response => {
+        this.userList = handleTree(response.data, 'deptId');
+        console.log('🚀 ~ listUser ~ this.userList:', this.userList, response);
+      });
+    },
+  },
+});
+export default useOrderStore;
diff --git a/src/views/index.vue b/src/views/index.vue
index 0eeed56..4d799cb 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -52,8 +52,11 @@
 
 <script setup name="homePage">
 import useUserStore from "@/store/modules/user";
+import useOrderStore from "@/store/modules/order";
+
 const router = useRouter();
 const userStore = useUserStore();
+const orderStore = useOrderStore();
 import { fullscreenToggel } from "@/utils/util";
 // 时间以及天气
 const timer = ref(null);
@@ -116,6 +119,10 @@
   currentTime();
   showPanel2.value = false;
   AllData.BottmBackGroundShow = true;
+
+  orderStore.getDeptList()
+  orderStore.getUserList()
+
 });
 </script>
 
diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
index 027d7c5..0d40e59 100644
--- a/src/views/order/components/orderDia.vue
+++ b/src/views/order/components/orderDia.vue
@@ -4,24 +4,24 @@
       <!-- 基本情况 -->
       <div class="orderBox">
         <div class="boxTitle">基本情况</div>
-        <div class="boxContent">
+        <div class="boxContent" v-loading="infoLoading">
           <el-form ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm">
             <el-row justify="space-between">
               <el-col :span="7">
                 <el-form-item label="工单编码" prop="">
-                  <el-input v-model="orderForm.orderNum" placeholder="请输入工单编码" disabled />
+                  <el-input v-model="orderForm.orderNumber" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="工单类型" prop="">
-                  <el-select v-model="orderForm.orderType" placeholder="请选择工单类型" style="width: 100%" disabled>
+                  <el-select v-model="orderForm.orderType" style="width: 100%" disabled>
                     <el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="工单来源" prop="">
-                  <el-select v-model="orderForm.orderSource" placeholder="请选择工单来源" style="width: 100%" disabled>
+                  <el-select v-model="orderForm.orderSource" style="width: 100%" disabled>
                     <el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
                   </el-select>
                 </el-form-item>
@@ -30,13 +30,13 @@
             <el-row justify="space-between">
               <el-col :span="7">
                 <el-form-item label="上&ensp;报&ensp;人" prop="">
-                  <el-input v-model="orderForm.reportPerson" placeholder="请输入上报人" disabled />
+                  <el-input v-model="orderForm.reportPerson" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="联系方式" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
+                  <el-input v-model="orderForm.reportPersonPhone" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
@@ -44,7 +44,6 @@
                   <el-date-picker
                     v-model="orderForm.alarmTime"
                     type="datetime"
-                    placeholder="请选择警情时间"
                     format="YYYY-MM-DD HH:mm:ss"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     style="width: 100%"
@@ -57,7 +56,7 @@
               <el-col :span="16">
                 <el-form-item label="发送位置" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" disabled />
+                  <el-input v-model="orderForm.reportLocation" style="width: 97%" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
@@ -65,7 +64,6 @@
                   <el-date-picker
                     v-model="orderForm.registerTime"
                     type="datetime"
-                    placeholder="请选择登记时间"
                     format="YYYY-MM-DD HH:mm:ss"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     style="width: 100%"
@@ -78,13 +76,7 @@
               <el-col :span="24">
                 <el-form-item label="信&emsp;&emsp;息" prop="">
                   <!-- phone -->
-                  <el-input
-                    v-model="orderForm.message"
-                    :autosize="{ minRows: 2, maxRows: 4 }"
-                    type="textarea"
-                    placeholder="请输入工单信息"
-                    disabled
-                  />
+                  <el-input v-model="orderForm.message" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" disabled />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -94,7 +86,6 @@
                   <el-date-picker
                     v-model="orderForm.requireFinishTime"
                     type="datetime"
-                    placeholder="请选择要求完成时间"
                     format="YYYY-MM-DD HH:mm:ss"
                     value-format="YYYY-MM-DD HH:mm:ss"
                     style="width: 100%"
@@ -105,13 +96,13 @@
               <el-col :span="7">
                 <el-form-item label="处理单位" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.handleDeptId" disabled />
+                  <el-input v-model="orderForm.handleDeptName" disabled />
                 </el-form-item>
               </el-col>
               <el-col :span="7">
                 <el-form-item label="处理人" prop="">
                   <!-- phone -->
-                  <el-input v-model="orderForm.handlePersonId" disabled />
+                  <el-input v-model="orderForm.handlePersonName" disabled />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -121,31 +112,51 @@
       <!-- 附件 -->
       <div class="orderBox">
         <div class="boxTitle">附件</div>
-        <div class="boxContent">
-          <div>无</div>
+        <div class="boxContent" v-loading="infoLoading">
+          <div class="imgBox" v-if="orderForm?.orderFilesList?.length">
+            <el-image
+              style="width: 100px; height: 100px"
+              :src="i.url"
+              v-for="(i, index) in orderForm.orderFilesList"
+              :key="i"
+              :zoom-rate="1.2"
+              :max-scale="7"
+              :min-scale="0.2"
+              :preview-src-list="
+                orderForm.orderFilesList.map(item => {
+                  return item.url;
+                })
+              "
+              :initial-index="index"
+              fit="cover"
+              class="imgItem"
+            />
+          </div>
+          <div v-else>无</div>
         </div>
       </div>
       <!-- 处理流程 -->
       <div class="orderBox">
         <div class="boxTitle">处理流程</div>
-        <div class="boxContent">
+        <div class="boxContent" v-loading="infoLoading">
           <div class="processBox">
             <div class="processItem" v-for="(item, i) in handleProcess.timeStep" :key="i">
               {{ item }}
             </div>
           </div>
           <el-steps :active="handleProcess.active">
+            <!-- :title="item.activityName" -->
             <el-step
-              :title="item.title"
-              :description="item.description"
+              :title="item.activityName"
+              :description="item.endTime"
               v-for="(item, index) in handleProcess.dataList"
               :key="index"
-              :status="item.status"
+              :status="item.processStatus"
             >
               <template #title>
                 <div class="titleBox">
-                  {{ item.title }}
-                  <div class="callBox" v-if="item.status == 'process'">
+                  {{ item.activityName }}
+                  <div class="callBox" v-if="item.processStatus == 'process'">
                     <div class="callTitle">催办</div>
                     <img src="@/assets/images/order/shortMessage_icon.png" alt="" class="callImg" />
                     <img src="@/assets/images/order/phone_icon.png" alt="" class="callImg" />
@@ -156,13 +167,15 @@
           </el-steps>
           <el-divider />
           <div class="processDesc">
-            <div class="descTitle">上一步操作：<span>【李先生】登记【工单2024102900001】，【城管局】【待受理】</span></div>
-            <div class="descTime">2024-10-29 16:00</div>
+            <div class="descTitle">
+              上一步操作：<span> {{ handleProcess.operation }} </span>
+            </div>
+            <div class="descTime">{{ handleProcess.operationTime }}</div>
           </div>
         </div>
       </div>
       <!-- 事务操作 -->
-      <div class="orderBox">
+      <div class="orderBox" v-if="props.status != 'xiangqing'">
         <div class="boxTitle">事务操作</div>
         <div class="boxContent">
           <el-form ref="confirmFormRef" :rules="rules" label-width="auto" :model="confirmForm">
@@ -402,8 +415,13 @@
           </el-form>
         </div>
       </div>
+      <!-- 处理明细 -->
+      <div class="orderBox" v-if="props.status == 'xiangqing'">
+        <div class="boxTitle">处理明细</div>
+        <div class="boxContent"></div>
+      </div>
     </div>
-    <div class="boxBtn">
+    <div class="boxBtn" v-if="props.status != 'xiangqing'">
       <el-button type="primary">提交</el-button>
       <el-button @click="close">返回</el-button>
     </div>
@@ -414,6 +432,8 @@
 import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
 import phone_icon from '@/assets/images/order/phone_icon.png';
 import shortMessage_icon from '@/assets/images/order/shortMessage_icon.png';
+import { getWorkOrder } from '@/api/order';
+import { onMounted, ref } from 'vue';
 
 const { proxy } = getCurrentInstance();
 // 工单类型： work_order_type
@@ -427,18 +447,19 @@
 
 const emit = defineEmits(['closeDialog']);
 const props = defineProps({
-  // 弹窗标题
   status: {
     type: String,
     default: '',
   },
+  orderId: {
+    type: String,
+    default: '',
+  },
 });
 
 const orderFormRef = ref();
 const confirmFormRef = ref();
-const dialogImageUrl = ref('');
-const dialogVisible = ref(false);
-
+const infoLoading = ref(false);
 const orderData = reactive({
   rules: {
     name: [
@@ -460,75 +481,16 @@
       },
     ],
   },
-  orderForm: {
-    name: '',
-    code: '',
-    date: '',
-    type: '',
-    ly: '',
-    sbr: '',
-    phone: '',
-    jqTime: '',
-    djTime: '',
-    location: '',
-    doneTime: '',
-    info: '',
-    state: '',
-  },
+  orderForm: {},
   handleProcess: {
     active: 4,
     // 'wait' | 'process' | 'finish' | 'error' | 'success'
     // 等待还未进行    进行    完成     错误    成功
-    dataList: [
-      {
-        title: '登记',
-        description: '2024-10-29 15:00:00',
-        status: 'finish',
-      },
-      {
-        title: '受理',
-        description: '2024-10-29 15:09:00',
-        status: 'finish',
-      },
-      {
-        title: '提交',
-        description: '',
-        status: 'finish',
-      },
-      {
-        title: '分派',
-        description: '',
-        status: 'process',
-      },
-      {
-        title: '响应',
-        description: '',
-        status: 'wait',
-      },
-      {
-        title: '上报',
-        description: '',
-        status: 'wait',
-      },
-      {
-        title: '核实',
-        description: '',
-        status: 'wait',
-      },
-      {
-        title: '结单',
-        description: '',
-        status: 'wait',
-      },
-    ],
+    dataList: [],
     // timeStep: ['9min','9min','9min','9min','9min','9min','9min'],
-    timeStep: ['9min'],
-    timeStep1: [
-      {
-        day: '1',
-        h: '2',
-      },
-    ],
+    timeStep: [],
+    operation: '',
+    operationTime: '',
   },
   confirmForm: {
     time: proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
@@ -700,18 +662,29 @@
 
 const { rules, orderForm, handleProcess, confirmForm, threeData, presonThreeData } = toRefs(orderData);
 
-const handleRemove = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles);
+// 详情
+const getDetail = () => {
+  infoLoading.value = true;
+  getWorkOrder(props.orderId).then(res => {
+    console.log('----------', res);
+    orderForm.value = res.data;
+    handleProcess.value.dataList = res.data.workOrderWorkFlowStepVo?.workOrderWorkFlowHistoryVoList;
+    handleProcess.value.timeStep = res.data.workOrderWorkFlowStepVo?.timeStepList;
+    // previousOperation
+    handleProcess.value.operation = res.data.previousOperation?.operation || '';
+    handleProcess.value.operationTime = res.data.previousOperation?.operationTime || '';
+    infoLoading.value = false;
+  });
 };
-
-const handlePictureCardPreview = uploadFile => {
-  dialogImageUrl.value = uploadFile.url;
-  dialogVisible.value = true;
-};
+const handleSubmit = () => {};
 
 const close = () => {
   emit('closeDialog');
 };
+
+onMounted(() => {
+  getDetail();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -743,6 +716,7 @@
       padding-left: 20px;
     }
     .boxContent {
+      min-height: 50px;
       //   height: calc(100% - 120px);
       margin: 10px 0;
       //   border: 1px solid red;
@@ -782,6 +756,15 @@
           color: #666666;
         }
       }
+      .imgBox {
+        display: flex;
+        align-items: center;
+        .imgItem {
+          width: 100px;
+          height: 100px;
+          margin-right: 15px;
+        }
+      }
     }
   }
   .boxBtn {
@@ -824,4 +807,8 @@
 .el-divider {
   margin: 10px 0 15px 0;
 }
+
+:deep(.el-loading-spinner) {
+  top: 20%;
+}
 </style>
diff --git a/src/views/order/workOrderQuery/index.vue b/src/views/order/workOrderQuery/index.vue
index dfb5c28..a9a84c7 100644
--- a/src/views/order/workOrderQuery/index.vue
+++ b/src/views/order/workOrderQuery/index.vue
@@ -89,7 +89,7 @@
       :append-to-body="true"
       :destroy-on-close="true"
     >
-      <orderDia :status="'xiangqing'" @closeDialog="closeDialog"></orderDia>
+      <orderDia :status="'xiangqing'" :orderId="orderId" @closeDialog="closeDialog"></orderDia>
     </el-dialog>
   </div>
 </template>
@@ -124,10 +124,11 @@
   pageNum: 1,
   pageSize: 10,
 });
-
+const orderId = ref('');
 const tableData = ref([]);
 
-const handleDetail = () => {
+const handleDetail = row => {
+  orderId.value = row.id;
   dialogConfig.value.visible = true;
 };