接口调试

src/http/api/screen/index.ts

@@ -8,6 +8,10 @@ export const getIdleDevRatioApi = (data: any = {}) => {
 export const getLeaseCountByTypeNameApi = (data: any = {}) => {
     return get('/material-mall/largeScreen/getLeaseCountByTypeName', data)
 }
+// 出租装备数
+export const getLeaseCountApi = (data: any = {}) => {
+    return get('/material-mall/largeScreen/getLeaseCountByTypeName', data)
+}
 // 装备租赁互联
 export const getLeaseCouplesApi = (data: any = {}) => {
     return get('/material-mall/largeScreen/getCompanyNum', data)
@@ -71,4 +75,4 @@ export const getLeaseAnswerRateApi = (data: any = {}) => {
 // 总应答率
 export const getTotalLeaseAnswerRateApi = (data: any = {}) => {
     return get('/material-mall/largeScreen/getTotalLeaseAnswerRate', data)
-}
+}

src/types/home.ts

@@ -0,0 +1,79 @@
+export interface LeaseCount {
+    areaId: null | string
+    bmFileInfoList: null | string
+    brand: null | string
+    checkCycle: null | string
+    checkDate: null | string
+    city: null | string
+    cityId: null | string
+    code: null | string
+    comName: null | string
+    companyId: null | string
+    createBy: null | string
+    createTime: null | string
+    creator: null | string
+    dayLeasePrice: null | string
+    deposit: null | string
+    description: null | string
+    detailsFileList: any[]
+    devInfoProperties: null | string
+    deviceCount: number | string
+    deviceName: null | string
+    deviceWeight: null | string
+    examinationPdf: any[]
+    gpsCode: null | string
+    id: null | string
+    identifyCode: null | string
+    idle30: null | string
+    idle80: null | string
+    idle3080: null | string
+    insurancePdf: any[]
+    isActive: null | string
+    isOperator: null | string
+    isQc: null | string
+    isSafeBook: null | string
+    isZone: null | string
+    jsDayPrice: null | string
+    jsMonthPrice: null | string
+    leaseScope: null | string
+    lessee: null | string
+    lesseePerson: null | string
+    location: null | string
+    maId: null | string
+    maIds: null | string
+    maStatus: null | string
+    maStatusName: null | string
+    mainFileList: any[]
+    manageType: null | string
+    missionSource: null | string
+    modelName: null | string
+    monthLeasePrice: null | string
+    newUserId: null | string
+    newdeptId: null | string
+    newrole: null | string
+    nextCheckDate: null | string
+    nickName: null | string
+    ownCo: null | string
+    ownId: null | string
+    person: null | string
+    personPhone: null | string
+    picUrl: null | string
+    productionDate: null | string
+    provinceId: null | string
+    ratio: number | string
+    ratioRange: null | string
+    remark: null | string
+    rentNum: null | string
+    serialNumber: null | string
+    specification: null | string
+    tableList: null | string
+    totalLeaseDay: null | string
+    totalUpDay: null | string
+    typeId: null | string
+    typeName: string
+    unitName: null | string
+    updateBy: null | string
+    updateTime: null | string
+    workingHours: null | string
+    zoneId: null | string
+}

src/views/big-screen/index.vue

@@ -20,10 +20,10 @@
             <div class="box center">
                 <CenterModel />
             </div>
-<!--            <div class="box">-->
-<!--                <RightTwoModel />-->
-<!--            </div>-->
-<!--            <div class="box">
+            <!--            <div class="box">-->
+            <!--                <RightTwoModel />-->
+            <!--            </div>-->
+            <!--            <div class="box">
                 <LeftThreeModel />
             </div>-->
             <div class="box">
@@ -40,7 +40,8 @@ import LeftThreeModel from './model-components/left-three-model.vue'
 import RightOneModel from './model-components/right-one-model-new.vue'
 import RightTwoModel from './model-components/right-two-model.vue'
 import RightThreeModel from './model-components/right-three-model-new.vue'
-import CenterModel from './model-components/center-model.vue'
+// import CenterModel from './model-components/center-model.vue'
+import CenterModel from './model-components/center-model-7-3.vue'
 
 const router = useRouter()
 const back = () => {

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

@@ -0,0 +1,466 @@
+<template>
+    <!-- 2025-07-03 新需求版本 如需舍弃直接使用原来的版本即可 -->
+    <!-- warning -->
+    <!-- warning -->
+    <!-- warning -->
+    <!-- warning -->
+    <!-- warning -->
+    <!-- warning -->
+    <!-- warning -->
+    <!-- 2025-07-03 新需求版本 如需舍弃直接使用原来的版本即可 -->
+    <div class="container">
+        <div class="item">
+            <!-- <h2>装备上架</h2> -->
+            <div class="item-title">
+                <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)"
+                    @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)"
+                    @click="handleDetail(2)"
+                >
+                    <div class="yyyy">上架数</div>
+                    <div>
+                        <span class="xxxx">
+                            {{ devUpNum || 0 }}
+                        </span>
+                        <span class="zzzz"> 台 </span>
+                    </div>
+                    <div></div>
+                </div>
+                <div
+                    class="info-box info-box_1"
+                    style="transform: translateY(-9vh)"
+                    @click="handleDetail(3)"
+                >
+                    <div class="yyyy" style="margin-bottom: -6px">入驻数</div>
+                    <div style="transform: translateY(12vh)">
+                        <span class="xxxx" style="font-size: 26px">
+                            {{ devNum || 0 }}
+                        </span>
+                        <span class="zzzz"> 台 </span>
+                    </div>
+                    <div style="width: 120px; height: 120px"></div>
+                </div>
+                <div
+                    class="info-box info-box_1"
+                    style="transform: translateY(-14.5vh)"
+                    @click="handleDetail(4)"
+                >
+                    <div class="yyyy">保养数</div>
+                    <div>
+                        <span class="xxxx">
+                            {{ devQcWaningNum || 0 }}
+                        </span>
+                        <span class="zzzz"> 条 </span>
+                    </div>
+                    <div></div>
+                </div>
+            </div>
+        </div>
+        <div class="item">
+            <!-- <h2>装备租赁</h2> -->
+            <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)"
+                    @click="handleDetail(6)"
+                >
+                    <div>
+                        <span class="xxxx">
+                            {{ rentTotalNum || 0 }}
+                        </span>
+                        <span class="zzzz"> 台 </span>
+                    </div>
+                    <div>累计数</div>
+                    <div></div>
+                </div>
+                <div
+                    class="info-box info-box_2"
+                    style="transform: translateY(-8.5vh)"
+                    @click="handleDetail(7)"
+                >
+                    <div style="transform: translateY(7.6vh)">
+                        <span class="xxxx" style="font-size: 26px">
+                            {{ devLeasingNum || 0 }}
+                        </span>
+                        <span class="zzzz"> 台 </span>
+                    </div>
+                    <div style="transform: translateY(9vh); font-size: 16px">在租数</div>
+                    <div style="width: 120px; height: 120px"></div>
+                </div>
+                <div
+                    class="info-box info-box_2"
+                    style="transform: translateY(-14vh)"
+                    @click="handleDetail(8)"
+                >
+                    <div>
+                        <span class="xxxx">{{ devRepairingNum || 0 }}</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-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)"
+                    @click="handleDetail(10)"
+                >
+                    <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(-7.5vh)"
+                    @click="handleDetail(11)"
+                >
+                    <!-- <div>第一</div> -->
+                    <div style="transform: translateY(3.6vh)">
+                        <span class="xxxx" style="font-size: 26px">
+                            {{ demandUnitNum || 0 }}
+                        </span>
+                        <span class="zzzz"> 个 </span>
+                    </div>
+                    <div style="transform: translateY(6vh); font-size: 16px">需求单位</div>
+                    <div style="width: 120px; height: 120px"></div>
+                </div>
+                <div
+                    class="info-box info-box_3"
+                    style="transform: translateY(-12.5vh)"
+                    @click="handleDetail(12)"
+                >
+                    <div>
+                        <span class="xxxx">
+                            {{ maTypeCountFromLease || 0 }}
+                        </span>
+                        <span class="zzzz"> 类 </span>
+                    </div>
+                    <div>需求总类</div>
+                    <div></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import {
+    getDevCountApi,
+    getDevLeaseCountApi,
+    getDemandCountApi,
+    getOrderTrackingApi,
+} from 'http/api/screen/index'
+
+const router = useRouter()
+const devNum = ref<any>(0)
+const devUpNum = ref<any>(0)
+const devTypeNum = ref<any>(0)
+const devQcWaningNum = ref<any>(0)
+const leaseNum = ref<any>(0)
+const leaseOrderRatio = ref<any>(0)
+const topPopularTypeName = ref<any>('')
+const maTypeLeasingNum = ref<any>(0)
+const devLeasingNum = ref<any>(0)
+const devRepairingNum = ref<any>(0)
+const devUsageRatio = ref<any>(0)
+const maTypeCountFromLease = ref<any>(0)
+
+const rentTotalNum = ref<number | string>(0) // 在租数
+const demandUnitNum = ref<number | string>(0) // 需求单位
+
+const getDevCountData = async () => {
+    const res: any = await getDevCountApi()
+    devNum.value = res.data.devNum
+    devUpNum.value = res.data.devUpNum
+    devTypeNum.value = res.data.devTypeNum
+    devQcWaningNum.value = res.data.devQcWaningNum
+
+    const result1: any = await getDemandCountApi()
+    console.log('🚀 ~ getDevCountData ~ result1:', result1)
+    leaseNum.value = result1.data.leaseNum
+    leaseOrderRatio.value = result1.data.leaseOrderRatio
+    maTypeCountFromLease.value = result1.data.maTypeCountFromLease
+    topPopularTypeName.value = result1.data.topPopularTypeName
+    demandUnitNum.value = result1.data.demandUnitNum
+    const { data: result }: any = await getDevLeaseCountApi()
+
+    maTypeLeasingNum.value = result.maTypeLeasingNum
+    devLeasingNum.value = result.devLeasingNum
+    rentTotalNum.value = result?.rentToalNum || 0
+    // devRepairingNum.value = result.devRepairingNum
+    devUsageRatio.value = result.devUsageRatio
+    console.log(result, '装备租赁')
+
+    const res3: any = await getOrderTrackingApi()
+    console.log('🚀 ~ getDevCountData ~ res3:', res3)
+    if (res3.data) {
+        res3.data.forEach((e: any) => {
+            if (e.orderStatus == 5) {
+                devRepairingNum.value = e.orderCount
+            }
+        })
+    }
+}
+
+// 详情
+const handleDetail = (type: any) => {
+    let params: any = {
+        title: '',
+        column: [],
+    }
+    let path = ''
+    if (type == 1) {
+        params.title = '入驻装备数'
+        params.type = 1
+        path = '/detail-list-new'
+    } else if (type == 2) {
+        params.title = '上架装备数'
+        params.type = 2
+        path = '/detail-list-new'
+    } else if (type == 3) {
+        params.title = '装备总类型数'
+        params.type = 3
+        path = '/detail-list-new'
+    } else if (type == 4) {
+        params.title = '保养告警'
+        params.type = 4
+        path = '/detail-list-new'
+    } else if (type == 5) {
+        params.title = '在租赁种类'
+        params.type = 5
+        path = '/detail-list-new'
+    } else if (type == 6) {
+        params.title = '在租装备数'
+        params.type = 6
+        path = '/detail-list-new'
+    } else if (type == 7) {
+        params.title = '退租装备数'
+        params.type = 7
+        path = '/detail-list'
+    } else if (type == 8) {
+        params.title = '装备利用率'
+        params.type = 8
+        path = '/detail-list'
+    } else if (type == 9) {
+        params.title = '需求总数'
+        params.type = 9
+        path = '/detail-list'
+    } else if (type == 10) {
+        params.title = '需求装备种类'
+        params.type = 10
+        path = '/detail-list'
+    } else if (type == 11) {
+        params.title = '最需装备'
+        params.type = 11
+        path = '/detail-list'
+    } else if (type == 12) {
+        params.title = '需求应答率'
+        params.type = 12
+        path = '/detail-list'
+    }
+    router.push({
+        path,
+        query: params,
+    })
+}
+
+onMounted(() => {
+    getDevCountData()
+})
+</script>
+
+<style scoped lang="scss">
+@font-face {
+    font-family: 'electronicFont';
+    src: url('@/assets/font-family/DS-Digital/DS-DIGI-1.ttf');
+}
+@font-face {
+    font-family: 'DS-TITle';
+    src: url('@/assets/font-family/DS-Digital/DS-TITle.ttf');
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    /* height: 100vh; */
+    height: 100%;
+    /* width: 100%; */
+    color: #fff;
+    font-size: 16px;
+
+    .item {
+        height: 30%;
+        background: url('@/assets/img/screen/center1_1.png') no-repeat;
+        background-size: 100% 100%;
+
+        .item-title {
+            height: 30%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .item-info {
+            height: 70%;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            padding: 20px 0;
+
+            .info-box {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                cursor: pointer;
+            }
+        }
+    }
+
+    h2 {
+        color: #42bbfc;
+        // font-style: italic;
+        font-size: 31px;
+        // font-weight: bold;
+        letter-spacing: 6px;
+        text-align: center;
+        font-family: DS-TITle;
+        // font-family: electronicFont;
+    }
+}
+
+.xxxx {
+    font-family: DS-TITle;
+    font-size: 26px;
+    // font-weight: bold;
+    letter-spacing: 3px;
+}
+.yyyy {
+    padding-bottom: 10px;
+}
+.zzzz {
+    transform: translateX(10px);
+    color: #d0e2f1;
+}
+
+.info-box_1 div:first-child {
+    transform: translateY(50px);
+}
+.info-box_1 div:nth-child(2) {
+    transform: translateY(70px);
+}
+
+.info-box_1,
+.info-box_2,
+.info-box_3 {
+    & div:last-child {
+        width: 100px;
+        height: 100px;
+    }
+}
+
+.info-box_1 div:last-child {
+    background: url('@/assets/img/screen/center1_2.png') no-repeat;
+    background-size: 100% 100%;
+}
+.info-box_2 div:last-child {
+    transform: scale(1.2);
+    background: url('@/assets/img/screen/center1_3.png') no-repeat;
+    background-size: 100% 100%;
+}
+.info-box_3 div:last-child {
+    transform: scale(1.2);
+    background: url('@/assets/img/screen/center1_4.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.info-box_2 div:first-child {
+    transform: translateY(40px);
+}
+.info-box_2 div:nth-child(2) {
+    transform: translateY(60px);
+}
+.info-box_3 div:first-child {
+    font-size: 18px;
+    transform: translateY(20px);
+}
+.info-box_3 div:nth-child(2) {
+    transform: translateY(40px);
+}
+.info-box_4 div:nth-child(1) {
+    color: #e5cb03;
+    font-family: DS-TITle;
+    font-size: 22px;
+    letter-spacing: 2px;
+    transform: translateY(10px);
+}
+.info-box_4 div:nth-child(2) {
+    font-family: DS-TITle;
+    font-size: 22px;
+    letter-spacing: 2px;
+    transform: translateY(20px);
+}
+.info-box_4 div:nth-child(3) {
+    transform: translateY(40px);
+}
+</style>

src/views/big-screen/model-components/left-two-model-new.vue

@@ -12,11 +12,13 @@
                 </div>
                 <div class="info">
                     <div class="title">输电线路类</div>
-                    <div style='display: flex'>
-                        <div class="value">210<span class="unit">个</span></div>
-                        <div class="percentage">50%</div>
+                    <div style="display: flex">
+                        <div class="value">
+                            {{ leftData_3[0].deviceCount || 0 }}
+                            <span class="unit">个</span>
+                        </div>
+                        <div class="percentage">{{ leftData_3[0].ratio }}%</div>
                     </div>
-
                 </div>
             </div>
 
@@ -27,9 +29,12 @@
                 </div>
                 <div class="info">
                     <div class="title">变电安装类</div>
-                    <div style='display: flex'>
-                        <div class="value">120<span class="unit">个</span></div>
-                        <div class="percentage">30%</div>
+                    <div style="display: flex">
+                        <div class="value">
+                            {{ leftData_3[1].deviceCount || 0 }}
+                            <span class="unit">个</span>
+                        </div>
+                        <div class="percentage">{{ leftData_3[1].ratio }}%</div>
                     </div>
                 </div>
             </div>
@@ -41,9 +46,12 @@
                 </div>
                 <div class="info">
                     <div class="title">检修调试类</div>
-                    <div style='display: flex'>
-                        <div class="value">80<span class="unit">个</span></div>
-                        <div class="percentage">20%</div>
+                    <div style="display: flex">
+                        <div class="value">
+                            {{ leftData_3[2].deviceCount || 0 }}
+                            <span class="unit">个</span>
+                        </div>
+                        <div class="percentage">{{ leftData_3[2].ratio }}%</div>
                     </div>
                 </div>
             </div>
@@ -53,7 +61,8 @@
 
 <script lang="ts" setup>
 import ScreenTitle from 'components/ScreenTitle/index.vue'
-import { getLeaseCountByTypeNameApi } from 'http/api/screen/index'
+import { getLeaseCountByTypeNameApi, getLeaseCountApi } from 'http/api/screen/index'
+import { LeaseCount } from '../../../types/home'
 const leftData_2 = ref<any>([])
 const getLeaseCountByTypeNameData = async () => {
     const { data: res }: any = await getLeaseCountByTypeNameApi()
@@ -63,7 +72,15 @@ const getLeaseCountByTypeNameData = async () => {
         e.ratio = e.ratio.toFixed(2)
     })
 }
+
+const leftData_3 = ref<LeaseCount[]>([])
 getLeaseCountByTypeNameData()
+
+const getLeaseCountData = async () => {
+    const { data: res }: any = await getLeaseCountApi()
+    leftData_3.value = res
+}
+getLeaseCountData()
 </script>
 
 <style scoped lang="scss">
@@ -108,7 +125,7 @@ getLeaseCountByTypeNameData()
                 .value {
                     font-family: DS-TITle;
                     font-size: 30px;
-                    color: #7FE4CC;
+                    color: #7fe4cc;
                     .unit {
                         font-size: 14px;
                     }
@@ -149,5 +166,4 @@ getLeaseCountByTypeNameData()
         }
     }
 }
-
 </style>