<template>
    <div class="Vbox">
        <div class="head">
            <div class="VisTitle"></div>
            <div class="Vgradation">
                <div class="tab" v-for="(item, index) in gradationMun" :key="index" :class="{ active: activeTab === index }"
                    @click="setActiveTab(index, item)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="container">
            <div class="center">
                <div ref="mapContainer" class="allmap"></div>
            </div>
            <div class="left">
                <div class="leftOneBox">
                    <div class="leftOBTitle">评价分析</div>
                    <div class="leftOBContent">
                        <PieEcharts :message="PieChartData"></PieEcharts>
                    </div>
                </div>
                <div class="leftTwoBox">
                    <div class="leftGDPTitle">生产总值</div>
                    <div class="leftGDPContent">
                        <baseEcharts :NamechartData="NamechartData" :ArrOneData="ArrOneData" :ArrTwoData="ArrTwoData">
                        </baseEcharts>
                    </div>
                </div>
                <div class="leftThreeBox">
                    <div class="leftTaxationTitle">税收TOP10</div>
                    <el-scrollbar height="calc(100% - 40px)">
                        <div class="leftTaxationContent">
                            <div class="LTCKing" v-for="(item, index) in RanKingData" :key="index">
                                <div class="ranking">
                                    <img :src=item.mig alt="">
                                </div>
                                <div class="companyName">{{ item.name }}</div>
                                <div class="companyValue">65.21万元</div>
                            </div>
                        </div>
                    </el-scrollbar>
                </div>
                <!-- <div>2</div> -->
            </div>

            <div class="boxBottom">
                <div class="parkLoan">
                    <div class="PCFLTitle">园区特色融资贷款</div>
                    <div class="PCFLContent">
                        <div class="PCFLNumber">
                            <div class="RPCBData" v-for="(item, index) in sumUsingNumber" :key="index">
                                <div class="RPCBDNumber">{{ item.sum }}(万元)</div>
                                <div class="RPCBDName">{{ item.name }}</div>
                            </div>
                        </div>
                        <div class="PCFLImg">
                            <div v-for="(item, index) in sumUsingNumber" :key="index"><img :src=item.img></div>
                        </div>
                    </div>
                </div>
                <div class="boxBttTwo">
                    <div class="businessManagTitle">企业管理</div>
                    <div class="businessManagContent">
                        <div class="RPCBox" v-for="(item, index) in business" :key="index">
                            <div class="RPCBImg">
                                <img :src=item.img alt="">
                            </div>
                            <div class="RPCBData">
                                <div class="RPCBDName">{{ item.title }}</div>
                                <div class="RPCBDNumber">{{ item.value }}(家)</div>
                                <div class="RPCBDRatio">{{ item.ratio }}%</div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right">
                <div class="rightParkBox">
                    <div class="rightParkTtile">园区概况</div>
                    <div class="rightParkContent">
                        <div class="RPCBox" v-for="(item, index) in parkData" :key="index">
                            <div class="RPCBImg">
                                <img :src=item.img alt="">
                            </div>
                            <div class="RPCBData">
                                <div class="RPCBDNumber">{{ item.value }}</div>
                                <div class="RPCBDName">{{ item.title }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rightIndustryComplianceBox">
                    <div class="RICBTitle">行业合规</div>
                    <div class="RICBTContent">
                        <div class="RICBTCBoxOne">
                            <div class="" style="
                            margin-left: 20px;" v-for="(item, index) in hyhgData" :key="index">
                                <div class="proportion">{{ item.value }}</div>
                                <div class="administrativeS">{{ item.name }}</div>
                            </div>
                        </div>
                        <div class="RICBTCBoxOne">
                            <div class="" style="
                            margin-left: 20px;" v-for="(item, index) in xzqzzxData" :key="index">
                                <div class="proportion">{{ item.value }}</div>
                                <div class="administrativeS">{{ item.name }}</div>
                            </div>
                        </div>
                        <!-- <div class="RICBTCBoxTwo"></div> -->
                    </div>
                </div>
                <div class="leftOneBox">
                    <div class="leftOBTitle">风险预警</div>
                    <el-scrollbar height="calc(100% - 40px)">
                        <div class="leftOBContent">
                            <div class="HTB_CB_List">
                                <div class="HTBCBL_table" v-for="(itemss, index) in ssyjList" :key="index"
                                    :style="{ backgroundImage: 'url(' + itemss.img + ')' }">
                                    <div class="HTBTCL_data">
                                        <div class="HTBTCLD_text"
                                            :style="{ color: itemss.state == 0 ? '#FF0000' : itemss.state == 1 ? '#D9AF36' : '', }">
                                            {{ itemss.name }}
                                        </div>
                                    </div>
                                    <div class="HTBTCL_time">
                                        <div>
                                            {{ itemss.time }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <baseEcharts></baseEcharts> -->
                        </div>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue';
import baseEcharts from '@/components/baseEcharts/index.vue'
import PieEcharts from '@/components/baseEcharts/pieChart.vue'
import {
    getClassificationValueData
    , getLngLatValueData
    , getCreditScoreList
    , getTrossDomesticProduct
    , getTopTenTaxation
    , getXiaoxiangCaiyinLoan
    , getTechnologyLoan
    , getHuiyuanLoan
    , getNumberOfEnterprises
    , getListedCompanies
    , getHighTechEnterprises
    , getTechnologySmallAndmediumSizedEnterprises
    , getPatentInformation
    , getAdministrativeSanction
    , getAdministrativeEnforcement
    , getBusinessAdnormalities
    , getDishonestDebtor
    , getSocialSecurity
} from '@/api/visualization/index'

const mapContainer = ref(null);
let map = null;
let marker = null

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 100000,
        unifiedSocialCreditCode: '',
        condition: "",
        grade: null,
        total: null
    },
})
const { queryParams } = toRefs(data)
import one from '@/assets/visualizationimg/one.png';
import two from '@/assets/visualizationimg/two.png';
import three from '@/assets/visualizationimg/three.png';
import four from '@/assets/visualizationimg/four.png';
import five from '@/assets/visualizationimg/five.png';
import six from '@/assets/visualizationimg/six.png';
import seven from '@/assets/visualizationimg/seven.png';
import eight from '@/assets/visualizationimg/eight.png';
import nine from '@/assets/visualizationimg/nine.png';
import ten from '@/assets/visualizationimg/ten.png';

