调整省直单位信息中统计图表样式布局

src/views/listStatistics/listTabBySz.vue

@@ -7,115 +7,192 @@
       </a-spin>
     </div>
     <div v-if='this.loading==false'>
-      <a-row>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <PieData :result-data='pieResultData' :title-text="'省直单位土地地块数量获取方式占比'"></PieData>
-          </a-card>
-
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <j-vxe-table
-              :columns='columns'
-              :data-source='data'
-            >
-              <a slot='name' slot-scope='text'>{{ text }}</a>
-
-            </j-vxe-table>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <PieData :result-data='pieAreaResultData' :title-text="'省直单位土地地块面积获取方式占比'"></PieData>
-
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <j-vxe-table
-              :columns='areaColumns'
-              :data-source='areaData'
-
-            >
-              <a slot='name' slot-scope='text'>{{ text }}</a>
-
-            </j-vxe-table>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <DoughnutData :result-data='this.DoughnutResultData' :pie-color='color1'
-                          :title-text="'单位权证登记比例情况'"
-            ></DoughnutData>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <j-vxe-table
-              :columns='registerColumns'
-              :data-source='registerData'
-
-            >
-              <a slot='name' slot-scope='text'>{{ text }}</a>
-
-            </j-vxe-table>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <DoughnutData :result-data='this.doughnutByXzResultData' :pie-color='color1'
-                          :title-text="'省直单位土地使用现状占比'"
-            ></DoughnutData>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <j-vxe-table
-              :columns='registerColumns'
-              :data-source='xzData'
-
-            >
-              <a slot='name' slot-scope='text'>{{ text }}</a>
-            </j-vxe-table>
-          </a-card>
-        </a-col>
-
-        <a-col :sm='24' :md='12' :xl='18'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <BarData :result-x-data='this.barBysjytResultData' :dw="'亩'" :title-text="'省直单位土地实际用途情况'"
-                     :seriesName="'地块数量'"></BarData>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <j-vxe-table
-              :columns='sjytDataColumns'
-              :data-source='sjytData'
-              :height='300'
-            >
-              <a slot='name' slot-scope='text'>{{ text }}</a>
-            </j-vxe-table>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='18'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <BarData :result-x-data='this.barResultData' :dw="'亩'" :title-text="'省直单位实际使用面积'"
-                     :seriesName="'地块面积（亩）'"></BarData>
-          </a-card>
-        </a-col>
-        <a-col :sm='24' :md='12' :xl='6'>
-          <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
-            <j-vxe-table
-              :columns='xqDataColumns'
-              :data-source='xqData'
-              :height='300'
-            >
-              <a slot='name' slot-scope='text'>{{ text }}</a>
-            </j-vxe-table>
-          </a-card>
-        </a-col>
-      </a-row>
+      <!--第一行-->
+      <div style="display: flex;">
+        <!--第一行 组合1-->
+        <div style="width: calc(50% - 10px); margin-right: 10px">
+          <!--第一行 组合1 标题名称-->
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+            省直单位土地获取方式占比【地块数量】
+          </div>
+          <!--第一行 组合1 图表-->
+          <div style="width: calc(100% - 0px); display: flex;">
+            <!--第一行 组合1 图-->
+            <div style="width: calc(50% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <PieData :result-data='pieResultData' :title-text="'省直单位土地地块数量获取方式占比'"></PieData>
+              </a-card>
+            </div>
+            <!--第一行 组合1 表-->
+            <div style="width: calc(50% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <j-vxe-table
+                  :columns='columns'
+                  :data-source='data'
+                  :height='265'
+                >
+                  <a slot='name' slot-scope='text'>{{ text }}</a>
+                </j-vxe-table>
+              </a-card>
+            </div>
+          </div>
+        </div>
+        <!--第一行 组合2-->
+        <div style="width: calc(50% - 0px);">
+          <!--第一行 组合2 标题名称-->
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+            省直单位土地获取方式占比【地块面积】
+          </div>
+          <!--第一行 组合2 图表-->
+          <div style="width: calc(100% - 0px); display: flex;">
+            <!-- 第一行 组合2 图-->
+            <div style="width: calc(50% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <PieData :result-data='pieAreaResultData' :title-text="'省直单位土地地块面积获取方式占比'"></PieData>
+              </a-card>
+            </div>
+            <!--第一行 组合2 表-->
+            <div style="width: calc(55% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <j-vxe-table
+                  :columns='areaColumns'
+                  :data-source='areaData'
+                  :height='265'
+                >
+                  <a slot='name' slot-scope='text'>{{ text }}</a>
+                </j-vxe-table>
+              </a-card>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--第二行-->
+      <div style="display: flex;">
+        <!--第二行 组合1-->
+        <div style="width: calc(50% - 10px); margin-right: 10px">
+          <!--第二行 组合1 标题名称-->
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+            单位权证登记比例情况
+          </div>
+          <!--第二行 组合1 图表-->
+          <div style="width: calc(100% - 0px); display: flex;">
+            <!--第二行 组合1 图-->
+            <div style="width: calc(50% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <DoughnutData :result-data='this.DoughnutResultData' :pie-color='color1'
+                              :title-text="''"
+                ></DoughnutData>
+              </a-card>
+            </div>
+            <!--第二行 组合1 表-->
+            <div style="width: calc(50% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <j-vxe-table
+                  :columns='registerColumns'
+                  :data-source='registerData'
+                  :height='265'
+                >
+                  <a slot='name' slot-scope='text'>{{ text }}</a>
+                </j-vxe-table>
+              </a-card>
+            </div>
+          </div>
+        </div>
+        <!--第二行 组合2-->
+        <div style="width: calc(50% - 0px);">
+          <!--第二行 组合2 标题名称-->
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+            省直单位土地使用现状占比
+          </div>
+          <!--第二行 组合2 图表-->
+          <div style="width: calc(100% - 0px); display: flex;">
+            <!--第二行 组合2 图-->
+            <div style="width: calc(50% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <DoughnutData :result-data='this.doughnutByXzResultData' :pie-color='color1'
+                              :title-text="''"
+                ></DoughnutData>
+              </a-card>
+            </div>
+            <!--第二行 组合2 表-->
+            <div style="width: calc(55% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 18rem'>
+                <j-vxe-table
+                  :columns='registerColumns'
+                  :data-source='xzData'
+                  :height='265'
+                >
+                  <a slot='name' slot-scope='text'>{{ text }}</a>
+                </j-vxe-table>
+              </a-card>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--第三行-->
+      <div style="display: flex;">
+        <!--第三行 组合1-->
+        <div style="width: calc(100% - 0px); margin-right: 0px">
+          <!--第三行 组合1 标题名称-->
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+            省直单位土地实际用途情况
+          </div>
+          <!--第三行 组合1 图表-->
+          <div style="width: calc(100% - 0px); display: flex;">
+            <!--第三行 组合1 图-->
+            <div style="width: calc(70% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
+                <BarData :result-x-data='this.barBysjytResultData' :dw="'亩'" :title-text="'省直单位土地实际用途情况'"
+                         :seriesName="'地块数量'"></BarData>
+              </a-card>
+            </div>
+            <!--第三行 组合1 表-->
+            <div style="width: calc(30% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
+                <j-vxe-table
+                  :columns='sjytDataColumns'
+                  :data-source='sjytData'
+                  :height='310'
+                >
+                  <a slot='name' slot-scope='text'>{{ text }}</a>
+                </j-vxe-table>
+              </a-card>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--第四行-->
+      <div style="display: flex;">
+        <!--第四行 组合1-->
+        <div style="width: calc(100% - 0px); margin-right: 0px">
+          <!--第四行 组合1 标题名称-->
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+            省直单位实际使用面积
+          </div>
+          <!--第四行 组合1 图表-->
+          <div style="width: calc(100% - 0px); display: flex;">
+            <!--第四行 组合1 图-->
+            <div style="width: calc(70% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
+                <BarData :result-x-data='this.barResultData' :dw="'亩'" :title-text="'省直单位实际使用面积'"
+                         :seriesName="'地块面积（亩）'"></BarData>
+              </a-card>
+            </div>
+            <!--第四行 组合1 表-->
+            <div style="width: calc(30% - 0px);">
+              <a-card style='margin-bottom: 1rem;width:100%;height: 21rem'>
+                <j-vxe-table
+                  :columns='xqDataColumns'
+                  :data-source='xqData'
+                  :height='300'
+                >
+                  <a slot='name' slot-scope='text'>{{ text }}</a>
+                </j-vxe-table>
+              </a-card>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/views/tj/compoent/PieData.vue

@@ -81,7 +81,7 @@ export default {
         series: {
           // name: 'bug分布',
           type: 'pie',             //echarts图的类型   pie代表饼图
-          radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
+          radius: '50%',           //饼图中饼状部分的大小所占整个父元素的百分比
           center: ['50%', '40%'],  //整个饼图在整个父元素中的位置
           // data:''               //饼图数据
           data: this.resultData,