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.
540 lines
11 KiB
540 lines
11 KiB
<template>
|
|
<div>
|
|
<div class="m-fwgl">
|
|
<div class="m-pie">
|
|
<div class="pie-left">
|
|
<screen-echarts-frame
|
|
class=""
|
|
@myChartMethod="pieInitOk"
|
|
ref="pieChart"
|
|
></screen-echarts-frame>
|
|
</div>
|
|
<div class="pie-legend">
|
|
<div class="item">
|
|
<div class="item-logo logo1"></div>
|
|
<div class="item-name">自住房屋</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-logo logo2"></div>
|
|
<div class="item-name">出租房屋</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="item-logo logo3"></div>
|
|
<div class="item-name">闲置房屋</div>
|
|
</div>
|
|
</div>
|
|
<div class="pie-right">
|
|
<div class="right-row">
|
|
<div class="row-item" @click="toListPage('all')">
|
|
<div class="item-one">
|
|
<img
|
|
class="img"
|
|
src="@/assets/images/shuju/renfang/house-logo.png"
|
|
alt
|
|
/>
|
|
<div class="title">房屋总数</div>
|
|
</div>
|
|
<div class="item-two">
|
|
<div class="num">{{ info.house_count }}</div>
|
|
<div class="unit">户</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="row-item marginleft10"
|
|
@click="toListPage('self', '自住')"
|
|
>
|
|
<div class="item-one">
|
|
<img
|
|
class="img"
|
|
src="@/assets/images/shuju/renfang/house-logo.png"
|
|
alt
|
|
/>
|
|
<div class="title">自住房屋</div>
|
|
</div>
|
|
<div class="item-two">
|
|
<div class="num">
|
|
{{ info.self_dwelling_count }}
|
|
</div>
|
|
<div class="unit">户</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="right-row margintop18"
|
|
@click="toListPage('lease', '出租')"
|
|
>
|
|
<div class="row-item">
|
|
<div class="item-one">
|
|
<img
|
|
class="img"
|
|
src="@/assets/images/shuju/renfang/house-logo.png"
|
|
alt
|
|
/>
|
|
<div class="title">出租房屋</div>
|
|
</div>
|
|
<div class="item-two">
|
|
<div class="num">{{ info.lease_count }}</div>
|
|
<div class="unit">户</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="row-item marginleft10"
|
|
@click="toListPage('unused', '闲置')"
|
|
>
|
|
<div class="item-one">
|
|
<img
|
|
class="img"
|
|
src="@/assets/images/shuju/renfang/house-logo.png"
|
|
alt
|
|
/>
|
|
<div class="title">闲置房屋</div>
|
|
</div>
|
|
<div class="item-two">
|
|
<div class="num">{{ info.unused_count }}</div>
|
|
<div class="unit">户</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="m-bar">
|
|
<div class="bar-title">
|
|
<img
|
|
class="title_img"
|
|
src="@/assets/images/index/list-logo.png"
|
|
alt
|
|
/>
|
|
<div class="tip_title">近一年房屋状态变化趋势图</div>
|
|
<div class="title_line"></div>
|
|
</div>
|
|
<div class="bar-legend">
|
|
<div class="item-logo logo1"></div>
|
|
<div class="item-name">自住房屋</div>
|
|
<div class="item-logo logo2 marginleft10"></div>
|
|
<div class="item-name">出租房屋</div>
|
|
<div class="item-logo logo3 marginleft10"></div>
|
|
<div class="item-name">闲置房屋</div>
|
|
</div>
|
|
<div class="bar-main">
|
|
<screen-echarts-frame
|
|
class=""
|
|
@myChartMethod="barInitOk"
|
|
ref="barChart"
|
|
></screen-echarts-frame>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <screen-nodata class="nodata"
|
|
v-if="showNoData"></screen-nodata> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
|
|
import { pieOption } from "./fwPieOption.js";
|
|
import { barOption } from "./fwBarOption.js";
|
|
import { requestPostBi } from "@/js/dai/request-bipass";
|
|
|
|
export default {
|
|
props: {
|
|
orgId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
components: {
|
|
screenEchartsFrame,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showNoData: false,
|
|
barChart: "",
|
|
pieChart: "",
|
|
pieOption: {},
|
|
barOption: {},
|
|
pieInitState: false,
|
|
barInitState: false,
|
|
pieData: [],
|
|
|
|
info: {
|
|
house_count: 0,
|
|
self_dwelling_count: 0,
|
|
lease_count: 0,
|
|
unused_count: 0,
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getData();
|
|
},
|
|
watch: {
|
|
orgId() {
|
|
this.getData();
|
|
},
|
|
},
|
|
methods: {
|
|
toListPage(type = "", type_name = "") {
|
|
this.$router.push({
|
|
path: "/dataBoard/renfang/house-list",
|
|
query: {
|
|
org_id: this.orgId,
|
|
type,
|
|
type_name,
|
|
},
|
|
});
|
|
},
|
|
|
|
pieInitOk() {
|
|
this.pieInitState = true;
|
|
},
|
|
barInitOk() {
|
|
this.barInitState = true;
|
|
},
|
|
async getData() {
|
|
await this.getInfo();
|
|
this.getBar();
|
|
this.getPie();
|
|
},
|
|
getBar() {
|
|
if (this.barInitState) {
|
|
this.getBarData();
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getBar();
|
|
}, 500);
|
|
}
|
|
},
|
|
getPie() {
|
|
if (this.pieInitState) {
|
|
this.iniPieChart();
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getPie();
|
|
}, 500);
|
|
}
|
|
},
|
|
|
|
// 获取房屋总数等
|
|
async getInfo() {
|
|
const url = "house_view";
|
|
|
|
const { data, code, msg } = await requestPostBi(
|
|
url,
|
|
{
|
|
queryParam: {
|
|
org_id: this.orgId,
|
|
},
|
|
},
|
|
{
|
|
// mockId: 60007107,
|
|
}
|
|
);
|
|
|
|
if (code === 0) {
|
|
if (data && Array.isArray(data) && data.length > 0) {
|
|
let info = data[0];
|
|
this.info = { ...this.info, ...info };
|
|
} else {
|
|
this.info = {
|
|
house_count: 0,
|
|
self_dwelling_count: 0,
|
|
lease_count: 0,
|
|
unused_count: 0,
|
|
};
|
|
}
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
// 获取饼状图
|
|
async iniPieChart() {
|
|
this.$refs.pieChart.clear();
|
|
// this.$refs.pieChart.showLoading()
|
|
|
|
// 获取pieChart配置
|
|
this.pieOption = pieOption();
|
|
|
|
const { info } = this;
|
|
// 设置三个配置值
|
|
this.pieOption.title.text =
|
|
(info.house_count != 0
|
|
? parseInt(
|
|
(100 * info.self_dwelling_count) / info.house_count
|
|
)
|
|
: "--") + "%";
|
|
this.pieData = [
|
|
{ value: info.self_dwelling_count, name: "自住房屋" },
|
|
{ value: info.lease_count, name: "出租房屋" },
|
|
{ value: info.unused_count, name: "闲置房屋" },
|
|
];
|
|
this.pieOption.series[0].data = this.pieData;
|
|
this.$refs.pieChart.setOption(this.pieOption);
|
|
// this.$refs.pieChart.hideLoading()
|
|
|
|
// 点击饼图 切换中心显示的比例
|
|
this.$refs.pieChart.myChart.on("selectchanged", (params) => {
|
|
console.log(params);
|
|
const {
|
|
fromActionPayload: { dataIndexInside },
|
|
} = params;
|
|
this.pieOption.title.text =
|
|
(info.house_count != 0
|
|
? parseInt(
|
|
(100 *
|
|
[
|
|
info.self_dwelling_count,
|
|
info.lease_count,
|
|
info.unused_count,
|
|
][dataIndexInside]) /
|
|
info.house_count
|
|
)
|
|
: "--") + "%";
|
|
this.$refs.pieChart.myChart.setOption(this.pieOption);
|
|
});
|
|
},
|
|
|
|
// 获取房屋总数等
|
|
async getBarData() {
|
|
const url = "house_trend";
|
|
|
|
this.$refs.barChart.showLoading();
|
|
const { data, code, msg } = await requestPostBi(
|
|
url,
|
|
{
|
|
queryParam: {
|
|
org_id: this.orgId,
|
|
},
|
|
},
|
|
{
|
|
// mockId: 60388110,
|
|
}
|
|
);
|
|
|
|
if (code === 0) {
|
|
let xaxis = [];
|
|
let series = [{ data: [] }, { data: [] }, { data: [] }];
|
|
if (data && Array.isArray(data) && data.length > 0) {
|
|
for (const {
|
|
month,
|
|
self_dwelling_count,
|
|
lease_count,
|
|
unused_count,
|
|
} of data) {
|
|
xaxis.push(month);
|
|
series[0].data.push(self_dwelling_count);
|
|
series[1].data.push(lease_count);
|
|
series[2].data.push(unused_count);
|
|
}
|
|
}
|
|
this.iniBarChart(xaxis, series);
|
|
this.$refs.barChart.hideLoading();
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
// 获取饼状图
|
|
async iniBarChart(xaxis, series) {
|
|
this.showNoData = false;
|
|
this.$refs.barChart.clear();
|
|
// let xaxis = [
|
|
// "1月",
|
|
// "2月",
|
|
// "3月",
|
|
// "4月",
|
|
// "5月",
|
|
// "6月",
|
|
// "7月",
|
|
// "8月",
|
|
// "9月",
|
|
// "10月",
|
|
// "11月",
|
|
// "12月",
|
|
// ];
|
|
// let series = [
|
|
// {
|
|
// data: [
|
|
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
|
|
// 90,
|
|
// ],
|
|
// },
|
|
// {
|
|
// data: [
|
|
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
|
|
// 90,
|
|
// ],
|
|
// },
|
|
// {
|
|
// data: [
|
|
// 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
|
|
// 90,
|
|
// ],
|
|
// },
|
|
// ];
|
|
this.barOption = barOption();
|
|
this.$refs.barChart.setOption(this.barOption, true);
|
|
this.$refs.barChart.setOption(
|
|
{
|
|
xAxis: { data: xaxis },
|
|
series: series,
|
|
},
|
|
true
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-fwgl {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.m-pie {
|
|
margin-top: 24px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.pie-left {
|
|
height: 120px;
|
|
flex: 0 0 120px;
|
|
}
|
|
|
|
.pie-legend {
|
|
.item {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
.pie-right {
|
|
.right-row {
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
|
|
.row-item {
|
|
flex: 0 0 100px;
|
|
cursor: pointer;
|
|
.item-one {
|
|
display: flex;
|
|
.img {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
.title {
|
|
margin-left: 9px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.65);
|
|
}
|
|
}
|
|
|
|
.item-two {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
margin-left: 23px;
|
|
|
|
.num {
|
|
font-size: 24px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.unit {
|
|
margin-left: 9px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.m-bar {
|
|
position: relative;
|
|
margin-top: 14px;
|
|
|
|
.bar-title {
|
|
display: flex;
|
|
align-items: center;
|
|
// margin-left: 24px;
|
|
|
|
.title_img {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
.tip_title {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.title_line {
|
|
margin-left: 8px;
|
|
width: 244px;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
270deg,
|
|
rgba(55, 198, 255, 0.1) 0%,
|
|
#1995ff 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.bar-legend {
|
|
position: absolute;
|
|
top: 37px;
|
|
right: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.bar-main {
|
|
margin-top: 10px;
|
|
height: 225px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-name {
|
|
margin-left: 8px;
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
.item-logo {
|
|
margin-top: 2px;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.logo1 {
|
|
background: #6fdeff;
|
|
}
|
|
.logo2 {
|
|
background: #ffaa00;
|
|
}
|
|
.logo3 {
|
|
background: #1a95ff;
|
|
}
|
|
.marginleft10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.margintop18 {
|
|
margin-top: 18px;
|
|
}
|
|
</style>
|
|
|