修改

package.json

@@ -40,7 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.19.1",
-    "echarts": "4.9.0",
+    "echarts": "^4.9.0",
     "element-ui": "2.15.8",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

src/api/system/homepage.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+//最近一周每天的商品交易趋势
+export function selectGodWeekTransactionGoodsVO() {
+    return request({
+        url: '/system/homeStatistics/selectGodWeekTransactionGoodsVO',
+        method: 'get',
+    })
+}
+//首页新增最近一周每天的预约订单交易趋势
+export function selectAodWeekTransactionAppointmentOrderVO() {
+    return request({
+        url: '/system/homeStatistics/selectAodWeekTransactionAppointmentOrderVO',
+        method: 'get',
+    })
+}
+
+//首页新增热卖商品Top10排名榜功能
+export function selectHotGoodsList() {
+    return request({
+        url: '/system/homeStatistics/selectHotGoodsList',
+        method: 'get',
+    })
+}

src/views/index.vue

@@ -3,112 +3,77 @@
     <div class="homes">
       <div class="count" @click="goodsCount">
         <div class="el-icon-picture-outline icons"></div>
-        <div class="counts">{{List.goodsCount}}</div>
+        <div class="counts">{{ List.goodsCount }}</div>
         <div class="total">商品总数量</div>
       </div>
       <div class="count member" @click="patientCount">
         <div class="el-icon-user-solid icons"></div>
-        <div class="counts">{{List.patientCount}}</div>
+        <div class="counts">{{ List.patientCount }}</div>
         <div class="total">会员总数量</div>
       </div>
       <div class="count order" @click="appointmentOrderCount">
         <div class="el-icon-shopping-cart-2 icons"></div>
-        <div class="counts">{{List.appointmentOrderCount}}</div>
+        <div class="counts">{{ List.appointmentOrderCount }}</div>
         <div class="total">预约订单总数量</div>
       </div>
-      <div class="count shop"  @click="goodsOrderCount">
+      <div class="count shop" @click="goodsOrderCount">
         <div class="el-icon-s-data icons"></div>
-        <div class="counts">{{List.goodsOrderCount}}</div>
+        <div class="counts">{{ List.goodsOrderCount }}</div>
         <div class="total">商品订单总数量</div>
       </div>
     </div>
     <div class="today">
       <!-- 今日概括 -->
-        <div class="todayitem">
+      <div class="todayitem">
         今日上架商品数量
-        <span>{{summaryTodayList.goodsCount}}</span>
+        <span>{{ summaryTodayList.goodsCount }}</span>
       </div>
-       <div class="todayitem">
+      <div class="todayitem">
         今日新增会员数
-        <span>{{summaryTodayList.patientCount}}</span>
+        <span>{{ summaryTodayList.patientCount }}</span>
       </div>
       <div class="todayitem">
         今日订单数
-        <span>{{summaryTodayList.orderCount}}</span>
+        <span>{{ summaryTodayList.orderCount }}</span>
       </div>
       <div class="todayitem">
         今日交易额
-        <span>{{summaryTodayList.totalPrice}}</span>
+        <span>{{ summaryTodayList.totalPrice }}</span>
       </div>
-     
-    
     </div>
-
-    <!-- <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>新医路后台管理框架</h2>
-        <p>
-          一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了新医路管理系统。，它可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
-        </p>
-        <p>
-          <b>当前版本:</b> <span>v{{ version }}</span>
-        </p>
+    <el-row>
+      <el-col :span="12">
+        <div class="main2" id="main2" style="width: 100%; height: 500px"></div>
       </el-col>
