<template>
    <div class="left-charts-container">
        <div class="charts-container" style="height:38%">
            <div class="echarts-title">
                <span>下发图斑</span>
                <div class="month">
                    <div class="filter-container">

                        <div class="filter-name" @click="handlerChangeFilterOptions('issued')">{{ monthSelect['issued'] != 0 ? yearSelect['issued']+"年"+monthSelect['issued']+"月" : '全部' }}</div>
                        
                        <CloseCircleOutlined v-show="monthSelect['issued'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('issued')" />

                        <div class="filter-icon" @click="handlerChangeFilterOptions('issued')">
                            <img src="/statistical/up.png" alt="" v-if="showFilterOptions['issued']" />
                            <img src="/statistical/down.png" alt="" v-else />
                        </div>

                        <div class="filter-item-container" v-if="showFilterOptions['issued']">
                            <div class="date-select-contaienr">
                                <div class="year-select-container">
                                    <div class="last-year" @click="handlerMinusYear('issued')" >
                                        <DoubleLeftOutlined/>
                                    </div>
                                    <div class="current-year">
                                        {{yearSelect['issued']}}年
                                    </div>
                                    <div class="next-year" @click="handlerAddYear('issued')">
                                        <DoubleRightOutlined/>
                                    </div>
                                </div>
                                <div class="month-select-container">
                                    <div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('issued',item)">
                                        {{ item }}月
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="data-container">
                <div class="data-box">
                    <div class="data-item" v-for="(item,index) in issued" :key="index">
                        <div class="data-item-lable">{{item.lable}}</div>
                        <div class="data-item-value">{{item.value}}</div>
                    </div>
                </div>
                <div class="charts-box" id="one" >

                </div>
            </div>
        </div>
        <div class="charts-container" style="height:31%">
            <div class="echarts-title">
                <span>核实后新增违法耕地</span>
                <div class="month">
                    <div class="filter-container">
                        <div class="filter-name" @click="handlerChangeFilterOptions('verify')">{{ monthSelect['verify'] != 0 ? yearSelect['verify']+"年"+monthSelect['verify']+"月" : '全部' }}</div>
                        <CloseCircleOutlined v-show="monthSelect['verify'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('verify')" />
                        <div class="filter-icon" @click="handlerChangeFilterOptions('verify')">
                            <img src="/statistical/up.png" alt="" v-if="showFilterOptions['verify']" />
                            <img src="/statistical/down.png" alt="" v-else />
                        </div>

                        <div class="filter-item-container" v-if="showFilterOptions['verify']">
                            <div class="date-select-contaienr">
                                <div class="year-select-container">
                                    <div class="last-year" @click="handlerMinusYear('verify')" >
                                        <DoubleLeftOutlined/>
                                    </div>
                                    <div class="current-year">
                                        {{yearSelect['verify']}}年
                                    </div>
                                    <div class="next-year" @click="handlerAddYear('verify')">
                                        <DoubleRightOutlined/>
                                    </div>
                                </div>
                                <div class="month-select-container">
                                    <div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('verify',item)">
                                        {{ item }}月
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="data-container">
                <div class="data-box">
                    <div class="data-item" v-for="(item,index) in verify" :key="index">
                        <div class="data-item-lable">{{item.lable}}</div>
                        <div class="data-item-value">{{item.value}}</div>
                    </div>
                </div>
                <div class="charts-box" id="two" >
                    
                </div>
            </div>
        </div>
        <div class="charts-container" style="height:31%">
            <div class="echarts-title">
                <span>整改后剩余新增违法耕地</span>
                <div class="month">
                    <div class="filter-container">
                        <div class="filter-name" @click="handlerChangeFilterOptions('rectification')">{{  monthSelect['rectification'] != 0 ? yearSelect['rectification']+"年"+monthSelect['rectification']+"月" : '全部' }}</div>
                        <CloseCircleOutlined v-show="monthSelect['rectification'] !=0" style="margin-right:6px;" @click="handlerGetAllDate('rectification')" />
                        <div class="filter-icon" @click="handlerChangeFilterOptions('rectification')">
                            <img src="/statistical/up.png" alt="" v-if="showFilterOptions['rectification']" />
                            <img src="/statistical/down.png" alt="" v-else />
                        </div>

                        <div class="filter-item-container" v-if="showFilterOptions['rectification']">
                            <div class="date-select-contaienr">
                                <div class="year-select-container">
                                    <div class="last-year" @click="handlerMinusYear('rectification')" >
                                        <DoubleLeftOutlined/>
                                    </div>
                                    <div class="current-year">
                                        {{yearSelect['rectification']}}年
                                    </div>
                                    <div class="next-year" @click="handlerAddYear('rectification')">
                                        <DoubleRightOutlined/>
                                    </div>
                                </div>
                                <div class="month-select-container">
                                    <div class="month-item" v-for="item in 12" :key="item" @click="handlerMonth('rectification',item)">
                                        {{ item }}月
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="data-container">
                <div class="data-box">
                    <div class="data-item" v-for="(item,index) in rectification" :key="index">
                        <div class="data-item-lable">{{item.lable}}</div>
                        <div class="data-item-value">{{item.value}}</div>
                    </div>
                </div>
                <div class="charts-box" id="three">
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { monthAllOptions } from '@/utils/global';
import {ref,onMounted} from 'vue';
import * as echarts from 'echarts';
import {getIssuedStatitical,getVerifyStatitical,getRectificationStatitical} from '@/api/tiankongdi/index'
import {DoubleLeftOutlined,DoubleRightOutlined,CloseCircleOutlined} from '@ant-design/icons-vue'

