BigScreenUI/src/views/screen/sharePlatform.vue

<template>
    <div class="out_echart">
        <div class="top_title">
            南方电网机具租赁共享平台
            <div class="top_title_left_icon">
                <img src="@/assets/img/setting.png" />
            </div>
            <div class="right_title_more_info">
                <span class="wheather">晴转多云 16℃ </span>
                <span class="time">2023.11.16 星期四 09:56:12</span>
            </div>
        </div>
        <div class="count_info_row2">
            <div class="equipment_count">
                <div class="sub_title">平台入驻装备总数</div>
                <div class="count_list">
                    <div class="count_item" v-for="(item, index) in equipmentCountInfo.listCount" :key="index">
                        {{ item }}
                    </div>
                    <div class="count_item">
                        +
                    </div>
                </div>
                <div class="more_count">
                    <div class="self_shelf_count">
                        <div class="self_img">{{ equipmentCountInfo.selfCount }}</div>
                        <div class="third_title">施工单位自有</div>
                    </div>
                    <div class="self_shelf_count">
                        <div class="self_img">{{ equipmentCountInfo.shelfCount }}</div>
                        <div class="third_title">上架可租</div>
                    </div>
                </div>
            </div>
            <div class="middle_list_com">
                <div class="middle_list_com_item" v-for="(item, index) in middleCountList.list" :key="index">
                    <div class="middle_item_icon">
                        <img :src="item.icon" />
                    </div>
                    <div class="middle_item_info">
                        <div class="middle_item_count">
                            {{ item.count }}
                        </div>
                        <div class="middle_item_title">
                            {{ item.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle_rent">
                <div class="rent_title sub_title">出租信息</div>
                <div class="rent_list">
                    <div class="count_item" v-for="(item, index) in equipmentCountInfo.listCount" :key="index">
                        {{ item }}
                    </div>
                    <div class="count_item">
                        +
                    </div>
                </div>
                <div class="rent_title sub_title">出租信息</div>
                <div class="rent_list">
                    <div class="count_item" v-for="(item, index) in equipmentCountInfo.listCount" :key="index">
                        {{ item }}
                    </div>
                    <div class="count_item">
                        +
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom_row">
            <div class="bottom_row_left">
                <div class="plat_company">
                    <div class="rent_title sub_title">平台入驻单位</div>
                    <div class="rent_list">
                        <div class="count_item" v-for="(item, index) in platFormInfo.listCount" :key="index">
                            {{ item }}
                        </div>
                        <div class="count_item">
                            +
                        </div>
                    </div>
                    <div class="more_count">
                        <div class="self_shelf_count">
                            <div class="self_img">{{ platFormInfo.socailCount }}</div>
                            <div class="third_title">社会企业</div>
                        </div>
                        <div class="self_shelf_count">
                            <div class="self_img">{{ platFormInfo.enterpriseCount }}</div>
                            <div class="third_title">南网集体企业</div>
                        </div>
                        <div class="self_shelf_count">
                            <div class="self_img">{{ platFormInfo.holdingCount }}</div>
                            <div class="third_title">南网控股企业</div>
                        </div>
                    </div>
                </div>
                <div class="enterprise_device">
                    <Pie3dCom></Pie3dCom>
                </div>


            </div>
            <div class="bottom_row_center">
                <div class="bottom_row_center_map">
                    <equipmentLeasing></equipmentLeasing>
                </div>
                <div class="bottom_row_center_bar">
                    <div class="bottom_row_center_bar_left">
                        <div class="total_count">
                            总人数：3188
                        </div>
                        <barCom :domId="1" :title="barComProps.title" :titleStyle="barComProps.titleStyle"
                            :xAxisData="barComProps.xAxisData" :yAxisProps="barComProps.yAxisProps"
                            :seriseData="barComProps.seriseData" :emphasisItemStyle="barComProps.emphasisItemStyle"
                            :itemStyle="barComProps.itemStyle" :stackFlag="barComProps.stackFlag"
                            :stackLabel="barComProps.stackLabel" :borderRadius="barComProps.borderRadius"
                            :barWidth="barComProps.barWidth" :formatCallBack="barComProps.formatCallBack"></barCom>
                    </div>
                    <div class="bottom_row_center_bar_right">
                        <barCom :domId="2" :title="barComPropsSimple.title" :xAxisData="barComPropsSimple.xAxisData"
                            :titleStyle="barComProps.titleStyle" :yAxisProps="barComPropsSimple.yAxisProps"
                            :seriseData="barComPropsSimple.seriseData"
                            :emphasisItemStyle="barComPropsSimple.emphasisItemStyle"
                            :itemStyle="barComPropsSimple.itemStyle" :stackFlag="barComPropsSimple.stackFlag"
                            :stackLabel="barComPropsSimple.stackLabel" :borderRadius="barComPropsSimple.borderRadius"
                            :barWidth="barComProps.barWidth" :formatCallBack="barComPropsSimple.formatCallBack"></barCom>
                    </div>
                </div>
            </div>
            <div class="bottom_row_right">
                <div class="bottom_row_right_top">
                    <hotProvider></hotProvider>
                </div>
                <div class="bottom_row_right_bottom">
                    <barCom :domId="3" :title="barComPropsHorizontal.title" :titleStyle="barComProps.titleStyle"
                        :xAxisProps="barComPropsHorizontal.xAxisProps" :xAxisData="barComPropsHorizontal.xAxisData"
                        :yAxisData="barComPropsHorizontal.yAxisData" :yAxisProps="barComPropsHorizontal.yAxisProps"
                        :seriseData="barComPropsHorizontal.seriseData"
                        :emphasisItemStyle="barComPropsHorizontal.emphasisItemStyle"
                        :itemStyle="barComPropsHorizontal.itemStyle" :stackFlag="barComPropsHorizontal.stackFlag"
                        :stackLabel="barComPropsHorizontal.stackLabel" :borderRadius="barComPropsHorizontal.borderRadius"
                        :formatCallBack="barComPropsHorizontal.formatCallBack"> </barCom>
                </div>

            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
// import lineCom from "../../components/echartsCom/lineCom.vue"
import mapEcharts from "../../components/echartsCom/mapEcharts.vue"
import barCom from "../../components/echartsCom/barCom.vue"
import Pie3dCom from "../../components/echartsCom/Pie3dCom.vue"
import hotProvider from "../../components/customCom/hotProvider.vue"
import equipmentLeasing from "../../components/customCom/equipmentLeasing.vue"
import { getImg } from "@/utils/index"
const equipmentCountInfo: any = reactive({
    listCount: ['9', '9', '9', '9'],
    selfCount: "999",
    shelfCount: "999"
})

const middleCountList = reactive({
    list: [
        {
            icon: getImg("/src/assets/img/money1.png"),
            count: "546465",
            title: "今日订单"
        },
        {
            icon: getImg("/src/assets/img/money2.png"),
            count: "5645646",
            title: "累计金额"
        },
        {
            icon: getImg("/src/assets/img/money3.png"),
            count: "546465",
            title: "在用设备"
        },
        {
            icon: getImg("/src/assets/img/money2.png"),
            count: "5645646",
            title: "待租设备"
        }
    ]
})

const platFormInfo: any = reactive({
    listCount: ['9', '9', '9', '9'],
    socailCount: "999",
    enterpriseCount: "999",
    holdingCount: '999'
})

const barComProps = reactive({
    title: "机手人数",
    titleStyle: {
        color: "#0099FF",
        paddingTop: 20
    },
    xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
    yAxisProps: {
        type: "value",
        splitLine: {//是否显示 y轴横线
            show: false
        },
        show: false
    },
    seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
    itemStyle: [//柱状图的默认颜色 渐变
        { offset: 0, color: '#91FFBE' },
        { offset: 1, color: '#077FBA' }
    ],
    emphasisItemStyle: [//柱状图的高亮颜色 渐变
        { offset: 0, color: '#91FFBE' },
        { offset: 1, color: '#077FBA' }
    ],
    stackFlag: true,//柱状图是否显示每个柱条的数量
    stackLabel: {
        show: true,
        position: 'top',
        color: "rgba(255,255,255,0.4)"
    },
    borderRadius: 0,
    barWidth: 14,
    formatCallBack: (params: any) => {
        if (!params || params.length == 0 || !Array.isArray(params)) return
        let fromatStr = ""
        params.forEach((ele: any) => {
            fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
        })
        return fromatStr
    }
})

const barComPropsSimple = reactive({
    title: "租赁订单月统计",
    titleStyle: {
        color: "#0099FF",
        paddingTop: 20
    },
    xAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
    yAxisProps: {
        type: "value",
        splitLine: {//是否显示 y轴横线
            show: true,
            lineStyle: {
                color: ['rgba(255,255,255,0.1)']
            }


        },
        show: true
    },
    seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
    itemStyle: [//柱状图的默认颜色 渐变
        { offset: 0, color: '#10A1B8' },
        { offset: 1, color: '#5BE3FF' }
    ],
    emphasisItemStyle: [//柱状图的高亮颜色 渐变
        { offset: 0, color: '#10A1B8' },
        { offset: 1, color: '#5BE3FF' }
    ],
    stackFlag: false,//柱状图是否显示每个柱条的数量
    stackLabel: {
        show: false,
    },
    borderRadius: 4,
    barWidth: 14,
    formatCallBack: (params: any) => {
        if (!params || params.length == 0 || !Array.isArray(params)) return
        let fromatStr = ""
        params.forEach((ele: any) => {
            fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
        })
        return fromatStr
    }
})

const barComPropsHorizontal = reactive({
    title: "租赁在用装备排名",
    titleStyle: {
        color: "#0099FF",
        paddingTop: 20
    },
    xAxisProps: {
        type: "value",
        boundaryGap: [0, 0.01],
        splitLine: {//是否显示 y轴横线
            show: false
        },
    },
    xAxisData: [],
    yAxisProps: {
        type: "category",
        // boundaryGap: false,
    },
    yAxisData: ['点', '击', '柱', '子', '或', '者', '两', '指', '在'],
    seriseData: [220, 182, 191, 234, 290, 330, 310, 120, 362],//数据
    itemStyle: [//柱状图的默认颜色 渐变
        { offset: 0, color: '#077FBA' },
        { offset: 1, color: '#91FFBE' }
    ],
    emphasisItemStyle: [//柱状图的高亮颜色 渐变
        { offset: 0, color: '#077FBA' },
        { offset: 1, color: '#91FFBE' }
    ],
    stackFlag: false,//柱状图是否显示每个柱条的数量
    stackLabel: {
        show: false,
    },
    borderRadius: 0,
    barWidth: 14,
    formatCallBack: (params: any) => {
        if (!params || params.length == 0 || !Array.isArray(params)) return
        let fromatStr = ""
        params.forEach((ele: any) => {
            fromatStr += '<div style="border-bottom:1px solid #ccc;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + ele.color + '"></span>' + ele.data + "</div>"
        })
        return fromatStr
    }
})


</script>
  
<style lang="scss" scoped>
.out_echart {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/img/background-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #072942;
}

.top_title {
    width: 100%;
    height: 108px;
    background-image: url("../../assets/img/top_title.png");
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 40px;
    padding-top: 29px;
    color: $main-color;
    text-align: center;
    position: relative;

    .top_title_left_icon {
        position: absolute;
        left: 30px;
        top: 15px;
    }

    .right_title_more_info {
        position: absolute;
        right: 40px;
        top: 24px;
        color: #42B3FF;
        font-size: 16px;


        .wheather {
            padding-right: 34px;
        }

    }
}

.count_info_row2 {
    height: 252px;
    margin-top: -50px;
    display: flex;
    justify-content: flex-start;
    // background-color: pink;

    .equipment_count {
        width: 333px;
        height: 252px;
        position: relative;
        background-color: rgba($color: #011B37, $alpha: 0.6);
        margin-left: 23px;

        .sub_title {
            position: absolute;
            top: 16px;
            left: 23px;
        }


    }
}

.more_count {
    margin: 30px auto;
    display: flex;
    justify-content: center;

    .self_shelf_count {
        width: 138px;
        height: 61px;

        .self_img {
            width: 92px;
            height: 61px;
            background-image: url("../../assets/img/compnay_bg.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0px auto;
            line-height: 66px;
            text-align: center;
            color: #66E0FF;
            font-size: 38px;

        }

        .third_title {
            font-size: 14px;
            color: #0099FF;
            height: 36px;
            line-height: 36px;
            margin: 0px auto;
            text-align: center;

        }
    }
}

.sub_title {
    font-size: 18px;
    color: #0099FF;
    height: 30px;
    line-height: 30px;
}

.count_list,
.rent_list {
    display: flex;
    justify-content: flex-start;
    padding-top: 50px;
    margin-left: 24px;

    .count_item {
        color: $main-color;
        font-size: 40px;
        width: 46px;
        height: 46px;
        background-image: url("../../assets/img/num_bg.png");
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        line-height: 43px;
        margin-right: 11px;

    }
}

.middle_list_com {
    height: 100px;
    width: 1208px;
    padding-top: 60px;
    display: flex;
    justify-content: flex-start;
    margin-left: 28px;

    .middle_list_com_item {
        width: 270px;
        height: 97px;
        margin-right: 28px;
        background-image: url("../../assets/img/money_bg.png");
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .middle_item_icon {
            width: 38px;
            height: 36px;
            margin-left: 30px;
        }

        .middle_item_info {
            margin-left: 28px;

            .middle_item_count {
                font-size: 30px;
                color: #fff;
            }

            .middle_item_title {
                font-size: 16px;
                color: #fff;
                margin-top: 12px;
            }
        }

    }
}

.middle_rent {
    width: 332px;
    height: 252px;
    margin-right: 24px;
    background-color: rgba($color: #011B37, $alpha: 0.6);

    .rent_title {
        height: 50px;
        padding-top: 20px;
        padding-left: 22px;
        box-sizing: border-box;
    }

    .rent_list {
        // padding: 0;
        padding-top: 1px;
    }
}

.bottom_row {
    display: flex;
    justify-content: space-between;
}

.bottom_row_left {
    margin-top: 18px;

    .plat_company {

        width: 333px;
        height: 252px;
        background-color: rgba($color: #011B37, $alpha: 0.6);
        margin-left: 23px;

        .rent_title {
            padding-left: 23px;
        }

        .rent_list {
            padding-top: 6px;
        }

        .more_count {
            margin-left: -13px;

            .self_shelf_count {
                width: 100px;

                .self_img {
                    font-size: 33px;
                    width: 75px;
                    height: 50px;
                }
            }

        }

    }

}

.bottom_row_center {
    margin-top: -57px;
}

.bottom_row_center_map {
    margin-top: 18px;
    margin-left: 23px;
}

.enterprise_device {
    width: 333px;
    height: 444px;
    margin-top: 18px;
    margin-left: 23px;

}


.bottom_row_center_bar {
    display: flex;
    justify-content: flex-start;
    width: 1161px;
    height: 244px;
    background-color: rgba($color: #011B37, $alpha: 0.6);
    margin-top: 24px;
    margin-left: 24px;

    .bottom_row_center_bar_left {
        width: 580px;
        position: relative;
        .total_count{
            position: absolute;
            right: 26px;
            top: 23px;
            font-size: 14px;
            color: rgba(255,255,255,0.86);
        }
    }

    .bottom_row_center_bar_right {
        width: 580px;
    }

}

.bottom_row_right {
    margin-right: 24px;
    margin-top: 10px;

    .bottom_row_right_top {
        width: 332px;
        height: 456px;
        margin-left: 24px;
    }

    .bottom_row_right_bottom {
        width: 332px;
        height: 238px;
        background-color: rgba($color: #011B37, $alpha: 0.6);
        margin-top: 24px;
        margin-left: 24px;
    }
}

.echart_row_1,
.echart_row2,
.echart_row3 {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.echart_cell {
    flex: 1;
    border: 2px solid black;

}
</style>