285 lines
7.9 KiB
Vue
285 lines
7.9 KiB
Vue
<template>
|
||
<div>
|
||
<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 style="display: flex; flex-direction: column; align-items: center">
|
||
<div class="equip-item-1">装备总数</div>
|
||
<div class="equip-item-2" @click="openSystemEquip">{{ equipData.total }} <span class="unit">台</span></div>
|
||
</div>
|
||
<div style="display: flex; flex-direction: column; align-items: center">
|
||
<div class="equip-item-3">总价值</div>
|
||
<div class="equip-item-4" @click="openTotalPrice"
|
||
>{{ (equipData.totalPrice / 100000000).toFixed(4) }} <span class="unit">亿元</span></div
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-box">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8" :offset="0">
|
||
<EquipItem title="线路装备" :state="state1" :pieValues="list1" @openDialog="openEquipItemMore(2)" />
|
||
</el-col>
|
||
<el-col :span="8" :offset="0">
|
||
<EquipItem title="变电装备" :state="state2" :pieValues="list2" @openDialog="openEquipItemMore(1)" />
|
||
</el-col>
|
||
<el-col :span="8" :offset="0">
|
||
<EquipItem title="电缆装备" :state="state3" :pieValues="list3" @openDialog="openEquipItemMore(3)" />
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="bottom-box">
|
||
<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>
|
||
<div class="bottom-box">
|
||
<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 class="bottom-explain">
|
||
<div>备注说明：再用装备包含于共享装备。</div>
|
||
</div>
|
||
</div>
|
||
</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)
|
||
if (!data || data.length === 0) return
|
||
data.forEach((item) => {
|
||
if (item.targetType == 'line') {
|
||
this.state1.num = item.num || 0
|
||
this.state1.price = item.price || 0
|
||
this.list1[0] = item.five
|
||
this.list1[1] = item.fiveOrTen
|
||
this.list1[2] = item.ten
|
||
} else if (item.targetType == 'cable') {
|
||
this.state2.num = item.num || 0
|
||
this.state2.price = item.price || 0
|
||
this.list2[0] = item.five
|
||
this.list2[1] = item.fiveOrTen
|
||
this.list2[2] = item.ten
|
||
} else if (item.targetType == 'substation') {
|
||
this.state3.num = item.num || 0
|
||
this.state3.price = item.price || 0
|
||
this.list3[0] = item.five
|
||
this.list3[1] = item.fiveOrTen
|
||
this.list3[2] = item.ten
|
||
}
|
||
})
|
||
} 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(type) {
|
||
this.$refs.equipItemMore.openDialog(type)
|
||
},
|
||
openRemarkMore() {
|
||
this.$refs.remarkMore.openDialog()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.left-warp {
|
||
height: calc(100vh - 100px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.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; */
|
||
height: 18%;
|
||
background-image: url('../../img/equipmentOverview.png');
|
||
background-size: 100% 100%;
|
||
|
||
.equip-box {
|
||
padding-left: 20px;
|
||
/* margin-top: 20px; */
|
||
/* margin-bottom: 13px; */
|
||
height: 100px;
|
||
background-image: url('../../img/equipmentOverviewData.png');
|
||
background-size: 100% 100%;
|
||
/* position: relative; */
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.unit {
|
||
font-size: 15px;
|
||
color: #ccc;
|
||
}
|
||
.equip-item-1 {
|
||
margin-bottom: 15px;
|
||
}
|
||
.equip-item-2 {
|
||
color: #fefbdc;
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
}
|
||
.equip-item-3 {
|
||
margin-bottom: 15px;
|
||
}
|
||
.equip-item-4 {
|
||
color: #fefbdc;
|
||
font-size: 28px;
|
||
font-weight: 800;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.item-box {
|
||
padding: 0 20px;
|
||
}
|
||
.bottom-box {
|
||
.bottom-explain {
|
||
margin-top: 15px;
|
||
color: #97aad6;
|
||
font-size: 12px;
|
||
display: flex;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
.bottom-tip {
|
||
}
|
||
.bottom-left {
|
||
height: 210px;
|
||
background-image: url('../../img/unit-equip.png');
|
||
background-size: 100% 100%;
|
||
.bottom-list {
|
||
margin: 5px 0 10px;
|
||
height: 165px;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
.bottom-right {
|
||
/* height: 250px; */
|
||
background-image: url('../../img/equip-status.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|