|
|
@@ -122,7 +122,7 @@
|
|
|
<h3>期刊数据</h3>
|
|
|
<el-date-picker
|
|
|
size="mini"
|
|
|
- v-model="form.daterange"
|
|
|
+ v-model="params.timerange"
|
|
|
type="daterange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
@@ -131,35 +131,43 @@
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<el-row>
|
|
|
- <el-col :span="3" class="countItem">
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
<div class="countCircle red">总阅读量</div>
|
|
|
- <h4>99999</h4>
|
|
|
+ <h4>{{form1.read_num}}</h4>
|
|
|
</el-col>
|
|
|
- <el-col :span="3" class="countItem">
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
<div class="countCircle hui">公众号阅读量</div>
|
|
|
- <h4>99999</h4>
|
|
|
+ <h4>{{form1.read_num_mp}}</h4>
|
|
|
</el-col>
|
|
|
- <el-col :span="3" class="countItem">
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
<div class="countCircle blue">小程序阅读量</div>
|
|
|
- <h4>99999</h4> </el-col
|
|
|
- ><el-col :span="3" class="countItem">
|
|
|
+ <h4>{{form1.read_num_xcx}}</h4> </el-col
|
|
|
+ ><el-col :span="4" class="countItem">
|
|
|
<div class="countCircle yellow">转发量</div>
|
|
|
- <h4>99999</h4>
|
|
|
+ <h4>{{form1.zhuanfa_num}}</h4>
|
|
|
</el-col>
|
|
|
- <el-col :span="3" class="countItem">
|
|
|
- <div class="countCircle zi">点赞数</div>
|
|
|
- <h4>99999</h4>
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
+ <div class="countCircle zi">公众号转发量</div>
|
|
|
+ <h4>{{form1.zhuanfa_num_mp}}</h4>
|
|
|
</el-col>
|
|
|
- <el-col :span="3" class="countItem">
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
+ <div class="countCircle zi">小程序转发量</div>
|
|
|
+ <h4>{{form1.zhuanfa_num_xcx}}</h4>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
<div class="countCircle llv">平均阅读量</div>
|
|
|
- <h4>99999</h4>
|
|
|
+ <h4>{{form1.rd}}</h4>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
+ <div class="countCircle llv">平均转发量</div>
|
|
|
+ <h4>{{form1.zd}}</h4>
|
|
|
</el-col>
|
|
|
- <el-col :span="3" class="countItem">
|
|
|
+ <el-col :span="4" class="countItem">
|
|
|
<div class="countCircle green">CASCI</div>
|
|
|
- <h4>99999</h4> </el-col
|
|
|
- ><el-col :span="3" class="countItem">
|
|
|
+ <h4>{{form1.casci}}</h4> </el-col
|
|
|
+ ><el-col :span="4" class="countItem">
|
|
|
<div class="countCircle hlv">排名</div>
|
|
|
- <h4>99999</h4>
|
|
|
+ <h4>{{form1.rank}}</h4>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -172,11 +180,12 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="总阅读数" name="1"></el-tab-pane>
|
|
|
- <el-tab-pane label="公众号阅读量" name="2"></el-tab-pane>
|
|
|
- <el-tab-pane label="小程序阅读量" name="3"></el-tab-pane>
|
|
|
- <el-tab-pane label="转发数" name="4"></el-tab-pane>
|
|
|
- <el-tab-pane label="点赞数" name="5"></el-tab-pane>
|
|
|
+ <el-tab-pane label="总阅读数" name="read_num"></el-tab-pane>
|
|
|
+ <el-tab-pane label="公众号阅读量" name="read_num_mp"></el-tab-pane>
|
|
|
+ <el-tab-pane label="小程序阅读量" name="read_num_xcx"></el-tab-pane>
|
|
|
+ <el-tab-pane label="转发数" name="zhuanfa_num"></el-tab-pane>
|
|
|
+ <el-tab-pane label="公众号转发数" name="zhuanfa_num_mp"></el-tab-pane>
|
|
|
+ <el-tab-pane label="小程序转发数" name="zhuanfa_num_xcx"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div
|
|
|
class="chart1"
|
|
|
@@ -185,9 +194,9 @@
|
|
|
></div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-tabs v-model="activeName1" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="总排名" name="first"></el-tab-pane>
|
|
|
- <el-tab-pane label="CASCI" name="second"></el-tab-pane>
|
|
|
+ <el-tabs v-model="activeName1" @tab-click="handleClick1">
|
|
|
+ <el-tab-pane label="总排名" name="rank"></el-tab-pane>
|
|
|
+ <el-tab-pane label="CASCI" name="casci"></el-tab-pane>
|
|
|
</el-tabs>
|
|
|
<div
|
|
|
class="chart2"
|
|
|
@@ -206,13 +215,7 @@
|
|
|
<div class="content">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="总阅读数" name="1"></el-tab-pane>
|
|
|
- <el-tab-pane label="公众号阅读量" name="2"></el-tab-pane>
|
|
|
- <el-tab-pane label="小程序阅读量" name="3"></el-tab-pane>
|
|
|
- <el-tab-pane label="转发数" name="4"></el-tab-pane>
|
|
|
- <el-tab-pane label="点赞数" name="5"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <h4>24小时发布习惯</h4>
|
|
|
<div
|
|
|
class="chart3"
|
|
|
ref="chart3"
|
|
|
@@ -220,10 +223,7 @@
|
|
|
></div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <el-tabs v-model="activeName1" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="总排名" name="first"></el-tab-pane>
|
|
|
- <el-tab-pane label="CASCI" name="second"></el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <h4>工作日发布习惯</h4>
|
|
|
<div
|
|
|
class="chart4"
|
|
|
ref="chart4"
|
|
|
@@ -241,31 +241,41 @@
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
<el-table
|
|
|
- :data="nealyTop30Data"
|
|
|
+ :data="days30Publish"
|
|
|
style="width: 100%">
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
+ prop="article_name"
|
|
|
label="名称"
|
|
|
width="width">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
- label="来源"
|
|
|
+ prop="read_num"
|
|
|
+ label="阅读量"
|
|
|
width="width">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
- label="阅读量"
|
|
|
+ prop="read_num_mp"
|
|
|
+ label="公众号阅读量"
|
|
|
width="width">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
+ prop="read_num_xcx"
|
|
|
+ label="小程序阅读量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="zhuanfa_num"
|
|
|
label="转发量"
|
|
|
width="width">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
- label="点赞数"
|
|
|
+ prop="zhuanfa_num_mp"
|
|
|
+ label="公众号转发量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="zhuanfa_num_xcx"
|
|
|
+ label="小程序转发量"
|
|
|
width="width">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
@@ -273,26 +283,112 @@
|
|
|
label="操作"
|
|
|
width="width">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="primary" @click="preview(scope.row)"></el-button>
|
|
|
+ <el-button size="mini" type="primary" @click="getDays30PublishArticle(scope.row)">查看</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 文章/时间统计量 -->
|
|
|
+ <el-dialog
|
|
|
+ class="fu-dialog"
|
|
|
+ :title="dialogTitle" width="80%"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ :visible.sync="dialogVisible1"
|
|
|
+ >
|
|
|
+ <el-table
|
|
|
+ :data="days30PublishArticle"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ prop="article_name"
|
|
|
+ label="名称"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="read_num"
|
|
|
+ label="阅读量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="read_num_mp"
|
|
|
+ label="公众号阅读量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="read_num_xcx"
|
|
|
+ label="小程序阅读量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="zhuanfa_num"
|
|
|
+ label="转发量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="zhuanfa_num_mp"
|
|
|
+ label="公众号转发量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="zhuanfa_num_xcx"
|
|
|
+ label="小程序转发量"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="date"
|
|
|
+ label="日期"
|
|
|
+ width="width">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-dialog>
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {},
|
|
|
- activeName: "",
|
|
|
- activeName1: "",
|
|
|
- nealyTop30Data:[]
|
|
|
+ form:{},
|
|
|
+ form1:{},
|
|
|
+ params: {
|
|
|
+ timerange: [
|
|
|
+ new Date(new Date()-1000*60*60*24).toLocaleDateString().split("/").join("-"),
|
|
|
+ new Date(new Date()-1000*60*60*24).toLocaleDateString().split("/").join("-"),
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ activeName: "read_num",
|
|
|
+ activeName1: "rank",
|
|
|
+ activeName2: "read_num",
|
|
|
+ activeName3: "read_num",
|
|
|
+ nealyTop30Data:[],
|
|
|
+ days7range:[],
|
|
|
+ days7data:[],
|
|
|
+ days7rank:[],
|
|
|
+ days7casci:[],
|
|
|
+ days30range:[],
|
|
|
+ days30data:[],
|
|
|
+ hours24:[],
|
|
|
+ hours24_data:[],
|
|
|
+ weeks:[],
|
|
|
+ weeks_data:[],
|
|
|
+ days30Publish:[],
|
|
|
+ days30PublishArticle:[],
|
|
|
+ dialogTitle:"",
|
|
|
+ dialogVisible1:false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- handleClick() {},
|
|
|
+ handleClick() {
|
|
|
+ this.getDays7Analyse(this.activeName)
|
|
|
+ },
|
|
|
+ handleClick1() {
|
|
|
+ this.getDays7Analyse(this.activeName1)
|
|
|
+ },
|
|
|
+ handleClick2() {
|
|
|
+ this.getDays7Analyse(this.activeName2)
|
|
|
+ },
|
|
|
+ handleClick3() {
|
|
|
+ this.getDays7Analyse(this.activeName3)
|
|
|
+ },
|
|
|
preview(){},
|
|
|
getData() {
|
|
|
this.loading = true;
|
|
|
@@ -307,19 +403,74 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ getCASCIDetail(){
|
|
|
+ var parm = {...this.params};
|
|
|
+ parm.timerange = parm.timerange.join(",")
|
|
|
+ parm.journal_id = this.$route.query.id;
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.getCASCIDetail(parm).then((res) => {
|
|
|
+ this.form1 = res.data.data;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDays7Analyse(name){
|
|
|
+ var parm = {...this.params};
|
|
|
+ parm.journal_id = this.$route.query.id;
|
|
|
+ parm.name = name;
|
|
|
+ this.loading = true;
|
|
|
+ this.$api.getDays7Analyse(parm).then((res) => {
|
|
|
+ this.days7range = res.data.data.daysrange
|
|
|
+ if(["rank","casci"].indexOf(name)!=-1){
|
|
|
+ this.days7rank = res.data.data.values;
|
|
|
+ }else{
|
|
|
+ this.days7data = res.data.data.values;
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ this.initCharts();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDays30Habit(){
|
|
|
+ var parm = {...this.params};
|
|
|
+ parm.journal_id = this.$route.query.id;
|
|
|
+ this.$api.getDays30Habit(parm).then((res)=>{
|
|
|
+ this.hours24 = res.data.data.hours24;
|
|
|
+ this.hours24_data = res.data.data.hours24_data;
|
|
|
+ this.weeks = res.data.data.weeks;
|
|
|
+ this.weeks_data = res.data.data.weeks_data;
|
|
|
+ console.log(this.we)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDays30Publish(){
|
|
|
+ var parm = {...this.params};
|
|
|
+ parm.journal_id = this.$route.query.id;
|
|
|
+ this.$api.getDays30Publish(parm).then((res)=>{
|
|
|
+ console.log(res)
|
|
|
+ this.days30Publish = res.data.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDays30PublishArticle(row){
|
|
|
+ var parm = {...this.params};
|
|
|
+ parm.journal_id = this.$route.query.id;
|
|
|
+ parm.article_name = row.article_name
|
|
|
+ this.$api.getDays30PublishArticle(parm).then((res)=>{
|
|
|
+ this.days30PublishArticle = res.data.data;
|
|
|
+ this.dialogTitle = row.article_name;
|
|
|
+ this.dialogVisible1 = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
// 初始化图表
|
|
|
initCharts() {
|
|
|
let option1 = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ data: this.days7range,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ data: this.days7data,
|
|
|
type: "line",
|
|
|
},
|
|
|
],
|
|
|
@@ -328,14 +479,14 @@ export default {
|
|
|
let option2 = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ data: this.days7range,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ data: this.days7rank,
|
|
|
type: "line",
|
|
|
},
|
|
|
],
|
|
|
@@ -344,14 +495,14 @@ export default {
|
|
|
let option3 = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ data: this.hours24,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- data: [150, 230, 224, 218, 135, 147, 260],
|
|
|
+ data: this.hours24_data,
|
|
|
type: "line",
|
|
|
},
|
|
|
],
|
|
|
@@ -360,14 +511,14 @@ export default {
|
|
|
let option4 = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ data: this.weeks,
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- data: [120, 200, 150, 80, 70, 110, 130],
|
|
|
+ data: this.weeks_data,
|
|
|
type: "bar",
|
|
|
},
|
|
|
],
|
|
|
@@ -385,9 +536,13 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.getData();
|
|
|
+ this.getCASCIDetail();
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initCharts();
|
|
|
+ this.getDays7Analyse("read_num");
|
|
|
+ this.getDays7Analyse("rank");
|
|
|
+ this.getDays30Habit();
|
|
|
+ this.getDays30Publish();
|
|
|
},
|
|
|
};
|
|
|
</script>
|