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">{{ nowTime }}</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.slice(0, 4)" :key="index">
                        {{ item }}
                    </div>
                    <div class="count_item" v-if="equipmentCountInfo.listCount.length > 4">
                        +
                    </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 rentWantRent.rent.slice(0,4)" :key="index">
                        {{ item }}
                    </div>
                    <div class="count_item" v-if="rentWantRent.rent.length>4">
                        +
                    </div>
                </div>
                <div class="rent_title sub_title">求租信息</div>
                <div class="rent_list">
                    <div class="count_item" v-for="(item, index) in  rentWantRent.wantRent.slice(0,4)" :key="index">
                        {{ item }}
                    </div>
                    <div class="count_item" v-if="rentWantRent.wantRent.length>4">
                        +
                    </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.slice(0, 4)" :key="index">
                            {{ item }}
                        </div>
                        <div class="count_item" v-if="platFormInfo.listCount.length>4">
                            +
                        </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 :list="pie3DList.list" v-if="pie3DList.list.length > 0"></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">
                            总人数：{{ totalCount }}
                        </div>
                        <barCom v-if="barComProps.xAxisData.length > 0" :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" :tooltipProps="barComProps.tooltipProps"
                            :barWidth="barComProps.barWidth" :formatCallBack="barComProps.formatCallBack"></barCom>
                    </div>
                    <div class="bottom_row_center_bar_right">
                        <barCom v-if="barComPropsSimple.xAxisData.length > 0" ref="barSimpleRef" :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"
                            :tooltipProps="barComPropsSimple.tooltipProps" :barWidth="barComPropsSimple.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  v-if="barComPropsHorizontal.xAxisData.length > 0" :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"
                        :itemBackgroundStyle="barComPropsHorizontal.itemBackgroundStyle"
                        :barWidth="barComPropsSimple.barWidth"
                        :tooltipProps="barComPropsHorizontal.tooltipProps"
                        :formatCallBack="barComPropsHorizontal.formatCallBack"> </barCom>
                </div>

            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
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"
import {
    apiMaDevInfoList, apiMaDevInfoTypeList,
    apiMaDevInfoCompanyList, apiMaDevInfoMatypeList,
    apiMaOrderInfoTodayList, apiMaOrderInfoList, apiBmMachinistInfoList, apiBmCompanyInfoTypeList, apiMaDevInfoMaList,
    apiMaLeaseInfoInfoTypeList
} from "http/api/echartApi"
const equipmentCountInfo: any = reactive({
    listCount: [],
    selfCount: "",
    shelfCount: ""
})

const middleCountList = reactive({
    list: [
        {
            icon: getImg("/src/assets/img/money1.png"),
            count: "",
            title: "今日订单"
        },
        {
            icon: getImg("/src/assets/img/money2.png"),
            count: "",
            title: "累计金额"
        },
        {
            icon: getImg("/src/assets/img/money3.png"),
            count: "",
            title: "在用设备"
        },
        {
            icon: getImg("/src/assets/img/money2.png"),
            count: "",
            title: "待租设备"
        }
    ]
})
const rentWantRent:any=reactive({
    rent:[],
    wantRent:[]
})
const platFormInfo: any = reactive({
    listCount: [],
    socailCount: "",
    enterpriseCount: "",
    holdingCount: ''
})

const barComProps = reactive({
    title: "机手人数",
    titleStyle: {
        color: "#0099FF",
        paddingTop: 20
    },
    xAxisData: [],
    yAxisProps: {
        type: "value",
        splitLine: {//是否显示 y轴横线
            show: false
        },
        show: false
    },
    seriseData: [],//数据
    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.5)"
    },
    borderRadius: 0,
    barWidth: 14,
    tooltipProps: {
        trigger: "axis",
        backgroundColor: "rgba(255,255,255,0)",
        borderColor: 'rgba(255,255,255,0)',
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)'
    },
    formatCallBack: (params: any) => {
        if (!params || params.length == 0 || !Array.isArray(params)) return
        let fromatStr = ""
        params.forEach((ele: any) => {
            fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">' + ele.data + '</span>' + "</div>"
        })
        return fromatStr
    }
})

