BigScreenUI/src/components/customCom/equipmentLeasing.vue

<template>
    <div class="equipment_area">
        <div class="top_title">
            设备租赁分布图
        </div>
        <div class="e_content">
            <div class="left_nav_list">
                <div class="nav_item" v-for="(item, index) in navInfo.list" :key="index">
                    {{ item.text }}
                </div>
            </div>
            <div class="right_map_container">
                <mapEcharts :itemStyle="mapProps.itemStyle" :emphasisLabelStyle="mapProps.emphasisLabelStyle"
                    :emphasisItemStyle="mapProps.emphasisItemStyle" :labelInfo="mapProps.labelInfo"
                    :rippleEffect="mapProps.rippleEffect" :tooltipProps="mapProps.tooltipProps"
                    :tooltipFormat="mapProps.tooltipFormat" :itemColorFormat="mapProps.itemColorFormat"
                    :seriesData="mapProps.seriesData">
                </mapEcharts>
            </div>
        </div>
        <div class="type_list">
            <div class="type_list_item">
                <div class="out_dot1">
                    <div class="dot">
                        <div class="inner_dot"></div>
                    </div>
                </div>
                自有
            </div>
            <div class="type_list_item">
                <div class="out_dot2">
                    <div class="dot">
                        <div class="inner_dot"></div>
                    </div>
                </div>
                待租
            </div>
            <div class="type_list_item">
                <div class="out_dot3">
                    <div class="dot">
                        <div class="inner_dot"></div>
                    </div>
                </div>
                在租
            </div>
        </div>
    <equipmentDialog></equipmentDialog>
</div>
</template>

<script setup lang="ts">
import { getImg } from "@/utils/index"
import mapEcharts from "../echartsCom/mapEcharts.vue"
import equipmentDialog from "./equipmentDialog.vue"
const navInfo = reactive({
    list: [
        {
            text: "全部",
            navId: ""
        },
        {
            text: "广西电网",
            navId: ""
        },
        {
            text: "广东电网",
            navId: ""
        },
        {
            text: "贵州电网",
            navId: ""
        },
        {
            text: "云南电网",
            navId: ""
        },
        {
            text: "海南电网",
            navId: ""
        },
        {
            text: "储能公司",
            navId: ""
        },
        {
            text: "深圳供电局",
            navId: ""
        },
        {
            text: "超高压公司",
            navId: ""
        }
    ]
})


const mapProps = reactive({
    itemStyle: {
        areaColor: '#186894',//区域颜色
        shadowColor: '#2894c9',//边缘阴影颜色
        color: 'rgba(255, 255, 255, 1)'//文字颜色
    },
    emphasisLabelStyle: {
        color: "rgba(255, 255, 255, 1)"
    },
    emphasisItemStyle: {
        areaColor: '#39baf6',
        shadowColor: '#2894c9',
    },
    labelInfo: {
        show: true,
        color: 'rgba(255,255,255,0.6)',
        position: 'inside',
        distance: 0,
        fontSize: 10,
        rotate: 0,
    },
    rippleEffect: {
        number: 4,
        period: 4,
        scale: 4.5,
        brushType: 'fill'
    },
    tooltipProps: {
        show: true,
        shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
        shadowBlur: 0, // 设置阴影模糊度为0，即无阴影
        backgroundColor: "rgba(21, 29, 56,0)",
        borderColor: "rgba(21, 29, 56,0)"
    },
    tooltipFormat: (params: any) => {
        console.log("params11", params)
        const curItem = mapDataByProvice(params.name)
        let fromatStr =
            `<div style="background:url(${getImg('/src/assets/img/mapHoverBg.png')});width:324px;height:225px;background-size:contain;background-repeat:no-repeat;">
                <div style="width: 100px;height: 90px;padding-top:4px;position:relative;">
                    <div  style="position:absolute;left:20px;top:10px;font-weight:bold;color:#fff;">
                        ${params.name}
                    </div>
                    <div  style="position:absolute;left:120px;top:58px;color:#fff;width:120px;text-align:right;">
                        ${curItem.selfCount}
                    </div>
                    <div  style="position:absolute;left:135px;top:108px;color:#fff;width:120px;text-align:right;">
                        ${curItem.toCount}
                    </div>
                    <div  style="position:absolute;left:166px;top:158px;color:#fff;width:120px;text-align:right;">
                        ${curItem.inCount}
                    </div>
                </div>        
            </div>`
        return fromatStr
    },
    itemColorFormat: (params: any) => {
        console.log("params001", params)
        if (params.value[2] > 0 && params.value[2] <= 100) {
            return '#00ff31';
        } else if (params.value[2] > 100 && params.value[2] <= 200) {
            return '#f00';
        } else if (params.value[2] > 200 && params.value[2] <= 300) {
            return '#0ff';
        } else if (params.value[2] > 300 && params.value[2] <= 400) {
            return '#ff0';
        }
    },
    seriesData: [{ name: '肇庆市', value: [112.48461, 23.05196, 100] },
    { name: '佛山市', value: [110.130214, 23.018978, 200] },
    { name: '广州', value: [115.261081, 23.139856, 300] },
    { name: '南宁', value: [107.45, 22.139856, 400] },
    { name: '贵阳', value: [106.7, 26.36, 200] },
    { name: '昆明', value: [102.33, 24.23, 300] }]
})

