From 9df856613bc84cf3b2a7747a992a193ba6611748 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 6 Dec 2024 21:02:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/lessor/settlement/index.vue    |    4 +-
 .../components/order-details.vue              |  309 ++-
 .../orderManagement/components/order-home.vue |   44 +-
 src/views/user/orderManagement/index.vue      |   16 +-
 .../components/order-details.vue              |  653 +++++
 .../components/order-home.vue                 | 2178 +++++++++++++++++
 src/views/user/orderManagementCz/index.vue    | 2136 +---------------
 src/views/user/orderManagementCz/index_1.vue  | 2118 ++++++++++++++++
 8 files changed, 5171 insertions(+), 2287 deletions(-)
 create mode 100644 src/views/user/orderManagementCz/components/order-details.vue
 create mode 100644 src/views/user/orderManagementCz/components/order-home.vue
 create mode 100644 src/views/user/orderManagementCz/index_1.vue

diff --git a/src/views/user/lessor/settlement/index.vue b/src/views/user/lessor/settlement/index.vue
index 6c1017a..88f1720 100644
--- a/src/views/user/lessor/settlement/index.vue
+++ b/src/views/user/lessor/settlement/index.vue
@@ -130,7 +130,7 @@ div
                     type="primary"
                     @click="onRepublish(row.orderStatus, row.orderId, row.isChangePrice)"
                 >
-                    {{ row.orderStatus == 6 || row.isChangePrice == 1 ? '费用详情' : '费用结算' }}
+                    {{ row.orderStatus == 7 || row.isChangePrice == 1 ? '费用详情' : '费用结算' }}
                 </el-button>
             </template>
         </el-table-column>
