<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>
