From dea444a72697620496758aa5a42c50ab8a748976 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Tue, 18 Mar 2025 13:02:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BA=8C=E7=BA=A7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/screen/table-2.png             | Bin 0 -> 2794 bytes
 src/assets/img/screen/table-3.png             | Bin 0 -> 2777 bytes
 src/router/index.ts                           |   2 +-
 .../model-components/center-model.vue         |  26 +++-
 .../model-components/detailList.vue           | 124 +++++++++++++++++-
 5 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/img/screen/table-2.png
 create mode 100644 src/assets/img/screen/table-3.png

diff --git a/src/assets/img/screen/table-2.png b/src/assets/img/screen/table-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..e292c5a3ef0f6326a7144bca325f28183143d213
GIT binary patch
literal 2794
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
O&*XCWNaf1tAN~i;=rKP4

literal 0
HcmV?d00001

diff --git a/src/assets/img/screen/table-3.png b/src/assets/img/screen/table-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..93f43e8ad729469a1ee5a08333a6b6e274dca01d
GIT binary patch
literal 2777
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
G2mTNE9}43D

literal 0
HcmV?d00001

diff --git a/src/router/index.ts b/src/router/index.ts
index 7bca891..9c66d11 100644
--- a/src/router/index.ts
+++ b/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,
diff --git a/src/views/big-screen/model-components/center-model.vue b/src/views/big-screen/model-components/center-model.vue
index f14ae9f..825daf1 100644
--- a/src/views/big-screen/model-components/center-model.vue
+++ b/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;
             }
         }
     }
diff --git a/src/views/big-screen/model-components/detailList.vue b/src/views/big-screen/model-components/detailList.vue
index 8ce2172..ba01c6f 100644
--- a/src/views/big-screen/model-components/detailList.vue
+++ b/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>