兰代清没头发
This commit is contained in:
parent
1d23a9eaf0
commit
a3479d41b8
@ -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/>
|
||||
<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>
|
||||
@ -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.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;
|
||||
@ -221,18 +262,35 @@ export default {
|
||||
// 初始化页面
|
||||
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,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.UrlObj);
|
||||
console.log(this.UrlObj.createtime + typeof (this.UrlObj.createtime));
|
||||
console.log(this.Cdate);
|
||||
console.log(this.xTime);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
, #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;
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user