Merge remote-tracking branch 'origin/master'
This commit is contained in:
lzh
Generated
+6
-6
@@ -11239,9 +11239,9 @@
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.5.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
|
||||
"integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
@@ -11296,9 +11296,9 @@
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,51 @@
|
||||
import Positive from '../views/positive/positive.vue'
|
||||
import Negative from '../views/negative/negative.vue'
|
||||
import WordCloud from "../views/wordCloud/wordCloud.vue"
|
||||
import Netease from "../views/netease/netease.vue"
|
||||
import CommentsType from "../views/commentsType/commentsType.vue"
|
||||
|
||||
const asideRoute = [
|
||||
{
|
||||
path: '/positive',
|
||||
name: 'Top积极词汇统计',
|
||||
meta: {
|
||||
title: 'positive',
|
||||
// icon: 'fa fa-paper-plane'
|
||||
},
|
||||
component: Positive,
|
||||
},{
|
||||
path: '/negative',
|
||||
name: 'Top消极词汇统计',
|
||||
component: Negative,
|
||||
meta: {
|
||||
title: 'negative',
|
||||
// icon: 'fa fa-paper-plane'
|
||||
},
|
||||
},{
|
||||
path: '/wordCloud',
|
||||
name: '词云图分析',
|
||||
component: WordCloud,
|
||||
meta: {
|
||||
title: 'wordCloud',
|
||||
// icon: 'fa fa-paper-plane'
|
||||
},
|
||||
},{
|
||||
path: '/commentsType',
|
||||
name: '评论类型占比',
|
||||
component: CommentsType,
|
||||
meta: {
|
||||
title: 'commentsType',
|
||||
// icon: 'fa fa-paper-plane'
|
||||
},
|
||||
},{
|
||||
path: '/netease',
|
||||
name: '网易严选',
|
||||
component: Netease,
|
||||
meta: {
|
||||
title: 'netease',
|
||||
// icon: 'fa fa-paper-plane'
|
||||
},
|
||||
}
|
||||
]
|
||||
|
||||
export default asideRoute
|
||||
@@ -1,6 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Login from '../views/login/Login.vue'
|
||||
import asideRoute from './asideRoute.js'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@@ -15,6 +16,15 @@ const routes = [
|
||||
name: 'Home',
|
||||
component: () => import('../views/home/Home.vue'),
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/about/About.vue'),
|
||||
children: asideRoute
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<el-container>
|
||||
<el-aside width="230px">
|
||||
<Aside />
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<BreadCrumb @search="search" :url.sync="newUrl"/>
|
||||
</el-header>
|
||||
<el-main class="main">{{url}}{{newUrl}}
|
||||
<AppMain/>
|
||||
</el-main>
|
||||
<!-- <el-footer>Footer</el-footer> -->
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Aside from "./components/aside.vue";
|
||||
import BreadCrumb from "./components/breadcrumb.vue";
|
||||
import AppMain from "./components/appmain.vue";
|
||||
import * as info from "../../api/info";
|
||||
export default {
|
||||
name: "about",
|
||||
components: { Aside, BreadCrumb, AppMain },
|
||||
props:{
|
||||
newUrl:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
url: this.newUrl,
|
||||
chartsData: [],
|
||||
positiveChartData: { xData: [], yData: [] },
|
||||
negativeChartData: { xData: [], yData: [] },
|
||||
pieChartData: [],
|
||||
frequencyChartData: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.username = localStorage.getItem("username");
|
||||
this.search();
|
||||
},
|
||||
methods: {
|
||||
search(value) {
|
||||
// let url = value == undefined ? this.url: value.url;
|
||||
this.url = value;
|
||||
let params = {
|
||||
username: this.username,
|
||||
url: this.url,
|
||||
};
|
||||
info.display(params).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.chartsData = res.data.data;
|
||||
let positiveChartData = res.data.data.positive;
|
||||
let negativeChartData = res.data.data.negative;
|
||||
let pieChartData = res.data.data.tags;
|
||||
let frequencyChartData = res.data.data.frequency;
|
||||
|
||||
this.positiveChartData["xData"] = Object.keys(positiveChartData);
|
||||
this.positiveChartData.xData.forEach((el) => {
|
||||
this.positiveChartData["yData"].push(
|
||||
Number(positiveChartData[el].toFixed(2))
|
||||
);
|
||||
});
|
||||
this.negativeChartData.xData = Object.keys(negativeChartData);
|
||||
this.negativeChartData.xData.forEach((el) => {
|
||||
this.negativeChartData.yData.push(
|
||||
-Number(negativeChartData[el].toFixed(2))
|
||||
);
|
||||
});
|
||||
let frequencyKeys = Object.keys(frequencyChartData);
|
||||
frequencyKeys.forEach((el) => {
|
||||
this.frequencyChartData.push({
|
||||
name: el,
|
||||
value: frequencyChartData[el],
|
||||
});
|
||||
});
|
||||
let keys = Object.keys(pieChartData);
|
||||
keys.splice(0, 1);
|
||||
keys.forEach((el) => {
|
||||
this.pieChartData.push({ name: el, value: pieChartData[el] });
|
||||
});
|
||||
|
||||
localStorage.setItem("positiveChartData", JSON.stringify(this.positiveChartData));
|
||||
localStorage.setItem("negativeChartData", JSON.stringify(this.negativeChartData));
|
||||
localStorage.setItem("frequencyChartData", JSON.stringify(this.frequencyChartData));
|
||||
localStorage.setItem("pieChartData", JSON.stringify(this.pieChartData));
|
||||
|
||||
localStorage.setItem("url", this.url);
|
||||
} else {
|
||||
this.$message.error("拉取错误！");
|
||||
}
|
||||
});
|
||||
// .catch((err) => {
|
||||
// // this.$Message.error(err + "!");
|
||||
// });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .el-container {
|
||||
height: 100%;
|
||||
}
|
||||
.about {
|
||||
height: 100%;
|
||||
}
|
||||
.el-header,
|
||||
.el-footer {
|
||||
background-color: #b3c0d1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
/* line-height: 80px; */
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #d3dce6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
/* line-height: 200px; */
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
position: fixed;
|
||||
left: 229px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.el-footer {
|
||||
position: fixed;
|
||||
left: 230px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #f0f2f5;
|
||||
color: #333;
|
||||
/* text-align: center;
|
||||
line-height: 160px; */
|
||||
padding: 90px 10px 10px 240px;
|
||||
min-height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="appmain">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
// props:{
|
||||
// url:{
|
||||
// type:String,
|
||||
// default:''
|
||||
// }
|
||||
// },
|
||||
// data(){
|
||||
// return{
|
||||
// theUrl:this.url
|
||||
// }
|
||||
// },
|
||||
// created(){
|
||||
// console.log(this.theUrl ,this.url);
|
||||
// this.theUrl = this.url;
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.appmain{
|
||||
/* margin: 20px; */
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
border-radius: 4px
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="aside">
|
||||
<el-menu
|
||||
:default-active="$route.path"
|
||||
class="el-menu-vertical"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
background-color="#202741"
|
||||
text-color="#e6e6e6"
|
||||
active-text-color="#ffd04b"
|
||||
:show-timeout="200"
|
||||
mode="vertical"
|
||||
router
|
||||
>
|
||||
<!-- <span class="aside-title">Fried Egg Managment </span> -->
|
||||
<div class="aside-title">
|
||||
<img class="aside-icon" src="../../../assets/images/pull.png" />
|
||||
<span class="title">爬虫数据可视化系统</span>
|
||||
</div>
|
||||
<template v-for="(item, index) in routes">
|
||||
<el-submenu v-if="item.children" :index="index + ''" :key="index + ''">
|
||||
<template slot="title">
|
||||
<!-- <i class="el-icon-location"></i> -->
|
||||
<span>{{ item.name }}</span>
|
||||
</template>
|
||||
<el-menu-item
|
||||
v-for="child in item.children"
|
||||
:index="child.path"
|
||||
:key="child.path"
|
||||
>
|
||||
<!-- <i class="el-icon-location"></i> -->
|
||||
<span>{{ child.name }}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item v-if="!item.children" :index="item.path" :key="item.path">
|
||||
<i :class="iconList[item.path]"></i>
|
||||
<span slot="title">{{ item.name }}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import asideRoute from "../../../router/asideRoute";
|
||||
export default {
|
||||
name: "asideConment",
|
||||
data() {
|
||||
return {
|
||||
routes: [],
|
||||
iconList:{
|
||||
'/positive':'el-icon-document-checked',
|
||||
'/negative':'el-icon-document-remove',
|
||||
'/wordCloud':'el-icon-cloudy',
|
||||
'/netease':'el-icon-connection',
|
||||
'/commentsType':'el-icon-edit-outline'
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.routes = JSON.parse(JSON.stringify(asideRoute));
|
||||
},
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.aside {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-menu-vertical {
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
.aside-title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.title{
|
||||
color: #fff;
|
||||
margin-left: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.aside-icon{
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<!-- <div class="breadcrumb"> -->
|
||||
<div class="header">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="formData.url"
|
||||
placeholder="请输入URL..."
|
||||
style="width: 500px"
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
@click="onSubmit"
|
||||
></el-button
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@click="resetSearch"
|
||||
icon="el-icon-refresh-right"
|
||||
></el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="user-info">
|
||||
<img class="header-icon" src="../../../assets/images/userIcon.png" />
|
||||
<div>
|
||||
<el-dropdown @command="handleCommand" placement="bottom">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }}admin<i class="el-icon-arrow-down el-icon--right" style="position:absolute;margin-right:20px"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="a">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<!-- {{ username }}admin -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "breadcrumb",
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
url: "http://you.163.com/item/detail?id=4028691",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$emit("search", this.formData.url);
|
||||
this.$emit("update:url", this.formData.url);
|
||||
},
|
||||
resetSearch() {
|
||||
this.formData.url = "";
|
||||
},
|
||||
handleCommand() {
|
||||
this.$router.push({ path: "/" });
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
::v-deep .el-dropdown{
|
||||
color:#fff
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
/* line-height: 80px; */
|
||||
background: #0f1423;
|
||||
background-color: #202741;
|
||||
position: fixed;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.header-title {
|
||||
margin-left: 50px;
|
||||
float: left;
|
||||
}
|
||||
.title {
|
||||
color: #fff;
|
||||
margin-left: 40px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.user-info {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: calc(100% - 350px);
|
||||
z-index:1999;
|
||||
top: 9px;
|
||||
}
|
||||
.user-info > div:last-child {
|
||||
margin-left: 40px;
|
||||
margin-top: 23px;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
}
|
||||
.header-icon {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div class="negative">
|
||||
<span>评论类型占比:</span>
|
||||
<div id="pieChart" class="chart-size"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "commentsType",
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
pieChart: null,
|
||||
pieChartData: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.pieChartData = JSON.parse(localStorage.getItem('pieChartData'));
|
||||
},
|
||||
mounted() {
|
||||
this.pieChart = this.$echarts.init(document.getElementById("pieChart"));
|
||||
//窗口大小变化时，实现自适应
|
||||
window.addEventListener("resize", () => {
|
||||
this.pieChart.resize();
|
||||
});
|
||||
this.drawChart()
|
||||
},
|
||||
methods: {
|
||||
drawChart(){
|
||||
let pieOption = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '0%'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '评论类型占比',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: this.pieChartData
|
||||
}
|
||||
]
|
||||
};
|
||||
this.pieChart.setOption(pieOption);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.negative{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.negative>span:first-child{
|
||||
margin: 20px 0 0 20px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
.chart-size{
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
@@ -36,17 +36,17 @@
|
||||
<div class="charts">
|
||||
<el-card class="box-card">
|
||||
<span>Top10积极词汇评分</span>
|
||||
<div id="positiveChart" style="width: 700px; height: 400px"></div>
|
||||
<div id="positiveChart" class="chart-size"></div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div id="pieChart" style="width: 700px; height: 400px"></div>
|
||||
<div id="pieChart" class="chart-size"></div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<span>Top10消极词汇评分</span>
|
||||
<div id="negativeChart" style="width: 700px; height: 400px"></div>
|
||||
<div id="negativeChart" class="chart-size"></div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div id="frequencyChart" style="width: 700px; height: 400px"></div>
|
||||
<div id="frequencyChart" class="chart-size"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,9 +57,8 @@ import * as info from "../../api/info";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: 1,
|
||||
formData: {
|
||||
url: "",
|
||||
url: "http://you.163.com/item/detail?id=4028691",
|
||||
},
|
||||
username: "",
|
||||
chartsData: [],
|
||||
@@ -93,6 +92,7 @@ export default {
|
||||
_this.frequencyChart.resize();
|
||||
});
|
||||
this.username = localStorage.getItem("username");
|
||||
this.onSubmit();
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
@@ -104,7 +104,6 @@ export default {
|
||||
.display(params)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res);
|
||||
this.chartsData = res.data.data;
|
||||
let positiveChartData = res.data.data.positive;
|
||||
let negativeChartData = res.data.data.negative;
|
||||
@@ -129,7 +128,6 @@ export default {
|
||||
this.pieChartData.push({name:el,value:pieChartData[el]})
|
||||
});
|
||||
|
||||
console.log(keys,this.pieChartData)
|
||||
this.drawChart();
|
||||
} else {
|
||||
this.$message.error("拉取错误！");
|
||||
@@ -249,6 +247,10 @@ export default {
|
||||
::v-deep .el-menu.el-menu--horizontal {
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-card__body{
|
||||
height: 100%;
|
||||
padding:30px;
|
||||
}
|
||||
.homePage {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -315,4 +317,8 @@ export default {
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
.chart-size{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -189,7 +189,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submitForm(formName) {
|
||||
// this.$router.push({ path: "/home" });
|
||||
// this.$router.push({ path: "/positive" });
|
||||
// console.log(formName);
|
||||
this.$refs[formName].validate((valid) => {
|
||||
let params = {
|
||||
@@ -201,10 +201,9 @@ export default {
|
||||
.login(params)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res);
|
||||
this.data = res.data.data;
|
||||
localStorage.setItem('username',this.formData.user)
|
||||
this.$router.push({ path: "/home" });
|
||||
this.$router.push({ path: "/positive" });
|
||||
} else {
|
||||
this.$message.error("用户名或密码错误！");
|
||||
}
|
||||
@@ -213,7 +212,6 @@ export default {
|
||||
this.$Message.error(err + "!");
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
@@ -236,7 +234,6 @@ export default {
|
||||
.regist(params)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200 && res.data.msg == 'success') {
|
||||
console.log(res);
|
||||
this.data = res.data.data;
|
||||
this.isRegist = false;
|
||||
setTimeout(()=>{
|
||||
@@ -250,7 +247,6 @@ export default {
|
||||
this.$Message.error(err + "!");
|
||||
});
|
||||
} else {
|
||||
console.log("error submit!!");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="negative">
|
||||
<span>Top{{ topSelected }}消极词汇评分:</span>
|
||||
<div id="negativeChart" class="chart-size"></div>
|
||||
<div class="select-top">
|
||||
<el-select v-model="topSelected" placeholder="请选择" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as info from "../../api/info";
|
||||
export default {
|
||||
name: "negative",
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
negativeChart: null,
|
||||
negativeChartData: [],
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: 5,
|
||||
label: "Top5",
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: "Top10",
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
label: "Top20",
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
label: "Top50",
|
||||
},
|
||||
],
|
||||
topSelected: "10",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.negativeChartData = JSON.parse(
|
||||
localStorage.getItem("negativeChartData")
|
||||
);
|
||||
},
|
||||
mounted() {
|
||||
this.negativeChart = this.$echarts.init(
|
||||
document.getElementById("negativeChart")
|
||||
);
|
||||
//窗口大小变化时，实现自适应
|
||||
window.addEventListener("resize", () => {
|
||||
this.negativeChart.resize();
|
||||
});
|
||||
this.drawChart();
|
||||
},
|
||||
methods: {
|
||||
onChange(val) {
|
||||
let params = {
|
||||
username: localStorage.getItem("username"),
|
||||
url: localStorage.getItem("url"),
|
||||
top: val,
|
||||
};
|
||||
info.display(params).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.negativeChartData["yData"] = [];
|
||||
let negativeChartData = res.data.data.negative;
|
||||
this.negativeChartData.xData = Object.keys(negativeChartData);
|
||||
this.negativeChartData.xData.forEach((el) => {
|
||||
this.negativeChartData.yData.push(
|
||||
-Number(negativeChartData[el].toFixed(2))
|
||||
);
|
||||
});
|
||||
localStorage.setItem(
|
||||
"negativeChartData",
|
||||
JSON.stringify(this.negativeChartData)
|
||||
);
|
||||
|
||||
this.drawChart();
|
||||
this.negativeChart.resize();
|
||||
}
|
||||
});
|
||||
},
|
||||
drawChart() {
|
||||
let negativeOption = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.negativeChartData.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.negativeChartData.yData,
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.negativeChart.setOption(negativeOption);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.negative {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
line-height: 100%;
|
||||
}
|
||||
.negative > span:first-child {
|
||||
margin: 20px 0 0 20px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
.chart-size {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
float: left;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.select-top {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
right: 50px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="netease">
|
||||
<iframe src="http://you.163.com/item/detail?id=4028691" id="mobsf" scrolling="no" frameborder="0" style=""></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:'netease',
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
/**
|
||||
* iframe-宽高自适应显示
|
||||
*/
|
||||
function changeMobsfIframe(){
|
||||
const mobsf = document.getElementById('mobsf');
|
||||
const deviceWidth = document.body.clientWidth;
|
||||
const deviceHeight = document.body.clientHeight;
|
||||
mobsf.style.width = (Number(deviceWidth)-120) + 'px'; //数字是页面布局宽度差值
|
||||
mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //数字是页面布局高度差
|
||||
}
|
||||
|
||||
changeMobsfIframe()
|
||||
|
||||
window.onresize = function(){
|
||||
changeMobsfIframe()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.netease{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="positive">
|
||||
<span>Top{{ topSelected }}积极词汇评分:</span>
|
||||
<div id="positiveChart" class="chart-size"></div>
|
||||
<div class="select-top">
|
||||
<el-select v-model="topSelected" placeholder="请选择" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as info from "../../api/info";
|
||||
export default {
|
||||
name: "positive",
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
positiveChart: null,
|
||||
positiveChartData: [],
|
||||
},
|
||||
options: [
|
||||
{
|
||||
value: 5,
|
||||
label: "Top5",
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: "Top10",
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
label: "Top20",
|
||||
},
|
||||
{
|
||||
value: 50,
|
||||
label: "Top50",
|
||||
},
|
||||
],
|
||||
topSelected: "10",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.positiveChartData = JSON.parse(
|
||||
localStorage.getItem("positiveChartData")
|
||||
);
|
||||
},
|
||||
mounted() {
|
||||
this.positiveChart = this.$echarts.init(
|
||||
document.getElementById("positiveChart")
|
||||
);
|
||||
//窗口大小变化时，实现自适应
|
||||
window.addEventListener("resize", () => {
|
||||
this.positiveChart.resize();
|
||||
});
|
||||
this.drawChart();
|
||||
},
|
||||
methods: {
|
||||
onChange(val) {
|
||||
let params = {
|
||||
username: localStorage.getItem("username"),
|
||||
url: localStorage.getItem("url"),
|
||||
top: val,
|
||||
};
|
||||
info.display(params).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.positiveChartData["yData"] = [];
|
||||
let positiveChartData = res.data.data.positive;
|
||||
this.positiveChartData["xData"] = Object.keys(positiveChartData);
|
||||
this.positiveChartData.xData.forEach((el) => {
|
||||
this.positiveChartData["yData"].push(
|
||||
Number(positiveChartData[el].toFixed(2))
|
||||
);
|
||||
});
|
||||
localStorage.setItem(
|
||||
"positiveChartData",
|
||||
JSON.stringify(this.positiveChartData)
|
||||
);
|
||||
|
||||
this.drawChart();
|
||||
this.positiveChart.resize();
|
||||
}
|
||||
});
|
||||
},
|
||||
drawChart() {
|
||||
let positiveOption = {
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.positiveChartData.xData,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.positiveChartData.yData,
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: "rgba(180, 180, 180, 0.2)",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.positiveChart.setOption(positiveOption);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.positive {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
line-height: 100%;
|
||||
}
|
||||
.positive > span:first-child {
|
||||
margin: 20px 0 0 20px;
|
||||
font-size: 24px;
|
||||
display: block;
|
||||
}
|
||||
.chart-size {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
float: left;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.select-top {
|
||||
width: 10%;
|
||||
position: absolute;
|
||||
line-height: 100%;
|
||||
right: 50px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="wordCloud">
|
||||
<div id="frequencyChart" class="chart-size"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "wordCloud",
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
frequencyChart: null,
|
||||
frequencyChartData: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.frequencyChartData = JSON.parse(
|
||||
localStorage.getItem("frequencyChartData")
|
||||
);
|
||||
},
|
||||
mounted() {
|
||||
this.frequencyChart = this.$echarts.init(
|
||||
document.getElementById("frequencyChart")
|
||||
);
|
||||
//窗口大小变化时，实现自适应
|
||||
window.addEventListener("resize", () => {
|
||||
this.frequencyChart.resize();
|
||||
});
|
||||
this.drawChart();
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
// let frequencyOption = {
|
||||
// series: [{
|
||||
// type: 'wordCloud',
|
||||
// sizeRange: [15, 80],
|
||||
// rotationRange: [0, 0],
|
||||
// rotationStep: 45,
|
||||
// gridSize: 8,
|
||||
// // shape: 'pentagon',
|
||||
// width: '100%',
|
||||
// height: '100%',
|
||||
// textStyle: {
|
||||
// color: function () {
|
||||
// return 'rgb(' + [
|
||||
// Math.round(Math.random() * 160),
|
||||
// Math.round(Math.random() * 160),
|
||||
// Math.round(Math.random() * 160)
|
||||
// ].join(',') + ')';
|
||||
// }
|
||||
// },
|
||||
// data: this.frequencyChartData
|
||||
// }]
|
||||
// };
|
||||
let frequencyOption = {
|
||||
backgroundColor: "#F7F7F7",
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {
|
||||
iconStyle: {
|
||||
normal: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "热点分析",
|
||||
type: "wordCloud",
|
||||
//size: ['9%', '99%'],
|
||||
// sizeRange: [6, 66],
|
||||
//textRotation: [0, 45, 90, -45],
|
||||
rotationRange: [-45, 90],
|
||||
sizeRange: [15, 80],
|
||||
// rotationRange: [0, 0],
|
||||
//shape: 'circle',
|
||||
textPadding: 0,
|
||||
autoSize: {
|
||||
enable: true,
|
||||
minSize: 6,
|
||||
},
|
||||
textStyle: {
|
||||
color: function () {
|
||||
return (
|
||||
"rgb(" +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
data: this.frequencyChartData,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.frequencyChart.setOption(frequencyOption);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.wordCloud {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.chart-size {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user