1

dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/controller/StatisticsController.java

@@ -0,0 +1,47 @@
+package com.ruoyi.busi.controller;
+
+import com.baomidou.mybatisplus.core.metadata.IPage;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.ruoyi.busi.domain.BusiThirdItem;
+import com.ruoyi.busi.service.IBusiProdNewService;
+import com.ruoyi.busi.service.IBusiThirdItemService;
+import com.ruoyi.busi.vo.ThirdVO;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.common.utils.poi.ExcelUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.*;
+
+import javax.servlet.http.HttpServletResponse;
+import java.util.*;
+
+/**
+ * 数据统计Controller
+ * 
+ * @author vinjor-m
+ * @date 2025-07-02
+ */
+@RestController
+@RequestMapping("/statistics")
+public class StatisticsController extends BaseController
+{
+    @Autowired
+    private IBusiThirdItemService busiThirdItemService;
+    @Autowired
+    private IBusiProdNewService prodNewService;
+
+    /**
+     * 首页数据统计
+     */
+    @GetMapping("/indexData")
+    public AjaxResult list(String tenantId){
+        Map<String, Map<String,Object>> rtnMap = new HashMap<>();
+        //文章、产品数量
+        rtnMap.put("prodNews",prodNewService.getIndexData(tenantId));
+        return success(rtnMap);
+    }
+
+}

dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/service/IBusiProdNewService.java

@@ -1,6 +1,8 @@
 package com.ruoyi.busi.service;
 
 import java.util.List;
+import java.util.Map;
+
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.IService;
@@ -33,4 +35,13 @@ public interface IBusiProdNewService extends IService<BusiProdNew>
      * @date 14:03 2025/6/30
      **/
     void setAmount(String tenantId);
+    
+    /**
+     * 首页数据统计接口
+     * @author vinjor-M 
+     * @date 16:48 2025/7/4
+     * @param tenantId TODO 
+     * @return java.util.Map<java.lang.String,java.lang.Object>
+    **/
+    Map<String,Object> getIndexData(String tenantId);
 }

dl_admin/ruoyi-admin/src/main/java/com/ruoyi/busi/service/impl/BusiProdNewServiceImpl.java

@@ -1,7 +1,13 @@
 package com.ruoyi.busi.service.impl;
 
+import java.util.Date;
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
+import cn.hutool.core.date.DateUtil;
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.extension.conditions.query.LambdaQueryChainWrapper;
 import com.ruoyi.busi.service.IBusiCategoryService;
 import com.ruoyi.busi.vo.ProdNewVO;
 import com.ruoyi.common.utils.DateUtils;
@@ -14,6 +20,9 @@ import com.ruoyi.busi.mapper.BusiProdNewMapper;
 import com.ruoyi.busi.domain.BusiProdNew;
 import com.ruoyi.busi.service.IBusiProdNewService;
 
