初步完成网站数据统计接口互联

new_backstage/package-lock.json

@@ -7594,6 +7594,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

new_backstage/package.json

@@ -13,6 +13,7 @@
     "echarts": "^5.3.0",
     "element-ui": "^2.15.3",
     "js-base64": "^3.6.1",
+    "moment": "^2.29.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",

new_backstage/src/configue/api.js

@@ -304,4 +304,45 @@ export const getTabDelById = (id) => {
     method: 'get',
     url: `cms/goodsModule/remove/${id}`,
   })
+}
+
+//数据统计模块api
+// 网站统计
+export const getReportNet = () => {
+  return axios({
+    method: 'get',
+    url: 'cms/report/net',
+  })
+}
+// 各模块浏览量统计
+export const getReportVisit = (data) => {
+  return axios({
+    method: 'post',
+    url: 'cms/report/visit',
+    data
+  })
+}
+// 注册用户统计
+export const getReportUser = (data) => {
+  return axios({
+    method: 'post',
+    url: 'cms/report/user',
+    data
+  })
+}
+// 注册用户统计
+export const getReportInteract = (data) => {
+  return axios({
+    method: 'post',
+    url: 'cms/report/interact',
+    data
+  })
+}
+// 投票点赞统计
+export const getReportVote = (data) => {
+  return axios({
+    method: 'post',
+    url: 'cms/report/vote',
+    data
+  })
 }

new_backstage/src/pages/info/statistics/index.vue

@@ -37,7 +37,7 @@
                 >
                 </el-date-picker>
               </div>
-              <el-button type="primary" @click="search(item)"
+              <el-button type="primary" @click="search(index,item)"
                 >查询统计</el-button
               >
             </div>
@@ -65,7 +65,7 @@
                 >
                 </el-date-picker>
               </div>
-              <el-button type="primary">查询统计</el-button>
+              <el-button type="primary" @click="searchLast">查询统计</el-button>
             </div>
             <!-- 图表上面的文字 -->
             <div class="ech_txtLast">
@@ -84,39 +84,47 @@
 </template>
 
 <script>
+import moment from "moment";
 import * as echarts from "echarts";
