From 2b2cf1bc4b655dbc5ba5d50ae3c5959ade3e6a1f Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Tue, 30 Apr 2024 18:17:01 +0800
Subject: [PATCH] 1

---
 src/views/dashboard/components/PanelGroup.vue | 894 +++++++++---------
 1 file changed, 447 insertions(+), 447 deletions(-)

diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
index ffc9509..ea1f809 100644
--- a/src/views/dashboard/components/PanelGroup.vue
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -1,448 +1,448 @@
-<template>
-  <div>
-    <div class="boxlist">
-      <div class="box box1">
-        <div class="boxtitle">
-          <span>营业统计</span>
-          <i class="el-icon-data-line statIcon"></i>
-        </div>
-        <div class="bline"></div>
-        <div class="boxcontentsubtitle">服务金额</div>
-        <div class="boxcontent">
-          <div class="boxcontentitem">
-            <div class="boxcontentitem-big">
-              {{totaldata.business.server_money_total}}
-            </div>
-            <div style="display: flex;justify-content: space-around;">
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.business.nurse_money_total}}</span>
-                <span>护工金额</span>
-              </div>
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.business.remain_money_total}}</span>
-                <span>留存金额</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="box box2">
-        <div class="boxtitle">
-
-          <span>人效统计</span>
-          <i class="el-icon-user statIcon"></i>
-        </div>
-        <div class="bline"></div>
-        <div class="boxcontentsubtitle">总服务时长</div>
-        <div class="boxcontent">
-          <div class="boxcontentitem">
-            <div class="boxcontentitem-big">
-              {{totaldata.person_efficiency.server_time_total}}
-              分钟
-            </div>
-            <div style="display: flex;justify-content: space-around;">
-              <div class="boxcontentitem-small">
-
-                <span>{{totaldata.person_efficiency.expect}}</span>
-                <span> 照护人员数</span>
-              </div>
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.person_efficiency.act}} </span>
-                <span>天数</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="box box3">
-        <div class="boxtitle">
-          <span>客户统计</span>
-          <i class="el-icon-s-custom statIcon"></i>
-        </div>
-        <div class="bline"></div>
-        <div class="boxcontentsubtitle">活跃客户</div>
-        <div class="boxcontent">
-          <div class="boxcontentitem">
-            <div class="boxcontentitem-big">
-              {{totaldata.customer.active}}人
-            </div>
-            <div style="display: flex;justify-content: space-around;">
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.customer.add}}</span>
-                <span>新增</span>
-              </div>
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.customer.wash}}</span>
-                <span>流失</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="box box4">
-        <div class="boxtitle">
-
-          <span>订单统计</span>
-          <i class="el-icon-document statIcon"></i>
-        </div>
-        <div class="bline"></div>
-        <div class="boxcontentsubtitle">服务订单</div>
-        <div class="boxcontent">
-          <div class="boxcontentitem">
-            <div class="boxcontentitem-big">{{totaldata.order.server_total}}单
-            </div>
-            <div style="display: flex;justify-content: space-around;">
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.order.cycle_total}}</span>
-                <span>周期性订单</span>
-              </div>
-              <div class="boxcontentitem-small">
-                <span>{{totaldata.order.unit_total}}</span>
-                <span>单次订单</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import CountTo from 'vue-count-to'
-
-  export default {
-    props: {
-      countsData: {
-        type: Object
-      },
-      totaldata: {
-        type: Object,
-        default: {
-
-          "business": {
-            "server_money_total": 0,
-            "nurse_money_total": 0,
-            "remain_money_total": 0
-          },
-          "person_efficiency": {
-            "server_time_total": "0",
-            "expect": 0,
-            "act": 0
-          },
-          "customer": {
-            "active": 0,
-            "add": 0,
-            "wash": 0
-          },
-          "order": {
-            "server_total": 0,
-            "cycle_total": 0,
-            "unit_total": 0
-          },
-        }
-      }
-    },
-    components: {
-      CountTo
-    },
-    methods: {
-      handleRoute(type) {
-        this.$emit('handleRoute', type)
-      },
-      toCaculateper(f1, f2) {
-        return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%"
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .boxlist {
-    display: flex;
-  }
-
-  .statIcon {
-    font-size: 24px;
-  }
-
-  .index_icon {
-    position: absolute;
-    top: 1.25rem;
-    right: 1.25rem;
-    width: 3.5625rem;
-  }
-
-  .index_bg {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-  }
-
-
-  .boxcontentitem-small {
-    font-size: 16px;
-    display: flex;
-    flex-direction: column;
-  }
-
-
-  .box {
-    position: relative;
-    width: 33%;
-    margin-left: 0.5%;
-    margin-right: 0.5%;
-    margin-bottom: 2.375rem;
-    box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
-    border-radius: 8px;
-    box-sizing: border-box;
-    opacity: 0.8;
-    padding: 1.25rem 0;
-
-    .boxcontentsubtitle {
-      color: #FFFFFF;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      font-size: 1.0625rem;
-      margin-top: 1.25rem;
-    }
-
-    .boxfooter {
-      font-size: 1.0625rem;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: #FFFFFF;
-      display: flex;
-      justify-content: center;
-    }
-
-    .boxtitle {
-      font-size: 20px;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: #FFFFFF;
-      padding: 0 1.25rem;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .boxcontent {
-      display: flex;
-      //justify-content: space-around;
-      align-items: center;
-
-      .boxline {
-        width: 1px;
-        height: 4.0625rem;
-        background: #FFFFFF00;
-        opacity: 0.3;
-        margin-left: 2.0625rem;
-        margin-right: 2.0625rem;
-      }
-
-
-
-      .boxcontentitem {
-        display: flex;
-        flex-direction: column;
-        font-size: 19px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #FFFFFF;
-        text-align: center;
-        min-width: 100%;
-
-        .boxcontentitem-big {
-          font-size: 2.625rem;
-          font-family: Arial;
-          font-weight: 400;
-          color: #FFFFFF;
-        }
-      }
-
-
-    }
-  }
-
-  .box1 {
-    background: linear-gradient(134deg, #D1AC7B, #DFC69C);
-
-    .boxcline {
-      width: 100%;
-      background: #DFC69C;
-      height: 0.125rem;
-      margin-top: 1.25rem;
-      margin-bottom: 1.25rem;
-    }
-  }
-
-  .bline {
-    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
-    height: 0.25rem;
-    width: 100%;
-    margin-top: 1.25rem;
-  }
-
-  .box2 {
-    background: linear-gradient(134deg, #9193BC, #B7B9D4);
-
-    .boxcline {
-      width: 100%;
-      background: #B7B9D4;
-      height: 0.125rem;
-      margin-top: 1.25rem;
-      margin-bottom: 1.25rem;
-    }
-  }
-
-  .box3 {
-
-    background: linear-gradient(-55deg, #F6A868, #F4C59E);
-
-    .boxcline {
-      width: 100%;
-      background: #F4C59E;
-      height: 0.125rem;
-      margin-top: 1.25rem;
-      margin-bottom: 1.25rem;
-    }
-  }
-
-  .box4 {
-
-    background: linear-gradient(-55deg, #64A48E, #9ECABB);
-
-    .boxcline {
-      width: 100%;
-      background: #9ECABB;
-      height: 0.125rem;
-      margin-top: 1.25rem;
-      margin-bottom: 1.25rem;
-    }
-  }
-
-  .panel-group {
-    // margin-top: 18px;
-    margin-left: -2% !important;
-    margin-right: -3% !important;
-
-    .card-panel-col {
-      margin: 0 2%;
-
-      margin-bottom: 32px;
-    }
-
-    .card-panel {
-      height: 130px;
-      cursor: pointer;
-      font-size: 12px;
-      position: relative;
-      overflow: hidden;
-      color: #666;
-      text-align: center;
-      // background: #fff;
-      // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
-      // border-color: rgba(0, 0, 0, .05);
-
-      &:hover {
-        .card-panel-icon-wrapper {
-          color: #fff;
-        }
-
-        // .icon-people {
-        //   background: #40c9c6;
-        // }
-
-        // .icon-message {
-        //   background: #36a3f7;
-        // }
-
-        // .icon-money {
-        //   background: #f4516c;
-        // }
-
-        // .icon-shopping {
-        //   background: #34bfa3
-        // }
-      }
-
-      .icon-people {
-        color: #fff;
-      }
-
-      .icon-message {
-        color: #fff;
-      }
-
-      .icon-money {
-        color: #fff;
-      }
-
-      .icon-shopping {
-        color: #fff
-      }
-
-      .card-panel-icon-wrapper {
-        float: right;
-        margin: 22px 0 0 14px;
-        padding: 16px;
-        transition: all 0.38s ease-out;
-        border-radius: 6px;
-      }
-
-      .card-panel-icon {
-        float: left;
-        font-size: 42px;
-      }
-
-      .card-panel-description {
-        // float: right;
-        font-weight: bold;
-        margin: 16px 12px;
-
-        .card-panel-text {
-          line-height: 25px;
-          color: rgb(255, 255, 255);
-          font-size: 26px;
-          margin-bottom: 20px;
-          width: 70%;
-          text-align: left;
-        }
-
-        p {
-          text-align: left;
-          font-size: 19px;
-        }
-
-        .card-panel-num {
-          font-size: 20px;
-        }
-      }
-    }
-  }
-
-  @media (max-width:550px) {
-    .card-panel-description {
-      display: none;
-    }
-
-    .card-panel-icon-wrapper {
-      float: none !important;
-      width: 100%;
-      height: 100%;
-      margin: 0 !important;
-
-      .svg-icon {
-        display: block;
-        margin: 14px auto !important;
-        float: none !important;
-      }
-    }
-  }
+<template>
+  <div>
+    <div class="boxlist">
+      <div class="box box1">
+        <div class="boxtitle">
+          <span>营业统计</span>
+          <i class="el-icon-data-line statIcon"></i>
+        </div>
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">服务金额</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              {{totaldata.business.server_money_total}}
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.business.nurse_money_total}}</span>
+                <span>护工金额</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.business.remain_money_total}}</span>
+                <span>留存金额</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="box box2">
+        <div class="boxtitle">
+
+          <span>人效统计</span>
+          <i class="el-icon-user statIcon"></i>
+        </div>
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">总服务时长</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              {{totaldata.person_efficiency.server_time_total}}
+              分钟
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+
+                <span>{{totaldata.person_efficiency.expect}}</span>
+                <span> 照护人员数</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.person_efficiency.act}} </span>
+                <span>天数</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="box box3">
+        <div class="boxtitle">
+          <span>客户统计</span>
+          <i class="el-icon-s-custom statIcon"></i>
+        </div>
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">活跃客户</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">
+              {{totaldata.customer.active}}人
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.customer.add}}</span>
+                <span>新增</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.customer.wash}}</span>
+                <span>流失</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="box box4">
+        <div class="boxtitle">
+
+          <span>订单统计</span>
+          <i class="el-icon-document statIcon"></i>
+        </div>
+        <div class="bline"></div>
+        <div class="boxcontentsubtitle">服务订单</div>
+        <div class="boxcontent">
+          <div class="boxcontentitem">
+            <div class="boxcontentitem-big">{{totaldata.order.server_total}}单
+            </div>
+            <div style="display: flex;justify-content: space-around;">
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.order.cycle_total}}</span>
+                <span>周期性订单</span>
+              </div>
+              <div class="boxcontentitem-small">
+                <span>{{totaldata.order.unit_total}}</span>
+                <span>单次订单</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import CountTo from 'vue-count-to'
+
+  export default {
+    props: {
+      countsData: {
+        type: Object
+      },
+      totaldata: {
+        type: Object,
+        default: {
+
+          "business": {
+            "server_money_total": 0,
+            "nurse_money_total": 0,
+            "remain_money_total": 0
+          },
+          "person_efficiency": {
+            "server_time_total": "0",
+            "expect": 0,
+            "act": 0
+          },
+          "customer": {
+            "active": 0,
+            "add": 0,
+            "wash": 0
+          },
+          "order": {
+            "server_total": 0,
+            "cycle_total": 0,
+            "unit_total": 0
+          },
+        }
+      }
+    },
+    components: {
+      CountTo
+    },
+    methods: {
+      handleRoute(type) {
+        this.$emit('handleRoute', type)
+      },
+      toCaculateper(f1, f2) {
+        return ((f1 / (f2 == 0 ? 1 : f2)) * 100).toFixed(2) + "%"
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .boxlist {
+    display: flex;
+  }
+
+  .statIcon {
+    font-size: 24px;
+  }
+
+  .index_icon {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    width: 3.5625rem;
+  }
+
+  .index_bg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+
+
+  .boxcontentitem-small {
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+
+  .box {
+    position: relative;
+    width: 33%;
+    margin-left: 0.5%;
+    margin-right: 0.5%;
+    margin-bottom: 2.375rem;
+    box-shadow: 0px 8px 15px 0px rgba(212, 84, 32, 0.3100);
+    border-radius: 8px;
+    box-sizing: border-box;
+    opacity: 0.8;
+    padding: 1.25rem 0;
+
+    .boxcontentsubtitle {
+      color: #FFFFFF;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      font-size: 1.0625rem;
+      margin-top: 1.25rem;
+    }
+
+    .boxfooter {
+      font-size: 1.0625rem;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      display: flex;
+      justify-content: center;
+    }
+
+    .boxtitle {
+      font-size: 20px;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      color: #FFFFFF;
+      padding: 0 1.25rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .boxcontent {
+      display: flex;
+      //justify-content: space-around;
+      align-items: center;
+
+      .boxline {
+        width: 1px;
+        height: 4.0625rem;
+        background: #FFFFFF00;
+        opacity: 0.3;
+        margin-left: 2.0625rem;
+        margin-right: 2.0625rem;
+      }
+
+
+
+      .boxcontentitem {
+        display: flex;
+        flex-direction: column;
+        font-size: 19px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        text-align: center;
+        min-width: 100%;
+
+        .boxcontentitem-big {
+          font-size: 2.625rem;
+          font-family: Arial;
+          font-weight: 400;
+          color: #FFFFFF;
+        }
+      }
+
+
+    }
+  }
+
+  .box1 {
+    background: linear-gradient(134deg, #D1AC7B, #DFC69C);
+
+    .boxcline {
+      width: 100%;
+      background: #DFC69C;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .bline {
+    background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
+    height: 0.25rem;
+    width: 100%;
+    margin-top: 1.25rem;
+  }
+
+  .box2 {
+    background: linear-gradient(134deg, #9193BC, #B7B9D4);
+
+    .boxcline {
+      width: 100%;
+      background: #B7B9D4;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .box3 {
+
+    background: linear-gradient(-55deg, #F6A868, #F4C59E);
+
+    .boxcline {
+      width: 100%;
+      background: #F4C59E;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .box4 {
+
+    background: linear-gradient(-55deg, #64A48E, #9ECABB);
+
+    .boxcline {
+      width: 100%;
+      background: #9ECABB;
+      height: 0.125rem;
+      margin-top: 1.25rem;
+      margin-bottom: 1.25rem;
+    }
+  }
+
+  .panel-group {
+    // margin-top: 18px;
+    margin-left: -2% !important;
+    margin-right: -3% !important;
+
+    .card-panel-col {
+      margin: 0 2%;
+
+      margin-bottom: 32px;
+    }
+
+    .card-panel {
+      height: 130px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      text-align: center;
+      // background: #fff;
+      // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      // border-color: rgba(0, 0, 0, .05);
+
+      &:hover {
+        .card-panel-icon-wrapper {
+          color: #fff;
+        }
+
+        // .icon-people {
+        //   background: #40c9c6;
+        // }
+
+        // .icon-message {
+        //   background: #36a3f7;
+        // }
+
+        // .icon-money {
+        //   background: #f4516c;
+        // }
+
+        // .icon-shopping {
+        //   background: #34bfa3
+        // }
+      }
+
+      .icon-people {
+        color: #fff;
+      }
+
+      .icon-message {
+        color: #fff;
+      }
+
+      .icon-money {
+        color: #fff;
+      }
+
+      .icon-shopping {
+        color: #fff
+      }
+
+      .card-panel-icon-wrapper {
+        float: right;
+        margin: 22px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
+
+      .card-panel-icon {
+        float: left;
+        font-size: 42px;
+      }
+
+      .card-panel-description {
+        // float: right;
+        font-weight: bold;
+        margin: 16px 12px;
+
+        .card-panel-text {
+          line-height: 25px;
+          color: rgb(255, 255, 255);
+          font-size: 26px;
+          margin-bottom: 20px;
+          width: 70%;
+          text-align: left;
+        }
+
+        p {
+          text-align: left;
+          font-size: 19px;
+        }
+
+        .card-panel-num {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
+
+    .card-panel-icon-wrapper {
+      float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
+    }
+  }
 </style>