大屏二级页面bug修复

src/router/index.ts

@@ -238,9 +238,9 @@ const routes: Array<RouteRecordRaw> = [
         },
     },
     {
-        path: '/detail-list-f',
-        name: 'detail-list-f',
-        component: () => import('views/big-screen/model-components/detailList-sy.vue'),
+        path: '/detail-list-new',
+        name: 'detail-list-new',
+        component: () => import('views/big-screen/model-components/details-new.vue'),
         meta: {
             title: '数据大屏',
             keepAlive: true,

src/views/big-screen/index.vue

@@ -5,7 +5,7 @@
         <!-- <div class="screen-title">智联装备云控平台</div> -->
 
         <div class="header">
-            <img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back">
+            <img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
         </div>
         <dv-full-screen-container class="dashboard">
             <div class="box">

src/views/big-screen/model-components/center-model.vue

@@ -255,27 +255,27 @@ const handleDetail = (type: any) => {
     if (type == 1) {
         params.title = '入驻装备数'
         params.type = 1
-        path = '/detail-list-f'
+        path = '/detail-list-new'
     } else if (type == 2) {
         params.title = '上架装备数'
         params.type = 2
-        path = '/detail-list-f'
+        path = '/detail-list-new'
     } else if (type == 3) {
         params.title = '装备总类型数'
         params.type = 3
-        path = '/detail-list-f'
+        path = '/detail-list-new'
     } else if (type == 4) {
         params.title = '保养告警'
         params.type = 4
-        path = '/detail-list-f'
+        path = '/detail-list-new'
     } else if (type == 5) {
         params.title = '在租赁种类'
         params.type = 5
-        path = '/detail-list-f'
+        path = '/detail-list-new'
     } else if (type == 6) {
         params.title = '在租装备数'
         params.type = 6
-        path = '/detail-list-f'
+        path = '/detail-list-new'
     } else if (type == 7) {
         params.title = '退租装备数'
         params.type = 7

src/views/big-screen/model-components/detailList-model.vue

@@ -0,0 +1,317 @@
+<template>
+    <div class="screen-container-new">
+        <div class="screen-title">安徽机械化装备共享平台</div>
+        <div class="header">
+            <img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
+        </div>
+
+        <div class="content">
+            <div class="title">{{ title }}</div>
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column
+                    label="序号"
+                    type="index"
+                    width="90"
+                    align="center"
+                    :index="indexContinuation"
+                />
+                <el-table-column
+                    v-for="(item, index) in columnList"
+                    :key="index"
+                    :label="item.label"
+                    :prop="item.prop"
+                    align="center"
+                    show-overflow-tooltip
+                >
+                    <template v-if="!item.prop == 'maStatus'" #default="{ row }">
+                        {{ row[item.prop] }}
+                    </template>
+                    <template v-else #default="{ row }">
+                        <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
+                        <el-tag v-if="row.maStatus == 1" size="small" type="warning">待上架</el-tag>
+                        <el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
+                        <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <PagingComponent
+                @getListChange="getList"
+                v-model:pageSize="queryParams.pageSize"
+                v-model:currentPage="queryParams.pageNum"
+                :total="total"
+                style="margin-top: 20px"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+
+import {
+    getDevNumApi,
+    getDevUpNumApi,
+    getDevTypeNumApi,
+    getDevQcWarningNumApi,
+    getMaTypeLeasingNumApi,
+    getDevLeasingNumApi,
+} from '@/http/api/screen-f/index.ts'
+
+const router = useRouter()
+console.log('🚀 ~ router:', router.currentRoute.value.query)
+
+const currentType = ref(router.currentRoute.value.query.type)
+const title = ref(router.currentRoute.value.query.title)
+const SEND_API = ref(null)
+const columnList = ref([])
+// const columns1 = ref([
+//     { label: '机具类型', prop: 'typeName' },
+//     { label: '机具名称', prop: 'deviceName' },
+//     { label: '规格型号', prop: 'modelName' },
+//     { label: '唯一标识符', prop: 'identifyCode' },
+//     { label: '装备状态', prop: 'maStatus', slot_c: true },
+//     { label: '上架时间', prop: 'createTime' },
+//     { label: '所属公司', prop: 'comName' },
+// ])
+// const columns2 = ref([
+//     { label: '机具类型', prop: 'typeName' },
+//     { label: '机具名称', prop: 'deviceName' },
+//     { label: '规格型号', prop: 'modelName' },
+//     { label: '数量', prop: 'deviceCount' },
+// ])
+// const columns3 = ref([
+//     { label: '机具类型', prop: 'typeName' },
+//     { label: '机具名称', prop: 'deviceName' },
+//     { label: '规格型号', prop: 'modelName' },
+//     { label: '唯一标识符', prop: 'identifyCode' },
+//     // { label: '报警类型', prop: 'identifyCode' },
+//     { label: '告警时间', prop: 'createTime' },
+// ])
+// const columns4 = ref([
+//     { label: '机具名称', prop: 'deviceName' },
+//     { label: '规格型号', prop: 'modelName' },
+//     { label: '租赁单价', prop: 'dayLeasePrice' },
+//     { label: '租赁次数', prop: 'rentNum' },
+// ])
+// const columns5 = ref([
+//     { label: '机具名称', prop: 'deviceName' },
+//     { label: '规格型号', prop: 'modelName' },
+//     { label: '唯一标识符', prop: 'identifyCode' },
+//     { label: '订单号', prop: 'orderId' },
+//     { label: '出租方', prop: 'comName' },
+//     { label: '出租方联系人', prop: 'person' },
+//     { label: '承租方', prop: 'lessee' },
+//     { label: '承租方联系人', prop: 'lesseePerson' },
+//     { label: '订单开始时间', prop: 'startTime' },
+//     { label: '订单结束时间', prop: 'endTime' },
+//     { label: '租赁金额', prop: 'cost' },
+// ])
+
+const total = ref(0)
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+})
+
+const tableData = ref([])
+
+const indexContinuation = (index) => {
+    return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
+}
+
+if (currentType.value == 1) {
+    SEND_API.value = getDevNumApi
+    columnList.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        { label: '装备状态', prop: 'maStatus' },
+        { label: '上架时间', prop: 'createTime' },
+        { label: '所属公司', prop: 'comName' },
+    ]
+} else if (currentType.value == 2) {
+    SEND_API.value = getDevUpNumApi
+    columnList.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        { label: '装备状态', prop: 'maStatus' },
+        { label: '上架时间', prop: 'createTime' },
+        { label: '所属公司', prop: 'comName' },
+    ]
+} else if (currentType.value == 3) {
+    SEND_API.value = getDevTypeNumApi
+    columnList.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '数量', prop: 'deviceCount' },
+    ]
+} else if (currentType.value == 4) {
+    SEND_API.value = getDevQcWarningNumApi
+    columnList.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        // { label: '报警类型', prop: 'identifyCode' },
+        { label: '告警时间', prop: 'createTime' },
+    ]
+} else if (currentType.value == 5) {
+    SEND_API.value = getMaTypeLeasingNumApi
+    columnList.value = [
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '租赁单价', prop: 'dayLeasePrice' },
+        { label: '租赁次数', prop: 'rentNum' },
+    ]
+} else {
+    SEND_API.value = getDevLeasingNumApi
+    columnList.value = [
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        { label: '订单号', prop: 'orderId' },
+        { label: '出租方', prop: 'comName' },
+        { label: '出租方联系人', prop: 'person' },
+        { label: '承租方', prop: 'lessee' },
+        { label: '承租方联系人', prop: 'lesseePerson' },
+        { label: '订单开始时间', prop: 'startTime' },
+        { label: '订单结束时间', prop: 'endTime' },
+        { label: '租赁金额', prop: 'cost' },
+    ]
+}
+
+// switch (currentType.value) {
+//     case '1':
+//         SEND_API.value = getDevNumApi
+//         column.value = [...columns1.value]
+//         break
+//     case '2':
+//         SEND_API.value = getDevUpNumApi
+//         column.value = [...columns1.value]
+//         break
+//     case '3':
+//         SEND_API.value = getDevTypeNumApi
+//         column.value = [...columns2.value]
+//         break
+//     case '4':
+//         SEND_API.value = getDevQcWarningNumApi
+//         column.value = [...columns3.value]
+//         break
+//     case '5':
+//         SEND_API.value = getMaTypeLeasingNumApi
+//         column.value = [...columns4.value]
+//         break
+//     case '6':
+//         SEND_API.value = getDevLeasingNumApi
+//         column.value = [...columns5.value]
+//         break
+// }
+
+const getList = async () => {
+    const res = await SEND_API.value(queryParams.value)
+    if (res.code === 200) {
+        tableData.value = res.data.rows
+        total.value = res.data.total
+    }
+    console.log(res, '9996')
+}
+
+const back = () => {
+    console.log('back')
+    router.push({
+        path: '/big-screen',
+    })
+}
+
+// console.log(column.value, '  column.value')
+
+onMounted(() => {
+    console.log(currentType.value, 'currentType.value')
+    getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.screen-container-new {
+    width: 100vw;
+    height: 100vh;
+    background: url('@/assets/img/screen/bg-2.png') no-repeat;
+    background-size: 100% 100%;
+    font-size: 16px;
+    position: relative;
+    color: #eee;
+
+    .screen-title {
+        position: absolute;
+        top: 2%;
+        left: 50%;
+        color: #fff;
+        font-size: 30px;
+        // font-weight: bold;
+        transform: translateX(-50%);
+        letter-spacing: 3px;
+        // font-style: italic;
+        font-family: DS-TITle;
+    }
+
+    .header {
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        .header-img {
+            margin-top: 15px;
+            margin-right: 30px;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+        }
+    }
+
+    .content {
+        margin: 4% 10% 0;
+
+        .title {
+            width: 405px;
+            height: 36px;
+            background: url('@/assets/img/screen/title_bg.png') no-repeat;
+            background-size: 100% 100%;
+            line-height: 30px;
+            padding-left: 35px;
+        }
+    }
+}
+
+:deep .el-table {
+    background-color: transparent;
+}
+:deep .el-table__header-wrapper {
+    background: url('@/assets/img/screen/table-1.png') no-repeat !important;
+    background-size: cover;
+    background-position: center;
+}
+:deep .el-table__header th {
+    color: white;
+    background-color: transparent; /* 避免被其他背景色覆盖 */
+}
+
+::v-deep .el-table tr {
+    color: #eee;
+    background-color: transparent;
+    background: url('@/assets/img/screen/table-2.png') no-repeat;
+}
+
+:deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #39816b;
+    color: #333;
+}
+::v-deep .el-input__wrapper {
+    background-color: #61b2a6;
+}
+</style>

src/views/big-screen/model-components/detailList-sy.vue

@@ -1,253 +0,0 @@
-<template>
-    <div class="screen-container">
-        <div class="screen-title">安徽机械化装备共享平台</div>
-        <div class="header">
-            <img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
-        </div>
-
-        <div class="content">
-            <div class="title">{{ title }}</div>
-            <el-table :data="tableData" style="width: 100%">
-                <el-table-column
-                    label="序号"
-                    type="index"
-                    width="90"
-                    align="center"
-                    :index="indexContinuation"
-                />
-                <el-table-column
-                    v-for="(item, index) in column"
-                    :key="index"
-                    :label="item.label"
-                    :prop="item.prop"
-                    align="center"
-                    show-overflow-tooltip
-                >
-                    <template v-if="!item.slot_c" #default="{ row }">
-                        {{ row[item.prop] }}
-                    </template>
-                    <template v-else #default="{ row }">
-                        <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
-                        <el-tag v-if="row.maStatus == 1" size="small" type="warning">待上架</el-tag>
-                        <el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
-                        <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
-                    </template>
-                </el-table-column>
-            </el-table>
-
-            <PagingComponent
-                @getListChange="getList"
-                v-model:pageSize="queryParams.pageSize"
-                v-model:currentPage="queryParams.pageNum"
-                :total="total"
-                style="margin-top: 20px"
-            />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import PagingComponent from 'components/PagingComponent/index.vue'
-
-import {
-    getDevNumApi,
-    getDevUpNumApi,
-    getDevTypeNumApi,
-    getDevQcWarningNumApi,
-    getMaTypeLeasingNumApi,
-    getDevLeasingNumApi,
-} from '@/http/api/screen-f/index.ts'
-
-const router = useRouter()
-console.log('🚀 ~ router:', router.currentRoute.value.query)
-
-const currentType = ref(router.currentRoute.value.query.type)
-const title = ref(router.currentRoute.value.query.title)
-const column = ref([])
-const columns1 = ref([
-    { label: '机具类型', prop: 'typeName' },
-    { label: '机具名称', prop: 'deviceName' },
-    { label: '规格型号', prop: 'modelName' },
-    { label: '唯一标识符', prop: 'identifyCode' },
-    { label: '装备状态', prop: 'maStatus', slot_c: true },
-    { label: '上架时间', prop: 'createTime' },
-    { label: '所属公司', prop: 'comName' },
-])
-const columns2 = ref([
-    { label: '机具类型', prop: 'typeName' },
-    { label: '机具名称', prop: 'deviceName' },
-    { label: '规格型号', prop: 'modelName' },
-    { label: '数量', prop: 'deviceCount' },
-])
-const columns3 = ref([
-    { label: '机具类型', prop: 'typeName' },
-    { label: '机具名称', prop: 'deviceName' },
-    { label: '规格型号', prop: 'modelName' },
-    { label: '唯一标识符', prop: 'identifyCode' },
-    // { label: '报警类型', prop: 'identifyCode' },
-    { label: '告警时间', prop: 'createTime' },
-])
-const columns4 = ref([
-    { label: '机具名称', prop: 'deviceName' },
-    { label: '规格型号', prop: 'modelName' },
-    { label: '租赁单价', prop: 'dayLeasePrice' },
-    { label: '租赁次数', prop: 'rentNum' },
-])
-const columns5 = ref([
-    { label: '机具名称', prop: 'deviceName' },
-    { label: '规格型号', prop: 'modelName' },
-    { label: '唯一标识符', prop: 'identifyCode' },
-    { label: '订单号', prop: 'orderId' },
-    { label: '出租方', prop: 'comName' },
-    { label: '出租方联系人', prop: 'person' },
-    { label: '承租方', prop: 'lessee' },
-    { label: '承租方联系人', prop: 'lesseePerson' },
-    { label: '订单开始时间', prop: 'startTime' },
-    { label: '订单结束时间', prop: 'endTime' },
-    { label: '租赁金额', prop: 'cost' },
-])
-
-const total = ref(0)
-const queryParams = ref({
-    pageNum: 1,
-    pageSize: 10,
-})
-
-const tableData = ref([])
-
-const indexContinuation = (index) => {
-    return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
-}
-
-const SEND_API = ref(null)
-const getList = async () => {
-    const res = await SEND_API.value(queryParams.value)
-    if (res.code === 200) {
-        tableData.value = res.data.rows
-        total.value = res.data.total
-    }
-    console.log(res, '9996')
-}
-
-switch (currentType.value) {
-    case '1':
-        SEND_API.value = getDevNumApi
-        column.value = [...columns1.value]
-        break
-    case '2':
-        SEND_API.value = getDevUpNumApi
-        column.value = [...columns1.value]
-        break
-    case '3':
-        SEND_API.value = getDevTypeNumApi
-        column.value = [...columns2.value]
-        break
-    case '4':
-        SEND_API.value = getDevQcWarningNumApi
-        column.value = [...columns3.value]
-        break
-    case '5':
-        SEND_API.value = getMaTypeLeasingNumApi
-        column.value = [...columns4.value]
-        break
-    case '6':
-        SEND_API.value = getDevLeasingNumApi
-        column.value = [...columns5.value]
-        break
-}
-
-const back = () => {
-    console.log('back')
-    router.push({
-        path: '/big-screen',
-    })
-}
-
-// console.log(column.value, '  column.value')
-
-getList()
-
-onMounted(async () => {
-    console.log(currentType.value, 'currentType.value')
-})
-</script>
-
-<style lang="scss" scoped>
-.screen-container {
-    width: 100vw;
-    height: 100vh;
-    background: url('@/assets/img/screen/bg-2.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 16px;
-    position: relative;
-    color: #eee;
-
-    .screen-title {
-        position: absolute;
-        top: 2%;
-        left: 50%;
-        color: #fff;
-        font-size: 30px;
-        // font-weight: bold;
-        transform: translateX(-50%);
-        letter-spacing: 3px;
-        // font-style: italic;
-        font-family: DS-TITle;
-    }
-
-    .header {
-        height: 80px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        .header-img {
-            margin-top: 15px;
-            margin-right: 30px;
-            width: 40px;
-            height: 40px;
-            cursor: pointer;
-        }
-    }
-
-    .content {
-        margin: 4% 10% 0;
-
-        .title {
-            width: 405px;
-            height: 36px;
-            background: url('@/assets/img/screen/title_bg.png') no-repeat;
-            background-size: 100% 100%;
-            line-height: 30px;
-            padding-left: 35px;
-        }
-    }
-}
-
-::v-deep(.el-table) {
-    background-color: transparent;
-}
-::v-deep(.el-table__header-wrapper) {
-    background: url('@/assets/img/screen/table-1.png') no-repeat !important;
-    background-size: cover;
-    background-position: center;
-}
-::v-deep(.el-table__header th) {
-    color: white;
-    background-color: transparent; /* 避免被其他背景色覆盖 */
-}
-
-::v-deep .el-table tr {
-    color: #eee;
-    background-color: transparent;
-    background: url('@/assets/img/screen/table-2.png') no-repeat;
-}
-
-:deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-    background-color: #39816B;
-    color: #333;
-}
-::v-deep .el-input__wrapper {
-    background-color: #61B2A6;
-}
-</style>

src/views/big-screen/model-components/details-new.vue

@@ -0,0 +1,266 @@
+<template>
+    <div class="screen-container-new">
+        <div class="screen-title">安徽机械化装备共享平台</div>
+        <div class="header">
+            <img class="header-img" src="@/assets/img/screen/返回.png" alt="" @click="back" />
+        </div>
+        <div class="content-new">
+            <div class="title">{{ title }}</div>
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column
+                    label="序号"
+                    type="index"
+                    width="90"
+                    align="center"
+                    :index="indexContinuation"
+                />
+                <el-table-column
+                    v-for="(item, index) in columns"
+                    :key="index"
+                    :label="item.label"
+                    :prop="item.prop"
+                    align="center"
+                    show-overflow-tooltip
+                >
+                    <template v-if="!item.slot_c" #default="{ row }">
+                        {{ row[item.prop] }}
+                    </template>
+                    <template v-else #default="{ row }">
+                        <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
+                        <el-tag v-if="row.maStatus == 1" size="small" type="warning">待上架</el-tag>
+                        <el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
+                        <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <PagingComponent
+                @getListChange="getList"
+                v-model:pageSize="queryParams.pageSize"
+                v-model:currentPage="queryParams.pageNum"
+                :total="total"
+                style="margin-top: 20px"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+
+import {
+    getDevNumApi,
+    getDevUpNumApi,
+    getDevTypeNumApi,
+    getDevQcWarningNumApi,
+    getMaTypeLeasingNumApi,
+    getDevLeasingNumApi,
+} from '@/http/api/screen-f/index.ts'
+
+const router = useRouter()
+const currentType = ref(router.currentRoute.value.query.type)
+const title = ref(router.currentRoute.value.query.title)
+// 总装备上架时长
+const upTotal = ref(0)
+// 总装备租赁时长
+const leaseTotal = ref(0)
+// 利用率
+const rateToTal = ref(0)
+// 总的需求发布数
+const publishCount = ref(0)
+// 接单需求数
+const orderCount = ref(0)
+// 应答率
+const answerRate = ref(0)
+const columns = ref([])
+if (currentType.value == 1 || currentType.value == 2) {
+    columns.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        { label: '装备状态', prop: 'maStatus', slot_c: true },
+        { label: '上架时间', prop: 'createTime' },
+        { label: '所属公司', prop: 'comName' },
+    ]
+} else if (currentType.value == 3) {
+    columns.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '数量', prop: 'deviceCount' },
+    ]
+} else if (currentType.value == 4) {
+    columns.value = [
+        { label: '机具类型', prop: 'typeName' },
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        { label: '告警时间', prop: 'createTime' },
+    ]
+} else if (currentType.value == 5) {
+    columns.value = [
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '租赁单价', prop: 'dayLeasePrice' },
+        { label: '租赁次数', prop: 'rentNum' },
+    ]
+} else if (currentType.value == 6) {
+    columns.value = [
+        { label: '机具名称', prop: 'deviceName' },
+        { label: '规格型号', prop: 'modelName' },
+        { label: '唯一标识符', prop: 'identifyCode' },
+        { label: '订单号', prop: 'orderId' },
+        { label: '出租方', prop: 'comName' },
+        { label: '出租方联系人', prop: 'person' },
+        { label: '承租方', prop: 'lessee' },
+        { label: '承租方联系人', prop: 'lesseePerson' },
+        { label: '订单开始时间', prop: 'startTime' },
+        { label: '订单结束时间', prop: 'endTime' },
+        { label: '租赁金额', prop: 'cost' },
+    ]
+}
+
+const total = ref(0)
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+    keyWord: '',
+})
+
+const tableData = ref([])
+
+const indexContinuation = (index) => {
+    return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
+}
+
+const getList = async () => {
+    try {
+        const params = {
+            pageNum: queryParams.value.pageNum,
+            pageSize: queryParams.value.pageSize,
+            keyWord: queryParams.value.keyWord,
+        }
+        let res = null
+        if (currentType.value == 1) {
+            // 需求装备种类
+            res = await getDevNumApi(params)
+        } else if (currentType.value == 2) {
+            // 需求装备种类
+            res = await getDevUpNumApi(params)
+        } else if (currentType.value == 3) {
+            // 需求装备种类
+            res = await getDevTypeNumApi(params)
+        } else if (currentType.value == 4) {
+            // 需求装备种类
+            res = await getDevQcWarningNumApi(params)
+        } else if (currentType.value == 5) {
+            // 需求装备种类
+            res = await getMaTypeLeasingNumApi(params)
+        } else if (currentType.value == 6) {
+            // 需求装备种类
+            res = await getDevLeasingNumApi(params)
+        }
+
+        // console.log('🚀 ~ getList ~ res:', res)
+        if (res.code == 200) {
+            tableData.value = res.data.rows
+            total.value = res.data.total
+        }
+    } catch (error) {
+        console.log('🚀 ~ getList ~ error:', error)
+    }
+}
+
+const back = () => {
+    console.log('back')
+    router.push({
+        path: '/big-screen',
+    })
+}
+
+onMounted(() => {
+    getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.screen-container-new {
+    width: 100vw;
+    height: 100vh;
+    background: url('@/assets/img/screen/bg-2.png') no-repeat;
+    background-size: 100% 100%;
+    font-size: 16px;
+    position: relative;
+    color: #eee;
+
+    .screen-title {
+        position: absolute;
+        top: 2%;
+        left: 50%;
+        color: #fff;
+        font-size: 30px;
+        // font-weight: bold;
+        transform: translateX(-50%);
+        letter-spacing: 3px;
+        // font-style: italic;
+        font-family: DS-TITle;
+    }
+
+    .header {
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        .header-img {
+            margin-top: 15px;
+            margin-right: 30px;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+        }
+    }
+
+    .content-new {
+        margin: 4% 10% 0;
+
+        .title {
+            width: 405px;
+            height: 36px;
+            padding-left: 35px;
+            margin-bottom: 30px;
+            background: url('@/assets/img/screen/title_bg.png') no-repeat;
+            background-size: 100% 100%;
+            line-height: 30px;
+        }
+
+        ::v-deep(.el-table) {
+            background-color: transparent;
+        }
+        ::v-deep(.el-table__header-wrapper) {
+            background: url('@/assets/img/screen/table-1.png') no-repeat !important;
+            background-size: cover;
+            background-position: center;
+        }
+        ::v-deep(.el-table__header th) {
+            color: white;
+            background-color: transparent; /* 避免被其他背景色覆盖 */
+        }
+
+        ::v-deep .el-table tr {
+            color: #eee;
+            background-color: transparent;
+            background: url('@/assets/img/screen/table-2.png') no-repeat;
+        }
+
+        :deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+            background-color: #39816b;
+            color: #333;
+        }
+        ::v-deep .el-input__wrapper {
+            background-color: #61b2a6;
+        }
+    }
+}
+</style>