<template>
    <div class="left-container cim-left-container animate-border"  :class="roleinfo.btnVisible?'show':'hide'">
        <i></i><i></i>
        <div class="left-container-body">
            <div class="left-container-body-title"><span>人口信息</span></div>
            
            <div class="left-container-body-box flex column" style="height:calc(100% - 27px);">
                <div id="rkxxCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
            </div>
        </div>
        <div class="left-container-body left-container-body-middle">
            <div class="left-container-body-title"><span>房屋统计</span></div>
        
            <div class="left-container-body-box flex" style="height:calc(100% - 27px);">
                <div class="flex-1">
                    <div id="fwjglxCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
                </div>
                <div class="flex-1">
                    <div id="fwjglxCharts1" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
                </div>
                
            </div>
        </div>
        <div class="left-container-body left-container-body-bottom">
            <div class="left-container-body-title"><span>资源统计</span></div>
            <div class="left-container-body-bottom-box flex column">
                <div id="zytjCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
            </div>
        </div>
    </div>
  
  
    <div class="right-container cim-left-container animate-border" :class="roleinfo.btnRightVisible&&roleinfo.rightVisible?'show':'hide'">
        <i></i><i></i>
        <div class="left-container-body" style="padding-bottom: 0;height: 37%">
            <div class="left-container-body-title"><span>资金统计</span></div>
            <div class="flex fc-w column" style="height:calc(100% - 27px);">
                <div style="height:90px;background: rgba(5,37,30,0.1);margin: 5px 0;" class="flex ai-c jc-c">
                    <div class="flex-1 border-r flex column jc-c" style="height:50px;">
                        <div class="fz-14 fc-w">资金</div>
                        <div class="fz-14 wrap" style="color:#90FFAD;word-break:break-all"><span class="fz-16 fw-b">{{ roleinfo.rightChartsData.totalamount }}</span>万元</div>
                    </div>
                    <div class="flex-1 border-r flex column jc-c" style="height:50px;">
                        <div class="fz-14 fc-w">债权</div>
                        <div class="fz-14 wrap" style="color:#90FFAD;word-break:break-all"><span class="fz-16 fw-b">{{ roleinfo.rightChartsData.creditamount }}</span>万元</div>
                    </div>
                    <div class="flex-1 flex column jc-c" style="height:50px;">
                        <div class="fz-14 fc-w">债务</div>
                        <div class="fz-14 wrap" style="color:#90FFAD;word-break:break-all"><span class="fz-16 fw-b">{{ roleinfo.rightChartsData.debtamount }}</span>万元</div>
                    </div>
                </div>
                <div class="left-container-body-title"><span>资产统计</span></div>
                <div class="flex-1 flex">
                    <div class="flex-1">
                        <div id="zjtjCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
                    </div>
                    <div class="flex column" style="width:110px;">
                        <div class="flex-1 mb-1 zjtj-li flex jc-c column ta-l">
                            <div class="fz-14 fc-w">扶贫资产</div>
                            <div class="fz-14" style="color:#90FFAD"><span class="fz-18 fw-b">{{ roleinfo.rightChartsData.helppoorasset }}</span>宗</div>
                        </div>
                        <div class="flex-1 zjtj-li flex jc-c column ta-l">
                            <div class="fz-14 fc-w">经营性资产</div>
                            <div class="fz-14" style="color:#90FFAD"><span class="fz-18 fw-b">{{ roleinfo.rightChartsData.operateasset }}</span>宗</div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="left-container-body" style="height: 25%;">
            <!-- <div class="left-container-body-title"><span>资产统计</span></div> -->
            <div class="left-container-body-box flex column " style="height:100%">
                <div id="zctjCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
            </div>
        </div>
        <div class="left-container-body right-container-body-bottom" style="height: 28%">
            <div class="left-container-body-title"><span>合同汇总</span></div>
            <div class="left-container-body-box flex" style="height:calc(100% - 27px);">
                <div class="flex-1">
                    <div id="hthzCharts" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
                </div>
                <div class="flex-1">
                    <div id="hthzCharts1" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
