兰代清没头发

src/components/detail/NavDetail.vue

@@ -1,23 +1,27 @@
 <template>
   <div class="wrapper">
     <LeftSide :category="category"></LeftSide>
-  <div class="DefinedPage" >
+    <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/>
-                  <div style="width:100% ;text-align: center">{{UrlObj.url}}</div>
+                    <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,18 +29,20 @@
                             trigger="hover"
                             effect="dark" close-delay="2000">
                   <div class="MyPopover" slot="content">
-                  <span style="font-size:12px !important;">【91视频网站】手机二维码</span><br/><br/>
-                  <div style="width:100% ;text-align: center"><img style="width:150px" src="../../assets/img/beauty.jpg" /></div>
+                    <span style="font-size:12px !important;">【{{ UrlObj.name }}】手机二维码</span><br/><br/>
+                    <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>
           </div>
           <div class="NavInfo" style="margin-top:45px;margin-left:50px;width:220px;">
-          <span style="font-size:30px;font-family: STHupo">{{UrlObj.name}}</span><br/>
-          <div class="NavInfo" >
-            <span style="width:200px">创建时间：{{Cdate}}</span><br/>
+            <span style="font-size:30px;font-family: STHupo">{{ UrlObj.name }}</span><br/>
+            <div class="NavInfo">
+              <span style="width:200px">创建时间：{{ Cdate }}</span><br/>
               <span style="width:200px">创建用户：{{}}</span><br/>
               <span style="width:200px">所属标签：｛小视频｝</span><br/>
               <div style="display: flex;flex-direction: row">
@@ -46,7 +52,7 @@
                               effect="dark" close-delay="2000">
                     <div class="MyPopover" slot="content">
                       <span style="font-size:12px !important;">【91视频网站】总浏览量</span><br/><br/>
-                    <div style="width:100% ;text-align: center">{{UrlObj.views}}  次</div>
+                      <div style="width:100% ;text-align: center">{{ UrlObj.views }} 次</div>
                     </div>
                     <i class="el-icon-s-custom" id="little-Circle-content" style=" padding:5px;"></i>
                   </el-tooltip>
@@ -70,7 +76,7 @@
                   <el-tooltip placement="top" width="150"
                               trigger="hover"
                               effect="dark" close-delay="2000">
-                  <div class="MyPopover" slot="content" >
+                    <div class="MyPopover" slot="content">
                       <span style="font-size:12px !important;">向管理员反馈问题</span><br/><br/>
                     </div>
                     <i class="el-icon-warning" id="little-Circle-content" style=" padding:5px; "></i>
@@ -89,7 +95,7 @@
               <div class="TitleFont"><i class="el-icon-s-promotion"></i>网站介绍</div>
             </div>
             <div class="ArticleContent">
-                 {{UrlObj.desc}}
+              {{ UrlObj.desc }}
             </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,58 +148,64 @@ 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",
+  name: "NavDetail",
   // eslint-disable-next-line vue/no-unused-components
-  components: {LeftSide, HotRecomment,NewRecomment,RandomRecomment,UserComment},
+  components: {LeftSide, HotRecomment, NewRecomment, RandomRecomment, UserComment},
   data() {
     return {
-      category:[],
+      category: [],
       visible: false,
       //返回数据：时间列表
-      TimeList:[],
+      TimeList: [],
       //返回数据：浏览量
-      PageView:[],
+      PageView: [],
       //Echart图
-      ManuChart:null,
-    // Echart图设置项：
-      MyOption:{},
+      ManuChart: null,
       // 获取urlId:
-      UrlId :null,
+      UrlId: null,
       //   获取标签对象：
-      UrlObj:Object,
+      UrlObj: Object,
       //   创建时间：
-      UnDate:null,
-      Cdate:null,
-    }},
+      UnDate: null,
+      Cdate: null,
+      //   时间趋势对象：
+      viewByTime: null,
+      // 处理后的时间对象：
+      //   横轴时间：
+      xTime: [],
+      //   y轴阅读量：
+      YView: [],
+      imageCode: null,
+    }
+  },
   mounted() {
     this.initPage();
-      this.GetNav(this.UrlId);
-      this.initEchart();
-      this.getCategories();
+    this.getQR(this.UrlId, this.UrlObj.icon);
 
   },
   created() {
 
   },
