|
@@ -1,18 +1,18 @@
|
|
|
<template>
|
|
|
<div class="dashboard-editor-container">
|
|
|
<!--超级管理员-->
|
|
|
- <div v-if="userType==10000">
|
|
|
+ <div v-if="userType == 10000">
|
|
|
<!--网站,内容,公共栏目数量 start------------------------------------------>
|
|
|
<el-row :gutter="32">
|
|
|
<el-col :xs="24" :sm="24" :lg="8">
|
|
|
<div class="topWindowBox">
|
|
|
<div class="twbTitle">
|
|
|
<div class="twbIconbgRed">
|
|
|
- <img src="@/assets/index/twbIconbgBlue.png"/>
|
|
|
+ <img src="@/assets/index/twbIconbgBlue.png" />
|
|
|
</div>
|
|
|
网站数量
|
|
|
</div>
|
|
|
- <div class="twbNumber">{{topData.website.count}}</div>
|
|
|
+ <div class="twbNumber">{{ topData.website.count }}</div>
|
|
|
<!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -20,11 +20,11 @@
|
|
|
<div class="topWindowBox">
|
|
|
<div class="twbTitle">
|
|
|
<div class="twbIconbgBlue">
|
|
|
- <img src="@/assets/index/twbIconbgRed.png"/>
|
|
|
+ <img src="@/assets/index/twbIconbgRed.png" />
|
|
|
</div>
|
|
|
文章发布数量
|
|
|
</div>
|
|
|
- <div class="twbNumber">{{topData.article.count}}</div>
|
|
|
+ <div class="twbNumber">{{ topData.article.count }}</div>
|
|
|
<!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -32,11 +32,11 @@
|
|
|
<div class="topWindowBox">
|
|
|
<div class="twbTitle">
|
|
|
<div class="twbIconbgPurple">
|
|
|
- <img src="@/assets/index/twbIconbgPurple.png"/>
|
|
|
+ <img src="@/assets/index/twbIconbgPurple.png" />
|
|
|
</div>
|
|
|
公共栏目数量
|
|
|
</div>
|
|
|
- <div class="twbNumber">{{topData.category.count}}</div>
|
|
|
+ <div class="twbNumber">{{ topData.category.count }}</div>
|
|
|
<!-- <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div> -->
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -48,7 +48,7 @@
|
|
|
<div class="chartBox">
|
|
|
<div class="chartTitle">平台文章增长数量</div>
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;">
|
|
|
- <line-chart :chart-data="chartData.lineChartData"/>
|
|
|
+ <line-chart :chart-data="chartData.lineChartData" />
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -56,7 +56,7 @@
|
|
|
<div class="chartBox">
|
|
|
<div class="chartTitle">用户类型</div>
|
|
|
<div class="chart-wrapper">
|
|
|
- <ring-chart :chart-data="chartData.ringChartData"/>
|
|
|
+ <ring-chart :chart-data="chartData.ringChartData" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -64,25 +64,51 @@
|
|
|
<!--chart end------------------------------------------>
|
|
|
</div>
|
|
|
<!--调研员-->
|
|
|
- <div v-if="userType==4">
|
|
|
+ <div v-if="userType == 4">
|
|
|
<el-row :gutter="32">
|
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
|
<div class="chartBox">
|
|
|
<div class="chartTitle">投诉举报增长数量</div>
|
|
|
<el-row style="background:#fff;padding:16px 16px 0;">
|
|
|
- <line-chart :chart-data="chartData.lineChartData"/>
|
|
|
+ <line-chart :chart-data="chartData.lineChartData" />
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<!--个人会员-->
|
|
|
- <div v-if="userType==1">
|
|
|
+ <div v-if="userType == 1">
|
|
|
<el-row :gutter="32">
|
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
|
- <div class="noData">
|
|
|
+ <!-- <div class="noData">
|
|
|
欢迎使用恒星管理平台
|
|
|
+ </div> -->
|
|
|
+ <!-- 已审核文章 -->
|
|
|
+ <div class="chartBox">
|
|
|
+ <div class="chartTitle">已审核文章</div>
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <!-- 展示文章列表 -->
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table :data="type_id1.article" style="width: 100%" @click="handleClick">
|
|
|
+ <el-table-column prop="title" label="标题" width="">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="created_at" label="创建时间" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="updated_at" label="创建时间" width="180">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="status" label="状态" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '已审核' :
|
|
|
+ '未审核' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
@@ -118,31 +144,36 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- userType:0,//用户身份
|
|
|
- topData:{
|
|
|
- website:{//网站
|
|
|
- count:0,//总数
|
|
|
- growth_rate:0//增长数
|
|
|
+ userType: 0,//用户身份
|
|
|
+ topData: {
|
|
|
+ website: {//网站
|
|
|
+ count: 0,//总数
|
|
|
+ growth_rate: 0//增长数
|
|
|
},
|
|
|
- article:{//文章
|
|
|
- count:0,//总数
|
|
|
- growth_rate:0//增长数
|
|
|
+ article: {//文章
|
|
|
+ count: 0,//总数
|
|
|
+ growth_rate: 0//增长数
|
|
|
},
|
|
|
- category:{//栏目
|
|
|
- count:0,//总数
|
|
|
- growth_rate:0//增长数
|
|
|
+ category: {//栏目
|
|
|
+ count: 0,//总数
|
|
|
+ growth_rate: 0//增长数
|
|
|
}
|
|
|
},
|
|
|
- chartData:{
|
|
|
- lineChartData:[],//折线图数据
|
|
|
- ringChartData:[]//圆环图数据
|
|
|
- }
|
|
|
+ chartData: {
|
|
|
+ lineChartData: [],//折线图数据
|
|
|
+ ringChartData: []//圆环图数据
|
|
|
+ },
|
|
|
+ type_id1: [],
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleClick(row) {
|
|
|
+ this.$router.push({ path: '/articleList/' + row.id })
|
|
|
+ },
|
|
|
+ // 获取首页数据
|
|
|
//获取用户身份信息
|
|
|
- getUserInfo(fun){
|
|
|
- this.$store.dispatch('public/getInfo').then(res=> {
|
|
|
+ getUserInfo(fun) {
|
|
|
+ this.$store.dispatch('public/getInfo').then(res => {
|
|
|
console.log(res)
|
|
|
this.userType = res.data.type_id;
|
|
|
//if(res.data.type_id==10000){}//管理员
|
|
@@ -156,13 +187,16 @@ export default {
|
|
|
})
|
|
|
fun();
|
|
|
},
|
|
|
- getData(){
|
|
|
+ getData() {
|
|
|
//获取首页数据
|
|
|
- this.$store.dispatch('public/getAdminIndex').then(res=> {
|
|
|
+ this.$store.dispatch('public/getAdminIndex').then(res => {
|
|
|
//如果是调研员就不显示其他的
|
|
|
- if(this.userType==4){
|
|
|
+ if (this.userType == 4) {
|
|
|
this.chartData.lineChartData = res.data.letterOfComplaintList;
|
|
|
- }else{
|
|
|
+ } else if (this.userType == 1) {
|
|
|
+ //个人会员
|
|
|
+ this.type_id1 = res.data;
|
|
|
+ } else {
|
|
|
this.topData.article.count = res.data.article.count;
|
|
|
this.topData.category.count = res.data.category.count;
|
|
|
this.topData.website.count = res.data.website.count;
|
|
@@ -172,7 +206,7 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
},
|
|
|
- mounted(){
|
|
|
+ mounted() {
|
|
|
//先获取用户身份
|
|
|
this.getUserInfo(this.getData)
|
|
|
//再获取数据
|
|
@@ -182,107 +216,121 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @title: #212227;
|
|
|
- @bgColor: #FFFFFF;
|
|
|
- .topWindowBox{
|
|
|
- background:@bgColor;
|
|
|
- border-Radius:20px;
|
|
|
- height:160px;
|
|
|
- width:100%;
|
|
|
- margin-bottom:30px;
|
|
|
- padding:25px;
|
|
|
- box-sizing: border-box;
|
|
|
- .twbTitle {
|
|
|
- display:flex;
|
|
|
- align-items: center;
|
|
|
- font-size:16px;
|
|
|
- color:@title;
|
|
|
- .twbIconbgRed,.twbIconbgBlue,.twbIconbgPurple{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
- // .twbIconbgRed {
|
|
|
- // background: #EA79BA;
|
|
|
- // }
|
|
|
- // .twbIconbgBlue {
|
|
|
- // background: #6DACE7;
|
|
|
- // }
|
|
|
- // .twbIconbgPurple{
|
|
|
- // background: #AA7AEB;
|
|
|
- // }
|
|
|
- }
|
|
|
- .twbNumber {
|
|
|
- font-size: 30px;
|
|
|
- margin-top:32px;
|
|
|
- font-weight: 1000;
|
|
|
- }
|
|
|
- .twbStatus,.twbStatusDown {
|
|
|
- font-size:14px;
|
|
|
- margin-top: 35px;
|
|
|
- display:flex;
|
|
|
- img {
|
|
|
- display: block;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- span {
|
|
|
- color:#707B81;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
+@title: #212227;
|
|
|
+@bgColor: #FFFFFF;
|
|
|
+
|
|
|
+.topWindowBox {
|
|
|
+ background: @bgColor;
|
|
|
+ border-Radius: 20px;
|
|
|
+ height: 160px;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding: 25px;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .twbTitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: @title;
|
|
|
+
|
|
|
+ .twbIconbgRed,
|
|
|
+ .twbIconbgBlue,
|
|
|
+ .twbIconbgPurple {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 15px;
|
|
|
}
|
|
|
- .twbStatus {
|
|
|
- color:#23C581;
|
|
|
+
|
|
|
+ // .twbIconbgRed {
|
|
|
+ // background: #EA79BA;
|
|
|
+ // }
|
|
|
+ // .twbIconbgBlue {
|
|
|
+ // background: #6DACE7;
|
|
|
+ // }
|
|
|
+ // .twbIconbgPurple{
|
|
|
+ // background: #AA7AEB;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .twbNumber {
|
|
|
+ font-size: 30px;
|
|
|
+ margin-top: 32px;
|
|
|
+ font-weight: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .twbStatus,
|
|
|
+ .twbStatusDown {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 35px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
- .twbStatusDown {
|
|
|
- color:#E74545
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #707B81;
|
|
|
+ margin-left: 8px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .chartBox {
|
|
|
- width: 100%;
|
|
|
- height: 440px;
|
|
|
- border-radius: 20px;
|
|
|
- overflow: hidden;
|
|
|
- background-color: @bgColor;
|
|
|
- .chartTitle {
|
|
|
- color: @title;
|
|
|
- padding: 30px 30px 0 30px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+ .twbStatus {
|
|
|
+ color: #23C581;
|
|
|
}
|
|
|
|
|
|
- .noData {
|
|
|
- color: #CCCCCC;
|
|
|
- font-size: 32px;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- height: 740px;
|
|
|
- line-height: 740px;
|
|
|
+ .twbStatusDown {
|
|
|
+ color: #E74545
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .dashboard-editor-container {
|
|
|
- padding: 32px;
|
|
|
- background-color: rgb(240, 242, 245);
|
|
|
- position: relative;
|
|
|
+.chartBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 440px;
|
|
|
+ border-radius: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: @bgColor;
|
|
|
|
|
|
- .github-corner {
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- border: 0;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
+ .chartTitle {
|
|
|
+ color: @title;
|
|
|
+ padding: 30px 30px 0 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .chart-wrapper {
|
|
|
- background: #fff;
|
|
|
- padding: 16px 16px 0;
|
|
|
- margin-bottom: 32px;
|
|
|
- }
|
|
|
+.noData {
|
|
|
+ color: #CCCCCC;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ height: 740px;
|
|
|
+ line-height: 740px;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-editor-container {
|
|
|
+ padding: 32px;
|
|
|
+ background-color: rgb(240, 242, 245);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .github-corner {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ border: 0;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
|
|
|
- @media (max-width:1024px) {
|
|
|
- .chart-wrapper {
|
|
|
- padding: 8px;
|
|
|
- }
|
|
|
+ .chart-wrapper {
|
|
|
+ background: #fff;
|
|
|
+ padding: 16px 16px 0;
|
|
|
+ margin-bottom: 32px;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width:1024px) {
|
|
|
+ .chart-wrapper {
|
|
|
+ padding: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|