调整首页（原统计页面）统计内容信息、布局和样式

src/views/tj/compoent/BarDataNum.vue

@@ -1,7 +1,6 @@
 <template>
   <div ref="dom" style="width:calc(100% - 0px);height:20rem;">
   </div>
-
 </template>
 
 <script>
@@ -10,7 +9,7 @@ import {loadCategoryData} from "@api/api";
 
 
 export default {
-  name: "BarData",
+  name: "BarDataNum",
   data() {
     return {
       a: [],
@@ -47,7 +46,6 @@ export default {
       },
       deep: true,
       immediate: true
-
     },
   },
   methods: {

src/views/tj/compoent/BarDobuleData.vue

@@ -1,5 +1,6 @@
 <template>
-  <div ref="dom" style="width:calc(100% - 0px);height:300px;">
+  <div ref="dom" style="width:calc(100% - 0px);height:19rem;">
+    sssd
   </div>
 
 </template>
@@ -30,11 +31,15 @@ export default {
   watch: {
     resultXData: {
       handler(newVal) {
-        this.resultYData = newVal
-        this.getPie()
-      }
-
+        this.$nextTick(function () {
+          this.resultYData = newVal
+          this.getPie()
+        })
+      },
+      deep: true,
+      immediate: true
     },
+
   },
   methods: {
     getPie() {

src/views/tj/compoent/BarDobuleDataNum.vue

@@ -1,13 +1,11 @@
 <template>
-  <div ref="dom" style="width:calc(100% - 0px);height:300px;">
+  <div ref="dom" style="width:calc(100% - 0px);height:19rem;">
   </div>
-
 </template>
 
 <script>
 import * as echarts from "echarts";
 
-
 export default {
   name: "BarDobuleDataNum",
   data() {
@@ -30,11 +28,15 @@ export default {
   watch: {
     resultXData: {
       handler(newVal) {
-        this.resultYData = newVal
-        this.getPie()
-      }
-
+        this.$nextTick(function () {
+          this.resultYData = newVal
+          this.getPie()
+        })
+      },
+      deep: true,
+      immediate: true
     },
+
   },
   methods: {
     getPie() {
@@ -110,7 +112,7 @@ export default {
           {
             type: 'log',
             min: 1,
-            name: "单位（亩）",
+            name: "单位（块）",
             splitLine: {
               lineStyle: {
                 type: 'dashed',
@@ -125,7 +127,7 @@ export default {
         ],
         series: [
           {
-            name: '实际占用土地面积',
+            name: '实际占用土地地块数量',
             type: 'bar',
             barWidth: 15,
             symbolSize: 8,
@@ -133,7 +135,7 @@ export default {
               show: true,
               position: 'top',
             },
-            data: this.resultYData.value,
+            data: this.resultYData.numb,
             itemStyle: {
               normal: {
                 barBorderRadius: [5, 5, 0, 0],
@@ -152,7 +154,7 @@ export default {
             }
           },
           {
-            name: '闲置低效土地面积',
+            name: '闲置低效土地地块数量',
             type: 'bar',
             symbolSize: 8,
             barWidth: 15,
@@ -160,7 +162,7 @@ export default {
               show: true,
               position: 'top',
             },
-            data: this.resultYData.value2,
+            data: this.resultYData.numb2,
             itemStyle: {
               normal: {
                 barBorderRadius: [5, 5, 0, 0],

src/views/tj/compoent/mapData.vue

@@ -60,7 +60,6 @@ export default {
         // 注册地图(数据放在axios返回对象的data中哦)
         echarts.registerMap('SD', res.data);
         var option = {
-
           visualMap: {
             min: 100,
             max: 2000,
@@ -72,12 +71,10 @@ export default {
           },
           title: {
             text: this.titles,
-           /* textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
-              fontFamily: 'Arial, Verdana, sans...',
-              fontSize: 18,
-              fontStyle: 'normal',
-              fontWeight: 'normal',
-            },*/
+            textStyle: {
+              fontFamily: 'DingTalk_JinBuTi_Regular',
+              fontSize: 14,
+            },
           },
           tooltip: {
             formatter: function (params) {
@@ -106,7 +103,7 @@ export default {
                   areaColor: '#009fe8',
                 }
               },
-              data: this.resultMapData
+              data: this.resMapSsDataArea
             },
 
           ],

src/views/tj/sjtjModules.vue

@@ -194,7 +194,7 @@
             <div>
               <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
                 <PieData
-                  :resultData="this.resData1"
+                  :resultData="this.resDataSZdwHqfsNum"
                   :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位土地获取方式占比' : '省直单位土地获取方式占比'"
                   @visible="visibleInfoBySz"
                 ></PieData>
@@ -204,7 +204,7 @@
             <div>
               <a-card style="margin-bottom: 0.5rem;width:100%;height: 18rem">
                 <PieData
-                  :resultData="this.resData1"
+                  :resultData="this.resDataSZdwHqfsArea"
                   :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位土地获取方式占比' : '省直单位土地获取方式占比'"
                   @visible="visibleInfoBySz"
                 ></PieData>
@@ -227,27 +227,31 @@
           </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="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: 0.5rem;width:100%;height: 18rem">
                 <DoughnutData
                   :titleText="
-                this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位权证登记比例情况' : '省直单位权证登记比例情况’' + '' + ''
+                this.tem_xzqhmc ? this.tem_xzqhmc + '地块数量' : '地块数量' + '' + ''
               "
-                  :result-data="this.DoughnutData"
+                  :result-data="this.DoughnutDataSzNum"
                   :pie-color="this.color1"
                   @visibleZs="visibleInfoBySz"
                 ></DoughnutData>
               </a-card>
             </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 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: 0.5rem;width:100%;height: 18rem">
                 <DoughnutData
                   :titleText="
-                this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位权证登记比例情况' : '省直单位权证登记比例情况’' + '' + ''
+                this.tem_xzqhmc ? this.tem_xzqhmc + '地块面积' : '地块面积' + '' + ''
               "
-                  :result-data="this.DoughnutData"
+                  :result-data="this.DoughnutDataSzArea"
                   :pie-color="this.color1"
                   @visibleZs="visibleInfoBySz"
                 ></DoughnutData>
@@ -258,13 +262,15 @@
 <!--        第二行-->
         <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;  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">
                 <a-col :sm="24" :md="12" :xl="24">
                   <BarTdsjyt
                     :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位土地批准用途情况' : '省直单位土地批准用途情况'"
-                    :result-x-data="this.resXData"
+                    :result-x-data="this.resXSzDataNum"
                     :dw="this.dw2"
                     style="width:100% ;height:300px;"
                     @visibleSz="visibleInfoBySz"
@@ -275,13 +281,15 @@
             </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 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">
                 <BarTdsjyt
                   :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位土地批准用途情况' : '省直单位土地批准用途情况'"
-                  :result-x-data="this.resXData"
-                  :dw="this.dw2"
+                  :result-x-data="this.resXSzDataArea"
+                  :dw="this.dw"
                   style="width:100% ;height:300px;"
                   @visibleSz="visibleInfoBySz"
                 ></BarTdsjyt>
@@ -292,16 +300,34 @@
 <!--        第三行-->
         <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="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="GDSSZTDKEY='SL'">
+                数量
+              </button>
+              <button :class="type === 'szdw' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click="GDSSZTDKEY='MJ'">
+                面积
+              </button>
+            </div>
+            </div>
             <div>
               <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-                <BarDobuleData
+                <BarDobuleData v-if="GDSSZTDKEY==='MJ'"
                   style="width: 100%"
                   :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位实际占用面积' : '省直单位实际占用面积'"
                   :result-x-data="resBarSzData"
                   @visible="visibleInfoSzXzqh"
                 >
                 </BarDobuleData>
+                <BarDobuleDataNum v-if="GDSSZTDKEY==='SL'"
+                                   :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省直单位实际占用面积' : '省直单位实际占用面积'"
+                                   :result-x-data="this.resBarSzData"
+                                   @visible="visibleInfoXzqh"
+                >
+                </BarDobuleDataNum>
               </a-card>
             </div>
           </div>
@@ -310,8 +336,8 @@
       </div>
 <!--      省属企业统计图表-->
       <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;  font-family:'DingTalk_JinBuTi_Regular';height:40px;line-height: 40px; background-color: #02A7F0; color: white ">省属企业土地获取方式【地块数量】</div>
           <div>
@@ -465,28 +491,30 @@
               山东省各地市土地情况
             </div>
             <div class="cr-tj-btnlist">
-              <button :class="type === 'ssqy' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click="GDSTDKEY='SL'">
+              <button :class="type === 'ssqy' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click="GDSSSTDKEY='SL'">
                 数量
               </button>
-              <button :class="type === 'szdw' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click="GDSTDKEY='MJ'">
+              <button :class="type === 'szdw' ? ['cr-tj-btn', 'cr-tj-btn-select'] : 'cr-tj-btn'" @click="GDSSSTDKEY='MJ'">
                 面积
               </button>
             </div>
           </div>
           <div>
             <a-card style="margin-bottom: 1rem;width:100%;height: 21rem">
-              <BarDobuleData  v-if="GDSTDKEY==='SL'"
+              <BarDobuleData  v-if="GDSSSTDKEY==='SL'"
                               :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业实际占用面积' : '省属企业实际占用面积'"
-                              :result-x-data="resBarSsData"
-                              visible="visibleInfoXzqh"
+                              :result-x-data="this.resBarSsData"
+                              @visible="visibleInfoXzqh"
+                              style="width:calc(100% - 0px);height:19rem;"
               >
               </BarDobuleData>
-              <BarDobuleData  v-if="GDSTDKEY==='MJ'"
-                              :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业实际占用面积' : '省属企业实际占用面积'"
-                              :result-x-data="resBarSsData"
-                              visible="visibleInfoXzqh"
+              <BarDobuleDataNum  v-if="GDSSSTDKEY==='MJ'"
+                                 :titleText="this.tem_xzqhmc ? this.tem_xzqhmc + '省属企业实际占用面积' : '省属企业实际占用面积'"
+                                 :result-x-data="this.resBarSsData"
+                                 @visible="visibleInfoXzqh"
+                                 style="width:calc(100% - 0px);height:19rem;"
               >
-              </BarDobuleData>
+              </BarDobuleDataNum>
             </a-card>
           </div>
           </div>
@@ -568,6 +596,7 @@ import BarData from '@views/tj/compoent/BarData'
 import BarDataNum from '@views/tj/compoent/BarDataNum'
 import BarTdsjyt from '@views/tj/compoent/BarTdsjyt'
 import BarDobuleData from '@views/tj/compoent/BarDobuleData'
+import BarDobuleDataNum from '@views/tj/compoent/BarDobuleDataNum'
 import WaterWorld from '@views/tj/compoent/WaterWorld'
 import NightingaleCharData from '@views/tj/compoent/NightingaleCharData'
 import { getAction } from '@api/manage'
@@ -590,8 +619,9 @@ export default {
       DoughnutData2Num: [],
       resTDSJYTDataArea: [],
       resTDSJYTDataNum: [],
-      GDSTDKEY:'SL',
-      YJDWKEY:'SL',
+      GDSSSTDKEY: 'SL',  //山东各省市省属企业地块数量面积标识
+      GDSSZTDKEY: 'SL',  //山东各省市省直单位单位地块数量面积标识
+      YJDWKEY:'SL',   //一级单位统计数量面积标识
       YJDWYDatas: [],
       SUMSS: '',
       SUMSSXZDX: '',
@@ -602,7 +632,8 @@ export default {
       SSDWSL: '',
       SUMSZXZDX: '',
       type: 'ssqy',
-      DoughnutData: [],
+      DoughnutDataSzArea: [],
+      DoughnutDataSzNum: [],
       title2: {
         title: '省直单位地块统计',
         orgCode: 'A03'
@@ -612,6 +643,8 @@ export default {
         orgCode: 'A04'
       },
       resXData: [],
+      resXSzDataArea: [],
+      resXSzDataNum: [],
       visibleQy: false,
       dw: '单位（亩）',
       dw2: '单位（块）',
@@ -638,7 +671,10 @@ export default {
       color: ['#8E42FF', '#FF6B6B', '#2ca7f9', '#F0D418', '#2E64FF'],
       color1: ['#2ca7f9', '#a181fc', '#fd6f97', '#FF6226'],
 
-      resData1: [
+      resDataSZdwHqfsNum: [
+        //每个模块的名字和值
+      ],
+      resDataSZdwHqfsArea: [
         //每个模块的名字和值
       ],
       resWordDataZy: 0.98,
@@ -704,6 +740,7 @@ export default {
     WaterWorld,
     NightingaleCharData,
     BarDobuleData,
+    BarDobuleDataNum,
     PieData,
     PieQdfsMj,
     QcSsgqzysytdqkListBySz,
@@ -911,7 +948,8 @@ export default {
     getPieDatasz() {
       getAction('/qcsb.qyxx/qcQyxx/tdhqfssz', { xzqh: this.tem_xzqh }).then(res => {
         if (res.code == 200) {
-          this.resData1 = res.result
+          this.resDataSZdwHqfsNum = res.result.zySum;
+          this.resDataSZdwHqfsArea = res.result.zyArea;
         }
       })
     },
@@ -919,7 +957,10 @@ export default {
     getDougatass() {
       getAction('/qcsb.qyxx/qcQyxx/qzdjblss', { xzqh: this.tem_xzqh }).then(res => {
         if (res.code == 200) {
-          this.DoughnutData = res.result
+          // this.DoughnutData = res.result
+          this.DoughnutDataSzArea = res.result.zyArea;
+          this.DoughnutDataSzNum = res.result.zySum;
+
         }
       })
     },
@@ -945,7 +986,8 @@ export default {
     getBarsz() {
       getAction('/qcsb.qyxx/qcQyxx/sjyttjsz', { xzqh: this.tem_xzqh }).then(res => {
         if (res.code == 200) {
-          this.resXData = res.result
+          this.resXSzDataArea = res.result.zyArea;
+          this.resXSzDataNum = res.result.zyNum;
         }
       })
     },
@@ -983,7 +1025,7 @@ export default {
     getBarssSjzyData() {
       getAction('/qcsb.qyxx/qcQyxx/sszytdmjtj', { xzqh: this.tem_xzqh }).then(res => {
         if (res.code == 200) {
-          this.resBarSsData = res.result
+          this.resBarSsData = res.result;
         }
       })
     },