调整省属企业信息下统计图表页面样式布局

src/views/listStatistics/listTab.vue

@@ -7,114 +7,194 @@
       </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="[title=='' ? '省属企业'  : title ]+'土地地块数量获取方式占比'"></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"
-              :height="300"
-            >
-              <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="[title=='' ? '省属企业'  : title ]+'土地地块面积获取方式占比'"></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"
-              :height="300"
-            >
-              <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="[title=='' ? '省属企业'  : title ]+'权证登记比例情况'"
-            ></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="[title=='' ? '省属企业'  : title ]+'土地使用现状占比'"
-            ></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="[title=='' ? '省属企业'  : title ]+'土地实际用途情况'" :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="[title=='' ? '省属企业'  : title ]+'实际使用面积'" :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 v-if='this.loading==false'>
+        <!--第一行-->
+        <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="[title=='' ? '省属企业'  : title ]+'土地地块数量获取方式占比'"></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='310'
+                  >
+                    <a slot='name' slot-scope='text'>{{ text }}</a>
+                  </j-vxe-table>
+                </a-card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>