大屏二级页面

src/router/index.ts

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

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

@@ -6,7 +6,11 @@
                 <img src="@/assets/img/screen/装备上架.png" style="width: 100%; height: 70%" />
             </div>
             <div class="item-info">
-                <div class="info-box info-box_1" style="transform: translateY(-14.5vh)">
+                <div
+                    class="info-box info-box_1"
+                    style="transform: translateY(-14.5vh)"
+                    @click="handleDetail(1)"
+                >
                     <div class="yyyy">入驻装备数</div>
                     <div>
                         <span class="xxxx">
@@ -144,12 +148,15 @@
 </template>
 
 <script setup lang="ts">
+import { useRouter } from 'vue-router'
 import {
     getDevCountApi,
     getDevLeaseCountApi,
     getDemandCountApi,
     getOrderTrackingApi,
 } from 'http/api/screen/index'
+import { column } from 'element-plus/es/components/table-v2/src/common'
+const router = useRouter()
 const devNum = ref<any>(0)
 const devUpNum = ref<any>(0)
 const devTypeNum = ref<any>(0)
@@ -194,6 +201,22 @@ const getDevCountData = async () => {
     }
 }
 
+// 详情
+const handleDetail = (type: any) => {
+    let params:any = {
+        title: '',
+        column: [],
+    }
+    if (type == 1) {
+        params.title = '入驻装备数'
+        params.type = 1
+    }
+    router.push({
+        path: '/detail-list',
+        query: params,
+    })
+}
+
 onMounted(() => {
     getDevCountData()
 })
@@ -240,6 +263,7 @@ onMounted(() => {
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+                cursor: pointer;
             }
         }
     }

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

@@ -1,10 +1,89 @@
 <template>
     <div class="screen-container">
         <div class="screen-title">安徽机械化装备共享平台</div>
+        <div class="header"></div>
+
+        <div class="content">
+            <div class="title">{{ title }}</div>
+            <el-table :data="tableData" style="width: 100%" :row-class-name="setRowClass">
+                <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
+                />
+            </el-table>
+
+            <PagingComponent
+                @getListChange="getList"
+                v-model:pageSize="queryParams.pageSize"
+                v-model:currentPage="queryParams.pageNum"
+                :total="total"
+            />
+        </div>
     </div>
 </template>
 
-<script setup></script>
+<script setup>
+import { ref, onMounted } from 'vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+
+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 columns = ref([
+    { label: '序号', prop: 'index' },
+    { label: '装备名称', prop: 'name' },
+    { label: '装备型号', prop: 'typeName' },
+    { label: '发布单位', prop: 'publishCompany' },
+    { label: '发布人', prop: 'publishUser' },
+    { label: '租赁价格', prop: 'price' },
+    { label: '租赁单位', prop: 'timeUnit' },
+])
+
+const total = ref(0)
+const queryParams = ref({
+    pageNum: 1,
+    pageSize: 10,
+})
+
+const tableData = ref([
+    {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄',
+    },
+    {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1517 弄',
+    },
+    {
+        date: '2016-05-01',
+    },
+])
+
+const indexContinuation = (index) => {
+    return index + (queryParams.value.pageNum - 1) * queryParams.value.pageSize + 1
+}
+
+const getList = () => {
+    console.log('getList')
+}
+
+onMounted(() => {})
+</script>
 
 <style lang="scss" scoped>
 .screen-container {
@@ -14,6 +93,7 @@
     background-size: 100% 100%;
     font-size: 16px;
     position: relative;
+    color: #eee;
 
     .screen-title {
         position: absolute;
@@ -31,5 +111,47 @@
     .header {
         height: 80px;
     }
+
+    .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;
+            margin-bottom: 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: #f4eedc;
+    color: #333;
+}
+/* ::v-deep .el-table--enable-row-hover .el-table__body tr.hover-row:hover {
+    background: url('@/assets/img/screen/table-3.png') no-repeat;
+    background-size: cover;
+} */
 </style>