+import static com.ruoyi.constant.DictConstants.DATA_TYPE_NEWS;
+import static com.ruoyi.constant.DictConstants.DATA_TYPE_PRODUCT;
+
 /**
  * 产品、文章Service业务层处理
  * 
@@ -68,4 +77,56 @@ public class BusiProdNewServiceImpl extends ServiceImpl<BusiProdNewMapper,BusiPr
             categoryService.setCategoryAmount(list,tenantId);
         }
     }
+
+    /**
+     * 首页数据统计接口
+     *
+     * @param tenantId TODO
+     * @return java.util.Map<java.lang.String, java.lang.Object>
+     * @author vinjor-M
+     * @date 16:34 2025/7/4
+     **/
+    @Override
+    public Map<String, Object> getIndexData(String tenantId) {
+        Map<String, Object> rtnMap = new HashMap<>();
+        Integer prodAll = 0;
+        Integer newsAll = 0;
+        Integer prodAdd = 0;
+        Integer prodEdit = 0;
+        Integer newsAdd = 0;
+        Integer newsEdit = 0;
+        List<BusiProdNew> list = this.list(new LambdaQueryWrapper<BusiProdNew>().eq(BusiProdNew::getTenantId,tenantId));
+        //当前日期
+        String nowDate = DateUtil.formatDate(new Date());
+        for (BusiProdNew item:list){
+            if(DATA_TYPE_PRODUCT.equals(item.getDataType())){
+                //产品
+                prodAll++;
+                if(null!=item.getCreateTime() && nowDate.equals(DateUtil.formatDate(item.getCreateTime()))){
+                    //今天添加的
+                    prodAdd++;
+                }
+                if(null!=item.getUpdateTime() && nowDate.equals(DateUtil.formatDate(item.getUpdateTime()))){
+                    prodEdit++;
+                }
+            }else if(DATA_TYPE_NEWS.equals(item.getDataType())){
+                //文章
+                newsAll++;
+                if(null!=item.getCreateTime() && nowDate.equals(DateUtil.formatDate(item.getCreateTime()))){
+                    //今天添加的
+                    newsAdd++;
+                }
+                if(null!=item.getUpdateTime() && nowDate.equals(DateUtil.formatDate(item.getUpdateTime()))){
+                    newsEdit++;
+                }
+            }
+        }
+        rtnMap.put("prodAll",prodAll);
+        rtnMap.put("newsAll",newsAll);
+        rtnMap.put("prodAdd",prodAdd);
+        rtnMap.put("prodEdit",prodEdit);
+        rtnMap.put("newsAdd",newsAdd);
+        rtnMap.put("newsEdit",newsEdit);
+        return rtnMap;
+    }
 }

dl_vue/src/App.vue

@@ -30,4 +30,21 @@ export default {
   justify-content: start;
   align-items: center
 }
+/deep/.dl-flex-column-center {
+  display: flex;
+  justify-content: center;
+  align-items: center
+}
+/deep/.dl-flex-column-center span{
+  padding-left: 3px;
+}
+/deep/.custom-class th{
+  background-color: rgba(240, 247, 255, 1) !important;
+  font-size: 14px !important;
+  color: rgba(41, 43, 45, 1) !important;
+  border:none !important;
+}
+/deep/.custom-row-class td{
+  border-bottom: 1px dashed rgba(218, 218, 218, 1);
+}
 </style>

dl_vue/src/api/statistics/statistics.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 首页数据统计
+export function indexData(query) {
+  return request({
+    url: '/statistics/indexData',
+    method: 'get',
+    params: query
+  })
+}
+

dl_vue/src/assets/styles/variables.scss

@@ -11,15 +11,15 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color:#bfcbd9;
 $base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-background:#022959;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
 $base-menu-light-background:#ffffff;
 $base-logo-light-title-color: #001529;
 
