From 985e8be5b8fdf80955a63a4bac6a808e04a9499b Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Wed, 19 Mar 2025 17:45:38 +0800
Subject: [PATCH] init

---
 src/views/dashboard/components/Card1.vue      |  43 ++
 src/views/dashboard/components/Card2.vue      |  43 ++
 src/views/dashboard/components/PanelGroup.vue | 448 ------------------
 src/views/dashboard/index.vue                 | 319 ++-----------
 4 files changed, 118 insertions(+), 735 deletions(-)
 create mode 100644 src/views/dashboard/components/Card1.vue
 create mode 100644 src/views/dashboard/components/Card2.vue
 delete mode 100644 src/views/dashboard/components/PanelGroup.vue

diff --git a/src/views/dashboard/components/Card1.vue b/src/views/dashboard/components/Card1.vue
new file mode 100644
index 0000000..ca33803
--- /dev/null
+++ b/src/views/dashboard/components/Card1.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="card">
+    <div class="title">
+      <div class="title__icon">
+        <svg viewBox="0 0 1024 1024" width="83" height="83"><path d="M450.1 501c118.8 0 215.5-98.4 215.5-219.3S568.9 62.5 450.1 62.5c-118.9 0-215.5 98.4-215.5 219.2S331.2 501 450.1 501zM524.9 522.1H377.4c-150 0-272.1 124.1-272.1 276.6v16.4c0 79.8 120.1 79.8 272.1 79.8h83.5c-26.8-43.6-42.6-94.8-42.6-149.8 0.1-90.1 41.7-170.4 106.6-223z" fill="#fff"></path><path d="M702.8 528.6c-119.2 0-215.9 96.9-215.9 216.4s96.6 216.4 215.9 216.4S918.7 864.5 918.7 745s-96.6-216.4-215.9-216.4z m96.1 270.3H691.3c-19.8 0-35.9-16.1-35.9-35.9V655.5c0-19.8 16.1-35.9 35.9-35.9s35.9 16.1 35.9 35.9v71.7h71.7c19.8 0 35.9 16.1 35.9 35.9 0 19.8-16.1 35.8-35.9 35.8z" fill="#fff"></path></svg>
+      </div>
+      <div class="title__text">
+        <div class="title__text--name">访客量</div>
+        <div class="title__text--sub">描述文字</div>
+      </div>
+    </div>
+
+    <div class="title__data">
+      <div class="title__data-item">
+        <div class="title__data-item__num">2000</div>
+        <div class="title__data-item__text">今日访客</div>
+      </div>
+      <div class="title__data-item">
+        <div class="title__data-item__num">100000</div>
+        <div class="title__data-item__text">总计访客</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.card {
+  border-radius: 7px;
+  filter: drop-shadow(0 0 7.5px rgba(211,215,221,0.4));
+  background-color: #ffffff;
+  border: 1px solid #d8e2f0;
+}
+</style>
diff --git a/src/views/dashboard/components/Card2.vue b/src/views/dashboard/components/Card2.vue
new file mode 100644
index 0000000..f099e36
--- /dev/null
+++ b/src/views/dashboard/components/Card2.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="card">
+    <div class="title">
+      <div class="title__icon">
+        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="83" height="83"><path d="M883.2 192L601.6 467.2h-6.4l-96-96v-6.4L806.4 57.6c6.4-6.4 0-12.8-6.4-12.8H224c-51.2 0-96 44.8-96 96v748.8c0 51.2 44.8 96 96 96h569.6c51.2 0 96-44.8 96-96V198.4c0-6.4-6.4-12.8-6.4-6.4z m-416 217.6c0-6.4 6.4-6.4 12.8-6.4l83.2 83.2c6.4 6.4 0 12.8-6.4 12.8l-96 12.8c-6.4 0-6.4 0-6.4-6.4l12.8-96z m38.4 428.8h-256c-19.2 0-32-12.8-32-32s12.8-32 32-32h256c19.2 0 32 12.8 32 32 0 12.8-19.2 32-32 32z m224-153.6H243.2c-19.2 0-32-12.8-32-32s12.8-32 32-32h486.4c19.2 0 32 12.8 32 32s-12.8 32-32 32z"></path></svg>
+      </div>
+      <div class="title__text">
+        <div class="title__text--name">填报量</div>
+        <div class="title__text--sub">描述文字</div>
+      </div>
+    </div>
+
+    <div class="title__data">
+      <div class="title__data-item">
+        <div class="title__data-item__num">2000</div>
+        <div class="title__data-item__text">今日填报</div>
+      </div>
+      <div class="title__data-item">
+        <div class="title__data-item__num">100000</div>
+        <div class="title__data-item__text">总计填报</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.card {
+  border-radius: 7px;
+  filter: drop-shadow(0 0 7.5px rgba(211,215,221,0.4));
+  background-color: #ffffff;
+  border: 1px solid #d8e2f0;
+}
+</style>
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
deleted file mode 100644
index ea1f809..0000000
--- a/src/views/dashboard/components/PanelGroup.vue
+++ /dev/null
@@ -1,448 +0,0 @@
-<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>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 3e3f399..06f2001 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,298 +1,43 @@
 <template>
   <div>
