bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接口调试

This commit is contained in:
BianLzhaoMin 2025-07-03 14:11:12 +08:00
parent 333a10d368
commit 85717b1ce7
5 changed files with 585 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/http/api/screen/index.ts
View File

@ -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)

79
src/types/home.ts Normal file
View File

@ -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
}

11
src/views/big-screen/index.vue
View File

@ -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 = () => {

466
src/views/big-screen/model-components/center-model-7-3.vue Normal file
View File

@ -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>

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

@ -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>