const barComPropsSimple: any = reactive({
    title: "租赁订单月统计",
    titleStyle: {
        color: "#0099FF",
        paddingTop: 20
    },
    xAxisData: [], //["123213","werwe","ewrwer"],
    yAxisProps: {
        type: "value",
        splitLine: {//是否显示 y轴横线
            show: true,
            lineStyle: {
                color: ['rgba(255,255,255,0.1)']
            }


        },
        show: true
    },
    seriseData: [],// [12,22,33],//数据
    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,
    tooltipProps: {
        trigger: "axis",
        backgroundColor: "rgba(255,255,255,0)",
        borderColor: 'rgba(255,255,255,0)',
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)'
    },
    formatCallBack: (params: any) => {
        if (!params || params.length == 0 || !Array.isArray(params)) return
        let fromatStr = ""
        params.forEach((ele: any) => {
            fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">' + ele.data + '</span>' + "</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: [],//数据
    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,
    itemBackgroundStyle: "rgba(255,255,255,0.05)",
    tooltipProps: {
        trigger: "axis",
        backgroundColor: "rgba(255,255,255,0)",
        borderColor: 'rgba(255,255,255,0)',
        shadowBlur: 0,
        shadowColor: 'rgba(0, 0, 0, 0)'
    },
    formatCallBack: (params: any) => {
        if (!params || params.length == 0 || !Array.isArray(params)) return
        let fromatStr = ""
        params.forEach((ele: any) => {
            fromatStr += '<div style="<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(255,255,255,0);color:#fff;"></span> <span style="color:#fff;">' + ele.data + '</span>' + "</div>"
        })
        return fromatStr
    }
})
const pie3DList = reactive({
    list: []
})
onMounted(() => {
    iniTapiMaDevInfoList()
    iniTapiMaDevInfoTypeList()
    iniTapiMaDevInfoCompanyList()
    iniTapiMaDevInfoMatypeList()
    iniTapiMaOrderInfoTodayList()
    iniTapiMaOrderInfoList()
    // ==
    iniTapiBmMachinistInfoList()
    iniTapiBmCompanyInfoTypeLis()

    iniTapiMaDevInfoMaList()
    InitApiMaLeaseInfoInfoTypeList()
})


const iniTapiMaDevInfoList = async () => {
    // 平台入驻设备总数
    try {
        const res: any = await apiMaDevInfoList()
        console.log("apiMaDevInfoList", res)
        equipmentCountInfo.listCount = (res + '').padStart(4,'0').split("")
    } catch (error) {
        console.log(error)
    }

}

const iniTapiMaDevInfoTypeList = async () => {
    // 查询自有以及上架可租设备数量
    try {
        const res: any = await apiMaDevInfoTypeList()
        console.log("apiMaDevInfoTypeList", res)
        equipmentCountInfo.selfCount = res.self.count
        equipmentCountInfo.shelfCount = res.rent.count
    } catch (error) {
        console.log(error)
    }

}
const iniTapiMaDevInfoCompanyList = async () => {
    // 获取企业所属设备状态为自有的设备数量:
    try {
        const res: any = await apiMaDevInfoCompanyList()
        console.log("apiMaDevInfoCompanyList", res)
        let resultList: any = []
        res.forEach((ele: any) => {
            const item = [
                ele.coType,
                ele.count
            ]
            resultList.push(item)
        })
        pie3DList.list = resultList
    } catch (error) {
        console.log(error)
    }

}
const iniTapiMaDevInfoMatypeList = async () => {
    // 查询在租以及待租设备数量:
    try {
        const res: any = await apiMaDevInfoMatypeList()
        console.log("apiMaDevInfoMatypeList", res)
        middleCountList.list[2].count = res.rent.count
        middleCountList.list[3].count = res.use.count
    } catch (error) {
        console.log(error)
    }

}
const iniTapiMaOrderInfoTodayList = async () => {
    //查询今日订单额以及订单数量:
    try {
        const res: any = await apiMaOrderInfoTodayList()
        console.log("apiMaOrderInfoTodayList", res)
        middleCountList.list[0].count = res[0].count
        middleCountList.list[1].count = res[0].money
    } catch (error) {
        console.log(error)
    }

}

const iniTapiMaOrderInfoList = async () => {
    //租赁订单月统计:
    try {
        const res: any = await apiMaOrderInfoList()

        barComPropsSimple.xAxisData = res.map((ele: any) => ele.month)
        barComPropsSimple.seriseData = res.map((ele: any) => ele.count)
    } catch (error) {
        console.log(error)
    }

}
// -----
const totalCount = ref("")
const iniTapiBmMachinistInfoList = async () => {
    //获取企业所属对应的机手数量以及机手总人数:
    try {
        const res: any = await apiBmMachinistInfoList()
        console.log("apiBmMachinistInfoList", res)
        totalCount.value = res.total
        barComProps.xAxisData = res.type.map((ele: any) => ele.ownCo)
        barComProps.seriseData = res.type.map((ele: any) => ele.count)
    } catch (error) {
        console.log(error)
    }

}
const iniTapiBmCompanyInfoTypeLis = async () => {
    //根据企业类型查询对应数量以及总数量:
    try {
        const res: any = await apiBmCompanyInfoTypeList()
        console.log("apiBmCompanyInfoTypeList", res)
        platFormInfo.listCount = (res.total + '').padStart(4,'0').split("")
        platFormInfo.socailCount = res.social.count
        platFormInfo.enterpriseCount = res.grid.count
        platFormInfo.holdingCount = res.corporation.count

    } catch (error) {
        console.log(error)
    }

}

const iniTapiMaDevInfoMaList = async () => {
    //查询设备状态为在租的设备名称及数量;租赁在用装备排名
    try {
        const res: any = await apiMaDevInfoMaList()
        console.log("apiMaDevInfoMaList", res)
        barComPropsHorizontal.xAxisData = res.map((ele: any) => ele.ownCo)
        barComPropsHorizontal.seriseData = res.map((ele: any) => ele.count)

    } catch (error) {
        console.log(error)
    }

}

const InitApiMaLeaseInfoInfoTypeList= async()=>{
    // 根据求出租信息查询对应的数量:    
    try {
        const res: any = await apiMaLeaseInfoInfoTypeList()
        console.log("apiMaLeaseInfoInfoTypeList", res)
        rentWantRent.rent = (res.rent.count + '').padStart(4,'0').split("")
        rentWantRent.wantRent =  (res.wantRent.count + '').padStart(4,'0').split("")

    } catch (error) {
        console.log(error)
    }
}

const nowTime = ref("")

// 实时获取当前时间, 格式为 2023.11.16 星期四 09:56:12
const getCurrentWeather = () => {
    const date = new Date()
    const year = date.getFullYear()
    const month = (date.getMonth() + 1 + '').padStart(2, '0')
    const day = (date.getDate() + '').padStart(2, '0')
    const week = date.getDay()
    const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    const hour = (date.getHours() + '').padStart(2, '0')
    const minute = (date.getMinutes() + '').padStart(2, '0')
    const second = (date.getSeconds() + '').padStart(2, '0')
    return `${year}.${month}.${day} ${weekArr[week]} ${hour}:${minute}:${second}`
}

setInterval(() => {
    nowTime.value = getCurrentWeather()
}, 1000)

</script>
  
<style lang="scss" scoped>
.out_echart {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 1920px;
    height: 1080px;
    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: contain;
    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;
        display: flex;

        .wheather {
            padding-right: 34px;
        }
        .time {
            display: flex;
            width: 205px;
        }
    }
}

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