-
-      <el-col :sm="24" :lg="12" style="padding-left: 50px">
-        <el-row>
-          <el-col :span="8">
-            <h2>技术选型</h2>
-          </el-col>
-          <el-col :span="4">
-            <h2>联系方式</h2>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="4">
-            <h4>后端技术</h4>
-            <ul>
-              <li>SpringBoot</li>
-              <li>SpringCloud</li>
-              <li>Nacos</li>
-              <li>Sentinel</li>
-              <li>MyBatis-plus</li>
-              <li>Fastjson</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-          <el-col :span="4">
-            <h4>前端技术</h4>
-            <ul>
-              <li>Vue</li>
-              <li>Vuex</li>
-              <li>Element-ui</li>
-              <li>Axios</li>
-              <li>Sass</li>
-              <li>Quill</li>
-              <li>...</li>
-            </ul>
-          </el-col>
-          <el-col :span="4">
-            <h4></h4>
-            <ul>
-              <li><i class="el-icon-chat-dot-round"></i> 山东新医路信息科技有限公司：<a
-                href="javascript:;"
-                >0531-69900398</a></li>
-            </ul>
-          </el-col>
-        </el-row>
+      <el-col :span="12">
+        <div class="main" id="main" style="width: 100%; height: 500px"></div>
       </el-col>
     </el-row>
-    <el-divider /> -->
+    <el-row>
+      <div class="title">热卖商品TOP10</div>
+      <el-table :data="list" style="width: 96%; margin: 0 auto">
+        <el-table-column label="排名" type="index" width="130" align="center" />
+        <el-table-column label="商品名称" align="center" prop="goodsName" />
+        <el-table-column label="价格" align="center" prop="sumTotalPrice" />
+        <el-table-column
+          label="销量"
+          align="center"
+          width="130"
+          prop="sumGoodsCount"
+        />
+      </el-table>
+    </el-row>
   </div>
 </template>
 
 <script>
+import { informationStatistics, summaryToday } from "@/api/system/index";
+import * as echarts from "echarts";
 import {
-  informationStatistics,
-  summaryToday
-} from "@/api/system/index";
+  selectGodWeekTransactionGoodsVO,
+  selectAodWeekTransactionAppointmentOrderVO,
+  selectHotGoodsList,
+} from "@/api/system/homepage.js";
 export default {
   name: "index",
   data() {
@@ -120,51 +85,322 @@ export default {
         storeCount: null,
       },
       // 基本信息查询
-      List:[],
+      List: [],
       // 概述查询
-      summaryTodayList:[],
+      summaryTodayList: [],
       // 版本号
       version: "0.0.1",
+      list: [],
     };
   },