const filters = monthAllOptions();
// const showFilterOptions = ref(false);
const showFilterOptions = ref({
    issued:false,
    verify:false,
    rectification:false,
})
// const currentFilter = ref(0);
const currentFilter = ref({
    issued:0,
    verify:0,
    rectification:0,
});
// const currentFilterName = ref('全部');
const currentFilterName = ref({
    issued:"全部",
    verify:"全部",
    rectification:"全部",
});

function handlerChangeFilterOptions(type) {
    showFilterOptions.value[type] = !showFilterOptions.value[type];
  }

const yearSelect = ref({
    issued:parseInt(new Date().getFullYear()),
    verify:parseInt(new Date().getFullYear()),
    rectification:parseInt(new Date().getFullYear()),
})

const monthSelect = ref({
    issued:parseInt(new Date().getMonth()),
    verify:parseInt(new Date().getMonth()),
    rectification:parseInt(new Date().getMonth()),
})



function handlerAddYear(type){
    yearSelect.value[type] = yearSelect.value[type]+1;
    handlerCheckedFilter(type,1,true);
}

function handlerMinusYear(type){
    yearSelect.value[type] = yearSelect.value[type]-1;
    handlerCheckedFilter(type,0,true);
}

function handlerMonth(type,item){
    monthSelect.value[type] = item;
    handlerCheckedFilter(type,item);
}

function handlerGetAllDate(type){
    monthSelect.value[type] = 0;
    handlerCheckedFilter(type,0);
}

function handlerCheckedFilter(type,item,state=false) {
    currentFilter.value[type] = item.value;
    currentFilterName.value[type] = yearSelect.value[type]+"-"+monthSelect.value[type];
    if(!state){
        showFilterOptions.value[type] = false;
    }

    switch(type){
        case "issued":
            handlerGetIssuedStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
            break;
        case "verify":
            handlerGetVerifyStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
            break;
        case "rectification":
            handlerGetRectificationStatitical(monthSelect.value[type]>0?currentFilterName.value[type]:null)
            break;
    }
}

const issued = ref([
    {
        mark:"xiafacount",
        lable:"下发图斑数（宗）",
        value:7098
    },{
        mark:"tubanarea",
        lable:"图斑面积（亩）",
        value:"2,4044.55"
    },{
        mark:"gengdiarea",
        lable:"耕地面积(亩）",
        value:780.38
    },{
        mark:"jibenarea",
        lable:"永农面积(亩）",
        value:110.47
    },
])


const verify = ref([
    {
        mark:"xinzengcount",
        lable:"新增违法个数(个）",
        value:0
    },{
        mark:"gengdiarea",
        lable:"耕地面积(亩）",
        value:0
    },{
        mark:"jibenarea",
        lable:"永农面积(亩）",
        value:0
    },
])