const RanKingData = [{
    name: '湖南骏泰新材料科技有限责任公司',
    value: '66.25',
    mig: one
}, {
    name: '湖南正清制药集团股份有限公司',
    value: '66.25',
    mig: two
}, {
    name: '湖南兴怀新材料科技有限公司',
    value: '66.25',
    mig: three
}, {
    name: '金升阳（怀化）科技有限公司',
    value: '66.25',
    mig: four
}, {
    name: '怀化恒枫饮料有限公司',
    value: '66.25',
    mig: five
}, {
    name: '怀化金弘再生资源有限公司',
    value: '66.25',
    mig: six
}, {
    name: '湖南骏泰生物质发电有限责任公司',
    value: '66.25',
    mig: seven
}, {
    name: '湖南红宝科技开发有限公司',
    value: '',
    mig: eight
}, {
    name: '湖南诚路管业科技有限公司',
    value: '66.25',
    mig: nine
}, {
    name: '湖南湘鹤集团电缆科技股份有限公司',
    value: '66.25',
    mig: ten
}]
const gradationMun = [{
    name: "3A级企业",
    state: 3,
    type: 'AAA'
}, {
    name: "2A级企业",
    state: 2,
    type: 'AA'
}, {
    name: "1A级企业",
    state: 1,
    type: 'A'
}, {
    name: "B级企业",
    state: 4,
    type: 'B'
}, {
    name: "C级企业",
    state: 5,
    type: 'C'
}, {
    name: "D级企业",
    state: 6,
    type: 'D'
}, {
    name: "全部企业",
    state: 0,
    type: ''
}]
const activeTab = ref(6); // 默认激活第一个tab  
// const resultArray = ref;

