From a3479d41b80287fa1d3b7062b6cdfdde3d4f0be1 Mon Sep 17 00:00:00 2001 From: Zhang HaoYang <1304907854@qq.com> Date: Sun, 24 Dec 2023 22:28:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=B0=E4=BB=A3=E6=B8=85=E6=B2=A1=E5=A4=B4?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/detail/NavDetail.vue | 632 +++++++++++++++------------- src/components/home/HomePage.vue | 1 + 2 files changed, 342 insertions(+), 291 deletions(-) diff --git a/src/components/detail/NavDetail.vue b/src/components/detail/NavDetail.vue index f690fc0..d2bf874 100644 --- a/src/components/detail/NavDetail.vue +++ b/src/components/detail/NavDetail.vue @@ -1,135 +1,141 @@ @@ -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:[], - //返回数据：浏览量 - PageView:[], - //Echart图 - ManuChart:null, - // Echart图设置项： - MyOption:{}, - // 获取urlId: - UrlId :null, - // 获取标签对象： - UrlObj:Object, - // 创建时间： - UnDate:null, - Cdate:null, - }}, + //返回数据：时间列表 + TimeList: [], + //返回数据：浏览量 + PageView: [], + //Echart图 + ManuChart: null, + // 获取urlId: + UrlId: null, + // 获取标签对象： + UrlObj: Object, + // 创建时间： + UnDate: null, + Cdate: null, + // 时间趋势对象： + viewByTime: null, + // 处理后的时间对象： + // 横轴时间： + xTime: [], + // y轴阅读量： + YView: [], + imageCode: null, + } + }, mounted() { - this.initPage(); - this.GetNav(this.UrlId); - this.initEchart(); - this.getCategories(); + this.initPage(); + 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,140 +214,183 @@ export default { }); }) }, - - // 时间转换： - getFormatDate() { - var that = this; - console.log(this.UnDate + "传入时间戳"); - var date = new Date(this.UnDate);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000 - var Y = date.getFullYear() + '年'; - var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'; - var D = date.getDate() + '日 '; - // var h = date.getHours() + ':'; - // var m = date.getMinutes() + ':'; - // var s = date.getSeconds(); - that.Cdate = "" + Y + M + D ; - }, - - - // 初始化页面 - initPage(){ - this.UrlId = this.$route.query.uid; - - }, - // 初始化Echart图 - initEchart(){ - var that = this; - this.ManuChart = this.$echarts.init(this.$refs.ManuEchart); - that.MyOption={ - tooltip: { - trigger: 'item', - axisPointer: { - type: 'shadow' - }, - backgroundColor: '#fff', // 悬浮框背景色 - borderColor: '#000', // 悬浮框边框颜色 - borderWidth: 1, // 悬浮框边框宽度 - textStyle: { // 悬浮框文字样式 - color: '#000', - fontSize: 12 - } - }, - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - axisLine:{ - show: true, - lineStyle: { - color: '#76aaff', - width: 2, - type: "solid" - } - } - }, - yAxis: { - type: 'value', - splitLine:{ - lineStyle:{ - color:'#76aaff', - } - }, - axisLine:{ - show: true, - lineStyle: { - color: '#76aaff', - width: 2, - type: "solid" - } - }, - axisLabel: {//y轴文字的配置 - textStyle: { - color: '#76aaff', - margin: 15 - }, - // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号 - } - }, - series: [ - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'line', - label: {//文字的显示 - show: true, //默认 显示文字 - } - }, - { - data: [150, 230, 224, 218, 135, 147, 260], - type: 'bar' - }, - ], - dataZoom: { - yAxisIndex: [0], - type:'inside', - start: 0, - end: 100, - zoomLock:true, - } + // 获取二维码： + 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 } - that.ManuChart.setOption(that.MyOption,true); - }, - // 获取标签对象 - GetNav(id){ - let that = this; - axios({ - method: 'post', - url: '/api/UrlAndCate/clickUrl', - params: { - urlId : id - } - }).then((res)=>{ - that.UrlObj = res.data.data; - that.UnDate = that.UrlObj.createtime; - }).catch((error)=>{ - Vue.prototype.$notify.error({ - title: '错误', - message: error===null?'':error, - offset: 0 - }); + }).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 }); - this.getFormatDate(); + }) + return this.imageCode + }, + // 跳转： + ToURL() { + var that = this; + window.open(that.UrlObj.url, '_blank') + }, + // 时间转换： + getFormatDate() { + var that = this; + console.log(this.UnDate + "传入时间戳"); + var date = new Date(this.UnDate);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000 + var Y = date.getFullYear() + '年'; + var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'; + var D = date.getDate() + '日 '; + // var h = date.getHours() + ':'; + // var m = date.getMinutes() + ':'; + // var s = date.getSeconds(); + that.Cdate = "" + Y + M + D; + }, + + + // 初始化页面 + initPage() { + this.UrlId = this.$route.query.uid; + this.GetNav(this.UrlId); + + // this.initEchart(); + }, + // 初始化Echart图 + 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, // 悬浮框边框宽度 + textStyle: { // 悬浮框文字样式 + color: '#000', + fontSize: 12 + } + }, + xAxis: { + type: 'category', + data: xline, + axisLine: { + show: true, + lineStyle: { + color: '#76aaff', + width: 2, + type: "solid" + } + } + }, + yAxis: { + type: 'value', + splitLine: { + lineStyle: { + color: '#76aaff', + } + }, + axisLine: { + show: true, + lineStyle: { + color: '#76aaff', + width: 2, + type: "solid" + } + }, + axisLabel: {//y轴文字的配置 + textStyle: { + color: '#76aaff', + margin: 15 + }, + // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号 + } + }, + series: [ + { + data: yline, + type: 'line', + label: {//文字的显示 + show: true, //默认 显示文字 + } + }, + { + data: yline, + type: 'bar' + }, + ], + dataZoom: { + yAxisIndex: [0], + type: 'inside', + start: 0, + end: 100, + zoomLock: true, + } + } + myChart.setOption(MyOption, true); + }, + // 获取标签对象 + GetNav(id) { + let that = this; + axios({ + method: 'post', + url: '/api/UrlAndCate/clickUrl', + params: { + urlId: id + } + }).then((res) => { + that.UrlObj = res.data.data; + that.UnDate = that.UrlObj.createtime; + }).catch((error) => { + Vue.prototype.$notify.error({ + title: '错误', + 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); } } } @@ -343,30 +398,26 @@ export default {