<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 class="flex-1 flex ai-c">
                    <div class="flex column jc-c ai-c" >
                        <img style="width: 30px;height:30px;margin-bottom: 5px;" src="/public/images/common/zhichu.png" >
                        <span class="color1 fz-14">支出</span>
                    </div>
                    <div class="flex column jc-c ta-l mr-2 ml-2">
                        <span class="fz-14 fc-w" style="line-height:30px;">申请总数</span>
                        <div class="color1 fz-12">
                            <span class="fz-16 fw-b">473</span>
                            <span>件</span>
                        </div>
                    </div>
                    <div class="flex-1 flex column jc-c ta-l">
                        <span class="fz-14 fc-w" style="line-height:30px;">申请总额</span>
                        <div class="color1 fz-12">
                            <span class="fz-16 fw-b">5873.87</span>
                            <span>万元</span>
                        </div>
                    </div>
                    <div class="flex-1 flex column jc-c ta-l">
                        <span class="fz-14 fc-w" style="line-height:30px;">支付完成</span>
                        <div class="color1 fz-12">
                            <span class="fz-16 fw-b">2480.8</span>
                            <span>万元</span>
                        </div>
                    </div>
                </div>
                <div class="flex-1 flex">
                    <div class="flex column jc-c ai-c">
                        <img style="width: 30px;height:30px;margin-bottom: 5px;" src="/public/images/common/shouru.png" >
                        <span class="color1 fz-14">收入</span>
                    </div>
                    <div class="flex column jc-c ta-l mr-2 ml-2">
                        <span class="fz-14 fc-w" style="line-height:30px;">申请总数</span>
                        <div class="color1 fz-12">
                            <span class="fz-16 fw-b">0</span>
                            <span>件</span>
                        </div>
                    </div>
                    <div class="flex-1 flex column jc-c ta-l">
                        <span class="fz-14 fc-w" style="line-height:30px;">申请总额</span>
                        <div class="color1 fz-12">
                            <span class="fz-16 fw-b">0</span>
                            <span>万元</span>
                        </div>
                    </div>
                    <div class="flex-1 flex column jc-c ta-l">
                         
                    </div>
                </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 class="flex flex-1 ai-c color1 fz-14" v-for="(item,index) in roleinfo.tableData" :key="index">
                    <div class="flex-1 ta-l">{{ item.name }}</div>
                    <div class="zytjbox flex ai-c">
                        <span class="fw-b">{{ item.value }}</span>
                        <span class="fz-12">亩</span>
                    </div>
                </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">
            <div class="left-container-body-title"><span>印章统计</span></div>
            <div class="flex fc-w " style="height:calc(100% - 27px);">
                <div class="flex-1 flex column echartspiebox">
                    <div id="rightEchartsId1" v-if="roleinfo.echartsVislble" class="flex-1"></div>
                    <div class="flex jc-c ai-c column">
                        <div class="color1 fz-14"><span class="fz-18" style="margin-right:5px;">58</span>件</div>
                        <div class="fc-w fz-20">公章总数</div>
                    </div>
                </div>
                <div class="flex-1 flex column echartspiebox">
                    <div id="rightEchartsId2" v-if="roleinfo.echartsVislble" class="flex-1"></div>
                    <div class="flex jc-c ai-c column">
                        <div class="color1 fz-14"><span class="fz-18" style="margin-right:5px;">47</span>件</div>
                        <div class="fc-w fz-20">证明总数</div>
                    </div>
                </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 column" style="height:calc(100% - 27px);">
                <div class="flex-1 flex column fc-w" v-for="(item,index) in roleinfo.itemOptions" :key="index">
                        <div class="flex jc-sb flex-1 fz-16 ai-c">
                            <span>{{ item.name }}</span>
                            <p><span>{{ item.value }}<span class="fz-14">条</span></span></p>
                        </div>
                        <div class="">
                            <div class="max-w radiobox">
                                <div class="radioinbox max-h" :style="'width:' + item.value + '%'">
                                    <div class="radiopoint">
                                        <div class="max-w max-h pos-r">
                                            <div class="pointbox"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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-box" style="height:calc(100% - 27px);">
                <div id="rightEchartsId3" v-if="roleinfo.echartsVislble" class="coverDiv"></div>
            </div>
        </div>
    </div>    
