Huaihua-High-tech-Zone/src/views/visualization/index.vue

<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></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">
                                <div class="RPCBDNumber">1000</div>
                                <div class="RPCBDName">潇湘财银贷</div>
                            </div>
                            <div class="RPCBData">
                                <div class="RPCBDNumber">2000</div>
                                <div class="RPCBDName">惠园贷</div>
                            </div>
                            <div class="RPCBData">
                                <div class="RPCBDNumber">1500</div>
                                <div class="RPCBDName">科技贷</div>
                            </div>
                        </div>
                        <div class="PCFLImg">
                            <div><img src='../../assets/visualizationimg/onepick.png' alt=""></div>
                            <div><img src='../../assets/visualizationimg/twopack.png' alt=""></div>
                            <div><img src='../../assets/visualizationimg/threepick.png' alt=""></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;">
                                <div class="proportion">70%</div>
                                <div class="administrativeS">行政处罚</div>
                            </div>
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">119</div>
                                <div class="administrativeS">企业数量</div>
                            </div>
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">70</div>
                                <div class="administrativeS">被处罚企业数</div>
                            </div>
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">20</div>
                                <div class="administrativeS">行政处罚条数</div>
                            </div>
                        </div>
                        <div class="RICBTCBoxOne">
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">70%</div>
                                <div class="administrativeS">行政处罚</div>
                            </div>
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">119</div>
                                <div class="administrativeS">企业数量</div>
                            </div>
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">70</div>
                                <div class="administrativeS">被处罚企业数</div>
                            </div>
                            <div class="" style="
                            margin-left: 20px;">
                                <div class="proportion">20</div>
                                <div class="administrativeS">行政处罚条数</div>
                            </div>
                        </div>
                        <!-- <div class="RICBTCBoxTwo"></div> -->
                    </div>
                </div>
                <div class="leftOneBox">
                    <div class="leftOBTitle">风险预警</div>
                    <div class="leftOBContent">
                        <baseEcharts></baseEcharts>
                    </div>
                </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';

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 = [{
    title: '入驻企业',
    value: 123,
    img: parkOne
}, {
    title: '上市企业',
    value: 400,
    img: parktwo
}, {
    title: '高新技术企业',
    value: 12,
    img: parkthree
}, {
    title: '科技型中小企业',
    value: 900,
    img: parkfour
}, {
    title: '占地面积',
    value: 12,
    img: parkfive
}, {
    title: '园区企业专利数',
    value: 11,
    img: parksix
}]
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 business = [{
    title: '园区纳税企业',
    value: 81,
    ratio: '70%',
    state: 1,
    img: parkOne
}, {
    title: '园区缴纳社保企业',
    value: 91,
    ratio: '80%',
    state: 0,
    img: parktwo
}]
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) => {
        console.log("评价分析:", 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' },
            ]
        });


        console.log(111, PieChartData)
    })
}

/** 查询产值 */
function obtaingetTrossDomesticProduct() {
    getTrossDomesticProduct(queryParams.value).then((res) => {
        console.log("查询产值:", res)
    })
}

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

/** 查询潇湘财银贷 */
function obtaingetXiaoxiangCaiyinLoan() {
    getXiaoxiangCaiyinLoan(queryParams.value).then((res) => {
        console.log("查询潇湘财银贷:", res)
    })
}
/** 查询评科技贷： */
function obtaingetTechnologyLoan() {
    getTechnologyLoan(queryParams.value).then((res) => {
        console.log("查询评科技贷", res)
    })
}
/** 惠园贷： */
function obtaingetHuiyuanLoan() {
    getHuiyuanLoan(queryParams.value).then((res) => {
        console.log("惠园贷：", res)
    })
}
/** 查询入驻企业、企业数量 */
function obtaingetNumberOfEnterprises() {
    getNumberOfEnterprises(queryParams.value).then((res) => {
        console.log("入驻企业、企业数量:", res)
    })
}
/** 查询上市企业 */
function obtaingetListedCompanies() {
    getListedCompanies(queryParams.value).then((res) => {
        console.log("查询上市企业:", res)
    })
}
/** 查询高新技术企业 */
function obtaingetHighTechEnterprises() {
    getHighTechEnterprises(queryParams.value).then((res) => {
        console.log("查询高新技术企业:", res)
    })
}
/** 查询科技中小型企业 */
function obtaingetTechnologySmallAndmediumSizedEnterprises() {
    getTechnologySmallAndmediumSizedEnterprises(queryParams.value).then((res) => {
        console.log("查询科技中小型企业:", res)
    })
}
/** 查询专利信息 */
function obtaingetPatentInformation() {
    getPatentInformation(queryParams.value).then((res) => {
        console.log("查询专利信息:", res)
    })
}
/** 查询行政处罚 */
function obtaingetAdministrativeSanction() {
    getAdministrativeSanction(queryParams.value).then((res) => {
        console.log("查询行政处罚:", res)
    })
}
/** 查询行政强制执行 */
function obtaingetAdministrativeEnforcement() {
    getAdministrativeEnforcement(queryParams.value).then((res) => {
        console.log("查询行政强制执行:", res)
    })
}
/** 查询经营异常 */
function obtaingetBusinessAdnormalities() {
    getBusinessAdnormalities(queryParams.value).then((res) => {
        console.log("查询经营异常:", res)
    })
}
/** 查询失信被执行人 */
function obtaingetDishonestDebtor() {
    getDishonestDebtor(queryParams.value).then((res) => {
        console.log("查询失信被执行人:", res)
    })
}
/** 查询社保 */
function obtaingetSocialSecurity() {
    getSocialSecurity(queryParams.value).then((res) => {
        console.log("查询社保:", res)
    })
}

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;

                        .RPCBData {

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

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

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

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

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

            .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);

                }

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