import {defineComponent, reactive, onMounted,inject,watch} from "vue";
import { getMethodCommonCity, postMethodCommonCity } from '../../../api/cityManageApi';
export default defineComponent({
    name: 'realestate',
    components: {
        
    },
    props:['visible','rightShow','rightVisible','area'],
    setup(props) {
        let data = reactive({
            roleinfo:{
                areaCode: '',
                btnVisible: true,
                btnRightVisible: true,
                rightVisible: true,
                echartsVislble: true,
                peopleChartsData:{},
                houseYearChartData:{},
                houseBuildChartData:{},
                sourceChartData:{},
                rightChartsData:{},
                chartsData:{
                    
                }
            },
            
        })
        watch(
            () => props.visible,
            (newVal, oldVal) => {
                data.roleinfo.btnVisible = newVal
            }
        )
        watch(
            () => props.rightShow,
            (newVal, oldVal) => {
                console.log('newVal',newVal)
                data.roleinfo.btnRightVisible = newVal
            }
        )
        watch(
            () => props.rightVisible,
            (newVal, oldVal) => {
                data.roleinfo.rightVisible = newVal
            }
        )
        watch(
            () => props.area,
            (newVal, oldVal) => {
                data.roleinfo.areaCode = newVal.code
                methods.getPeoPleInfoData()
                methods.getHouseYearData()
                methods.getHouseBuildData()
                methods.getCharts3()
                methods.getRightData()
            }
        )
        onMounted(() => {
            methods.getPeoPleInfoData()
            methods.getHouseYearData()
            methods.getHouseBuildData()
            methods.getCharts3()
            methods.getRightData()
        })
        let echarts = inject("echarts");
        let methods = {
            getPeoPleInfoData(){
                let param = {
                    areacode: data.roleinfo.areaCode
                }
                getMethodCommonCity("/Agro_Screen/LoadpopulationInfo",param).then(res =>{
                    let rel = res.data
                    data.roleinfo.peopleChartsData = rel
                    methods.getCharts()
                })
            },
            getHouseYearData(){
                let param = {
                    areacode: data.roleinfo.areaCode
                }
                getMethodCommonCity("/Agro_Screen/LoadbuildingYearInfo",param).then(res =>{
                    let rel = res.data
                    data.roleinfo.houseYearChartData = rel
                    methods.getCharts1()
                })
            },
            getHouseBuildData(){
                let param = {
                    areacode: data.roleinfo.areaCode
                }
                getMethodCommonCity("/Agro_Screen/LoadBuildingInfo",param).then(res =>{
                    let rel = res.data
                    data.roleinfo.houseBuildChartData = rel
                    methods.getCharts2()
                })
            },
            getSourceData(){
                let param = {
                    areacode: data.roleinfo.areaCode
                }
                getMethodCommonCity("/Agro_Screen/LoadlandInfo",param).then(res =>{
                    let rel = res.data
                    data.roleinfo.sourceChartData = rel
                    // methods.getCharts3()
                })
            },
            getRightData(){
                let param = {
                    areacode: data.roleinfo.areaCode
                }
                getMethodCommonCity("/Agro_Screen/LoadScreenInforight",param).then(res =>{
                    if(res.data.length>0){
                        let rel = res.data[0]
                        data.roleinfo.rightChartsData = rel
                        methods.getCharts4()
                        methods.getCharts5()
                        methods.getCharts6()
                        methods.getCharts7()
                    }
                })
            },
            getCharts(){
                let chartBox = echarts.init(document.getElementById("rkxxCharts")); 
                let seriseData = data.roleinfo.peopleChartsData
                let xData = []
                let boyCountData = []
                let girlCountData = []
                seriseData.forEach(item =>{
                    xData.push(item.name)
                    boyCountData.push(item.mealCount)
                    girlCountData.push(item.femealCount)
                })
                let option = {
                    title: {
                        text: "数量",
                        subtext: "",
                        x: "left",
                        y: "2%",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#eeeeee",
                            fontSize: "14",
                        },
                        subtextStyle: {
                            color: "#fff",
                            fontSize: 12,
                            fontWeight: "normal",
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    legend: {
                        top: "2%",
                        right: "center",
                        textStyle: {
                            fontSize: 14,
                            color: "#fff"
                        },
                    },
                    grid: {
                        left: '0%',
                        right: '1%',
                        bottom: '1%',
                        top: '20%',
                        containLabel: true,
                        z: 22
                    },
                    xAxis: [{
                        type: 'category',
                        gridIndex: 0,
                        data: xData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0c3b71'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: '#eee',
                            fontSize:12,
                            rotate: 30
                        }
                    }],
                    yAxis: [{
                            type: 'value',
                            gridIndex: 0,
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                           
                            splitLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#8EE3FF',
                                    opacity: '0.3'
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#00E4FF'
                                }
                            },
                            axisLabel: {
                                color: '#fff',
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            name:'男',
                            barWidth: '15',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [30,30,0,0],
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#01FFD2'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(28,31,33,0.27)'
                                            }
                                        ]
                                    )
                                }
                            },
                            data: boyCountData,
                        },
                        {
                            type: 'bar',
                            name:'女',
                            barWidth: '15',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [30,30,0,0],
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#DAAA02'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(28,31,33,0.27)'
                                            }
                                        ]
                                    )
                                }
                            },
                            data: girlCountData,
                        }
                    ]
                }

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts1(){
                let chartBox = echarts.init(document.getElementById("fwjglxCharts")); 
                let seriseData = data.roleinfo.houseYearChartData
                let yData = []
                seriseData.forEach(item =>{
                    yData.push({
                        name: item.name,
                        value: item.count
                    })
                })
                let option = {
                    color:["#005826","#FBB756","#069679","#A3D39C","#39B54A","#F0F707","#07F0F7"],
                    title: {
                        text: "年限",
                        x: "center",
                        y: "center",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#fff",
                            fontSize: "16",
                        },
                    },
                    tooltip: {
                        show: true,
                        confine: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    series: [
                        {
                            name: "房屋年限统计",
                            type: "pie",
                            clockWise: true,
                            radius: ["45%", "75%"],
                            minAngle: 5,
                            itemStyle: {
                                normal: {
                                    label: {
                                        formatter: '{name|{b}}',
                                        rich: {
                                            name: {
                                                fontSize: 12,
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    lableLine:{
                                        show: true,
                                    }
                                },
                            },
                            hoverAnimation: false,
                            data: yData,
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts2(){
                let chartBox = echarts.init(document.getElementById("fwjglxCharts1")); 
                let seriseData = data.roleinfo.houseBuildChartData
                let yData = []
                seriseData.forEach(item =>{
                    yData.push({
                        name: item.name,
                        value: item.count
                    })
                })
                let option = {
                    color:["#0E29C2","#6829DB","#D1339B","#F58F34","#F4D715"],
                    title: {
                        text: "结构",
                        x: "center",
                        y: "center",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#fff",
                            fontSize: "16",
                        },
                    },
                    tooltip:{
                        show: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    series: [
                        {
                            name: "房屋结构统计",
                            type: "pie",
                            clockWise: true,
                            radius: ["45%", "75%"],
                            minAngle: 5,
                            itemStyle: {
                                normal: {
                                    label: {
                                        // alignTo: 'edge',
                                        formatter: '{name|{b}}\n{time|{c}}',
                                        minMargin: 5,
                                        edgeDistance: 10,
                                        lineHeight: 15,
                                        rich: {
                                            time: {
                                                fontSize: 12,
                                                color: '#fff'
                                            },
                                            name: {
                                                fontSize: 12,
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    // labelLine: {
                                    //     length: 15,
                                    //     length2: 0,
                                    //     maxSurfaceAngle: 20
                                    // },
                                },
                            },
                            hoverAnimation: false,
                            data: yData,
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts3(){
                let chartBox = echarts.init(document.getElementById("zytjCharts")); 
                let option = {
                    color:["#FB8E20","#D1339B","#71C631","#E4EE0C"],
                    tooltip: {
                        show: true,
                        confine: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    series: [
                        {
                            name: "资源统计",
                            type: "pie",
                            roseType: 'area',
                            minAngle: 10,
                            radius: ["40%", "80%"],
                            itemStyle: {
                                normal: {
                                    label: {
                                        // alignTo: 'edge',
                                        formatter: '{name|{b}}\n{time|{c}}',
                                        minMargin: 5,
                                        edgeDistance: 10,
                                        lineHeight: 15,
                                        color: '#fff',
                                        rich: {
                                            time: {
                                                fontSize: 12,
                                                color: '#fff'
                                            },
                                            name: {
                                                fontSize: 12,
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    // labelLine: {
                                    //     length: 15,
                                    //     length2: 0,
                                    //     maxSurfaceAngle: 20
                                    // },
                                },
                            },
                            hoverAnimation: false,
                            data: [
                                { name: '林地' , value: '19740.49'},
                                { name: '耕地' , value: '50149.76'},
                                { name: '水面' , value: '5085.93'},
                                { name: '建设用地' , value: '22720.06'}
                            ],
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts4(){
                let chartBox = echarts.init(document.getElementById("zjtjCharts")); 
                let seriseData = data.roleinfo.rightChartsData
                let sureShowData = []
                let yData = [
                    {
                        name: "其他资产",
                        value: seriseData.otherasset,
                    },
                    {
                        name: "机械设备",
                        value: seriseData.mechanicalequcount,
                    },
                    {
                        name: "办公设备",
                        value: seriseData.officeequcount,
                    }
                ]

                let sumNumber = 0;
                let maxNumer = 0
                yData.forEach(item => {
                    sumNumber += item.value;
                    if(item.value >= maxNumer) maxNumer = item.value;//记录一个最大值
                });
                 
                let number_sure = Math.round(maxNumer * 0.5);

                sureShowData = yData.map(item => {
                    return {
                        value: (number_sure + item.value).toFixed(2),
                        name: item.name
                    }
                })
            

                let option = {
                    color:["#C518FF","#24E3D0","#09B3FF"],
                    tooltip:{
                        show: true,
                        confine: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        },
                        formatter: function (param){ //还原正常值
                            return param.name + '\n' + (param.value - number_sure).toFixed(2)
                        },
                        
                    },
                    series: [
                        {
                            name: "资产统计",
                            type: "pie",
                            roseType: 'area',
                            radius: ["60%", "85%"],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true
                                    },
                                    
                                },
                            },
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    label: {
                                        alignTo: 'edge',
                                        formatter: function (param){ //还原正常值
                                            return param.name + '\n' + (param.value - number_sure).toFixed(2)
                                        },
                                        minMargin: 5,
                                        edgeDistance: 10,
                                        lineHeight: 15,
                                        color: '#fff',
                                        rich: {
                                            time: {
                                                fontSize: 10,
                                                color: '#fff'
                                            },
                                            name: {
                                                fontSize: 10,
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    labelLine: {
                                        length: 5,
                                        length2: 0,
                                        maxSurfaceAngle: 10
                                    },
                                },
                            },
                            data: sureShowData,
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts5(){
                let chartBox = echarts.init(document.getElementById("zctjCharts")); 
                let seriseData = data.roleinfo.rightChartsData
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        confine: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    grid: {
                        left: '0%',
                        right: '1%',
                        bottom: '1%',
                        top: '20%',
                        containLabel: true,
                        z: 22
                    },
                    xAxis: [{
                        type: 'category',
                        gridIndex: 0,
                        data: ['办公设备','机械设备','其他资产'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0c3b71'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: '#eee',
                            fontSize:12,
                        }
                    }],
                    yAxis: [{
                            type: 'value',
                            gridIndex: 0,
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                           
                            splitLine: {
                                lineStyle: {
                                    type: 'solid',
                                    color: '#8EE3FF',
                                    opacity: '0.3'
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#00E4FF'
                                }
                            },
                            axisLabel: {
                                color: '#fff',
                            }
                        },
                        {
                            type: 'value',
                           
                            min: 0,
                            max: 100,
                            interval: 25,
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                show: false,
                                color: '#fff',
                                formatter: '{value} %'
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            name:'净值',
                            barWidth: '20',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [30,30,0,0],
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#00A7FF'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(43,220,221,0.27)'
                                            }
                                        ]
                                    )
                                }
                            },
                            data: [seriseData.officeequamount, seriseData.mechanicalequamount, seriseData.otherassetamount],
                        },
                        {
                            type: 'bar',
                            name:'折旧额',
                            barWidth: '20',
                            itemStyle: {
                                normal: {
                                    barBorderRadius: [30,30,0,0],
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [{
                                                offset: 0,
                                                color: '#FF6E0D'
                                            },
                                            {
                                                offset: 1,
                                                color: 'rgba(255,161,16,0.27)'
                                            }
                                        ]
                                    )
                                }
                            },
                            data: [seriseData.officeequadepreciation, seriseData.mechanicalequdepreciation,seriseData.otherassetdepreciation],
                        }
                    ]
                }

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts6(){
                let seriseData = data.roleinfo.rightChartsData
                let chartBox = echarts.init(document.getElementById("hthzCharts")); 
                let option = {
                    color:["#8FBD01","#DCDB00","#F8A70B"],
                    title: {
                        text: "合同年限",
                        x: "center",
                        y: "bottom",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#28EDF6",
                            fontSize: "14",
                        },
                    },
                    tooltip:{
                        show: true,
                        confine: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    series: [
                        {
                        name: "合同年限汇总",
                        type: "pie",
                        radius: '70%',
                        minAngle: 5,
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: '{name|{b}}',
                                    rich: {
                                        name: {
                                            fontSize: 12,
                                            color: '#fff'
                                        }
                                    }
                                },
                                lableLine:{
                                    show: true
                                }
                            },
                        },
                        data: [
                            {
                                name: "10年以下",
                                value: seriseData.contractyear10,
                            },
                            {
                                name: "10-20",
                                value: seriseData.contractyear20,
                            },
                            {
                                name: "20年以上",
                                value: seriseData.contractyear30,
                            }
                        ],
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts7(){
                let seriseData = data.roleinfo.rightChartsData
                let chartBox = echarts.init(document.getElementById("hthzCharts1")); 
                let option = {
                    color:["#C602A6","#9902FF","#1CCDDC"],
                    title: {
                        text: "合同金额",
                        x: "center",
                        y: "bottom",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#28EDF6",
                            fontSize: "14",
                        },
                    },
                    tooltip:{
                        show: true,
                        confine: true,
                        backgroundColor: "rgba(6,237,248,0.2)",
                        textStyle:{
                            color: "#fff" 
                        }
                    },
                    series: [
                        {
                        name: "合同金额汇总",
                        type: "pie",
                        radius: '70%',
                        minAngle: 5,
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: '{name|{b}}',
                                    rich: {
                                        name: {
                                            fontSize: 12,
                                            color: '#fff'
                                        }
                                    }
                                },
                                lableLine:{
                                    show: true
                                }
                            },
                        },
                        data: [
                            {
                                name: "10万元以下",
                                value: seriseData.contractamount10,
                            },
                            {
                                name: "10-30",
                                value: seriseData.contractamount20,
                            },
                            {
                                name: "30万元以上",
                                value: seriseData.contractamount30,
                            }
                        ],
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
        };
        return {
        ...methods,
        ...data,
        };
    },
});
</script>

<style scoped>
.left-container{
    position: fixed;
    width: 380px;
    height: calc(100% - 110px);
    top: 95px;
    background: url(/images/cim/leftbg.png);
    background-size: 100% 100%;
}
.right-container{
    position: fixed;
    width: 380px;
    height: calc(100% - 110px);
    top: 95px;
    background: url(/images/cim/rightbg.png);
    background-size: 100% 100%;
}
.left-container.show{
    left: 20px;
    animation:mymove 1.5s 1;
    -webkit-animation:mymove 1.5s 1;
}
.left-container.hide{
    left: -10000px;
    animation:myhidemove 1.5s 1;
    -webkit-animation:myhidemove 1.5s 1;
}
.right-container.show{
    right: 20px;
    animation:mymoveright 1.5s 1;
    -webkit-animation:mymoveright 1.5s 1;
}
.right-container.hide{
    right: -10000px;
    animation:mymoverighthide 1.5s 1;
    -webkit-animation:mymoverighthide 1.5s 1;
}
@keyframes mymove
{ from {left:0px;} to {left:20px;} }

@-webkit-keyframes mymove 
{ from {left:0px;} to {left:20px;} }

@keyframes myhidemove
{ from {left:20px;} to {left:-10000px;} }

@-webkit-keyframes myhidemove 
{ from {left:20px;} to {left:-10000px;} }

@keyframes mymoveright
{ from {right:0px;} to {right:20px;} }

@-webkit-keyframes mymoveright 
{ from {right:0px;} to {right:20px;} }

@keyframes mymoverighthide
{ from {right:20px;} to {right:-10000px;} }

@-webkit-keyframes mymoverighthide 
{ from {right:0px;} to {right:-10000px;} }

.left-container-body{
    width: calc(100% - 26px);
    height: calc(34% - 34px);
    margin-bottom: 10px;
    padding: 13px 12px;
}
.left-container-body-middle{
    height: calc(33% - 34px);
}
.left-container-body-bottom{
    height: calc(33% - 34px);
}
.right-container-body-bottom{
    height: calc(38% - 34px);
}
.left-container-body-title{
    width: 361px;
    height: 27px;
    background: url(/public/images/cim/titlebg.png);
    background-size: 100% 100%;
    text-align: left;
    line-height: 18px;
}
.left-container-body-title span{
    padding-left: 25px;
    padding-right: 10px;
    font-size: 16px;
    font-family: Adobe Heiti Std;
    font-weight: bold;
    font-style: italic;
    color: #54B3EB;
    background: linear-gradient(-3deg, #76A2ED 0.146484375%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.left-container-body-screen{
    width: 94%;
    height: 25px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.left-container-body-screen-left{
    width: 95px;
    height: 100%;
}
.left-container-body-screen-right{
    color: #fff;
    font-size: 12px;
}
.left-container-body-box{
    width: 94%;
    margin: 0 auto;
    height: calc(100% - 45px);
    display: flex;
}
.left-container-body-box-container{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.left-container-body-box-container-bg{
    width: 120px;
    height: 120px;
    text-align: center;
    line-height: 120px;
    font-size: 20px;
    font-family: Adobe Heiti Std;
    color: #FFFFFF;
}
.left-container-body-box-container-bg.left{
    background: url(/public/images/echartsimg/realestbg1.png);
    background-size: 100% 100%;
}
.left-container-body-box-container-bg.left span{
    text-shadow: 0px 0px 8px rgba(0,0,0,0.2600);
    background: linear-gradient(0deg, #FFD620 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.left-container-body-box-container-bg.right{
    background: url(/public/images/echartsimg/realestbg2.png);
    background-size: 100% 100%;
}
.left-container-body-box-container-bg.right span{
    text-shadow: 0px 0px 8px rgba(0,0,0,0.2600);
    background: linear-gradient(0deg, #2CC6FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.left-container-body-box-container-title{
    color: #fff;
    height: 35px;
    line-height: 35px;
}
.left-container-body-middle-radio{
    display: flex;
}
.left-container-body-middle-radio-item{
    display: flex;
    margin-left: 10px;
    align-items: center;
    cursor: pointer;
}
.left-container-body-middle-radio-item span{
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 12px;
    background: #fff;
    margin-right: 7px;
}
.left-container-body-middle-radio-item.active span{
    background: linear-gradient(0deg, #630BD1 0%, #BE2FF1 100%);;
}
.left-container-body-bottom-box{
    width: 94%;
    height: calc(100% - 30px);
    overflow: auto;
    margin: 10px auto 0;
}
.active{
    border: none !important;
}
.coverDiv{
    width: 100%;
    height: 100%;
}
::v-deep .el-input__inner{
    width: 100%;
    height: 25px !important;
    background: none;
    border-radius: 0;
    border: 1px solid #1147B9;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
}
</style>
<style>

.cim-left-container .el-popper{
    background: #fff !important;
}
.cim-left-container .el-input__icon{
    color: #fff !important;
}
.cim-left-container .el-table tr{
    background: none !important;
}
.cim-left-container .el-table{
    background: none !important;
    color: #fff !important;
    border-color: #0B4AC9;
}
.cim-left-container .el-table th.el-table__cell{
    color: #fff;
    background: linear-gradient(0deg, #028FCA 0%, #262DCA 100%);
    border-color: #0B4AC9;
}
.cim-left-container .el-table--border .el-table__cell{
    border-color:#0B4AC9;
;
}
.cim-left-container .el-table td.el-table__cell, .cim-left-container .el-table th.el-table__cell.is-leaf{
    border-color: #0B4AC9;
}
.cim-left-container .el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: #0B4AC9;
}

.cim-left-container .el-table--border,
.cim-left-container .el-table--group {
    border-color: #0B4AC9;
}



.cim-left-container .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #028FCA !important;
}
.color1{
    color: #1ADEEE;
}
.zytjbox{
    width: 55%;
    height: 30px;
    background: url(/public/images/common/navlibg.png);
    background-size: 100% 100%;
    text-align: left;
    padding-left: 25px;
}
.echartspiebox{
    width: 177px;
    height: 230px;
    background: url(/public/images/common/echarspiebg.png) 50% 8% no-repeat;
    background-size: 150px 150px;
}
.radiobox{
    margin-top: 5px;
    height: 8px;
    background: #1A202D;
}
.radioinbox{
    position: relative;
    height: 100%;
    background: linear-gradient(to right,#1B2950, #1B7EF1);
}
.radiopoint{
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #1B73DC;
    background: #010719;
    border-radius: 100%;
    right: 0;
    top: 50%;
    margin-right: -10px;
    margin-top: -10px;
}
.pointbox{
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #fff;
    box-shadow: 0px 0px 8px 5px rgba(69,108,153, 1);
    position: absolute;
    right: 50%;
    top: 50%;
    margin-right: -3px;
    margin-top: -3px;
}
.border-r{
    border-right: 1px solid #05B684;
}
.zjtj-li{
    height: 77px;
    padding-left: 20px;
    background: rgba(5,31,26,0.3);
    border-left: 5px solid rgba(2,251,207,0.54);
}
</style>