onMounted(async () => {
    // 初始化地图
    map = new BMapGL.Map(mapContainer.value);
    var point = new BMapGL.Point(109.94211746215822, 27.377939585109653);
    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);
    map.setMinZoom(15);
    map.setMaxZoom(19);
    map.setMapStyleV2({
        styleId: '62ce43ad2a1362c23e612b783d7406e7'
    });
    map.setTilt(50);
    map.disableInertialDragging();

    // 定义允许的拖拽范围
    const allowedBounds = new BMapGL.Bounds(
        new BMapGL.Point(109.90207672119142, 27.365250190931242), // 西南角
        new BMapGL.Point(109.97014045715333, 27.422461872492594)  // 东北角
    );

    // 监听拖拽结束事件
    map.addEventListener('dragend', function () {
        // 获取当前地图的中心点
        const center = map.getCenter();
        // 检查中心点是否在允许的范围内
        if (!allowedBounds.containsPoint(center)) {
            // 如果不在范围内，将地图中心调整回允许范围的中心点
            const adjustCenter = allowedBounds.getCenter();
            map.panTo(adjustCenter);
        }
    });
    // 导入JSON文件
    try {
        var path = [];
        // await Promise.all(
        // 假设你有一个json文件，里面包含了管辖区域的边界数据
        fetch('jwdata.json').then(response => response.json()).then(data => {
            var points = data
            for (var j = 0; j < points.length; j++) {
                var lng = points[j].split(',')[0];
                var lat = points[j].split(',')[1];
                path.push(new BMapGL.Point(lng, lat));
            }

            var prism = new BMapGL.Prism(path, 10, {
                topFillColor: '#5679ea',
                topFillOpacity: 0.5,
                sideFillColor: '#5679ea',
                sideFillOpacity: 0.5
            });
            map.addOverlay(prism);
        })

    } catch (error) {
        console.error('Error loading JSON data:', error);
    }
});

// );
/** 查询用户列表 */
function getClassificationList() {
    getLngLatValueData(queryParams.value).then((res) => {
        const LNgLatData = res.data;
        // console.log("外层", res.data)
        getclassData(LNgLatData)
    })
}
function getclassData(lngLat) {

    getClassificationValueData(queryParams.value).then((res) => {
        const array1 = lngLat;
        const array2 = res.data.result;

        const mergedData = {};
        array1.forEach(item => {
            mergedData[item.unifiedSocialCreditCode] = { ...item };
        });
        array2.forEach(item => {
            if (mergedData[item.unifiedSocialCreditCode]) {
                mergedData[item.unifiedSocialCreditCode] = { ...mergedData[item.unifiedSocialCreditCode], ...item };
            } else {
                mergedData[item.unifiedSocialCreditCode] = { ...item };
            }
        });
        const resultArray = Object.values(mergedData);

        resultArray.forEach(item => {
            if (item.grade) {
                const markers = new BMapGL.Point(item.longitude, item.latitude)
                marker = new BMapGL.Marker(markers)
                map.addOverlay(marker);
                // 创建信息窗口
                var opts = {
                    width: 300,
                    // height: 100,
                    title: item.enterpriseName
                };
                var infoWindow = new BMapGL.InfoWindow("等级：" + item.grade + "<br/>"
                    + "统一信用代码：" + item.unifiedSocialCreditCode + "<br/>"
                    + "总分：" + item.total + "<br/>"
                    + "负责人：" + item.enterpriseLeader + "<br/>"
                    + "联系方式：" + item.contactPhone, opts);
                // 点标记添加点击事件
                marker.addEventListener('click', function () {
                    map.openInfoWindow(infoWindow, markers); // 开启信息窗口
                });
            }
        })
    })
}
const setActiveTab = (index, value) => {
    //获取地图上所有的覆盖物
    var allOverlay = map.getOverlays();
    for (var i = 0; i < allOverlay.length; i++) {
        console.log(11, allOverlay[i].toString())
        if (allOverlay[i].toString() == "Marker") {
            map.removeOverlay(allOverlay[i]);
        }
    }
    queryParams.value.condition = value.type;
    getClassificationList();
    activeTab.value = index;
};
getClassificationList()


