数据统计-UI修改

src/views/data-statistics/echars-components/china-map-bigger.vue

@@ -202,7 +202,7 @@ export default {
 <style scoped>
 .chinaecharts {
   width: 100%;
-  height: 673px;
+  height: 665px;
   /*background-color: #333;*/
 }
 </style>

src/views/data-statistics/echars-components/columnarChart.vue

@@ -49,9 +49,11 @@ export default {
           }
         },
         grid: {
-          x: 50,
-          x2: 10,
-          y2: 40
+          left: '3%',
+          top: '14%',
+          right: '6%',
+          bottom: '8%',
+          containLabel: true
         },
         xAxis: {
           type: 'category',

src/views/data-statistics/echars-components/crosswiseColumnarChart.vue

@@ -46,8 +46,9 @@ export default {
         },
         grid: {
           left: '3%',
+          top: '10%',
           right: '6%',
-          bottom: '3%',
+          bottom: '8%',
           containLabel: true
         },
         xAxis: {

src/views/data-statistics/hospital-data-statistics/hospital-data-statistics.vue

@@ -102,7 +102,7 @@
         </div>
       </el-col>
     </el-row>
-    <el-row :gutter="24" class="row2">
+    <el-row :gutter="24" class="row2 autoRow1_2">
       <el-col :span="12">
         <div class="cardDiv" style="padding-bottom: 0">
           <two-line-chart v-if="yData1" :y-data1="yData1" :y-data2="yData2" title="预储值波动" />
@@ -294,7 +294,7 @@
                 {{ scope.row.currentBalance ? scope.row.currentBalance+'元': '-' }}
               </template>
             </el-table-column>
-            <el-table-column label="状态" align="left" prop="state" width="60">
+            <el-table-column label="状态" align="left" prop="state" min-width="60px">
               <template slot-scope="scope">
                 <span :style="showStatus(scope.row.authorizationExpirationDate) === '• 过期' ? 'color: #F8CA96' : 'color: #67C23A'">{{ showStatus(scope.row.authorizationExpirationDate) || '-' }}</span>
               </template>
@@ -530,6 +530,7 @@ export default {
 .cardDiv {
   padding: 20px;
   background-color: #FFFFFF;
+  box-shadow: 0px 3px 8px rgba(0,0,0,0.06);
 }
 .cardTitle {
   font-size: 14px;
@@ -801,7 +802,7 @@ export default {
   margin-bottom: 24px;
 }
 .rankInnerDiv {
-  height: 389px;
+  //height: 389px;
 }
 .emptyDiv {
   width: 100%;
@@ -812,4 +813,10 @@ export default {
   font-weight: 400;
   color: #AFAFAF;
 }
+// 控制统一行高
+.autoRow1_2 {
+  ::v-deep .cardDiv {
+    height: 468px;
+  }
+}
 </style>

src/views/data-statistics/other-components/emptyTool.vue

 <template>
-  <div>
+  <div style="height: 100%">
     <div class="cardTitle">
       {{ title }}
     </div>
@@ -39,7 +39,7 @@ export default {
   margin-bottom: 20px;
 }
 .emptyDiv {
-  height: 90%;
+  height: 80%;
   width: 100%;
   text-align: center;
   font-size: 14px;

src/views/data-statistics/pet-data-statistics/pet-data-statistics.vue

@@ -103,7 +103,7 @@
           </div>
         </el-col>
       </el-row>
-      <el-row :gutter="24" class="row2">
+      <el-row :gutter="24" class="row2 autoRow2_2">
         <el-col :span="12">
           <div class="cardDiv" style="padding-bottom: 0">
             <two-line-chart
@@ -113,31 +113,15 @@
               :y-data2="yData2"
               title="本年客户统计"
             />
-            <div v-else style="height: 361px;">
-              <div class="cardTitle">
-                本年客户统计
-              </div>
-              <div class="emptyDiv">
-                <div>
-                  <img src="../../../assets/data_statistics/guahao_img_wushuju.png">
-                </div>
-                <div>暂无数据</div>
-              </div>
-            </div>
+            <empty-tool v-else title="本年客户统计" />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="cardDiv">
-            <div class="cardTitle" style="margin-bottom: 29px">
+            <div v-if="petOwnerConsumeRank.length > 0" class="cardTitle" style="margin-bottom: 29px">
               宠主累计消费排行
             </div>
-            <div class="rankInnerDiv">
-              <div v-if="petOwnerConsumeRank.length === 0" class="emptyDiv">
-                <div>
-                  <img src="../../../assets/data_statistics/guahao_img_wushuju.png">
-                </div>
-                <div>暂无数据</div>
-              </div>
+            <div v-if="petOwnerConsumeRank.length > 0" class="rankInnerDiv">
               <div v-for="(item, key) in petOwnerConsumeRank" :key="key" class="consumeRankDiv">
                 <div class="rank_hospital_name_font">
                   <overlong-tool :text="(item.ownerId || '-') + ' (' + item.nickname + ')'" :max="30" />
@@ -159,20 +143,15 @@
                 </el-row>
               </div>
             </div>
+            <empty-tool v-else title="宠主累计消费排行" />
           </div>
         </el-col>
         <el-col :span="4">
           <div class="cardDiv">
-            <div class="cardTitle" style="margin-bottom: 29px">
+            <div v-if="petOwnerTimeRank.length > 0" class="cardTitle" style="margin-bottom: 29px">
               宠主注册天数排行
             </div>
-            <div class="rankInnerDiv">
-              <div v-if="petOwnerTimeRank.length === 0" class="emptyDiv">
-                <div>
-                  <img src="../../../assets/data_statistics/guahao_img_wushuju.png">
-                </div>
-                <div>暂无数据</div>
-              </div>
+            <div v-if="petOwnerTimeRank.length > 0" class="rankInnerDiv">
               <div v-for="(item, key) in petOwnerTimeRank" :key="key" class="timeRankDiv">
                 <div class="rank_hospital_name_font">
                   <overlong-tool :text="item.nickname" :max="13" />
@@ -194,10 +173,11 @@
                 </el-row>
               </div>
             </div>
+            <empty-tool v-else title="宠主注册天数排行" />
           </div>
         </el-col>
       </el-row>
-      <el-row :gutter="24" class="row2">
+      <el-row :gutter="24" class="row2 autoRow2_3">
         <el-col :span="9">
           <div class="cardDiv" style="padding-bottom: 0">
             <crosswise-columnar-chart
@@ -208,17 +188,7 @@
               :x-data="cross_x_data"
               unit="人"
             />
-            <div v-else style="height: 31.25rem">
-              <div class="cardTitle" style="margin-bottom: 29px">
-                宠主绑定宠物数量分析
-              </div>
-              <div class="emptyDiv">
-                <div>
-                  <img src="../../../assets/data_statistics/guahao_img_wushuju.png">
-                </div>
-                <div>暂无数据</div>
-              </div>
-            </div>
+            <empty-tool v-else title="宠主绑定宠物数量分析" />
           </div>
         </el-col>
         <el-col :span="6">
@@ -234,17 +204,7 @@
               :y-data="columnarChartData.yData"
               name="宠主人数"
             />
-            <div v-else style="height: 386px;">
-              <div class="cardTitle" style="margin-bottom: 29px">
-                宠主绑定医院数量分析
-              </div>
-              <div class="emptyDiv">
-                <div>
-                  <img src="../../../assets/data_statistics/guahao_img_wushuju.png">
-                </div>
-                <div>暂无数据</div>
-              </div>
-            </div>
+            <empty-tool v-else title="宠主绑定医院数量分析" />
           </div>
         </el-col>
         <el-col :span="9">
@@ -267,17 +227,7 @@
               :y-data2="radarPetOwnerPlatformCurrentYear.yData2"
               :max="getArrayMax([getArrayMax(radarPetOwnerPlatformCurrentYear.yData1),getArrayMax(radarPetOwnerPlatformCurrentYear.yData2)])"
             />
-            <div v-else style="height: 386px;">
-              <div class="cardTitle" style="margin-bottom: 29px">
-                宠主年消费额分析
-              </div>
-              <div class="emptyDiv">
-                <div>
-                  <img src="../../../assets/data_statistics/guahao_img_wushuju.png">
-                </div>
-                <div>暂无数据</div>
-              </div>
-            </div>
+            <empty-tool v-else title="宠主年消费额分析" />
           </div>
         </el-col>
       </el-row>
@@ -708,10 +658,12 @@ import CrosswiseColumnarChartOneLine from '@/views/data-statistics/echars-compon
 import RadarChartForPetOwnerHospital
 from '@/views/data-statistics/echars-components/radar-chart-for-petowner-hospital.vue'
 import { getPetDataStatistics, listBalance, listOwner } from '@/api/business/statistics'
+import EmptyTool from '@/views/data-statistics/other-components/emptyTool.vue'
 
 export default {
   name: 'PetDataStatistics',
   components: {
+    EmptyTool,
     RadarChartForPetOwnerHospital,
     CrosswiseColumnarChartOneLine,
     CrosswiseColumnarChart,
@@ -776,7 +728,7 @@ export default {
         xData: ['0~2k', '2~5k', '5~20k', '20~50k', '>50k'],
         yData: []
       },
-      radarSelect: 'lastYear',
+      radarSelect: 'currentYear',
       queryParams: {
         pageNum: 1,
         pageSize: 20
@@ -831,6 +783,7 @@ export default {
     if (this.$store.state.user.userType === '00') {
       this.isPlatformRole = true
       this.getStatisticsDataForPlatFrom()
+      // this.loading = false
       this.getOwnerList()
     } else {
       this.isPlatformRole = false
@@ -952,6 +905,7 @@ export default {
 .cardDiv {
   padding: 20px;
   background-color: #FFFFFF;
+  box-shadow: 0px 3px 8px rgba(0,0,0,0.06);
 }
 .row2 {
   margin-top: 24px;
@@ -1267,19 +1221,22 @@ export default {
   margin-bottom: 24px;
 }
 .rankInnerDiv {
-   height: 389px;
+   //height: 389px;
  }
 
 .crosswiseNull {
   height: 100%;
 }
-.emptyDiv {
-  width: 100%;
-  text-align: center;
-  padding-top: 100px;
-  font-size: 14px;
-  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
-  font-weight: 400;
-  color: #AFAFAF;
+
+// 控制统一行高
+.autoRow2_2 {
+  ::v-deep .cardDiv {
+    height: 468px;
+  }
+}
+.autoRow2_3 {
+  ::v-deep .cardDiv {
+    height: 500px;
+  }
 }
 </style>

src/views/data-statistics/service-statistics/service-statistics.vue

@@ -72,7 +72,7 @@
           </el-row>
           <el-row :gutter="24" class="row2">
             <el-col :span="24">
-              <div class="cardDiv" style="padding-bottom: 0;">
+              <div class="cardDiv orderDiv" style="padding-bottom: 0;">
                 <div style="position: absolute;z-index: 10;width: 90%;text-align: right;">
                   <el-radio-group v-model="lineSelect">
                     <el-radio-button label="byYear" class="radioButton">年</el-radio-button>
@@ -97,14 +97,14 @@
                     :y-data2="yData2Month"
                     title="服务预约情况"
                   />
-                  <empty-tool v-else style="height: 468px" title="服务预约情况" />
+                  <empty-tool v-else class="" title="服务预约情况" />
                 </div>
               </div>
             </el-col>
           </el-row>
         </el-col>
         <el-col :span="12">
-          <div class="cardDiv" style="padding-bottom: 0">
+          <div class="cardDiv mapDiv" style="padding-bottom: 0">
             <china-map-bigger
               v-if="mapData.length > 0"
               :map-data="mapData"
@@ -112,17 +112,17 @@
               :sum="mapData.reduce((sum, e) => sum + Number(e.value || 0), 0)"
               title="平台服务设备地区分布"
             />
-            <empty-tool v-else style="height: 629px" title="平台服务设备地区分布" />
+            <empty-tool v-else title="平台服务设备地区分布" />
           </div>
         </el-col>
       </el-row>
-      <el-row :gutter="24" class="row2">
+      <el-row :gutter="24" class="row2 autoRow3_3">
         <el-col :span="6">
           <div class="cardDiv">
-            <div class="cardTitle" style="margin-bottom: 29px">
+            <div v-if="orderRank.length > 0" class="cardTitle" style="margin-bottom: 29px">
               平台服务项目预约次数排行
             </div>
-            <div class="rankInnerDiv">
+            <div v-if="orderRank.length > 0" class="rankInnerDiv">
               <div v-for="(item, key) in orderRank" :key="key" class="orderRankDiv">
                 <div class="rank_name_font">
                   <overlong-tool :text="item.itemName" :max="30" />
@@ -143,16 +143,16 @@
                   </el-col>
                 </el-row>
               </div>
-              <empty-tool v-if="orderRank.length === 0" style="height: 100%" title="" />
             </div>
+            <empty-tool v-else title="平台服务项目预约次数排行" />
           </div>
         </el-col>
         <el-col :span="6">
           <div class="cardDiv">
-            <div class="cardTitle" style="margin-bottom: 29px">
+            <div v-if="deviceRank.length > 0" class="cardTitle" style="margin-bottom: 29px">
               平台服务设备服务次数排行
             </div>
-            <div class="rankInnerDiv">
+            <div v-if="deviceRank.length > 0" class="rankInnerDiv">
               <div v-for="(item, key) in deviceRank" :key="key" class="deviceRankDiv">
                 <div class="rank_name_font">
                   <overlong-tool :text="item.itemName" :max="30" />
@@ -173,12 +173,12 @@
                   </el-col>
                 </el-row>
               </div>
-              <empty-tool v-if="deviceRank.length === 0" style="height: 100%" title="" />
             </div>
+            <empty-tool v-else title="平台服务设备服务次数排行" />
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="cardDiv" style="padding-bottom: 0">
+          <div class="cardDiv">
             <radar-chart-one-line
               v-if="projectUnitPriceDistributionRadarData.yData.length > 0"
               title="现有服务项目单价分布"
@@ -190,11 +190,11 @@
               :area-start-color="projectUnitPriceDistributionRadarData.areaStartColor"
               :area-end-color="projectUnitPriceDistributionRadarData.areaEndColor"
             />
-            <empty-tool v-else style="height: 360px" title="现有服务项目单价分布" />
+            <empty-tool v-else title="现有服务项目单价分布" />
           </div>
         </el-col>
         <el-col :span="6">
-          <div class="cardDiv" style="padding-bottom: 0">
+          <div class="cardDiv">
             <radar-chart-one-line
               v-if="projectIncomeDistributionRadarData.yData.length > 0"
               title="服务项目收益分布"
@@ -206,7 +206,7 @@
               :area-start-color="projectIncomeDistributionRadarData.areaStartColor"
               :area-end-color="projectIncomeDistributionRadarData.areaEndColor"
             />
-            <empty-tool v-else style="height: 360px" title="服务项目收益分布" />
+            <empty-tool v-else title="服务项目收益分布" />
           </div>
         </el-col>
       </el-row>
@@ -856,6 +856,7 @@ export default {
     if (this.$store.state.user.userType === '00') {
       this.isPlatformRole = true
       this.getDataForPlatform()
+      // this.loading = false
       this.getOrderList()
     } else {
       this.getDataForHospital()
@@ -1014,6 +1015,7 @@ export default {
 .cardDiv {
   padding: 20px;
   background-color: #FFFFFF;
+  box-shadow: 0px 3px 8px rgba(0,0,0,0.06);
 }
 .row2 {
   margin-top: 24px;
@@ -1426,7 +1428,7 @@ export default {
   color: #6db45d !important;
 }
 .rankInnerDiv {
-  height: 389px;
+  //height: 389px;
 }
 .tableClass {
   ::v-deep .el-table__cell {
@@ -1434,4 +1436,15 @@ export default {
     //line-height: 40px !important;
   }
 }
+.autoRow3_3 {
+  ::v-deep .cardDiv {
+    height: 468px;
+  }
+}
+.orderDiv {
+  height: 468px;
+}
+.mapDiv {
+  height: 685px;
+}
 </style>