修复统计分析无数据

package-lock.json

@@ -4311,6 +4311,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.2.1.tgz",
+      "integrity": "sha512-OJ79b22eqRfbSV8vYmDKmA+XWfNbr0Uk/OafWcFNIGDWti2Uw9A6eVCiJLmqPa9Sk+EWL+t5v26aak0z3gxiZw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.2.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -11874,6 +11890,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.2.1.tgz",
+      "integrity": "sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "echarts": "^5.2.1",
     "element-ui": "^2.13.2",
     "js-base64": "^2.6.2",
     "uuid": "^8.3.2",

src/pages/leaveMessage/guide.vue

@@ -86,6 +86,7 @@ export default {
     },
     async save() {
       let data = this["form"];
+      data.id =1
       let result = await this.$http({
         method: "post",
         data,

src/pages/news/newEdit.vue

@@ -133,7 +133,7 @@ export default {
       // console.log('this.form',this.form)
       let { content, name, type, id, code,source,wxUrl } = this.form;
       let data = { content, name, type, id, code,source,wxUrl};
-      console.log(666,data);
+      // console.log(666,data);
       if(data.content===undefined) return common.tip("error", "内容不能为空!");
       let result = await this.$http({
         method: "post",

src/pages/system/analysis.vue

@@ -4,79 +4,110 @@
       <div slot="con"></div>
     </main-top>
     <div class="table-interface">
-      <!-- <div class="top-body">
+      <div class="top-body">
         <div class="info-top">
           <div class="info-left">
-            <span style="font-size:18px">统计分析</span>
+            <span style="font-size: 18px">统计分析</span>
           </div>
           <div class="info-right"></div>
         </div>
         <div class="analysis">
-            <ul>
-              <li class="analysis-con left">
-                    <div class="title">
-                        流量统计
-                    </div>
-                    <ul class="content">
-                        <li>合计</li>
-                        <li>今日</li>
-                        <li>昨日</li>
-                    </ul>
-                </li>
-                <li class="analysis-con left" v-for="(item,i) in trafficStatistics" :key='i'>
-                    <div class="title">
-                        {{item.type === "web"?"官网访问量":item.type === "scene"?"线上史馆访问人数":item.type === "comment"? "留言人数":""}}
-                    </div>
-                    <ul class="content">
-                        <li>{{item.total}}</li>
-                        <li>{{item.today}}</li>
-                        <li>{{item.yesterday}}</li>
-                    </ul>
-                </li>
-                
-            </ul>
+          <ul>
+            <li class="analysis-con left">
+              <div class="title">流量统计</div>
+              <ul class="content">
+                <li>合计</li>
+                <li>今日</li>
+                <li>昨日</li>
+              </ul>
+            </li>
+            <li
+              class="analysis-con left"
+              v-for="(item, i) in trafficStatistics"
+              :key="i"
+            >
+              <div class="title">
+                {{
+                  item.type === "web"
+                    ? "官网访问量"
+                    : item.type === "scene"
+                    ? "线上史馆访问人数"
+                    : item.type === "comment"
+                    ? "留言人数"
+                    : ""
+                }}
+              </div>
+              <ul class="content">
+                <li>{{ item.total }}</li>
+                <li>{{ item.today }}</li>
+                <li>{{ item.yesterday }}</li>
+              </ul>
+            </li>
+          </ul>
         </div>
-      </div> -->
+      </div>
 
       <div class="bottom">
-          <div class="bottom-left">
-              <div class="head">
-                  <div class="head-txt">访问时间趋势</div>
-                  <div class="head-btn">
-                      <el-button type="success" size="mini">官网</el-button>
-                      <el-button type="default" size="mini">线上史馆</el-button>
-                  </div>
-              </div>
+        <div class="bottom-left">
+          <div class="head">
+            <div class="head-txt">访问时间趋势</div>
+            <div class="head-btn">
+              <el-button type="success" size="mini">官网</el-button>
+              <el-button type="default" size="mini">线上史馆</el-button>
+            </div>
           </div>
-          <div class="bottom-right" >
-              <div class="head">
-                  <div class="head-txt">阅读量排行</div>
-                  <div class="head-btn">
-                      <el-button :type="readingVolumeType === 'news'?'success':'default'" size="mini" @click="readingVolumeTypeSwitch('news')">新闻</el-button>
-                      <el-button :type="readingVolumeType === 'activity'?'success':'default'" size="mini" @click="readingVolumeTypeSwitch('activity')">活动</el-button>
-                  </div>
-              </div>
-            <div class="foot">
-                <div class="foot-txt">标题</div>
-                <div class="foot-btn">总阅读量</div>
+          <div class="mymain">66666666</div>
+        </div>
+        <div class="bottom-right">
+          <div class="head">
+            <div class="head-txt">阅读量排行</div>
+            <div class="head-btn">
+              <el-button
+                :type="readingVolumeType === 'news' ? 'success' : 'default'"
+                size="mini"
+                @click="readingVolumeTypeSwitch('news')"
+                >新闻</el-button
+              >
+              <el-button
+                :type="readingVolumeType === 'activity' ? 'success' : 'default'"
+                size="mini"
+                @click="readingVolumeTypeSwitch('activity')"
+                >活动</el-button
+              >
             </div>
-            <ul class="list">
-                <li class="list-con" v-for="(item,index) in readingVolumeRanking" :key="index">
-                    <div class="list-con-title">{{item.name}}</div>
-                    <div class="list-con-amount">{{item.visit}}</div>
-                </li>
-            </ul>
           </div>
+          <div class="foot">
+            <div class="foot-txt">标题</div>
+            <div class="foot-btn">总阅读量</div>
+          </div>
+          <ul class="list" v-if="readingVolumeRanking.length">
+            <li
+              class="list-con"
+              v-for="(item, index) in readingVolumeRanking"
+              :key="index"
+            >
+              <div class="list-con-title">{{ item.name }}</div>
+              <div class="list-con-amount">{{ item.visit }}</div>
+            </li>
+          </ul>
+                    <div class="empty" v-else>暂无数据</div>
+
+        </div>
       </div>
-      
     </div>
   </div>
 </template>
 
 <script>
 import MainTop from "@/components/main-top";
-import activityEdit from "@/pages/activity/activityEdit";
-import * as common from "@/util/commonfn.js";
+// import activityEdit from "@/pages/activity/activityEdit";
+// import * as common from "@/util/commonfn.js";
+import * as echarts from "echarts/core";
+import { GridComponent } from "echarts/components";
+import { LineChart } from "echarts/charts";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
 
 const crumbData = [
   {
@@ -91,6 +122,8 @@ export default {
   },
   data() {
     return {
+      // echarts图表发请求变量
+      val:'web',
       crumbData,
       tableData: [],
       params: {
@@ -100,18 +133,52 @@ export default {
         type: "",
       },
       total: 0,
-      trafficStatistics:[],
-      readingVolumeRanking:[],
-      readingVolumeType:"news"
+      trafficStatistics: [],
+      readingVolumeRanking: [],
+      readingVolumeType: "news",
     };
   },
   computed: {},
   watch: {},
   created() {
     this.getTrafficStatistics();
-    this.getReadingVolumeRanking('news')
+    this.getReadingVolumeRanking("news");
+  },
+ async mounted() {
+       // 时间趋势接口获取数据
+
+    let result = await this.$http({
+        method: "get",
+        url: `/manage/stats/trend/${this.val}`,
+      });
+    //-------------------echarts图表------------------------
+    var chartDom = document.querySelector(".mymain");
+    var myChart = echarts.init(chartDom);
+    var option;
+    option = {
+      xAxis: {
+        type: "category",
+        
+        data: result.data.map(v=>v.time),
+      },
+      yAxis: {
+        type: "value",
+        // scale: true,
+        // max: 400,
+        // min: 0,
+        // splitNumber: 5,
+        // boundaryGap: [0.2, 0.2],
+      },
+      series: [
+        {
+          data: result.data.map(v=>v.count),
+          type: "line",
+        },
+      ],
+    };
+    option && myChart.setOption(option);
+    // --------------------
   },
-  mounted() {},
 
   methods: {
     indexMethod(index) {
@@ -126,31 +193,30 @@ export default {
         method: "get",
         url: "/manage/stats/flow",
       });
-      console.log('result',result)
+      console.log("result", result);
       if (result.code !== 0) {
         return;
       }
-      this.trafficStatistics = result && result['data'] || []
-      console.log('this.trafficStatistics',this.trafficStatistics)
+      this.trafficStatistics = (result && result["data"]) || [];
+      console.log("this.trafficStatistics", this.trafficStatistics);
     },
-    async getReadingVolumeRanking(type="news") {
-    
+    async getReadingVolumeRanking(type = "news") {
       let result = await this.$http({
         method: "get",
         url: `/manage/stats/news/${type}`,
       });
-      console.log('result',result)
+      console.log("result", result);
       if (result.code !== 0) {
         return;
       }
-      this.readingVolumeRanking = result && result['data'] || []
-      console.log('this.readingVolumeRanking',this.readingVolumeRanking)
+      this.readingVolumeRanking = (result && result["data"]) || [];
+      console.log("this.readingVolumeRanking", this.readingVolumeRanking);
     },
-    readingVolumeTypeSwitch(type){
+    readingVolumeTypeSwitch(type) {
       this.readingVolumeType = type;
-      console.log('type',type)
-      this.getReadingVolumeRanking(type)
-    }
+      console.log("type", type);
+      this.getReadingVolumeRanking(type);
+    },
   },
 };
 </script>
@@ -178,46 +244,98 @@ export default {
   border-bottom: 0.0625rem #a5a5a5 solid;
 }
 .left {
-    float: left;
+  float: left;
 }
 .analysis {
-    padding:20px;height:10rem;
-    .analysis-con {
-        width:20%;heigth:auto;padding:0 5px;
-        .title{ text-align:right;padding:0 10px;font-size:18px; }
-        .content{ width:100%;height:100%;border-right:1px solid black;text-align:right;padding:0 10px; }
+  padding: 20px;
+  height: 10rem;
+  .analysis-con {
+    width: 20%;
+    heigth: auto;
+    padding: 0 5px;
+    .title {
+      text-align: right;
+      padding: 0 10px;
+      font-size: 18px;
+    }
+    .content {
+      width: 100%;
+      height: 100%;
+      border-right: 1px solid black;
+      text-align: right;
+      padding: 0 10px;
     }
+  }
 }
 .bottom {
-    display:flex;justify-content: space-between;
-    .bottom-left { 
-        line-height: 1.5;align-items: center;box-sizing: border-box;background: #fff;margin: 1rem 0;width:55%;height:29rem;padding:1.5rem;
-        .head {
-            display:flex;justify-content: space-between;
-            .head-txt{}
-            .head-btn{}
-
-        } 
+  display: flex;
+  justify-content: space-between;
+  .bottom-left {
+    line-height: 1.5;
+    align-items: center;
+    box-sizing: border-box;
+    background: #fff;
+    margin: 1rem 0;
+    width: 55%;
+    height: 29rem;
+    padding: 1.5rem;
+    .head {
+      display: flex;
+      justify-content: space-between;
+      .head-txt {
+      }
+      .head-btn {
+      }
+    }
+    .mymain {
+      width: 100%;
+      height: 100%;
     }
-    .bottom-right {
-        line-height: 1.5;align-items: center;box-sizing: border-box;background: #fff;margin: 1rem 0;width:43%;height:29rem;padding:1.5rem;
-        .head{
-            display:flex;justify-content: space-between;
-            .head-txt{}
-            .head-btn{}
-        }
-        .foot {
-            margin:2rem 0 1rem 0;display:flex;justify-content: space-between;border-bottom:1px solid #333;padding-bottom:0.5rem;
-            .foot-txt{}
-            .foot-btn{}
-        }
-        .list {
-            .list-con {
-                display:flex;justify-content: space-between;padding:0.4rem 0;font-size: 13px;
-            }
-        }
+  }
+  .bottom-right {
+    position: relative;
+    .empty {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+    }
+    line-height: 1.5;
+    align-items: center;
+    box-sizing: border-box;
+    background: #fff;
+    margin: 1rem 0;
+    width: 43%;
+    height: 29rem;
+    padding: 1.5rem;
+    .head {
+      display: flex;
+      justify-content: space-between;
+      .head-txt {
+      }
+      .head-btn {
+      }
+    }
+    .foot {
+      margin: 2rem 0 1rem 0;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #333;
+      padding-bottom: 0.5rem;
+      .foot-txt {
+      }
+      .foot-btn {
+      }
+    }
+    .list {
+      .list-con {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.4rem 0;
+        font-size: 13px;
+      }
     }
+  }
 }
- 
 </style>