276 lines
7.3 KiB
Vue
276 lines
7.3 KiB
Vue
<template>
|
|
<div class="right-warp">
|
|
<div class="top-box">
|
|
<div class="title-tip">
|
|
<div class="small_title">项目装备</div>
|
|
<div class="more">更多 ></div>
|
|
</div>
|
|
<div class="equipment-list">
|
|
<div class="equip-item1 item">
|
|
<div class="title">年度总投资额</div>
|
|
<div class="number">{{ 2600 }} <span class="unit">亿元</span></div>
|
|
</div>
|
|
<div class="equip-item2 item">
|
|
<div class="title">在建工程数</div>
|
|
<div class="number">{{ 19467 }} <span class="unit">个</span></div>
|
|
</div>
|
|
<div class="equip-item3 item">
|
|
<div class="title">在用装备数</div>
|
|
<div class="number">{{ 45036 }} <span class="unit">台</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="top-bottom">
|
|
<div class="usage-rate">
|
|
<div class="usage-rate-item" @click="openDialogEquip(1)">
|
|
<img src="../../img/usage-rate.png" alt="" />
|
|
<div style="margin: 0 10px">在用率</div>
|
|
<div style="width: 250px">
|
|
<SegmentProgress :value="proportion" :total="20" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="turnround-rate">
|
|
<div class="turnround-rate-title" @click="openDialogEquip(2)">
|
|
<span style="color: #ccc; font-size: 15px;margin-right: 10px;font-weight: 500;">周转率 </span>
|
|
{{ turnoverRate }}
|
|
<span class="unit"> 次/年</span></div
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center-box">
|
|
<el-row :gutter="20">
|
|
<el-col :span="10" :offset="0">
|
|
<div class="usage-rate-situation">
|
|
<UsageRateSituationList @openDialog="openDialog" />
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="14" :offset="0">
|
|
<div class="usage-rate-pro">
|
|
<ProEquipSituationList @openDialog="openDialogPro" />
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="bottom-box">
|
|
<EquipUsageRate />
|
|
</div>
|
|
|
|
<!-- 更多 -->
|
|
<UsageRateMore ref="usageRateMore" />
|
|
<!-- 更多 -->
|
|
<ProEquipMore ref="proEquipMore" />
|
|
<EquipItemMore ref="equipItemMore" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UsageRateSituationList from './UsageRateSituationList.vue'
|
|
import ProEquipSituationList from './ProEquipSituationList.vue'
|
|
import EquipUsageRate from './EquipUsageRate'
|
|
import { getProjectEquipmentApi } from '@/api/wsScreen'
|
|
import UsageRateMore from './UsageRateMore.vue'
|
|
import ProEquipMore from './ProEquipMore'
|
|
import EquipItemMore from './EquipItemMore.vue'
|
|
import SegmentProgress from './SegmentProgress.vue'
|
|
|
|
export default {
|
|
components: {
|
|
UsageRateSituationList,
|
|
ProEquipSituationList,
|
|
EquipUsageRate,
|
|
UsageRateMore,
|
|
ProEquipMore,
|
|
EquipItemMore,
|
|
SegmentProgress,
|
|
},
|
|
data() {
|
|
return {
|
|
annualTotal: 0, // 年度总投资额
|
|
projectNUm: 0, // 在建工程数
|
|
num: 0, // 在用装备数
|
|
turnoverRate: 0, // 周转率
|
|
proportion: 0, // 在用率
|
|
dlgTitle: '',
|
|
dlgParams: {},
|
|
}
|
|
},
|
|
created() {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
async getInfo() {
|
|
try {
|
|
const res = await getProjectEquipmentApi()
|
|
console.log('🚀 ~ getInfo ~ res:', res)
|
|
this.annualTotal = res.data.annualTotal
|
|
this.projectNUm = res.data.projectNUm
|
|
this.num = res.data.num
|
|
this.turnoverRate = res.data.turnoverRate
|
|
this.proportion = res.data.proportion || 0
|
|
} catch (error) {
|
|
console.log('🚀 ~ getInfo ~ error:', error)
|
|
}
|
|
},
|
|
openDialog() {
|
|
this.$refs.usageRateMore.openDialog()
|
|
},
|
|
openDialogPro() {
|
|
this.$refs.proEquipMore.openDialog()
|
|
},
|
|
openDialogEquip(type) {
|
|
this.$refs.equipItemMore.openDialog(type)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.right-warp {
|
|
margin: 80px 80px 0 0;
|
|
.title-tip {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 10px;
|
|
padding-left: 45px;
|
|
font-family: DS-TITLE;
|
|
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
.more {
|
|
margin-right: 20px;
|
|
color: #5b99ad;
|
|
cursor: pointer;
|
|
font-weight: 400;
|
|
font-family: '';
|
|
font-size: 12px;
|
|
/* 清除背景渐变相关属性 */
|
|
background: none;
|
|
background-clip: unset;
|
|
-webkit-background-clip: unset;
|
|
-webkit-text-fill-color: #5b99ad;
|
|
}
|
|
|
|
.small_title {
|
|
margin-left: 10px;
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
background: linear-gradient(180deg, #FFF 19.35%, #5DCBFE 77.42%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
.top-box {
|
|
height: 180px;
|
|
background-image: url('../../img/pro-equip.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.center-box {
|
|
height: 350px;
|
|
.usage-rate-situation {
|
|
width: 100%;
|
|
height: 350px;
|
|
background-image: url('../../img/equip-usage.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.usage-rate-pro {
|
|
width: 100%;
|
|
height: 350px;
|
|
background-image: url('../../img/equip-usage.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.bottom-box {
|
|
height: 310px;
|
|
background-image: url('../../img/equip-usage-rate.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.equipment-list {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
|
|
.item {
|
|
padding-left: 39px;
|
|
width: 202px;
|
|
height: 60px;
|
|
text-align: center;
|
|
|
|
.title {
|
|
margin: -5px 0 7px;
|
|
}
|
|
|
|
.number {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
font-family: 'DIN';
|
|
background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.unit {
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
background: linear-gradient(180deg, #fff 25.81%, #FFF 77.42%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
.equip-item1 {
|
|
background-image: url('../../img/total-investment.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.equip-item2 {
|
|
background-image: url('../../img/under-pro.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.equip-item3 {
|
|
background-image: url('../../img/inuse-equip.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.top-bottom {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
.usage-rate {
|
|
.usage-rate-item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.turnround-rate {
|
|
width: 365px;
|
|
height: 40px;
|
|
background-image: url('../../img/turnround-rate.png');
|
|
background-size: 100% 100%;
|
|
|
|
.turnround-rate-title {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #4aa4f4;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
.unit {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|