const mapDataByProvice = (provinceName: String) => {
    let listData = [
        {
            name: "广东省",
            selfCount: 123,
            toCount: 300,
            inCount: 987
        },
        {
            name: "广西壮族自治区",
            selfCount: 23,
            toCount: 55,
            inCount: 278
        },
        {
            name: "云南省",
            selfCount: 256,
            toCount: 2456,
            inCount: 745
        },
        {
            name: "贵州省",
            selfCount: 963,
            toCount: 4521,
            inCount: 963
        }
    ]
    const curItem: any = listData.find(ele => ele.name == provinceName)
    return curItem
}  
</script>

<style lang="scss" scoped>
.equipment_area {
    width: 1160px;
    height: 504px;
    background-image: url('../../assets/img/map_bg.png');
    background-color: linear-gradient(180deg, #011B37 0%, #000525 7%, rgba(0, 2, 37, 0) 100%);
    position: relative;
}

.top_title {
    font-size: 20px;
    padding-top: 42px;
    color: #74d3ea;
    font-weight: bold;
    text-align: center;
}

.e_content {
    display: flex;
    justify-content: flex-start;
}

.left_nav_list {
    width: 78px;
    margin-left: 48px;
    height: 400px;
    margin-top: 20px;

    .nav_item {
        width: 78px;
        height: 28px;
        margin-bottom: 6px;
        background: url('../../assets/img/map_nav_item_bg.png');
        background-size: contain;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 14px;
        text-align: center;
        line-height: 28px;
    }
}

.right_map_container {
    width: 822px;
    height: 447px;
}

.type_list {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    left: 40px;
    bottom: 16px;
    .out_dot1,
    .out_dot2,
    .out_dot3 {
        width: 14px;
        height: 14px;
        background-color: rgba($color: #FA0000, $alpha: 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        margin-right: 3px;
        .dot {
            width: 7px;
            height: 7px;
            background-color: rgba($color: #FA0000, $alpha: 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;

            .inner_dot {
                width: 3px;
                height: 3px;
                background-color: #FA0000;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
            }
        }
    }

    .out_dot1 {
        background-color: rgba($color: #FA0000, $alpha: 0.3);

        .dot {
            background-color: rgba($color: #FA0000, $alpha: 0.4);

            .inner_dot {
                background-color: #FA0000;
            }
        }
    }

    .out_dot2 {
        background-color: rgba($color: #00FF31, $alpha: 0.3);

        .dot {
            background-color: rgba($color: #00FF31, $alpha: 0.4);

            .inner_dot {
                background-color: #00FF31;
            }
        }
    }

    .out_dot3 {
        background-color: rgba($color: #FAD300, $alpha: 0.3);

        .dot {
            background-color: rgba($color: #FAD300, $alpha: 0.4);

            .inner_dot {
                background-color: #FAD300;
            }
        }
    }
}
.type_list_item{
    display: flex;
    justify-content: flex-start;
    font-size: 13px;
    color: #fff;
    padding-right: 10px;
}
</style>