装备共享大屏二级弹窗1

src/assets/img/screen/right_3_1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1736243729390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5151" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M507.3408 502.2208m-435.5584 0a435.5584 435.5584 0 1 0 871.1168 0 435.5584 435.5584 0 1 0-871.1168 0Z" fill="#4BCEF9" p-id="5152"></path><path d="M933.2736 592.896c-8.3456 40.6528-36.096 147.8656-132.2496 235.1616-146.9952 133.376-334.2848 108.032-367.4112 102.8608-68.4544-10.5984-115.8144-35.0208-132.2496-44.0832-21.76-11.9296-186.4192-102.4-168.704-218.0096 12.4416-81.3056 107.008-122.0608 114.6368-125.2352 70.7072-29.3376 137.984-7.3216 177.8688 5.7344 51.9168 16.9984 70.3488 36.6592 109.0048 57.3952 49.664 26.624 128.8704 52.8384 252.4672 40.192 30.8224-4.352 69.4272-13.6704 110.2848-33.5872 13.312-6.5024 25.4464-13.4144 36.352-20.4288z" fill="#FFFFFF" opacity=".35" p-id="5153"></path></svg>

src/components/PagingComponent/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  // background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+.el-pagination {
+    justify-content: flex-end;
+    padding: 5px 0;
+}
+
+:deep.el-pagination.is-background .el-pager li.is-active {
+    background-color: #3cb4a6;
+}
+</style>

src/main.js

@@ -29,6 +29,7 @@ import {
 } from '@/utils/bonus'
 // 分页组件
 import Pagination from '@/components/Pagination'
+import PagingComponent from '@/components/PagingComponent'
 // 自定义表格工具组件
 import RightToolbar from '@/components/RightToolbar'
 // 富文本组件
@@ -63,6 +64,7 @@ Vue.prototype.indexContinuation = indexContinuation
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
 Vue.component('Pagination', Pagination)
+Vue.component('PagingComponent', PagingComponent)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)

src/router/index.js

@@ -130,6 +130,24 @@ export const constantRoutes = [
     meta: { title: '装备共享一张图', icon: 'dashboard', affix: true },
     hidden: true
   },