-
-    <div class="statistics">
-      <panel-group :totaldata="list" />
+    <div class="grid-container">
+      <Card1 style="grid-area: card1"></Card1>
+      <Card2 style="grid-area: card2"></Card2>
     </div>
-
-
   </div>
 </template>
 
 <script>
-  import echarts from "echarts"
-  import PanelGroup from './components/PanelGroup'
-  import {
-    getChartsHome
-  } from "../../api/dashboard.js"
-
-  export default {
-    components: {
-      PanelGroup
-    },
-    data() {
-      return {
-        col: '',
-        line: '',
-        business_data: [],
-        collect_data: [],
-        list: {},
-        customerArr: [],
-        orderArr: [],
-        chartData: {},
-      }
-    },
-    watch: {
-      chartData(val, newval) {
-        if (newval){
-          this.init();
-        }
-      }
-    },
-    methods: {
-      async loadData() {
-        await getChartsHome().then((res) => {
-          console.log(res);
-          this.list = res.list;
-          this.chartData = res;
-          let _business_data = [];
-          let _collect_data = [];
-          res.business_data.map(item => {
-            _business_data.push(item.server_money_total)
-            _collect_data.push(item.collect_money)
-          })
-          this.business_data = _business_data;
-          this.collect_data = _collect_data;
-          let _customerArr = [];
-          let _orderArr = [];
-
-          res.order_data.map(item => {
-            _customerArr.push(item.active_customer)
-            _orderArr.push(item.order_total)
-          })
-          this.customerArr = _customerArr;
-          this.orderArr = _orderArr;
-        }).catch()
-      },
-      init() {
-        this.col = echarts.init(document.getElementById('col-chart'))
-        this.col.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            },
-            position: 'bottom'
-          },
-          legend: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          xAxis: {
-            type: 'category',
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          series: [{
-              name: '服务金额',
-              type: 'bar',
-              data: this.business_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '收款',
-              type: 'bar',
-              data: this.collect_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
-
-        this.line = echarts.init(document.getElementById('line-chart'))
-        this.line.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['活跃客户', '服务订单']
-          },
-          grid: {
-            left: '3%',
-            right: '6%',
-            bottom: '3%',
-            containLabel: true
-          },
-          toolbox: {
-
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [{
-              name: '活跃客户',
-              type: 'line',
-              stack: 'Total',
-              data: this.customerArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '服务订单',
-              type: 'line',
-              stack: 'Total',
-              data: this.orderArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
-      }
-    },
-    created() {
-
-      //this.loadData();
-    },
-    mounted() {
-
-
-      //this.init()
-
-      window.onresize = () => {
-        this.col.resize()
-        this.line.resize()
-      }
-
-    },
-    destroyed() {
-      window.onresize = null
-    }
-  }
+import Card1 from './components/Card1.vue'
+import Card2 from './components/Card2.vue'
+export default {
+  components: {
+    Card1,
+    Card2
+  },
+  data() {
+    return {};
+  },
+  watch: {},
+  methods: {},
+  created() {},
+  mounted() {},
+  destroyed() {
+    window.onresize = null;
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .statistics {
-    display: flex;
-
-    margin-top: 20px;
-
-    &-title {
-
-      padding-left: 6px;
-    }
-
-    &-content {
-      text-align: center;
-      font-size: 13px;
-
-      &-top {
-
-        &__num {
-          font-weight: 600;
-        }
-
-        &__name {
-          font-size: 10px;
-          color: rgb(140, 140, 140);
-        }
-      }
-
-      &-bottom {
-        display: flex;
-        justify-content: space-between;
-
-        &-left {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
-        }
-
-        &-right {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
-        }
-      }
-    }
-
-    &>div {
-      flex: 1;
-      margin-right: 20px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .chart {
-    display: flex;
-
-    margin-top: 20px;
-
-
-    .chartItem {
-
-      width: 49%;
-
-      .chartItemTitle {
-        font-size: 16px;
-        margin-bottom: 20px;
-      }
-
-      #col-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        margin-right: 20px;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-        width: 100%;
-      }
-
-      #line-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-      }
-    }
-
-
-  }
+.grid-container {
+  display: grid;
+  border-radius: 7px;
+  padding: 30px;
+  margin-top: 20px;
+  background-color: #ffffff;
+  grid-template-rows: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-areas: "card1 card2" "card3 card3";
+  grid-gap: 30px;
+}
 </style>