-$base-sub-menu-background:#1f2d3d;
+$base-sub-menu-background:#0A376D;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-hover:rgba(19, 139, 255, 0.48);
 
 // 自定义暗色菜单风格
 /**

dl_vue/src/layout/components/Sidebar/Logo.vue

@@ -2,12 +2,12 @@
   <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
     <transition name="sidebarLogoFade">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <img v-if="logo" :src="logoImgIcon" class="sidebar-logo-icon" />
-        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+<!--        <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
+<!--        <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>-->
       </router-link>
     </transition>
   </div>
@@ -15,6 +15,7 @@
 
 <script>
 import logoImg from '@/assets/logo/logo.png'
+import logoImgIcon from '@/assets/logo/logo-icon.png'
 import variables from '@/assets/styles/variables.scss'
 
 export default {
@@ -35,6 +36,7 @@ export default {
   },
   data() {
     return {
+      logoImgIcon:logoImgIcon,
       title: process.env.VUE_APP_TITLE,
       logo: logoImg
     }
@@ -55,8 +57,8 @@ export default {
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
+  height: 60px;
-  line-height: 50px;
+  line-height: 70px;
   background: #2b2f3a;
   text-align: center;
   overflow: hidden;
@@ -66,6 +68,12 @@ export default {
     width: 100%;
 
     & .sidebar-logo {
+      width: 155px;
+      height: auto;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+    & .sidebar-logo-icon {
       width: 32px;
       height: 32px;
       vertical-align: middle;

dl_vue/src/views/dashboard/BarChart.vue

@@ -44,7 +44,7 @@ export default {
   },
   methods: {
     initChart() {
-      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart = echarts.init(this.$el)
 
       this.chart.setOption({
         tooltip: {
@@ -62,7 +62,7 @@ export default {
         },
         xAxis: [{
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: ['美国', '德国', '日本', '英国', '法国'],
           axisTick: {
             alignWithLabel: true
           }
@@ -73,26 +73,42 @@ export default {
             show: false
           }
         }],
-        series: [{
+        series: [ {
-          name: 'pageA',
+          name: '',
           type: 'bar',
           stack: 'vistors',
           barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
+          data: [
-          animationDuration
+            {
-        }, {
+              value: 330,
-          name: 'pageB',
+              itemStyle: {
-          type: 'bar',
+                color: '#1D8FFF'
-          stack: 'vistors',
+              }
-          barWidth: '60%',
+            },
-          data: [80, 52, 200, 334, 390, 330, 220],
+            {
-          animationDuration
+              value: 200,
-        }, {
+              itemStyle: {
-          name: 'pageC',
+                color: '#1D8FFF'
-          type: 'bar',
+              }
-          stack: 'vistors',
+            },
-          barWidth: '60%',
+            {
-          data: [30, 52, 200, 334, 390, 330, 220],
+              value: 150,
+              itemStyle: {
+                color: '#1D8FFF'
+              }
+            },
+            {
+              value: 140,
+              itemStyle: {
+                color: '#1D8FFF'
+              }
+            },
+            {
+              value: 100,
+              itemStyle: {
+                color: '#1D8FFF'
+              }
+            }],
           animationDuration
         }]
       })

dl_vue/src/views/dashboard/PieChart.vue

@@ -1,9 +1,10 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div :class="className" :style="{height:height,width:width}"/>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+
 require('echarts/theme/macarons') // echarts theme
 import resize from './mixins/resize'
 
@@ -52,21 +53,30 @@ export default {
         legend: {
           left: 'center',
           bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+          data: ['PC端', '移动端']
         },
         series: [
           {
-            name: 'WEEKLY WRITE ARTICLES',
+            name: '',
             type: 'pie',
             roseType: 'radius',
             radius: [15, 95],
             center: ['50%', '38%'],
             data: [
-              { value: 320, name: 'Industries' },
+              {
-              { value: 240, name: 'Technology' },
+                value: 320,
-              { value: 149, name: 'Forex' },
+                name: 'PC端',
-              { value: 100, name: 'Gold' },
+                itemStyle: {
-              { value: 59, name: 'Forecasts' }
+                  color: '#017EFA'
+                }
+              },
+              {
+                value: 240,
+                name: '移动端',
+                itemStyle: {
+                  color: '#51CBFF'
+                }
+              }
             ],
             animationEasing: 'cubicInOut',
             animationDuration: 2600

dl_vue/src/views/index.vue

@@ -1,92 +1,523 @@
 <template>
-  <div class="app-container home" style="padding-top: 20%">
+  <div class="app-container home">
-    <div> 欢迎进入成事达管理平台</div>
+    <!--    快捷菜单区域-->
-
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24">
+        <div class="dl-item-box">
+          <div class="dl-title-box">
+            <img src="@/assets/index/nav.png">
+            <span class="dl-title">快捷导航</span>
+          </div>
+          <div class="dl-content-body">
+            <div class="dl-menu-box" @click="goMenuClick('/base/info')">
+              <img src="@/assets/index/site-info.png">
+              <span>站点信息</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/base/pics')">
+              <img src="@/assets/index/pic.png">
+              <span>轮播图</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/base/inquiry')">
+              <img src="@/assets/index/xunpan.png">
+              <span>询盘设置</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/busi/category')">
+              <img src="@/assets/index/category.png">
+              <span>栏目管理</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/busi/prod')">
+              <img src="@/assets/index/productor.png">
+              <span>产品管理</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/busi/new')">
+              <img src="@/assets/index/news.png">
+              <span>文章管理</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/statistics/thirdItem')">
+              <img src="@/assets/index/third.png">
+              <span>三方询盘</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/base/pics')">
+              <img src="@/assets/index/chat.png">
+              <span>在线询盘</span>
+            </div>
+            <div class="dl-menu-box" @click="goMenuClick('/statistics/chatMain')">
+              <img src="@/assets/index/chat-obline.png">
+              <span>在线聊天</span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!--    产品文章数量区域-->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="4">
+        <div class="dl-number-item dl-prod-all">
+          <div class="dl-left-icon">
+            <img src="@/assets/index/prod_all.png">
+          </div>
+          <div class="dl-right-box">
+            <div class="dl-label" title="总产品数（个）">总产品数（个）</div>
+            <div class="dl-number-title" :title="rtnMap.prodNews.prodAll"><countTo :startVal="0" :endVal="rtnMap.prodNews.prodAll" :duration="3000"/></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="dl-number-item dl-news-all">
+          <div class="dl-left-icon">
+            <img src="@/assets/index/news_all.png">
+          </div>
+          <div class="dl-right-box">
+            <div class="dl-label" title="总文章数（篇）">总文章数（篇）</div>
+            <div class="dl-number-title" :title="rtnMap.prodNews.newsAll"><countTo :startVal="0" :endVal="rtnMap.prodNews.newsAll" :duration="3000"/></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="dl-number-item dl-prod-add">
+          <div class="dl-left-icon">
+            <img src="@/assets/index/prod_add.png">
+          </div>
+          <div class="dl-right-box">
+            <div class="dl-label" title="今日发布产品数（个）">今日发布产品数（个）</div>
+            <div class="dl-number-title" :title="rtnMap.prodNews.prodAdd"><countTo :startVal="0" :endVal="rtnMap.prodNews.prodAdd" :duration="3000"/></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="dl-number-item dl-news-add">
+          <div class="dl-left-icon">
+            <img src="@/assets/index/news_add.png">
+          </div>
+          <div class="dl-right-box">
+            <div class="dl-label" title="今日发布文章数（篇）">今日发布文章数（篇）</div>
+            <div class="dl-number-title" :title="rtnMap.prodNews.newsAdd"><countTo :startVal="0" :endVal="rtnMap.prodNews.newsAdd" :duration="3000"/></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="dl-number-item dl-prod-edit">
+          <div class="dl-left-icon">
+            <img src="@/assets/index/prod_edit.png">
+          </div>
+          <div class="dl-right-box">
+            <div class="dl-label" title="今日修改产品数（个）">今日修改产品数（个）</div>
+            <div class="dl-number-title" :title="rtnMap.prodNews.prodEdit"><countTo :startVal="0" :endVal="rtnMap.prodNews.prodEdit" :duration="3000"/></div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="4">
+        <div class="dl-number-item dl-news-edit">
+          <div class="dl-left-icon">
+            <img src="@/assets/index/news_edit.png">
+          </div>
+          <div class="dl-right-box">
+            <div class="dl-label" title="今日修改文章数（篇）">今日修改文章数（篇）</div>
+            <div class="dl-number-title" :title="rtnMap.prodNews.newsEdit"><countTo :startVal="0" :endVal="rtnMap.prodNews.newsEdit" :duration="3000"/></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!--    询盘总流量区域-->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24">
+        <div class="dl-item-box">
+          <div class="dl-title-box">
+            <img src="@/assets/index/nav.png">
+            <span class="dl-title">询盘总流量</span>
+          </div>
+          <div style="width: 100%;padding: 12px 0">
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="9">
+                <div class="dl-liuliang-top dl-ip">累计总IP数：<span><countTo :startVal="0" :endVal="320" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="15">
+                <div class="dl-liuliang-top dl-xunpan">累计询盘数：<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="mb8">
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-ip">今日IP数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-ip">昨日IP数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-ip">近30日IP数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-xunpan">在线询盘数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-xunpan">在线聊天数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-xunpan">Email记录数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-xunpan">WhatsApp记录数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+              <el-col :span="3">
+                <div class="dl-liuliang-bottom dl-xunpan">Teams记录数<span><countTo :startVal="0" :endVal="7150" :duration="3000"/></span></div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!--    数据统计区域-->
+    <el-row :gutter="10" class="mb8">
+      <!--      询盘来路前十国家-->
+      <el-col :span="12">
+        <div class="dl-item-box">
+          <div class="dl-title-box">
+            <img src="@/assets/index/nav.png">
+            <span class="dl-title">询盘来路前十国家</span>
+          </div>
+          <div style="width: 100%;padding: 12px 0;height: 300px">
+            <bar-chart/>
+          </div>
+        </div>
+      </el-col>
+      <!--      询盘设备-->
+      <el-col :span="12">
+        <div class="dl-item-box">
+          <div class="dl-title-box">
+            <img src="@/assets/index/nav.png">
+            <span class="dl-title">询盘设备</span>
+          </div>
+          <div style="width: 100%;padding: 12px 0;height: 300px">
+            <pie-chart/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!--询盘渠道（近一个月）-->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="24">
+        <div class="dl-item-box">
+          <div class="dl-title-box">
+            <img src="@/assets/index/nav.png">
+            <span class="dl-title">询盘渠道（近一个月）</span>
+          </div>
+          <div style="width: 100%;padding: 12px 0;">
+            <el-table
+              :data="dataList"
+              stripe
+              height="250"
+              style="width: 100%"
+              header-row-class-name="custom-class"
+              row-class-name="custom-row-class"
+            >
+              <el-table-column prop="date" label="日期" align="center">
+                <template slot="header" slot-scope="scope">
+                  <div class="dl-flex-column-center">
+                    <img class="dl-table-icon" src="@/assets/index/date.png">
+                    <span>日期</span>
+                  </div>
+                </template>
+                <template slot-scope="scope">
+                  <el-tag>{{scope.row.date}}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column prop="xunpan" label="询盘" align="center">
+                <template slot="header" slot-scope="scope">
+                  <div class="dl-flex-column-center">
+                    <img class="dl-table-icon" src="@/assets/index/xunpan-icon.png">
+                    <span>询盘</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="email" label="Email" align="center">
+                <template slot="header" slot-scope="scope">
+                  <div class="dl-flex-column-center">
+                    <img class="dl-table-icon" src="@/assets/index/email.png">
+                    <span>Email</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="whatsApp" label="WhatsApp" align="center">
+                <template slot="header" slot-scope="scope">
+                  <div class="dl-flex-column-center">
+                    <img class="dl-table-icon" src="@/assets/index/whatsApp.png">
+                    <span>WhatsApp</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="teams" label="Teams" align="center">
+                <template slot="header" slot-scope="scope">
+                  <div class="dl-flex-column-center">
+                    <img class="dl-table-icon" src="@/assets/index/teams.png">
+                    <span>Teams</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="chat" label="chat" align="center">
+                <template slot="header" slot-scope="scope">
+                  <div class="dl-flex-column-center">
+                    <img class="dl-table-icon" src="@/assets/index/chat-icon.png">
+                    <span>聊天数</span>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import countTo from 'vue-count-to';
+import BarChart from './dashboard/BarChart'
+import PanelGroup from './dashboard/PanelGroup'
+import LineChart from './dashboard/LineChart'
+import RaddarChart from './dashboard/RaddarChart'
+import PieChart from './dashboard/PieChart'
+import { indexData } from "@/api/statistics/statistics";
+
 export default {
-  name: "Index",
+  name: 'Index',
+  components: {
+    PanelGroup,
+    LineChart,
+    RaddarChart,
+    PieChart,
+    BarChart,
+    countTo
+  },
   data() {
     return {
       // 版本号
-      version: "3.8.9"
+      version: '3.8.9',
-    };
+      rtnMap:{
+        prodNews:{
+          prodAll:0,
+          newsAll:0,
+          prodAdd:0,
+          prodEdit:0,
+          newsAdd:0,
+          newsEdit:0,
+        }
+      },
+      dataList: [{
+        date: '2016-05-03',
+        xunpan: 22,
+        email: 22,
+        whatsApp: 22,
+        teams: 22,
+        chat: 22
+      }]
+    }
+  },
+  watch: {
+    '$route'(to, from) {
+      if (from.path !== to.path) {
+        // 返回上一页时执行的代码
+        this.initData();
+      }
+    }
+  },
+  mounted() {
+    this.initData()
   },
   methods: {
+    //初始化数据
+    initData(){
+      indexData({}).then(response => {
+        this.rtnMap =  response.data
+      });
+    },
     goTarget(href) {
-      window.open(href, "_blank");
+      window.open(href, '_blank')
-    }
+    },
-  }
+    /**
-};
+     * 菜单点击
-</script>
+     * @param path
-
+     */
-<style scoped lang="scss">
+    goMenuClick(path){
-.home {
+      this.$router.push({ path: path})
-  text-align: center;
-  font-weight: bold !important;
-  font-size: 40px !important;
-
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  ul {
-    list-style-type: none;
-  }
-
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
-    }
-  }
-
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
     }
   }
 }