/** 查询评价分析 */
const PieChartData = ref([]);
function obtainCreditScoreList() {
    getCreditScoreList(queryParams.value).then((res) => {
        const state1Array = [];
        const state2Array = [];
        const state3Array = [];
        const state4Array = [];
        const state5Array = [];
        const state6Array = [];
        res.data.result.forEach(item => {
            if (item.grade === 'AAA') {
                state1Array.push(item);
            } else if (item.grade === 'AA') {
                state2Array.push(item);
            } else if (item.grade === 'A') {
                state3Array.push(item);
            } else if (item.grade === 'B') {
                state4Array.push(item);
            } else if (item.grade === 'C') {
                state5Array.push(item);
            } else if (item.grade === 'D') {
                state6Array.push(item);
            }

            PieChartData.value = [
                { value: state1Array.length, name: 'AAA' },
                { value: state2Array.length, name: 'AA' },
                { value: state3Array.length, name: 'A' },
                { value: state4Array.length, name: 'B' },
                { value: state5Array.length, name: 'C' },
                { value: state6Array.length, name: 'D' },
            ]
        });
    })
}

/** 查询产值 */
const NamechartData = ref([]);
const ArrOneData = ref([]);
const ArrTwoData = ref([]);
function obtaingetTrossDomesticProduct() {
    getTrossDomesticProduct(queryParams.value).then((res) => {
        const state2023Array = [];
        const state2024Array = [];
        const name = [];
        res.forEach(item => {
            if (item.annualAmount === '2023') {
                state2023Array.push(item.firstQuarterAmount);
                name.push(item.enterpriseName)
            } else if (item.annualAmount === '2024') {
                state2024Array.push(item.firstQuarterAmount);
            }

            NamechartData.value = name
            ArrOneData.value = state2023Array
            ArrTwoData.value = state2024Array

            // console.log(1112,TrossDomesticChartData.value.name)
        })
    })
}

/** 查询纳税Top10 */
function obtaingetTopTenTaxation() {
    getTopTenTaxation(queryParams.value).then((res) => {
        console.log("查询纳税Top10:", res)
    })
}

import sumUsingNumberOne from '@/assets/visualizationimg/onepick.png';
import sumUsingNumberTwo from '@/assets/visualizationimg/twopack.png';
import sumUsingNumberthree from '@/assets/visualizationimg/threepick.png';

const sumUsingNumber = [
    {
        sum: '0',
        name: '潇湘财银贷',
        img: sumUsingNumberOne
    }, {
        sum: '0',
        name: '科技贷',
        img: sumUsingNumberTwo
    }, {
        sum: '0',
        name: '惠园贷',
        img: sumUsingNumberthree
    }
];
/** 查询潇湘财银贷 */
function obtaingetXiaoxiangCaiyinLoan() {
    getXiaoxiangCaiyinLoan(queryParams.value).then((res) => {
        const state1Array = [];
        res.data.forEach(item => {
            state1Array.push(item.currentLoanBalance);
        })
        const sum = state1Array.reduce((accumulator, currentValue) => {
            return accumulator + Number(currentValue);
        }, 0);
        sumUsingNumber[0].sum = sum;
    })
}
/** 查询评科技贷： */
function obtaingetTechnologyLoan() {
    getTechnologyLoan(queryParams.value).then((res) => {
        const state1Array = [];
        res.forEach(item => {
            state1Array.push(item.loanAmount);
        })
        const sum = state1Array.reduce((accumulator, currentValue) => {
            return accumulator + Number(currentValue);
        }, 0);
        sumUsingNumber[1].sum = sum;
    })
}
/** 惠园贷： */
function obtaingetHuiyuanLoan() {
    getHuiyuanLoan(queryParams.value).then((res) => {
        const state1Array = [];
        res.forEach(item => {
            state1Array.push(item.loanAmount);
        })
        const sum = state1Array.reduce((accumulator, currentValue) => {
            return accumulator + Number(currentValue);
        }, 0);
        sumUsingNumber[2].sum = sum;
    })
}


const business = [{
    title: '园区纳税企业',
    value: 81,
    ratio: '70%',
    state: 1,
    img: parkOne
}, {
    title: '园区缴纳社保企业',
    value: '',
    ratio: '',
    state: 0,
    img: parktwo
}]
/** 查询社保 */
function obtaingetSocialSecurity() {
    getSocialSecurity(queryParams.value).then((res) => {

        business[1].value = res.data.length;
        business[1].ratio = (res.data.length / 119 * 100).toFixed(2);
    })
}

import parkOne from '@/assets/visualizationimg/parkOne.png';
import parktwo from '@/assets/visualizationimg/parktwo.png';
import parkthree from '@/assets/visualizationimg/parkthree.png';
import parkfour from '@/assets/visualizationimg/parkfour.png';
import parkfive from '@/assets/visualizationimg/parkfive.png';
import parksix from '@/assets/visualizationimg/parksix.png';