</template>
<script>
import {defineComponent, reactive, onMounted,inject,watch} from "vue";
export default defineComponent({
    name: 'realestate',
    components: {
        
    },
    props:['visible','rightShow','rightVisible'],
    setup(props) {
        let data = reactive({
            roleinfo:{
                btnVisible: true,
                btnRightVisible: true,
                rightVisible: true,
                echartsVislble: true,
                tableData:[
                    { name: '已登记总面积' , value: '124274.11' },
                    { name: '农用地总面积' , value: '60063.39' },
                    { name: '建设用地总面积' , value: '12437.7' },
                    { name: '未利用地总面积' , value: '51773.01' },
                ],
                itemOptions:[
                    { name: '一般事项' , value: '83' },
                    { name: '重大事项' , value: '10' },
                    { name: '特大事项' , value: '0' },
                ]
            }
        })
        watch(
            () => props.visible,
            (newVal, oldVal) => {
                data.roleinfo.btnVisible = newVal
            }
        )
        watch(
            () => props.rightShow,
            (newVal, oldVal) => {
                data.roleinfo.btnRightVisible = newVal
            }
        )
        watch(
            () => props.rightVisible,
            (newVal, oldVal) => {
                data.roleinfo.rightVisible = newVal
            }
        )
        onMounted(() => {
            methods.getCharts()
            methods.getCharts1()
            methods.handRightEcharts1()
            methods.handRightEcharts2()
            methods.handRightEcharts3()
        })
        let echarts = inject("echarts");
        let methods = {
            getCharts(){
                let chartBox = echarts.init(document.getElementById("fwjglxCharts")); 
                let option = {
                    title: {
                        text: "100%",
                        subtext: "常规资产记录",
                        x: "center",
                        y: "40%",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#28EDF6",
                            fontSize: "18",
                        },
                        subtextStyle: {
                            color: "#fff",
                            fontSize: 12,
                            fontWeight: "normal",
                        },
                    },
                    series: [
                        {
                        name: "Line 1",
                        type: "pie",
                        clockWise: true,
                        radius: ["60%", "85%"],
                        itemStyle: {
                            normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            },
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: 100,
                                name: "01",
                                itemStyle: {
                                    normal: {
                                    color: {
                                        // 完成的圆环的颜色
                                        colorStops: [
                                        {
                                            offset: 0,
                                            color: "#00cefc", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#367bec", // 100% 处的颜色
                                        },
                                        ],
                                    },
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    },
                                },
                            },
                            {
                                name: "02",
                                value: 0,
                            },
                        ],
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            getCharts1(){
                let chartBox = echarts.init(document.getElementById("fwjglxCharts1")); 
                let option = {
                    title: {
                        text: "0%",
                        subtext: "扶贫资产记录",
                        x: "center",
                        y: "40%",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#28EDF6",
                            fontSize: "18",
                        },
                        subtextStyle: {
                            color: "#fff",
                            fontSize: 12,
                            fontWeight: "normal",
                        },
                    },
                    series: [
                        {
                        name: "Line 1",
                        type: "pie",
                        clockWise: true,
                        radius: ["60%", "85%"],
                        itemStyle: {
                            normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            },
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: 0,
                                name: "01",
                                itemStyle: {
                                    normal: {
                                    color: {
                                        // 完成的圆环的颜色
                                        colorStops: [
                                        {
                                            offset: 0,
                                            color: "#00cefc", // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: "#367bec", // 100% 处的颜色
                                        },
                                        ],
                                    },
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    },
                                },
                            },
                            {
                                name: "02",
                                value: 100,
                            },
                        ],
                        },
                    ],
                };

                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
             
            handRightEcharts1(){
                let chartBox = echarts.init(document.getElementById("rightEchartsId1")); 
                let option = {
                    title: {
                        text: "55%",
                        x: "center",
                        y: "40%",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#28EDF6",
                            fontSize: "20",
                        }
                    },
                    series: [
                        {
                        name: "Line 1",
                        type: "pie",
                        clockWise: true,
                        radius: ["56%", "72%"],
                        center: ["51%", "46%"],
                        itemStyle: {
                            normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            },
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: 55,
                                name: "01",
                                itemStyle: {
                                    normal: {
                                    color: "#00E0DB",
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    },
                                },
                            },
                            {
                                name: "02",
                                value: 45,
                                itemStyle:{
                                    color: "rgba(0,0,0,0)"
                                }
                            },
                        ],
                        },
                    ],
                };


                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            handRightEcharts2(){
                let chartBox = echarts.init(document.getElementById("rightEchartsId2")); 
                let option = {
                    title: {
                        text: "45%",
                        x: "center",
                        y: "40%",
                        textStyle: {
                            fontWeight: "normal",
                            color: "#28EDF6",
                            fontSize: "20",
                        }
                    },
                    series: [
                        {
                        name: "Line 1",
                        type: "pie",
                        clockWise: true,
                        radius: ["56%", "72%"],
                        center: ["51%", "46%"],
                        itemStyle: {
                            normal: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            },
                        },
                        hoverAnimation: false,
                        data: [
                            {
                                value: 45,
                                name: "01",
                                itemStyle: {
                                    normal: {
                                    color: "#00E0DB",
                                    label: {
                                        show: false,
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    },
                                },
                            },
                            {
                                name: "02",
                                value: 55,
                                itemStyle:{
                                    color: "rgba(0,0,0,0)"
                                }
                            },
                        ],
                        },
                    ],
                };
                chartBox.setOption(option);
                // 根据页面大小自动响应图表大小
                window.addEventListener("resize", function () {
                    chartBox.resize();
                })
            },
            handRightEcharts3(){
                let chartBox = echarts.init(document.getElementById("rightEchartsId3")); 
                const offsetX = 20;
                const offsetY = 10;
                // 绘制左侧面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        // 会canvas的应该都能看得懂，shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint;
                        // console.log(shape);
                        const c0 = [shape.x, shape.y];
                        const c1 = [shape.x - offsetX, shape.y - offsetY];
                        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                        const c3 = [xAxisPoint[0], xAxisPoint[1]];
                        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
                    },
                });
                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint;
                        const c1 = [shape.x, shape.y];
                        const c2 = [xAxisPoint[0], xAxisPoint[1]];
                        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                        const c4 = [shape.x + offsetX, shape.y - offsetY];
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                    },
                });
                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0,
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y];
                        const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                        const c3 = [shape.x, shape.y - offsetX];
                        const c4 = [shape.x - offsetX, shape.y - offsetY];
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                    },
                });
                // 注册三个面图形
                echarts.graphic.registerShape('CubeLeft', CubeLeft);
                echarts.graphic.registerShape('CubeRight', CubeRight);
                echarts.graphic.registerShape('CubeTop', CubeTop);

                const VALUE = [0, 0, 934];

                let option = {
                    grid: {
                        left: '2%',
                        right: '2%',
                        top: '20%',
                        bottom: '2%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        data: ['已申请数量', '审批中数量', '已归档数量'],
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 2,
                                color: '#2B7BD6',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                width: 2,
                                color: '#2B7BD6',
                            },
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#153D7D',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                            fontSize: 14,
                        },
                    },
                    series: [
                        {
                            type: 'custom',
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)]);
                                return {
                                    type: 'group',
                                    children: [
                                        {
                                            type: 'CubeLeft',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#33BCEB',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#337CEB',
                                                    },
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeRight',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#28A2CE',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#1A57B7',
                                                    },
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeTop',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0,
                                                        color: '#43C4F1',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#28A2CE',
                                                    },
                                                ]),
                                            },
                                        },
                                    ],
                                };
                            },
                            data: VALUE,
                        },
                        {
                            type: 'custom',
                            renderItem: (params, api) => {
                                const location = api.coord([api.value(0), api.value(1)]);
                                return {
                                    type: 'group',
                                    children: [
                                        {
                                            type: 'CubeLeft',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0.8,
                                                        color: '#29F1FA',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#29F1FA',
                                                    },
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeRight',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0.8,
                                                        color: '#29F1FA',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#29F1FA',
                                                    },
                                                ]),
                                            },
                                        },
                                        {
                                            type: 'CubeTop',
                                            shape: {
                                                api,
                                                xValue: api.value(0),
                                                yValue: api.value(1),
                                                x: location[0],
                                                y: location[1],
                                                xAxisPoint: api.coord([api.value(0), 0]),
                                            },
                                            style: {
                                                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    {
                                                        offset: 0.8,
                                                        color: '#29F1FA',
                                                    },
                                                    {
                                                        offset: 1,
                                                        color: '#29F1FA',
                                                    },
                                                ]),
                                            },
                                        },
                                    ],
                                };
                            },
                            data: [80,80,80],
                        },
                        {
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    formatter: (e) => {
                                        return e.value ;
                                    },
                                    fontSize: 12,
                                    color: '#fff',
                                    offset: [0, -30],
                                },
                            },
                            itemStyle: {
                                color: 'transparent',
                            },
                            tooltip: {},
                            data: VALUE,
                        },
                    ],
                };


                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);
}
.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;
}
</style>