diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 0000000..db38ffd
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// /business/workOrder/list
+export function workOrderPage(query) {
+  return request({
+    url: '/business/workOrder/page',
+    method: 'get',
+    params: query,
+  });
+}

diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 0000000..db38ffd
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// /business/workOrder/list
+export function workOrderPage(query) {
+  return request({
+    url: '/business/workOrder/page',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
new file mode 100644
index 0000000..cf42720
--- /dev/null
+++ b/src/views/order/components/orderDia.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="orderDia">
+    <div class="orderBox">
+      <div class="boxTitle">基本情况</div>
+      <div class="boxContent">
+        <el-from ref="ruleFormRef" :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-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-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-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <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-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="联系方式" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="警情时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <el-col :span="16">
+              <el-form-item label="发送位置" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="登记时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <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-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <el-col :span="7">
+              <el-form-item label="要求完成时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="处理单位" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.handleDeptId" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="处理人" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.handlePersonId" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-from>
+      </div>
+    </div>
+    <div class="orderBox">
+      <div class="boxTitle">附件</div>
+      <div class="boxContent">
+        <div>无</div>
+      </div>
+    </div>
+    <div class="orderBox">
+      <div class="boxTitle">处理流程</div>
+      <div class="boxContent">
+        <div>无</div>
+      </div>
+    </div>
+    <div class="boxBtn">
+      <el-button type="primary">提交</el-button>
+      <el-button>返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup name="orderDia">
+const { proxy } = getCurrentInstance();
+// 工单类型： work_order_type
+// 工单状态： work_order_status
+// 工单来源： work_order_source
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+
+const orderFormRef = ref();
+const value = ref('');
+
+const orderData = reactive({
+  rules: {
+    name: [
+      { required: true, message: 'Please input Activity name', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    region: [
+      {
+        required: true,
+        message: 'Please select Activity zone',
+        trigger: 'change',
+      },
+    ],
+    count: [
+      {
+        required: true,
+        message: 'Please select Activity count',
+        trigger: 'change',
+      },
+    ],
+  },
+  orderForm: {
+    name: '',
+    code: '',
+    date: '',
+    type: '',
+    ly: '',
+    sbr: '',
+    phone: '',
+    jqTime: '',
+    djTime: '',
+    location: '',
+    doneTime: '',
+    info: '',
+    state: '',
+  },
+});
+
+const { rules, orderForm } = toRefs(orderData);
+</script>
+
+<style lang="scss" scoped>
+.orderDia {
+  width: 100%;
+  height: 700px;
+//   border: 1px solid red;
+  padding-bottom: 20px;
+  overflow-y: auto;
+
+  .orderBox {
+    width: 100%;
+    border-radius: 2px;
+    border: 1px solid #eaeaea;
+    margin-bottom: 20px;
+    .boxTitle {
+      height: 40px;
+      background: #f6f6f8;
+    //   border-radius: 2px;
+    //   border: 1px solid #eaeaea;
+      font-weight: bold;
+      font-size: 14px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+    }
+    .boxContent {
+      //   height: calc(100% - 120px);
+      margin: 10px 0;
+      //   border: 1px solid red;
+      padding: 0 20px;
+    }
+  }
+  .boxBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+  }
+}
+</style>

diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 0000000..db38ffd
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// /business/workOrder/list
+export function workOrderPage(query) {
+  return request({
+    url: '/business/workOrder/page',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
new file mode 100644
index 0000000..cf42720
--- /dev/null
+++ b/src/views/order/components/orderDia.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="orderDia">
+    <div class="orderBox">
+      <div class="boxTitle">基本情况</div>
+      <div class="boxContent">
+        <el-from ref="ruleFormRef" :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-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-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-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <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-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="联系方式" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="警情时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <el-col :span="16">
+              <el-form-item label="发送位置" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="登记时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <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-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <el-col :span="7">
+              <el-form-item label="要求完成时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="处理单位" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.handleDeptId" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="处理人" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.handlePersonId" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-from>
+      </div>
+    </div>
+    <div class="orderBox">
+      <div class="boxTitle">附件</div>
+      <div class="boxContent">
+        <div>无</div>
+      </div>
+    </div>
+    <div class="orderBox">
+      <div class="boxTitle">处理流程</div>
+      <div class="boxContent">
+        <div>无</div>
+      </div>
+    </div>
+    <div class="boxBtn">
+      <el-button type="primary">提交</el-button>
+      <el-button>返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup name="orderDia">
+const { proxy } = getCurrentInstance();
+// 工单类型： work_order_type
+// 工单状态： work_order_status
+// 工单来源： work_order_source
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+
+const orderFormRef = ref();
+const value = ref('');
+
+const orderData = reactive({
+  rules: {
+    name: [
+      { required: true, message: 'Please input Activity name', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    region: [
+      {
+        required: true,
+        message: 'Please select Activity zone',
+        trigger: 'change',
+      },
+    ],
+    count: [
+      {
+        required: true,
+        message: 'Please select Activity count',
+        trigger: 'change',
+      },
+    ],
+  },
+  orderForm: {
+    name: '',
+    code: '',
+    date: '',
+    type: '',
+    ly: '',
+    sbr: '',
+    phone: '',
+    jqTime: '',
+    djTime: '',
+    location: '',
+    doneTime: '',
+    info: '',
+    state: '',
+  },
+});
+
+const { rules, orderForm } = toRefs(orderData);
+</script>
+
+<style lang="scss" scoped>
+.orderDia {
+  width: 100%;
+  height: 700px;
+//   border: 1px solid red;
+  padding-bottom: 20px;
+  overflow-y: auto;
+
+  .orderBox {
+    width: 100%;
+    border-radius: 2px;
+    border: 1px solid #eaeaea;
+    margin-bottom: 20px;
+    .boxTitle {
+      height: 40px;
+      background: #f6f6f8;
+    //   border-radius: 2px;
+    //   border: 1px solid #eaeaea;
+      font-weight: bold;
+      font-size: 14px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+    }
+    .boxContent {
+      //   height: calc(100% - 120px);
+      margin: 10px 0;
+      //   border: 1px solid red;
+      padding: 0 20px;
+    }
+  }
+  .boxBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+  }
+}
+</style>
diff --git a/src/views/order/workOrderProcessing/components/registerOrder.vue b/src/views/order/workOrderProcessing/components/registerOrder.vue
index 85d5d7e..20b6a38 100644
--- a/src/views/order/workOrderProcessing/components/registerOrder.vue
+++ b/src/views/order/workOrderProcessing/components/registerOrder.vue
@@ -5,7 +5,7 @@
     <div class="orderBox">
       <div class="boxTitle">基本情况</div>
       <div class="boxContent">
-        <el-from ref="ruleFormRef" :rules="rules" label-width="auto" :model="orderForm">
+        <el-from ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm">
           <el-row justify="space-between">
             <el-col :span="7">
               <el-form-item label="工单编码" prop="">

diff --git a/src/api/order.js b/src/api/order.js
new file mode 100644
index 0000000..db38ffd
--- /dev/null
+++ b/src/api/order.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// /business/workOrder/list
+export function workOrderPage(query) {
+  return request({
+    url: '/business/workOrder/page',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/views/order/components/orderDia.vue b/src/views/order/components/orderDia.vue
new file mode 100644
index 0000000..cf42720
--- /dev/null
+++ b/src/views/order/components/orderDia.vue
@@ -0,0 +1,232 @@
+<template>
+  <div class="orderDia">
+    <div class="orderBox">
+      <div class="boxTitle">基本情况</div>
+      <div class="boxContent">
+        <el-from ref="ruleFormRef" :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-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-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-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <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-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="联系方式" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.phone" placeholder="请输入联系方式" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="警情时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <el-col :span="16">
+              <el-form-item label="发送位置" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.reportLocation" style="width: 97%" placeholder="请输入发送位置" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="登记时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <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-form-item>
+            </el-col>
+          </el-row>
+          <el-row justify="space-between">
+            <el-col :span="7">
+              <el-form-item label="要求完成时间" prop="">
+                <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%"
+                  disabled
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="处理单位" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.handleDeptId" disabled />
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item label="处理人" prop="">
+                <!-- phone -->
+                <el-input v-model="orderForm.handlePersonId" disabled />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-from>
+      </div>
+    </div>
+    <div class="orderBox">
+      <div class="boxTitle">附件</div>
+      <div class="boxContent">
+        <div>无</div>
+      </div>
+    </div>
+    <div class="orderBox">
+      <div class="boxTitle">处理流程</div>
+      <div class="boxContent">
+        <div>无</div>
+      </div>
+    </div>
+    <div class="boxBtn">
+      <el-button type="primary">提交</el-button>
+      <el-button>返回</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup name="orderDia">
+const { proxy } = getCurrentInstance();
+// 工单类型： work_order_type
+// 工单状态： work_order_status
+// 工单来源： work_order_source
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+
+const orderFormRef = ref();
+const value = ref('');
+
+const orderData = reactive({
+  rules: {
+    name: [
+      { required: true, message: 'Please input Activity name', trigger: 'blur' },
+      { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    region: [
+      {
+        required: true,
+        message: 'Please select Activity zone',
+        trigger: 'change',
+      },
+    ],
+    count: [
+      {
+        required: true,
+        message: 'Please select Activity count',
+        trigger: 'change',
+      },
+    ],
+  },
+  orderForm: {
+    name: '',
+    code: '',
+    date: '',
+    type: '',
+    ly: '',
+    sbr: '',
+    phone: '',
+    jqTime: '',
+    djTime: '',
+    location: '',
+    doneTime: '',
+    info: '',
+    state: '',
+  },
+});
+
+const { rules, orderForm } = toRefs(orderData);
+</script>
+
+<style lang="scss" scoped>
+.orderDia {
+  width: 100%;
+  height: 700px;
+//   border: 1px solid red;
+  padding-bottom: 20px;
+  overflow-y: auto;
+
+  .orderBox {
+    width: 100%;
+    border-radius: 2px;
+    border: 1px solid #eaeaea;
+    margin-bottom: 20px;
+    .boxTitle {
+      height: 40px;
+      background: #f6f6f8;
+    //   border-radius: 2px;
+    //   border: 1px solid #eaeaea;
+      font-weight: bold;
+      font-size: 14px;
+      color: #333333;
+      display: flex;
+      align-items: center;
+      padding-left: 20px;
+    }
+    .boxContent {
+      //   height: calc(100% - 120px);
+      margin: 10px 0;
+      //   border: 1px solid red;
+      padding: 0 20px;
+    }
+  }
+  .boxBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 60px;
+  }
+}
+</style>
diff --git a/src/views/order/workOrderProcessing/components/registerOrder.vue b/src/views/order/workOrderProcessing/components/registerOrder.vue
index 85d5d7e..20b6a38 100644
--- a/src/views/order/workOrderProcessing/components/registerOrder.vue
+++ b/src/views/order/workOrderProcessing/components/registerOrder.vue
@@ -5,7 +5,7 @@
     <div class="orderBox">
       <div class="boxTitle">基本情况</div>
       <div class="boxContent">
-        <el-from ref="ruleFormRef" :rules="rules" label-width="auto" :model="orderForm">
+        <el-from ref="orderFormRef" :rules="rules" label-width="auto" :model="orderForm">
           <el-row justify="space-between">
             <el-col :span="7">
               <el-form-item label="工单编码" prop="">
diff --git a/src/views/order/workOrderQuery/index.vue b/src/views/order/workOrderQuery/index.vue
index 30483ae..86ccfa8 100644
--- a/src/views/order/workOrderQuery/index.vue
+++ b/src/views/order/workOrderQuery/index.vue
@@ -1,168 +1,154 @@
 <template>
   <div class="workOrderQuery publicContainer">
     <el-row class="chooseBox">
-      <el-col :span="7" class="flex flex-align-center chooseTime">
-        <span class="title">监测时间：</span>
+      <el-col :span="6" class="flex flex-align-center chooseTime">
+        <span class="title">监测时间</span>
         <el-date-picker
           v-model="dateRange"
-          type="datetimerange"
-          range-separator="To"
+          type="daterange"
+          range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
         />
       </el-col>
       <el-col :span="4" class="flex flex-align-center chooseType">
-        <span class="title">工单类型：</span>
-        <el-select v-model="value" placeholder="请选择" style="width: 150px">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <span class="title">工单类型</span>
+        <el-select v-model="queryParams.orderType" placeholder="请选择" clearable style="width: 150px">
+          <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="4" class="flex flex-align-center">
-        <span class="title">工单状态：</span>
-        <el-select v-model="value1" placeholder="请选择" style="width: 150px">
-          <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
+        <span class="title">工单状态</span>
+        <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 150px">
+          <el-option v-for="item in work_order_status" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-col>
       <el-col :span="4" class="flex flex-align-center">
-        <span class="title">工单来源：</span>
-        <el-select v-model="value2" placeholder="请选择" style="width: 150px">
-          <el-option v-for="item in lyList" :key="item.value" :label="item.label" :value="item.value" />
+        <span class="title">工单来源</span>
+        <el-select v-model="queryParams.orderSource" placeholder="请选择" clearable style="width: 150px">
+          <el-option v-for="item in work_order_source" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-col>
       <el-col :span="4">
-        <el-button type="primary">查询</el-button>
+        <el-button type="primary" @click="getList">查询</el-button>
         <el-button type="primary">导出</el-button>
       </el-col>
     </el-row>
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="tableData" style="width: 100%" v-setHeight="{ bottom: 80 }">
       <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="info" label="信息" />
-      <el-table-column prop="state" label="工单状态" />
-      <el-table-column prop="bm" label="处理部门" />
+      <el-table-column prop="orderNum" 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="message" label="信息" />
+      <!-- <el-table-column prop="status" 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 prop="submitDeptName" label="处理部门" />
       <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)">详情</el-button>
           </div>
         </template>
       </el-table-column>
     </el-table>
+    <pagination
+      class="pagingPosition"
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 详情弹窗 -->
+    <!-- 
+    :draggable="true"
+    @closed="handleClosed"
+     -->
+    <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="workOrderQuery">
-const dateRange = ref([]);
-const value = ref('Option1');
-const value1 = ref('');
-const value2 = ref('');
+import orderDia from '../components/orderDia.vue';
+import { workOrderPage } from '@/api/order';
 
-const options = [
-  {
-    value: 'Option1',
-    label: '燃气工单',
-  },
-  {
-    value: 'Option2',
-    label: '排水工单',
-  },
-  {
-    value: 'Option3',
-    label: '桥梁工单',
-  },
-  {
-    value: 'Option4',
-    label: '隧道工单',
-  },
-];
-const typeList = ref([
-  {
-    label: '待受理',
-    value: '0',
-  },
-  {
-    label: '待提交',
-    value: '1',
-  },
-  {
-    label: '待分派',
-    value: '2',
-  },
-  {
-    label: '待响应',
-    value: '3',
-  },
-  {
-    label: '待上报',
-    value: '4',
-  },
-  {
-    label: '待核实',
-    value: '5',
-  },
-  {
-    label: '待接单',
-    value: '6',
-  },
-  {
-    label: '已归档',
-    value: '7',
-  },
-]);
-const lyList = ref([
-  {
-    label: 'APP',
-    value: '1',
-  },
-  {
-    label: '电话',
-    value: '2',
-  },
-  {
-    label: '指挥调度',
-    value: '3',
-  },
-]);
+const { proxy } = getCurrentInstance();
+// 工单类型： work_order_type
+// 工单状态： work_order_status
+// 工单来源： work_order_source
+const { work_order_type, work_order_status, work_order_source } = proxy.useDict(
+  'work_order_type',
+  'work_order_status',
+  'work_order_source'
+);
+const dateRange = ref([proxy.moment().subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
+const dialogConfig = ref({
+  visible: false,
+  title: '工单详情',
+});
+const total = ref(0);
+const queryParams = ref({
+  registerStartTime: '',
+  registerEndTime: '',
+  orderType: '',
+  status: '',
+  orderSource: '',
+  pageNum: 1,
+  pageSize: 10,
+});
 
-const tableData = [
-  {
-    code: 'GD2024102900001',
-    date: '2024-05-03 12:00:00',
-    type: '燃气工单',
-    ly: 'APP',
-    info: '',
-    state: '待受理',
-    bm: '燃气总公司',
-    
-  },
-  {
-    code: 'GD2024102900002',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '电话',
-    info: '',
-    state: '待受理',
-    bm: '内涝办',
-  },
-  {
-    code: 'GD2024102900003',
-    date: '2024-05-03 12:00:00',
-    type: '排水工单',
-    ly: '指挥调度',
-    info: '',
-    state: '待受理',
-    bm: '内涝办',
-  },
-];
+const tableData = ref([]);
+
+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';
+  workOrderPage(queryParams.value).then(res => {
+    console.log('🚀 ~ workOrderList ~ res:', res);
+    tableData.value = res.data;
+    total.value = res.total;
+  });
+};
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>
 .workOrderQuery {
+  position: relative;
+  width: 100%;
+  height: 100%;
   .chooseBox {
     padding: 0 0 20px 0;
   }
@@ -170,7 +156,17 @@
     margin-left: 20px;
   }
   .title {
-    font-size: 16px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #333333;
+    margin-right: 10px;
   }
 }
+
+.pagingPosition {
+  position: absolute;
+  right: 20px;
+  bottom: 10px;
+  // margin-bottom: 10px;
+}
 </style>