|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="main-data house-area-operation">
|
|
|
+ <div class="main-data house-area-operation" v-if="flag >= 2">
|
|
|
<!-- <div class="title-area">房产土地</div> -->
|
|
|
<div class="content-area">
|
|
|
<div class="content-left wid100">
|
|
|
@@ -10,15 +10,10 @@
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<div class="total-cont">
|
|
|
- <div class="total-list">
|
|
|
- <div class="total">{{ stockOfEstateResourcesList.housingNum }}</div>
|
|
|
- <div class="unitY">栋</div>
|
|
|
- </div>
|
|
|
- <div class="total-list1">
|
|
|
- <div class="total">{{ stockOfEstateResourcesList.housingAcreage }}</div>
|
|
|
- <div class="unitY">万m³</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <span class="title">房产数量
|
|
|
+ <span class="smallTitle">(处)</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<div class="charts-cont">
|
|
|
<pie-chart
|
|
|
v-if="show"
|
|
|
@@ -26,17 +21,66 @@
|
|
|
:legend="pieLegend"
|
|
|
:center="pieCenter"
|
|
|
width="520px"
|
|
|
- height="250px"
|
|
|
+ height="180px"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <div class="total-cont">
|
|
|
+ <span class="title">房产面积
|
|
|
+ <span class="smallTitle">(万m²)</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="data-content">
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data1">
|
|
|
+ <div>{{ stockOfEstateResourcesList.pieChart[0].houseAcreage}}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/houSl.png">
|
|
|
+ </div>
|
|
|
+ <div class="name1">{{ stockOfEstateResourcesList.pieChart[0].typeName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data1">
|
|
|
+ <div>{{ stockOfEstateResourcesList.pieChart[1].houseAcreage}}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/houSl.png">
|
|
|
+ </div>
|
|
|
+ <div class="name1">{{ stockOfEstateResourcesList.pieChart[1].typeName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data1">
|
|
|
+ <div>{{ stockOfEstateResourcesList.pieChart[2].houseAcreage}}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/houSl.png">
|
|
|
+ </div>
|
|
|
+ <div class="name1">{{ stockOfEstateResourcesList.pieChart[2].typeName}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data1">
|
|
|
+ <div>{{ stockOfEstateResourcesList.pieChart[3].houseAcreage}}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/houSl.png">
|
|
|
+ </div>
|
|
|
+ <div class="name1">{{ stockOfEstateResourcesList.pieChart[3].typeName}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- <div class="content-title">
|
|
|
+ <div class="content-title" style="margin-top: 60px;">
|
|
|
<span class="title">土地资源存量
|
|
|
<span class="smallTitle">截止至{{timeString}}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
+ <div class="total-cont">
|
|
|
+ <span class="title">土地数量
|
|
|
+ <span class="smallTitle">(宗)</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
<bar-chart
|
|
|
v-if="show"
|
|
|
:chart-data="buildingAreaBarData"
|
|
|
@@ -45,11 +89,55 @@
|
|
|
|
|
|
y-color="#FFF"
|
|
|
l-color="#FFF"
|
|
|
- width="520px"
|
|
|
+ width="480px"
|
|
|
height="140px"
|
|
|
/>
|
|
|
+ <div class="total-cont">
|
|
|
+ <span class="title">土地面积
|
|
|
+ <span class="smallTitle">(万m²)</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="data-content">
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data">
|
|
|
+ <div>{{ stockOfLandResourcesList[0].landAcreage }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/mate.png">
|
|
|
+ </div>
|
|
|
+ <div class="name">{{ stockOfLandResourcesList[0].typeName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data">
|
|
|
+ <div>{{ stockOfLandResourcesList[1].landAcreage }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/mate.png">
|
|
|
+ </div>
|
|
|
+ <div class="name">{{ stockOfLandResourcesList[1].typeName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data">
|
|
|
+ <div>{{ stockOfLandResourcesList[2].landAcreage }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/mate.png">
|
|
|
+ </div>
|
|
|
+ <div class="name">{{ stockOfLandResourcesList[2].typeName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="data-item">
|
|
|
+ <div class="data">
|
|
|
+ <div>{{ stockOfLandResourcesList[3].landAcreage }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/logistics_guarantee/mate.png">
|
|
|
+ </div>
|
|
|
+ <div class="name">{{ stockOfLandResourcesList[3].typeName }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="content-title" style="margin-top: 25px">
|
|
|
+
|
|
|
+ <!-- <div class="content-title" style="margin-top: 25px">
|
|
|
<span class="title">{{timeMonth}}年度投资房产完成情况</span>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
@@ -86,7 +174,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -123,8 +211,10 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
show:true,
|
|
|
+ flag: 0,
|
|
|
currentTime: new Date(),
|
|
|
stockOfEstateResourcesList:{},
|
|
|
+ stockOfLandResourcesList:{},
|
|
|
investFinishStateList:{},
|
|
|
// pieData: [
|
|
|
// { value: 24.15, name: "办公物资" },
|
|
|
@@ -149,7 +239,7 @@ export default {
|
|
|
buildingAreaBarData: [],
|
|
|
buildingAreaBarYaxis: {
|
|
|
type: "category",
|
|
|
- data: ["使用权", "新增建筑", "现有建筑"],
|
|
|
+ data: ["周转用房土地", "办公土地", "物资仓储土地","供电所土地"],
|
|
|
axisLabel: {
|
|
|
color: "white", // 设置横坐标轴字体颜色为红色
|
|
|
},
|
|
|
@@ -193,7 +283,7 @@ export default {
|
|
|
barGrid: {
|
|
|
top: 10,
|
|
|
left: "2%",
|
|
|
- right: "5%",
|
|
|
+ right: "2%",
|
|
|
containLabel: true,
|
|
|
bottom: 0,
|
|
|
},
|
|
|
@@ -218,7 +308,7 @@ export default {
|
|
|
//土地资源存量
|
|
|
this.stockOfLandResources();
|
|
|
//2025年度投资房产完成情况
|
|
|
- this.investFinishState();
|
|
|
+ // this.investFinishState();
|
|
|
},
|
|
|
destroyed() {},
|
|
|
beforeDestroy() {},
|
|
|
@@ -229,17 +319,18 @@ export default {
|
|
|
stockOfEstateResources(this.$props.appOrg).then((res) => {
|
|
|
if (Number(res.code) === 200) {
|
|
|
this.stockOfEstateResourcesList=res.data;
|
|
|
- const colorList = ['#FEB948','#2F82FE','#01F6EC','#7465EF','#242CC4','#2FFEA0','#E16B21'];
|
|
|
+ const colorList = ['#FEB948','#7465EF','#2F82FE','#2FFEA0','#242CC4','#2FFEA0','#E16B21'];
|
|
|
const stockOfEstateAssetList = res.data.pieChart;
|
|
|
this.pieData = stockOfEstateAssetList.map((item, index) => {
|
|
|
return {
|
|
|
- value: item.acreage, // 数据值
|
|
|
+ value: item.houseNum, // 数据值
|
|
|
name: item.typeName, // 数据名称
|
|
|
itemStyle: {
|
|
|
color: colorList[index % colorList.length] // 循环使用颜色列表
|
|
|
}
|
|
|
};
|
|
|
});
|
|
|
+ this.flag++
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -248,41 +339,54 @@ export default {
|
|
|
stockOfLandResources() {
|
|
|
stockOfLandResources(this.$props.appOrg).then((res) => {
|
|
|
if (Number(res.code) === 200) {
|
|
|
+ this.stockOfLandResourcesList=res.data.chart
|
|
|
this.buildingAreaBarData=[
|
|
|
{
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
stack: "a",
|
|
|
itemStyle: {
|
|
|
- color: "#00f0ff",
|
|
|
+ color: "#02C698",
|
|
|
//barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
},
|
|
|
barWidth: 10,
|
|
|
- data: [res.data.own,0, 0 ],
|
|
|
+ data: [res.data.chart[3].landNum,0, 0 ,0],
|
|
|
},
|
|
|
{
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
stack: "a",
|
|
|
itemStyle: {
|
|
|
- color: "#D67C15",
|
|
|
+ color: "#409EFF",
|
|
|
//barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
},
|
|
|
barWidth: 10,
|
|
|
- data: [0,res.data.new,0],
|
|
|
+ data: [0,res.data.chart[2].landNum,0,0],
|
|
|
},
|
|
|
{
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
stack: "a",
|
|
|
itemStyle: {
|
|
|
- color: "#D67C15",
|
|
|
+ color: "#00FF9D",
|
|
|
//barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
},
|
|
|
barWidth: 10,
|
|
|
- data: [0,0,res.data.num],
|
|
|
+ data: [0,0,res.data.chart[1].landNum,0],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "bar",
|
|
|
+ stack: "a",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#EFB264",
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [0,0,0,res.data.chart[0].landNum],
|
|
|
},
|
|
|
]
|
|
|
+ this.flag++
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
@@ -324,6 +428,70 @@ export default {
|
|
|
// }
|
|
|
// }
|
|
|
|
|
|
+ .content {
|
|
|
+ // margin-top: 10px;
|
|
|
+ padding-left: 20px;
|
|
|
+ .smallTitle{
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-content{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ overflow: visible;
|
|
|
+ padding-top:15px;
|
|
|
+ margin: 25px 10px 10px 0;
|
|
|
+ .mar{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .data-item{
|
|
|
+ height:30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: visible;
|
|
|
+
|
|
|
+ .data{
|
|
|
+ width: auto;
|
|
|
+ font-size: 32px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ font-size: 14px;
|
|
|
+ color:#FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ top:5px;
|
|
|
+ font-family: "fashionZh";
|
|
|
+ }
|
|
|
+ .data1{
|
|
|
+ width: auto;
|
|
|
+ font-size: 32px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ position: relative;
|
|
|
+ top: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .name1{
|
|
|
+ font-size: 14px;
|
|
|
+ color:#FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ font-family: "fashionZh";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.content-title {
|
|
|
width: 230px;
|
|
|
height: 26px;
|
|
|
@@ -405,14 +573,17 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.total-cont {
|
|
|
- height: 110px;
|
|
|
- margin: 15px 50px 0 50px;
|
|
|
-
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background: url("../../../assets/images/logistics_guarantee/stock.png") no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ background: url("../../../assets/images/main/lightLone.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
+ font-family: "PingFangSC";
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ padding-left: 25px;
|
|
|
+ padding-top: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
.total-list {
|
|
|
display: flex;
|
|
|
align-items: baseline;
|