const rectification = ref([
    {
        mark:"shengyucount",
        lable:"剩余违法个数(个）",
        value:0
    },{
        mark:"gengdiarea",
        lable:"耕地面积(亩）",
        value:0
    },{
        mark:"jibenarea",
        lable:"永农面积(亩）",
        value:0
    },
])

const chartOneData = ref(
    [
          {
            mark:"jianshecount",
            name: "建设用地",
            value: 70,
            unit: "宗"
          },
          {
            mark:"nongyongdicount",
            name: "农用地",
            value: 20,
            unit: "宗"
          },
          {
            mark:"tuiduitucount",
            name: "推堆土",
            value: 30,
            unit: "宗"
          }
    ]
)

const chartTowData = ref( [
    {
        mark:"oneyixia",
        name: "拆除复耕",
        value: 0,
        unit: "宗"
    },{
        mark:"onetofive",
        name: "补办手续",
        value: 0,
        unit: "宗"
    },{
        mark:"fiveyishang",
        name: "未整改",
        value: 0,
        unit: "宗"
    }
])

const chartThreeData = ref( [
    {
        mark:"oneyixia",
        name: "1亩以下",
        value: 0,
        unit: "宗"
    },{
        mark:"onetofive",
        name: "1~5亩",
        value: 0,
        unit: "宗"
    },{
        mark:"fiveyishang",
        name: "5亩以上",
        value: 0,
        unit: "宗"
    }
])

async function handlerGetIssuedStatitical(month=null){
    let data = await getIssuedStatitical({month:month});
    for(let key in data){
        issued.value?.forEach((item,index)=>{
            if(item.mark == key){
                issued.value[index].value = data[key]
            }
        })
        chartOneData.value?.forEach((item,index)=>{
            if(item.mark == key){
                chartOneData.value[index].value = data[key]
            }
        })

    }
    handlerLoadChartsOne(chartOneData.value);
}

async function handlerGetVerifyStatitical(month=null){
    let data = await getVerifyStatitical({month:month});
    for(let key in data){
        verify.value?.forEach((item,index)=>{
            if(item.mark == key){
                verify.value[index].value = data[key]
            }
        })
        chartTowData.value?.forEach((item,index)=>{
            if(item.mark == key){
                chartTowData.value[index].value = data[key]
            }
        })
        handlerLoadChartsTow(chartTowData.value);
    }

    
}

async function handlerGetRectificationStatitical(month=null){
    let data = await getRectificationStatitical({month:month});
    for(let key in data){
        rectification.value?.forEach((item,index)=>{
            if(item.mark == key){
                rectification.value[index].value = data[key]
            }
        })
        chartThreeData.value?.forEach((item,index)=>{
            if(item.mark == key){
                chartThreeData.value[index].value = data[key]
            }
        })
        handlerLoadChartsThree(chartThreeData.value);
    }
}


let chartOne,chartTwo,chartThree;