+</script>
+
+<style scoped lang="scss">
+
+.home {
+  background-color: #F8F9FF;
+
+  .dl-table-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dl-item-box {
+    width: 100%;
+    padding: 16px;
+    background-color: #FEFEFF;
+    border-radius: 5px;
+  }
+
+  .dl-title-box {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+
+    img {
+      width: 25px;
+      height: 16px;
+    }
+
+    .dl-title {
+      color: #292929;
+      margin-left: 10px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .dl-content-body {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+
+    .dl-menu-box {
+      cursor: pointer;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 60px;
+        height: 60px;
+      }
+
+      span {
+        margin-top: 10px;
+        color: #292B2D;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .dl-liuliang-top {
+    padding: 10px 15px;
+    color: rgba(41, 43, 45, 1);
+    font-size: 14px;
+
+    span {
+      color: rgba(41, 43, 45, 1);
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .dl-liuliang-bottom {
+    padding: 12px;
+    color: rgba(91, 96, 101, 1);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    span {
+      padding-top: 4px;
+      color: rgba(41, 43, 45, 1);
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .dl-ip {
+    background-color: rgba(238, 251, 255, 1);
+  }
+
+  .dl-xunpan {
+    background-color: rgba(244, 247, 255, 1);
+  }
+
+  .dl-number-item {
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .dl-left-icon {
+      width: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+
+    .dl-right-box {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      align-items: start;
+      justify-content: center;
+      flex-direction: column;
+      padding-left: 10px;
+
+      .dl-label {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        color: #5B6065;
+      }
+
+      .dl-number-title {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: #292B2D;
+        font-size: 22px;
+      }
+    }
+  }
+
+  .dl-prod-all {
+    border: 1px solid rgba(45, 84, 251, 0.35);
+  }
+
+  .dl-news-all {
+    border: 1px solid rgba(255, 127, 13, 0.50);
+  }
+
+  .dl-prod-add {
+    border: 1px solid rgba(0, 90, 255, 0.30);
+  }
+
+  .dl-news-add {
+    border: 1px solid rgba(3, 152, 63, 0.41);
+  }
+
+  .dl-prod-edit {
+    border: 1px solid rgba(20, 155, 171, 0.39);
+  }
+
+  .dl-news-edit {
+    border: 1px solid rgba(255, 155, 27, 0.46);
+  }
+
+}
+
 </style>
 

dl_vue/vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '通告快接管理后台' // 网页标题
+const name = process.env.VUE_APP_TITLE || '成事达管理平台' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口