|
@@ -9,11 +9,11 @@
|
|
<div class="content">
|
|
<div class="content">
|
|
<div class="total-cont">
|
|
<div class="total-cont">
|
|
<div class="total-list">
|
|
<div class="total-list">
|
|
- <div class="total">5251</div>
|
|
|
|
|
|
+ <div class="total">{{ stockOfEstateResourcesList.housingNum }}</div>
|
|
<div class="unitY">栋</div>
|
|
<div class="unitY">栋</div>
|
|
</div>
|
|
</div>
|
|
<div class="total-list1">
|
|
<div class="total-list1">
|
|
- <div class="total">175.11</div>
|
|
|
|
|
|
+ <div class="total">{{ stockOfEstateResourcesList.housingAcreage }}</div>
|
|
<div class="unitY">万m³</div>
|
|
<div class="unitY">万m³</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -65,7 +65,7 @@
|
|
<div> <img src="@/assets/images/logistics_guarantee/tateSwin.png"></div>
|
|
<div> <img src="@/assets/images/logistics_guarantee/tateSwin.png"></div>
|
|
<div>新增房产</div>
|
|
<div>新增房产</div>
|
|
</div>
|
|
</div>
|
|
- <div class="num">23<span class="unit">个</span></div>
|
|
|
|
|
|
+ <div class="num">{{ investFinishStateList.new }}<span class="unit">个</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-list">
|
|
<div class="left-list">
|
|
@@ -74,7 +74,7 @@
|
|
<div> <img src="@/assets/images/logistics_guarantee/tateSwin.png"></div>
|
|
<div> <img src="@/assets/images/logistics_guarantee/tateSwin.png"></div>
|
|
<div>投资计划房产</div>
|
|
<div>投资计划房产</div>
|
|
</div>
|
|
</div>
|
|
- <div class="num">43<span class="unit">个</span></div>
|
|
|
|
|
|
+ <div class="num">{{ investFinishStateList.invest }}<span class="unit">个</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -94,6 +94,10 @@ import LineChart from "@/components/Echarts/LineChart.vue";
|
|
import PieChart from "@/components/Echarts/PieChart.vue";
|
|
import PieChart from "@/components/Echarts/PieChart.vue";
|
|
import BarChart from "@/components/Echarts/BarChart.vue";
|
|
import BarChart from "@/components/Echarts/BarChart.vue";
|
|
import echarts from "echarts";
|
|
import echarts from "echarts";
|
|
|
|
+import {
|
|
|
|
+
|
|
|
|
+ stockOfEstateResources,stockOfLandResources,investFinishState
|
|
|
|
+} from "@/api/screen/service";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: "HouseArea",
|
|
name: "HouseArea",
|
|
@@ -116,6 +120,8 @@ export default {
|
|
return {
|
|
return {
|
|
show:true,
|
|
show:true,
|
|
currentTime: new Date(),
|
|
currentTime: new Date(),
|
|
|
|
+ stockOfEstateResourcesList:{},
|
|
|
|
+ investFinishStateList:{},
|
|
// pieData: [
|
|
// pieData: [
|
|
// { value: 24.15, name: "办公物资" },
|
|
// { value: 24.15, name: "办公物资" },
|
|
// { value: 24.15, name: "楼宇资源" },
|
|
// { value: 24.15, name: "楼宇资源" },
|
|
@@ -124,14 +130,7 @@ export default {
|
|
// { value: 24.15, name: "土地资源" },
|
|
// { value: 24.15, name: "土地资源" },
|
|
// { value: 24.15, name: "车辆资源" },
|
|
// { value: 24.15, name: "车辆资源" },
|
|
// ],
|
|
// ],
|
|
- pieData: [
|
|
|
|
- { value: 151.56, name: "办公用房", itemStyle: {color:'#FEB948'} },
|
|
|
|
- { value: 3.53, name: "周转用房", itemStyle: {color:'#2F82FE'} },
|
|
|
|
- { value: 86.21, name: "生产管理", itemStyle: {color:'#01F6EC'} },
|
|
|
|
- { value: 20.02, name: "教育培训用房", itemStyle: {color:'#7465EF'} },
|
|
|
|
- { value: 0.62, name: "交流干部住房", itemStyle: {color:'#242CC4'} },
|
|
|
|
- { value: 2.92, name: "单身公寓/单身宿舍" , itemStyle: {color:'#2FFEA0'} },
|
|
|
|
- ],
|
|
|
|
|
|
+ pieData:[],
|
|
pieLegend: {
|
|
pieLegend: {
|
|
top: 55,
|
|
top: 55,
|
|
orient: "vertical",
|
|
orient: "vertical",
|
|
@@ -143,42 +142,7 @@ export default {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
pieCenter: ["30%", "50%"],
|
|
pieCenter: ["30%", "50%"],
|
|
- buildingAreaBarData: [
|
|
|
|
- {
|
|
|
|
- name: "",
|
|
|
|
- type: "bar",
|
|
|
|
- stack: "a",
|
|
|
|
- itemStyle: {
|
|
|
|
- color: "#00f0ff",
|
|
|
|
- //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
|
- },
|
|
|
|
- barWidth: 10,
|
|
|
|
- data: [110,0, 0 ],
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "",
|
|
|
|
- type: "bar",
|
|
|
|
- stack: "a",
|
|
|
|
- itemStyle: {
|
|
|
|
- color: "#D67C15",
|
|
|
|
- //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
|
- },
|
|
|
|
- barWidth: 10,
|
|
|
|
- data: [0,80,0],
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: "",
|
|
|
|
- type: "bar",
|
|
|
|
- stack: "a",
|
|
|
|
- itemStyle: {
|
|
|
|
- color: "#D67C15",
|
|
|
|
- //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
|
- },
|
|
|
|
- barWidth: 10,
|
|
|
|
- data: [0,0,90],
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- ],
|
|
|
|
|
|
+ buildingAreaBarData: [],
|
|
buildingAreaBarYaxis: {
|
|
buildingAreaBarYaxis: {
|
|
type: "category",
|
|
type: "category",
|
|
data: ["使用权", "新增建筑", "现有建筑"],
|
|
data: ["使用权", "新增建筑", "现有建筑"],
|
|
@@ -238,11 +202,91 @@ export default {
|
|
}
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
- created() {},
|
|
|
|
|
|
+ created() {
|
|
|
|
+ //房产资源存量
|
|
|
|
+ this.stockOfEstateResources();
|
|
|
|
+ //土地资源存量
|
|
|
|
+ this.stockOfLandResources();
|
|
|
|
+ //2025年度投资房产完成情况
|
|
|
|
+ this.investFinishState();
|
|
|
|
+ },
|
|
destroyed() {},
|
|
destroyed() {},
|
|
beforeDestroy() {},
|
|
beforeDestroy() {},
|
|
mounted() {},
|
|
mounted() {},
|
|
- methods: {},
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ //房产资源存量
|
|
|
|
+ stockOfEstateResources() {
|
|
|
|
+ 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 stockOfEstateAssetList = res.data.pieChart;
|
|
|
|
+ this.pieData = stockOfEstateAssetList.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ value: item.acreage, // 数据值
|
|
|
|
+ name: item.typeName, // 数据名称
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: colorList[index % colorList.length] // 循环使用颜色列表
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //土地资源存量
|
|
|
|
+ stockOfLandResources() {
|
|
|
|
+ stockOfLandResources(this.$props.appOrg).then((res) => {
|
|
|
|
+ if (Number(res.code) === 200) {
|
|
|
|
+ this.buildingAreaBarData=[
|
|
|
|
+ {
|
|
|
|
+ name: "",
|
|
|
|
+ type: "bar",
|
|
|
|
+ stack: "a",
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#00f0ff",
|
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
|
+ },
|
|
|
|
+ barWidth: 10,
|
|
|
|
+ data: [res.data.own,0, 0 ],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "",
|
|
|
|
+ type: "bar",
|
|
|
|
+ stack: "a",
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#D67C15",
|
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
|
+ },
|
|
|
|
+ barWidth: 10,
|
|
|
|
+ data: [0,res.data.new,0],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "",
|
|
|
|
+ type: "bar",
|
|
|
|
+ stack: "a",
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#D67C15",
|
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
|
+ },
|
|
|
|
+ barWidth: 10,
|
|
|
|
+ data: [0,0,res.data.num],
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //2025年度投资房产完成情况
|
|
|
|
+ investFinishState() {
|
|
|
|
+ investFinishState(this.$props.appOrg).then((res) => {
|
|
|
|
+ if (Number(res.code) === 200) {
|
|
|
|
+ this.investFinishStateList=res.data;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -357,7 +401,9 @@ export default {
|
|
.total-list {
|
|
.total-list {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: baseline;
|
|
align-items: baseline;
|
|
- margin-left: 40px;
|
|
|
|
|
|
+ width: 152px;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ // margin-left: 40px;
|
|
.total {
|
|
.total {
|
|
font-size: 32px;
|
|
font-size: 32px;
|
|
color: #00FFFF;
|
|
color: #00FFFF;
|
|
@@ -380,7 +426,9 @@ export default {
|
|
.total-list1{
|
|
.total-list1{
|
|
display: flex;
|
|
display: flex;
|
|
align-items: baseline;
|
|
align-items: baseline;
|
|
- margin-right: 30px;
|
|
|
|
|
|
+ width: 160px;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ // margin-right: 30px;
|
|
.total {
|
|
.total {
|
|
font-size: 32px;
|
|
font-size: 32px;
|
|
color: #00FFFF;
|
|
color: #00FFFF;
|