You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
10 KiB
309 lines
10 KiB
<template>
|
|
<div class="leftChartOne">
|
|
<div class="chartstitle1">合同统计</div>
|
|
<div id="chartsone" :style="{ height: '250px', width: '100%' }"></div>
|
|
<div class="tablist">
|
|
<div class="tablist-item">
|
|
<div class="item-middle">
|
|
<span class="tablist-item-title">签约总数</span>
|
|
<!-- <span class="tablist-item-total"> -->
|
|
<div class="font-size-18 mt-1">
|
|
<NumberGrow :value="sumRoom" class="color-333"></NumberGrow>
|
|
</div>
|
|
<!-- </span> -->
|
|
</div>
|
|
</div>
|
|
<div class="tablist-item">
|
|
<div class="item-middle">
|
|
<span class="tablist-item-title">已签约</span>
|
|
<!-- <span class="tablist-item-total">{{ sumCard }}</span> -->
|
|
<div class="font-size-18 mt-1">
|
|
<NumberGrow :value="sumCard" class="color-333"></NumberGrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tablist-item">
|
|
<div class="item-middle">
|
|
<span class="tablist-item-title">已退租</span>
|
|
<!-- <span class="tablist-item-total">{{ sumTotal }}</span> -->
|
|
<div class="font-size-18 mt-1">
|
|
<NumberGrow :value="sumTotal" class="color-333"></NumberGrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tablist-item">
|
|
<div class="item-middle">
|
|
<span class="tablist-item-title">到期数</span>
|
|
<!-- <span class="tablist-item-total">{{ sumOpen }}</span> -->
|
|
<div class="font-size-18 mt-1">
|
|
<NumberGrow :value="sumOpen" class="color-333"></NumberGrow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NumberGrow from "../../components/visualizcomponent/NumberGrow.vue";
|
|
import { httpGet, httpPost } from '../../api';
|
|
export default {
|
|
name: 'leftChartOne',
|
|
components: { NumberGrow },
|
|
data() {
|
|
return {
|
|
charts: {
|
|
title: {},
|
|
tooltip: {},
|
|
legend: {},
|
|
grud: {},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '50%'],
|
|
selectedMode: 'single',
|
|
data: []
|
|
}
|
|
]
|
|
},
|
|
statisticsDateDefault: {
|
|
"cdata": ["0", "0", "0", "0", "0"],
|
|
"seriesData": {
|
|
"abnormalTotal": 0,
|
|
"batteryLevel1": 0,
|
|
"batteryLevel2": 0,
|
|
"batteryLevel3": 0,
|
|
"batteryLevel4": 0,
|
|
"batteryLevel5": 0,
|
|
"closeTotal": 0,
|
|
"offlineTotal": 0,
|
|
"onlineTotal": 0,
|
|
"openTotal": 0,
|
|
"projects": 0,
|
|
"total": 0
|
|
},
|
|
"collectUS": {
|
|
"card300": 0,
|
|
"site200": 0,
|
|
"card200": 0,
|
|
"userCount": 0,
|
|
"site300": 0,
|
|
"lock300": 0,
|
|
"site400": 0,
|
|
"lock200": 0,
|
|
"houseSensor400": 0
|
|
},
|
|
"collectOpenLock": {
|
|
"week300": [{
|
|
"count": 0,
|
|
"order": "2022-05-15"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-16"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-17"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-18"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-19"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-20"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-21"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-22"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-23"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-24"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-25"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-26"
|
|
}],
|
|
"week200": [{
|
|
"count": 0,
|
|
"order": "2022-05-19"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-20"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-21"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-22"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-23"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-24"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-25"
|
|
}, {
|
|
"count": 0,
|
|
"order": "2022-05-26"
|
|
}],
|
|
"allCount300": 0,
|
|
"allCount200": 0
|
|
},
|
|
"weekopenlock": [{
|
|
"order": "2022-05-19",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-20",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-21",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-22",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-23",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-24",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-25",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-26",
|
|
"count": 0
|
|
}],
|
|
"addDeviceWeek": [{
|
|
"order": "2022/05/20",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022/05/21",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022/05/22",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022/05/23",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022/05/24",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022/05/25",
|
|
"count": 0
|
|
}, {
|
|
"order": "2022-05-26",
|
|
"count": 0
|
|
}]
|
|
},
|
|
sumRoom: 0, // 签约总数
|
|
sumCard: 0, // 已签约
|
|
sumTotal: 0, // 已退租
|
|
sumOpen: 0, // 已欠费
|
|
}
|
|
},
|
|
mounted() {
|
|
let sumRoom = 0, sumCard = 0, sumTotal = 0, sumOpen = 0
|
|
httpGet('', this.$api.getCommonStatistics).then(async res => {
|
|
if (res.success) {
|
|
let list = res.data
|
|
list.map(li => {
|
|
if (li.status === 1) {
|
|
sumCard += li.total
|
|
this.sumCard += li.total
|
|
} else if (li.status === 2) {
|
|
sumTotal += li.total
|
|
this.sumTotal += li.total
|
|
} else if (li.status === 3) {
|
|
sumOpen += li.total
|
|
this.sumOpen += li.total
|
|
}
|
|
})
|
|
this.sumRoom = this.sumCard + this.sumOpen + this.sumTotal
|
|
sumRoom = sumCard + sumOpen + sumTotal
|
|
let chartsone = this.charts
|
|
chartsone.series[0].data[0] = { value: sumRoom, name: "签约总数" }
|
|
chartsone.series[0].data[1] = { value: sumCard, name: "已签约" }
|
|
chartsone.series[0].data[2] = { value: sumOpen, name: "已退租" }
|
|
chartsone.series[0].data[3] = { value: sumTotal, name: "已欠费" }
|
|
console.log(chartsone.series[0].data, sumRoom)
|
|
let chartsObj = this.$echarts.init(
|
|
document.getElementById('chartsone')
|
|
)
|
|
chartsObj.setOption(chartsone, true)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.leftChartOne {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.chartstitle1 {
|
|
margin-bottom: 10px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
width: 100%;
|
|
background-image: linear-gradient(to right, #00BFFF 20%, transparent 100%);
|
|
padding: 10px;
|
|
}
|
|
|
|
.tablist {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
height: 60px;
|
|
padding: 5px;
|
|
display: flex;
|
|
border: 1px solid #00BFFF;
|
|
background-color: rgba(175, 238, 238, 0.4);
|
|
/* background: linear-gradient(45deg, rgba(175,238,238, 0.4) 50%, #00BFFF 100%); */
|
|
border-radius: 5px;
|
|
color: #555e5d;
|
|
}
|
|
|
|
.tablist-item {
|
|
flex: 1;
|
|
border-right: 1px solid #00BFFF;
|
|
position: relative;
|
|
/* background: radial-gradient(rgba(175,238,238, 0.4) 70%, #00BFFF 100%); */
|
|
/* background:-webkit-gradient(radial, 50% 50%, 5, 50% 50%, 100%, from(#fca8fd),to(#fd7aff)); */
|
|
}
|
|
|
|
.item-middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.tablist-item:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.tablist-item-title {
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.tablist-item-total {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}</style>
|