295 lines
8.5 KiB
Vue
295 lines
8.5 KiB
Vue
<template>
|
||
<div class="left-warp">
|
||
<div class="top-box">
|
||
<div class="title-tip">
|
||
<div>装备总览</div>
|
||
<div class="more" @click="handleEquipOverview">更多 ></div>
|
||
</div>
|
||
<div class="equip-box">
|
||
<div class="equip-item-1">装备总数</div>
|
||
<div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div>
|
||
<div class="equip-item-3">总价值</div>
|
||
<div class="equip-item-4" @click="openTotalPrice"
|
||
>{{ equipData.totalPrice }} <span class="unit">亿元</span></div
|
||
>
|
||
</div>
|
||
<div class="item-box">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8" :offset="0">
|
||
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore" />
|
||
</el-col>
|
||
<el-col :span="8" :offset="0">
|
||
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore" />
|
||
</el-col>
|
||
<el-col :span="8" :offset="0">
|
||
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore" />
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="bottom-box">
|
||
<el-row :gutter="20">
|
||
<el-col :span="13" :offset="0">
|
||
<div class="bottom-left">
|
||
<div class="title-tip">
|
||
<div class="tip-title">单位装备配置</div>
|
||
<div class="more" @click="openEquipConfig">更多 ></div>
|
||
</div>
|
||
<div class="bottom-list">
|
||
<UnitEquipmentConfig />
|
||
</div>
|
||
</div>
|
||
<div class="bottom-explain" @click="openRemarkMore">
|
||
<div>备注说明：</div>
|
||
<div>
|
||
<div>施工装备配置率=∑ⁿ¹专用装备实际配置率+∑ⁿ¹新型装备实际配置率 </div>
|
||
<div>装备实际配置率=实际装配配置数量÷基本配置标准数量×装备赋值×配置折算率 </div>
|
||
<div>专用装备满分80分，创新装备满分20分，满分100分</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="11" :offset="0">
|
||
<div class="bottom-right">
|
||
<div class="title-tip">
|
||
<div class="tip-title">装备状态</div>
|
||
<div class="more" @click="openStatusMore">更多 ></div>
|
||
</div>
|
||
<div class="equip-status">
|
||
<EquipStatus />
|
||
</div>
|
||
</div>
|
||
<div class="bottom-explain">
|
||
<div>备注说明：再用装备包含于共享装备。</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 全量装备 -->
|
||
<AllEquip ref="allEquip" />
|
||
<!-- 单位装备配置 -->
|
||
<UnitEquipConfig ref="unitEquipConfig" />
|
||
<!-- 装备状态 -->
|
||
<EquipStatusMore ref="equipStatusMore" />
|
||
|
||
<TotalPriceMore ref="totalPriceMore" />
|
||
<EquipItemMore ref="equipItemMore" />
|
||
<SystemEquip ref="systemEquip" />
|
||
<RemarkMore ref="remarkMore" />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import EquipItem from './EquipItem.vue'
|
||
import UnitEquipmentConfig from './UnitEquipmentConfig.vue'
|
||
import EquipStatus from './EquipStatus.vue'
|
||
import AllEquip from './AllEquip.vue'
|
||
import UnitEquipConfig from './UnitEquipConfig.vue'
|
||
import EquipStatusMore from './EquipStatusMore.vue'
|
||
import TotalPriceMore from './TotalPriceMore.vue'
|
||
import EquipItemMore from './EquipItemMore.vue'
|
||
import SystemEquip from './SystemEquip.vue'
|
||
import RemarkMore from './RemarkMore'
|
||
import { getTotalEquipmentApi, getEquipmentClassificationApi } from '@/api/wsScreen'
|
||
|
||
export default {
|
||
components: {
|
||
EquipItem,
|
||
UnitEquipmentConfig,
|
||
EquipStatus,
|
||
AllEquip,
|
||
UnitEquipConfig,
|
||
EquipStatusMore,
|
||
EquipItemMore,
|
||
TotalPriceMore,
|
||
SystemEquip,
|
||
RemarkMore,
|
||
},
|
||
data() {
|
||
return {
|
||
// 装备总览
|
||
equipData: {
|
||
total: 0, // 装备总数
|
||
totalPrice: 0, // 总价值
|
||
},
|
||
state1: {},
|
||
state2: {},
|
||
state3: {},
|
||
list1: [],
|
||
list2: [],
|
||
list3: [],
|
||
}
|
||
},
|
||
created() {
|
||
this.getInfo()
|
||
this.getEquipList()
|
||
},
|
||
methods: {
|
||
async getInfo() {
|
||
try {
|
||
const res = await getTotalEquipmentApi()
|
||
console.log('🚀 ~ getInfo ~ res:', res)
|
||
this.equipData.total = res.data.totalEquipmentQuantity || 0
|
||
this.equipData.totalPrice = res.data.totalValue
|
||
} catch (error) {
|
||
console.log('🚀 ~ getInfo ~ error:', error)
|
||
}
|
||
},
|
||
async getEquipList() {
|
||
try {
|
||
const { data } = await getEquipmentClassificationApi()
|
||
console.log('🚀 ~ getEquipList ~ data:', data)
|
||
this.state1.num = data.line.num || 0
|
||
this.state1.price = data.line.price || 0
|
||
this.state2.num = data.cable.num || 0
|
||
this.state2.price = data.cable.price || 0
|
||
this.state3.num = data.substation.num || 0
|
||
this.state3.price = data.substation.price || 0
|
||
this.list1[0] = data.line.five
|
||
this.list1[1] = data.line.fiveOrTen
|
||
this.list1[2] = data.line.ten
|
||
this.list2[0] = data.cable.five
|
||
this.list2[1] = data.cable.fiveOrTen
|
||
this.list2[2] = data.cable.ten
|
||
this.list3[0] = data.substation.five
|
||
this.list3[1] = data.substation.fiveOrTen
|
||
this.list3[2] = data.substation.ten
|
||
console.log('🚀 ~ getEquipList ~ this.list1:', this.list1)
|
||
console.log('🚀 ~ getEquipList ~ this.list2:', this.list2)
|
||
console.log('🚀 ~ getEquipList ~ this.list3:', this.list3)
|
||
console.log('🚀 ~ getEquipList ~ this.state1:', this.state1)
|
||
console.log('🚀 ~ getEquipList ~ this.state2:', this.state2)
|
||
console.log('🚀 ~ getEquipList ~ this.state3:', this.state3)
|
||
} catch (error) {
|
||
console.log('🚀 ~ getEquipList ~ error:', error)
|
||
}
|
||
},
|
||
handleEquipOverview() {
|
||
this.$refs.allEquip.openDialog()
|
||
},
|
||
openEquipConfig() {
|
||
this.$refs.unitEquipConfig.openDialog()
|
||
},
|
||
openStatusMore() {
|
||
this.$refs.equipStatusMore.openDialog()
|
||
},
|
||
openTotalPrice() {
|
||
this.$refs.totalPriceMore.openDialog()
|
||
},
|
||
openSystemEquip() {
|
||
this.$refs.systemEquip.openDialog()
|
||
},
|
||
openEquipItemMore() {
|
||
this.$refs.equipItemMore.openDialog()
|
||
},
|
||
openRemarkMore() {
|
||
this.$refs.remarkMore.openDialog()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.left-warp {
|
||
margin-top: 80px;
|
||
margin-left: 100px;
|
||
.title-tip {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 8px;
|
||
padding-left: 40px;
|
||
font-family: DS-TITLE;
|
||
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
.more {
|
||
margin-right: 20px;
|
||
color: #5fbbdb;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
font-family: '';
|
||
}
|
||
}
|
||
.top-box {
|
||
height: 350px;
|
||
background-image: url('../../img/equipmentOverview.png');
|
||
background-size: 100% 100%;
|
||
|
||
.equip-box {
|
||
margin-left: -15px;
|
||
margin-top: 20px;
|
||
margin-bottom: 13px;
|
||
height: 120px;
|
||
background-image: url('../../img/equipmentOverviewData.png');
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
|
||
.unit {
|
||
font-size: 15px;
|
||
color: #ccc;
|
||
}
|
||
.equip-item-1 {
|
||
position: relative;
|
||
left: 230px;
|
||
top: 20px;
|
||
}
|
||
.equip-item-2 {
|
||
position: relative;
|
||
left: 230px;
|
||
top: 40px;
|
||
color: #fefbdc;
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
}
|
||
.equip-item-3 {
|
||
position: relative;
|
||
left: 760px;
|
||
top: -40px;
|
||
}
|
||
.equip-item-4 {
|
||
position: relative;
|
||
left: 740px;
|
||
top: -20px;
|
||
color: #fefbdc;
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.item-box {
|
||
padding: 0 20px;
|
||
height: 230px;
|
||
}
|
||
}
|
||
.bottom-box {
|
||
.bottom-explain {
|
||
margin-top: 40px;
|
||
color: #97aad6;
|
||
font-size: 12px;
|
||
display: flex;
|
||
cursor: pointer;
|
||
}
|
||
.bottom-tip {
|
||
}
|
||
.bottom-left {
|
||
height: 300px;
|
||
background-image: url('../../img/unit-equip.png');
|
||
background-size: cover;
|
||
.bottom-list {
|
||
margin-top: 20px;
|
||
height: 260px;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
.bottom-right {
|
||
height: 300px;
|
||
background-image: url('../../img/equip-status.png');
|
||
background-size: cover;
|
||
}
|
||
}
|
||
}
|
||
</style>
|