+import {
+  getReportInteract,
+  getReportNet,
+  getReportUser,
+  getReportVisit,
+  getReportVote,
+} from "../../../configue/api";
 export default {
   name: "statistics",
   data() {
     return {
       topList: [
-        { name: "精品典藏", num: 3244444444444, id: 1 },
-        { name: "纪念祭扫", num: 18, id: 2 },
-        { name: "学习园地", num: 23, id: 3 },
-        { name: "留言数量", num: 443, id: 4 },
-        { name: "弹幕数量", num: 325, id: 5 },
-        { name: "答题次数", num: 111, id: 6 },
+        { name: "精品典藏", num: 0, id: 1 },
+        { name: "纪念祭扫", num: 0, id: 2 },
+        { name: "学习园地", num: 0, id: 3 },
+        { name: "留言数量", num: 0, id: 4 },
+        { name: "弹幕数量", num: 0, id: 5 },
+        { name: "答题次数", num: 0, id: 6 },
       ],
-      timeLast: "",
+      timeLast: [],
       // echarts数据
       ecBox: [
         {
           name: "各模块浏览量统计",
-          time: "",
-          txt: ["数字史馆", "精品典藏", "纪念忌扫", "学习园地", "我要留意"],
+          time: [],
+          txt: ["数字史馆", "精品典藏", "纪念忌扫", "学习园地", "我要留言"],
           title: "浏览量（次）",
           className: "ech_one",
         },
         {
           name: "注册用户统计",
-          time: "",
+          time: [],
           txt: ["超级管理员", "游客", "审核管理员", "内容管理员"],
           title: "数量",
           className: "ech_tow",
         },
         {
           name: "互动统计",
-          time: "",
+          time: [],
           txt: ["留言", "弹幕", "答题"],
           title: "数量",
           className: "ech_three",
@@ -126,20 +134,49 @@ export default {
   },
   components: {},
   methods: {
+    // 最后一个图表的查询
+    searchLast(){
+      if(this.timeLast===null) return this.$message.warning('请选择时间范围');
+      let temp1=this.timeLast[0].split('-')
+      let temp2=this.timeLast[1].split('-')
+      if(Number(temp2[0])>Number(temp1[0])&&Number(temp2[1])>Number(temp1[1])){
+        return this.$message.warning('时间范围不能超过1年');
+      } 
+      this.getReportVote(this.timeLast[0],this.timeLast[1])
+      // this.$message.success('查询成功')
+    },
     // 点击查询
-    search(item) {
-      this.echartsFu("." + item.className, [999, 888, 777, 666, 111], item.txt);
+    search(index,item) {
+      // console.log(item.time);
+      if(item.time===null) return this.$message.warning('请选择时间范围');
+      let temp1=item.time[0].split('-')
+      let temp2=item.time[1].split('-')
+      if(Number(temp2[0])>Number(temp1[0])&&Number(temp2[1])>Number(temp1[1])){
+        return this.$message.warning('时间范围不能超过1年');
+      } 
+      if (index === 0) {
+        this.getReportVisit(item.time[0],item.time[1]);
+      } else if (index === 1) {
+        this.getReportUser(item.time[0],item.time[1]);
+      } else if (index === 2) {
+        this.getReportInteract(item.time[0],item.time[1]);
+      }
+      // this.$message.success('查询成功')
     },
     // 封装前3个echarts方法
-    echartsFu(dom, data, txtDa) {
+    echartsFu(dom, data, txtDa, num, font) {
       const chartDom = document.querySelector(dom);
       const myChart = echarts.init(chartDom);
       const option = {
         color: ["#5c7bd9"],
-        xAxis: {
-          type: "category",
-          data: txtDa,
-        },
+        xAxis: [
+          {
+            type: "category",
+            data: txtDa,
+            axisLabel: font,
+          },
+        ],
+
         yAxis: {
           type: "value",
         },
@@ -147,7 +184,7 @@ export default {
           {
             data,
             type: "bar",
-            barWidth: 50,
+            barWidth: num,
           },
         ],
       };
@@ -155,14 +192,15 @@ export default {
       option && myChart.setOption(option);
     },
     // 封装最后一个echarts方法
-    echartsLastFu() {
+    echartsLastFu(txt, vote, like, font) {
       const chartDom = document.querySelector(".ech_four");
       const myChart = echarts.init(chartDom);
       const option = {
         color: ["#5c7bd9", "#c0504d"],
         xAxis: {
           type: "category",
-          data: ["实物模型", "专题图库", "视频档案", "自定义1", "自定义2"],
+          data: txt,
+          axisLabel: font,
         },
         yAxis: {
           type: "value",
@@ -170,12 +208,12 @@ export default {
         series: [
           {
             name: "投票数",
-            data: [7, 8, 9, 1, 8],
+            data: vote,
             type: "bar",
           },
           {
             name: "点赞数",
-            data: [2, 2, 4, 7, 6],
+            data: like,
             type: "bar",
           },
         ],
@@ -183,16 +221,131 @@ export default {
 
       option && myChart.setOption(option);
     },
+    // 封装各模块浏览量统计方法
+    async getReportVisit(startTime, endTime) {
+      let res1 = await getReportVisit({ endTime, startTime });
+      let temp1 = [0, 0, 0, 0, 0];
+      res1.data.forEach((v) => {
+        if (v.name === "scene") temp1[0] = v.count;
+        else if (v.name === "goods") temp1[1] = v.count;
+        else if (v.name === "martyr") temp1[2] = v.count;
+        else if (v.name === "news") temp1[3] = v.count;
+        else if (v.name === "comment") temp1[4] = v.count;
+      });
+      this.echartsFu(".ech_one", temp1, this.ecBox[0].txt, 50, {});
+    },
+
+    // 封装注册用户统计方法
+    async getReportUser(startTime, endTime) {
+      await getReportUser({ endTime, startTime });
+      // 由于接口没有完善，先模拟数据
+      let moni1 = [
+        { count: 1, name: "超级管理员" },
+        { count: 5, name: "游客" },
+        { count: 3, name: "审核管理员" },
+        { count: 4, name: "内容管理员" },
+        { count: 10, name: "自定义" },
+        { count: 10, name: "自定义" },
+      ];
+      let temp2 = [];
+      let temp2Txt = [];
+      let tempNum = 50;
+      let tempFont = {};
+      if (moni1.length > 5) {
+        tempNum = "";
+        tempFont = {
+          interval: 0, //强制文字产生间隔
+          rotate: 45, //文字逆时针旋转45°
+        };
+      }
+      moni1.forEach((v) => {
+        temp2Txt.push(v.name);
+        temp2.push(v.count);
+      });
+      this.echartsFu(".ech_tow", temp2, temp2Txt, tempNum, tempFont);
+    },
+
+    // 封装互动统计方法
+    async getReportInteract(startTime, endTime) {
+      let res3 = await getReportInteract({ endTime, startTime });
+      let temp3 = [0, 0, 0];
+      temp3[0] = res3.data.countComment;
+      temp3[1] = res3.data.countBarrage;
+      temp3[2] = res3.data.countAnswer;
+      this.echartsFu(".ech_three", temp3, this.ecBox[2].txt, 50, {});
+    },
+
+    // 封装投票点赞统计方法
+    async getReportVote(startTime, endTime) {
+      await getReportVote({ endTime, startTime });
+      //模拟数据
+      let moni2 = [
+        { countLike: 1, countVote: 2, name: "实物模型" },
+        { countLike: 10, countVote: 20, name: "专题图库" },
+        { countLike: 7, countVote: 28, name: "视频档案" },
+        { countLike: 18, countVote: 9, name: "自定义1" },
+        { countLike: 11, countVote: 13, name: "自定义2" },
+        { countLike: 1, countVote: 2, name: "实物模型" },
+        { countLike: 11, countVote: 13, name: "自定义2" },
+      ];
+      let temp4Txt = [];
+      let temp4_1 = [];
+      let temp4_2 = [];
+      let temp4Font = {};
+      if (moni2.length > 6) temp4Font = { interval: 0, rotate: 45 };
+      moni2.forEach((v) => {
+        temp4Txt.push(v.name);
+        temp4_1.push(v.countVote);
+        temp4_2.push(v.countLike);
+      });
+      this.echartsLastFu(temp4Txt, temp4_1, temp4_2, temp4Font);
+    },
   },
   computed: {},
   watch: {},
-  mounted() {
-    // 调用前3个echarts方法
-    this.echartsFu(".ech_one", [120, 200, 150, 80, 70], this.ecBox[0].txt);
-    this.echartsFu(".ech_tow", [333, 444, 123, 888, 33], this.ecBox[1].txt);
-    this.echartsFu(".ech_three", [100, 200, 500, 600, 70], this.ecBox[2].txt);
-    // 调用最后一个echarts方法
-    this.echartsLastFu();
+
+  async mounted() {
+    // 字典
+    const dict = {
+      countGoods: "精品典藏",
+      countMartyr: "纪念祭扫",
+      countNews: "学习园地",
+      countComment: "留言数量",
+      countBarrage: "弹幕数量",
+      countAnswer: "答题次数",
+    };
+
+    // 网站统计模块数据
+    let res0 = await getReportNet();
+    this.topList.forEach((v) => {
+      for (let k in res0.data) {
+        if (v.name === dict[k]) v.num = res0.data[k];
+      }
+    });
+    //  当前时间 格式2022-02-10
+    let nowTime = moment(new Date()).format("YYYY-MM-DD");
+    // 一个月之前 格式2022-01-10
+    let nowTimeBefore = moment(new Date())
+      .subtract(1, "months")
+      .format("YYYY-MM-DD");
+    // console.log(nowTime, nowTimeBefore);
+    // 设置初始时间为当前时间和前一个月
+    this.ecBox.forEach((v) => {
+      v.time = [nowTimeBefore, nowTime];
+    });
+    this.timeLast = [nowTimeBefore, nowTime];
+
+    //各模块浏览量统计
+    this.getReportVisit(nowTimeBefore, nowTime);
+
+    // 注册用户统计
+    this.getReportUser(nowTimeBefore, nowTime);
+
+    // 互动统计
+    this.getReportInteract(nowTimeBefore, nowTime);
+
+    // 投票点赞统计
+    this.getReportVote(nowTimeBefore, nowTime);
   },
 };
 </script>
@@ -268,7 +421,7 @@ export default {
         }
         .echarts {
           transform: translateY(-20px);
-          width: 80%;
+          width: 100%;
           margin: 0 auto;
           height: 300px;
         }
@@ -283,7 +436,7 @@ export default {
           justify-content: center;
           align-items: center;
           position: absolute;
-          bottom: 15px;
+          top: 65px;
           left: 50%;
           transform: translateX(-50%);
           & > div {