调整统计页面布局样式

src/views/tj/compoent/DoughnutData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="main" style="width:calc(100% - 0px) ;height:300px;"></div>
+  <div ref="main" style="width:calc(100% - 0px) ;height:17rem;"></div>
 </template>
 
 <script>
@@ -49,16 +49,16 @@ export default {
       // 指定图表的配置项和数据
       var option = {
         //标题
-        title: {
-          text: this.titleText,
-          x: 'left' ,              //标题位置
-          // textStyle: { //标题内容的样式
-          //   color: '#000',
-          //   fontStyle: 'normal',
-          //   fontWeight: 100,
-          //   fontSize: 16 //主题文字字体大小，默认为18px
-          // },
-        },
+        // title: {
+        //   text: this.titleText,
+        //   x: 'left' ,              //标题位置
+        //   // textStyle: { //标题内容的样式
+        //   //   color: '#000',
+        //   //   fontStyle: 'normal',
+        //   //   fontWeight: 100,
+        //   //   fontSize: 16 //主题文字字体大小，默认为18px
+        //   // },
+        // },
         // stillShowZeroSum: true,
         //鼠标划过时饼状图上显示的数据
         tooltip: {
@@ -77,7 +77,8 @@ export default {
           {
             name: 'Access From',
             type: 'pie',
-            radius: ['30%', '50%'],
+            radius: ['30%', '60%'],
+            center: ['50%', '40%'],  //整个饼图在整个父元素中的位置
             avoidLabelOverlap: true,
             itemStyle: {
               normal: {

src/views/tj/compoent/PieData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="main" style="width:calc(100% - 0px) ;height:300px;"></div>
+  <div ref="main" style="width:calc(100% - 0px) ;height:17rem;"></div>
 </template>
 
 <script>
@@ -44,15 +44,15 @@ export default {
       // 指定图表的配置项和数据
       var option = {
         //标题
-        title: {
-          text: this.titleText,
-          x: 'left' ,              //标题位置
-          textStyle: { //标题内容的样式
-            color: '#000',
-
-            fontSize: 18 //主题文字字体大小，默认为18px
-          },
-        },
+        // title: {
+        //   text: this.titleText,
+        //   x: 'left' ,              //标题位置
+        //   textStyle: { //标题内容的样式
+        //     color: '#000',
+        //
+        //     fontSize: 18 //主题文字字体大小，默认为18px
+        //   },
+        // },
 
         // stillShowZeroSum: true,
         //鼠标划过时饼状图上显示的数据
@@ -81,8 +81,8 @@ export default {
         series: {
           // name: 'bug分布',
           type: 'pie',             //echarts图的类型   pie代表饼图
-          radius: '50%',           //饼图中饼状部分的大小所占整个父元素的百分比
-          center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
+          radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
+          center: ['50%', '40%'],  //整个饼图在整个父元素中的位置
           // data:''               //饼图数据
           data: this.resultData,
           label:{

src/views/tj/compoent/PieQdfsMj.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="main" style="width:calc(100% - 0px);height:300px;"></div>
+  <div ref="main" style="width:calc(100% - 0px);height:17rem;"></div>
 </template>
 
 <script>
@@ -44,16 +44,16 @@ export default {
       // 指定图表的配置项和数据
       var option = {
         //标题
-        title: {
-          text: this.titleText,
-          x: 'left' ,              //标题位置
-          // textStyle: { //标题内容的样式
-          //   color: '#000',
-          //   fontStyle: 'normal',
-          //   fontWeight: 100,
-          //   fontSize: 16 //主题文字字体大小，默认为18px
-          // },
-        },
+        // title: {
+        //   text: this.titleText,
+        //   x: 'left' ,              //标题位置
+        //   // textStyle: { //标题内容的样式
+        //   //   color: '#000',
+        //   //   fontStyle: 'normal',
+        //   //   fontWeight: 100,
+        //   //   fontSize: 16 //主题文字字体大小，默认为18px
+        //   // },
+        // },
         // stillShowZeroSum: true,
         //鼠标划过时饼状图上显示的数据
         tooltip: {
@@ -79,8 +79,8 @@ export default {
         series: {
           // name: 'bug分布',
           type: 'pie',             //echarts图的类型   pie代表饼图
-          radius: '50%',           //饼图中饼状部分的大小所占整个父元素的百分比
-          center: ['50%', '50%'],  //整个饼图在整个父元素中的位置
+          radius: '60%',           //饼图中饼状部分的大小所占整个父元素的百分比
+          center: ['50%', '40%'],  //整个饼图在整个父元素中的位置
           // data:''               //饼图数据
           data: this.resultData,
           label:{

src/views/tj/compoent/mapData.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="calc(100% - 0px);height:600px" ref="chartsDOM"></div>
+  <div style="calc(100% - 0px);height:38rex" ref="chartsDOM"></div>
 </template>
 
 <script>
@@ -116,7 +116,6 @@ export default {
         myChart.resize();
       })
     }
-
   },
   // mounted() {
   //   this.getPie()

src/views/tj/sjtjModules.vue

@@ -1,40 +1,44 @@
 <template>
   <div>
+    <!--    省属企业与省直单位切换-->
+    <div class="headTJ">
+      <a-button size="large" style="background-color: rgb(24,144,255)"  type="primary"  htmlType="submit"  class="login-button"  :loading="loginBtn"  @click.stop.prevent="handleSubmitSsqy" :disabled="loginBtn">省属企业
+      </a-button>
+      <a-button size="large" style="background-color: rgb(24,144,255)"  type="primary"  htmlType="submit"  class="login-button"  :loading="loginBtn"  @click.stop.prevent="handleSubmitSzdw" :disabled="loginBtn">省直单位
+      </a-button>
+    </div>
     <div>
       <a-row>
-        <a-col :sm="24" :md="12" :xl="4">
-          <a-card style="height: 146px">
-            <a-avatar style="margin-left: 3%" :size="40" icon="user" />
-            <a-select default-value="ssqy" style="width: 150px;margin-top: 12%;margin-left: 4%" @change="handleChange">
-              <a-select-option value="szdw">
-                省直单位
-              </a-select-option>
-              <a-select-option value="ssqy">
-                省属企业
-              </a-select-option>
-            </a-select>
-          </a-card>
-        </a-col>
-        <!--省属企业-->
-        <a-col v-show="this.type == 'ssqy'" :sm="24" :md="12" :xl="20">
+        <a-col v-show="this.type == 'ssqy'" :sm="24" :md="12" :xl="24">
           <a-card class="flex-space-between">
-            <a-col class="flex-center" :sm="18" :md="12" :xl="5" @click="handleQy">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6" @click="handleQy">
               <div class="tjcxcound1">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省属企业数量</div>
-                  <div style="font-size: 24px; margin-top:6%;float: right;font-weight:600;">
-                    {{ SSQYSL
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span>
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">省属企业数量</div>
+                  <div style="width: 100%">
+                  <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; display: inline-block">一级企业</div>
+                  <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem;display: inline-block">企业总数</div>
+                  </div>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                     29<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span>
+                    </div>
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ SSQYSL
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span>
+                    </div>
                   </div>
+
                   <!--                  <div style="font-size: 24px; float: right;font-weight:600;">{{ SUMSZ }}<span style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400" >亩</span></div>-->
                 </div>
               </div>
             </a-col>
-            <a-col class="flex-center" :sm="24" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6">
               <div class="tjcxcound2">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">上报地块企业数量</div>
-                  <div style="font-size: 24px;margin-top:6%; float: right;font-weight:600;">
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">上报地块企业</div>
+                  <div style="width: calc(100% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; display: inline-block">企业数量</div>
+                  <div style="width: calc(100% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;">
                     {{ SBDKQYSL
                     }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span>
                   </div>
@@ -48,17 +52,23 @@
                 <!--              </div>-->
               </div>
             </a-col>
-            <a-col class="flex-center" :sm="24" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6">
               <div class="tjcxcound3" @click="visibleInfo({ sfsb: 3 })">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省属企业地块</div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ COUNTDK
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">省属企业上报地块</div>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; display: inline-block">地块数量</div>
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem;display: inline-block">地块面积</div>
                   </div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ SUMSS
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ COUNTDK
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                    </div>
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ SUMSS
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                    </div>
                   </div>
                 </div>
                 <!--                <div>其中省直单位闲置低效面积</div>-->
@@ -67,19 +77,23 @@
                 <!--                </div>-->
               </div>
             </a-col>
-            <a-col class="flex-center" :sm="24" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6">
               <div class="tjcxcound4" @click="visibleInfo({ sfsb: 3, tdsyxz: '闲置低效土地' })">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 8rem;margin-left: 1rem;margin-top:10px;float: left; ">
-                    其中省属企业闲置低效地块
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">省属企业闲置低效地块</div>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; display: inline-block">地块数量</div>
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem;display: inline-block">地块面积</div>
                   </div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ COUNTDKBYSSXZDX
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
-                  </div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ SUMSSXZDX
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ COUNTDKBYSSXZDX
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                    </div>
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ SUMSSXZDX
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                    </div>
                   </div>
                 </div>
                 <!--              <div style="color: white;padding-top: 1rem">-->
@@ -93,48 +107,49 @@
           </a-card>
         </a-col>
         <!--省直单位-->
-        <a-col v-show="this.type == 'szdw'" :sm="24" :md="12" :xl="20">
+        <a-col v-show="this.type == 'szdw'" :sm="24" :md="12" :xl="24">
           <a-card class="flex-space-between">
-            <a-col class="flex-center" :sm="18" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="18" :md="12" :xl="6">
               <div class="tjcxcound1" @click="handleDw()">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省直单位数量</div>
-                  <div style="font-size: 24px; margin-top:6%; float: right;font-weight:600;">
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">省直单位数量</div>
+                  <div style="width: calc(100% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; ">单位数量</div>
+                  <div style="width: calc(100% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;">
                     {{ SZQYSL
                     }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span>
                   </div>
                 </div>
               </div>
             </a-col>
-            <a-col class="flex-center" :sm="24" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6">
               <div class="tjcxcound2">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">上报地块单位数量</div>
-                  <div style="font-size: 24px; margin-top:6%; float: right;font-weight:600;">
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">上报地块省直单位</div>
+                  <div style="width: calc(100% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; ">单位数量</div>
+                  <div style="width: calc(100% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;">
                     {{ SSDWSL
                     }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">家</span>
                   </div>
                 </div>
-
-                <!--              <div style="color: white;padding-top: 1rem">-->
-                <!--                <div>已上报省属企业地块总面积</div>-->
-                <!--                <div>-->
-                <!--                  <span style="font-size: 24px">{{ SUMSS }}</span><span style="margin-left: 5px">亩</span>-->
-                <!--                </div>-->
-                <!--              </div>-->
               </div>
             </a-col>
-            <a-col class="flex-center" :sm="24" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6">
               <div class="tjcxcound3" @click="visibleInfoBySz({ sfsb: 3 })">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 5rem;margin-left: 1rem;margin-top:10px;float: left; ">已审核省直单位地块</div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ COUNTDKBYSZ
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">省直单位地块</div>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; display: inline-block">地块数量</div>
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem;display: inline-block">地块面积</div>
                   </div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ SUMSZ
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ COUNTDKBYSZ
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                    </div>
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ SUMSZ
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                    </div>
                   </div>
                 </div>
                 <!--                <div>其中省直单位闲置低效面积</div>-->
@@ -143,19 +158,23 @@
                 <!--                </div>-->
               </div>
             </a-col>
-            <a-col class="flex-center" :sm="24" :md="12" :xl="5">
+            <a-col class="flex-center" :sm="24" :md="12" :xl="6">
               <div class="tjcxcound4" @click="visibleInfoBySz({ sfsb: 3, tdsyxz: '闲置低效土地' })">
-                <div style="color: white;padding-top: 0.6rem">
-                  <div style="width: 8rem;margin-left: 1rem;margin-top:10px;float: left; ">
-                    其中省直单位闲置低效地块
-                  </div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ COUNTDKBYSZXZDX
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                <div style="color: white;padding-top: 0.1rem">
+                  <div style="width: 100%;margin-left: 0rem;margin-top:5px; text-indent: 1rem;letter-spacing: 2px;font-weight: bold">省直单位闲置低效地块</div>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem; display: inline-block">地块数量</div>
+                    <div style="width: calc(50% - 0px);margin-left: 0rem;margin-top:5px; text-indent: 1rem;display: inline-block">地块面积</div>
                   </div>
-                  <div style="font-size: 24px; float: right;font-weight:600;">
-                    {{ SUMSZXZDX
-                    }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                  <div style="width: 100%">
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ COUNTDKBYSZXZDX
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">块</span>
+                    </div>
+                    <div style="width: calc(50% - 0px);font-size: 22px; margin-top:0;font-weight:600;text-indent: 1rem;display: inline-block">
+                      {{ SUMSZXZDX
+                      }}<span style="font-size: 16px;margin-left:5px;margin-right: 10px;font-weight:400">亩</span>
+                    </div>
                   </div>
                 </div>
                 <!--              <div style="color: white;padding-top: 1rem">-->
@@ -243,99 +262,130 @@
           </a-card>
         </a-col>
       </a-row>
-      <a-row v-show="this.type == 'ssqy'">
-        <a-col :sm="24" :md="12" :xl="12">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 43rem">
-            <mapData ref="mapref" :resultMapData="this.resMapSsData" :titles="this.title1" @visible="visibleInfo">
-            </mapData>
-          </a-card>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <PieData
-              :resultData="this.resData"
-              :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业土地获取方式占比' : '省属企业土地获取方式占比'"
-              @visible="visibleInfo"
-            >
-            </PieData>
-          </a-card>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <DoughnutData
-              :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业权证登记比例情况' : '省属企业权证登记比例情况'"
-              :result-data="this.DoughnutData1"
-              :pie-color="this.color1"
-              @visibleCard="visibleInfo"
-            >
-            </DoughnutData>
-          </a-card>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <PieQdfsMj
-              :resultData="this.resData2"
-              :titleText="
+      <div v-show="this.type == 'ssqy'">
+        <div style="display: flex;">
+<!--        左侧第一行第一列-->
+          <div style="width: calc(25% - 0px);">
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业土地获取方式地块数量占比</div>
+          <div>
+            <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
+              <PieData
+                :resultData="this.resData"
+                :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业土地获取方式占比' : '省属企业土地获取方式占比'"
+                @visible="visibleInfo"
+              >
+              </PieData>
+            </a-card>
+          </div>
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业土地获取方式地块面积占比</div>
+          <div>
+            <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
+              <PieQdfsMj
+                :resultData="this.resData2"
+                :titleText="
                 this.tem_xzqhmc
                   ? this.tem_xzqhmc + '省属企业土地地块面积获取方式占比'
                   : '省属企业土地地块面积获取方式占比'
               "
-              @visible="visibleInfo"
-            >
-            </PieQdfsMj>
-          </a-card>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="6">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <DoughnutData
-              :titleText="this.tem_xzqh ? this.tem_xzqhmc + '省属企业土地使用现状占比' : '省属企业土地使用现状占比'"
-              :result-data="this.DoughnutData2"
-              :PieColor="this.color"
-              @visible="visibleInfo"
-            >
-            </DoughnutData>
-          </a-card>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="12">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <a-col :sm="24" :md="12" :xl="24">
-              <!--              <a-card style="margin-bottom: 1rem;width:100%;height: 20rem">-->
-              <BarTdsjyt
-                :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业土地实际用途情况' : '省属企业土地实际用途情况'"
-                :result-x-data="this.resYData"
-                :dw="this.dw2"
-                :seriesName="'地块数量'"
                 @visible="visibleInfo"
               >
-              </BarTdsjyt>
-            </a-col>
-          </a-card>
-        </a-col>
-        <a-col :sm="24" :md="12" :xl="12">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <BarDobuleData
-              :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业实际占用面积' : '省属企业实际占用面积'"
-              :result-x-data="resBarSsData"
-              @visible="visibleInfoXzqh"
-            >
-            </BarDobuleData>
-          </a-card>
-        </a-col>
+              </PieQdfsMj>
+            </a-card>
+          </div>
+        </div>
+<!--        第一行地图列-->
+          <div style="width: calc(50% - 20px);margin-left: 10px;margin-right: 10px">
+            <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业地块统计</div>
+            <div>
+              <a-card style="margin-bottom: 1rem;width:100%;height: 39rem">
+                <mapData ref="mapref" :resultMapData="this.resMapSsData" :titles="this.title1" @visible="visibleInfo">
+                </mapData>
+              </a-card>
+            </div>
+          </div>
+<!--          右侧列-->
+          <div style="width: calc(25% - 0px);">
+            <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业权证登记比例情况</div>
+            <div>
+              <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
+                <DoughnutData
+                  :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业权证登记比例情况' : '省属企业权证登记比例情况'"
+                  :result-data="this.DoughnutData1"
+                  :pie-color="this.color1"
+                  @visibleCard="visibleInfo"
+                >
+                </DoughnutData>
+              </a-card>
+            </div>
+            <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业土地使用现状占比</div>
+            <div>
+              <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
+                <DoughnutData
+                  :titleText="this.tem_xzqh ? this.tem_xzqhmc + '省属企业土地使用现状占比' : '省属企业土地使用现状占比'"
+                  :result-data="this.DoughnutData2"
+                  :PieColor="this.color"
+                  @visible="visibleInfo"
+                >
+                </DoughnutData>
+              </a-card>
+            </div>
+          </div>
+        </div>
+<!--        第二行布局-->
+        <div style="display: flex;">
+          <div style="width: calc(50% - 10px); margin-right: 10px;">
+            <div style="width: calc(100% - 0px); text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业土地实际用途情况</div>
+            <div>
+              <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
+                <a-col :sm="24" :md="12" :xl="24">
+                  <BarTdsjyt
+                    :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业土地实际用途情况' : '省属企业土地实际用途情况'"
+                    :result-x-data="this.resYData"
+                    :dw="this.dw2"
+                    :seriesName="'地块数量'"
+                    @visible="visibleInfo"
+                  >
+                  </BarTdsjyt>
+                </a-col>
+              </a-card>
+
+            </div>
+          </div>
+          <div style="width: calc(50% - 0px);">
+            <div style="width: calc(100% - 5px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业实际占用面积</div>
+            <div>
+              <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
+                <BarDobuleData
+                  :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业实际占用面积' : '省属企业实际占用面积'"
+                  :result-x-data="resBarSsData"
+                  @visible="visibleInfoXzqh"
+                >
+                </BarDobuleData>
+              </a-card>
+            </div>
+          </div>
+        </div>
+<!--        第三行布局-->
+        <div style="display: flex;">
+          <div style="width: calc(100% - 0px);">
+          <div style="width: calc(100% - 0px);text-indent: 10px; font-size: 16px; height:40px;line-height: 40px; background-color: #02A7F0; color: white ">一级单位用地面积汇总</div>
+          <div>
+            <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
+              <BarData
+                :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '一级单位用地面积汇总' : '一级单位用地面积汇总'"
+                :result-x-data="this.resYDatas"
+                :seriesName="'地块面积（亩）'"
+                :dw="this.dw"
+                @visible="visibleInfoYjdw"
+                style="width:calc(100% - 0px);height:300px;"
+              >
+              </BarData>
+            </a-card>
+          </div>
+          </div>
+        </div>
+      </div>
 
-        <a-col :sm="24" :md="12" :xl="24">
-          <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-            <BarData
-              :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '一级单位用地面积汇总' : '一级单位用地面积汇总'"
-              :result-x-data="this.resYDatas"
-              :seriesName="'地块面积（亩）'"
-              :dw="this.dw"
-              @visible="visibleInfoYjdw"
-              style="width:calc(100% - 0px);height:300px;"
-            >
-            </BarData>
-          </a-card>
-        </a-col>
-      </a-row>
       <j-modal
         :visible="visible"
         @cancel="handleCancel"
@@ -525,6 +575,33 @@ export default {
       this.getMapSzData()
       this.getMapSsData()
     },
+    // 省属企业单击事件
+    handleSubmitSsqy() {
+        getAction('/qcsb.qyxx/qcQyxx/ssdtdktj').then(res => {
+          if (res.code == 200) {
+            this.resMapSsData = res.result
+            this.$refs.mapref.initMap()
+            //初始化图表
+            this.tem_xzqh = ''
+            this.tem_xzqhmc = ''
+            this.initTable()
+            this.type = 'ssqy'
+          }
+        })
+    },
+    // 省直单位单击事件
+    handleSubmitSzdw() {
+        getAction('/qcsb.qyxx/qcQyxx/szdtdktj').then(res => {
+          if (res.code == 200) {
+            this.resMapSzData = res.result
+            this.$refs.map2ref.initMap()
+            this.tem_xzqh = ''
+            this.tem_xzqhmc = ''
+            this.initTable()
+            this.type = 'szdw'
+          }
+        })
+    },
     handleChange(value) {
       if (value == 'ssqy') {
         getAction('/qcsb.qyxx/qcQyxx/ssdtdktj').then(res => {
@@ -774,9 +851,29 @@ export default {
 </script>
 
 <style>
+.headTJ
+{
+  width: calc(100% - 0px);
+  height: 40px;
+  line-height: 40px;
+  background-color: #02A7F0;
+  margin-bottom: 0px;
+}
+button.login-button {
+  padding: 0 15px;
+  font-size: 14px;
+  height: 30px;
+  width: 200px;
+  margin-left: 20px;
+  margin-bottom: 5px;
+  border-color: #ffffff;
+}
+.ant-card-body{
+ padding: 10px !important;
+}
 .tjcxcound1 {
   height: 6rem;
-  width: 18rem;
+  width: calc(100% - 20px);
   background-image: url('~@/assets/sytj_1.png');
   background-size: 100% 100%;
   /*margin-left: 3rem;*/
@@ -788,7 +885,7 @@ export default {
 
 .tjcxcound2 {
   height: 6rem;
-  width: 18rem;
+  width: calc(100% - 20px);
   background-image: url('~@/assets/sytj_2.png');
   background-size: 100% 100%;
   /*margin-left: 10rem;*/
@@ -800,7 +897,7 @@ export default {
 
 .tjcxcound3 {
   height: 6rem;
-  width: 18rem;
+  width: calc(100% - 20px);
   background-image: url('~@/assets/sytj_3.png');
   background-size: 100% 100%;
   /*margin-left: 17rem;*/
@@ -812,7 +909,7 @@ export default {
 
 .tjcxcound4 {
   height: 6rem;
-  width: 18rem;
+  width: calc(100% - 20px);
   background-image: url('~@/assets/sytj_4.png');
   background-size: 100% 100%;
   /*margin-left: 24rem;*/