调整统计页面布局

src/views/tj/sjtjModules.vue

@@ -182,6 +182,7 @@
         </a-col>
       </a-row>
     </div>
+<!--    图标统计展示-->
     <div>
 <!--      省直单位统计图表-->
       <div v-show="this.type == 'szdw'">
@@ -351,7 +352,19 @@
           </div>
 <!--          右侧列-->
           <div style="width: calc(25% - 0px);">
-            <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>
+            <div style="display: flex; width: calc(100% - 0px);height:40px;line-height: 40px; background-color: #02A7F0;">
+            <div style="text-indent: 10px; font-size: 16px;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">
+              省属企业权证登记占比
+            </div>
+              <div class="cr-tj-btnlist">
+                <button :class="type === 'ssqy' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click.stop.prevent="handleSubmitSsqy">
+                  数量
+                </button>
+                <button :class="type === 'szdw' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click.stop.prevent="handleSubmitSzdw">
+                  面积
+                </button>
+              </div>
+            </div>
             <div>
               <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
                 <DoughnutData
@@ -363,7 +376,17 @@
                 </DoughnutData>
               </a-card>
             </div>
+            <div style="display: flex; width: calc(100% - 0px);height:40px;line-height: 40px; background-color: #02A7F0;">
             <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>
+              <div class="cr-tj-btnlist">
+                <button :class="type === 'ssqy' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click.stop.prevent="handleSubmitSsqy">
+                  数量
+                </button>
+                <button :class="type === 'szdw' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click.stop.prevent="handleSubmitSzdw">
+                  面积
+                </button>
+              </div>
+            </div>
             <div>
               <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
                 <DoughnutData
@@ -394,19 +417,22 @@
                   </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;  font-family:'DingTalk_JinBuTi_Regular';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-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>
@@ -414,22 +440,48 @@
 <!--        第三行布局-->
         <div style="display: flex;">
           <div style="width: calc(100% - 0px);">
-          <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>
+          <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>
           <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;"
+              <BarDobuleData
+                :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业实际占用面积' : '省属企业实际占用面积'"
+                :result-x-data="resBarSsData"
+                @visible="visibleInfoXzqh"
               >
-              </BarData>
+              </BarDobuleData>
             </a-card>
           </div>
           </div>
         </div>
+        <!--        第四行布局-->
+        <div style="display: flex;">
+          <div style="width: calc(100% - 0px);">
+            <div style="display: flex; width: calc(100% - 0px);height:40px;line-height: 40px; background-color: #02A7F0;">
+            <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>
+            <div class="cr-tj-btnlist">
+              <button :class="type === 'ssqy' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click.stop.prevent="handleSubmitSsqy">
+                数量
+              </button>
+              <button :class="type === 'szdw' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click.stop.prevent="handleSubmitSzdw">
+                面积
+              </button>
+            </div>
+          </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>
 
       <j-modal
@@ -906,7 +958,6 @@ export default {
   .cr-btn {
     width: 200px;
     color: rgb(244, 249, 244);
-    //background-color: #12d9fa;
     background: rgba(52, 140, 208, 1);
     border: 1px;
     border-color: rgba(52, 140, 208, 30%);
@@ -917,11 +968,46 @@ export default {
     margin-left: auto;
     height: 30px;
     line-height: 30px;
+    user-select: none;
   }
   .cr-btn-select {
     border-color: rgba(52, 140, 238, 1);
     background: rgb(221, 147, 37);
     color: rgb(255, 255, 255);
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.cr-tj-btnlist {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  padding-left:10px;
+  margin-top: 3px;
+  background-color: #02A7F0;
+  text-align: right;
+  .cr-tj-btn {
+    width: 60px;
+    color: rgb(244, 249, 244);
+    background: rgba(255, 160, 139, 1);
+    border: 2px;
+    border-color: rgb(221, 147, 37);
+    border-radius: 4px;
+    border-style: dotted;
+    padding: 0px 10px;
+    margin-right: 10px;
+    cursor: pointer;
+    height: 30px;
+    line-height: 30px;
+    user-select: none;
+  }
+  .cr-tj-btn-select {
+    border-color: rgba(52, 140, 238, 1);
+    background: rgb(91, 145, 252,1);
+    color: rgb(255, 255, 255);
+    pointer-events: none;
+    user-select: none;
   }
 }