+  {
+    path: '/screen/detail-list',
+    component: () => import('@/views/screen/shareScreen/components/detailList'),
+    meta: { title: '数据大屏', icon: 'dashboard', affix: true },
+    hidden: true
+  },
+  {
+    path: '/screen/detail-list-new',
+    component: () => import('@/views/screen/shareScreen/components/details-new'),
+    meta: { title: '数据大屏', icon: 'dashboard', affix: true },
+    hidden: true
+  },
+  {
+    path: '/screen/details-unit',
+    component: () => import('@/views/screen/shareScreen/components/details-unit'),
+    meta: { title: '数据大屏', icon: 'dashboard', affix: true },
+    hidden: true
+  },
   {
     path: '/user',
     component: Layout,

src/views/screen/shareScreen/components/center-model-7-3.vue

@@ -1,34 +1,10 @@
-<template>
-    <!-- 2025-07-03 新需求版本 如需舍弃直接使用原来的版本即可 -->
-    <!-- warning -->
-    <!-- warning -->
-    <!-- warning -->
-    <!-- warning -->
-    <!-- warning -->
-    <!-- warning -->
-    <!-- warning -->
-    <!-- 2025-07-03 新需求版本 如需舍弃直接使用原来的版本即可 -->
+<template> 
     <div class="container">
-        <div class="item">
-            <!-- <h2>装备上架</h2> -->
+        <div class="item"> 
             <div class="item-title">
                 <img src="../../../../assets/img/screen/装备上架.png" style="width: 100%; height: 80%" />
             </div>
             <div class="item-info">
-                <!-- <div
-                    class="info-box info-box_1"
-                    style="transform: translateY(-14.5vh)"
-                    @click="handleDetail(1)"
-                >
-                    <div class="yyyy">入驻装备数</div>
-                    <div>
-                        <span class="xxxx">
-                            {{ devNum || 0 }}
-                        </span>
-                        <span class="zzzz"> 台 </span>
-                    </div>
-                    <div></div>
-                </div> -->
                 <div
                     class="info-box info-box_1"
                     style="transform: translateY(-14.5vh)"
@@ -72,27 +48,12 @@
                     <div></div>
                 </div>
             </div>
-        </div>
-        <div class="item">
-            <!-- <h2>装备租赁</h2> -->
+        </div> 
+        <div class="item"> 
             <div class="item-title" style="transform: translateY(-5vh)">
                 <img src="../../../../assets/img/screen/装备租赁.png" style="width: 100%; height: 70%" />
             </div>
             <div class="item-info">
-                <!-- <div
-                    class="info-box info-box_2"
-                    style="transform: translateY(-14vh)"
-                    @click="handleDetail(5)"
-                >
-                    <div>
-                        <span class="xxxx">
-                            {{ maTypeLeasingNum || 0 }}
-                        </span>
-                        <span class="zzzz"> 台 </span>
-                    </div>
-                    <div>在租赁种类</div>
-                    <div></div>
-                </div> -->
                 <div
                     class="info-box info-box_2"
                     style="transform: translateY(-14vh)"
@@ -128,34 +89,18 @@
                 >
                     <div>
                         <span class="xxxx">{{ devRepairingNum || 0 }}</span>
-                        <span class="zzzz"> 台 </span>
-                        <!-- <span class="zzzz"> 台 </span> -->
+                        <span class="zzzz"> 台 </span> 
                     </div>
                     <div>退租数</div>
                     <div></div>
                 </div>
             </div>
         </div>
-        <div class="item">
-            <!-- <h2>装备需求</h2> -->
+        <div class="item"> 
             <div class="item-title" style="transform: translateY(-5vh)">
                 <img src="../../../../assets/img/screen/装备需求.png" style="width: 100%; height: 70%" />
             </div>
             <div class="item-info">
-                <!-- <div
-                    class="info-box info-box_3"
-                    style="transform: translateY(-12.5vh)"
-                    @click="handleDetail(9)"
-                >
-                    <div>
-                        <span class="xxxx">
-                            {{ leaseNum || 0 }}
-                        </span>
-                        <span class="zzzz"> 项 </span>
-                    </div>
-                    <div>需求总数</div>
-                    <div></div>
-                </div> -->
                 <div
                     class="info-box info-box_3"
                     style="transform: translateY(-14vh)"
@@ -277,64 +222,65 @@ export default {
             let params = {
                 title: '',
                 column: [],
-            }
+            } 
+            //2 1 4 20 6 7 9 21 10
             let path = ''
             if (type == 1) {
                 params.title = '入驻装备数'
                 // params.type = 1
-                path = '/details-unit'
+                path = '/screen/details-unit'
             } else if (type == 2) {
                 params.title = '上架装备数'
                 params.type = 2
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             } else if (type == 3) {
                 params.title = '装备总类型数'
                 params.type = 3
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             } else if (type == 4) {
                 params.title = '保养告警'
                 params.type = 4
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             } else if (type == 5) {
                 params.title = '在租赁种类'
                 params.type = 5
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             } else if (type == 6) {
                 params.title = '在租装备数'
                 params.type = 6
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             } else if (type == 7) {
                 params.title = '退租装备数'
                 params.type = 7
-                path = '/detail-list'
+                path = '/screen/detail-list'
             } else if (type == 8) {
                 params.title = '装备利用率'
                 params.type = 8
-                path = '/detail-list'
+                path = '/screen/detail-list'
             } else if (type == 9) {
                 params.title = '需求总数'
                 params.type = 9
-                path = '/detail-list'
+                path = '/screen/detail-list'
             } else if (type == 10) {
                 params.title = '需求装备种类'
                 params.type = 10
-                path = '/detail-list'
+                path = '/screen/detail-list'
             } else if (type == 11) {
                 params.title = '最需装备'
                 params.type = 11
-                path = '/detail-list'
+                path = '/screen/detail-list'
             } else if (type == 12) {
                 params.title = '需求应答率'
                 params.type = 12
-                path = '/detail-list'
+                path = '/screen/detail-list'
             } else if (type == 20) {
                 params.title = '累计数'
                 params.type = 20
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             } else if (type == 21) {
                 params.title = '需求单位'
                 params.type = 21
-                path = '/detail-list-new'
+                path = '/screen/detail-list-new'
             }
             this.$router.push({
                 path,

src/views/screen/shareScreen/components/detailList.vue

@@ -0,0 +1,292 @@
+<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>
+            <div style="margin: 30px">
+                <span v-if="currentType == 8" style="margin-right: 20px"
+                  >装备上架总时长: {{ upTotal }} 天</span
+                >
+                <span v-if="currentType == 8" style="margin-right: 20px"
+                  >装备租赁总时长: {{ leaseTotal }} 天</span
+                >
+                <span v-if="currentType == 8">利用率: {{ rateToTal }}%</span>
+                <span v-if="currentType == 12" style="margin-right: 20px"
+                  >需求发布总数: {{ publishCount }} 条</span
+                >
+                <span v-if="currentType == 12" style="margin-right: 20px"
+                  >结单需求总数: {{ orderCount }} 条</span
+                >
+                <span v-if="currentType == 12">应答率: {{ answerRate }}%</span>
+            </div>
+            <el-table :data="tableData" style="width: 100%">
+                <el-table-column label="序号" align="center" width="80" type="index">
+                    <template slot-scope="scope">
+                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                  v-for="(item, index) in columns"
+                  :key="index"
+                  :label="item.label"
+                  :prop="item.prop"
+                  align="center"
+                  show-overflow-tooltip
+                >
+                    <template #default="{ row }">
+                        <span v-if="item.prop === 'upTotal'">{{ row.upTotal || 0 }} 天</span>
+                        <span v-else-if="item.prop === 'leaseTotal'"
+                            >{{ row.leaseTotal || 0 }} 天</span
+                        >
+                        <span v-else-if="item.prop === 'rate'"
+                            >{{ row.rate ? (Number(row.rate) * 100).toFixed(0) : 0 }}%</span
+                        >
+                        <span v-else-if="item.prop === 'estimateDays'"
+                            >{{ row.estimateDays || 0 }} 天</span
+                        >
+                        <span v-else-if="item.prop === 'answerRate'"
+                            >{{ row.answerRate || 0 }}%</span
+                        >
+                        <span v-else>{{ row[item.prop] }}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+          
+            <PagingComponent
+                v-show="total>0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+                style="margin-top: 20px"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+// import {
+//     getReturnDevApi,
+//     getDevRateApi,
+//     getLeaseOnlyInfoApi,
+//     getLeaseTypeListApi,
+//     getLeaseAnswerRateApi,
+//     getTotalDevRateApi,
+//     getTotalLeaseAnswerRateApi,
+// } from '@/http/api/screen/index.ts'
+export default {
+    data() {
+        return {
+            title:"",
+            currentType:"",
+            upTotal:0,// 总装备上架时长
+            leaseTotal:0,// 总装备租赁时长
+            rateToTal:0,// 利用率
+            publishCount:0,// 总的需求发布数
+            orderCount:0,// 接单需求数
+            answerRate:0,// 应答率
+            columns:[], 
+            queryParams:{
+                pageNum:1,
+                pageSize:10,
+                keyWord:''
+            },
+            total:0,
+            tableData:[]
+        }
+    },
+    mounted() {
+        console.log(this.$route.query)
+        this.title = this.$route.query.title;
+        this.currentType = this.$route.query.type;
+        if (this.currentType == 7) {
+            this.columns = [
+                { label: '机具名称', prop: 'deviceName' },
+                { label: '规格型号', prop: 'modelCode' },
+                { label: '唯一标识符', prop: 'identifyCode' },
+                { label: '订单号', prop: 'orderCode' },
+                { label: '退租人', prop: 'returnUser' },
+                { label: '退租时间', prop: 'returnTime' },
+            ]
+        } else if (this.currentType == 8) {
+            this.columns = [
+                { label: '装备类型', prop: 'typeName' },
+                { label: '装备名称', prop: 'deviceName' },
+                { label: '装备规格', prop: 'modelCode' },
+                { label: '装备上架时长', prop: 'upTotal' },
+                { label: '装备租赁时长', prop: 'leaseTotal' },
+                { label: '利用率', prop: 'rate' },
+            ]
+        } else if (this.currentType == 9) {
+            this.columns = [
+                { label: '标题', prop: 'deviceName' },
+                { label: '租赁公司', prop: 'publishCompany' },
+                { label: '联系人', prop: 'person' },
+                { label: '联系电话', prop: 'phoneNumber' },
+                { label: '预估数量', prop: 'estimateCount' },
+                { label: '发布时间', prop: 'startTime' },
+                { label: '截止时间', prop: 'endTime' },
+            ]
+        } else if (this.currentType == 10) {
+            this.columns = [
+                { label: '装备类型', prop: 'typeName' },
+                { label: '装备名称', prop: 'deviceName' },
+                { label: '数量', prop: 'estimateCount' },
+                { label: '预估时长', prop: 'estimateDays' },
+            ]
+        } else if (this.currentType == 11) {
+            this.columns = [
+                { label: '标题', prop: 'deviceName' },
+                { label: '租赁公司', prop: 'publishCompany' },
+                { label: '联系人', prop: 'person' },
+                { label: '联系电话', prop: 'phoneNumber' },
+                { label: '预估数量', prop: 'estimateCount' },
+                { label: '发布时间', prop: 'startTime' },
+                { label: '截止时间', prop: 'endTime' },
+            ]
+        } else if (this.currentType == 12) {
+            this.columns = [
+                { label: '装备类型', prop: 'typeName' },
+                { label: '装备名称', prop: 'deviceName' },
+                { label: '发布需求数', prop: 'publishCount' },
+                { label: '接单数', prop: 'orderCount' },
+                { label: '应答率', prop: 'answerRate' },
+            ]
+        } 
+        // this.getList()
+    },
+    methods: {
+        async getList(){
+            const params = {
+                pageNum: this.queryParams.pageNum,
+                pageSize: this.queryParams.pageSize,
+                keyWord: this.queryParams.keyWord,
+            }
+            let res = null;
+            if (this.currentType == 7) {
+                // 退租装备数
+                res = await getReturnDevApi(params)
+            } else if (this.currentType == 8) {
+                res = await getDevRateApi(params)
+                const res2 = await getTotalDevRateApi(params)
+                this.upTotal = res2.data.upTotal
+                this.leaseTotal = res2.data.leaseTotal
+                this.rateToTal = res2.data.rate
+            } else if (this.currentType == 9 || this.currentType == 11) {
+                if (this.currentType == 11) {
+                    params.isHot = true
+                }
+                // 需求总数 / 最需装备
+                res = await getLeaseOnlyInfoApi(params)
+            } else if (this.currentType == 10) {
+                // 需求装备种类
+                res = await getLeaseTypeListApi(params)
+            } else if (this.currentType == 12) {
+                // 需求装备种类
+                res = await getLeaseAnswerRateApi(params)
+                const res2 = await getTotalLeaseAnswerRateApi(params)
+                this.publishCount = res2.data.publishCount
+                this.orderCount = res2.data.orderCount
+                this.answerRate = res2.data.answerRate
+            }
+            // console.log('🚀 ~ getList ~ res:', res)
+            if (res.code == 200) {
+                this.tableData = res.data.rows
+                this.total = res.data.total
+            } 
+        },
+        back() { 
+            this.$router.go(-1) 
+        }
+    }
+}
+</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;
+        }
+        :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; /* 避免被其他背景色覆盖 */
+        }
+
+        :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;
+        }
+        :deep .el-input__wrapper {
+            background-color: #61b2a6;
+        }
+    }
+}
+.el-pagination {
+    justify-content: flex-end;
+    padding: 5px 0;
+}
+
+:deep.el-pagination.is-background .el-pager li.is-active {
+    background-color: #3cb4a6;
+}
+</style>