const parkData = ref([{
    title: '占地面积',
    value: 12,
    img: parksix
}])
/** 查询入驻企业、企业数量 */
function obtaingetNumberOfEnterprises() {
    getNumberOfEnterprises(queryParams.value).then((res) => {
        const ObjectValue = {
            title: '入驻企业',
            value: res.data.length,
            img: parkOne
        }
        parkData.value.push(ObjectValue)
    })
}
/** 查询上市企业 */
function obtaingetListedCompanies() {
    getListedCompanies(queryParams.value).then((res) => {
        const ObjectValue = {
            title: '上市企业',
            value: res.length,
            img: parktwo
        }
        parkData.value.push(ObjectValue)
    })
}
/** 查询高新技术企业 */
function obtaingetHighTechEnterprises() {
    getHighTechEnterprises(queryParams.value).then((res) => {
        const ObjectValue = {
            title: '高新技术企业',
            value: res.data.length,
            img: parkthree
        }
        parkData.value.push(ObjectValue)
    })
}
/** 查询科技中小型企业 */
function obtaingetTechnologySmallAndmediumSizedEnterprises() {
    getTechnologySmallAndmediumSizedEnterprises(queryParams.value).then((res) => {
        const ObjectValue = {
            title: '科技型中小企业',
            value: res.data.length,
            img: parkfour
        }
        parkData.value.push(ObjectValue)
    })
}
/** 查询专利信息 */
function obtaingetPatentInformation() {
    getPatentInformation(queryParams.value).then((res) => {
        const ObjectValue = {
            title: '园区企业专利数',
            value: res.data.length,
            img: parkfive
        }
        parkData.value.push(ObjectValue)
    })
}

const hyhgData = ref([])
/** 查询行业合规 */
function obtaingetAdministrativeSanction() {
    getAdministrativeSanction(queryParams.value).then((res) => {
        hyhgData.value = [{
            name: '企业数量',
            value: 119
        }, {
            name: '行政处罚',
            value: (res.data.length / 119).toFixed(2) * 100 + '%'
        }, {
            name: '被处罚企业数',
            value: res.data.length
        }, {
            name: '行政处罚条数',
            value: res.data.length
        }]
        // 企业数量 被处罚企业数  行政处罚条数
    })
}
const xzqzzxData = ref([])

/** 查询行政强制执行 */
function obtaingetAdministrativeEnforcement() {
    getAdministrativeEnforcement(queryParams.value).then((res) => {
        xzqzzxData.value = [{
            name: '企业数量',
            value: 119
        }, {
            name: '行政强制执行',
            value: (res.data.length / 119).toFixed(2) * 100 + '%'
        }, {
            name: '被处罚企业数',
            value: res.data.length
        }, {
            name: '行政处罚条数',
            value: res.data.length
        }]
    })
}

import gaojingkuang from '@/assets/visualizationimg/gaojingkuang.png';
import zhuyikuang from '@/assets/visualizationimg/zhuyikuang.png';


const ssyjList = ref([])
/** 查询经营异常 */
function obtaingetBusinessAdnormalities() {
    getBusinessAdnormalities(queryParams.value).then((res) => {
        console.log("查询经营异常:", res)
        res.forEach(item => {
            const ObjectValue = {
                name: item.enterpriseName,
                time: '经营异常',
                state: 0,
                img: gaojingkuang
            }
            ssyjList.value.push(ObjectValue)
        })
    })
}
/** 查询失信被执行人 */
function obtaingetDishonestDebtor() {
    getDishonestDebtor(queryParams.value).then((res) => {
        console.log("查询失信被执行人:", res)
        res.forEach(item => {
            const ObjectValue = {
                name: item.enterpriseName,
                time: '失信被执行人',
                state: 1,
                img: zhuyikuang
            }
            ssyjList.value.push(ObjectValue)
        })
    })
}

