493 lines
19 KiB
Vue
493 lines
19 KiB
Vue
<template>
|
|
<div class="content">
|
|
<div class="content-title">
|
|
<img src="../../../../../assets/cityScreen/equiQuantityBg.png" style="width: 100%;height: 100%;" />
|
|
<div class="title">
|
|
装备数量价值
|
|
</div>
|
|
</div>
|
|
<div class="content-view">
|
|
<div class="content-view-item">
|
|
<div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../../../../../assets/cityScreen/quantityIcon1.png" style="width: 90%;height: 80%;" />
|
|
</div>
|
|
<div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
|
|
<div class="item-title">
|
|
<span class="title2">线路装备</span>
|
|
</div>
|
|
<div style="width: 100%;height: 40%;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 id="lineChartOne" style="width: 100%;height: 20%;"></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;">{{lineData.fiveYearCount}}</span>
|
|
<span class="unit2">{{lineData.fiveYearRatio}}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00FEFC;">
|
|
<span class="unit2" style="color: #00FEFC;">5-10年</span>
|
|
<span style="font-weight: 700;">{{lineData.fiveToTenYearCount}}</span>
|
|
<span class="unit2" style="color: #00FEFC;">{{lineData.fiveToTenYearRatio}}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00FEFC;">
|
|
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
|
|
<span style="font-weight: 700;">{{lineData.aboveTenYearCount}}</span>
|
|
<span class="unit2" style="color: #1E8DFF;">{{lineData.aboveTenYearRatio}}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-view-item">
|
|
<div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../../../../../assets/cityScreen/quantityIcon2.png" style="width: 90%;height: 80%;" />
|
|
</div>
|
|
<div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
|
|
<div class="item-title">
|
|
<span class="title2">变电装备</span>
|
|
</div>
|
|
<div style="width: 100%;height: 40%;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 id="lineChartTwo" style="width: 100%;height: 20%;"></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;">{{bdData.fiveYearCount}}</span>
|
|
<span class="unit2">{{bdData.fiveYearRatio}}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00FEFC;">
|
|
<span class="unit2" style="color: #00FEFC;">5-10年</span>
|
|
<span style="font-weight: 700;">{{bdData.fiveToTenYearCount}}</span>
|
|
<span class="unit2" style="color: #00FEFC;">{{bdData.fiveToTenYearRatio}}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00FEFC;">
|
|
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
|
|
<span style="font-weight: 700;">{{bdData.aboveTenYearCount}}</span>
|
|
<span class="unit2" style="color: #1E8DFF;">{{bdData.aboveTenYearRatio}}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-view-item">
|
|
<div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
|
|
<img src="../../../../../assets/cityScreen/quantityIcon3.png" style="width: 90%;height: 80%;" />
|
|
</div>
|
|
<div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
|
|
<div class="item-title">
|
|
<span class="title2">电缆装备</span>
|
|
</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 id="lineChartThree" style="width: 100%;height: 20%;"></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;">{{dlData.fiveYearCount}}</span>
|
|
<span class="unit2">{{dlData.fiveYearRatio}}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00FEFC;">
|
|
<span class="unit2" style="color: #00FEFC;">5-10年</span>
|
|
<span style="font-weight: 700;">{{dlData.fiveToTenYearCount}}</span>
|
|
<span class="unit2" style="color: #00FEFC;">{{dlData.fiveToTenYearRatio}}%</span>
|
|
</div>
|
|
<div class="num2" style="color: #00FEFC;">
|
|
<span class="unit2" style="color: #1E8DFF;">10年以上</span>
|
|
<span style="font-weight: 700;">{{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%;
|
|
}
|
|
.content-title{
|
|
width: 100%;
|
|
height: 18%;
|
|
position: relative;
|
|
color: #78D6FF;
|
|
}
|
|
.title{
|
|
font-size: 24px;
|
|
position: absolute;
|
|
top: 42%;
|
|
left: 15%;
|
|
}
|
|
.content-view{
|
|
width: 100%;
|
|
height: 80%;
|
|
padding-left: 8%;
|
|
}
|
|
.content-view-item{
|
|
width: 100%;
|
|
height: 32%;
|
|
margin-bottom: 1%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.item-title{
|
|
width: 100%;
|
|
height: 30%;
|
|
background-image: url("../../../../../assets/cityScreen/equiQuantityTitle.png");
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 10px;
|
|
}
|
|
.title2{
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
.num{
|
|
color: #83D3F8;
|
|
font-size: 26px;
|
|
}
|
|
.unit{
|
|
font-size: 20px;
|
|
color: #ccc;
|
|
margin-left: 10px;
|
|
}
|
|
.num2{
|
|
color: #83D3F8;
|
|
font-size: 24px;
|
|
}
|
|
.unit2{
|
|
font-size: 16px;
|
|
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: 2px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
}
|
|
@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>
|