From d6445b02cf6d8c55e4e285eca31317965cbe3e5d Mon Sep 17 00:00:00 2001
From: dt_2916866708 <>
Date: Fri, 2 Feb 2024 16:01:00 +0800
Subject: [PATCH] shoye1

---
 src/views/dashboard/admin/index.scss |  90 +++++++++++++++
 src/views/dashboard/admin/index.vue  | 166 ++++++++++++++++++++++++++-
 2 files changed, 255 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dashboard/admin/index.scss

diff --git a/src/views/dashboard/admin/index.scss b/src/views/dashboard/admin/index.scss
new file mode 100644
index 0000000..65d02df
--- /dev/null
+++ b/src/views/dashboard/admin/index.scss
@@ -0,0 +1,90 @@
+.flex {
+    display: flex;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.ac {
+    align-items: center;
+}
+
+.jc {
+    justify-content: center;
+}
+
+.oneflex {
+    flex: 1;
+}
+
+.jw {
+    justify-content: space-between;
+}
+
+.js {
+    justify-content: space-around;
+}
+
+.number {
+    color: red;
+    font-size: 25px;
+}
+
+.product-card {
+    .product-card-item {}
+}
+
+.orderData {
+    width: 100%;
+
+    .orderData-right {
+        margin-left: 50px;
+        flex-wrap: wrap;
+
+        .orderData-right-item {
+            width: calc(50% - 20px);
+            box-sizing: border-box;
+            text-align: center;
+            padding: 10px 20px;
+            border-bottom: #ececec solid 1px;
+
+        }
+    }
+
+    .orderData-left {
+        padding: 10px 20px;
+        box-sizing: border-box;
+        border: solid 1px #bbbbbb;
+    }
+}
+
+.orderStatistics-card {
+    .orderStatistics-card-right{ 
+    }
+    .orderStatistics-card-left {
+        flex-shrink: 0;
+        padding: 10px 50px;
+        border-right: solid 1px #ececec;
+        .orderStatistics-card-left-item{
+            .orderStatistics-card-left-item-title{
+                color: #bbbbbb;
+            }
+            .orderStatistics-card-left-item-number{
+                font-size: 25px;
+            }
+        }
+    }
+
+}
+.box-card{
+    margin-bottom: 30px;
+}
+.card-title{
+    font-size: 20px;
+    font-weight: 600;
+}
+.page{
+    height:calc(100vh - 144px);
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index 5466dc0..7ccc561 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -1,20 +1,184 @@
 <template>
   <div class="page">
+    <el-row>
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header">
+            <span class="card-title">订单数据</span>
+          </div>
+          <div class="flex">
+            <div class="orderData flex ac">
+              <div class="orderData-left flex ac">
+                <i style="font-size: 40px;" class="el-icon-tickets"></i>
+                <div>
+                  <div>今日订单总数</div>
+                  <div>200</div>
+                </div>
+              </div>
+              <div class="orderData-right oneflex flex jw">
+                <div class="orderData-right-item">
+                  <span>待核销订单</span>
+                  <span>(10)</span>
+                </div>
+                <div class="orderData-right-item">
+                  <span>已核销订单</span>
+                  <span>(10)</span>
+                </div>
+                <div class="orderData-right-item">
+                  <span>已完成订单</span>
+                  <span>(10)</span>
+                </div>
+                <div class="orderData-right-item">
+                  <span>待退款订单</span>
+                  <span>(10)</span>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-card></el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="11">
+        <el-card class="box-card">
+          <div slot="header">
+            <span class="card-title">商品总览</span>
+          </div>
+          <div class="product-card flex js">
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="2"></el-col>
+      <el-col :span="11">
+        <el-card class="box-card">
+          <div slot="header">
+            <span class="card-title">商品总览</span>
+          </div>
+          <div class="product-card flex js">
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+
+            <div class="product-card-item">
+              <div class="number">100</div>
+              <div>已下架</div>
+            </div>
+
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header">
+            <span class="card-title">订单统计</span>
+          </div>
+          <div class="orderStatistics-card flex">
+            <div class="orderStatistics-card-left flex column js">
+              <div class="orderStatistics-card-left-item">
+                <div class="orderStatistics-card-left-item-title">本月订单总数</div>
+                <div class="orderStatistics-card-left-item-number">10000</div>
+                <div class="orderStatistics-card-left-item-title">10% 同比上周</div>
+              </div>
+              <div class="orderStatistics-card-left-item">
+                <div class="orderStatistics-card-left-item-title">本月订单总数</div>
+                <div class="orderStatistics-card-left-item-number">10000</div>
+                <div class="orderStatistics-card-left-item-title">10% 同比上周</div>
+              </div>
+            </div>
+            <div class="orderStatistics-card-right oneflex">
+              <div style="width: 100%;"> 近一周订单统计</div>
+              <div style="width: 100%; height:500px;margin-top:20px" id="chart"></div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import echarts from 'echarts'
+
 export default {
   filters: {},
   data() {
     return {
+      myChart: null
     }
   },
   created() {
+    this.init()
+  },
+  mounted() {
+    this.initChart('chart')
   },
   methods: {
+    initChart(id='chart') {
+      this.myChart = echarts.init(document.getElementById(id));
+      this.myChart.setOption({
+        color: ['#4370da'],
+        grid: {
+          x: 50,
+          y: 25,
+          x2: 30,
+          y2: 35
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true,
+            areaStyle: {}
+          }
+        ]
+      });
+    },
+    init() {
+
+    }
   }
 }
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+@import './index.scss';
+</style>