obtainCreditScoreList();
obtaingetTrossDomesticProduct();
// obtaingetTopTenTaxation();
obtaingetXiaoxiangCaiyinLoan();
obtaingetTechnologyLoan();
obtaingetHuiyuanLoan();
obtaingetNumberOfEnterprises();
obtaingetListedCompanies();
obtaingetHighTechEnterprises();
obtaingetTechnologySmallAndmediumSizedEnterprises();
obtaingetPatentInformation();
obtaingetAdministrativeSanction();
obtaingetAdministrativeEnforcement();
obtaingetBusinessAdnormalities();
obtaingetDishonestDebtor();
obtaingetSocialSecurity();


// 如果需要的话，在beforeUnmount中清理资源
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
    if (map) {
        // 清理地图资源
        map.dispose();
        map = null;
    }
});
</script>
  
<style scoped lang="scss">
.Vbox {
    height: 100vh;
    overflow: hidden;

    .head {
        height: 120px;
        top: 0;
        width: 100%;
        position: absolute;
        z-index: 999;
        // background-color: rgba($color: #0e2a41, $alpha: .5);

        .VisTitle {
            height: 60px;
            background-image: url("../../assets/visualizationimg/title.png");
        }

        .Vgradation {
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;

            .tab {
                width: 100px;
                height: 40px;
                margin: 0 10px;
                text-align: center;
                line-height: 40px;
                color: white;
                font-weight: 500;
                background-image: url("../../assets/visualizationimg/headg.png");
                background-size: 100% 100%;
            }

            .active {
                background-image: url("../../assets/visualizationimg/headgactive.png");
                background-size: 100% 100%;
            }
        }
    }

    .container {
        height: 100%;
        position: relative;

        .left {
            left: 20px;
            float: left;
            position: relative;
            margin-left: -100%;
            width: 500px;
            // background-color: rgba($color: #000000, $alpha: 0.2);
            height: 100%;
            top: 60px;
            z-index: 999;

            .leftOneBox,
            .leftTwoBox,
            .leftThreeBox {
                height: 30%;
                background-color: rgba($color: #000000, $alpha: .6);
                margin-bottom: 14px;

                .leftOBTitle,
                .leftGDPTitle,
                .leftTaxationTitle {
                    height: 40px;
                    color: white;
                    line-height: 40px;
                    padding-left: 60px;
                    font-weight: bold;
                    background-image: url("../../assets/visualizationimg/centertitle.png");
                    background-size: 100% 100%;
                }

                .leftOBContent,
                .leftGDPContent,
                .leftTaxationContent {
                    height: calc(100% - 40px);

                    .LTCKing {
                        display: flex;
                        color: white;
                        // justify-content: space-between;
                        align-items: center;
                        background-image: url("../../assets/visualizationimg/rankingbu.png");
                        background-size: 100% 100%;
                        padding: 10px 10px;

                        .ranking {
                            width: 25px;
                            height: 25px;
                            margin-right: 10px;

                            img {
                                width: 25px;
                                height: 25px;
                            }
                        }

                        .companyName {
                            flex: 1;
                            font-size: 16px;
                            font-weight: 500;
                        }

                        .companyValue {
                            color: #DFD92C;
                        }
                    }
                }
            }
        }

        .boxBottom {
            position: absolute;
            z-index: 999;
            height: 150px;
            bottom: 0;
            width: 860px;
            left: 530px;
            display: flex;

            .parkLoan {
                width: 50%;
                height: 100%;
                background-color: rgba($color: #000000, $alpha: .6);

                .PCFLTitle {
                    height: 40px;
                    color: white;
                    line-height: 40px;
                    padding-left: 60px;
                    font-weight: bold;
                    background-image: url("../../assets/visualizationimg/centertitle.png");
                    background-size: 100% 100%;
                }

                .PCFLContent {
                    height: calc(100% - 40px);

                    .PCFLNumber {
                        height: 50%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        margin: 0 10px;

                        .RPCBData {
                            width: 100%;

                            .RPCBDNumber {
                                font-weight: normal;
                                font-size: 24px;
                                color: #21F2FF;
                                text-align: center;
                            }

                            .RPCBDName {
                                font-weight: 500;
                                font-size: 14px;
                                text-align: center;
                                color: #C9E2FF;
                            }
                        }
                    }

                    .PCFLImg {
                        margin-top: -40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }

            .boxBttTwo {
                width: 50%;
                height: 100%;
                margin-left: 10px;
                background-color: rgba($color: #000000, $alpha: .6);

                .businessManagTitle {
                    height: 40px;
                    color: white;
                    line-height: 40px;
                    padding-left: 60px;
                    font-weight: bold;
                    background-image: url("../../assets/visualizationimg/centertitle.png");
                    background-size: 100% 100%;
                }

                .businessManagContent {
                    height: calc(100% - 40px);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .RPCBox {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .RPCBImg {
                            width: 60px;
                            height: 60px;
                        }

                        .RPCBData {
                            margin-left: 10px;

                            .RPCBDNumber {
                                font-weight: normal;
                                font-size: 24px;
                                color: #21F2FF;
                            }

                            .RPCBDName {
                                font-weight: 500;
                                font-size: 14px;
                                color: #C9E2FF;
                            }

                            .RPCBDRatio {
                                font-weight: 500;
                                font-size: 14px;
                                color: #C9E2FF;
                            }
                        }
                    }
                }
            }
        }

        .center {
            float: left;
            height: 100%;
            width: 100%;
            background-color: green;

            .allmap {
                /* // 注意给dom宽高，不然地图不出来 */
                width: 100%;
                height: 100%;
                margin: auto;
                padding: 0;
            }
        }

        .right {
            right: 20px;
            float: left;
            position: relative;
            margin-left: -500px;
            width: 500px;
            // background-color: rgba($color: #000000, $alpha: 0.2);
            height: 100%;
            top: 60px;
            z-index: 999;

            .leftOneBox,
            .rightParkBox,
            .rightIndustryComplianceBox {
                height: 30%;
                background-color: rgba($color: #000000, $alpha: .6);
                margin-bottom: 14px;

                .leftOBTitle,
                .rightParkTtile,
                .RICBTitle {
                    height: 40px;
                    color: white;
                    line-height: 40px;
                    padding-left: 60px;
                    font-weight: bold;
                    background-image: url("../../assets/visualizationimg/centertitle.png");
                    background-size: 100% 100%;
                }

                .leftOBContent {
                    height: calc(100% - 40px);

                    .HTB_CB_List {
                        width: 100%;

                        .HTBCBL_table {
                            margin-top: 5px;
                            // border-radius: 10px;
                            height: 34px;
                            padding: 0 10px;
                            background-size: 100% 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .HTBTCL_data {
                                display: flex;
                                align-items: center;
                                margin-top: 5px;

                                img {
                                    width: 16px;
                                    height: 14px;
                                    margin-right: 5px;
                                }

                                .HTBTCLD_text {
                                    font-size: 19px;
                                }
                            }

                            .HTBTCL_time {
                                font-size: 15px;
                                display: flex;
                                margin-top: 2px;

                                img {
                                    width: 100px;
                                }

                                div {
                                    color: #ddd;
                                }
                            }
                        }
                    }

                }

                .rightParkContent {
                    height: calc(100% - 40px);
                    display: grid;
                    grid-template-columns: repeat(3, 33.33%);
                    grid-template-rows: repeat(2, 50%);
                    align-items: center;

                    .RPCBox {
                        width: 100%;
                        height: 70%;
                        display: flex;
                        align-items: center;
                        // justify-content: center;

                        .RPCBImg {
                            width: 60px;
                            height: 60px;
                        }

                        .RPCBData {
                            margin-left: 10px;

                            .RPCBDNumber {
                                font-weight: normal;
                                font-size: 24px;
                                color: #21F2FF;
                            }

                            .RPCBDName {
                                font-weight: 500;
                                font-size: 14px;
                                color: #C9E2FF;
                            }
                        }
                    }
                }

                .RICBTContent {
                    height: calc(100% - 40px);
                    display: grid;
                    grid-template-columns: repeat(1, 100%);
                    grid-template-rows: repeat(2, 50%);
                    align-items: center;
                    justify-content: center;

                    .RICBTCBoxOne {
                        width: 100%;
                        height: 100%;
                        background-image: url("../../assets/visualizationimg/imdustryCompliance.png");
                        background-size: 100% 100%;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;

                        .proportion {
                            font-weight: bold;
                            font-size: 34px;
                            color: #3BA9FF;
                            line-height: 25px;
                        }

                        .administrativeS {
                            font-weight: normal;
                            font-size: 14px;
                            color: #F8FEFF;
                            line-height: 25px;
                        }
                    }
                }
            }
        }
    }
}
</style>