兰代清没头发

src/components/detail/NavDetail.vue

@@ -3,21 +3,25 @@
     <LeftSide :category="category"></LeftSide>
     <div class="DefinedPage">
       <div class="LeftPart" style="overflow: auto">
-      <div class="JustBack" style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
+        <div class="JustBack"
+             style="width:670px;display:flex; flex-direction: row; flex-wrap: nowrap;height:430px !important;">
           <div id="ShowPic" style="display: flex;flex-direction: column;flex-wrap: wrap">
-          <div class="card" style="width: 180px;height:180px;margin-top:50px;background-color: var( --theme-bg-color)" >
+            <div class="card" style="width: 180px;height:180px;margin-top:50px;background-color: var( --theme-bg-color)"
+                 @click="ToURL()">
               <img :src="UrlObj.icon">
             </div>
-          <div id="IconGroup" style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
+            <div id="IconGroup"
+                 style="margin-top:60px;display: flex;flex-direction: row;flex-wrap: nowrap;margin-left:-20px">
               <div class="little-Triangle" style=" margin-left:15px;">
                 <el-tooltip placement="bottom" width="150"
                             trigger="hover"
                             effect="dark" close-delay="2000">
                   <div class="MyPopover" slot="content">
-                  <span style="font-size:12px !important;">【91视频网站】完整URL</span><br/><br/>
+                    <span style="font-size:12px !important;">【{{ UrlObj.name }}】完整URL</span><br/><br/>
                     <div style="width:100% ;text-align: center">{{ UrlObj.url }}</div>
                   </div>
-                <i class="el-icon-link" id="little-Circle-content" style="font-weight:550;padding:5px;font-size:15px!important;margin-top:5px">完整URL</i>
+                  <i class="el-icon-link" id="little-Circle-content"
+                     style="font-weight:550;padding:5px;font-size:15px!important;margin-top:5px">完整URL</i>
                 </el-tooltip>
               </div>
               <div class="little-Triangle" style=" margin-left:15px;">
@@ -25,10 +29,12 @@
                             trigger="hover"
                             effect="dark" close-delay="2000">
                   <div class="MyPopover" slot="content">
-                  <span style="font-size:12px !important;">【91视频网站】手机二维码</span><br/><br/>
+                    <span style="font-size:12px !important;">【{{ UrlObj.name }}】手机二维码</span><br/><br/>
-                  <div style="width:100% ;text-align: center"><img style="width:150px" src="../../assets/img/beauty.jpg" /></div>
+                    <div style="width:100% ;text-align: center"><img style="width:150px"
+                                                                     :src="getQR(UrlId,UrlObj.icon)"></div>
                   </div>
-                <i class="el-icon-picture" id="little-Circle-content" style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
+                  <i class="el-icon-picture" id="little-Circle-content"
+                     style="font-weight:550; padding:5px;font-size:15px!important;margin-top:5px">手机查看</i>
                 </el-tooltip>
               </div>
             </div>
@@ -102,7 +108,7 @@
               <div class="TitleFont"><i class="el-icon-s-marketing"></i>热度趋势</div>
             </div>
             <div class="ArticleContent">
-            <div ref="ManuEchart" style="width:550px;height:300px;"></div>
+              <div id="ManuEchart" style="width:550px;height:300px;"></div>
             </div>
           </div>
         </div>
@@ -142,6 +148,7 @@ import Vue from "vue";
 import * as echarts from 'echarts'
 import axios from "axios";
 import LeftSide from "@/components/home/LeftSide.vue";
+
 Vue.prototype.$echarts = echarts;
 export default {
   name: "NavDetail",
@@ -157,8 +164,6 @@ export default {
       PageView: [],
       //Echart图
       ManuChart: null,
-    // Echart图设置项：
-      MyOption:{},
       // 获取urlId:
       UrlId: null,
       //   获取标签对象：
@@ -166,34 +171,41 @@ export default {
       //   创建时间：
       UnDate: null,
       Cdate: null,
-    }},
+      //   时间趋势对象：
+      viewByTime: null,
+      // 处理后的时间对象：
+      //   横轴时间：
+      xTime: [],
+      //   y轴阅读量：
+      YView: [],
+      imageCode: null,
+    }
+  },
   mounted() {
     this.initPage();
-      this.GetNav(this.UrlId);
+    this.getQR(this.UrlId, this.UrlObj.icon);
-      this.initEchart();
-      this.getCategories();
 
   },
   created() {
 
   },