function handlerLoadChartsOne(dataArr){
    let data = [];
    let total = 0;
    let colorList = ["#10eaac", "#2647f9", "#fedc15"];
    let colorListSilder = ["rgba(16,234,172,0.2)", "rgba(38,71,249,0.2)", "rgba(254,220,21,0.2)"];

    
    for (let i = 0; i < dataArr.length; i++) {

        dataArr[i].itemStyle = {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: colorList[i],
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0
                }
    }

    let option  = {
        tooltip:{
            trigger: 'item',
            borderColor: 'rgba(255,255,255,.1)',
            backgroundColor: 'rgba(13,5,30,.6)',
            borderWidth: 1,
            color:"#fff",
            padding: 5,
            formatter: function(parms) {
                var str = parms.marker + "" + parms.data.name + "</br>" +
                    "数量：" + parms.data.value + "宗</br>";
                return str;
            },
            axisPointer: {
                type: 'shadow',
            },
            textStyle: {
                fontSize: 14,
            },
        },
        
        legend: {
          orient: "horizontal",
          width:"100%",
          top:  0,
          left: "center",
          right:0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#f9f9f9",
            fontSize: 12
          },
          data:["建设用地","农用地","推堆土"],
          show: true
        },
        series: [
            {
                type: 'gauge',
                splitNumber: 15, //刻度数量
                min: 0,
                max: 100,
                radius: "75%", //图表尺寸
                center: ['50%', '55%'],
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 0,
                        shadowBlur: 0,
                        color: [
                            [1, '#0dc2fe']
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: 'auto',
                        width: 2
                    },
                    length: -8,
                    splitNumber: 5
                },
                splitLine: {
                    show: true,
                    length: 5,
                    lineStyle: {
                        color: 'auto',
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: { //仪表盘指针
                    show: 0,
                },
                detail: {
                    show: 0,
                },
            }, 
            {
                hoverOffset: 1,
                startAngle:180,
                type: "pie",
                radius: ["46%", "60%"],
                center: ["50%", "55%"],
                color: colorList,
                label: {
                    normal: {
                        formatter: '{c|{c}}{b|宗}',
                        rich: {
                            b: {
                                margin:10,
                                fontSize: 14,
                                color: '#f5f5f5',
                                overflow: 'truncate', // 防止文字超出
                                position: 'outside', // 标签位置
                                alignTo: 'none', // 自定义位置
                                edgeDistance: '10%', // 标签到饼图边界的距离
                            },
                            c: {
                                // position:"outer",
                                // alignTo:"labelLine",
                                // margin:10,
                                fontSize: 24,
                                align: 'left',
                                padding: [0,0,0,0],
                                overflow: 'truncate', // 防止文字超出
                                position: 'outside', // 标签位置
                                alignTo: 'none', // 自定义位置
                                edgeDistance: '10%', // 标签到饼图边界的距离
                            }
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 20,
                        lineStyle: {
                            width: 2
                        }
                    }
                },
                data: dataArr.map((item, index)=> {
                    item.label = { 
                        color:colorList[index]
                    }
                    return item;
                }),
            }
        ]
    };
    if(chartOne){
        chartOne.setOption(option);
    }else{
        let chartDom = document.getElementById('one');
        chartOne = echarts.init(chartDom);
        chartOne.setOption(option);
    }
    
}

function handlerLoadChartsTow(dataArr){
    var colorList = ['#21d6f0','#10eaac','#f8b53f'];
    var colors = [
        //渐变颜色
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: '#208fb7' // 0% 处的颜色
                },{
                    offset: 0.5,
                    color: '#21d6f0' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#21d6f0' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: '#10eaac' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#11ffe5' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: '#cc8518' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#f8b53f' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
    ]
    let option = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow',
            },
            textStyle: {
                fontSize: 14,
            },
            formatter: "{b}: {c}宗",
        },
        graphic: {
            elements: [{
                type: 'image',
                style: {
                    // image: imgUrl,
                    width: 180,
                    height: 180
                },
                left: 'center',
                top: 'center'
            }]
        },
        title: {
            text: '',
            x: 'center',
            y: 'center',
            textStyle: {
                width:50,
                color: '#fff',
                fontSize: 14
            }

        },
        legend: {
            orient: "horizontal",
            width:"100%",
            top:  0,
            left: "center",
            right:0,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "#f9f9f9",
                fontSize: 12
            },
            data: ['拆除复耕','补办手续','未整改'],
            show: true
        },
        color: colors,
        series: [
            // 数据展示层
            {
                type: 'pie',
                center: ['50%', '55%'],
                radius: ['58%', '78%'],
                startAngle: 180,
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        formatter: '{c|{c}}{b|宗}',
                        rich: {
                            b: {
                                fontSize: 14,
                                color: '#f5f5f5',
                                align: 'right',
                                // padding: [-10,60,10,0]
                            },
                            c: {
                                fontSize: 24,
                                align: 'left',
                                padding: [0,0,0,0],
                                // color:'#fff'
                            }
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 10,
                        lineStyle: {
                            width: 2
                        }
                    }
                },
                data:dataArr.map((item, index)=> {
                    item.label = { 
                        color:colorList[index]
                    }
                    return item;
                }),
            },
            // 外边框虚线
            {
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: ['90%', '92%'],
                center:["50%","55%"],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: createData()
            },
        ]
    };
    if(chartTwo){
        chartTwo.setOption(option);
    }else{
        let chartDom = document.getElementById('two');
        chartTwo = echarts.init(chartDom);
        chartTwo.setOption(option);
    }
}