+  mounted() {
+    this.info();
+  },
   created() {
     this.getList();
+    this.tableinfo();
   },
   methods: {
+    tableinfo() {
+      selectHotGoodsList().then((res) => {
+        this.list = res.data;
+      });
+    },
+    info() {
+      selectAodWeekTransactionAppointmentOrderVO().then((res) => {
+        if (res.code == 200) {
+          var timedata = [];
+          res.data.forEach((e) => {
+            timedata.push(e.clickDate);
+          });
+          var numberdata = [];
+          res.data.forEach((e) => {
+            numberdata.push(e.count);
+          });
+          var chartDom = document.getElementById("main2");
+          var myChart = echarts.init(chartDom);
+          var option;
+          option = {
+            title: {
+              text: "预约订单交易走势",
+              left: "50%",
+              textAlign: "center",
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                lineStyle: {
+                  color: "#ddd",
+                },
+              },
+              backgroundColor: "rgba(255,255,255,1)",
+              padding: [5, 10],
+              textStyle: {
+                color: "#7588E4",
+              },
+              extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
+            },
+            xAxis: {
+              type: "category",
+              data: timedata,
+              boundaryGap: false,
+              splitLine: {
+                show: true,
+                interval: "auto",
+                lineStyle: {
+                  color: ["#ffffff"],
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#609ee9",
+                },
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            yAxis: {
+              type: "value",
+              splitLine: {
+                lineStyle: {
+                  color: ["#f0f0f0"],
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#609ee9",
+                },
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            series: [
+              {
+                name: "订单数量",
+                type: "line",
+                smooth: true,
+                showSymbol: false,
+                symbol: "circle",
+                symbolSize: 6,
+                data: numberdata,
+                areaStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "#d6e3fd",
+                        },
+                        {
+                          offset: 1,
+                          color: "#d6e3fd",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#6194f9",
+                  },
+                },
+                lineStyle: {
+                  normal: {
+                    width: 3,
+                  },
+                },
+              },
+            ],
+          };
+          option && myChart.setOption(option);
+        } else {
+        }
+      });
+      selectGodWeekTransactionGoodsVO().then((res) => {
+        if (res.code == 200) {
+          var timedata = [];
+          res.data.forEach((e) => {
+            timedata.push(e.clickDate);
+          });
+          var numberdata = [];
+          res.data.forEach((e) => {
+            numberdata.push(e.count);
+          });
+          var chartDom = document.getElementById("main");
+          var myChart = echarts.init(chartDom);
+          var option;
+          option = {
+            title: {
+              text: "商品订单交易走势",
+              left: "50%",
+              textAlign: "center",
+            },
+            tooltip: {
+              trigger: "axis",
+              axisPointer: {
+                lineStyle: {
+                  color: "#ddd",
+                },
+              },
+              backgroundColor: "rgba(255,255,255,1)",
+              padding: [5, 10],
+              textStyle: {
+                color: "#7588E4",
+              },
+              extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
+            },
+            xAxis: {
+              type: "category",
+              data: timedata,
+              boundaryGap: false,
+              splitLine: {
+                show: true,
+                interval: "auto",
+                lineStyle: {
+                  color: ["#e4f7f9"],
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#609ee9",
+                },
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            yAxis: {
+              type: "value",
+              splitLine: {
+                lineStyle: {
+                  color: ["#D4DFF5"],
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#609ee9",
+                },
+              },
+              axisLabel: {
+                margin: 10,
+                textStyle: {
+                  fontSize: 14,
+                },
+              },
+            },
+            series: [
+              {
+                name: "订单数量",
+                type: "line",
+                smooth: true,
+                showSymbol: false,
+                symbol: "circle",
+                symbolSize: 6,
+                data: numberdata,
+                areaStyle: {
+                  normal: {
+                    color: new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(216, 244, 247,1)",
+                        },
+                        {
+                          offset: 1,
+                          color: "rgba(216, 244, 247,1)",
+                        },
+                      ],
+                      false
+                    ),
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#58c8da",
+                  },
+                },
+                lineStyle: {
+                  normal: {
+                    width: 3,
+                  },
+                },
+              },
+            ],
+          };
+          option && myChart.setOption(option);
+        } else {
+        }
+      });
+    },
+
     goodsCount() {
-      this.$router.push('/Shopping/operateGoodsInfo');
+      this.$router.push("/Shopping/operateGoodsInfo");
     },
-    patientCount(){
-       this.$router.push('/patient/patientArchives');
+    patientCount() {
+      this.$router.push("/patient/patientArchives");
     },
-    appointmentOrderCount(){
-      this.$router.push('/order/order');
+    appointmentOrderCount() {
+      this.$router.push("/order/order");
     },
-    goodsOrderCount(){
-       this.$router.push('/order/goodsOrder');
+    goodsOrderCount() {
+      this.$router.push("/order/goodsOrder");
     },
 
     getList() {
       informationStatistics(this.queryParams).then((response) => {
-        console.log(response)
+        console.log(response);
         this.List = response.data;
-
       });
       summaryToday(this.queryParams).then((response) => {
-        console.log(response)
+        console.log(response);
         this.summaryTodayList = response.data;
-
       });
     },
     goTarget(href) {
       window.open(href, "_blank");
     },
-
   },
 };
 </script>
 
 <style scoped lang="scss">
+.title {
+  margin: 20px 0 20px 2%;
+  font-size: 18px;
+  font-weight: 600;
+}
 .count {
   color: white;
   width: 30%;
@@ -247,7 +483,6 @@ export default {
   // background: #ff7171;
   // padding: 0 30px;
   width: 100%;
-  height: 300px;
   display: flex;
 
   margin-top: 10px;