-  computed: {
+  computed: {},
-
-  },
   methods: {
-    getCategories() {
+    // 日访问：
+    ViewByTime(id) {
       let _this = this;
-      axios({
+      axios.get('/api/getUrlAccess', {
-        method: 'post',
+        params: {
-        url: '/api/UrlAndCate/disposeBookmarkExhibitedToJson',
+          urlId: id
-      }).then(function (res) {
-        // console.log(res);
-        if (res.data.data) {
-          _this.category = res.data.data;
-        } else {
-          return false;
         }
-
+      }).then(function (res) {
+        _this.viewByTime = res.data;
+        // console.log(_this.viewByTime)
+        Object.keys(_this.viewByTime).forEach(key => {
+          _this.xTime.push(_this.viewByTime[key].time);
+          _this.YView.push(_this.viewByTime[key].views);
+        })
+        _this.initEchart(_this.xTime,_this.YView);
       }).catch((error) => {
         Vue.prototype.$notify.error({
           title: '错误',
@@ -202,7 +214,36 @@ export default {
         });
       })
     },
+    // 获取二维码：
+    getQR(url_id, icon_url) {
+      let _this = this;
+      axios({
+        method: 'post',
+        url: '/api/qrcode/qrc_return',
+        data: {
+          url_id: url_id,
+          icon_url: icon_url
+        }
+      }).then(function (res) {
+        if (res.data) {
+          _this.imageCode = "data:image/jpg;base64," + res.data;
+        }
 
+        return false;
+      }).catch((error) => {
+        Vue.prototype.$notify.error({
+          title: '错误',
+          message: error === null ? '' : error,
+          offset: 0
+        });
+      })
+      return this.imageCode
+    },
+    // 跳转：
+    ToURL() {
+      var that = this;
+      window.open(that.UrlObj.url, '_blank')
+    },
     // 时间转换：
     getFormatDate() {
       var that = this;
@@ -221,18 +262,35 @@ export default {
     // 初始化页面
     initPage() {
       this.UrlId = this.$route.query.uid;
+      this.GetNav(this.UrlId);
 
+      // this.initEchart();
     },
     //   初始化Echart图
-      initEchart(){
+    initEchart(xline,yline) {
-        var that = this;
+      // var that = this;
-        this.ManuChart = this.$echarts.init(this.$refs.ManuEchart);
+      var myChart = this.$echarts.init(
-        that.MyOption={
+          document.getElementById('ManuEchart')
+      );
+      var MyOption = {
         tooltip: {
           trigger: 'item',
           axisPointer: {
             type: 'shadow'
           },
+          dataZoom: [{
+            type: 'slider', // 设置为滑动条型式
+            show: true, // 显示dataZoom组件
+            start: 0, // 默认显示的起始位置为0
+            end: 30, // 默认显示的结束位置为100
+            handleSize: 8, // 滑动条的手柄大小
+            handleStyle: {
+              color: '#DCE2E8' // 滑动条的手柄颜色
+            },
+            xAxisIndex: [0], // 表示控制第一个x轴
+            filterMode: 'filter' // 设置为filter模式，即数据超过范围时会被过滤掉
+          }]
+          ,
           backgroundColor: '#fff', // 悬浮框背景色
           borderColor: '#000', // 悬浮框边框颜色
           borderWidth: 1, // 悬浮框边框宽度
@@ -243,7 +301,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: xline,
           axisLine: {
             show: true,
             lineStyle: {
@@ -278,14 +336,14 @@ export default {
         },
         series: [
           {
-              data: [150, 230, 224, 218, 135, 147, 260],
+            data: yline,
             type: 'line',
             label: {//文字的显示
               show: true, //默认  显示文字
             }
           },
           {
-              data: [150, 230, 224, 218, 135, 147, 260],
+            data: yline,
             type: 'bar'
           },
         ],
@@ -297,7 +355,7 @@ export default {
           zoomLock: true,
         }
       }
-        that.ManuChart.setOption(that.MyOption,true);
+      myChart.setOption(MyOption, true);
     },
     // 获取标签对象
     GetNav(id) {
@@ -322,10 +380,7 @@ export default {
     },
     //   向管理员反馈
     WarnToAdmin() {
-      console.log(this.UrlId);
+      console.log(this.xTime);
-      console.log(this.UrlObj);
-      console.log(this.UrlObj.createtime + typeof (this.UrlObj.createtime));
-      console.log(this.Cdate);
     }
   }
 
@@ -351,6 +406,7 @@ export default {
   font-size: 18px;
   color: var(--theme-color);
 }
+
 /**趋势图**/
 .LookNumEchart {
   width: 80%;
@@ -362,11 +418,6 @@ export default {
 }
 
 
-
-
-
-
-
 @property --rotate {
   syntax: "<angle>";
   initial-value: 132deg;
@@ -413,6 +464,7 @@ body {
   color: rgb(88 199 250 / 100%);
   transition: color 1s;
 }
+
 .card:hover:before, .card:hover:after {
   animation: none;
   opacity: 0;
@@ -425,8 +477,7 @@ body {
   height: 108%;
   border-radius: 8px;
   background-image: linear-gradient(
-      var(--rotate)
+      var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
-      , #5ddcff, #3c67e3 43%, #4e00c2);
   position: absolute;
   z-index: -1;
   //top: -1%;
@@ -447,8 +498,7 @@ body {
   transform: scale(0.8);
   filter: blur(calc(var(--card-height) / 6));
   background-image: linear-gradient(
-      var(--rotate)
+      var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
-      , #5ddcff, #3c67e3 43%, #4e00c2);
   opacity: 1;
   transition: opacity .5s;
   animation: spin 2.5s linear infinite;

src/components/home/HomePage.vue

@@ -98,6 +98,7 @@ export default {
       }).then(function (res) {
         if (res.data) {
           _this.navList = res.data;
+          console.log(res.data);
         }
       }).catch((error) => {
         Vue.prototype.$notify.error({