src/views/screen/shareScreen/components/details-new.vue

@@ -0,0 +1,274 @@
+<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="序号" align="center" width="80" type="index">
+                  <template slot-scope="scope">
+                      <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                  </template>
+              </el-table-column>
+              <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
+                v-show="total>0"
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getList"
+                style="margin-top: 20px"
+            />
+      </div>
+  </div>
+</template>
+
+<script>
+// import {
+//     getDevUpNumApi,
+//     getDevTypeNumApi,
+//     getDevQcWarningNumApi,
+//     getMaTypeLeasingNumApi,
+//     getDevLeasingNumApi,
+// } from '@/http/api/screen-f/index.ts'
+// import { getTotalCountApi, getDemandUnitApi, getDevNumDetailsListApi } from '@/http/api/screen/index.ts'
+export default {
+  data() {
+    return {
+      title:"",
+      currentType:"",
+      ownCo:"",
+      upTotal:0,// 总装备上架时长
+      leaseTotal:0,// 总装备租赁时长
+      rateToTal:0,// 利用率
+      publishCount:0,// 总的需求发布数
+      orderCount:0,// 接单需求数
+      answerRate:0,// 应答率
+      columns:[], 
+      queryParams:{
+        pageNum:1,
+        pageSize:10
+      },
+      total:0,
+      tableData:[]
+    }
+  },
+  mounted() {
+    console.log(this.$route.query)
+    this.title = this.$route.query.title;
+    this.currentType = this.$route.query.type; 
+    this.ownCo = this.$route.query.ownCo;
+    if (this.currentType == 1) {
+        this.columns = [
+            { label: '装备名称', prop: 'deviceName' },
+            { label: '装备类目', prop: 'categoryName' },
+            { label: '装备单位', prop: 'unitName' },
+            { label: '装备品牌', prop: 'brand' },
+            { label: '出厂日期', prop: 'productionDate' },
+            { label: '联系人', prop: 'person' },
+            { label: '联系电话', prop: 'personPhone' },
+            { label: '上架数量', prop: 'deviceCount' },
+            { label: '录入人', prop: 'creatorName' },
+            { label: '录入时间', prop: 'createTime' },
+            { label: '所属公司', prop: 'comName' },
+        ]
+    } else if (this.currentType == 2) {
+        this.columns = [
+            { 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 (this.currentType == 3) {
+        this.columns = [
+            { label: '机具类型', prop: 'typeName' },
+            { label: '机具名称', prop: 'deviceName' },
+            { label: '规格型号', prop: 'modelName' },
+            { label: '数量', prop: 'deviceCount' },
+        ]
+    } else if (this.currentType == 4) {
+        this.columns = [
+            { label: '机具类型', prop: 'typeName' },
+            { label: '机具名称', prop: 'deviceName' },
+            { label: '规格型号', prop: 'modelName' },
+            { label: '唯一标识符', prop: 'identifyCode' },
+            { label: '告警时间', prop: 'createTime' },
+        ]
+    } else if (this.currentType == 5) {
+        this.columns = [
+            { label: '机具名称', prop: 'deviceName' },
+            { label: '规格型号', prop: 'modelName' },
+            { label: '租赁单价', prop: 'dayLeasePrice' },
+            { label: '租赁次数', prop: 'rentNum' },
+        ]
+    } else if (this.currentType == 6 || this.currentType == 20) {
+        this.columns = [
+            { 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' },
+        ]
+    } else if (this.currentType == 21) {
+        this.columns = [
+            { label: '单位名称', prop: 'deptName' },
+            { label: '创建时间', prop: 'createTime' },
+        ]
+    }
+    // this.getList()
+  },
+  methods: {
+    async getList(){
+         const params = {
+            pageNum: this.queryParams.pageNum,
+            pageSize: this.queryParams.pageSize,
+            keyWord: this.queryParams.keyWord,
+        }
+        let res = null
+        if (this.currentType == 1) {
+            params.ownCo = this.ownCo
+            // 需求装备种类
+            res = await getDevNumDetailsListApi(params)
+        } else if (this.currentType == 2) {
+            // 需求装备种类
+            res = await getDevUpNumApi(params)
+        } else if (this.currentType == 3) {
+            // 需求装备种类
+            res = await getDevTypeNumApi(params)
+        } else if (this.currentType == 4) {
+            // 需求装备种类
+            res = await getDevQcWarningNumApi(params)
+        } else if (this.currentType == 5) {
+            // 需求装备种类
+            res = await getMaTypeLeasingNumApi(params)
+        } else if (this.currentType == 6) {
+            // 需求装备种类
+            res = await getDevLeasingNumApi(params)
+        } else if (this.currentType == 20) {
+            res = await getTotalCountApi(params)
+        } else if (this.currentType == 21) {
+            res = await getDemandUnitApi(params)
+        }
+
+        // console.log('🚀 ~ getList ~ res:', res)
+        if (res.code == 200) {
+            this.tableData = res.data.rows
+            this.total = res.data.total
+        }
+    },
+    back() { 
+        this.$router.go(-1) 
+    }
+  }
+}
+</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>

src/views/screen/shareScreen/components/details-unit.vue

@@ -0,0 +1,219 @@
+<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="序号" align="center" width="80" type="index">
+                  <template slot-scope="scope">
+                      <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                  </template>
+              </el-table-column>
+              <el-table-column
+                  v-for="(item, index) in columns"
+                  :key="index"
+                  :label="item.label"
+                  :prop="item.prop"
+                  align="center"
+                  show-overflow-tooltip
+              >
+              </el-table-column>
+              <!-- 操作 -->
+              <el-table-column label="操作" align="center">
+                  <template v-slot="{ row }">
+                      <el-button type="primary" text size="small" @click="handleDetails(row)"
+                          >查看详情</el-button
+                      >
+                      <el-button
+                          type="warning"
+                          text
+                          size="small"
+                          :icon="Download"
+                          @click="handleExport(row)"
+                      >
+                          导出
+                      </el-button>
+                  </template>
+              </el-table-column>
+          </el-table>
+
+          <PagingComponent
+              v-show="total>0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+              style="margin-top: 20px"
+          />
+      </div>
+  </div>
+</template>
+
+<script>
+
+// import { getDevNumListApi } from '@/http/api/screen/index.ts'
+export default {
+  data() {
+    return {
+      title:"",
+      currentType:"", 
+      upTotal:0,// 总装备上架时长
+      leaseTotal:0,// 总装备租赁时长
+      rateToTal:0,// 利用率
+      publishCount:0,// 总的需求发布数
+      orderCount:0,// 接单需求数
+      answerRate:0,// 应答率
+      columns:[
+        { label: '公司名称', prop: 'comName' },
+        { label: '入驻数量', prop: 'deviceCount' },
+      ], 
+      queryParams:{
+        pageNum:1,
+        pageSize:10
+      },
+      total:0,
+      tableData:[]
+
+    }
+  },
+  mounted() {
+    console.log(this.$route.query)
+    this.title = this.$route.query.title;
+    this.currentType = this.$route.query.type; 
+    // this.getList()
+  },
+  methods: {
+    async getList(){ 
+      console.log('this.currentType ', this.currentType) 
+      const params = {
+          pageNum: this.queryParams.pageNum,
+          pageSize: this.queryParams.pageSize,
+      }
+      const res = await getDevNumListApi(params)
+      if (res.code == 200) {
+          this.tableData = res.data.rows
+          this.total = res.data.total
+      } 
+    },
+    handleDetails(row){
+      this.$router.push({
+        path: '/screen/detail-list-new',
+        query: {
+            type: 1,
+            title: this.title,
+            ownCo: row.ownCo,
+        },
+      })
+    },
+    handleExport(row){
+      try {
+          const formatTime = (date) => {
+              const year = date.getFullYear()
+              const month = String(date.getMonth() + 1).padStart(2, '0')
+              const day = String(date.getDate()).padStart(2, '0')
+              const hours = String(date.getHours()).padStart(2, '0')
+              const minutes = String(date.getMinutes()).padStart(2, '0')
+              const seconds = String(date.getSeconds()).padStart(2, '0')
+              return `${year}${month}${day}_${hours}${minutes}${seconds}`
+          } 
+          const currentTime = formatTime(new Date())
+
+          let fileName = `详情_${currentTime}.xLsx`
+          let url = '/material-mall/largeScreen/exportDevNumDetailsList'
+          const params = { ownCo: row.ownCo }
+          console.log('🚀 ~ 导出 ~ params:', params) 
+          this.download(url, params, fileName)
+      } catch (error) {
+          console.log('导出数据失败', error)
+      }
+
+    },
+    back() { 
+        this.$router.go(-1) 
+    }
+  }
+}
+</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-image: 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;
+        }
+
+        ::v-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>