建设用地整理情况数据联调优化,

src/views/LandConsolidation/components/organize.vue

@@ -3,7 +3,7 @@
     <div class="tdTitle">试点目标</div>
     <div class="echars">
       <pie
-        unit="亩"
+        unit="公顷"
         class="pie_echart"
         ref="echartRef0"
         @echartClickTitle="(name) => echartClickTitle(name)"
@@ -25,11 +25,12 @@
       <div class="JSContent">
         <div class="jsitem">
           <p class="tvalue">
-            {{ (jxyddata.zzqjsydmj - jxyddata.zzhjsydmj).toFixed(2) }}
+            {{ computNum }}
+            <!-- {{ (jxyddata.zzhjsydmj - jxyddata.zzqjsydmj).toFixed(2) }} -->
           </p>
           <p>建设用地变化</p>
         </div>
-        <div class="itemCon" style="width: 55%">
+        <div class="itemCon" style="width: 60%">
           <span>
             <span class="font_color">整治前建设用地</span>
             <span style="padding: 0 3px">{{ jxyddata.zzqjsydmj }}</span>
@@ -51,7 +52,7 @@
         <span
           v-for="(item, i) in cjfkList"
           :key="i"
-          style="max-width: 50%; min-width: 40%"
+          :style="{ width: item.width + '%' }"
           ><span class="font_color">{{ item.name }}</span
           ><span style="padding: 0 3px; color: #ec808d; font-size: 14px">{{
             jxyddata[item.prop]
@@ -162,14 +163,14 @@ export default {
       sdata: {},
       jxyddata: {},
       cjfkList: [
-        { name: "拟拆旧面积", prop: "zzqjsydmj", unit: "公顷" },
-        { name: "复垦为耕地", prop: "zjfk_fkgd", unit: "公顷" },
-        { name: "拆迁房屋", prop: "zjfk_cqfw", unit: "幢" },
-        { name: "复垦为种植园地", prop: "zjfk_fkzzy", unit: "公顷" },
-        { name: "动迁居民", prop: "zjfk_dqjm", unit: "户" },
-        { name: "复垦为林草地", prop: "zjfk_fklcd", unit: "公顷" },
-        { name: "动迁人口", prop: "zjfk_dqrk", unit: "人" },
-        { name: "复垦为其他农用地", prop: "zjfk_fkqtnyd", unit: "公顷" },
+        { name: "拟拆旧面积", prop: "zjfk_nzjdkzmj", unit: "公顷" ,width:55},
+        { name: "复垦为耕地", prop: "zjfk_fkgd", unit: "公顷",width:45 },
+        { name: "拆迁房屋", prop: "zjfk_cqfw", unit: "幢" ,width:45},
+        { name: "复垦为种植园地", prop: "zjfk_fkzzy", unit: "公顷" ,width:55},
+        { name: "动迁居民", prop: "zjfk_dqjm", unit: "户",width:45 },
+        { name: "复垦为林草地", prop: "zjfk_fklcd", unit: "公顷",width:50 },
+        { name: "动迁人口", prop: "zjfk_dqrk", unit: "人",width:43 },
+        { name: "复垦为其他农用地", prop: "zjfk_fkqtnyd", unit: "公顷",width:57 },
       ],
       myChart: null,
     };
@@ -177,6 +178,16 @@ export default {
   components: {
     pie,
   },
+  computed:{
+    computNum() {
+      let num = (this.jxyddata.zzhjsydmj - this.jxyddata.zzqjsydmj).toFixed(2)
+      if ( num > 0) {
+        return `+${num}`;
+      } else {
+        return num;
+      }
+    }
+  },
   mounted() {
     // this.initEcharts();
   },
@@ -414,7 +425,7 @@ export default {
       width: 100%;
       margin-bottom: 4px;
       text-align: center;
-      margin-left: 0.3rem;
+      // margin-left: 0.3rem;
       .cvalue {
         font-family: "Arial Negreta", "Arial Normal", "Arial";
         font-weight: 700;
@@ -441,11 +452,12 @@ export default {
   }
   .pie_echart {
     height: 130px;
-    width: 400px;
+    // width: 400px;
+    width: 21vw;
   }
   #second_pie {
     height: 130px;
-    width: 300px;
+    width: 16vw;
   }
   .tzdiv {
     height: 20px;
@@ -458,7 +470,7 @@ export default {
     justify-content: space-between;
     margin-top: 10px;
     .jsitem {
-      width: 40%;
+      width: 38%;
       text-align: center;
       font-weight: 400;
       font-size: 13px;
@@ -491,6 +503,11 @@ export default {
       color: white;
     }
   }
+  .cjfkList{
+    span:nth-child(2n){
+      text-align: end;
+    }
+  }
   .divrow {
     height: 85px;
     // background-color: #0f7bc875;

src/views/LandConsolidation/components/qhdb.vue

@@ -188,13 +188,16 @@ export default {
     overflow-x: hidden;
     height: 280px;
     .echart {
-      width: 810px !important;
-      height: 280px !important;
+      // width: 810px !important;
+      // width: 43vw !important;
+      width: 51vw !important;
+      height: 275px !important;
     }
   }
 
   .echart2 {
-    width: 810px !important;
+    // width: 810px !important;
+    width: 43vw !important;
     height: 400px !important;
   }
 }