function handlerLoadChartsThree(dataArr){
    var colorList = ['#21d6f0','#10eaac','#f8b53f'];
    let colors = [
        //渐变颜色
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: '#208fb7' // 0% 处的颜色
                },{
                    offset: 0.5,
                    color: '#21d6f0' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#21d6f0' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: '#10eaac' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#11ffe5' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
        {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [{
                    offset: 0,
                    color: '#cc8518' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#f8b53f' // 100% 处的颜色
                }
            ],
            globalCoord: false // 缺省为 false
        },
    ]
    let option = {
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'shadow',
            },
            textStyle: {
                fontSize: 14,
            },
            formatter: "{b}: {c}宗",
        },
        graphic: {
            elements: [{
                type: 'image',
                style: {
                    // image: imgUrl,
                    width: 180,
                    height: 180
                },
                left: 'center',
                top: 'center'
            }]
        },
        title: {
            text: '',
            x: 'center',
            y: 'center',
            textStyle: {
                width:50,
                color: '#fff',
                fontSize: 14
            }

        },
        legend: {
            orient: "horizontal",
            width:"100%",
            top:  0,
            left: "center",
            right:0,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "#f9f9f9",
                fontSize: 12
            },
            data: ['1亩以下','1~5亩','5亩以上'],
            show: true
        },
        color: colors,
        series: [
            // 数据展示层
            {
                name: '刷卡总量占比分析',
                type: 'pie',
                center: ['50%', '55%'],
                radius: ['58%', '78%'],
                startAngle: 180,
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        formatter: '{c|{c}}{b|宗}',
                        rich: {
                            b: {
                                fontSize: 14,
                                color: '#f5f5f5',
                                align: 'right',
                                // padding: [-10,60,10,0]
                            },
                            c: {
                                fontSize: 24,
                                align: 'left',
                                padding: [0,0,0,0],
                                // color:'#fff'
                            }
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 10,
                        length2: 10,
                        lineStyle: {
                            width: 2
                        }
                    }
                },
                data:dataArr.map((item, index)=> {
                    item.label = { 
                        color:colorList[index]
                    }
                    return item;
                }),
            },
            // 外边框虚线
            {
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: ['90%', '92%'],
                center:["50%","55%"],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: createData()
            },
        ]
    };
    if(chartThree){
        chartThree.setOption(option);
    }else{
        let chartDom = document.getElementById('three');
        chartThree = echarts.init(chartDom);
        chartThree.setOption(option);
    }

}

