diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
index b5884d2..7df60b2 100644
--- a/src/views/order/components/orderDia.vue
+++ b/src/views/order/components/orderDia.vue
@@ -335,7 +335,7 @@
 <style lang="scss" scoped>
 .orderDia {
   width: 100%;
-  height: 750px;
+  height: 720px;
   //   border: 1px solid red;
   padding-bottom: 20px;
   .orderContent {

diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
index b5884d2..7df60b2 100644
--- a/src/views/order/components/orderDia.vue
+++ b/src/views/order/components/orderDia.vue
@@ -335,7 +335,7 @@
 <style lang="scss" scoped>
 .orderDia {
   width: 100%;
-  height: 750px;
+  height: 720px;
   //   border: 1px solid red;
   padding-bottom: 20px;
   .orderContent {
diff --git a/src/views/order/workOrderProcessing/components/checkOrder.vue b/src/views/order/workOrderProcessing/components/checkOrder.vue
index 8df58c0..4c2b652 100644
--- a/src/views/order/workOrderProcessing/components/checkOrder.vue
+++ b/src/views/order/workOrderProcessing/components/checkOrder.vue
@@ -7,37 +7,53 @@
         <span class="title">登记时间</span>
         <el-date-picker
           v-model="dateRange"
-          type="datetimerange"
+          type="daterange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
         />
       </el-col>
       <el-col :span="5" class="flex flex-align-center chooseType">
         <span class="title">工单类型</span>
-        <el-select v-model="value" placeholder="请选择" style="width: 240px">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select v-model="queryParams.orderType" placeholder="请选择" style="width: 240px">
+          <el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-col>
       <el-col :span="6">
-        <el-button type="primary">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button type="primary" icon="Download">导出</el-button>
       </el-col>
     </el-row>
-    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
+    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }" v-loading="loading">
       <el-table-column type="index" label="序号" width="50" />
-      <el-table-column prop="code" label="工单编号" />
-      <el-table-column prop="date" label="登记时间" />
-      <el-table-column prop="type" label="工单类型" />
-      <el-table-column prop="ly" label="工单来源" />
+      <el-table-column prop="orderNumber" label="工单编号" />
+      <el-table-column prop="registerTime" label="登记时间" />
+      <el-table-column prop="orderType" label="工单类型">
+        <template #default="{ row }">
+          <div>{{ work_order_type.find(item => item.value == row.orderType)?.label || row.orderType }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderSource" label="工单来源">
+        <template #default="{ row }">
+          <div>{{ work_order_source.find(item => item.value == row.orderSource)?.label || row.orderSource }}</div>
+        </template>
+      </el-table-column>
       <el-table-column prop="info" label="信息" />
-      <el-table-column prop="state" label="工单状态" />
+      <el-table-column prop="status" label="工单状态">
+        <template #default="{ row }">
+          <div>{{ work_order_status.find(item => item.value == row.status)?.label || row.status }}</div>
+        </template>
+      </el-table-column>
       <el-table-column label="操作">
         <template #default="{ row }">
           <div style="display: flex; justify-content: space-evenly">
             <!-- <el-button link type="primary" icon="Edit" @click="addArea(row)">编辑</el-button>
               <el-button link type="danger" icon="Delete" @click="deleteArea(row)">删除</el-button> -->
-            <el-button link type="primary">受理</el-button>
+            <el-button link type="primary" @click="handleDetail(row)">
+              {{ titleList.find(item => item.value == props.status)?.title || '' }}
+            </el-button>
           </div>
         </template>
       </el-table-column>
@@ -51,150 +67,132 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <el-dialog
+      v-model="dialogConfig.visible"
+      :title="dialogConfig.title"
+      width="1400px"
+      :append-to-body="true"
+      :destroy-on-close="true"
+    >
+      <orderDia></orderDia>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="checkOrder">
-import { onMounted } from 'vue';
+import orderDia from '../../components/orderDia';
+import { onMounted, watch } from 'vue';
 import { workOrderPage } from '@/api/order';
 
 const { proxy } = getCurrentInstance();
 
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+});
+
+const dialogConfig = ref({
+  visible: false,
+  // visible: true,
+  title: '工单详情',
+});
+
 const total = ref(0);
+const loading = ref(false);
 const queryParams = ref({
+  registerStartTime: '',
+  registerEndTime: '',
+  orderType: '',
+  status: '',
+  orderSource: '',
   pageNum: 1,
   pageSize: 10,
 });
-const dateRange = ref([
-  proxy.moment().subtract(3, 'days').format('YYYY-MM-DD 00:00:00'),
-  proxy.moment().format('YYYY-MM-DD 23:59:59'),
-]);
-const value = ref('');
+const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const tableData = ref([]);
 
-const options = [
+const titleList = ref([
   {
-    value: 'Option1',
-    label: '燃气工单',
+    code: '001',
+    title: '登记工单',
+    value: 'launch',
   },
   {
-    value: 'Option2',
-    label: '排水工单',
+    code: '002',
+    title: '受理',
+    value: 'accept',
   },
   {
-    value: 'Option3',
-    label: '桥梁工单',
+    code: '003',
+    title: '提交',
+    value: 'submit',
   },
   {
-    value: 'Option4',
-    label: '隧道工单',
-  },
-];
-
-const tableData = ref([
-  {
-    code: 'GD2024102900001',
-    date: '2024-05-03 12:00:00',
-    type: '燃气工单',
-    ly: 'APP',
-    info: '',
-    state: '待受理',
+    code: '004',
+    title: '分派',
+    value: 'assign',
   },
   {
-    code: 'GD2024102900002',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '电话',
-    info: '',
-    state: '待受理',
+    code: '005',
+    title: '响应',
+    value: 'response',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '006',
+    title: '上报',
+    value: 'report',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '007',
+    title: '核实',
+    value: 'check',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '008',
+    title: '结案',
+    value: 'complete',
   },
 ]);
 
-const getList = () => {
-  total.value = tableData.value.length;
+const handleDetail = () => {
+  dialogConfig.value.visible = true;
 };
 
+const getList = () => {
+  queryParams.value.registerStartTime = dateRange.value[0] + ' 00:00:00';
+  queryParams.value.registerEndTime = dateRange.value[1] + ' 23:59:59';
+  loading.value = true;
+  workOrderPage(queryParams.value).then(res => {
+    // console.log('🚀 ~ workOrderList ~ res:', res);
+    tableData.value = res.data;
+    total.value = res.total;
+    loading.value = false;
+  });
+};
+
+watch(
+  () => props.status,
+  val => {
+    queryParams.value.status = val;
+    getList();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
 onMounted(() => {
-  getList();
+  // getList();
 });
 </script>
 

diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
index b5884d2..7df60b2 100644
--- a/src/views/order/components/orderDia.vue
+++ b/src/views/order/components/orderDia.vue
@@ -335,7 +335,7 @@
 <style lang="scss" scoped>
 .orderDia {
   width: 100%;
-  height: 750px;
+  height: 720px;
   //   border: 1px solid red;
   padding-bottom: 20px;
   .orderContent {
diff --git a/src/views/order/workOrderProcessing/components/checkOrder.vue b/src/views/order/workOrderProcessing/components/checkOrder.vue
index 8df58c0..4c2b652 100644
--- a/src/views/order/workOrderProcessing/components/checkOrder.vue
+++ b/src/views/order/workOrderProcessing/components/checkOrder.vue
@@ -7,37 +7,53 @@
         <span class="title">登记时间</span>
         <el-date-picker
           v-model="dateRange"
-          type="datetimerange"
+          type="daterange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
         />
       </el-col>
       <el-col :span="5" class="flex flex-align-center chooseType">
         <span class="title">工单类型</span>
-        <el-select v-model="value" placeholder="请选择" style="width: 240px">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select v-model="queryParams.orderType" placeholder="请选择" style="width: 240px">
+          <el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-col>
       <el-col :span="6">
-        <el-button type="primary">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button type="primary" icon="Download">导出</el-button>
       </el-col>
     </el-row>
-    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
+    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }" v-loading="loading">
       <el-table-column type="index" label="序号" width="50" />
-      <el-table-column prop="code" label="工单编号" />
-      <el-table-column prop="date" label="登记时间" />
-      <el-table-column prop="type" label="工单类型" />
-      <el-table-column prop="ly" label="工单来源" />
+      <el-table-column prop="orderNumber" label="工单编号" />
+      <el-table-column prop="registerTime" label="登记时间" />
+      <el-table-column prop="orderType" label="工单类型">
+        <template #default="{ row }">
+          <div>{{ work_order_type.find(item => item.value == row.orderType)?.label || row.orderType }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderSource" label="工单来源">
+        <template #default="{ row }">
+          <div>{{ work_order_source.find(item => item.value == row.orderSource)?.label || row.orderSource }}</div>
+        </template>
+      </el-table-column>
       <el-table-column prop="info" label="信息" />
-      <el-table-column prop="state" label="工单状态" />
+      <el-table-column prop="status" label="工单状态">
+        <template #default="{ row }">
+          <div>{{ work_order_status.find(item => item.value == row.status)?.label || row.status }}</div>
+        </template>
+      </el-table-column>
       <el-table-column label="操作">
         <template #default="{ row }">
           <div style="display: flex; justify-content: space-evenly">
             <!-- <el-button link type="primary" icon="Edit" @click="addArea(row)">编辑</el-button>
               <el-button link type="danger" icon="Delete" @click="deleteArea(row)">删除</el-button> -->
-            <el-button link type="primary">受理</el-button>
+            <el-button link type="primary" @click="handleDetail(row)">
+              {{ titleList.find(item => item.value == props.status)?.title || '' }}
+            </el-button>
           </div>
         </template>
       </el-table-column>
@@ -51,150 +67,132 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <el-dialog
+      v-model="dialogConfig.visible"
+      :title="dialogConfig.title"
+      width="1400px"
+      :append-to-body="true"
+      :destroy-on-close="true"
+    >
+      <orderDia></orderDia>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="checkOrder">
-import { onMounted } from 'vue';
+import orderDia from '../../components/orderDia';
+import { onMounted, watch } from 'vue';
 import { workOrderPage } from '@/api/order';
 
 const { proxy } = getCurrentInstance();
 
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+});
+
+const dialogConfig = ref({
+  visible: false,
+  // visible: true,
+  title: '工单详情',
+});
+
 const total = ref(0);
+const loading = ref(false);
 const queryParams = ref({
+  registerStartTime: '',
+  registerEndTime: '',
+  orderType: '',
+  status: '',
+  orderSource: '',
   pageNum: 1,
   pageSize: 10,
 });
-const dateRange = ref([
-  proxy.moment().subtract(3, 'days').format('YYYY-MM-DD 00:00:00'),
-  proxy.moment().format('YYYY-MM-DD 23:59:59'),
-]);
-const value = ref('');
+const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const tableData = ref([]);
 
-const options = [
+const titleList = ref([
   {
-    value: 'Option1',
-    label: '燃气工单',
+    code: '001',
+    title: '登记工单',
+    value: 'launch',
   },
   {
-    value: 'Option2',
-    label: '排水工单',
+    code: '002',
+    title: '受理',
+    value: 'accept',
   },
   {
-    value: 'Option3',
-    label: '桥梁工单',
+    code: '003',
+    title: '提交',
+    value: 'submit',
   },
   {
-    value: 'Option4',
-    label: '隧道工单',
-  },
-];
-
-const tableData = ref([
-  {
-    code: 'GD2024102900001',
-    date: '2024-05-03 12:00:00',
-    type: '燃气工单',
-    ly: 'APP',
-    info: '',
-    state: '待受理',
+    code: '004',
+    title: '分派',
+    value: 'assign',
   },
   {
-    code: 'GD2024102900002',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '电话',
-    info: '',
-    state: '待受理',
+    code: '005',
+    title: '响应',
+    value: 'response',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '006',
+    title: '上报',
+    value: 'report',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '007',
+    title: '核实',
+    value: 'check',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '008',
+    title: '结案',
+    value: 'complete',
   },
 ]);
 
-const getList = () => {
-  total.value = tableData.value.length;
+const handleDetail = () => {
+  dialogConfig.value.visible = true;
 };
 
+const getList = () => {
+  queryParams.value.registerStartTime = dateRange.value[0] + ' 00:00:00';
+  queryParams.value.registerEndTime = dateRange.value[1] + ' 23:59:59';
+  loading.value = true;
+  workOrderPage(queryParams.value).then(res => {
+    // console.log('🚀 ~ workOrderList ~ res:', res);
+    tableData.value = res.data;
+    total.value = res.total;
+    loading.value = false;
+  });
+};
+
+watch(
+  () => props.status,
+  val => {
+    queryParams.value.status = val;
+    getList();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
 onMounted(() => {
-  getList();
+  // getList();
 });
 </script>
 
diff --git a/src/views/order/workOrderProcessing/index.vue b/src/views/order/workOrderProcessing/index.vue
index d3ea500..5bd7300 100644
--- a/src/views/order/workOrderProcessing/index.vue
+++ b/src/views/order/workOrderProcessing/index.vue
@@ -6,8 +6,8 @@
         class="orderTitle"
         v-for="(item, index) in orderTitleList"
         :key="item.code"
-        :class="{ active: item.code == showOrderCode }"
-        @click="showOrderCode = item.code"
+        :class="{ active: item.value == showOrderCode }"
+        @click="changeOrder(item)"
       >
         <img :src="item.icon" alt="" class="titleIcon" />
         <div class="titleCon">
@@ -17,8 +17,8 @@
       </div>
     </div>
     <div class="orderBottom">
-      <registerOrder v-if="showOrderCode == '001'"></registerOrder>
-      <checkOrder v-if="showOrderCode !== '001'"></checkOrder>
+      <registerOrder v-if="showOrderCode == 'launch'"></registerOrder>
+      <checkOrder v-if="showOrderCode !== 'launch'" :status="showOrderCode"></checkOrder>
     </div>
   </div>
 </template>
@@ -37,57 +37,70 @@
 import ja_icon from '@/assets/images/order/ja_icon.png';
 // registerOrder
 
-const showOrderCode = ref('002');
+const showOrderCode = ref('accept');
 const orderTitleList = ref([
   {
     code: '001',
     title: '登记工单',
     icon: gddj_icon,
+    value: 'launch',
     num: '1',
   },
   {
     code: '002',
     title: '工单受理',
     icon: sl_icon,
+    value: 'accept',
     num: '0',
   },
   {
     code: '003',
     title: '工单提交',
     icon: tj_icon,
+    value: 'submit',
     num: '0',
   },
   {
     code: '004',
     title: '工单分派',
     icon: fp_icon,
+    value: 'assign',
     num: '0',
   },
   {
     code: '005',
     title: '工单响应',
     icon: xy_icon,
+    value: 'response',
     num: '0',
   },
   {
     code: '006',
     title: '工单上报',
     icon: sb_icon,
+    value: 'report',
     num: '0',
   },
   {
     code: '007',
     title: '工单核实',
     icon: hs_icon,
+    value: 'check',
     num: '0',
   },
   {
     code: '008',
     title: '工单结案',
     icon: ja_icon,
+    value: 'complete',
     num: '0',
   },
 ]);
+
+const changeOrder = item => {
+  showOrderCode.value = item.value;
+  //   console.log('changeOrder');
+};
 </script>
 
 <style lang="scss" scoped>

diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
index b5884d2..7df60b2 100644
--- a/src/views/order/components/orderDia.vue
+++ b/src/views/order/components/orderDia.vue
@@ -335,7 +335,7 @@
 <style lang="scss" scoped>
 .orderDia {
   width: 100%;
-  height: 750px;
+  height: 720px;
   //   border: 1px solid red;
   padding-bottom: 20px;
   .orderContent {
diff --git a/src/views/order/workOrderProcessing/components/checkOrder.vue b/src/views/order/workOrderProcessing/components/checkOrder.vue
index 8df58c0..4c2b652 100644
--- a/src/views/order/workOrderProcessing/components/checkOrder.vue
+++ b/src/views/order/workOrderProcessing/components/checkOrder.vue
@@ -7,37 +7,53 @@
         <span class="title">登记时间</span>
         <el-date-picker
           v-model="dateRange"
-          type="datetimerange"
+          type="daterange"
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
         />
       </el-col>
       <el-col :span="5" class="flex flex-align-center chooseType">
         <span class="title">工单类型</span>
-        <el-select v-model="value" placeholder="请选择" style="width: 240px">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select v-model="queryParams.orderType" placeholder="请选择" style="width: 240px">
+          <el-option v-for="item in work_order_type" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-col>
       <el-col :span="6">
-        <el-button type="primary">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button type="primary" icon="Download">导出</el-button>
       </el-col>
     </el-row>
-    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
+    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }" v-loading="loading">
       <el-table-column type="index" label="序号" width="50" />
-      <el-table-column prop="code" label="工单编号" />
-      <el-table-column prop="date" label="登记时间" />
-      <el-table-column prop="type" label="工单类型" />
-      <el-table-column prop="ly" label="工单来源" />
+      <el-table-column prop="orderNumber" label="工单编号" />
+      <el-table-column prop="registerTime" label="登记时间" />
+      <el-table-column prop="orderType" label="工单类型">
+        <template #default="{ row }">
+          <div>{{ work_order_type.find(item => item.value == row.orderType)?.label || row.orderType }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderSource" label="工单来源">
+        <template #default="{ row }">
+          <div>{{ work_order_source.find(item => item.value == row.orderSource)?.label || row.orderSource }}</div>
+        </template>
+      </el-table-column>
       <el-table-column prop="info" label="信息" />
-      <el-table-column prop="state" label="工单状态" />
+      <el-table-column prop="status" label="工单状态">
+        <template #default="{ row }">
+          <div>{{ work_order_status.find(item => item.value == row.status)?.label || row.status }}</div>
+        </template>
+      </el-table-column>
       <el-table-column label="操作">
         <template #default="{ row }">
           <div style="display: flex; justify-content: space-evenly">
             <!-- <el-button link type="primary" icon="Edit" @click="addArea(row)">编辑</el-button>
               <el-button link type="danger" icon="Delete" @click="deleteArea(row)">删除</el-button> -->
-            <el-button link type="primary">受理</el-button>
+            <el-button link type="primary" @click="handleDetail(row)">
+              {{ titleList.find(item => item.value == props.status)?.title || '' }}
+            </el-button>
           </div>
         </template>
       </el-table-column>
@@ -51,150 +67,132 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <el-dialog
+      v-model="dialogConfig.visible"
+      :title="dialogConfig.title"
+      width="1400px"
+      :append-to-body="true"
+      :destroy-on-close="true"
+    >
+      <orderDia></orderDia>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="checkOrder">
-import { onMounted } from 'vue';
+import orderDia from '../../components/orderDia';
+import { onMounted, watch } from 'vue';
 import { workOrderPage } from '@/api/order';
 
 const { proxy } = getCurrentInstance();
 
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+});
+
+const dialogConfig = ref({
+  visible: false,
+  // visible: true,
+  title: '工单详情',
+});
+
 const total = ref(0);
+const loading = ref(false);
 const queryParams = ref({
+  registerStartTime: '',
+  registerEndTime: '',
+  orderType: '',
+  status: '',
+  orderSource: '',
   pageNum: 1,
   pageSize: 10,
 });
-const dateRange = ref([
-  proxy.moment().subtract(3, 'days').format('YYYY-MM-DD 00:00:00'),
-  proxy.moment().format('YYYY-MM-DD 23:59:59'),
-]);
-const value = ref('');
+const dateRange = ref([proxy.moment().subtract(7, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const tableData = ref([]);
 
-const options = [
+const titleList = ref([
   {
-    value: 'Option1',
-    label: '燃气工单',
+    code: '001',
+    title: '登记工单',
+    value: 'launch',
   },
   {
-    value: 'Option2',
-    label: '排水工单',
+    code: '002',
+    title: '受理',
+    value: 'accept',
   },
   {
-    value: 'Option3',
-    label: '桥梁工单',
+    code: '003',
+    title: '提交',
+    value: 'submit',
   },
   {
-    value: 'Option4',
-    label: '隧道工单',
-  },
-];
-
-const tableData = ref([
-  {
-    code: 'GD2024102900001',
-    date: '2024-05-03 12:00:00',
-    type: '燃气工单',
-    ly: 'APP',
-    info: '',
-    state: '待受理',
+    code: '004',
+    title: '分派',
+    value: 'assign',
   },
   {
-    code: 'GD2024102900002',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '电话',
-    info: '',
-    state: '待受理',
+    code: '005',
+    title: '响应',
+    value: 'response',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '006',
+    title: '上报',
+    value: 'report',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '007',
+    title: '核实',
+    value: 'check',
   },
   {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
+    code: '008',
+    title: '结案',
+    value: 'complete',
   },
 ]);
 
-const getList = () => {
-  total.value = tableData.value.length;
+const handleDetail = () => {
+  dialogConfig.value.visible = true;
 };
 
+const getList = () => {
+  queryParams.value.registerStartTime = dateRange.value[0] + ' 00:00:00';
+  queryParams.value.registerEndTime = dateRange.value[1] + ' 23:59:59';
+  loading.value = true;
+  workOrderPage(queryParams.value).then(res => {
+    // console.log('🚀 ~ workOrderList ~ res:', res);
+    tableData.value = res.data;
+    total.value = res.total;
+    loading.value = false;
+  });
+};
+
+watch(
+  () => props.status,
+  val => {
+    queryParams.value.status = val;
+    getList();
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+);
+
 onMounted(() => {
-  getList();
+  // getList();
 });
 </script>
 
diff --git a/src/views/order/workOrderProcessing/index.vue b/src/views/order/workOrderProcessing/index.vue
index d3ea500..5bd7300 100644
--- a/src/views/order/workOrderProcessing/index.vue
+++ b/src/views/order/workOrderProcessing/index.vue
@@ -6,8 +6,8 @@
         class="orderTitle"
         v-for="(item, index) in orderTitleList"
         :key="item.code"
-        :class="{ active: item.code == showOrderCode }"
-        @click="showOrderCode = item.code"
+        :class="{ active: item.value == showOrderCode }"
+        @click="changeOrder(item)"
       >
         <img :src="item.icon" alt="" class="titleIcon" />
         <div class="titleCon">
@@ -17,8 +17,8 @@
       </div>
     </div>
     <div class="orderBottom">
-      <registerOrder v-if="showOrderCode == '001'"></registerOrder>
-      <checkOrder v-if="showOrderCode !== '001'"></checkOrder>
+      <registerOrder v-if="showOrderCode == 'launch'"></registerOrder>
+      <checkOrder v-if="showOrderCode !== 'launch'" :status="showOrderCode"></checkOrder>
     </div>
   </div>
 </template>
@@ -37,57 +37,70 @@
 import ja_icon from '@/assets/images/order/ja_icon.png';
 // registerOrder
 
-const showOrderCode = ref('002');
+const showOrderCode = ref('accept');
 const orderTitleList = ref([
   {
     code: '001',
     title: '登记工单',
     icon: gddj_icon,
+    value: 'launch',
     num: '1',
   },
   {
     code: '002',
     title: '工单受理',
     icon: sl_icon,
+    value: 'accept',
     num: '0',
   },
   {
     code: '003',
     title: '工单提交',
     icon: tj_icon,
+    value: 'submit',
     num: '0',
   },
   {
     code: '004',
     title: '工单分派',
     icon: fp_icon,
+    value: 'assign',
     num: '0',
   },
   {
     code: '005',
     title: '工单响应',
     icon: xy_icon,
+    value: 'response',
     num: '0',
   },
   {
     code: '006',
     title: '工单上报',
     icon: sb_icon,
+    value: 'report',
     num: '0',
   },
   {
     code: '007',
     title: '工单核实',
     icon: hs_icon,
+    value: 'check',
     num: '0',
   },
   {
     code: '008',
     title: '工单结案',
     icon: ja_icon,
+    value: 'complete',
     num: '0',
   },
 ]);
+
+const changeOrder = item => {
+  showOrderCode.value = item.value;
+  //   console.log('changeOrder');
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/order/workOrderQuery/index.vue b/src/views/order/workOrderQuery/index.vue
index 0d5c8d4..4478a9b 100644
--- a/src/views/order/workOrderQuery/index.vue
+++ b/src/views/order/workOrderQuery/index.vue
@@ -38,7 +38,7 @@
     </el-row>
     <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
       <el-table-column type="index" label="序号" width="50" />
-      <el-table-column prop="orderNum" label="工单编号" />
+      <el-table-column prop="orderNumber" label="工单编号" />
       <el-table-column prop="registerTime" label="登记时间" />
       <el-table-column prop="orderType" label="工单类型">
         <template #default="{ row }">
@@ -135,7 +135,7 @@
   queryParams.value.registerStartTime = dateRange.value[0] + ' 00:00:00';
   queryParams.value.registerEndTime = dateRange.value[1] + ' 23:59:59';
   workOrderPage(queryParams.value).then(res => {
-    console.log('🚀 ~ workOrderList ~ res:', res);
+    // console.log('🚀 ~ workOrderList ~ res:', res);
     tableData.value = res.data;
     total.value = res.total;
   });