517 lines
19 KiB
Vue
517 lines
19 KiB
Vue
<template>
|
|
<div class="content">
|
|
<div class="content-title"> 装备数量价值 </div>
|
|
<div class="content-view">
|
|
<div class="content-view-item">
|
|
<img src="../../../../../assets/cityScreen/quantityIcon1.png" />
|
|
<div class="item-content">
|
|
<div class="item-title"> 线路装备 </div>
|
|
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
|
|
<div class="num">
|
|
<span style="font-weight: 700">{{ lineData.deviceQuantity }}</span>
|
|
<span class="unit">台</span>
|
|
</div>
|
|
<div class="num">
|
|
<span style="font-weight: 700" v-if="lineData.totalValue > 99999999">{{
|
|
(lineData.totalValue / 100000000).toFixed(3)
|
|
}}</span>
|
|
<span style="font-weight: 700" v-else>{{ (lineData.totalValue / 10000).toFixed(2) }}</span>
|
|
<span class="unit" v-if="lineData.totalValue > 99999999">亿元</span>
|
|
<span class="unit" v-else>万元</span>
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
|
|
<div class="num2">
|
|
<span class="unit2">5年</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveYearCount }}</span>
|
|
<span class="unit2">{{ lineData.fiveYearRatio || 0 }}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00fefc; margin-left: 8px">
|
|
<span class="unit2" style="color: #00fefc">5-10年</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ lineData.fiveToTenYearCount }}</span>
|
|
<span class="unit2" style="color: #00fefc">{{ lineData.fiveToTenYearRatio || 0 }}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #1e8dff">
|
|
<span class="unit2" style="color: #1e8dff">10年以上</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ lineData.aboveTenYearCount }}</span>
|
|
<span class="unit2" style="color: #1e8dff">{{ lineData.aboveTenYearRatio || 0 }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-view-item">
|
|
<img src="../../../../../assets/cityScreen/quantityIcon2.png" />
|
|
<div class="item-content">
|
|
<div class="item-title"> 变电装备 </div>
|
|
<div style="width: 100%; display: flex; justify-content: space-between; align-items: center">
|
|
<div class="num">
|
|
<span style="font-weight: 700">{{ bdData.deviceQuantity }}</span>
|
|
<span class="unit">台</span>
|
|
</div>
|
|
<div class="num">
|
|
<span style="font-weight: 700" v-if="bdData.totalValue > 99999999">{{
|
|
(bdData.totalValue / 100000000).toFixed(3)
|
|
}}</span>
|
|
<span style="font-weight: 700" v-else>{{ (bdData.totalValue / 10000).toFixed(2) }}</span>
|
|
<span class="unit" v-if="bdData.totalValue > 99999999">亿元</span>
|
|
<span class="unit" v-else>万元</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div class="num2">
|
|
<span class="unit2">5年</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveYearCount }}</span>
|
|
<span class="unit2">{{ bdData.fiveYearRatio }}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00fefc; margin-left: 8px">
|
|
<span class="unit2" style="color: #00fefc">5-10年</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ bdData.fiveToTenYearCount }}</span>
|
|
<span class="unit2" style="color: #00fefc">{{ bdData.fiveToTenYearRatio || 0 }}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #1e8dff">
|
|
<span class="unit2" style="color: #1e8dff">10年以上</span>
|
|
<span style="font-weight: 700 padding: 0 2px">{{ bdData.aboveTenYearCount }}</span>
|
|
<span class="unit2" style="color: #1e8dff">{{ bdData.aboveTenYearRatio || 0 }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-view-item">
|
|
<img src="../../../../../assets/cityScreen/quantityIcon3.png" />
|
|
<div class="item-content">
|
|
<div class="item-title"> 电缆装备 </div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
height: 40%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div class="num">
|
|
<span style="font-weight: 700">{{ dlData.deviceQuantity }}</span>
|
|
<span class="unit">台</span>
|
|
</div>
|
|
<div class="num">
|
|
<span style="font-weight: 700" v-if="dlData.totalValue > 99999999">{{
|
|
(dlData.totalValue / 100000000).toFixed(3)
|
|
}}</span>
|
|
<span style="font-weight: 700" v-else>{{ (dlData.totalValue / 10000).toFixed(2) }}</span>
|
|
<span class="unit" v-if="dlData.totalValue > 99999999">亿元</span>
|
|
<span class="unit" v-else>万元</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
height: 40%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
"
|
|
>
|
|
<div class="num2">
|
|
<span class="unit2">5年</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveYearCount }}</span>
|
|
<span class="unit2">{{ dlData.fiveYearRatio }}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00fefc; margin-left: 8px">
|
|
<span class="unit2" style="color: #00fefc">5-10年</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ dlData.fiveToTenYearCount }}</span>
|
|
<span class="unit2" style="color: #00fefc">{{ dlData.fiveToTenYearRatio }}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #1e8dff">
|
|
<span class="unit2" style="color: #1e8dff">10年以上</span>
|
|
<span style="font-weight: 700; padding: 0 2px">{{ dlData.aboveTenYearCount }}</span>
|
|
<span class="unit2" style="color: #1e8dff">{{ dlData.aboveTenYearRatio }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { equipmentQuantityValueApi } from '@/api/screen/cityScreen'
|
|
import * as echarts from 'echarts'
|
|
export default {
|
|
data() {
|
|
return {
|
|
barWidth: 6,
|
|
myCharts1: null,
|
|
myCharts2: null,
|
|
myCharts3: null,
|
|
dataList: [],
|
|
lineData: {
|
|
aboveTenYearCount: 0,
|
|
aboveTenYearRatio: 0,
|
|
fiveToTenYearCount: 0,
|
|
fiveToTenYearRatio: 0,
|
|
fiveYearCount: 0,
|
|
fiveYearRatio: 0,
|
|
totalValue: 0, //价值
|
|
deviceQuantity: 0, //数量
|
|
}, //0
|
|
dlData: {
|
|
aboveTenYearCount: 0,
|
|
aboveTenYearRatio: 0,
|
|
fiveToTenYearCount: 0,
|
|
fiveToTenYearRatio: 0,
|
|
fiveYearCount: 0,
|
|
fiveYearRatio: 0,
|
|
totalValue: 0, //价值
|
|
deviceQuantity: 0, //数量
|
|
}, //1
|
|
bdData: {
|
|
aboveTenYearCount: 0,
|
|
aboveTenYearRatio: 0,
|
|
fiveToTenYearCount: 0,
|
|
fiveToTenYearRatio: 0,
|
|
fiveYearCount: 0,
|
|
fiveYearRatio: 0,
|
|
totalValue: 0, //价值
|
|
deviceQuantity: 0, //数量
|
|
}, //2
|
|
}
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
// console.log(window.innerWidth, window.innerHeight);
|
|
if (window.innerWidth < 3000) {
|
|
this.barWidth = 3
|
|
}
|
|
this.getEquipmentQuantity()
|
|
},
|
|
methods: {
|
|
getEquipmentQuantity() {
|
|
equipmentQuantityValueApi({ companyId: sessionStorage.getItem('companyId') }).then((response) => {
|
|
console.log(response, 'equipmentQuantityValueApi')
|
|
if (response.code == 200) {
|
|
this.dataList = response.data
|
|
this.dataList.forEach((item) => {
|
|
if (item.deviceType == 0) {
|
|
this.lineData = item
|
|
}
|
|
if (item.deviceType == 1) {
|
|
this.dlData = item
|
|
}
|
|
if (item.deviceType == 2) {
|
|
this.bdData = item
|
|
}
|
|
})
|
|
}
|
|
this.InitEChartsOne()
|
|
this.InitEChartsTwo()
|
|
this.lineChartThree()
|
|
})
|
|
},
|
|
InitEChartsOne() {
|
|
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
|
var legendData = [
|
|
{ name: '5年', data: this.lineData.fiveYearCount },
|
|
{ name: '5-10年', data: this.lineData.fiveToTenYearCount },
|
|
{ name: '10年以上', data: this.lineData.aboveTenYearCount },
|
|
]
|
|
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
|
|
var seriesList = []
|
|
for (var i = 0; i < legendData.length; i++) {
|
|
seriesList.push({
|
|
type: 'bar',
|
|
stack: '2',
|
|
legendHoverLink: false,
|
|
barWidth: this.barWidth,
|
|
data: [
|
|
{
|
|
value: legendData[i].data,
|
|
itemStyle: {
|
|
color: colorList[i],
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
var option = {
|
|
grid: {
|
|
show: true,
|
|
left: '0%',
|
|
right: '0%',
|
|
top: '0%',
|
|
bottom: '0%',
|
|
borderColor: 'transparent',
|
|
},
|
|
// backgroundColor: '#fff',
|
|
xAxis: {
|
|
show: false,
|
|
},
|
|
yAxis: [
|
|
{
|
|
inverse: true,
|
|
data: [''],
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: seriesList,
|
|
}
|
|
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'))
|
|
this.myCharts1.setOption(option)
|
|
// });
|
|
},
|
|
InitEChartsTwo() {
|
|
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
|
var legendData = [
|
|
{ name: '5年', data: this.bdData.fiveYearCount },
|
|
{ name: '5-10年', data: this.bdData.fiveToTenYearCount },
|
|
{ name: '10年以上', data: this.bdData.aboveTenYearCount },
|
|
]
|
|
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
|
|
var seriesList = []
|
|
for (var i = 0; i < legendData.length; i++) {
|
|
seriesList.push({
|
|
type: 'bar',
|
|
stack: '2',
|
|
legendHoverLink: false,
|
|
barWidth: this.barWidth,
|
|
data: [
|
|
{
|
|
value: legendData[i].data,
|
|
itemStyle: {
|
|
color: colorList[i],
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
var option = {
|
|
grid: {
|
|
show: true,
|
|
left: '0%',
|
|
right: '0%',
|
|
top: '0%',
|
|
bottom: '0%',
|
|
borderColor: 'transparent',
|
|
},
|
|
// backgroundColor: '#fff',
|
|
xAxis: {
|
|
show: false,
|
|
},
|
|
yAxis: [
|
|
{
|
|
inverse: true,
|
|
data: [''],
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: seriesList,
|
|
}
|
|
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'))
|
|
this.myCharts2.setOption(option)
|
|
// });
|
|
},
|
|
lineChartThree() {
|
|
// getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
|
var legendData = [
|
|
{ name: '5年', data: this.dlData.fiveYearCount },
|
|
{ name: '5-10年', data: this.dlData.fiveToTenYearCount },
|
|
{ name: '10年以上', data: this.dlData.aboveTenYearCount },
|
|
]
|
|
var colorList = ['#83D3F8', '#00FEFC', '#1E8DFF']
|
|
var seriesList = []
|
|
for (var i = 0; i < legendData.length; i++) {
|
|
seriesList.push({
|
|
type: 'bar',
|
|
stack: '2',
|
|
legendHoverLink: false,
|
|
barWidth: this.barWidth,
|
|
data: [
|
|
{
|
|
value: legendData[i].data,
|
|
itemStyle: {
|
|
color: colorList[i],
|
|
},
|
|
},
|
|
],
|
|
})
|
|
}
|
|
var option = {
|
|
grid: {
|
|
show: true,
|
|
left: '0%',
|
|
right: '0%',
|
|
top: '0%',
|
|
bottom: '0%',
|
|
borderColor: 'transparent',
|
|
},
|
|
// backgroundColor: '#fff',
|
|
xAxis: {
|
|
show: false,
|
|
},
|
|
yAxis: [
|
|
{
|
|
inverse: true,
|
|
data: [''],
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: seriesList,
|
|
}
|
|
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'))
|
|
this.myCharts3.setOption(option)
|
|
// });
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(26, 92, 215, 0.3));
|
|
}
|
|
.content-title {
|
|
width: 100%;
|
|
height: 38px;
|
|
padding-left: 12%;
|
|
letter-spacing: 2px;
|
|
background: url('../../../../../assets/images/cityScreen/6.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
font-size: 16px;
|
|
font-family: 'PingFang SC';
|
|
font-weight: 600;
|
|
color: #78d6ff;
|
|
line-height: 38px;
|
|
}
|
|
|
|
.content-view {
|
|
width: 100%;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
// height: 80%;
|
|
// padding-left: 8%;
|
|
}
|
|
.content-view-item {
|
|
width: 100%;
|
|
height: 33.33%;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.item-content {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
.item-title {
|
|
width: 100%;
|
|
// height: 30%;
|
|
padding: 6px 0 6px 10px;
|
|
background-image: url('../../../../../assets/cityScreen/equiQuantityTitle.png');
|
|
background-size: 100% 100%;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
letter-spacing: 2px;
|
|
}
|
|
.title2 {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
.num {
|
|
color: #83d3f8;
|
|
font-size: 14px;
|
|
}
|
|
.unit {
|
|
font-size: 14px;
|
|
color: #ccc;
|
|
margin-left: 10px;
|
|
}
|
|
.num2 {
|
|
color: #83d3f8;
|
|
font-size: 14px;
|
|
}
|
|
.unit2 {
|
|
font-size: 14px;
|
|
color: #ccc;
|
|
// margin-right: 8px;
|
|
// margin-left: 8px;
|
|
}
|
|
// @media screen and (min-width: 1080px) {
|
|
// .title {
|
|
// font-size: 10px;
|
|
// }
|
|
// .title2 {
|
|
// font-size: 10px;
|
|
// }
|
|
// .num {
|
|
// font-size: 12px;
|
|
// }
|
|
// .unit {
|
|
// font-size: 10px;
|
|
// margin-left: 2px;
|
|
// }
|
|
// .num2 {
|
|
// color: #83d3f8;
|
|
// font-size: 10px;
|
|
// }
|
|
// .unit2 {
|
|
// font-size: 8px;
|
|
// color: #ccc;
|
|
// margin-right: 1px;
|
|
// margin-left: 1px;
|
|
// }
|
|
// }
|
|
// @media screen and (min-width: 3000px) {
|
|
// .title {
|
|
// font-size: 24px;
|
|
// }
|
|
// .title2 {
|
|
// font-size: 20px;
|
|
// }
|
|
// .num {
|
|
// font-size: 26px;
|
|
// }
|
|
// .unit {
|
|
// font-size: 20px;
|
|
// margin-left: 10px;
|
|
// }
|
|
// .num2 {
|
|
// color: #83d3f8;
|
|
// font-size: 24px;
|
|
// }
|
|
// .unit2 {
|
|
// font-size: 16px;
|
|
// color: #ccc;
|
|
// margin-right: 8px;
|
|
// margin-left: 8px;
|
|
// }
|
|
// }
|
|
</style>
|