function createData() {
		let dataArr = [];
		for(var i = 0; i < 200; i++) {
			if(i % 2 === 0) {
				dataArr.push({
					//name: (i + 1).toString(),
					value: 25,
					itemStyle: {
						normal: {
							color: "rgba(255,255,255,0.2)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			} else {
				dataArr.push({
					//name: (i + 1).toString(),
					value: 20,
					itemStyle: {
						normal: {
							color: "rgba(0,0,0,0)",
							borderWidth: 0,
							borderColor: "rgba(0,0,0,0)"
						}
					}
				})
			}

		}
		return dataArr
}




onMounted(()=>{
    setTimeout(function(){
        handlerGetIssuedStatitical();
        handlerGetVerifyStatitical();
        handlerGetRectificationStatitical();
        // handlerLoadChartsOne();
        // handlerLoadChartsTow();
        // handlerLoadChartsThree();
    },500)
})


window.addEventListener('resize', function () {
    // 当页面尺寸变化时，重新设置图表的大小
    chartOne.resize();
    chartTwo.resize();
    chartThree.resize();
});

</script>
<style type="less" scoped>
    .left-charts-container{
        /*  */
        background: linear-gradient(to left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.7));
        max-width:540px;
        min-width:540px;
        padding:24px 20px;
        height:100vh;
        padding-top:90px;
        display: flex;
        flex-direction: column;
        .charts-container{
            height:33%;
            width:100%;
            .echarts-title{
                width:100%;
                height:44px;
                line-height:44px;
                font-size: 20px;
                color: #FFFFFF;
                text-indent:40px;
                position:relative;
                background-image: url("/statistical/small-title.png");
            }
            .data-container{
                width:100%;
                height: calc( 100% - 44px);
                display:flex;
                position:relative;
                .data-box{
                    width:42%;
                    padding:15px 12px;
                    height:100%;
                    display:flex;
                    flex-direction: column;
                    position:relative;
                    z-index:4;
                    .data-item{
                        background:rgba(21,54,94,0.8);
                        width:100%;
                        max-height:60px;
                        min-height:50px;
                        flex:1;
                        margin:6px 0px;
                        text-align: center;
                        position:relative;
                        .data-item-lable{
                            color:#7EBBFF;
                            font-size:13px;
                            position:relative;
                            padding-top:6px;
                            &::before{
                                content:"";
                                width:5px;
                                height:5px;
                                position:absolute;
                                top:-1px;
                                left:-1px;
                                z-index:9999;
                                border-top:1px solid #2983D0;
                                border-left:1px solid #2983D0;
                            }
                            &::after{
                                content:"";
                                width:5px;
                                height:5px;
                                position:absolute;
                                top:-1px;
                                right:-1px;
                                z-index:9999;
                                border-top:1px solid #2983D0;
                                border-right:1px solid #2983D0;
                            }
                        }
                        .data-item-value{
                            color:#fff;
                            font-size:25px;
                            position:absolute;
                            bottom:0px;
                            width:100%;
                            line-height:40px;
                            font-weight: 550;
                            &::before{
                                content:"";
                                width:5px;
                                height:5px;
                                position:absolute;
                                bottom:-1px;
                                left:-1px;
                                z-index:9999;
                                border-bottom:1px solid #2983D0;
                                border-left:1px solid #2983D0;
                            }
                            &::after{
                                content:"";
                                width:5px;
                                height:5px;
                                position:absolute;
                                bottom:-1px;
                                right:-1px;
                                z-index:9999;
                                border-bottom:1px solid #2983D0;
                                border-right:1px solid #2983D0;
                            }
                        }
                        
                    }   
                }
                .charts-box{
                    position:absolute;
                    top:0px;
                    right:-60px;
                    width:80%;
                    height:100%;
                    padding:15px 0px;
                    z-index:4;
                }
            }
        }
    }
    .month {
        margin-right: 20px;
        position:absolute;
        top:12px;
        right:-20px;
        font-size:12px;
      }
      .filter-container {
        z-index: 10;
        position: relative;
        width: 124px;
        border-radius: 6px;
        height: 29px;
        background-image: url('/statistical/select-bg.png');
        line-height: 29px;
        color: #fff;
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        text-indent: 0px;
        img {
          width: 10px;
        }
        .filter-name {
          width: 80px;
          text-align: center;
          padding: 0px 2px;
          font-size: 14px;
          position: relative;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          margin-left: 4px;
        }
        .filter-item-container {
          position: absolute;
          background: rgba(11, 39, 68, 0.8);
          border: 1px solid #0a62c6;
          top: 36px;
          right: 0px;
          overflow: auto;
          &::-webkit-scrollbar {
                display: none;
            }
            
          .filter-item {
            height: 36px;
            text-align: center;
            &:hover {
              cursor: pointer;
              background: #054234;
            }
          }
          .filter-item.active {
            background: #054234;
            color: #e1ecf8;
          }
          .filter-item {
            background: #086953;
            color: #fff;
          }
          .date-select-contaienr{
            width:240px;
            .year-select-container{
                width:100%;
                height:40px;
                border-bottom:1px solid #0a62c6;
                display: flex;
                line-height:40px;
                .next-year{
                    width:40px;
                    height:40px;
                    flex:1;
                    text-align: center;
                }
                .current-year{
                    flex:auto;
                    text-align: center;
                }
                .last-year{
                    width:40px;
                    text-align: center;
                    height:40px;
                    flex:1;
                }
            }
            .month-select-container{
                width:100%;
                display:flex;
                flex-wrap: wrap;
                .month-item{
                    flex: 1 1 33%;
                    box-sizing: border-box;
                    text-align:center;
                    line-height:40px;
                    &:hover {
                        background:#035341;
                    }
                }
            }
          }
        }
      }


</style>