@@ -1179,7 +1179,7 @@ const onReset = () => {
 
 // 重新发布
 const onRepublish = async (type: any, orderId: any, isChangePrice: any) => {
-    type == 6 || isChangePrice == 1
+    type == 7 || isChangePrice == 1
         ? (dialogTitle.value = '费用详情')
         : (dialogTitle.value = '费用结算')
     const { data: res }: any = await getOverhaulApi(orderId)
diff --git a/src/views/user/orderManagement/components/order-details.vue b/src/views/user/orderManagement/components/order-details.vue
index 5a39eb3..359591a 100644
--- a/src/views/user/orderManagement/components/order-details.vue
+++ b/src/views/user/orderManagement/components/order-details.vue
@@ -117,8 +117,9 @@ const getList = async () => {
 
     const res: any = await getOrderListInfoApi({ orderId: props.orderId })
 
-    // orderDetails.value = res.data
-    console.log(res, '订单详情---')
+    orderDetails.value = res.data
+    // setStepType(res.data.orderStatus)
+    // console.log(res, '订单详情---')
     // cardList.value = res.data
     // operationDetails.value[1].preOutboundUser = res.data.detailsList[0].preOutboundUser
     // operationDetails.value[1].preOutboundTime = res.data.detailsList[0].preOutboundTime
@@ -155,6 +156,66 @@ const onOrderManage = () => {
 console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
 
 const time = ref([])
+const currentActive = ref(0)
+const stepList = ref([
+    {
+        title: '待接单',
+        description: '',
+    },
+    {
+        title: '已接单',
+        description: '',
+    },
+    {
+        title: '已出库',
+        description: '',
+    },
+    {
+        title: '已收货',
+        description: '',
+    },
+    {
+        title: '租赁中',
+        description: '',
+    },
+    {
+        title: '已退租',
+        description: '',
+    },
+    {
+        title: '已结算',
+        description: '',
+    },
+    {
+        title: '已完成',
+        description: '',
+    },
+])
+
+// const setStepType = (status: any) => {
+
+// }
+if (props.orderStatus == 1) {
+    currentActive.value = 0
+}
+if (props.orderStatus == 2) {
+    currentActive.value = 1
+}
+if (props.orderStatus == 3) {
+    currentActive.value = 3
+}
+if (props.orderStatus == 4) {
+    currentActive.value = 5
+}
+if (props.orderStatus == 5) {
+    currentActive.value = 6
+}
+if (props.orderStatus == 6) {
+    currentActive.value = 7
+}
+if (props.orderStatus == 7) {
+    currentActive.value = 8
+}
 </script>
 
 <template>
@@ -170,17 +231,23 @@ const time = ref([])
             <TitleTip :titleText="`订单流程`" />
 
             <div style="padding: 20px 40px">
-                <el-steps :active="1" finish-status="success" process-status="wait" align-center>
-                    <el-step title="Done" />
-                    <el-step title="Processing" />
-                    <el-step title="Step 3" />
-                    <el-step title="Step 3" />
-                    <el-step title="Step 3" />
+                <el-steps
+                    :active="currentActive"
+                    finish-status="success"
+                    process-status="process"
+                    align-center
+                >
+                    <el-step
+                        v-for="item in stepList"
+                        :key="item.title"
+                        :title="item.title"
+                        :description="item.description"
+                    />
                 </el-steps>
             </div>
             <TitleTip :titleText="`租赁信息`" />
 
-            <div class="section">
+            <!-- <div class="section">
                 <el-header>
                     <el-row type="flex" justify="space-between" align="middle">
                         <el-col :span="3">
@@ -207,147 +274,69 @@ const time = ref([])
                     <el-step :title="getStepTitle(4)"></el-step>
                     <el-step :title="getStepTitle(5)"></el-step>
                 </el-steps>
-            </div>
+            </div> -->
+
+            <el-row style="padding: 10px 40px">
+                <el-col :span="8">
+                    <span> 订单编号： </span>
+                    <span>
+                        {{ orderDetails.code }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 下单时间： </span>
+                    <span>
+                        {{ orderDetails.orderTime }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 出租单位： </span>
+                    <span>
+                        {{ orderDetails.czcompanyName }}
+                    </span>
+                </el-col>
+            </el-row>
+            <el-row style="padding: 10px 40px">
+                <el-col :span="8">
+                    <span> 出租人： </span>
+                    <span>
+                        {{ orderDetails.person }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 出租人电话： </span>
+                    <span>
+                        {{ orderDetails.personPhone }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 承租单位： </span>
+                    <span>
+                        {{ orderDetails.companyName }}
+                    </span>
+                </el-col>
+            </el-row>
+            <el-row style="padding: 10px 40px">
+                <el-col :span="8">
+                    <span> 承租人： </span>
+                    <span>
+                        {{ orderDetails.nickName }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 承租人电话： </span>
+                    <span>
+                        {{ orderDetails.phoneNumber }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 租赁协议： </span>
+                    <span> ** </span>
+                </el-col>
+            </el-row>
 
             <div class="section">
-                <el-header style="height: 30px">租赁信息 </el-header>
-                <div style="height: 80px">
-                    <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                margin-left: 40px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>订单编号：{{ orderDetails.code }}</span>
-                        </div>
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>下单时间：{{ orderDetails.orderTime }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span></span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                margin-left: 40px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>出租单位：{{ orderDetails.czcompanyName }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>出租人：{{ orderDetails.person }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>出租人电话：{{ orderDetails.personPhone }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                margin-left: 40px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>承租单位：{{ orderDetails.companyName }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>承租人：{{ orderDetails.nickName }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>承租人电话：{{ orderDetails.phoneNumber }}</span>
-                        </div>
-
-                        <div
-                            class="item"
-                            style="
-                                width: 30%;
-                                flex-shrink: 0;
-                                margin-bottom: 5px;
-                                font-size: 14px;
-                                margin-left: 40px;
-                                opacity: 0.7;
-                            "
-                        >
-                            <span>租赁协议：</span>
-                        </div>
-                    </div>
-                </div>
-
+                <!-- <el-header style="height: 30px">租赁信息 </el-header> -->
                 <el-row
                     class="cart-listAll"
                     :style="{ background: cardList.orderStatus == '6' ? '#EBEEF5' : 'white' }"
@@ -361,7 +350,7 @@ const time = ref([])
                     <el-col :span="7">
                         <el-row
                             class="cart-list"
-                            v-for="(goods, j) in cardList.detailsList"
+                            v-for="(goods, j) in orderDetails.detailsList"
                             :key="j"
                         >
                             <el-col class="goods-info">
@@ -399,21 +388,23 @@ const time = ref([])
                         <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
                             总费用
                         </div>
-                        <div class="red-font">{{ cardList.cost }}</div>
+                        <div class="red-font">{{ orderDetails.cost }}</div>
                     </el-col>
                     <el-col :span="7">
                         <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
                             租期
                         </div>
                         <div style="color: black; font-weight: bold">
-                            {{ cardList.startTime }}
+                            {{ orderDetails.startTime }}
                         </div>
                         <div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
-                        <div style="color: black; font-weight: bold">{{ cardList.endTime }}</div>
+                        <div style="color: black; font-weight: bold">
+                            {{ orderDetails.endTime }}
+                        </div>
                     </el-col>
                     <el-col :span="4">
                         <div
-                            v-if="cardList.orderStatus == '2'"
+                            v-if="orderDetails.orderStatus == '2'"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
@@ -424,7 +415,7 @@ const time = ref([])
                             {{ '待出库' }}
                         </div>
                         <div
-                            v-if="cardList.orderStatus == '3'"
+                            v-if="orderDetails.orderStatus == '3'"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
@@ -435,7 +426,7 @@ const time = ref([])
                             {{ '待收货' }}
                         </div>
                         <div
-                            v-if="cardList.orderStatus == '4' && isExpired(cardList)"
+                            v-if="orderDetails.orderStatus == '4' && isExpired(cardList)"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
@@ -447,7 +438,7 @@ const time = ref([])
                             <span style="color: red">(已过期)</span>
                         </div>
                         <div
-                            v-if="cardList.orderStatus == '4' && !isExpired(cardList)"
+                            v-if="orderDetails.orderStatus == '4' && !isExpired(cardList)"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
@@ -458,7 +449,7 @@ const time = ref([])
                             {{ '租赁中' }}
                         </div>
                         <div
-                            v-if="cardList.orderStatus == '5'"
+                            v-if="orderDetails.orderStatus == '5'"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
@@ -469,7 +460,7 @@ const time = ref([])
                             {{ '已退租' }}
                         </div>
                         <div
-                            v-if="cardList.orderStatus == '6'"
+                            v-if="orderDetails.orderStatus == '6'"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
@@ -480,7 +471,7 @@ const time = ref([])
                             {{ '已完成' }}
                         </div>
                         <div
-                            v-if="cardList.orderStatus == '7'"
+                            v-if="orderDetails.orderStatus == '7'"
                             style="
                                 font-size: 14px;
                                 font-weight: bold;
diff --git a/src/views/user/orderManagement/components/order-home.vue b/src/views/user/orderManagement/components/order-home.vue
index ba8fe07..75480ad 100644
--- a/src/views/user/orderManagement/components/order-home.vue
+++ b/src/views/user/orderManagement/components/order-home.vue
@@ -46,12 +46,14 @@ const total: any = ref(0)
 const cardList = ref<any>([])
 const status = 0
 const statusList = [
+    { id: '1', name: '待接单' },
     { id: '2', name: '待出库' },
     { id: '3', name: '待收货' },
     { id: '4', name: '租赁中' },
     { id: '5', name: '已退租' },
     { id: '6', name: '已完成' },
-    { id: '7', name: '已驳回' },
+    { id: '7', name: '已完成' },
+    { id: '8', name: '已驳回' },
 ]
 
 // const dateTimeConvert=(param:string)=>{
@@ -340,8 +342,10 @@ const getOverhaulDetails = (orderId: any) => {
         dialogFormVisibleSettleList.value = true
     })
 }
+const currentOrderId = ref<any>()
 const onCostConfirm = (orderId: any) => {
     settleListTitle.value = '费用确认'
+    currentOrderId.value = orderId
     getOverhaulDetails(orderId)
 }
 const onViewFileImg = (row: any, index: number) => {
@@ -358,7 +362,7 @@ const costSubmit = () => {
     })
         .then(async () => {
             const res: any = await confirmPriceApi({
-                orderId: overhaulDetails.value.orderId,
+                orderId: currentOrderId.value,
             })
             if (res.code == 200) {
                 ElMessage({
@@ -573,6 +577,17 @@ const costSubmit = () => {
                         </div>
                     </el-col>
                     <el-col :span="3" class="order-items-info">
+                        <div
+                            v-if="item.orderStatus == '1'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待接单' }}
+                        </div>
                         <div
                             v-if="item.orderStatus == '2'"
                             style="
@@ -627,7 +642,7 @@ const costSubmit = () => {
                                 color: #5b33cc;
                             "
                         >
-                            {{ '已退租' }}
+                            {{ '已退租待结算' }}
                         </div>
                         <div
                             v-if="item.orderStatus == '6'"
@@ -638,7 +653,7 @@ const costSubmit = () => {
                                 color: #c00017;
                             "
                         >
-                            {{ '已完成' }}
+                            {{ '待结算确认' }}
                         </div>
                         <div
                             v-if="item.orderStatus == '7'"
@@ -648,6 +663,17 @@ const costSubmit = () => {
                                 margin-bottom: 10px;
                                 color: #797979;
                             "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '8'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
                         >
                             {{ '已驳回' }}
                         </div>
@@ -683,23 +709,23 @@ const costSubmit = () => {
                             发起退租
                         </el-button>
                         <el-button
-                            v-if="item.orderStatus == '6'"
+                            v-if="item.orderStatus == '6' || item.orderStatus == '7'"
                             @click="handleViewList(item.orderId)"
                             type="primary"
                             size="small"
                         >
                             费用清单
                         </el-button>
-                        <el-button
-                            v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
+                        <!-- <el-button
+                            v-if="item.orderStatus == 6 && item.isLeaseContent == 1"
                             @click="onViewOverhaulDetails()"
                             type="primary"
                             size="small"
                         >
                             检修详情
-                        </el-button>
+                        </el-button> -->
                         <el-button
-                            v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
+                            v-if="item.orderStatus == 6 && item.isLeaseContent == 1"
                             @click="onCostConfirm(item.orderId)"
                             type="primary"
                             size="small"
diff --git a/src/views/user/orderManagement/index.vue b/src/views/user/orderManagement/index.vue
index 53e29f1..8365cdc 100644
--- a/src/views/user/orderManagement/index.vue
+++ b/src/views/user/orderManagement/index.vue
@@ -2,15 +2,13 @@
     <div class="order-container">
         <!-- <OrderHome /> -->
         <!-- <OrderDetails /> -->
-        <KeepAlive>
-            <component
-                :orderId="orderId"
-                :is="isComponents"
-                :orderStatus="orderStatus"
-                @onBackOrderHome="onBackOrderHome"
-                @onOpenOrderDetails="onOpenOrderDetails"
-            />
-        </KeepAlive>
+        <component
+            :orderId="orderId"
+            :is="isComponents"
+            :orderStatus="orderStatus"
+            @onBackOrderHome="onBackOrderHome"
+            @onOpenOrderDetails="onOpenOrderDetails"
+        />
     </div>
 </template>
 
diff --git a/src/views/user/orderManagementCz/components/order-details.vue b/src/views/user/orderManagementCz/components/order-details.vue
new file mode 100644
index 0000000..a167e3f
--- /dev/null
+++ b/src/views/user/orderManagementCz/components/order-details.vue
@@ -0,0 +1,653 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
+
+import TitleTip from 'components/TitleTip/index.vue'
+const route = useRoute()
+/* 查询参数 */
+const cardList = ref<any>({})
+const orderStatusTemp = ref<number>(0)
+const idTemp = ref<string>('')
+const titleStaus = ref<any>('')
+//描述信息
+const operationDetails = ref<any>({
+    1: { title: '已出库', preOutboundUser: '', preOutboundTime: '' },
+    2: { title: '已收货', takeOverUser: '', takeOverTime: '' },
+    3: { title: '租赁结束', rentOverUser: '', rentOverTime: '' },
+})
+// 根据步骤的 Id 返回对应的标题
+const getStepTitle = (stepId: number) => {
+    if (orderStatusTemp.value === 2) {
+        titleStaus.value = '待出库'
+        return stepId === 1 ? '待出库' : ''
+    } else if (orderStatusTemp.value === 3) {
+        titleStaus.value = '待收货'
+        return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : ''
+    } else if (orderStatusTemp.value === 4) {
+        titleStaus.value = '租赁中'
+        return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : ''
+    } else if (orderStatusTemp.value === 5) {
+        titleStaus.value = '已退租'
+        return stepId === 1
+            ? '已出库'
+            : stepId === 2
+            ? '已收货'
+            : stepId === 3
+            ? '租赁结束'
+            : stepId === 4
+            ? '已退租'
+            : ''
+    } else if (orderStatusTemp.value === 6) {
+        titleStaus.value = '已完成'
+        return stepId === 1
+            ? '已出库'
+            : stepId === 2
+            ? '已收货'
+            : stepId === 3
+            ? '租赁结束'
+            : stepId === 4
+            ? '已退租'
+            : stepId === 5
+            ? '已完成'
+            : ''
+    } else if (orderStatusTemp.value === 7) {
+        titleStaus.value = '已驳回'
+        return stepId === 1 ? '已驳回' : ''
+    }
+    titleStaus.value = ''
+    return '' // 默认返回空字符串
+}
+
+// 根据步骤的 Id 返回对应的描述
+const getDescription = (desId: number) => {
+    const operation = operationDetails.value[desId]
+    if (operation.title == '已出库' && titleStaus.value != '待出库') {
+        return `
+                操作人：${operation.preOutboundUser == null ? ' ' : operation.preOutboundUser}
+                操作时间：${operation.preOutboundTime == null ? ' ' : operation.preOutboundTime}
+            `
+    } else if (
+        operation.title == '已收货' &&
+        titleStaus.value != '待收货' &&
+        titleStaus.value != '待出库'
+    ) {
+        return `
+                操作人：${operation.takeOverUser == null ? ' ' : operation.takeOverUser}
+                操作时间：${operation.takeOverTime == null ? ' ' : operation.takeOverTime}
+            `
+    } else if (
+        operation.title == '租赁结束' &&
+        titleStaus.value != '待收货' &&
+        titleStaus.value != '待出库' &&
+        titleStaus.value != '租赁中'
+    ) {
+        return `
+                操作人：${operation.rentOverUser == null ? ' ' : operation.rentOverUser}
+                操作时间：${operation.rentOverTime == null ? ' ' : operation.rentOverTime}
+            `
+    }
+    return '' // 默认返回空描述
+}
+
+// 计算是否过期
+const isExpired = (goods: any) => {
+    // 获取当前日期并去掉时间部分
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // 将endtime转为Date对象
+    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
+
+    // 判断endtime是否早于今天
+    return endTime < today
+}
+
+const getId = () => {
+    orderStatusTemp.value = Number(route.query.orderStatusTemp)
+    idTemp.value = String(route.query.idTemp)
+}
+const orderDetails = ref<any>({})
+/** 查询列表 */
+const getList = async () => {
+    let params = {
+        orderId: idTemp.value,
+    }
+
+    console.log(props.orderId, 'props.orderId')
+
+    const res: any = await getOrderListInfoApi({ orderId: props.orderId })
+
+    orderDetails.value = res.data
+    // setStepType(res.data.orderStatus)
+    // console.log(res, '订单详情---')
+    // cardList.value = res.data
+    // operationDetails.value[1].preOutboundUser = res.data.detailsList[0].preOutboundUser
+    // operationDetails.value[1].preOutboundTime = res.data.detailsList[0].preOutboundTime
+    // operationDetails.value[2].takeOverUser = res.data.detailsList[0].takeOverUser
+    // operationDetails.value[2].takeOverTime = res.data.detailsList[0].takeOverTime
+    // operationDetails.value[3].rentOverUser = res.data.detailsList[0].rentOverUser
+    // operationDetails.value[3].rentOverTime = res.data.detailsList[0].rentOverTime
+}
+
+onBeforeMount(() => {
+    getId()
+})
+
+onMounted(() => {
+    getList()
+})
+
+const props = defineProps({
+    orderStatus: {
+        type: [String, Number],
+        default: () => '',
+    },
+    orderId: {
+        type: [String, Number],
+        default: () => '',
+    },
+})
+
+const emit = defineEmits(['onBackOrderHome'])
+const onOrderManage = () => {
+    emit('onBackOrderHome')
+}
+
+console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
+
+const time = ref([])
+const currentActive = ref(1)
+const stepList = ref([
+    {
+        title: '待接单',
+        description: '',
+    },
+    {
+        title: '已接单',
+        description: '',
+    },
+    {
+        title: '已出库',
+        description: '',
+    },
+    {
+        title: '已收货',
+        description: '',
+    },
+    {
+        title: '租赁中',
+        description: '',
+    },
+    {
+        title: '已退租',
+        description: '',
+    },
+    {
+        title: '已结算',
+        description: '',
+    },
+    {
+        title: '已完成',
+        description: '',
+    },
+])
+
+if (props.orderStatus == 1) {
+    currentActive.value = 0
+}
+if (props.orderStatus == 2) {
+    currentActive.value = 1
+}
+if (props.orderStatus == 3) {
+    currentActive.value = 3
+}
+if (props.orderStatus == 4) {
+    currentActive.value = 5
+}
+if (props.orderStatus == 5) {
+    currentActive.value = 6
+}
+if (props.orderStatus == 6) {
+    currentActive.value = 7
+}
+if (props.orderStatus == 7) {
+    currentActive.value = 8
+}
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+        <el-breadcrumb separator="/" style="padding: 15px 0">
+            <el-breadcrumb-item @click="onOrderManage" class="order-title"
+                >订单管理</el-breadcrumb-item
+            >
+            <el-breadcrumb-item>订单明细</el-breadcrumb-item>
+        </el-breadcrumb>
+        <div class="order-details">
+            <TitleTip :titleText="`订单流程`" />
+
+            <div style="padding: 20px 40px">
+                <el-steps
+                    :active="currentActive"
+                    finish-status="success"
+                    process-status="process"
+                    align-center
+                >
+                    <el-step
+                        v-for="item in stepList"
+                        :key="item.title"
+                        :title="item.title"
+                        :description="item.description"
+                    />
+                </el-steps>
+            </div>
+            <TitleTip :titleText="`租赁信息`" />
+
+            <!-- <div class="section">
+                <el-header>
+                    <el-row type="flex" justify="space-between" align="middle">
+                        <el-col :span="3">
+                            <span>订单流程</span>
+                        </el-col>
+                        <el-col
+                            :span="2"
+                            style="text-align: right; margin-right: 80px; font-size: 20px"
+                        >
+                            <div style="color: green">{{ titleStaus }}</div>
+                        </el-col>
+                    </el-row>
+                </el-header>
+
+                <el-steps
+                    class="step"
+                    :space="600"
+                    :active="orderStatusTemp === 7 ? 1 : orderStatusTemp - 2"
+                    finish-status="success"
+                >
+                    <el-step :title="getStepTitle(1)" :description="getDescription(1)"></el-step>
+                    <el-step :title="getStepTitle(2)" :description="getDescription(2)"></el-step>
+                    <el-step :title="getStepTitle(3)" :description="getDescription(3)"></el-step>
+                    <el-step :title="getStepTitle(4)"></el-step>
+                    <el-step :title="getStepTitle(5)"></el-step>
+                </el-steps>
+            </div> -->
+
+            <el-row style="padding: 10px 40px">
+                <el-col :span="8">
+                    <span> 订单编号： </span>
+                    <span>
+                        {{ orderDetails.code }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 下单时间： </span>
+                    <span>
+                        {{ orderDetails.orderTime }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 出租单位： </span>
+                    <span>
+                        {{ orderDetails.czcompanyName }}
+                    </span>
+                </el-col>
+            </el-row>
+            <el-row style="padding: 10px 40px">
+                <el-col :span="8">
+                    <span> 出租人： </span>
+                    <span>
+                        {{ orderDetails.person }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 出租人电话： </span>
+                    <span>
+                        {{ orderDetails.personPhone }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 承租单位： </span>
+                    <span>
+                        {{ orderDetails.companyName }}
+                    </span>
+                </el-col>
+            </el-row>
+            <el-row style="padding: 10px 40px">
+                <el-col :span="8">
+                    <span> 承租人： </span>
+                    <span>
+                        {{ orderDetails.nickName }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 承租人电话： </span>
+                    <span>
+                        {{ orderDetails.phoneNumber }}
+                    </span>
+                </el-col>
+                <el-col :span="8">
+                    <span> 租赁协议： </span>
+                    <span> ** </span>
+                </el-col>
+            </el-row>
+
+            <div class="section">
+                <!-- <el-header style="height: 30px">租赁信息 </el-header> -->
+                <el-row
+                    class="cart-listAll"
+                    :style="{ background: cardList.orderStatus == '6' ? '#EBEEF5' : 'white' }"
+                >
+                    <el-col :span="1">
+                        <!-- <div style="text-align: center">
+                        <el-checkbox :key="numberTemp" v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
+                        </el-checkbox>
+                    </div> -->
+                    </el-col>
+                    <el-col :span="7">
+                        <el-row
+                            class="cart-list"
+                            v-for="(goods, j) in orderDetails.detailsList"
+                            :key="j"
+                        >
+                            <el-col class="goods-info">
+                                <el-col :span="7">
+                                    <img
+                                        :src="goods.url"
+                                        style="width: 160px; height: 120px"
+                                        alt=""
+                                    />
+                                </el-col>
+                                <div class="goods-code">
+                                    <div style="font-size: 10px; font-weight: bold">
+                                        {{ goods.deviceName }}
+                                    </div>
+                                    <div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
+                                    <div
+                                        style="
+                                            display: flex;
+                                            justify-content: space-between;
+                                            width: 100%;
+                                        "
+                                    >
+                                        <div style="flex: 1; text-align: left; width: 220px">
+                                            租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                        </div>
+                                        <div style="flex: 1; text-align: left">
+                                            数量：{{ goods.num }}{{ ' ' + '台' }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </el-col>
+                        </el-row>
+                    </el-col>
+                    <el-col :span="4">
+                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
+                            总费用
+                        </div>
+                        <div class="red-font">{{ orderDetails.cost }}</div>
+                    </el-col>
+                    <el-col :span="7">
+                        <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
+                            租期
+                        </div>
+                        <div style="color: black; font-weight: bold">
+                            {{ orderDetails.startTime }}
+                        </div>
+                        <div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
+                        <div style="color: black; font-weight: bold">
+                            {{ orderDetails.endTime }}
+                        </div>
+                    </el-col>
+                    <el-col :span="4">
+                        <div
+                            v-if="orderDetails.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="orderDetails.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="orderDetails.orderStatus == '4' && isExpired(cardList)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="orderDetails.orderStatus == '4' && !isExpired(cardList)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="orderDetails.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租' }}
+                        </div>
+                        <div
+                            v-if="orderDetails.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="orderDetails.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                </el-row>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    // width: 800px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .order-title {
+        cursor: pointer;
+        color: #00a288;
+        font-weight: bold;
+        :deep .el-breadcrumb__inner {
+            color: #00a288;
+        }
+    }
+
+    .order-details {
+        flex: 1;
+        overflow-y: auto;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+        padding: 0 12px;
+    }
+
+    .step {
+        margin-left: 80px;
+    }
+
+    .section {
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .user-name,
+            .user-phone {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .user-name {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+
+            div {
+                text-align: center;
+            }
+
+            .goods-info {
+                display: flex;
+                align-content: center;
+                border-bottom: 1px solid #00a288;
+                img {
+                    width: 140px;
+                    height: 80px;
+                }
+
+                .goods-code {
+                    margin-left: 70px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    div {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+    .cart-listAll {
+        margin: 15px 0;
+        display: flex;
+        align-items: center;
+        font-size: 13px;
+
+        div {
+            text-align: center;
+        }
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            div {
+                text-align: center;
+            }
+
+            .goods-info {
+                display: flex;
+                align-content: center;
+
+                img {
+                    width: 180px;
+                    height: 80px;
+                }
+
+                .goods-code {
+                    margin-left: 110px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    div {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+        .lease-date {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+        }
+
+        .red-font {
+            color: #ff4800;
+            font-weight: bold;
+        }
+    }
+}
+</style>
diff --git a/src/views/user/orderManagementCz/components/order-home.vue b/src/views/user/orderManagementCz/components/order-home.vue
new file mode 100644
index 0000000..89b25d5
--- /dev/null
+++ b/src/views/user/orderManagementCz/components/order-home.vue
@@ -0,0 +1,2178 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { useRouter } from 'vue-router'
+import { getOrderListApi, passApi, failApi } from 'http/api/usercenter/seekorder'
+import uploadComponent from 'components/uploadComponent/index.vue'
+import previewImg from './previewImg/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { useStore } from 'store/user'
+const store = useStore()
+import { mainStore } from 'store/main'
+const store2 = mainStore()
+/* 查询参数 ***
+ ****
+ ***
+ ***
+ */
+const queryParams: any = ref({
+    deviceName: '',
+    orderStatus: '',
+    czcompanyName: '',
+    companyName: '',
+    lowerBound: '',
+    upperBound: '',
+    pageSize: 20,
+    pageNum: 1,
+    startTime: '',
+    endTime: '',
+    flag: true,
+})
+const queryFormRef = ref<FormInstance>()
+const time = ref([])
+const router = useRouter()
+const pageSize = 20
+const pageNumber = 1
+const total: any = ref(0)
+const numberTemp = ref<number>(0)
+const cardList = ref<any>([])
+const status = 0
+const statusList = [
+    { id: '1', name: '待接单' },
+    { id: '2', name: '待出库' },
+    { id: '3', name: '已出库' },
+    { id: '4', name: '租赁中' },
+    { id: '5', name: '已退租' },
+    { id: '6', name: '已完成' },
+    { id: '7', name: '已完成' },
+    { id: '8', name: '已驳回' },
+]
+
+/** 查询列表 */
+const getList = async () => {
+    if (time.value.length > 0) {
+        const dateStart = new Date(time.value[0])
+        const dateEnd = new Date(time.value[1])
+        queryParams.value.startTime = dateStart.toLocaleDateString('en-CA')
+        queryParams.value.endTime = dateEnd.toLocaleDateString('en-CA')
+    } else {
+        queryParams.value.startTime = undefined
+        queryParams.value.endTime = undefined
+    }
+    const res: any = await getOrderListApi(queryParams.value)
+    cardList.value = res.rows
+    total.value = res.total
+}
+
+const emit = defineEmits(['onOpenOrderDetails'])
+//订单详情
+const handleViewOrder = (index: Number, row: any) => {
+    // router.push({
+    //     name: 'orderManagementInfoBuy',
+    //     query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.orderId },
+    // })
+
+    emit('onOpenOrderDetails', row.orderStatus, row.orderId)
+}
+
+onMounted(() => {
+    getList()
+})
+
+// 查询按钮
+const queryTableList = () => {
+    queryParams.value.pageNum = 1
+    getList()
+}
+
+// 重置
+const resetTableList = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    time.value = []
+    queryTableList()
+}
+
+// 全选事件
+const onChangeCompany = (e: boolean, index: number, item: any) => {
+    cardList.value[index].detailsList.forEach((item: any) => {
+        if (item.orderStatus == '2') {
+            item.isChecked = e
+        }
+    })
+}
+
+// 单选事件
+const onChangeGoods = (index: number) => {
+    let flag = true
+    for (let item of cardList.value[index].detailsList) {
+        if (item.orderStatus == '2' && item.isChecked != true) {
+            flag = false
+            break
+        }
+    }
+    cardList.value[index].isChecked = flag
+}
+
+// 接单
+const onAcceptOrders = (item: any) => {
+    ElMessageBox.confirm('是否确定接单？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return passApi({ orderId: item.orderId, orderStatus: 2 })
+            // return removeDeviceApi([row.maId])
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '接单成功',
+                    duration: 1000,
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+// 出库按钮
+const confirmPass = async (index: number) => {
+    ElMessageBox.confirm('是否确定出库？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return passApi({ orderId: cardList.value[index].orderId, orderStatus: 3 })
+            // return removeDeviceApi([row.maId])
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '出库成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+// 驳回按钮
+const confirmFail = async (index: number) => {
+    ElMessageBox.confirm('是否确定取消？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return failApi({ orderId: cardList.value[index].orderId, orderStatus: 7 })
+            // return removeDeviceApi([row.maId])
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '取消成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+// 计算是否过期
+const isExpired = (goods: any) => {
+    // 获取当前日期并去掉时间部分
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // 将endtime转为Date对象
+    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
+
+    // 判断endtime是否早于今天
+    return endTime < today
+}
+
+/* 退租按钮 */
+const clickRentingTermination = () => {
+    router.push({ name: 'rentinTermination' })
+    console.log('退租')
+}
+
+/* 确认收货 */
+const clickConfirmReceipt = (row: any) => {
+    console.log('确认收货')
+    router.push({
+        name: 'orderDetails',
+        query: {
+            orderId: row.orderId,
+            confirm: 'true',
+        },
+    })
+}
+
+const settleinTitle = ref('')
+/* 编辑 **********/
+const isEditDisabled = ref(false)
+// 退租检修弹框显示隐藏
+const dialogFormVisibleSettlein: any = ref(false)
+const equipmentDeploymentParams: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+    code: '',
+    brand: '',
+    typeId: '',
+    companyId: '',
+    productionDate: '',
+    dayLeasePrice: '',
+    person: '',
+    personPhone: '',
+    deviceWeight: '',
+})
+
+const mainFileList: any = ref([]) //检测文件1
+const detailsFileList: any = ref([]) //检测文件2
+//图片查看弹窗
+const dialogVisible: any = ref(false)
+const dialogImageUrl = ref('')
+//上传
+const upload: any = ref({
+    // 设置上传的请求头部
+    headers: { Authorization: 'Bearer ' + store2.token },
+    // 上传的地址
+    url: import.meta.env.VITE_API_URL + '/file/upload',
+})
+// 文件上传前处理-上传大小
+const beforeUpload = (file: any) => {
+    if (file.size / 1024 / 1024 > 2) {
+        ElMessage({
+            type: 'error',
+            message: '上传文件大小不能超过2M!',
+        })
+        // this.$message.error({ message: `上传文件大小不能超过2M!`,});
+        return false
+    }
+}
+// 文件上传失败
+const uploadError = () => {
+    ElMessage({
+        type: 'error',
+        message: '上传文件失败!',
+    })
+    // this.$message.error({message: `上传文件失败!`});
+}
+// 文件上传成功处理
+const handleFileSuccess = (response: any) => {
+    if (response.code == 200) {
+        let obj = {
+            // modelId:this.maId,
+            fileName: response.data.name.split('/')[4],
+            fileUrl: response.data.url,
+        }
+        console.log(obj)
+        mainFileList.value.push(obj)
+        ElMessage({
+            type: 'success',
+            message: '上传成功！',
+        })
+        console.log(mainFileList.value)
+    }
+}
+
+// 文件上传成功处理
+const handleFileSuccess2 = (response: any) => {
+    if (response.code == 200) {
+        let obj = {
+            // modelId:this.maId,
+            fileName: response.data.name.split('/')[4],
+            fileUrl: response.data.url,
+        }
+        console.log(obj)
+        detailsFileList.value.push(obj)
+        ElMessage({
+            type: 'success',
+            message: '上传成功！',
+        })
+        console.log(detailsFileList.value)
+    }
+}
+//退租检修
+const handleViewBack = () => {
+    settleinTitle.value = '退租检修'
+    isEditDisabled.value = true
+    equipmentDeploymentParams.value = {
+        /* 企业Id */
+        // ownCo: mainStore().userInfo.companyId,
+        /* 租赁范围 */
+        leaseScope: '',
+        /* 设备所在地 */
+        location: '',
+        /* 省 */
+        provinceId: '',
+        /* 市 */
+        cityId: '',
+        /* 区 */
+        areaId: '',
+        /* 设备所在地 省 */
+        addressEconomize: '',
+        /* 设备所在地 市 */
+        addressProvince: '',
+        /* 设备所在地 区 */
+        addressArea: '',
+        /* 设备类型 */
+        typeId: '',
+        /* 设备类型大类 */
+        deviceType: '',
+        /* 设备类型子类 */
+        deviceTypeSon: '',
+        /* 设备类型小类*/
+        deviceTypeSun: '',
+        /* 设备品牌 */
+        brand: '',
+        /* 设备型号 */
+        modelName: '',
+        /* 出场日期 */
+        productionDate: '',
+        /* 工作小时数 */
+        workingHours: '',
+        /* 整机序列号 */
+        serialNumber: '',
+        /* 月租金 */
+        monthLeasePrice: '',
+        /* 日租金 */
+        dayLeasePrice: '',
+        /* 是否提供机手 */
+        isOperator: '',
+        /* 机手月费用 */
+        jsMonthPrice: '',
+        /* 机手日费用 */
+        jsDayPrice: '',
+        /* 详细说明 */
+        description: '',
+        /* 设备主图片 */
+        picUrl: '',
+        /* 检测信息 ，保险信息*/
+        fileList: [],
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开退组检修弹框
+    dialogFormVisibleSettlein.value = true
+}
+
+const settlemoneyTitle = ref('')
+const moneyParams1: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+const moneyParams2: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+const moneyParams3: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+const tableData: any = ref([
+    {
+        name1: '测试1',
+        name2: '测试1-1',
+        name3: '测试1-2',
+        jy1: '外观1-1',
+        jy2: '故障1-2',
+        jy3: '外观1-2',
+        jy4: '故障1-2',
+        jy5: '外观1-3',
+        jy6: '故障1-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注1',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '测试2-2',
+        jy1: '外观2-1',
+        jy2: '故障2-2',
+        jy3: '外观2-2',
+        jy4: '故障2-2',
+        jy5: '外观2-3',
+        jy6: '故障2-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注2',
+    },
+])
+
+const partItems1: any = ref([{}])
+const partItems2: any = ref([{}])
+const partItems3: any = ref([{}])
+// 费用结算弹框显示隐藏
+const dialogFormVisibleSettlemoney: any = ref(false)
+//费用结算
+const handleViewMoney = () => {
+    settlemoneyTitle.value = '费用结算'
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    moneyParams2.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    moneyParams3.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开退组检修弹框
+    dialogFormVisibleSettlemoney.value = true
+}
+
+//维修费用
+const addPartItem1 = () => {
+    partItems1.value.push({ partType: '', num: '', isCharge: '' })
+}
+const removePartItem1 = (index: number) => {
+    if (partItems1.value.length > 1) {
+        partItems1.value.splice(index, 1)
+    }
+}
+
+//报废费用
+const addPartItem2 = () => {
+    partItems2.value.push({ partType: '', num: '', isCharge: '' })
+}
+const removePartItem2 = (index: number) => {
+    if (partItems2.value.length > 1) {
+        partItems2.value.splice(index, 1)
+    }
+}
+
+//报废费用 修改
+const addPartItem3 = () => {
+    partItems3.value.push({ partType: '', num: '', isCharge: '' })
+}
+const removePartItem3 = (index: number) => {
+    if (partItems3.value.length > 1) {
+        partItems3.value.splice(index, 1)
+    }
+}
+
+const settleListTitle = ref('')
+// 费用清单弹框显示隐藏
+const dialogFormVisibleSettleList: any = ref(false)
+const tableData1: any = ref([
+    {
+        name1: '测试1',
+        name2: '测试1-1',
+        name3: '3台',
+        jy1: '100',
+        jy2: '31',
+        jy3: '2024-11-25 至2024-12-25',
+        jy4: '1600',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '3台',
+        jy1: '100',
+        jy2: '31',
+        jy3: '2024-11-25 至2024-12-25',
+        jy4: '1600',
+    },
+])
+const tableData2: any = ref([
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '3台',
+        jy1: '类型1',
+        jy2: '维修中',
+        jy3: '1500',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-2',
+        name3: '3台',
+        jy1: '类型2',
+        jy2: '维修中',
+        jy3: '1500',
+    },
+])
+const tableData3: any = ref([
+    {
+        name1: '测试3',
+        name2: '测试3-1',
+        name3: '3台',
+        jy1: '轻度维修',
+        jy2: '1400',
+    },
+    {
+        name1: '测试3',
+        name2: '测试3-2',
+        name3: '3台',
+        jy1: '轻度维修',
+        jy2: '1400',
+    },
+])
+const tableData4: any = ref([
+    {
+        name1: '测试4',
+        name2: '测试4-1',
+        name3: '3台',
+        jy1: '1400',
+    },
+    {
+        name1: '测试4',
+        name2: '测试4-2',
+        name3: '3台',
+        jy1: '1400',
+    },
+])
+//费用清单
+const handleViewList = () => {
+    settleListTitle.value = '费用清单'
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开费用清单弹框
+    dialogFormVisibleSettleList.value = true
+}
+
+const tableData5: any = ref([
+    {
+        name1: '测试1',
+        name2: '测试1-1',
+        name3: '测试1-2',
+        jy1: '外观1-1',
+        jy2: '故障1-2',
+        jy3: '外观1-2',
+        jy4: '故障1-2',
+        jy5: '外观1-3',
+        jy6: '故障1-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注1',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '测试2-2',
+        jy1: '外观2-1',
+        jy2: '故障2-2',
+        jy3: '外观2-2',
+        jy4: '故障2-2',
+        jy5: '外观2-3',
+        jy6: '故障2-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注2',
+    },
+])
+const settleRepairTitle = ref('')
+// 检修详情弹框显示隐藏
+const dialogFormVisibleSettleRepair: any = ref(false)
+//检修详情
+const handleViewRepair = () => {
+    settleListTitle.value = '检修详情'
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开检修详情弹框
+    dialogFormVisibleSettleRepair.value = true
+}
+
+const settleWordTitle = ref('')
+const dialogFormVisibleSettleWord: any = ref(false)
+//租赁协议
+const handleViewWord = () => {
+    settleWordTitle.value = '租赁协议'
+    console.log(12313131)
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开租赁协议弹框
+    dialogFormVisibleSettleWord.value = true
+}
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+        <el-form
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            size="default"
+            label-width="0"
+        >
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="deviceName">
+                        <el-input
+                            style="width: 100%"
+                            v-model.trim="queryParams.deviceName"
+                            clearable
+                            placeholder="请输入装备名称"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item prop="orderStatus">
+                        <el-select
+                            v-model="queryParams.orderStatus"
+                            placeholder="请选择订单状态"
+                            style="width: 100%"
+                            clearable
+                        >
+                            <el-option
+                                v-for="item in statusList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item prop="dateRange">
+                        <el-date-picker
+                            v-model="time"
+                            type="daterange"
+                            unlink-panels
+                            range-separator="-"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item prop="czcompanyName">
+                        <el-input
+                            v-model.trim="queryParams.czcompanyName"
+                            clearable
+                            maxlength="20"
+                            placeholder="出租单位"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="companyName">
+                        <el-input
+                            v-model.trim="queryParams.companyName"
+                            clearable
+                            maxlength="20"
+                            placeholder="承租单位"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-input
+                        v-model.trim="queryParams.lowerBound"
+                        placeholder="租金/元"
+                        clearable
+                        maxlength="20"
+                        style="width: 45%"
+                    />
+                    <span style="display: inline-block; width: 5%; text-align: center"> - </span>
+                    <el-input
+                        v-model.trim="queryParams.upperBound"
+                        placeholder="租金/元"
+                        clearable
+                        maxlength="20"
+                        style="width: 45%"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item>
+                        <el-button type="primary" class="primary-lease" @click="queryTableList"
+                            >查询</el-button
+                        >
+                        <el-button
+                            type="primary"
+                            class="primary-lease"
+                            @click="resetTableList(queryFormRef)"
+                            >重置</el-button
+                        >
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <template v-if="cardList.length > 0">
+            <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
+                <el-row class="order-title-info">
+                    <el-col :span="8">
+                        <span> 订单编号： </span>
+                        <span>
+                            {{ item.code }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 下单时间： </span>
+                        <span>
+                            {{ item.orderTime }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 装备所属公司： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+                <el-row
+                    style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
+                    class="order-title-info"
+                >
+                    <el-col :span="8">
+                        <span> 出租方联系电话： </span>
+                        <span>
+                            {{ item.personPhone }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方联系电话： </span>
+                        <span>
+                            {{ item.phoneNumber }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方地址： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="8">
+                        <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-items order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                        >
+                            <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
+                            <div
+                                style="
+                                    flex: 1;
+                                    display: flex;
+                                    justify-content: space-around;
+                                    flex-direction: column;
+                                    padding-left: 12px;
+                                "
+                            >
+                                <el-row style="color: #169bd5; font-weight: bold">
+                                    {{ goods.deviceName }}
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租期 </el-col>
+                                    <el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租金 </el-col>
+                                    <el-col :span="8">
+                                        {{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                    </el-col>
+                                    <el-col :span="4"> 数量 </el-col>
+                                    <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
+                                </el-row>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div>总费用</div>
+                        <div class="red-font">{{ item.cost }} 元</div>
+                    </el-col>
+                    <el-col :span="4" class="order-items-info">
+                        <div>租期</div>
+                        <div style="font-weight: bold; margin-top: 10px">
+                            {{ item.startTime }}至{{ item.endTime }}
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div
+                            v-if="item.orderStatus == '1'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待接单' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && !isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租待结算' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '待结算确认' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '8'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                    <el-col :span="6" class="handle-btn">
+                        <el-button
+                            v-if="item.orderStatus == '1'"
+                            type="primary"
+                            size="small"
+                            @click="onAcceptOrders(item)"
+                            >接单</el-button
+                        >
+                        <el-button
+                            v-if="item.orderStatus == '2'"
+                            type="primary"
+                            size="small"
+                            @click="confirmPass(index)"
+                            >出库</el-button
+                        >
+                        <el-button
+                            v-if="item.orderStatus == '2'"
+                            type="primary"
+                            size="small"
+                            @click="confirmFail(index)"
+                            >取消</el-button
+                        >
+
+                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
+                            订单详情
+                        </el-button>
+                        <el-button @click="handleViewWord(j)" type="primary" size="small">
+                            租赁协议
+                        </el-button>
+                        <!-- <el-button
+                            v-if="item.orderStatus == '5'"
+                            @click="handleViewBack(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            退租检修
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '5'"
+                            @click="handleViewMoney(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用结算
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '6'"
+                            @click="handleViewRepair(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            检修详情
+                        </el-button> -->
+                        <el-button
+                            v-if="item.orderStatus == '6'"
+                            @click="handleViewList(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用清单
+                        </el-button>
+                    </el-col>
+                </el-row>
+            </div>
+        </template>
+
+        <el-empty v-else />
+        <PagingComponent
+            v-if="total > 0"
+            @getList="getList"
+            v-model:pageSize="queryParams.pageSize"
+            v-model:currentPage="queryParams.pageNumber"
+            :total="total"
+        />
+    </div>
+    <!-- 退租检修弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettlein"
+        :title="settleinTitle"
+        width="60%"
+        align-center
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div
+                class="item"
+                style="
+                    width: 30%;
+                    flex-shrink: 0;
+                    margin-bottom: 12px;
+                    font-size: 16px;
+                    margin-left: 80px;
+                "
+            >
+                <span>装备名称：挖掘机</span>
+            </div>
+
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 80px;
+                    "
+                >
+                    <span>装备编码：10000212135656</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>型号：ZJO9777466</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>数量：3</span>
+                </div>
+            </div>
+        </div>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">外观检测</span>
+        </div>
+        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
+            <el-row>
+                <el-form-item label="是否合格：" prop="pass">
+                    <el-select
+                        v-model="equipmentDeploymentParams.pass"
+                        placeholder="请选择是否合格"
+                        clearable
+                        style="width: 350px"
+                    >
+                        <el-option label="是" value="0"></el-option>
+                        <el-option label="否" value="1"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="费用：" prop="fy">
+                    <el-input
+                        v-model="equipmentDeploymentParams.fy"
+                        placeholder="请输入设备数量"
+                        clearable
+                        maxlength="20"
+                        style="width: 350px"
+                    />
+                </el-form-item>
+            </el-row>
+            <el-row>
+                <el-form-item label="备注：" prop="remark1">
+                    <el-input
+                        placeholder="请输入"
+                        autocomplete="off"
+                        style="width: 860px"
+                        maxlength="50"
+                        v-model="equipmentDeploymentParams.remark1"
+                        clearable
+                    />
+                </el-form-item>
+            </el-row>
+        </el-form>
+        <div class="uploadBox">
+            <div class="labelBox">
+                <div style="margin-left: 40px">
+                    <span style="font-size: 14px">检验文件: </span>
+                </div>
+                <div style="margin-left: 20px">
+                    <el-upload
+                        ref="upload"
+                        :limit="6"
+                        :headers="upload.headers"
+                        :action="upload.url"
+                        :show-file-list="false"
+                        accept=".png, .jpg, .jpeg"
+                        :on-success="handleFileSuccess"
+                        :auto-upload="true"
+                        :before-upload="beforeUpload"
+                        :on-error="uploadError"
+                    >
+                        <el-button icon="el-icon-folder-add">上传文件</el-button>
+                    </el-upload>
+                </div>
+                <div style="color: #999; font-size: 12px; margin-left: 20px">
+                    支持格式：.jpg .png，单个文件大小不能超过2M
+                </div>
+            </div>
+            <div class="imgsBox">
+                <div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
+                    <img class="picture-card" :src="item.fileUrl" alt="" />
+                    <div class="icon-list">
+                        <span class="imgItem__icon hide" @click="handleDownload(item)">
+                            <i class="el-icon-download" />
+                        </span>
+                        <span class="imgItem__icon hide" @click="picturePreview(item)">
+                            <i class="el-icon-zoom-in" />
+                        </span>
+                        <span class="imgItem__icon hide" @click="handleRemove(mainFileList, index)">
+                            <i class="el-icon-delete" />
+                        </span>
+                    </div>
+                    <p class="file-name">{{ item.fileName }}</p>
+                </div>
+            </div>
+            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
+        </div>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">维修内容</span>
+        </div>
+        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
+            <el-row>
+                <el-form-item label="是否合格：" prop="pass2">
+                    <el-select
+                        v-model="equipmentDeploymentParams.pass2"
+                        placeholder="请选择是否合格"
+                        clearable
+                        style="width: 350px"
+                    >
+                        <el-option label="是" value="0"></el-option>
+                        <el-option label="否" value="1"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="费用：" prop="fy2">
+                    <el-input
+                        v-model="equipmentDeploymentParams.fy2"
+                        placeholder="请输入设备数量"
+                        clearable
+                        maxlength="20"
+                        style="width: 350px"
+                    />
+                </el-form-item>
+            </el-row>
+            <el-row>
+                <el-form-item label="备注：" prop="remark2">
+                    <el-input
+                        placeholder="请输入"
+                        autocomplete="off"
+                        style="width: 860px"
+                        maxlength="50"
+                        v-model="equipmentDeploymentParams.remark2"
+                        clearable
+                    />
+                </el-form-item>
+            </el-row>
+        </el-form>
+        <div class="uploadBox">
+            <div class="labelBox">
+                <div style="margin-left: 40px">
+                    <span style="font-size: 14px">检验文件: </span>
+                </div>
+                <div style="margin-left: 20px">
+                    <el-upload
+                        ref="upload2"
+                        :limit="6"
+                        :headers="upload.headers"
+                        :action="upload.url"
+                        :show-file-list="false"
+                        accept=".png, .jpg, .jpeg"
+                        :on-success="handleFileSuccess2"
+                        :auto-upload="true"
+                        :before-upload="beforeUpload"
+                        :on-error="uploadError"
+                    >
+                        <el-button icon="el-icon-folder-add">上传文件</el-button>
+                    </el-upload>
+                </div>
+                <div style="color: #999; font-size: 12px; margin-left: 20px">
+                    支持格式：.jpg .png，单个文件大小不能超过2M
+                </div>
+            </div>
+            <div class="imgsBox">
+                <div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
+                    <img class="picture-card" :src="item.fileUrl" alt="" />
+                    <div class="icon-list">
+                        <span class="imgItem__icon hide" @click="handleDownload(item)">
+                            <i class="el-icon-download" />
+                        </span>
+                        <span class="imgItem__icon hide" @click="picturePreview(item)">
+                            <i class="el-icon-zoom-in" />
+                        </span>
+                        <span
+                            class="imgItem__icon hide"
+                            @click="handleRemove(detailsFileList, index)"
+                        >
+                            <i class="el-icon-delete" />
+                        </span>
+                    </div>
+                    <p class="file-name">{{ item.fileName }}</p>
+                </div>
+            </div>
+            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 费用结算弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettlemoney"
+        :title="settlemoneyTitle"
+        width="65%"
+        align-center
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>结算单位：安徽送变电公司</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁天数：30{{ '/天' }}</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁费用(元)：1800</span>
+                </div>
+            </div>
+            <div class="title">
+                <span class="title-sign"></span>
+                <span class="title-text">退租检测信息</span>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
+            <el-table-column align="center" prop="name1" label="机具名称" />
+            <el-table-column align="center" prop="name2" label="规格型号" />
+            <el-table-column align="center" prop="name3" label="装备编码" />
+            <el-table-column align="center" prop="typeName" label="检验内容">
+                <el-table-column label="外观检验" align="center" prop="jy1" />
+                <el-table-column label="故障检验" align="center" prop="jy2" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="维修内容">
+                <el-table-column label="外观检验" align="center" prop="jy3" />
+                <el-table-column label="故障检验" align="center" prop="jy4" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="金额">
+                <el-table-column label="外观检验" align="center" prop="jy5" />
+                <el-table-column label="故障检验" align="center" prop="jy6" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="附件">
+                <el-table-column label="外观检验" align="center" prop="jy7" />
+                <el-table-column label="故障检验" align="center" prop="jy8" />
+            </el-table-column>
+            <el-table-column align="center" label="备注" prop="remark" width="80px">
+            </el-table-column>
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">费用结算</span>
+        </div>
+        <div>
+            <span style="color: #ff9900; margin-left: 100px">● </span>
+            <span class="title-text">维修费用</span>
+        </div>
+        <el-form label-width="240" ref="ruleFormRef2" :model="moneyParams1">
+            <div v-for="(item, index) in partItems1" :key="index" class="dynamic-item">
+                <div
+                    style="
+                        margin-top: 10px;
+                        margin-left: 180px;
+                        margin-bottom: 7px;
+                        font-size: 16px;
+                    "
+                >
+                    设备：{{ index + 1 }}
+                </div>
+                <el-row>
+                    <el-form-item label="关联装备" prop="partType">
+                        <el-select
+                            v-model="item.device"
+                            placeholder="请选择"
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="设备1" value="0"></el-option>
+                            <el-option label="设备2" value="1"></el-option>
+                            <el-option label="设备3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="维修数量" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="维修费用" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="维修类型" prop="isCharge">
+                        <el-select
+                            v-model="item.isCharge"
+                            placeholder="请选择"
+                            filterable
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="维修类型1" value="0"></el-option>
+                            <el-option label="维修类型2" value="1"></el-option>
+                            <el-option label="维修类型3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div style="margin-left: 130px">
+                        <el-button @click="addPartItem1" type="success"> 增加维修设备</el-button>
+                        <el-button @click="removePartItem1(index)" v-if="index != 0" type="danger">
+                            删除维修设备</el-button
+                        >
+                    </div>
+                </el-row>
+            </div>
+        </el-form>
+
+        <div style="margin-top: 10px">
+            <span style="color: #ff9900; margin-left: 100px">● </span>
+            <span class="title-text">报废费用</span>
+        </div>
+        <el-form label-width="240" ref="ruleFormRef3" :model="moneyParams2">
+            <div v-for="(item, index) in partItems2" :key="index" class="dynamic-item">
+                <div
+                    style="
+                        margin-top: 10px;
+                        margin-left: 180px;
+                        margin-bottom: 7px;
+                        font-size: 16px;
+                    "
+                >
+                    设备：{{ index + 1 }}
+                </div>
+                <el-row>
+                    <el-form-item label="关联装备" prop="partType">
+                        <el-select
+                            v-model="item.device"
+                            placeholder="请选择"
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="设备1" value="0"></el-option>
+                            <el-option label="设备2" value="1"></el-option>
+                            <el-option label="设备3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="报废数量" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="报废费用" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="报废原因" prop="isCharge">
+                        <el-input
+                            v-model="item.isCharg"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div style="margin-left: 130px">
+                        <el-button @click="addPartItem2" type="success"> 增加报废设备</el-button>
+                        <el-button @click="removePartItem2(index)" v-if="index != 0" type="danger">
+                            删除报废设备</el-button
+                        >
+                    </div>
+                </el-row>
+            </div>
+        </el-form>
+
+        <div style="margin-top: 10px">
+            <span style="color: #ff9900; margin-left: 100px">● </span>
+            <span class="title-text">丢失费用</span>
+        </div>
+        <el-form label-width="240" ref="ruleFormRef4" :model="moneyParams3">
+            <div v-for="(item, index) in partItems3" :key="index" class="dynamic-item">
+                <div
+                    style="
+                        margin-top: 10px;
+                        margin-left: 180px;
+                        margin-bottom: 7px;
+                        font-size: 16px;
+                    "
+                >
+                    设备：{{ index + 1 }}
+                </div>
+                <el-row>
+                    <el-form-item label="关联装备" prop="partType">
+                        <el-select
+                            v-model="item.device"
+                            placeholder="请选择"
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="设备1" value="0"></el-option>
+                            <el-option label="设备2" value="1"></el-option>
+                            <el-option label="设备3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="丢失数量" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="丢失费用" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div style="margin-left: 130px">
+                        <el-button @click="addPartItem3" type="success"> 增加丢失设备</el-button>
+                        <el-button @click="removePartItem3(index)" v-if="index != 0" type="danger">
+                            删除丢失设备</el-button
+                        >
+                    </div>
+                </el-row>
+            </div>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 费用清单弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleList"
+        :title="settleListTitle"
+        width="65%"
+        align-center
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>结算单位：安徽送变电公司</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁天数：30{{ '/天' }}</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁费用(元)：1800</span>
+                </div>
+            </div>
+            <div class="title">
+                <span class="title-sign"></span>
+                <span class="title-text">租赁费用明细</span>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData1"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="数量" />
+            <el-table-column label="租赁单价(元/日)" align="center" prop="jy1" />
+            <el-table-column label="租赁天数" align="center" prop="jy2" />
+            <el-table-column label="租期" align="center" prop="jy3" />
+            <el-table-column label="租期费用" align="center" prop="jy4" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">维修费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData2"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="维修数量" />
+            <el-table-column label="维修类型" align="center" prop="jy1" />
+            <el-table-column label="维修状态" align="center" prop="jy2" />
+            <el-table-column label="维修费用（元）" align="center" prop="jy3" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">报废费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData3"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="报废数量" />
+            <el-table-column label="报废原因" align="center" prop="jy1" />
+            <el-table-column label="报废费用（元）" align="center" prop="jy2" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">丢失费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData4"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="丢失数量" />
+            <el-table-column label="报废费用（元）" align="center" prop="jy1" />
+        </el-table>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 检修详情弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleRepair"
+        :title="settleRepairTitle"
+        width="65%"
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 1px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 48%;
+                        flex-shrink: 0;
+                        margin-bottom: 1px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 48%; flex-shrink: 0; margin-bottom: 1px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData5"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
+            <el-table-column align="center" prop="name1" label="机具名称" />
+            <el-table-column align="center" prop="name2" label="规格型号" />
+            <el-table-column align="center" prop="name3" label="装备编码" />
+            <el-table-column align="center" prop="typeName" label="检验内容">
+                <el-table-column label="外观检验" align="center" prop="jy1" />
+                <el-table-column label="故障检验" align="center" prop="jy2" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="维修内容">
+                <el-table-column label="外观检验" align="center" prop="jy3" />
+                <el-table-column label="故障检验" align="center" prop="jy4" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="金额">
+                <el-table-column label="外观检验" align="center" prop="jy5" />
+                <el-table-column label="故障检验" align="center" prop="jy6" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="附件">
+                <el-table-column label="外观检验" align="center" prop="jy7" />
+                <el-table-column label="故障检验" align="center" prop="jy8" />
+            </el-table-column>
+            <el-table-column align="center" label="备注" prop="remark" width="80px">
+            </el-table-column>
+        </el-table>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 租赁协议 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleWord"
+        :title="settleWordTitle"
+        width="50%"
+        align-center
+        destroy-on-close
+        :close-on-click-modal="false"
+    >
+        <div style="display: flex; justify-content: center">
+            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                    >关 闭</el-button
+                >
+                <el-button @click="submitBtn" type="success"> 下载 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.logo {
+    padding: 15px 0;
+    display: flex;
+    margin-left: 80px;
+}
+.title {
+    margin: 10px;
+    margin-left: 20px;
+    display: flex;
+    align-items: center;
+}
+.title-sign {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #409eff;
+    margin-left: 45px;
+}
+.title-text {
+    font-weight: 700;
+    margin-left: 10px;
+}
+.uploadBox {
+    margin: 20px 40px;
+}
+.labelBox {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.imgsBox {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    margin-left: 20px;
+
+    .imgItem {
+        width: 160px;
+        height: 160px;
+        margin-right: 40px;
+        border: 1px dashed #bbb;
+        position: relative;
+        .picture-card {
+            width: 160px;
+            height: 160px;
+        }
+        .icon-list {
+            width: 60px;
+            height: 20px;
+            position: absolute;
+            top: 70px;
+            left: 40px;
+            display: flex;
+            align-items: center;
+        }
+        .imgItem__icon {
+            margin: 0 5px;
+        }
+        .file-name {
+            font-size: 10px;
+        }
+    }
+
+    .hide {
+        display: none;
+    }
+    .imgItem:hover .hide {
+        display: block;
+    }
+}
+.tipBox {
+    color: red;
+    font-size: 12px;
+    margin-left: 20px;
+}
+.container {
+    // width: 800px;
+    // margin: 0 auto;
+    // padding: 10px;
+    background: #eeeff6;
+    font-size: 14px;
+
+    .cart-title {
+        margin-top: 10px;
+        padding: 10px 0;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    .cart-title div:first-child {
+        width: 5px;
+        height: 20px;
+        background-color: #4fabfe;
+    }
+
+    .cart-th {
+        margin: 15px 0;
+        div {
+            text-align: center;
+        }
+    }
+
+    .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin-bottom: 6px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .code,
+            .orderTime {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .czcompanyName {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-listAll {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            div {
+                text-align: center;
+            }
+            .cart-list {
+                margin: 15px 0;
+                display: flex;
+                align-items: center;
+                font-size: 13px;
+
+                div {
+                    text-align: center;
+                }
+
+                .goods-info {
+                    display: flex;
+                    align-content: center;
+                    border-bottom: 1px solid #00a288;
+
+                    img {
+                        width: 180px;
+                        height: 80px;
+                    }
+
+                    .goods-code {
+                        margin-left: 110px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+
+                        div {
+                            text-align: left;
+                        }
+                    }
+                }
+
+                .lease-date {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 12px;
+                }
+            }
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .cart-tbodyTwo {
+        background: #dcdfe6;
+        padding: 8px 12px;
+        margin: 10px;
+
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .code,
+            .orderTime {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .czcompanyName {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            div {
+                text-align: center;
+            }
+
+            .goods-info {
+                display: flex;
+                align-content: center;
+
+                img {
+                    width: 180px;
+                    height: 80px;
+                }
+
+                .goods-code {
+                    margin-left: 110px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    div {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .protocol-handle {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+        font-size: 13px;
+
+        .checkbox-container a {
+            color: #ff4800;
+            text-decoration: underline;
+        }
+    }
+}
+
+:deep .el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
+}
+
+.order-title-info {
+    padding: 6px 4px;
+    font-size: 14px;
+    color: #999;
+}
+
+.order-items {
+    border-right: 1px solid #eee;
+}
+
+.order-info {
+    display: flex;
+    padding: 10px 0;
+}
+
+.order-items-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #eee;
+}
+
+.red-font {
+    color: #ff4800;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+.handle-btn {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .el-button {
+        width: calc((100% - 50px) / 4);
+        margin: 0;
+        margin-left: 10px !important;
+    }
+}
+</style>
diff --git a/src/views/user/orderManagementCz/index.vue b/src/views/user/orderManagementCz/index.vue
index 13ede3d..8365cdc 100644
--- a/src/views/user/orderManagementCz/index.vue
+++ b/src/views/user/orderManagementCz/index.vue
@@ -1,2118 +1,38 @@
+<template>
+    <div class="order-container">
+        <!-- <OrderHome /> -->
+        <!-- <OrderDetails /> -->
+        <component
+            :orderId="orderId"
+            :is="isComponents"
+            :orderStatus="orderStatus"
+            @onBackOrderHome="onBackOrderHome"
+            @onOpenOrderDetails="onOpenOrderDetails"
+        />
+    </div>
+</template>
+
 <script setup lang="ts">
-import { ref } from 'vue'
-import PagingComponent from 'components/PagingComponent/index.vue'
-import { useRouter } from 'vue-router'
-import { getOrderListApi, passApi, failApi } from 'http/api/usercenter/seekorder'
-import uploadComponent from 'components/uploadComponent/index.vue'
-import previewImg from './previewImg/index.vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance } from 'element-plus'
-import { useStore } from 'store/user'
-const store = useStore()
-import { mainStore } from 'store/main'
-const store2 = mainStore()
-/* 查询参数 ***
- ****
- ***
- ***
- */
-const queryParams: any = ref({
-    deviceName: '',
-    orderStatus: '',
-    czcompanyName: '',
-    companyName: '',
-    lowerBound: '',
-    upperBound: '',
-    pageSize: 20,
-    pageNum: 1,
-    startTime: '',
-    endTime: '',
-    flag: true,
-})
-const queryFormRef = ref<FormInstance>()
-const time = ref([])
-const router = useRouter()
-const pageSize = 20
-const pageNumber = 1
-const total: any = ref(0)
-const numberTemp = ref<number>(0)
-const cardList = ref<any>([])
-const status = 0
-const statusList = [
-    { id: '2', name: '待出库' },
-    { id: '3', name: '已出库' },
-    { id: '4', name: '租赁中' },
-    { id: '5', name: '已退租' },
-    { id: '6', name: '已完成' },
-    { id: '7', name: '已驳回' },
-]
-
-/** 查询列表 */
-const getList = async () => {
-    if (time.value.length > 0) {
-        const dateStart = new Date(time.value[0])
-        const dateEnd = new Date(time.value[1])
-        queryParams.value.startTime = dateStart.toLocaleDateString('en-CA')
-        queryParams.value.endTime = dateEnd.toLocaleDateString('en-CA')
-    } else {
-        queryParams.value.startTime = undefined
-        queryParams.value.endTime = undefined
-    }
-    const res: any = await getOrderListApi(queryParams.value)
-    cardList.value = res.rows
-    total.value = res.total
+import OrderHome from './components/order-home.vue'
+import OrderDetails from './components/order-details.vue'
+const isComponents = ref<any>(OrderHome)
+const orderStatus = ref<any>()
+const orderId = ref<any>()
+const onBackOrderHome = () => {
+    isComponents.value = OrderHome
 }
-
-//订单详情
-const handleViewOrder = (index: Number, row: any) => {
-    router.push({
-        name: 'orderManagementInfoBuy',
-        query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.orderId },
-    })
-}
-
-onMounted(() => {
-    getList()
-})
-
-// 查询按钮
-const queryTableList = () => {
-    queryParams.value.pageNum = 1
-    getList()
-}
-
-// 重置
-const resetTableList = (formEl: FormInstance | undefined) => {
-    if (!formEl) return
-    formEl.resetFields()
-    time.value = []
-    queryTableList()
-}
-
-// 全选事件
-const onChangeCompany = (e: boolean, index: number, item: any) => {
-    cardList.value[index].detailsList.forEach((item: any) => {
-        if (item.orderStatus == '2') {
-            item.isChecked = e
-        }
-    })
-}
-
-// 单选事件
-const onChangeGoods = (index: number) => {
-    let flag = true
-    for (let item of cardList.value[index].detailsList) {
-        if (item.orderStatus == '2' && item.isChecked != true) {
-            flag = false
-            break
-        }
-    }
-    cardList.value[index].isChecked = flag
-}
-
-// 出库按钮
-const confirmPass = async (index: number) => {
-    ElMessageBox.confirm('是否确定出库？', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            return passApi({ orderId: cardList.value[index].orderId, orderStatus: 3 })
-            // return removeDeviceApi([row.maId])
-        })
-        .then((res) => {
-            if (res.code === 200) {
-                ElMessage({
-                    type: 'success',
-                    message: '出库成功',
-                })
-                numberTemp.value = numberTemp.value + 1
-                getList()
-            }
-        })
-        .catch(() => {})
-}
-
-// 驳回按钮
-const confirmFail = async (index: number) => {
-    ElMessageBox.confirm('是否确定取消？', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            return failApi({ orderId: cardList.value[index].orderId, orderStatus: 7 })
-            // return removeDeviceApi([row.maId])
-        })
-        .then((res) => {
-            if (res.code === 200) {
-                ElMessage({
-                    type: 'success',
-                    message: '取消成功',
-                })
-                numberTemp.value = numberTemp.value + 1
-                getList()
-            }
-        })
-        .catch(() => {})
-}
-
-// 计算是否过期
-const isExpired = (goods: any) => {
-    // 获取当前日期并去掉时间部分
-    const today = new Date()
-    today.setHours(0, 0, 0, 0)
-
-    // 将endtime转为Date对象
-    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
-
-    // 判断endtime是否早于今天
-    return endTime < today
-}
-
-/* 退租按钮 */
-const clickRentingTermination = () => {
-    router.push({ name: 'rentinTermination' })
-    console.log('退租')
-}
-
-/* 确认收货 */
-const clickConfirmReceipt = (row: any) => {
-    console.log('确认收货')
-    router.push({
-        name: 'orderDetails',
-        query: {
-            orderId: row.orderId,
-            confirm: 'true',
-        },
-    })
-}
-
-const settleinTitle = ref('')
-/* 编辑 **********/
-const isEditDisabled = ref(false)
-// 退租检修弹框显示隐藏
-const dialogFormVisibleSettlein: any = ref(false)
-const equipmentDeploymentParams: any = ref({
-    /* 设备名称 */
-    deviceName: '',
-    deviceTypeList: [],
-    deviceCount: 1,
-    unitName: '',
-    code: '',
-    brand: '',
-    typeId: '',
-    companyId: '',
-    productionDate: '',
-    dayLeasePrice: '',
-    person: '',
-    personPhone: '',
-    deviceWeight: '',
-})
-
-const mainFileList: any = ref([]) //检测文件1
-const detailsFileList: any = ref([]) //检测文件2
-//图片查看弹窗
-const dialogVisible: any = ref(false)
-const dialogImageUrl = ref('')
-//上传
-const upload: any = ref({
-    // 设置上传的请求头部
-    headers: { Authorization: 'Bearer ' + store2.token },
-    // 上传的地址
-    url: import.meta.env.VITE_API_URL + '/file/upload',
-})
-// 文件上传前处理-上传大小
-const beforeUpload = (file: any) => {
-    if (file.size / 1024 / 1024 > 2) {
-        ElMessage({
-            type: 'error',
-            message: '上传文件大小不能超过2M!',
-        })
-        // this.$message.error({ message: `上传文件大小不能超过2M!`,});
-        return false
-    }
-}
-// 文件上传失败
-const uploadError = () => {
-    ElMessage({
-        type: 'error',
-        message: '上传文件失败!',
-    })
-    // this.$message.error({message: `上传文件失败!`});
-}
-// 文件上传成功处理
-const handleFileSuccess = (response: any) => {
-    if (response.code == 200) {
-        let obj = {
-            // modelId:this.maId,
-            fileName: response.data.name.split('/')[4],
-            fileUrl: response.data.url,
-        }
-        console.log(obj)
-        mainFileList.value.push(obj)
-        ElMessage({
-            type: 'success',
-            message: '上传成功！',
-        })
-        console.log(mainFileList.value)
-    }
-}
-
-// 文件上传成功处理
-const handleFileSuccess2 = (response: any) => {
-    if (response.code == 200) {
-        let obj = {
-            // modelId:this.maId,
-            fileName: response.data.name.split('/')[4],
-            fileUrl: response.data.url,
-        }
-        console.log(obj)
-        detailsFileList.value.push(obj)
-        ElMessage({
-            type: 'success',
-            message: '上传成功！',
-        })
-        console.log(detailsFileList.value)
-    }
-}
-//退租检修
-const handleViewBack = () => {
-    settleinTitle.value = '退租检修'
-    isEditDisabled.value = true
-    equipmentDeploymentParams.value = {
-        /* 企业Id */
-        // ownCo: mainStore().userInfo.companyId,
-        /* 租赁范围 */
-        leaseScope: '',
-        /* 设备所在地 */
-        location: '',
-        /* 省 */
-        provinceId: '',
-        /* 市 */
-        cityId: '',
-        /* 区 */
-        areaId: '',
-        /* 设备所在地 省 */
-        addressEconomize: '',
-        /* 设备所在地 市 */
-        addressProvince: '',
-        /* 设备所在地 区 */
-        addressArea: '',
-        /* 设备类型 */
-        typeId: '',
-        /* 设备类型大类 */
-        deviceType: '',
-        /* 设备类型子类 */
-        deviceTypeSon: '',
-        /* 设备类型小类*/
-        deviceTypeSun: '',
-        /* 设备品牌 */
-        brand: '',
-        /* 设备型号 */
-        modelName: '',
-        /* 出场日期 */
-        productionDate: '',
-        /* 工作小时数 */
-        workingHours: '',
-        /* 整机序列号 */
-        serialNumber: '',
-        /* 月租金 */
-        monthLeasePrice: '',
-        /* 日租金 */
-        dayLeasePrice: '',
-        /* 是否提供机手 */
-        isOperator: '',
-        /* 机手月费用 */
-        jsMonthPrice: '',
-        /* 机手日费用 */
-        jsDayPrice: '',
-        /* 详细说明 */
-        description: '',
-        /* 设备主图片 */
-        picUrl: '',
-        /* 检测信息 ，保险信息*/
-        fileList: [],
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    // 打开退组检修弹框
-    dialogFormVisibleSettlein.value = true
-}
-
-const settlemoneyTitle = ref('')
-const moneyParams1: any = ref({
-    /* 设备名称 */
-    deviceName: '',
-    deviceTypeList: [],
-    deviceCount: 1,
-    unitName: '',
-})
-const moneyParams2: any = ref({
-    /* 设备名称 */
-    deviceName: '',
-    deviceTypeList: [],
-    deviceCount: 1,
-    unitName: '',
-})
-const moneyParams3: any = ref({
-    /* 设备名称 */
-    deviceName: '',
-    deviceTypeList: [],
-    deviceCount: 1,
-    unitName: '',
-})
-const tableData: any = ref([
-    {
-        name1: '测试1',
-        name2: '测试1-1',
-        name3: '测试1-2',
-        jy1: '外观1-1',
-        jy2: '故障1-2',
-        jy3: '外观1-2',
-        jy4: '故障1-2',
-        jy5: '外观1-3',
-        jy6: '故障1-3',
-        jy7: '',
-        jy8: '',
-        remark: '备注1',
-    },
-    {
-        name1: '测试2',
-        name2: '测试2-1',
-        name3: '测试2-2',
-        jy1: '外观2-1',
-        jy2: '故障2-2',
-        jy3: '外观2-2',
-        jy4: '故障2-2',
-        jy5: '外观2-3',
-        jy6: '故障2-3',
-        jy7: '',
-        jy8: '',
-        remark: '备注2',
-    },
-])
-
-const partItems1: any = ref([{}])
-const partItems2: any = ref([{}])
-const partItems3: any = ref([{}])
-// 费用结算弹框显示隐藏
-const dialogFormVisibleSettlemoney: any = ref(false)
-//费用结算
-const handleViewMoney = () => {
-    settlemoneyTitle.value = '费用结算'
-    moneyParams1.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    moneyParams2.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    moneyParams3.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    // 打开退组检修弹框
-    dialogFormVisibleSettlemoney.value = true
-}
-
-//维修费用
-const addPartItem1 = () => {
-    partItems1.value.push({ partType: '', num: '', isCharge: '' })
-}
-const removePartItem1 = (index: number) => {
-    if (partItems1.value.length > 1) {
-        partItems1.value.splice(index, 1)
-    }
-}
-
-//报废费用
-const addPartItem2 = () => {
-    partItems2.value.push({ partType: '', num: '', isCharge: '' })
-}
-const removePartItem2 = (index: number) => {
-    if (partItems2.value.length > 1) {
-        partItems2.value.splice(index, 1)
-    }
-}
-
-//报废费用 修改
-const addPartItem3 = () => {
-    partItems3.value.push({ partType: '', num: '', isCharge: '' })
-}
-const removePartItem3 = (index: number) => {
-    if (partItems3.value.length > 1) {
-        partItems3.value.splice(index, 1)
-    }
-}
-
-const settleListTitle = ref('')
-// 费用清单弹框显示隐藏
-const dialogFormVisibleSettleList: any = ref(false)
-const tableData1: any = ref([
-    {
-        name1: '测试1',
-        name2: '测试1-1',
-        name3: '3台',
-        jy1: '100',
-        jy2: '31',
-        jy3: '2024-11-25 至2024-12-25',
-        jy4: '1600',
-    },
-    {
-        name1: '测试2',
-        name2: '测试2-1',
-        name3: '3台',
-        jy1: '100',
-        jy2: '31',
-        jy3: '2024-11-25 至2024-12-25',
-        jy4: '1600',
-    },
-])
-const tableData2: any = ref([
-    {
-        name1: '测试2',
-        name2: '测试2-1',
-        name3: '3台',
-        jy1: '类型1',
-        jy2: '维修中',
-        jy3: '1500',
-    },
-    {
-        name1: '测试2',
-        name2: '测试2-2',
-        name3: '3台',
-        jy1: '类型2',
-        jy2: '维修中',
-        jy3: '1500',
-    },
-])
-const tableData3: any = ref([
-    {
-        name1: '测试3',
-        name2: '测试3-1',
-        name3: '3台',
-        jy1: '轻度维修',
-        jy2: '1400',
-    },
-    {
-        name1: '测试3',
-        name2: '测试3-2',
-        name3: '3台',
-        jy1: '轻度维修',
-        jy2: '1400',
-    },
-])
-const tableData4: any = ref([
-    {
-        name1: '测试4',
-        name2: '测试4-1',
-        name3: '3台',
-        jy1: '1400',
-    },
-    {
-        name1: '测试4',
-        name2: '测试4-2',
-        name3: '3台',
-        jy1: '1400',
-    },
-])
-//费用清单
-const handleViewList = () => {
-    settleListTitle.value = '费用清单'
-    moneyParams1.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    // 打开费用清单弹框
-    dialogFormVisibleSettleList.value = true
-}
-
-const tableData5: any = ref([
-    {
-        name1: '测试1',
-        name2: '测试1-1',
-        name3: '测试1-2',
-        jy1: '外观1-1',
-        jy2: '故障1-2',
-        jy3: '外观1-2',
-        jy4: '故障1-2',
-        jy5: '外观1-3',
-        jy6: '故障1-3',
-        jy7: '',
-        jy8: '',
-        remark: '备注1',
-    },
-    {
-        name1: '测试2',
-        name2: '测试2-1',
-        name3: '测试2-2',
-        jy1: '外观2-1',
-        jy2: '故障2-2',
-        jy3: '外观2-2',
-        jy4: '故障2-2',
-        jy5: '外观2-3',
-        jy6: '故障2-3',
-        jy7: '',
-        jy8: '',
-        remark: '备注2',
-    },
-])
-const settleRepairTitle = ref('')
-// 检修详情弹框显示隐藏
-const dialogFormVisibleSettleRepair: any = ref(false)
-//检修详情
-const handleViewRepair = () => {
-    settleListTitle.value = '检修详情'
-    moneyParams1.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    // 打开检修详情弹框
-    dialogFormVisibleSettleRepair.value = true
-}
-
-const settleWordTitle = ref('')
-const dialogFormVisibleSettleWord: any = ref(false)
-//租赁协议
-const handleViewWord = () => {
-    settleWordTitle.value = '租赁协议'
-    console.log(12313131)
-    moneyParams1.value = {
-        /* 设备状态 */
-        maStatus: 15,
-        detectionList: [],
-        insureList: [],
-        picList: [],
-    }
-    // 打开租赁协议弹框
-    dialogFormVisibleSettleWord.value = true
+const onOpenOrderDetails = (status: any, id: any) => {
+    orderStatus.value = status
+    orderId.value = id
+    isComponents.value = OrderDetails
 }
 </script>
 
-<template>
-    <!-- 订单管理 -->
-    <div class="container">
-        <el-form
-            :model="queryParams"
-            ref="queryFormRef"
-            :inline="true"
-            size="default"
-            label-width="0"
-        >
-            <el-row>
-                <el-col :span="6">
-                    <el-form-item prop="deviceName">
-                        <el-input
-                            style="width: 100%"
-                            v-model.trim="queryParams.deviceName"
-                            clearable
-                            placeholder="请输入装备名称"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item prop="orderStatus">
-                        <el-select
-                            v-model="queryParams.orderStatus"
-                            placeholder="请选择订单状态"
-                            style="width: 100%"
-                            clearable
-                        >
-                            <el-option
-                                v-for="item in statusList"
-                                :key="item.id"
-                                :label="item.name"
-                                :value="item.id"
-                            />
-                        </el-select>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-form-item prop="dateRange">
-                        <el-date-picker
-                            v-model="time"
-                            type="daterange"
-                            unlink-panels
-                            range-separator="-"
-                            start-placeholder="开始时间"
-                            end-placeholder="结束时间"
-                            style="width: 100%"
-                        />
-                    </el-form-item>
-                </el-col>
-
-                <el-col :span="6">
-                    <el-form-item prop="czcompanyName">
-                        <el-input
-                            v-model.trim="queryParams.czcompanyName"
-                            clearable
-                            maxlength="20"
-                            placeholder="出租单位"
-                            style="width: 100%"
-                        />
-                    </el-form-item>
-                </el-col>
-            </el-row>
-
-            <el-row>
-                <el-col :span="6">
-                    <el-form-item prop="companyName">
-                        <el-input
-                            v-model.trim="queryParams.companyName"
-                            clearable
-                            maxlength="20"
-                            placeholder="承租单位"
-                        />
-                    </el-form-item>
-                </el-col>
-                <el-col :span="6">
-                    <el-input
-                        v-model.trim="queryParams.lowerBound"
-                        placeholder="租金/元"
-                        clearable
-                        maxlength="20"
-                        style="width: 45%"
-                    />
-                    <span style="display: inline-block; width: 5%; text-align: center"> - </span>
-                    <el-input
-                        v-model.trim="queryParams.upperBound"
-                        placeholder="租金/元"
-                        clearable
-                        maxlength="20"
-                        style="width: 45%"
-                    />
-                </el-col>
-                <el-col :span="12">
-                    <el-form-item>
-                        <el-button type="primary" class="primary-lease" @click="queryTableList"
-                            >查询</el-button
-                        >
-                        <el-button
-                            type="primary"
-                            class="primary-lease"
-                            @click="resetTableList(queryFormRef)"
-                            >重置</el-button
-                        >
-                    </el-form-item>
-                </el-col>
-            </el-row>
-        </el-form>
-
-        <template v-if="cardList.length > 0">
-            <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
-                <el-row class="order-title-info">
-                    <el-col :span="8">
-                        <span> 订单编号： </span>
-                        <span>
-                            {{ item.code }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 下单时间： </span>
-                        <span>
-                            {{ item.orderTime }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 装备所属公司： </span>
-                        <span>
-                            {{ item.czcompanyName }}
-                        </span>
-                    </el-col>
-                </el-row>
-                <el-row
-                    style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
-                    class="order-title-info"
-                >
-                    <el-col :span="8">
-                        <span> 出租方联系电话： </span>
-                        <span>
-                            {{ item.personPhone }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 承租方联系电话： </span>
-                        <span>
-                            {{ item.phoneNumber }}
-                        </span>
-                    </el-col>
-                    <el-col :span="8">
-                        <span> 承租方地址： </span>
-                        <span>
-                            {{ item.czcompanyName }}
-                        </span>
-                    </el-col>
-                </el-row>
-
-                <el-row>
-                    <el-col :span="8">
-                        <div
-                            v-for="(goods, j) in item.detailsList"
-                            :key="j"
-                            class="order-items order-info"
-                            :style="
-                                j != item.detailsList.length - 1
-                                    ? 'border-bottom:1px solid #eee'
-                                    : ''
-                            "
-                        >
-                            <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
-                            <div
-                                style="
-                                    flex: 1;
-                                    display: flex;
-                                    justify-content: space-around;
-                                    flex-direction: column;
-                                    padding-left: 12px;
-                                "
-                            >
-                                <el-row style="color: #169bd5; font-weight: bold">
-                                    {{ goods.deviceName }}
-                                </el-row>
-                                <el-row>
-                                    <el-col :span="4"> 租期 </el-col>
-                                    <el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
-                                </el-row>
-                                <el-row>
-                                    <el-col :span="4"> 租金 </el-col>
-                                    <el-col :span="8">
-                                        {{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
-                                    </el-col>
-                                    <el-col :span="4"> 数量 </el-col>
-                                    <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
-                                </el-row>
-                            </div>
-                        </div>
-                    </el-col>
-                    <el-col :span="3" class="order-items-info">
-                        <div>总费用</div>
-                        <div class="red-font">{{ item.cost }} 元</div>
-                    </el-col>
-                    <el-col :span="4" class="order-items-info">
-                        <div>租期</div>
-                        <div style="font-weight: bold; margin-top: 10px">
-                            {{ item.startTime }}至{{ item.endTime }}
-                        </div>
-                    </el-col>
-                    <el-col :span="3" class="order-items-info">
-                        <div
-                            v-if="item.orderStatus == '2'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: blue;
-                            "
-                        >
-                            {{ '待出库' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '3'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #c76f60;
-                            "
-                        >
-                            {{ '待收货' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '4' && isExpired(item)"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #008d06;
-                            "
-                        >
-                            {{ '租赁中' }}
-                            <span style="color: red">(已过期)</span>
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '4' && !isExpired(item)"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #008d06;
-                            "
-                        >
-                            {{ '租赁中' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '5'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #5b33cc;
-                            "
-                        >
-                            {{ '已退租' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '6'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #c00017;
-                            "
-                        >
-                            {{ '已完成' }}
-                        </div>
-                        <div
-                            v-if="item.orderStatus == '7'"
-                            style="
-                                font-size: 14px;
-                                font-weight: bold;
-                                margin-bottom: 10px;
-                                color: #797979;
-                            "
-                        >
-                            {{ '已驳回' }}
-                        </div>
-                    </el-col>
-                    <el-col :span="6" class="handle-btn">
-                        <el-button
-                            v-if="item.orderStatus == '2'"
-                            type="primary"
-                            size="small"
-                            @click="confirmPass(index)"
-                            >出库</el-button
-                        >
-                        <el-button
-                            v-if="item.orderStatus == '2'"
-                            type="primary"
-                            size="small"
-                            @click="confirmFail(index)"
-                            >取消</el-button
-                        >
-
-                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
-                            订单详情
-                        </el-button>
-                        <el-button @click="handleViewWord(j)" type="primary" size="small">
-                            租赁协议
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '5'"
-                            @click="handleViewBack(j)"
-                            type="primary"
-                            size="small"
-                        >
-                            退租检修
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '5'"
-                            @click="handleViewMoney(j)"
-                            type="primary"
-                            size="small"
-                        >
-                            费用结算
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '6'"
-                            @click="handleViewRepair(j)"
-                            type="primary"
-                            size="small"
-                        >
-                            检修详情
-                        </el-button>
-                        <el-button
-                            v-if="item.orderStatus == '6'"
-                            @click="handleViewList(j)"
-                            type="primary"
-                            size="small"
-                        >
-                            费用清单
-                        </el-button>
-                    </el-col>
-                </el-row>
-            </div>
-        </template>
-
-        <el-empty v-else />
-        <PagingComponent
-            v-if="total > 0"
-            @getList="getList"
-            v-model:pageSize="queryParams.pageSize"
-            v-model:currentPage="queryParams.pageNumber"
-            :total="total"
-        />
-    </div>
-    <!-- 退租检修弹框 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettlein"
-        :title="settleinTitle"
-        width="60%"
-        align-center
-        :close-on-click-modal="false"
-    >
-        <div style="height: 80px">
-            <div
-                class="info"
-                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
-            >
-                <div
-                    class="item"
-                    style="
-                        width: 30%;
-                        flex-shrink: 0;
-                        margin-bottom: 5px;
-                        font-size: 16px;
-                        margin-left: 40px;
-                    "
-                >
-                    <span>订单编号：10000212135656</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>装备套数：2套</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>退租时间：2024-10-10 10:00:00</span>
-                </div>
-            </div>
-            <div
-                class="item"
-                style="
-                    width: 30%;
-                    flex-shrink: 0;
-                    margin-bottom: 12px;
-                    font-size: 16px;
-                    margin-left: 80px;
-                "
-            >
-                <span>装备名称：挖掘机</span>
-            </div>
-
-            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
-                <div
-                    class="item"
-                    style="
-                        width: 30%;
-                        flex-shrink: 0;
-                        margin-bottom: 5px;
-                        font-size: 16px;
-                        margin-left: 80px;
-                    "
-                >
-                    <span>装备编码：10000212135656</span>
-                </div>
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>型号：ZJO9777466</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>数量：3</span>
-                </div>
-            </div>
-        </div>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">外观检测</span>
-        </div>
-        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
-            <el-row>
-                <el-form-item label="是否合格：" prop="pass">
-                    <el-select
-                        v-model="equipmentDeploymentParams.pass"
-                        placeholder="请选择是否合格"
-                        clearable
-                        style="width: 350px"
-                    >
-                        <el-option label="是" value="0"></el-option>
-                        <el-option label="否" value="1"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="费用：" prop="fy">
-                    <el-input
-                        v-model="equipmentDeploymentParams.fy"
-                        placeholder="请输入设备数量"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-            </el-row>
-            <el-row>
-                <el-form-item label="备注：" prop="remark1">
-                    <el-input
-                        placeholder="请输入"
-                        autocomplete="off"
-                        style="width: 860px"
-                        maxlength="50"
-                        v-model="equipmentDeploymentParams.remark1"
-                        clearable
-                    />
-                </el-form-item>
-            </el-row>
-        </el-form>
-        <div class="uploadBox">
-            <div class="labelBox">
-                <div style="margin-left: 40px">
-                    <span style="font-size: 14px">检验文件: </span>
-                </div>
-                <div style="margin-left: 20px">
-                    <el-upload
-                        ref="upload"
-                        :limit="6"
-                        :headers="upload.headers"
-                        :action="upload.url"
-                        :show-file-list="false"
-                        accept=".png, .jpg, .jpeg"
-                        :on-success="handleFileSuccess"
-                        :auto-upload="true"
-                        :before-upload="beforeUpload"
-                        :on-error="uploadError"
-                    >
-                        <el-button icon="el-icon-folder-add">上传文件</el-button>
-                    </el-upload>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-left: 20px">
-                    支持格式：.jpg .png，单个文件大小不能超过2M
-                </div>
-            </div>
-            <div class="imgsBox">
-                <div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
-                    <img class="picture-card" :src="item.fileUrl" alt="" />
-                    <div class="icon-list">
-                        <span class="imgItem__icon hide" @click="handleDownload(item)">
-                            <i class="el-icon-download" />
-                        </span>
-                        <span class="imgItem__icon hide" @click="picturePreview(item)">
-                            <i class="el-icon-zoom-in" />
-                        </span>
-                        <span class="imgItem__icon hide" @click="handleRemove(mainFileList, index)">
-                            <i class="el-icon-delete" />
-                        </span>
-                    </div>
-                    <p class="file-name">{{ item.fileName }}</p>
-                </div>
-            </div>
-            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
-        </div>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">维修内容</span>
-        </div>
-        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
-            <el-row>
-                <el-form-item label="是否合格：" prop="pass2">
-                    <el-select
-                        v-model="equipmentDeploymentParams.pass2"
-                        placeholder="请选择是否合格"
-                        clearable
-                        style="width: 350px"
-                    >
-                        <el-option label="是" value="0"></el-option>
-                        <el-option label="否" value="1"></el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="费用：" prop="fy2">
-                    <el-input
-                        v-model="equipmentDeploymentParams.fy2"
-                        placeholder="请输入设备数量"
-                        clearable
-                        maxlength="20"
-                        style="width: 350px"
-                    />
-                </el-form-item>
-            </el-row>
-            <el-row>
-                <el-form-item label="备注：" prop="remark2">
-                    <el-input
-                        placeholder="请输入"
-                        autocomplete="off"
-                        style="width: 860px"
-                        maxlength="50"
-                        v-model="equipmentDeploymentParams.remark2"
-                        clearable
-                    />
-                </el-form-item>
-            </el-row>
-        </el-form>
-        <div class="uploadBox">
-            <div class="labelBox">
-                <div style="margin-left: 40px">
-                    <span style="font-size: 14px">检验文件: </span>
-                </div>
-                <div style="margin-left: 20px">
-                    <el-upload
-                        ref="upload2"
-                        :limit="6"
-                        :headers="upload.headers"
-                        :action="upload.url"
-                        :show-file-list="false"
-                        accept=".png, .jpg, .jpeg"
-                        :on-success="handleFileSuccess2"
-                        :auto-upload="true"
-                        :before-upload="beforeUpload"
-                        :on-error="uploadError"
-                    >
-                        <el-button icon="el-icon-folder-add">上传文件</el-button>
-                    </el-upload>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-left: 20px">
-                    支持格式：.jpg .png，单个文件大小不能超过2M
-                </div>
-            </div>
-            <div class="imgsBox">
-                <div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
-                    <img class="picture-card" :src="item.fileUrl" alt="" />
-                    <div class="icon-list">
-                        <span class="imgItem__icon hide" @click="handleDownload(item)">
-                            <i class="el-icon-download" />
-                        </span>
-                        <span class="imgItem__icon hide" @click="picturePreview(item)">
-                            <i class="el-icon-zoom-in" />
-                        </span>
-                        <span
-                            class="imgItem__icon hide"
-                            @click="handleRemove(detailsFileList, index)"
-                        >
-                            <i class="el-icon-delete" />
-                        </span>
-                    </div>
-                    <p class="file-name">{{ item.fileName }}</p>
-                </div>
-            </div>
-            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
-        </div>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
-                <el-button @click="submitBtn" type="success"> 保存 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-
-    <!-- 费用结算弹框 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettlemoney"
-        :title="settlemoneyTitle"
-        width="65%"
-        align-center
-        :close-on-click-modal="false"
-    >
-        <div style="height: 80px">
-            <div
-                class="info"
-                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
-            >
-                <div
-                    class="item"
-                    style="
-                        width: 30%;
-                        flex-shrink: 0;
-                        margin-bottom: 5px;
-                        font-size: 16px;
-                        margin-left: 40px;
-                    "
-                >
-                    <span>订单编号：10000212135656</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>装备套数：2套</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>退租时间：2024-10-10 10:00:00</span>
-                </div>
-            </div>
-            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
-                <div
-                    class="item"
-                    style="
-                        width: 30%;
-                        flex-shrink: 0;
-                        margin-bottom: 5px;
-                        font-size: 16px;
-                        margin-left: 40px;
-                    "
-                >
-                    <span>结算单位：安徽送变电公司</span>
-                </div>
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>租赁天数：30{{ '/天' }}</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>租赁费用(元)：1800</span>
-                </div>
-            </div>
-            <div class="title">
-                <span class="title-sign"></span>
-                <span class="title-text">退租检测信息</span>
-            </div>
-        </div>
-        <!-- 表格 -->
-        <el-table
-            :data="tableData"
-            class="table"
-            style="margin-left: 50px; width: 1100px"
-            row-key="id"
-            show-overflow-tooltip
-            :header-cell-style="{ background: 'white', color: 'black' }"
-        >
-            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
-            <el-table-column align="center" prop="name1" label="机具名称" />
-            <el-table-column align="center" prop="name2" label="规格型号" />
-            <el-table-column align="center" prop="name3" label="装备编码" />
-            <el-table-column align="center" prop="typeName" label="检验内容">
-                <el-table-column label="外观检验" align="center" prop="jy1" />
-                <el-table-column label="故障检验" align="center" prop="jy2" />
-            </el-table-column>
-            <el-table-column align="center" prop="typeName" label="维修内容">
-                <el-table-column label="外观检验" align="center" prop="jy3" />
-                <el-table-column label="故障检验" align="center" prop="jy4" />
-            </el-table-column>
-            <el-table-column align="center" prop="typeName" label="金额">
-                <el-table-column label="外观检验" align="center" prop="jy5" />
-                <el-table-column label="故障检验" align="center" prop="jy6" />
-            </el-table-column>
-            <el-table-column align="center" prop="typeName" label="附件">
-                <el-table-column label="外观检验" align="center" prop="jy7" />
-                <el-table-column label="故障检验" align="center" prop="jy8" />
-            </el-table-column>
-            <el-table-column align="center" label="备注" prop="remark" width="80px">
-            </el-table-column>
-        </el-table>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">费用结算</span>
-        </div>
-        <div>
-            <span style="color: #ff9900; margin-left: 100px">● </span>
-            <span class="title-text">维修费用</span>
-        </div>
-        <el-form label-width="240" ref="ruleFormRef2" :model="moneyParams1">
-            <div v-for="(item, index) in partItems1" :key="index" class="dynamic-item">
-                <div
-                    style="
-                        margin-top: 10px;
-                        margin-left: 180px;
-                        margin-bottom: 7px;
-                        font-size: 16px;
-                    "
-                >
-                    设备：{{ index + 1 }}
-                </div>
-                <el-row>
-                    <el-form-item label="关联装备" prop="partType">
-                        <el-select
-                            v-model="item.device"
-                            placeholder="请选择"
-                            clearable
-                            style="width: 300px"
-                        >
-                            <el-option label="设备1" value="0"></el-option>
-                            <el-option label="设备2" value="1"></el-option>
-                            <el-option label="设备3" value="2"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="维修数量" prop="partNum">
-                        <el-input
-                            v-model="item.partNum"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-row>
-                <el-row>
-                    <el-form-item label="维修费用" prop="partNum">
-                        <el-input
-                            v-model="item.partNum"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item label="维修类型" prop="isCharge">
-                        <el-select
-                            v-model="item.isCharge"
-                            placeholder="请选择"
-                            filterable
-                            clearable
-                            style="width: 300px"
-                        >
-                            <el-option label="维修类型1" value="0"></el-option>
-                            <el-option label="维修类型2" value="1"></el-option>
-                            <el-option label="维修类型3" value="2"></el-option>
-                        </el-select>
-                    </el-form-item>
-                </el-row>
-                <el-row>
-                    <div style="margin-left: 130px">
-                        <el-button @click="addPartItem1" type="success"> 增加维修设备</el-button>
-                        <el-button @click="removePartItem1(index)" v-if="index != 0" type="danger">
-                            删除维修设备</el-button
-                        >
-                    </div>
-                </el-row>
-            </div>
-        </el-form>
-
-        <div style="margin-top: 10px">
-            <span style="color: #ff9900; margin-left: 100px">● </span>
-            <span class="title-text">报废费用</span>
-        </div>
-        <el-form label-width="240" ref="ruleFormRef3" :model="moneyParams2">
-            <div v-for="(item, index) in partItems2" :key="index" class="dynamic-item">
-                <div
-                    style="
-                        margin-top: 10px;
-                        margin-left: 180px;
-                        margin-bottom: 7px;
-                        font-size: 16px;
-                    "
-                >
-                    设备：{{ index + 1 }}
-                </div>
-                <el-row>
-                    <el-form-item label="关联装备" prop="partType">
-                        <el-select
-                            v-model="item.device"
-                            placeholder="请选择"
-                            clearable
-                            style="width: 300px"
-                        >
-                            <el-option label="设备1" value="0"></el-option>
-                            <el-option label="设备2" value="1"></el-option>
-                            <el-option label="设备3" value="2"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="报废数量" prop="partNum">
-                        <el-input
-                            v-model="item.partNum"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-row>
-                <el-row>
-                    <el-form-item label="报废费用" prop="partNum">
-                        <el-input
-                            v-model="item.partNum"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item label="报废原因" prop="isCharge">
-                        <el-input
-                            v-model="item.isCharg"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-row>
-                <el-row>
-                    <div style="margin-left: 130px">
-                        <el-button @click="addPartItem2" type="success"> 增加报废设备</el-button>
-                        <el-button @click="removePartItem2(index)" v-if="index != 0" type="danger">
-                            删除报废设备</el-button
-                        >
-                    </div>
-                </el-row>
-            </div>
-        </el-form>
-
-        <div style="margin-top: 10px">
-            <span style="color: #ff9900; margin-left: 100px">● </span>
-            <span class="title-text">丢失费用</span>
-        </div>
-        <el-form label-width="240" ref="ruleFormRef4" :model="moneyParams3">
-            <div v-for="(item, index) in partItems3" :key="index" class="dynamic-item">
-                <div
-                    style="
-                        margin-top: 10px;
-                        margin-left: 180px;
-                        margin-bottom: 7px;
-                        font-size: 16px;
-                    "
-                >
-                    设备：{{ index + 1 }}
-                </div>
-                <el-row>
-                    <el-form-item label="关联装备" prop="partType">
-                        <el-select
-                            v-model="item.device"
-                            placeholder="请选择"
-                            clearable
-                            style="width: 300px"
-                        >
-                            <el-option label="设备1" value="0"></el-option>
-                            <el-option label="设备2" value="1"></el-option>
-                            <el-option label="设备3" value="2"></el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="丢失数量" prop="partNum">
-                        <el-input
-                            v-model="item.partNum"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-row>
-                <el-row>
-                    <el-form-item label="丢失费用" prop="partNum">
-                        <el-input
-                            v-model="item.partNum"
-                            placeholder="请输入"
-                            maxlength="20"
-                            style="width: 300px"
-                        >
-                        </el-input>
-                    </el-form-item>
-                </el-row>
-                <el-row>
-                    <div style="margin-left: 130px">
-                        <el-button @click="addPartItem3" type="success"> 增加丢失设备</el-button>
-                        <el-button @click="removePartItem3(index)" v-if="index != 0" type="danger">
-                            删除丢失设备</el-button
-                        >
-                    </div>
-                </el-row>
-            </div>
-        </el-form>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
-                <el-button @click="submitBtn" type="success"> 保存 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-
-    <!-- 费用清单弹框 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettleList"
-        :title="settleListTitle"
-        width="65%"
-        align-center
-        :close-on-click-modal="false"
-    >
-        <div style="height: 80px">
-            <div
-                class="info"
-                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
-            >
-                <div
-                    class="item"
-                    style="
-                        width: 30%;
-                        flex-shrink: 0;
-                        margin-bottom: 5px;
-                        font-size: 16px;
-                        margin-left: 40px;
-                    "
-                >
-                    <span>订单编号：10000212135656</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>装备套数：2套</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>退租时间：2024-10-10 10:00:00</span>
-                </div>
-            </div>
-            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
-                <div
-                    class="item"
-                    style="
-                        width: 30%;
-                        flex-shrink: 0;
-                        margin-bottom: 5px;
-                        font-size: 16px;
-                        margin-left: 40px;
-                    "
-                >
-                    <span>结算单位：安徽送变电公司</span>
-                </div>
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>租赁天数：30{{ '/天' }}</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
-                >
-                    <span>租赁费用(元)：1800</span>
-                </div>
-            </div>
-            <div class="title">
-                <span class="title-sign"></span>
-                <span class="title-text">租赁费用明细</span>
-            </div>
-        </div>
-        <!-- 表格 -->
-        <el-table
-            :data="tableData1"
-            class="table"
-            style="margin-left: 50px; width: 1100px"
-            row-key="id"
-            show-overflow-tooltip
-            :header-cell-style="{ background: 'white', color: 'black' }"
-        >
-            <el-table-column align="center" prop="name1" label="装备名称" />
-            <el-table-column align="center" prop="name2" label="型号" />
-            <el-table-column align="center" prop="name3" label="数量" />
-            <el-table-column label="租赁单价(元/日)" align="center" prop="jy1" />
-            <el-table-column label="租赁天数" align="center" prop="jy2" />
-            <el-table-column label="租期" align="center" prop="jy3" />
-            <el-table-column label="租期费用" align="center" prop="jy4" />
-        </el-table>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">维修费用明细</span>
-        </div>
-        <!-- 表格 -->
-        <el-table
-            :data="tableData2"
-            class="table"
-            style="margin-left: 50px; width: 1100px"
-            row-key="id"
-            show-overflow-tooltip
-            :header-cell-style="{ background: 'white', color: 'black' }"
-        >
-            <el-table-column align="center" prop="name1" label="装备名称" />
-            <el-table-column align="center" prop="name2" label="型号" />
-            <el-table-column align="center" prop="name3" label="维修数量" />
-            <el-table-column label="维修类型" align="center" prop="jy1" />
-            <el-table-column label="维修状态" align="center" prop="jy2" />
-            <el-table-column label="维修费用（元）" align="center" prop="jy3" />
-        </el-table>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">报废费用明细</span>
-        </div>
-        <!-- 表格 -->
-        <el-table
-            :data="tableData3"
-            class="table"
-            style="margin-left: 50px; width: 1100px"
-            row-key="id"
-            show-overflow-tooltip
-            :header-cell-style="{ background: 'white', color: 'black' }"
-        >
-            <el-table-column align="center" prop="name1" label="装备名称" />
-            <el-table-column align="center" prop="name2" label="型号" />
-            <el-table-column align="center" prop="name3" label="报废数量" />
-            <el-table-column label="报废原因" align="center" prop="jy1" />
-            <el-table-column label="报废费用（元）" align="center" prop="jy2" />
-        </el-table>
-        <div class="title">
-            <span class="title-sign"></span>
-            <span class="title-text">丢失费用明细</span>
-        </div>
-        <!-- 表格 -->
-        <el-table
-            :data="tableData4"
-            class="table"
-            style="margin-left: 50px; width: 1100px"
-            row-key="id"
-            show-overflow-tooltip
-            :header-cell-style="{ background: 'white', color: 'black' }"
-        >
-            <el-table-column align="center" prop="name1" label="装备名称" />
-            <el-table-column align="center" prop="name2" label="型号" />
-            <el-table-column align="center" prop="name3" label="丢失数量" />
-            <el-table-column label="报废费用（元）" align="center" prop="jy1" />
-        </el-table>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
-                <el-button @click="submitBtn" type="success"> 保存 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-
-    <!-- 检修详情弹框 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettleRepair"
-        :title="settleRepairTitle"
-        width="65%"
-        :close-on-click-modal="false"
-    >
-        <div style="height: 80px">
-            <div
-                class="info"
-                style="margin-top: 5px; margin-bottom: 1px; display: flex; flex-wrap: wrap"
-            >
-                <div
-                    class="item"
-                    style="
-                        width: 48%;
-                        flex-shrink: 0;
-                        margin-bottom: 1px;
-                        font-size: 16px;
-                        margin-left: 40px;
-                    "
-                >
-                    <span>订单编号：10000212135656</span>
-                </div>
-
-                <div
-                    class="item"
-                    style="width: 48%; flex-shrink: 0; margin-bottom: 1px; font-size: 16px"
-                >
-                    <span>退租时间：2024-10-10 10:00:00</span>
-                </div>
-            </div>
-        </div>
-        <!-- 表格 -->
-        <el-table
-            :data="tableData5"
-            class="table"
-            style="margin-left: 50px; width: 1100px"
-            row-key="id"
-            show-overflow-tooltip
-            :header-cell-style="{ background: 'white', color: 'black' }"
-        >
-            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
-            <el-table-column align="center" prop="name1" label="机具名称" />
-            <el-table-column align="center" prop="name2" label="规格型号" />
-            <el-table-column align="center" prop="name3" label="装备编码" />
-            <el-table-column align="center" prop="typeName" label="检验内容">
-                <el-table-column label="外观检验" align="center" prop="jy1" />
-                <el-table-column label="故障检验" align="center" prop="jy2" />
-            </el-table-column>
-            <el-table-column align="center" prop="typeName" label="维修内容">
-                <el-table-column label="外观检验" align="center" prop="jy3" />
-                <el-table-column label="故障检验" align="center" prop="jy4" />
-            </el-table-column>
-            <el-table-column align="center" prop="typeName" label="金额">
-                <el-table-column label="外观检验" align="center" prop="jy5" />
-                <el-table-column label="故障检验" align="center" prop="jy6" />
-            </el-table-column>
-            <el-table-column align="center" prop="typeName" label="附件">
-                <el-table-column label="外观检验" align="center" prop="jy7" />
-                <el-table-column label="故障检验" align="center" prop="jy8" />
-            </el-table-column>
-            <el-table-column align="center" label="备注" prop="remark" width="80px">
-            </el-table-column>
-        </el-table>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
-                <el-button @click="submitBtn" type="success"> 保存 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-
-    <!-- 租赁协议 -->
-    <el-dialog
-        v-model="dialogFormVisibleSettleWord"
-        :title="settleWordTitle"
-        width="50%"
-        align-center
-        destroy-on-close
-        :close-on-click-modal="false"
-    >
-        <div style="display: flex; justify-content: center">
-            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
-        </div>
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
-                    >关 闭</el-button
-                >
-                <el-button @click="submitBtn" type="success"> 下载 </el-button>
-            </span>
-        </template>
-    </el-dialog>
-</template>
-
 <style lang="scss" scoped>
-.logo {
-    padding: 15px 0;
-    display: flex;
-    margin-left: 80px;
-}
-.title {
-    margin: 10px;
-    margin-left: 20px;
-    display: flex;
-    align-items: center;
-}
-.title-sign {
-    display: inline-block;
-    width: 4px;
-    height: 16px;
-    background: #409eff;
-    margin-left: 45px;
-}
-.title-text {
-    font-weight: 700;
-    margin-left: 10px;
-}
-.uploadBox {
-    margin: 20px 40px;
-}
-.labelBox {
-    width: auto;
-    height: auto;
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-}
-.imgsBox {
-    width: auto;
-    height: auto;
-    display: flex;
-    align-items: center;
-    margin-bottom: 30px;
-    margin-left: 20px;
-
-    .imgItem {
-        width: 160px;
-        height: 160px;
-        margin-right: 40px;
-        border: 1px dashed #bbb;
-        position: relative;
-        .picture-card {
-            width: 160px;
-            height: 160px;
-        }
-        .icon-list {
-            width: 60px;
-            height: 20px;
-            position: absolute;
-            top: 70px;
-            left: 40px;
-            display: flex;
-            align-items: center;
-        }
-        .imgItem__icon {
-            margin: 0 5px;
-        }
-        .file-name {
-            font-size: 10px;
-        }
-    }
-
-    .hide {
-        display: none;
-    }
-    .imgItem:hover .hide {
-        display: block;
-    }
-}
-.tipBox {
-    color: red;
-    font-size: 12px;
-    margin-left: 20px;
-}
-.container {
-    // width: 800px;
-    // margin: 0 auto;
-    // padding: 10px;
-    background: #eeeff6;
-    font-size: 14px;
-
-    .cart-title {
-        margin-top: 10px;
-        padding: 10px 0;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        font-weight: bold;
-        letter-spacing: 1px;
-    }
-
-    .cart-title div:first-child {
-        width: 5px;
-        height: 20px;
-        background-color: #4fabfe;
-    }
-
-    .cart-th {
-        margin: 15px 0;
-        div {
-            text-align: center;
-        }
-    }
-
-    .cart-tbody {
-        background: #fff;
-        padding: 8px 12px;
-        margin-bottom: 6px;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-
-        .cart-user-info {
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-
-            .code,
-            .orderTime {
-                padding: 3px 18px;
-                border: 1px solid #ccc;
-            }
-
-            .czcompanyName {
-                margin-left: 20px;
-                border-right: none;
-            }
-        }
-
-        .cart-listAll {
-            margin: 15px 0;
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-
-            div {
-                text-align: center;
-            }
-            .cart-list {
-                margin: 15px 0;
-                display: flex;
-                align-items: center;
-                font-size: 13px;
-
-                div {
-                    text-align: center;
-                }
-
-                .goods-info {
-                    display: flex;
-                    align-content: center;
-                    border-bottom: 1px solid #00a288;
-
-                    img {
-                        width: 180px;
-                        height: 80px;
-                    }
-
-                    .goods-code {
-                        margin-left: 110px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-
-                        div {
-                            text-align: left;
-                        }
-                    }
-                }
-
-                .lease-date {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
-                    font-size: 12px;
-                }
-            }
-            .lease-date {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                font-size: 12px;
-            }
-
-            .red-font {
-                color: #ff4800;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .cart-tbodyTwo {
-        background: #dcdfe6;
-        padding: 8px 12px;
-        margin: 10px;
-
-        .cart-user-info {
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-
-            .code,
-            .orderTime {
-                padding: 3px 18px;
-                border: 1px solid #ccc;
-            }
-
-            .czcompanyName {
-                margin-left: 20px;
-                border-right: none;
-            }
-        }
-
-        .cart-list {
-            margin: 15px 0;
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-
-            div {
-                text-align: center;
-            }
-
-            .goods-info {
-                display: flex;
-                align-content: center;
-
-                img {
-                    width: 180px;
-                    height: 80px;
-                }
-
-                .goods-code {
-                    margin-left: 110px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-
-                    div {
-                        text-align: left;
-                    }
-                }
-            }
-
-            .lease-date {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                font-size: 12px;
-            }
-
-            .red-font {
-                color: #ff4800;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .protocol-handle {
-        background: #fff;
-        padding: 8px 12px;
-        margin: 10px;
-        font-size: 13px;
-
-        .checkbox-container a {
-            color: #ff4800;
-            text-decoration: underline;
-        }
-    }
-}
-
-:deep .el-form--inline .el-form-item {
-    margin-right: 6px;
-    width: 95%;
-}
-
-.order-title-info {
-    padding: 6px 4px;
-    font-size: 14px;
-    color: #999;
-}
-
-.order-items {
-    border-right: 1px solid #eee;
-}
-
-.order-info {
-    display: flex;
-    padding: 10px 0;
-}
-
-.order-items-info {
+.order-container {
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-right: 1px solid #eee;
-}
-
-.red-font {
-    color: #ff4800;
-    font-weight: bold;
-    margin-top: 10px;
-}
-
-.handle-btn {
-    padding: 0 6px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    .el-button {
-        flex: 1;
-    }
 }
 </style>
diff --git a/src/views/user/orderManagementCz/index_1.vue b/src/views/user/orderManagementCz/index_1.vue
new file mode 100644
index 0000000..13ede3d
--- /dev/null
+++ b/src/views/user/orderManagementCz/index_1.vue
@@ -0,0 +1,2118 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { useRouter } from 'vue-router'
+import { getOrderListApi, passApi, failApi } from 'http/api/usercenter/seekorder'
+import uploadComponent from 'components/uploadComponent/index.vue'
+import previewImg from './previewImg/index.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { FormInstance } from 'element-plus'
+import { useStore } from 'store/user'
+const store = useStore()
+import { mainStore } from 'store/main'
+const store2 = mainStore()
+/* 查询参数 ***
+ ****
+ ***
+ ***
+ */
+const queryParams: any = ref({
+    deviceName: '',
+    orderStatus: '',
+    czcompanyName: '',
+    companyName: '',
+    lowerBound: '',
+    upperBound: '',
+    pageSize: 20,
+    pageNum: 1,
+    startTime: '',
+    endTime: '',
+    flag: true,
+})
+const queryFormRef = ref<FormInstance>()
+const time = ref([])
+const router = useRouter()
+const pageSize = 20
+const pageNumber = 1
+const total: any = ref(0)
+const numberTemp = ref<number>(0)
+const cardList = ref<any>([])
+const status = 0
+const statusList = [
+    { id: '2', name: '待出库' },
+    { id: '3', name: '已出库' },
+    { id: '4', name: '租赁中' },
+    { id: '5', name: '已退租' },
+    { id: '6', name: '已完成' },
+    { id: '7', name: '已驳回' },
+]
+
+/** 查询列表 */
+const getList = async () => {
+    if (time.value.length > 0) {
+        const dateStart = new Date(time.value[0])
+        const dateEnd = new Date(time.value[1])
+        queryParams.value.startTime = dateStart.toLocaleDateString('en-CA')
+        queryParams.value.endTime = dateEnd.toLocaleDateString('en-CA')
+    } else {
+        queryParams.value.startTime = undefined
+        queryParams.value.endTime = undefined
+    }
+    const res: any = await getOrderListApi(queryParams.value)
+    cardList.value = res.rows
+    total.value = res.total
+}
+
+//订单详情
+const handleViewOrder = (index: Number, row: any) => {
+    router.push({
+        name: 'orderManagementInfoBuy',
+        query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.orderId },
+    })
+}
+
+onMounted(() => {
+    getList()
+})
+
+// 查询按钮
+const queryTableList = () => {
+    queryParams.value.pageNum = 1
+    getList()
+}
+
+// 重置
+const resetTableList = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+    time.value = []
+    queryTableList()
+}
+
+// 全选事件
+const onChangeCompany = (e: boolean, index: number, item: any) => {
+    cardList.value[index].detailsList.forEach((item: any) => {
+        if (item.orderStatus == '2') {
+            item.isChecked = e
+        }
+    })
+}
+
+// 单选事件
+const onChangeGoods = (index: number) => {
+    let flag = true
+    for (let item of cardList.value[index].detailsList) {
+        if (item.orderStatus == '2' && item.isChecked != true) {
+            flag = false
+            break
+        }
+    }
+    cardList.value[index].isChecked = flag
+}
+
+// 出库按钮
+const confirmPass = async (index: number) => {
+    ElMessageBox.confirm('是否确定出库？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return passApi({ orderId: cardList.value[index].orderId, orderStatus: 3 })
+            // return removeDeviceApi([row.maId])
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '出库成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+// 驳回按钮
+const confirmFail = async (index: number) => {
+    ElMessageBox.confirm('是否确定取消？', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+        .then(() => {
+            return failApi({ orderId: cardList.value[index].orderId, orderStatus: 7 })
+            // return removeDeviceApi([row.maId])
+        })
+        .then((res) => {
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '取消成功',
+                })
+                numberTemp.value = numberTemp.value + 1
+                getList()
+            }
+        })
+        .catch(() => {})
+}
+
+// 计算是否过期
+const isExpired = (goods: any) => {
+    // 获取当前日期并去掉时间部分
+    const today = new Date()
+    today.setHours(0, 0, 0, 0)
+
+    // 将endtime转为Date对象
+    const endTime = new Date(goods.endTime.replace(/-/g, '/'))
+
+    // 判断endtime是否早于今天
+    return endTime < today
+}
+
+/* 退租按钮 */
+const clickRentingTermination = () => {
+    router.push({ name: 'rentinTermination' })
+    console.log('退租')
+}
+
+/* 确认收货 */
+const clickConfirmReceipt = (row: any) => {
+    console.log('确认收货')
+    router.push({
+        name: 'orderDetails',
+        query: {
+            orderId: row.orderId,
+            confirm: 'true',
+        },
+    })
+}
+
+const settleinTitle = ref('')
+/* 编辑 **********/
+const isEditDisabled = ref(false)
+// 退租检修弹框显示隐藏
+const dialogFormVisibleSettlein: any = ref(false)
+const equipmentDeploymentParams: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+    code: '',
+    brand: '',
+    typeId: '',
+    companyId: '',
+    productionDate: '',
+    dayLeasePrice: '',
+    person: '',
+    personPhone: '',
+    deviceWeight: '',
+})
+
+const mainFileList: any = ref([]) //检测文件1
+const detailsFileList: any = ref([]) //检测文件2
+//图片查看弹窗
+const dialogVisible: any = ref(false)
+const dialogImageUrl = ref('')
+//上传
+const upload: any = ref({
+    // 设置上传的请求头部
+    headers: { Authorization: 'Bearer ' + store2.token },
+    // 上传的地址
+    url: import.meta.env.VITE_API_URL + '/file/upload',
+})
+// 文件上传前处理-上传大小
+const beforeUpload = (file: any) => {
+    if (file.size / 1024 / 1024 > 2) {
+        ElMessage({
+            type: 'error',
+            message: '上传文件大小不能超过2M!',
+        })
+        // this.$message.error({ message: `上传文件大小不能超过2M!`,});
+        return false
+    }
+}
+// 文件上传失败
+const uploadError = () => {
+    ElMessage({
+        type: 'error',
+        message: '上传文件失败!',
+    })
+    // this.$message.error({message: `上传文件失败!`});
+}
+// 文件上传成功处理
+const handleFileSuccess = (response: any) => {
+    if (response.code == 200) {
+        let obj = {
+            // modelId:this.maId,
+            fileName: response.data.name.split('/')[4],
+            fileUrl: response.data.url,
+        }
+        console.log(obj)
+        mainFileList.value.push(obj)
+        ElMessage({
+            type: 'success',
+            message: '上传成功！',
+        })
+        console.log(mainFileList.value)
+    }
+}
+
+// 文件上传成功处理
+const handleFileSuccess2 = (response: any) => {
+    if (response.code == 200) {
+        let obj = {
+            // modelId:this.maId,
+            fileName: response.data.name.split('/')[4],
+            fileUrl: response.data.url,
+        }
+        console.log(obj)
+        detailsFileList.value.push(obj)
+        ElMessage({
+            type: 'success',
+            message: '上传成功！',
+        })
+        console.log(detailsFileList.value)
+    }
+}
+//退租检修
+const handleViewBack = () => {
+    settleinTitle.value = '退租检修'
+    isEditDisabled.value = true
+    equipmentDeploymentParams.value = {
+        /* 企业Id */
+        // ownCo: mainStore().userInfo.companyId,
+        /* 租赁范围 */
+        leaseScope: '',
+        /* 设备所在地 */
+        location: '',
+        /* 省 */
+        provinceId: '',
+        /* 市 */
+        cityId: '',
+        /* 区 */
+        areaId: '',
+        /* 设备所在地 省 */
+        addressEconomize: '',
+        /* 设备所在地 市 */
+        addressProvince: '',
+        /* 设备所在地 区 */
+        addressArea: '',
+        /* 设备类型 */
+        typeId: '',
+        /* 设备类型大类 */
+        deviceType: '',
+        /* 设备类型子类 */
+        deviceTypeSon: '',
+        /* 设备类型小类*/
+        deviceTypeSun: '',
+        /* 设备品牌 */
+        brand: '',
+        /* 设备型号 */
+        modelName: '',
+        /* 出场日期 */
+        productionDate: '',
+        /* 工作小时数 */
+        workingHours: '',
+        /* 整机序列号 */
+        serialNumber: '',
+        /* 月租金 */
+        monthLeasePrice: '',
+        /* 日租金 */
+        dayLeasePrice: '',
+        /* 是否提供机手 */
+        isOperator: '',
+        /* 机手月费用 */
+        jsMonthPrice: '',
+        /* 机手日费用 */
+        jsDayPrice: '',
+        /* 详细说明 */
+        description: '',
+        /* 设备主图片 */
+        picUrl: '',
+        /* 检测信息 ，保险信息*/
+        fileList: [],
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开退组检修弹框
+    dialogFormVisibleSettlein.value = true
+}
+
+const settlemoneyTitle = ref('')
+const moneyParams1: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+const moneyParams2: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+const moneyParams3: any = ref({
+    /* 设备名称 */
+    deviceName: '',
+    deviceTypeList: [],
+    deviceCount: 1,
+    unitName: '',
+})
+const tableData: any = ref([
+    {
+        name1: '测试1',
+        name2: '测试1-1',
+        name3: '测试1-2',
+        jy1: '外观1-1',
+        jy2: '故障1-2',
+        jy3: '外观1-2',
+        jy4: '故障1-2',
+        jy5: '外观1-3',
+        jy6: '故障1-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注1',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '测试2-2',
+        jy1: '外观2-1',
+        jy2: '故障2-2',
+        jy3: '外观2-2',
+        jy4: '故障2-2',
+        jy5: '外观2-3',
+        jy6: '故障2-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注2',
+    },
+])
+
+const partItems1: any = ref([{}])
+const partItems2: any = ref([{}])
+const partItems3: any = ref([{}])
+// 费用结算弹框显示隐藏
+const dialogFormVisibleSettlemoney: any = ref(false)
+//费用结算
+const handleViewMoney = () => {
+    settlemoneyTitle.value = '费用结算'
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    moneyParams2.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    moneyParams3.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开退组检修弹框
+    dialogFormVisibleSettlemoney.value = true
+}
+
+//维修费用
+const addPartItem1 = () => {
+    partItems1.value.push({ partType: '', num: '', isCharge: '' })
+}
+const removePartItem1 = (index: number) => {
+    if (partItems1.value.length > 1) {
+        partItems1.value.splice(index, 1)
+    }
+}
+
+//报废费用
+const addPartItem2 = () => {
+    partItems2.value.push({ partType: '', num: '', isCharge: '' })
+}
+const removePartItem2 = (index: number) => {
+    if (partItems2.value.length > 1) {
+        partItems2.value.splice(index, 1)
+    }
+}
+
+//报废费用 修改
+const addPartItem3 = () => {
+    partItems3.value.push({ partType: '', num: '', isCharge: '' })
+}
+const removePartItem3 = (index: number) => {
+    if (partItems3.value.length > 1) {
+        partItems3.value.splice(index, 1)
+    }
+}
+
+const settleListTitle = ref('')
+// 费用清单弹框显示隐藏
+const dialogFormVisibleSettleList: any = ref(false)
+const tableData1: any = ref([
+    {
+        name1: '测试1',
+        name2: '测试1-1',
+        name3: '3台',
+        jy1: '100',
+        jy2: '31',
+        jy3: '2024-11-25 至2024-12-25',
+        jy4: '1600',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '3台',
+        jy1: '100',
+        jy2: '31',
+        jy3: '2024-11-25 至2024-12-25',
+        jy4: '1600',
+    },
+])
+const tableData2: any = ref([
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '3台',
+        jy1: '类型1',
+        jy2: '维修中',
+        jy3: '1500',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-2',
+        name3: '3台',
+        jy1: '类型2',
+        jy2: '维修中',
+        jy3: '1500',
+    },
+])
+const tableData3: any = ref([
+    {
+        name1: '测试3',
+        name2: '测试3-1',
+        name3: '3台',
+        jy1: '轻度维修',
+        jy2: '1400',
+    },
+    {
+        name1: '测试3',
+        name2: '测试3-2',
+        name3: '3台',
+        jy1: '轻度维修',
+        jy2: '1400',
+    },
+])
+const tableData4: any = ref([
+    {
+        name1: '测试4',
+        name2: '测试4-1',
+        name3: '3台',
+        jy1: '1400',
+    },
+    {
+        name1: '测试4',
+        name2: '测试4-2',
+        name3: '3台',
+        jy1: '1400',
+    },
+])
+//费用清单
+const handleViewList = () => {
+    settleListTitle.value = '费用清单'
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开费用清单弹框
+    dialogFormVisibleSettleList.value = true
+}
+
+const tableData5: any = ref([
+    {
+        name1: '测试1',
+        name2: '测试1-1',
+        name3: '测试1-2',
+        jy1: '外观1-1',
+        jy2: '故障1-2',
+        jy3: '外观1-2',
+        jy4: '故障1-2',
+        jy5: '外观1-3',
+        jy6: '故障1-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注1',
+    },
+    {
+        name1: '测试2',
+        name2: '测试2-1',
+        name3: '测试2-2',
+        jy1: '外观2-1',
+        jy2: '故障2-2',
+        jy3: '外观2-2',
+        jy4: '故障2-2',
+        jy5: '外观2-3',
+        jy6: '故障2-3',
+        jy7: '',
+        jy8: '',
+        remark: '备注2',
+    },
+])
+const settleRepairTitle = ref('')
+// 检修详情弹框显示隐藏
+const dialogFormVisibleSettleRepair: any = ref(false)
+//检修详情
+const handleViewRepair = () => {
+    settleListTitle.value = '检修详情'
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开检修详情弹框
+    dialogFormVisibleSettleRepair.value = true
+}
+
+const settleWordTitle = ref('')
+const dialogFormVisibleSettleWord: any = ref(false)
+//租赁协议
+const handleViewWord = () => {
+    settleWordTitle.value = '租赁协议'
+    console.log(12313131)
+    moneyParams1.value = {
+        /* 设备状态 */
+        maStatus: 15,
+        detectionList: [],
+        insureList: [],
+        picList: [],
+    }
+    // 打开租赁协议弹框
+    dialogFormVisibleSettleWord.value = true
+}
+</script>
+
+<template>
+    <!-- 订单管理 -->
+    <div class="container">
+        <el-form
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            size="default"
+            label-width="0"
+        >
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="deviceName">
+                        <el-input
+                            style="width: 100%"
+                            v-model.trim="queryParams.deviceName"
+                            clearable
+                            placeholder="请输入装备名称"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item prop="orderStatus">
+                        <el-select
+                            v-model="queryParams.orderStatus"
+                            placeholder="请选择订单状态"
+                            style="width: 100%"
+                            clearable
+                        >
+                            <el-option
+                                v-for="item in statusList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item prop="dateRange">
+                        <el-date-picker
+                            v-model="time"
+                            type="daterange"
+                            unlink-panels
+                            range-separator="-"
+                            start-placeholder="开始时间"
+                            end-placeholder="结束时间"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-form-item prop="czcompanyName">
+                        <el-input
+                            v-model.trim="queryParams.czcompanyName"
+                            clearable
+                            maxlength="20"
+                            placeholder="出租单位"
+                            style="width: 100%"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="6">
+                    <el-form-item prop="companyName">
+                        <el-input
+                            v-model.trim="queryParams.companyName"
+                            clearable
+                            maxlength="20"
+                            placeholder="承租单位"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-input
+                        v-model.trim="queryParams.lowerBound"
+                        placeholder="租金/元"
+                        clearable
+                        maxlength="20"
+                        style="width: 45%"
+                    />
+                    <span style="display: inline-block; width: 5%; text-align: center"> - </span>
+                    <el-input
+                        v-model.trim="queryParams.upperBound"
+                        placeholder="租金/元"
+                        clearable
+                        maxlength="20"
+                        style="width: 45%"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item>
+                        <el-button type="primary" class="primary-lease" @click="queryTableList"
+                            >查询</el-button
+                        >
+                        <el-button
+                            type="primary"
+                            class="primary-lease"
+                            @click="resetTableList(queryFormRef)"
+                            >重置</el-button
+                        >
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <template v-if="cardList.length > 0">
+            <div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
+                <el-row class="order-title-info">
+                    <el-col :span="8">
+                        <span> 订单编号： </span>
+                        <span>
+                            {{ item.code }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 下单时间： </span>
+                        <span>
+                            {{ item.orderTime }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 装备所属公司： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+                <el-row
+                    style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
+                    class="order-title-info"
+                >
+                    <el-col :span="8">
+                        <span> 出租方联系电话： </span>
+                        <span>
+                            {{ item.personPhone }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方联系电话： </span>
+                        <span>
+                            {{ item.phoneNumber }}
+                        </span>
+                    </el-col>
+                    <el-col :span="8">
+                        <span> 承租方地址： </span>
+                        <span>
+                            {{ item.czcompanyName }}
+                        </span>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+                    <el-col :span="8">
+                        <div
+                            v-for="(goods, j) in item.detailsList"
+                            :key="j"
+                            class="order-items order-info"
+                            :style="
+                                j != item.detailsList.length - 1
+                                    ? 'border-bottom:1px solid #eee'
+                                    : ''
+                            "
+                        >
+                            <img :src="goods.url" style="width: 160px; height: 120px" alt="" />
+                            <div
+                                style="
+                                    flex: 1;
+                                    display: flex;
+                                    justify-content: space-around;
+                                    flex-direction: column;
+                                    padding-left: 12px;
+                                "
+                            >
+                                <el-row style="color: #169bd5; font-weight: bold">
+                                    {{ goods.deviceName }}
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租期 </el-col>
+                                    <el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
+                                </el-row>
+                                <el-row>
+                                    <el-col :span="4"> 租金 </el-col>
+                                    <el-col :span="8">
+                                        {{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
+                                    </el-col>
+                                    <el-col :span="4"> 数量 </el-col>
+                                    <el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
+                                </el-row>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div>总费用</div>
+                        <div class="red-font">{{ item.cost }} 元</div>
+                    </el-col>
+                    <el-col :span="4" class="order-items-info">
+                        <div>租期</div>
+                        <div style="font-weight: bold; margin-top: 10px">
+                            {{ item.startTime }}至{{ item.endTime }}
+                        </div>
+                    </el-col>
+                    <el-col :span="3" class="order-items-info">
+                        <div
+                            v-if="item.orderStatus == '2'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: blue;
+                            "
+                        >
+                            {{ '待出库' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '3'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c76f60;
+                            "
+                        >
+                            {{ '待收货' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                            <span style="color: red">(已过期)</span>
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '4' && !isExpired(item)"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #008d06;
+                            "
+                        >
+                            {{ '租赁中' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '5'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #5b33cc;
+                            "
+                        >
+                            {{ '已退租' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '6'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #c00017;
+                            "
+                        >
+                            {{ '已完成' }}
+                        </div>
+                        <div
+                            v-if="item.orderStatus == '7'"
+                            style="
+                                font-size: 14px;
+                                font-weight: bold;
+                                margin-bottom: 10px;
+                                color: #797979;
+                            "
+                        >
+                            {{ '已驳回' }}
+                        </div>
+                    </el-col>
+                    <el-col :span="6" class="handle-btn">
+                        <el-button
+                            v-if="item.orderStatus == '2'"
+                            type="primary"
+                            size="small"
+                            @click="confirmPass(index)"
+                            >出库</el-button
+                        >
+                        <el-button
+                            v-if="item.orderStatus == '2'"
+                            type="primary"
+                            size="small"
+                            @click="confirmFail(index)"
+                            >取消</el-button
+                        >
+
+                        <el-button @click="handleViewOrder(j, item)" type="primary" size="small">
+                            订单详情
+                        </el-button>
+                        <el-button @click="handleViewWord(j)" type="primary" size="small">
+                            租赁协议
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '5'"
+                            @click="handleViewBack(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            退租检修
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '5'"
+                            @click="handleViewMoney(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用结算
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '6'"
+                            @click="handleViewRepair(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            检修详情
+                        </el-button>
+                        <el-button
+                            v-if="item.orderStatus == '6'"
+                            @click="handleViewList(j)"
+                            type="primary"
+                            size="small"
+                        >
+                            费用清单
+                        </el-button>
+                    </el-col>
+                </el-row>
+            </div>
+        </template>
+
+        <el-empty v-else />
+        <PagingComponent
+            v-if="total > 0"
+            @getList="getList"
+            v-model:pageSize="queryParams.pageSize"
+            v-model:currentPage="queryParams.pageNumber"
+            :total="total"
+        />
+    </div>
+    <!-- 退租检修弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettlein"
+        :title="settleinTitle"
+        width="60%"
+        align-center
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div
+                class="item"
+                style="
+                    width: 30%;
+                    flex-shrink: 0;
+                    margin-bottom: 12px;
+                    font-size: 16px;
+                    margin-left: 80px;
+                "
+            >
+                <span>装备名称：挖掘机</span>
+            </div>
+
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 80px;
+                    "
+                >
+                    <span>装备编码：10000212135656</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>型号：ZJO9777466</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>数量：3</span>
+                </div>
+            </div>
+        </div>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">外观检测</span>
+        </div>
+        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
+            <el-row>
+                <el-form-item label="是否合格：" prop="pass">
+                    <el-select
+                        v-model="equipmentDeploymentParams.pass"
+                        placeholder="请选择是否合格"
+                        clearable
+                        style="width: 350px"
+                    >
+                        <el-option label="是" value="0"></el-option>
+                        <el-option label="否" value="1"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="费用：" prop="fy">
+                    <el-input
+                        v-model="equipmentDeploymentParams.fy"
+                        placeholder="请输入设备数量"
+                        clearable
+                        maxlength="20"
+                        style="width: 350px"
+                    />
+                </el-form-item>
+            </el-row>
+            <el-row>
+                <el-form-item label="备注：" prop="remark1">
+                    <el-input
+                        placeholder="请输入"
+                        autocomplete="off"
+                        style="width: 860px"
+                        maxlength="50"
+                        v-model="equipmentDeploymentParams.remark1"
+                        clearable
+                    />
+                </el-form-item>
+            </el-row>
+        </el-form>
+        <div class="uploadBox">
+            <div class="labelBox">
+                <div style="margin-left: 40px">
+                    <span style="font-size: 14px">检验文件: </span>
+                </div>
+                <div style="margin-left: 20px">
+                    <el-upload
+                        ref="upload"
+                        :limit="6"
+                        :headers="upload.headers"
+                        :action="upload.url"
+                        :show-file-list="false"
+                        accept=".png, .jpg, .jpeg"
+                        :on-success="handleFileSuccess"
+                        :auto-upload="true"
+                        :before-upload="beforeUpload"
+                        :on-error="uploadError"
+                    >
+                        <el-button icon="el-icon-folder-add">上传文件</el-button>
+                    </el-upload>
+                </div>
+                <div style="color: #999; font-size: 12px; margin-left: 20px">
+                    支持格式：.jpg .png，单个文件大小不能超过2M
+                </div>
+            </div>
+            <div class="imgsBox">
+                <div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
+                    <img class="picture-card" :src="item.fileUrl" alt="" />
+                    <div class="icon-list">
+                        <span class="imgItem__icon hide" @click="handleDownload(item)">
+                            <i class="el-icon-download" />
+                        </span>
+                        <span class="imgItem__icon hide" @click="picturePreview(item)">
+                            <i class="el-icon-zoom-in" />
+                        </span>
+                        <span class="imgItem__icon hide" @click="handleRemove(mainFileList, index)">
+                            <i class="el-icon-delete" />
+                        </span>
+                    </div>
+                    <p class="file-name">{{ item.fileName }}</p>
+                </div>
+            </div>
+            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
+        </div>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">维修内容</span>
+        </div>
+        <el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
+            <el-row>
+                <el-form-item label="是否合格：" prop="pass2">
+                    <el-select
+                        v-model="equipmentDeploymentParams.pass2"
+                        placeholder="请选择是否合格"
+                        clearable
+                        style="width: 350px"
+                    >
+                        <el-option label="是" value="0"></el-option>
+                        <el-option label="否" value="1"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="费用：" prop="fy2">
+                    <el-input
+                        v-model="equipmentDeploymentParams.fy2"
+                        placeholder="请输入设备数量"
+                        clearable
+                        maxlength="20"
+                        style="width: 350px"
+                    />
+                </el-form-item>
+            </el-row>
+            <el-row>
+                <el-form-item label="备注：" prop="remark2">
+                    <el-input
+                        placeholder="请输入"
+                        autocomplete="off"
+                        style="width: 860px"
+                        maxlength="50"
+                        v-model="equipmentDeploymentParams.remark2"
+                        clearable
+                    />
+                </el-form-item>
+            </el-row>
+        </el-form>
+        <div class="uploadBox">
+            <div class="labelBox">
+                <div style="margin-left: 40px">
+                    <span style="font-size: 14px">检验文件: </span>
+                </div>
+                <div style="margin-left: 20px">
+                    <el-upload
+                        ref="upload2"
+                        :limit="6"
+                        :headers="upload.headers"
+                        :action="upload.url"
+                        :show-file-list="false"
+                        accept=".png, .jpg, .jpeg"
+                        :on-success="handleFileSuccess2"
+                        :auto-upload="true"
+                        :before-upload="beforeUpload"
+                        :on-error="uploadError"
+                    >
+                        <el-button icon="el-icon-folder-add">上传文件</el-button>
+                    </el-upload>
+                </div>
+                <div style="color: #999; font-size: 12px; margin-left: 20px">
+                    支持格式：.jpg .png，单个文件大小不能超过2M
+                </div>
+            </div>
+            <div class="imgsBox">
+                <div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
+                    <img class="picture-card" :src="item.fileUrl" alt="" />
+                    <div class="icon-list">
+                        <span class="imgItem__icon hide" @click="handleDownload(item)">
+                            <i class="el-icon-download" />
+                        </span>
+                        <span class="imgItem__icon hide" @click="picturePreview(item)">
+                            <i class="el-icon-zoom-in" />
+                        </span>
+                        <span
+                            class="imgItem__icon hide"
+                            @click="handleRemove(detailsFileList, index)"
+                        >
+                            <i class="el-icon-delete" />
+                        </span>
+                    </div>
+                    <p class="file-name">{{ item.fileName }}</p>
+                </div>
+            </div>
+            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 费用结算弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettlemoney"
+        :title="settlemoneyTitle"
+        width="65%"
+        align-center
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>结算单位：安徽送变电公司</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁天数：30{{ '/天' }}</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁费用(元)：1800</span>
+                </div>
+            </div>
+            <div class="title">
+                <span class="title-sign"></span>
+                <span class="title-text">退租检测信息</span>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
+            <el-table-column align="center" prop="name1" label="机具名称" />
+            <el-table-column align="center" prop="name2" label="规格型号" />
+            <el-table-column align="center" prop="name3" label="装备编码" />
+            <el-table-column align="center" prop="typeName" label="检验内容">
+                <el-table-column label="外观检验" align="center" prop="jy1" />
+                <el-table-column label="故障检验" align="center" prop="jy2" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="维修内容">
+                <el-table-column label="外观检验" align="center" prop="jy3" />
+                <el-table-column label="故障检验" align="center" prop="jy4" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="金额">
+                <el-table-column label="外观检验" align="center" prop="jy5" />
+                <el-table-column label="故障检验" align="center" prop="jy6" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="附件">
+                <el-table-column label="外观检验" align="center" prop="jy7" />
+                <el-table-column label="故障检验" align="center" prop="jy8" />
+            </el-table-column>
+            <el-table-column align="center" label="备注" prop="remark" width="80px">
+            </el-table-column>
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">费用结算</span>
+        </div>
+        <div>
+            <span style="color: #ff9900; margin-left: 100px">● </span>
+            <span class="title-text">维修费用</span>
+        </div>
+        <el-form label-width="240" ref="ruleFormRef2" :model="moneyParams1">
+            <div v-for="(item, index) in partItems1" :key="index" class="dynamic-item">
+                <div
+                    style="
+                        margin-top: 10px;
+                        margin-left: 180px;
+                        margin-bottom: 7px;
+                        font-size: 16px;
+                    "
+                >
+                    设备：{{ index + 1 }}
+                </div>
+                <el-row>
+                    <el-form-item label="关联装备" prop="partType">
+                        <el-select
+                            v-model="item.device"
+                            placeholder="请选择"
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="设备1" value="0"></el-option>
+                            <el-option label="设备2" value="1"></el-option>
+                            <el-option label="设备3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="维修数量" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="维修费用" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="维修类型" prop="isCharge">
+                        <el-select
+                            v-model="item.isCharge"
+                            placeholder="请选择"
+                            filterable
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="维修类型1" value="0"></el-option>
+                            <el-option label="维修类型2" value="1"></el-option>
+                            <el-option label="维修类型3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div style="margin-left: 130px">
+                        <el-button @click="addPartItem1" type="success"> 增加维修设备</el-button>
+                        <el-button @click="removePartItem1(index)" v-if="index != 0" type="danger">
+                            删除维修设备</el-button
+                        >
+                    </div>
+                </el-row>
+            </div>
+        </el-form>
+
+        <div style="margin-top: 10px">
+            <span style="color: #ff9900; margin-left: 100px">● </span>
+            <span class="title-text">报废费用</span>
+        </div>
+        <el-form label-width="240" ref="ruleFormRef3" :model="moneyParams2">
+            <div v-for="(item, index) in partItems2" :key="index" class="dynamic-item">
+                <div
+                    style="
+                        margin-top: 10px;
+                        margin-left: 180px;
+                        margin-bottom: 7px;
+                        font-size: 16px;
+                    "
+                >
+                    设备：{{ index + 1 }}
+                </div>
+                <el-row>
+                    <el-form-item label="关联装备" prop="partType">
+                        <el-select
+                            v-model="item.device"
+                            placeholder="请选择"
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="设备1" value="0"></el-option>
+                            <el-option label="设备2" value="1"></el-option>
+                            <el-option label="设备3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="报废数量" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="报废费用" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="报废原因" prop="isCharge">
+                        <el-input
+                            v-model="item.isCharg"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div style="margin-left: 130px">
+                        <el-button @click="addPartItem2" type="success"> 增加报废设备</el-button>
+                        <el-button @click="removePartItem2(index)" v-if="index != 0" type="danger">
+                            删除报废设备</el-button
+                        >
+                    </div>
+                </el-row>
+            </div>
+        </el-form>
+
+        <div style="margin-top: 10px">
+            <span style="color: #ff9900; margin-left: 100px">● </span>
+            <span class="title-text">丢失费用</span>
+        </div>
+        <el-form label-width="240" ref="ruleFormRef4" :model="moneyParams3">
+            <div v-for="(item, index) in partItems3" :key="index" class="dynamic-item">
+                <div
+                    style="
+                        margin-top: 10px;
+                        margin-left: 180px;
+                        margin-bottom: 7px;
+                        font-size: 16px;
+                    "
+                >
+                    设备：{{ index + 1 }}
+                </div>
+                <el-row>
+                    <el-form-item label="关联装备" prop="partType">
+                        <el-select
+                            v-model="item.device"
+                            placeholder="请选择"
+                            clearable
+                            style="width: 300px"
+                        >
+                            <el-option label="设备1" value="0"></el-option>
+                            <el-option label="设备2" value="1"></el-option>
+                            <el-option label="设备3" value="2"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="丢失数量" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <el-form-item label="丢失费用" prop="partNum">
+                        <el-input
+                            v-model="item.partNum"
+                            placeholder="请输入"
+                            maxlength="20"
+                            style="width: 300px"
+                        >
+                        </el-input>
+                    </el-form-item>
+                </el-row>
+                <el-row>
+                    <div style="margin-left: 130px">
+                        <el-button @click="addPartItem3" type="success"> 增加丢失设备</el-button>
+                        <el-button @click="removePartItem3(index)" v-if="index != 0" type="danger">
+                            删除丢失设备</el-button
+                        >
+                    </div>
+                </el-row>
+            </div>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 费用清单弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleList"
+        :title="settleListTitle"
+        width="65%"
+        align-center
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>装备套数：2套</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+            <div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
+                <div
+                    class="item"
+                    style="
+                        width: 30%;
+                        flex-shrink: 0;
+                        margin-bottom: 5px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>结算单位：安徽送变电公司</span>
+                </div>
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁天数：30{{ '/天' }}</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
+                >
+                    <span>租赁费用(元)：1800</span>
+                </div>
+            </div>
+            <div class="title">
+                <span class="title-sign"></span>
+                <span class="title-text">租赁费用明细</span>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData1"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="数量" />
+            <el-table-column label="租赁单价(元/日)" align="center" prop="jy1" />
+            <el-table-column label="租赁天数" align="center" prop="jy2" />
+            <el-table-column label="租期" align="center" prop="jy3" />
+            <el-table-column label="租期费用" align="center" prop="jy4" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">维修费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData2"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="维修数量" />
+            <el-table-column label="维修类型" align="center" prop="jy1" />
+            <el-table-column label="维修状态" align="center" prop="jy2" />
+            <el-table-column label="维修费用（元）" align="center" prop="jy3" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">报废费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData3"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="报废数量" />
+            <el-table-column label="报废原因" align="center" prop="jy1" />
+            <el-table-column label="报废费用（元）" align="center" prop="jy2" />
+        </el-table>
+        <div class="title">
+            <span class="title-sign"></span>
+            <span class="title-text">丢失费用明细</span>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData4"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column align="center" prop="name1" label="装备名称" />
+            <el-table-column align="center" prop="name2" label="型号" />
+            <el-table-column align="center" prop="name3" label="丢失数量" />
+            <el-table-column label="报废费用（元）" align="center" prop="jy1" />
+        </el-table>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 检修详情弹框 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleRepair"
+        :title="settleRepairTitle"
+        width="65%"
+        :close-on-click-modal="false"
+    >
+        <div style="height: 80px">
+            <div
+                class="info"
+                style="margin-top: 5px; margin-bottom: 1px; display: flex; flex-wrap: wrap"
+            >
+                <div
+                    class="item"
+                    style="
+                        width: 48%;
+                        flex-shrink: 0;
+                        margin-bottom: 1px;
+                        font-size: 16px;
+                        margin-left: 40px;
+                    "
+                >
+                    <span>订单编号：10000212135656</span>
+                </div>
+
+                <div
+                    class="item"
+                    style="width: 48%; flex-shrink: 0; margin-bottom: 1px; font-size: 16px"
+                >
+                    <span>退租时间：2024-10-10 10:00:00</span>
+                </div>
+            </div>
+        </div>
+        <!-- 表格 -->
+        <el-table
+            :data="tableData5"
+            class="table"
+            style="margin-left: 50px; width: 1100px"
+            row-key="id"
+            show-overflow-tooltip
+            :header-cell-style="{ background: 'white', color: 'black' }"
+        >
+            <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
+            <el-table-column align="center" prop="name1" label="机具名称" />
+            <el-table-column align="center" prop="name2" label="规格型号" />
+            <el-table-column align="center" prop="name3" label="装备编码" />
+            <el-table-column align="center" prop="typeName" label="检验内容">
+                <el-table-column label="外观检验" align="center" prop="jy1" />
+                <el-table-column label="故障检验" align="center" prop="jy2" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="维修内容">
+                <el-table-column label="外观检验" align="center" prop="jy3" />
+                <el-table-column label="故障检验" align="center" prop="jy4" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="金额">
+                <el-table-column label="外观检验" align="center" prop="jy5" />
+                <el-table-column label="故障检验" align="center" prop="jy6" />
+            </el-table-column>
+            <el-table-column align="center" prop="typeName" label="附件">
+                <el-table-column label="外观检验" align="center" prop="jy7" />
+                <el-table-column label="故障检验" align="center" prop="jy8" />
+            </el-table-column>
+            <el-table-column align="center" label="备注" prop="remark" width="80px">
+            </el-table-column>
+        </el-table>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
+                <el-button @click="submitBtn" type="success"> 保存 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+
+    <!-- 租赁协议 -->
+    <el-dialog
+        v-model="dialogFormVisibleSettleWord"
+        :title="settleWordTitle"
+        width="50%"
+        align-center
+        destroy-on-close
+        :close-on-click-modal="false"
+    >
+        <div style="display: flex; justify-content: center">
+            <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" />
+        </div>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button type="primary" @click="dialogFormVisibleSettleWord = false"
+                    >关 闭</el-button
+                >
+                <el-button @click="submitBtn" type="success"> 下载 </el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.logo {
+    padding: 15px 0;
+    display: flex;
+    margin-left: 80px;
+}
+.title {
+    margin: 10px;
+    margin-left: 20px;
+    display: flex;
+    align-items: center;
+}
+.title-sign {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: #409eff;
+    margin-left: 45px;
+}
+.title-text {
+    font-weight: 700;
+    margin-left: 10px;
+}
+.uploadBox {
+    margin: 20px 40px;
+}
+.labelBox {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.imgsBox {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    margin-left: 20px;
+
+    .imgItem {
+        width: 160px;
+        height: 160px;
+        margin-right: 40px;
+        border: 1px dashed #bbb;
+        position: relative;
+        .picture-card {
+            width: 160px;
+            height: 160px;
+        }
+        .icon-list {
+            width: 60px;
+            height: 20px;
+            position: absolute;
+            top: 70px;
+            left: 40px;
+            display: flex;
+            align-items: center;
+        }
+        .imgItem__icon {
+            margin: 0 5px;
+        }
+        .file-name {
+            font-size: 10px;
+        }
+    }
+
+    .hide {
+        display: none;
+    }
+    .imgItem:hover .hide {
+        display: block;
+    }
+}
+.tipBox {
+    color: red;
+    font-size: 12px;
+    margin-left: 20px;
+}
+.container {
+    // width: 800px;
+    // margin: 0 auto;
+    // padding: 10px;
+    background: #eeeff6;
+    font-size: 14px;
+
+    .cart-title {
+        margin-top: 10px;
+        padding: 10px 0;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+
+    .cart-title div:first-child {
+        width: 5px;
+        height: 20px;
+        background-color: #4fabfe;
+    }
+
+    .cart-th {
+        margin: 15px 0;
+        div {
+            text-align: center;
+        }
+    }
+
+    .cart-tbody {
+        background: #fff;
+        padding: 8px 12px;
+        margin-bottom: 6px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .code,
+            .orderTime {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .czcompanyName {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-listAll {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            div {
+                text-align: center;
+            }
+            .cart-list {
+                margin: 15px 0;
+                display: flex;
+                align-items: center;
+                font-size: 13px;
+
+                div {
+                    text-align: center;
+                }
+
+                .goods-info {
+                    display: flex;
+                    align-content: center;
+                    border-bottom: 1px solid #00a288;
+
+                    img {
+                        width: 180px;
+                        height: 80px;
+                    }
+
+                    .goods-code {
+                        margin-left: 110px;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+
+                        div {
+                            text-align: left;
+                        }
+                    }
+                }
+
+                .lease-date {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 12px;
+                }
+            }
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .cart-tbodyTwo {
+        background: #dcdfe6;
+        padding: 8px 12px;
+        margin: 10px;
+
+        .cart-user-info {
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            .code,
+            .orderTime {
+                padding: 3px 18px;
+                border: 1px solid #ccc;
+            }
+
+            .czcompanyName {
+                margin-left: 20px;
+                border-right: none;
+            }
+        }
+
+        .cart-list {
+            margin: 15px 0;
+            display: flex;
+            align-items: center;
+            font-size: 13px;
+
+            div {
+                text-align: center;
+            }
+
+            .goods-info {
+                display: flex;
+                align-content: center;
+
+                img {
+                    width: 180px;
+                    height: 80px;
+                }
+
+                .goods-code {
+                    margin-left: 110px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+
+                    div {
+                        text-align: left;
+                    }
+                }
+            }
+
+            .lease-date {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                font-size: 12px;
+            }
+
+            .red-font {
+                color: #ff4800;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .protocol-handle {
+        background: #fff;
+        padding: 8px 12px;
+        margin: 10px;
+        font-size: 13px;
+
+        .checkbox-container a {
+            color: #ff4800;
+            text-decoration: underline;
+        }
+    }
+}
+
+:deep .el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
+}
+
+.order-title-info {
+    padding: 6px 4px;
+    font-size: 14px;
+    color: #999;
+}
+
+.order-items {
+    border-right: 1px solid #eee;
+}
+
+.order-info {
+    display: flex;
+    padding: 10px 0;
+}
+
+.order-items-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid #eee;
+}
+
+.red-font {
+    color: #ff4800;
+    font-weight: bold;
+    margin-top: 10px;
+}
+
+.handle-btn {
+    padding: 0 6px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    .el-button {
+        flex: 1;
+    }
+}
+</style>