334 lines
10 KiB
Vue
334 lines
10 KiB
Vue
<template>
|
|
<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)">
|
|
<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(-9vh)">
|
|
<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)">
|
|
<div class="yyyy">装备总类型数</div>
|
|
<div>
|
|
<span class="xxxx">
|
|
{{ devTypeNum || 0 }}
|
|
</span>
|
|
<span class="zzzz"> 类 </span>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="info-box info-box_1" style="transform: translateY(-14.5vh)">
|
|
<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)">
|
|
<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(-8.5vh)">
|
|
<div>
|
|
<span class="xxxx">
|
|
{{ devLeasingNum || 0 }}
|
|
</span>
|
|
<span class="zzzz"> 台 </span>
|
|
</div>
|
|
<div>在租装备数</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="info-box info-box_2" style="transform: translateY(-8.5vh)">
|
|
<div>
|
|
<span class="xxxx">
|
|
{{ devRepairingNum || 0 }}
|
|
</span>
|
|
<span class="zzzz"> 台 </span>
|
|
</div>
|
|
<div>退租装备数</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="info-box info-box_2" style="transform: translateY(-14vh)">
|
|
<div>
|
|
<span class="xxxx"> {{ devUsageRatio || 0 }}% </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)">
|
|
<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)">
|
|
<div>
|
|
<span class="xxxx">
|
|
{{ maTypeCountFromLease || 0 }}
|
|
</span>
|
|
<span class="zzzz"> 种 </span>
|
|
</div>
|
|
<div>需求装备种类</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="info-box info-box_3 info-box_4" style="transform: translateY(-7.5vh)">
|
|
<div>第一</div>
|
|
<div>
|
|
{{ topPopularTypeName || '' }}
|
|
</div>
|
|
<div>最需装备</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="info-box info-box_3" style="transform: translateY(-12.5vh)">
|
|
<div>
|
|
<span class="xxxx">
|
|
{{ leaseOrderRatio || 0 }}
|
|
</span>
|
|
<span class="zzzz"> % </span>
|
|
</div>
|
|
<div>需求应答率</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
getDevCountApi,
|
|
getDevLeaseCountApi,
|
|
getDemandCountApi,
|
|
getOrderTrackingApi,
|
|
} from 'http/api/screen/index'
|
|
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 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
|
|
const { data: result }: any = await getDevLeaseCountApi()
|
|
|
|
maTypeLeasingNum.value = result.maTypeLeasingNum
|
|
devLeasingNum.value = result.devLeasingNum
|
|
// 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
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
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: #8ba6bd;
|
|
}
|
|
|
|
.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>
|