-  computed: {
-
-  },
+  computed: {},
   methods: {
-    getCategories() {
+    // 日访问：
+    ViewByTime(id) {
       let _this = this;
-      axios({
-        method: 'post',
-        url: '/api/UrlAndCate/disposeBookmarkExhibitedToJson',
-      }).then(function (res) {
-        // console.log(res);
-        if (res.data.data) {
-          _this.category = res.data.data;
-        } else {
-          return false;
+      axios.get('/api/getUrlAccess', {
+        params: {
+          urlId: id
         }
-
+      }).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;
@@ -214,25 +255,42 @@ export default {
       // var h = date.getHours() + ':';
       // var m = date.getMinutes() + ':';
       // var s = date.getSeconds();
-        that.Cdate = "" + Y + M + D ;
+      that.Cdate = "" + Y + M + D;
     },
 
 
     // 初始化页面
-      initPage(){
+    initPage() {
       this.UrlId = this.$route.query.uid;
+      this.GetNav(this.UrlId);
 
+      // this.initEchart();
     },
     //   初始化Echart图
-      initEchart(){
-        var that = this;
-        this.ManuChart = this.$echarts.init(this.$refs.ManuEchart);
-        that.MyOption={
+    initEchart(xline,yline) {
+      // var that = this;
+      var myChart = this.$echarts.init(
+          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,8 +301,8 @@ export default {
         },
         xAxis: {
           type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisLine:{
+          data: xline,
+          axisLine: {
             show: true,
             lineStyle: {
               color: '#76aaff',
@@ -255,12 +313,12 @@ export default {
         },
         yAxis: {
           type: 'value',
-            splitLine:{
-              lineStyle:{
-                color:'#76aaff',
+          splitLine: {
+            lineStyle: {
+              color: '#76aaff',
             }
           },
-            axisLine:{
+          axisLine: {
             show: true,
             lineStyle: {
               color: '#76aaff',
@@ -278,64 +336,61 @@ 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'
           },
         ],
         dataZoom: {
           yAxisIndex: [0],
-            type:'inside',
+          type: 'inside',
           start: 0,
           end: 100,
-            zoomLock:true,
+          zoomLock: true,
         }
       }
-        that.ManuChart.setOption(that.MyOption,true);
+      myChart.setOption(MyOption, true);
     },
     // 获取标签对象
-      GetNav(id){
+    GetNav(id) {
       let that = this;
       axios({
         method: 'post',
         url: '/api/UrlAndCate/clickUrl',
         params: {
-            urlId : id
+          urlId: id
         }
-        }).then((res)=>{
+      }).then((res) => {
         that.UrlObj = res.data.data;
         that.UnDate = that.UrlObj.createtime;
-        }).catch((error)=>{
+      }).catch((error) => {
         Vue.prototype.$notify.error({
           title: '错误',
-            message: error===null?'':error,
+          message: error === null ? '' : error,
           offset: 0
         });
       });
       this.getFormatDate();
     },
     //   向管理员反馈
-    WarnToAdmin(){
-      console.log(this.UrlId);
-      console.log(this.UrlObj);
-      console.log(this.UrlObj.createtime + typeof (this.UrlObj.createtime));
-      console.log(this.Cdate);
+    WarnToAdmin() {
+      console.log(this.xTime);
     }
   }
 
 }
 </script>
 <style lang="css">
-.DefinedPage{
-  display:flex;
+.DefinedPage {
+  display: flex;
   flex-direction: row;
-  width:100%;
+  width: 100%;
   overflow: auto;
 }
 </style>
@@ -343,30 +398,26 @@ export default {
 
 <style scoped>
 /**标签详情**/
-.ArticleContent{
-  width:80%;
-  margin-left:50px;
-  margin-top:15px;
-  font-weight:550;
-  font-size:18px;
+.ArticleContent {
+  width: 80%;
+  margin-left: 50px;
+  margin-top: 15px;
+  font-weight: 550;
+  font-size: 18px;
   color: var(--theme-color);
 }
+
 /**趋势图**/
-.LookNumEchart{
-  width:80%;
-  margin-left:60px;
-  margin-top:15px;
-  font-weight:550;
-  font-size:18px;
+.LookNumEchart {
+  width: 80%;
+  margin-left: 60px;
+  margin-top: 15px;
+  font-weight: 550;
+  font-size: 18px;
   color: var(--theme-color);
 }
 
 
-
-
-
-
-
 @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)
-      , #5ddcff, #3c67e3 43%, #4e00c2);
+      var(--rotate), #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)
-      , #5ddcff, #3c67e3 43%, #4e00c2);
+      var(--rotate), #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({