645 lines
19 KiB
Vue
645 lines
19 KiB
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"
|
||
:itemBackgroundStyle="barComPropsHorizontal.itemBackgroundStyle"
|
||
: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,
|
||
itemBackgroundStyle:"rgba(255,255,255,0.05)",
|
||
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> |