Merge remote-tracking branch 'origin/main'

src/views/pad/logistics/houseArea.vue

@@ -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;

src/views/screen/logistics/houseArea.vue

@@ -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: "#EFB264",
                 //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: "#2FFEA0",
                 //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: "#409EFF",
                 //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: "#02C698",
+                //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;