<template>
|
<div class="revenue">
|
<div class="up-container">
|
<div class="item">
|
<div class="item-title">
|
<div></div>
|
<span>营收总览</span>
|
</div>
|
<div class="item-content">
|
<div class="revenue-content">
|
<div class="balance">
|
<div class="balance-money">{{totalAmount}}</div>
|
<div class="balance-account">账户余额</div>
|
<div class="balance-unit">元</div>
|
</div>
|
<div class="compare">
|
<div v-for="(item,index) in overviewList" class="compare-item">
|
<div class="compare-item-up">
|
<div class="compare-item-up-left">
|
<img src="../../../assets/images/screen/revenue/icon.png" alt="">
|
<div>{{ item.name }}</div>
|
</div>
|
<div class="compare-item-up-income">{{ item.amount }}元</div>
|
<div class="compare-item-up-change"> 环比{{ item.change}}{{ item.huanbiAmount }}</div>
|
</div>
|
<div class="compare-item-down">
|
<div class="compare-item-down-progress"><el-progress class="el-percentage" :percentage="item.rate" :stroke-width="8" :color="item.color" :show-text="false" /></div>
|
<div class="compare-item-down-percentage">
|
<div v-if="item.change === '下降'" class="down-icon"></div>
|
<div v-else class="up-icon"></div>
|
<div class="percentage">{{ item.rate }}%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="item-title">
|
<div></div>
|
<span>用户总览</span>
|
</div>
|
<div class="user-container">
|
<div class="user-content">
|
<div class="user-top">
|
<div class="top-one"><span>用户总数</span></div>
|
<div class="top-two">
|
<span>本年新增用户数</span>
|
<span>{{ userQuantityList.userAddCount}}</span>
|
</div>
|
<div class="top-three">
|
<span>{{ userQuantityList.userSumCount}}</span>
|
<div></div>
|
</div>
|
<div class="top-four">
|
<span>本年注销用户数</span>
|
<span>{{ userQuantityList.userCloseCount}}</span>
|
</div>
|
</div>
|
<div class="user-pie">
|
<div class="pie-item">
|
<div class="pie-left-title"><span>用户类型</span></div>
|
<div id="user-type"></div>
|
</div>
|
<div class="pie-item">
|
<div class="pie-right-title"><span>用户缴费情况</span></div>
|
<div id="user-pay"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="item">
|
<div class="item-title">
|
<div></div>
|
<span>抄表记录</span>
|
</div>
|
<div class="meter-container">
|
<div class="table-header-bg"></div>
|
<div class="table-content">
|
<el-table v-loading="loading" :data="tableData" width="100%" max-height="690px">
|
<el-table-column
|
v-for="(item, key, index) of tableHeader"
|
:prop="key.toString()"
|
:label="item"
|
:key="index"
|
align="center"
|
:width="key.toString() == 'createTimeView' ? '150' : ''"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="bottom-container">
|
<div class="trend-item-container">
|
<div class="trend-title">
|
<div></div>
|
<span>近一年总用水趋势</span>
|
</div>
|
<div class="trend-content">
|
<div id="water-chart"></div>
|
<div class="rank">
|
<div v-if="waterRankList.waterRankTop[0].userName" class="rank-top">
|
<div class="rank-one">
|
<div>NO.1</div>
|
|
<el-tooltip placement="top" effect="light">
|
<span class="rank-text">{{ waterRankList.waterRankTop[0].userName }}</span>
|
<template #content>
|
<span class="rank-text-tips1">{{ waterRankList.waterRankTop[0].userName }}</span>
|
</template>
|
</el-tooltip>
|
<span>... </span>
|
|
<span>{{ waterRankList.waterRankTop[0].countValue }}吨</span>
|
</div>
|
<!-- -------------------------------------------------------- -->
|
<div class="rank-two">
|
<div>NO.2</div>
|
<el-tooltip placement="top" effect="light">
|
<span class="rank-text">{{ waterRankList.waterRankTop[1].userName }}</span>
|
<template #content>
|
<span class="rank-text-tips1">{{ waterRankList.waterRankTop[1].userName }}</span>
|
</template>
|
</el-tooltip>
|
<span>... </span>
|
<span>{{ waterRankList.waterRankTop[1].countValue }}吨</span>
|
</div>
|
<!-- -------------------------------------------------------- -->
|
<div class="rank-three">
|
<div>NO.3</div>
|
<el-tooltip placement="top" effect="light">
|
<span class="rank-text">{{ waterRankList.waterRankTop[2].userName }}</span>
|
<template #content>
|
<span class="rank-text-tips1">{{ waterRankList.waterRankTop[2].userName }}</span>
|
</template>
|
</el-tooltip>
|
<span>... </span>
|
<span>{{ waterRankList.waterRankTop[2].countValue }}吨</span>
|
</div>
|
</div>
|
<!-- -------------------------------------------------------- -->
|
<div v-if="waterRankList.waterRankPlain[0].userName" class="rank-plain">
|
<div v-for="(item,index) in waterRankList.waterRankPlain" :key="index" class="rank-item">
|
<div class="rank-num"> NO.{{ index + 4 }} </div>
|
|
<el-tooltip placement="top" effect="light">
|
<div class="rank-name rank-text">{{ item.userName }}</div>
|
<template #content>
|
<span class="rank-text-tips1">{{ item.userName }}</span>
|
</template>
|
</el-tooltip>
|
|
<!-- <div class="rank-name rank-text">{{ item.userName }}{{ item.countValue}}吨</div> -->
|
<div class="rank-name">... </div>
|
<div class="rank-name">{{ item.countValue}}吨</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="trend-item-container">
|
<div class="trend-title">
|
<div></div>
|
<span>近一年缴费趋势</span>
|
</div>
|
<div class="trend-content">
|
<div id="pay-chart"></div>
|
<!-- 缴费排名 -->
|
<div class="rank">
|
<div v-if="payRankList.rankTop[0].userName" class="rank-top">
|
<div class="rank-one">
|
<div>NO.1</div>
|
|
<el-tooltip placement="top" effect="light">
|
<span class="rank-text">{{ payRankList.rankTop[0].userName }}</span>
|
<template #content>
|
<span class="rank-text-tips1">{{payRankList.rankTop[0].userName }}</span>
|
</template>
|
</el-tooltip>
|
|
<!-- <span class="rank-text">{{ payRankList.rankTop[0].userName }}{{ payRankList.rankTop[0].countValue }}元</span> -->
|
<span>... </span>
|
<span>{{ payRankList.rankTop[0].countValue }}元</span>
|
</div>
|
<div class="rank-two">
|
<div>NO.2</div>
|
|
<el-tooltip placement="top" effect="light">
|
<span class="rank-text">{{ payRankList.rankTop[1].userName }}</span>
|
<template #content>
|
<span class="rank-text-tips1">{{payRankList.rankTop[1].userName }}</span>
|
</template>
|
</el-tooltip>
|
<span>... </span>
|
<span>{{ payRankList.rankTop[1].countValue }}元</span>
|
</div>
|
<div class="rank-three">
|
<div>NO.3</div>
|
|
<el-tooltip placement="top" effect="light">
|
<span class="rank-text">{{ payRankList.rankTop[2].userName }}</span>
|
<template #content>
|
<span class="rank-text-tips1">{{payRankList.rankTop[2].userName }}</span>
|
</template>
|
</el-tooltip>
|
<!-- <span class="rank-text">{{ payRankList.rankTop[2].userName }}{{ payRankList.rankTop[2].countValue }}元</span> -->
|
<span>... </span>
|
<span>{{ payRankList.rankTop[2].countValue }}元</span>
|
</div>
|
</div>
|
<div v-if="payRankList.rankPlain[0].userName" class="rank-plain">
|
<div v-for="(item,index) in payRankList.rankPlain" :key="index" class="rank-item">
|
<div class="rank-num"> NO.{{ index + 4 }} </div>
|
|
<el-tooltip placement="top" effect="light">
|
<div class="rank-name rank-text">{{ item.userName }}</div>
|
<template #content>
|
<span class="rank-text-tips1">{{ item.userName }}</span>
|
</template>
|
</el-tooltip>
|
|
<div class="rank-name">...</div>
|
<div class="rank-name">{{ item.countValue}}元</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import * as echarts from 'echarts'
|
import { revenue } from '@/api/screen/revenue/index'
|
|
/**
|
*
|
* 营收总览---------------------------
|
*/
|
//获取营收总览数据
|
const overviewList = ref([
|
{name: '暂无数据',amount: '0.00',huanbiAmount: '0.00',rate: '0.00'},
|
{name: '暂无数据',amount: '0.00',huanbiAmount: '0.00',rate: '0.00'},
|
{name: '暂无数据',amount: '0.00',huanbiAmount: '0.00',rate: '0.00'},
|
])
|
const totalAmount = ref([])
|
const getOverviewList = async () => {
|
await revenue().getEvenueStatistics().then((res) => {
|
totalAmount.value = res.data.totalAmount === '0' ? '0.00' : res.data.totalAmount
|
overviewList.value = res.data.listVO
|
overviewList.value.forEach(item => {
|
if(item.huanbiAmount >= item.amount){
|
item.change = '下降'
|
}else{
|
item.change = '增长'
|
}
|
})
|
})
|
}
|
/**
|
*
|
* 用户总览---------------------------------------------
|
*/
|
|
//获取-营收用户-数量-数据
|
const userQuantityList = ref( {
|
userSumCount: '0.00',
|
userCloseCount: '0.00',
|
userAddCount: '0.00',
|
},)
|
const getUserQuantityList = async () => {
|
await revenue().getUserCount().then((res) => {
|
userQuantityList.value = res.data
|
})
|
}
|
//获取-营收用户-类型-数据
|
let loadingEcharts = {
|
text: 'loading',
|
textColor: 'rgba(105,133,219, 1)',
|
maskColor: 'rgba(202, 224, 252, 0.2)',
|
fontSize: '20px',
|
}
|
let userTypeEcharts = undefined
|
let userPayEcharts = undefined
|
const echartsInit = () =>{
|
payTrendEcharts = echarts.init(document.getElementById('pay-chart'));
|
userWaterTrendEcharts = echarts.init(document.getElementById('water-chart'));
|
userTypeEcharts = echarts.init(document.getElementById('user-type'));
|
userPayEcharts = echarts.init(document.getElementById('user-pay'));
|
}
|
//营收用户-echarts配置
|
let baseOption = {
|
tooltip: {
|
trigger: 'item',
|
},
|
legend: {
|
orient: 'horizontal',
|
bottom: 'bottom',
|
textStyle:{
|
fontSize:12,
|
color:'#fff'
|
}
|
|
},
|
series:{
|
type: 'pie',
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
},
|
label:{
|
show: false,
|
}
|
},
|
};
|
//获取用户类型
|
const userTypeList = ref([])
|
const getUserType = async () =>{
|
userTypeEcharts.showLoading(loadingEcharts)
|
await revenue().getUserClassify().then((res) => {
|
userTypeList.value = res.data
|
})
|
userTypeEcharts.hideLoading()
|
let option = JSON.parse(JSON.stringify(baseOption))
|
option.series.data = userTypeList.value
|
option.series.radius = '75%'
|
userTypeEcharts.setOption(option,true)
|
}
|
//获取用户缴费
|
const userPayList = ref([])
|
const getUserPay = async () =>{
|
userPayEcharts.showLoading(loadingEcharts)
|
await revenue().getUserPayCondition().then((res) => {
|
userPayList.value = [
|
{name:'欠款',value:res.data.ArrearageCount},
|
{name:'已缴费',value:res.data.yesCount},
|
{name:'未缴费',value:res.data.notCount},
|
]
|
})
|
userPayEcharts.hideLoading()
|
let option = JSON.parse(JSON.stringify(baseOption))
|
option.series.data = userPayList.value
|
option.series.radius = ['40%','75%']
|
userPayEcharts.setOption(option,true)
|
}
|
/**
|
*
|
* 抄表记录-------------------------
|
*/
|
const tableData = ref([]);
|
let tableHeader = ref({
|
userName: "用户名称",
|
waterMeterSn: "水表编号",
|
atData: "累计用水",
|
deductAmount: "扣除金额",
|
usableData: "剩余金额",
|
createTimeView: "抄表时间",
|
})
|
|
/** 获取table列表 */
|
const loading = ref(false);
|
async function getTableData() {
|
loading.value = true;
|
await revenue().getMeterReading().then((res) =>{
|
res.data.forEach((item) =>{
|
item.atData = item.atData + ' t'
|
})
|
tableData.value = res.data
|
})
|
loading.value = false;
|
}
|
|
/**
|
*用水趋势-------------------------------
|
*/
|
const userWaterList = ref([])
|
let userWaterTrendEcharts = undefined
|
const getUserWaterTrend = async() =>{
|
userWaterTrendEcharts.showLoading(loadingEcharts)
|
let data = []
|
await revenue().searchWater().then((res) => {
|
if(res.data){
|
Object.keys(res.data).forEach((key) => {
|
data.push({month:key,count:res.data[key]})
|
})
|
userWaterList.value = data
|
console.log('userWaterList.value',userWaterList.value)
|
}
|
})
|
userWaterTrendEcharts.hideLoading()
|
setTrendOption(userWaterTrendEcharts,userWaterList.value,['month','count'],'用水量（吨）','用水量')
|
}
|
/**
|
*缴费趋势
|
*/
|
const payList = ref([])
|
let payTrendEcharts = undefined
|
const getPayTrend = async() =>{
|
payTrendEcharts.showLoading(loadingEcharts)
|
let data = []
|
await revenue().searchPay().then((res) => {
|
if(res.data){
|
Object.keys(res.data).forEach((key) => {
|
data.push({month:key,totalamount:res.data[key]})
|
})
|
payList.value = data
|
console.log('payList.value',payList.value)
|
}
|
})
|
payTrendEcharts.hideLoading()
|
setTrendOption(payTrendEcharts,payList.value,['month','totalamount'],'金额（元）','金额')
|
}
|
//设置趋势echarts配置项
|
const setTrendOption = (echarts,dateList,dimensionsList,yAxisTitle,toolstipTitle) =>{
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
label:{
|
formatter:'{value}月'
|
},
|
type: 'line' ,
|
lineStyle:{
|
color:'rgba(231,237,244,0.48)',
|
},
|
snap:true,
|
},
|
},
|
xAxis: {
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color:'rgba(231,236,240,0.4)',
|
width:1
|
}
|
},
|
axisTick:{
|
inside:true
|
},
|
axisLabel:{
|
show:false,
|
color:'#B3E3E5',
|
fontSize: 14
|
},
|
type: 'category',
|
},
|
yAxis: {
|
name:yAxisTitle,
|
nameTextStyle:{
|
color:'#B3E3E5',
|
fontSize: 16,
|
fontWeight:400,
|
},
|
axisLine:{
|
show: true,
|
lineStyle:{
|
color:'rgba(231,236,240,0.4)',
|
width:1
|
}
|
},
|
splitLine:{
|
show:true,
|
lineStyle:{
|
color:'rgba(231,236,240,0.2)',
|
}
|
},
|
axisLabel:{
|
color:'#B3E3E5',
|
fontSize:12,
|
},
|
type: 'value'
|
},
|
dataset:{
|
dimensions:dimensionsList,
|
source:dateList,
|
},
|
series:{
|
name:toolstipTitle,
|
type: 'line',
|
smooth: true,
|
},
|
grid:{
|
width:'90%',
|
height:'80%',
|
top:'11%',
|
left:'10%',
|
}
|
};
|
echarts.setOption(option,true);
|
}
|
|
/**
|
*
|
* 缴费排行-----------------------
|
*/
|
const payRankList = ref({
|
rankTop:[
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
],
|
rankPlain:[
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
],
|
})
|
const getPayRankList = async () =>{
|
await revenue().getPayRank().then((res) =>{
|
if(res.data.length !== 0){
|
payRankList.value = {rankTop:[],rankPlain:[]}
|
res.data.forEach((item,index) => {
|
if(index <= 2){
|
payRankList.value.rankTop.push(item)
|
// payRankList.value.rankTop[index] = res.data[index]
|
}else if(index > 2 && index < 8){
|
payRankList.value.rankPlain.push(item)
|
// payRankList.value.rankPlain[index] = res.data[index]
|
}
|
})
|
}
|
})
|
}
|
getPayRankList()
|
//用水排行
|
const waterRankList = ref({
|
waterRankTop:[
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
],
|
waterRankPlain:[
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
{userName:"",countValue:''},
|
],
|
})
|
const getWaterRankList = async () =>{
|
await revenue().getWaterRank().then((res) =>{
|
waterRankList.value = {waterRankTop:[],waterRankPlain:[]}
|
if(res.data.length !== 0){
|
res.data.forEach((item,index) => {
|
if(index <= 2){
|
waterRankList.value.waterRankTop.push(item)
|
}else if(index > 2 && index < 8){
|
waterRankList.value.waterRankPlain.push(item)
|
}
|
})
|
}
|
})
|
}
|
getWaterRankList()
|
window.addEventListener('resize', function() {
|
payTrendEcharts.resize();
|
userWaterTrendEcharts.resize();
|
userTypeEcharts.resize();
|
userPayEcharts.resize();
|
});
|
onMounted(async () => {
|
echartsInit()
|
await getTableData()
|
await getUserType()
|
await getUserPay()
|
await getOverviewList()
|
await getUserQuantityList()
|
await getUserWaterTrend()
|
await getPayTrend()
|
|
})
|
//卸载前销毁图表
|
const disposeEcharts = (echarts) => {
|
if (echarts) {
|
echarts.dispose();
|
echarts = null;
|
}
|
}
|
onBeforeUnmount(async ()=> {
|
disposeEcharts(payTrendEcharts)
|
disposeEcharts(userWaterTrendEcharts)
|
disposeEcharts(userTypeEcharts)
|
disposeEcharts(userPayEcharts)
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.revenue{
|
width: 100%;//1920
|
height: 100%;//928
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
.up-container{
|
display: flex;
|
justify-content: space-evenly;
|
width: 100%;//1920
|
height:52%;//455
|
.item{
|
width:31%;//595
|
height:100%;//455
|
.item-title{
|
width: 100%;//595
|
height:5%;
|
display: flex;
|
align-items: center;
|
margin-bottom:1%;
|
padding-left: 5px;
|
div{
|
width: 2px;
|
height:100%;
|
background: #6EDEE3;
|
margin-right: 12px;
|
}
|
span{
|
font-size: 22px;
|
color: #FFFFFF;
|
text-shadow: 0 2px 2px rgba(32,32,32,0.8);
|
}
|
}
|
.item-content{
|
width: 100%;//595
|
height:94%;//432
|
background: rgba(26,61,68,0.5);
|
border: 1px solid #0D385F;
|
padding:4% 5%;//25 30
|
.revenue-content{
|
width:100%;
|
height:100%;
|
.balance{
|
height:30%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
align-items: center;
|
padding-bottom:1%;
|
.balance-money{
|
font-weight: 400;
|
font-size: 24px;
|
color: #00FFF0;
|
}
|
.balance-account{
|
width:135px;
|
height:37px;
|
background-image: url("../../../assets/images/screen/revenue/balance.png");
|
background-size: 100% 100%;
|
font-weight: 400;
|
font-size: 17px;
|
color: #95F2F6;
|
text-align: center;
|
line-height: 37px;
|
}
|
.balance-unit{
|
font-weight: 400;
|
font-size: 15px;
|
color: #95F2F6;
|
margin-top: -15px;
|
}
|
}
|
.compare{
|
height:69%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-between;
|
.compare-item{
|
height:30%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
.compare-item-up{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-right: 120px;
|
.compare-item-up-left{
|
display: flex;
|
align-items: center;
|
img{
|
margin-right: 10px;
|
}
|
div{
|
font-weight: 400;
|
font-size: 20px;
|
color: #95F2F6;
|
}
|
}
|
.compare-item-up-income{
|
font-weight: 400;
|
font-size: 20px;
|
color: #89AFFB;
|
}
|
.compare-item-up-change{
|
font-weight: 400;
|
font-size: 18px;
|
color: #95F2F6;
|
}
|
}
|
.compare-item-down{
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-left: 60px;
|
.compare-item-down-progress{
|
width: 78%;
|
:deep(.el-percentage .el-progress-bar__outer ){
|
background-color: #154B7D; /* 设置你想要的背景色 */
|
}
|
}
|
.compare-item-down-percentage{
|
width: 22%;
|
padding-left:10px;
|
display: flex;
|
justify-content:space-between;
|
.up-icon{
|
width: 16px;
|
height: 22px;
|
background-image: url("../../../assets/images/screen/revenue/up-icon.png");
|
background-size: 100% 100%;
|
}
|
.down-icon{
|
width: 16px;
|
height: 22px;
|
background-image: url("../../../assets/images/screen/revenue/down-icon.png");
|
background-size: 100% 100%;
|
}
|
.percentage{
|
font-weight: 400;
|
font-size: 20px;
|
color: #95F2F6;
|
}
|
}
|
}
|
}
|
}
|
}
|
.user-container{
|
width: 100%;
|
height:95%;
|
background: rgba(26,61,68,0.5);
|
border: 1px solid #0D385F;
|
padding:20px 10px;
|
margin: 0 auto;
|
.user-content{
|
width:100%;
|
height:100%;
|
display: flex;
|
justify-content: space-between;
|
flex-direction: column;
|
.user-top{
|
width:100%;
|
height:30%;
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
.top-one{
|
width:173px;
|
height:31px;
|
background-image: url("../../../assets/images/screen/revenue/user-quantity.png");
|
background-size: 100% 100%;
|
span{
|
margin-left: 10px;
|
font-weight: 400;
|
font-size: 20px;
|
color: #95F2F6;
|
line-height: 31px;
|
}
|
}
|
.top-two, .top-four{
|
width:254px;
|
height:33px;
|
background-image: url("../../../assets/images/screen/revenue/user-up.png");
|
background-size: 100% 100%;
|
span:first-child{
|
font-weight: 400;
|
font-size: 20px;
|
color: #1FB0BE;
|
margin-right: 20px;
|
line-height: 33px;
|
}
|
span:last-child{
|
font-weight: 400;
|
font-size: 20px;
|
color: #95F2F6;
|
}
|
}
|
.top-three{
|
span{
|
font-weight: 400;
|
font-size: 28px;
|
color: #95F2F6;
|
}
|
div{
|
width: 182px;
|
height: 2px;
|
background: #00FFF6;
|
border: 2px solid #1FB0BE;
|
}
|
}
|
}
|
.user-pie{
|
display: flex;
|
justify-content: center;
|
//background: rgba(200, 208, 213, 0.3);
|
height:70%;
|
width:100%;
|
padding:1% 2% 0;
|
.pie-item{
|
width:50%;
|
height:100%;
|
display: flex;
|
justify-content:center;
|
flex-direction: column;
|
align-items: center;
|
//background: rgba(165, 170, 179, 0.4);
|
.pie-left-title{
|
width:80%;
|
height:33px;
|
background-image: url("../../../assets/images/screen/revenue/user-type.png");
|
background-repeat: no-repeat;
|
span{
|
font-weight: 400;
|
font-size: 20px;
|
color: #95F2F6;
|
margin-left:35px;
|
}
|
}
|
.pie-right-title{
|
width:80%;
|
height:33px;
|
background-image: url("../../../assets/images/screen/revenue/user-type.png");
|
background-repeat: no-repeat;
|
span{
|
font-weight: 400;
|
font-size: 20px;
|
color: #95F2F6;
|
margin-left:35px;
|
}
|
}
|
#user-type{
|
height:85%;
|
width: 100%;
|
//background: rgba(222, 223, 225, 0.34);
|
}
|
#user-pay{
|
height:85%;
|
width: 100%;
|
//background: rgba(222, 223, 225, 0.34);
|
}
|
}
|
//.pie-item{
|
// width:50%;
|
// height:100%;
|
// display: flex;
|
// justify-content: space-between;
|
// flex-direction: column;
|
// align-items: center;
|
// background: rgba(165, 179, 168, 0.39);
|
//}
|
}
|
}
|
}
|
.meter-container{
|
width: 100%;
|
height:95%;
|
background: rgba(26,61,68,0.5);
|
border: 1px solid #0D385F;
|
margin: 0 auto;
|
position: relative;
|
.table-header-bg{
|
height:14%;
|
width:100%;
|
background: linear-gradient(to right,rgba(21,173,248,0.5),rgba(66,93,114,0.3));
|
border: 1px solid #0D385F;
|
position: absolute;
|
}
|
.table-content{
|
height:87%;
|
width:100%;
|
overflow: hidden;
|
//修改边框和字体
|
:deep(.el-table){
|
--el-table-border-color:rgba(0,0,0,0);
|
font-weight:400;
|
font-size: 16px;
|
color: #95F2F6;
|
}
|
|
//修改头部字体
|
:deep(.el-table__header th){
|
font-weight: 400;
|
font-size: 14px;
|
color: #59F8FF;
|
}
|
/*最外层透明*/
|
:deep(.el-table),
|
:deep(.el-table__expanded-cell){
|
background-color: transparent !important;
|
}
|
/* 表格内背景颜色 */
|
:deep(.el-table th),
|
:deep(.el-table tr),
|
:deep(.el-table td){
|
background-color: transparent !important;
|
border-bottom:1px solid #1D627D !important;
|
}
|
//:deep(.el-table tr){
|
// border:1px solid #000 !important;
|
//}
|
/*去除底边框*/
|
:deep(.el-table td.el-table__cell){
|
border:0;
|
}
|
:deep(.el-table th.el-table__cell.is-leaf) {
|
border: 0;
|
}
|
/*去除底部灰条.el-table::before*/
|
:deep(.el-table::before) {
|
display: none;
|
}
|
}
|
}
|
}
|
}
|
.bottom-container{
|
display: flex;
|
justify-content: space-evenly;
|
width: 100%;
|
height:43%;
|
.trend-item-container{
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
width:47.5%;
|
height:100%;
|
}
|
.trend-title{
|
width: 100%;
|
height:7%;
|
display: flex;
|
align-items: center;
|
margin-bottom:1%;
|
padding-left: 5px;
|
span{
|
font-size: 22px;
|
color: #FFFFFF;
|
text-shadow: 0 2px 2px rgba(32,32,32,0.8);
|
}
|
div{
|
width:2px;
|
height:100%;
|
background: #6EDEE3;
|
margin-right: 12px;
|
}
|
}
|
.trend-content{
|
width:100%;
|
height:92%;
|
display: flex;
|
background: rgba(26,61,68,0.5);
|
border: 1px solid #0D385F;
|
padding:5px;
|
#pay-chart{
|
width:75%;
|
height:100%;
|
};
|
#water-chart{
|
width:75%;
|
height:100%;
|
}
|
.rank{
|
width:25%;
|
height:100%;
|
display: flex;
|
align-items: center;
|
justify-content:center;
|
flex-direction: column;
|
padding:2% 0;
|
//排名公用样式rank-text
|
.rank-text{
|
width:56px;
|
height: 100%;
|
line-height:100%;
|
overflow:hidden;
|
}
|
.rank-top{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-direction: column;
|
padding: 0 6px;
|
width: 100%;
|
height: 35%;
|
.rank-one{
|
height:18px;
|
width: 100%;
|
justify-content:flex-start;
|
display: flex;
|
align-items: center;
|
div{
|
font-weight: 400;
|
font-size: 22px;
|
color: #FFE082;
|
text-shadow: 0 3px 0 rgba(255,186,87,0.65);
|
margin-right:5px;
|
}
|
span{
|
font-weight: normal;
|
font-size: 18px;
|
color: #FFE082;
|
}
|
}
|
.rank-two{
|
height:18px;
|
width: 100%;
|
justify-content:flex-start;
|
display: flex;
|
align-items: center;
|
div{
|
font-weight: 400;
|
font-size: 22px;
|
color: #C5CAE9;
|
text-shadow: 0 3px 0 #9FA8DA;
|
margin-right:5px;
|
}
|
span{
|
font-weight: normal;
|
font-size: 18px;
|
color: #C1C6E7;
|
}
|
}
|
.rank-three{
|
height:18px;
|
width: 100%;
|
justify-content:flex-start;
|
display: flex;
|
align-items: center;
|
div{
|
font-weight: 400;
|
font-size: 22px;
|
color: #CEB1A1;
|
text-shadow: 0 3px 0 #AF8A77;
|
margin-right:5px;
|
}
|
span{
|
font-weight: normal;
|
font-size: 18px;
|
color: #CEB1A1;
|
}
|
}
|
}
|
.rank-plain{
|
width: 100%;
|
height: 58%;
|
display: flex;
|
align-items: center;
|
justify-content:space-between;
|
flex-direction: column;
|
padding:0 5px;
|
margin-top:7%;
|
.rank-item{
|
height:16px;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content:flex-start;
|
.rank-num{
|
font-weight: 400;
|
font-size: 18px;
|
color: #FFFFFF;
|
margin-right:16px;
|
}
|
.rank-name{
|
font-weight:normal;
|
font-size: 16px;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.rank-text-tips1{
|
font-weight: normal;
|
font-size: 14px;
|
color: #4e60d3;
|
}
|
.rank-text-tips2{
|
font-weight:600;
|
font-size: 16px;
|
color: #4e60d3;
|
}
|
</style>
|
