888 lines
27 KiB
Vue
888 lines
27 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="weather">晴转多云 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 || "0" }}
|
|
</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 {
|
|
apiMaDevInfoList, apiMaDevInfoTypeList,
|
|
apiMaDevInfoCompanyList, apiMaDevInfoMatypeList,
|
|
apiMaOrderInfoTodayList, apiMaOrderInfoList, apiBmMachinistInfoList, apiBmCompanyInfoTypeList, apiMaDevInfoMaList,
|
|
apiMaLeaseInfoInfoTypeList
|
|
} from "http/api/echartApi"
|
|
const equipmentCountInfo: any = reactive({
|
|
// 平台入驻设备总数
|
|
listCount: [
|
|
// "0", "0", "0", "1" // 默认假数据
|
|
],
|
|
selfCount: 0,
|
|
shelfCount: 0
|
|
})
|
|
|
|
const middleCountList = reactive({
|
|
list: [
|
|
{
|
|
icon: new URL("/src/assets/img/money1.png", import.meta.url).href,
|
|
count: 0,
|
|
title: "今日订单"
|
|
},
|
|
{
|
|
icon: new URL("/src/assets/img/money2.png", import.meta.url).href,
|
|
count: 0,
|
|
title: "累计金额"
|
|
},
|
|
{
|
|
icon: new URL("/src/assets/img/money3.png", import.meta.url).href,
|
|
count: 0,
|
|
title: "在用设备"
|
|
},
|
|
{
|
|
icon: new URL("/src/assets/img/money2.png", import.meta.url).href,
|
|
count: 0,
|
|
title: "待租设备"
|
|
}
|
|
]
|
|
})
|
|
const rentWantRent:any=reactive({
|
|
// 出租信息
|
|
rent:[
|
|
"1", "0", "0", "0" // 默认假数据
|
|
],
|
|
// 求租信息
|
|
wantRent:[
|
|
"0", "0", "0", "0" // 默认假数据
|
|
]
|
|
})
|
|
const platFormInfo: any = reactive({
|
|
// 平台入驻单位
|
|
listCount: [
|
|
"0", "0", "0", "0" // 默认假数据
|
|
],
|
|
socailCount: "0",
|
|
enterpriseCount: "0",
|
|
holdingCount: '0'
|
|
})
|
|
|
|
const barComProps = reactive({
|
|
title: "机手人数",
|
|
titleStyle: {
|
|
color: "#0099FF",
|
|
paddingTop: 20
|
|
},
|
|
xAxisData: [
|
|
// "机手1","机手2","机手3","机手4","机手5","机手6","机手7","机手8","机手9"
|
|
],
|
|
yAxisProps: {
|
|
type: "value",
|
|
splitLine: {//是否显示 y轴横线
|
|
show: false
|
|
},
|
|
show: false
|
|
},
|
|
seriseData: [
|
|
// 120, 132, 101, 134, 90, 230, 210, 220, 182, 191, 234, 290
|
|
],//数据
|
|
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: [
|
|
// 120, 132, 101, 134, 90
|
|
],//数据
|
|
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: [
|
|
// 假数据
|
|
{name: 'Chrome', y: 61.41},
|
|
{name: 'Internet Explorer', y: 11.84},
|
|
{name: 'Firefox', y: 10.85},
|
|
{name: 'Edge', y: 4.67},
|
|
{name: 'Safari', y: 4.18},
|
|
]
|
|
})
|
|
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 || 0
|
|
equipmentCountInfo.shelfCount = res.use.count || 0
|
|
} 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 apiMaDevInfoTypeList()
|
|
console.log("apiMaDevInfoMatypeList", res)
|
|
middleCountList.list[2].count = res.rent.count || 0
|
|
middleCountList.list[3].count = res.use.count || 0
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
|
|
}
|
|
const iniTapiMaOrderInfoTodayList = async () => {
|
|
//查询今日订单额以及订单数量:
|
|
try {
|
|
const res: any = await apiMaOrderInfoTodayList()
|
|
console.log("apiMaOrderInfoTodayList", res)
|
|
middleCountList.list[0].count = res.count || 0
|
|
middleCountList.list[1].count = res.money || 0
|
|
} catch (error) {
|
|
console.log('err-->', error)
|
|
}
|
|
|
|
}
|
|
|
|
const iniTapiMaOrderInfoList = async () => {
|
|
//租赁订单月统计:
|
|
try {
|
|
const res: any = await apiMaOrderInfoList()
|
|
console.log("租赁订单-->", res)
|
|
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.yAxisData = 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;
|
|
min-width: 1920px;
|
|
// 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: 100% 109px;
|
|
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;
|
|
|
|
.weather {
|
|
padding-right: 34px;
|
|
}
|
|
.time {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
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: 0 auto;
|
|
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: 1190px;
|
|
padding-top: 60px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin: 0 auto;
|
|
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> |