新闻统计
This commit is contained in:
yanran200730
191
project/oms/apps/AppNewsStatistics/AppNewsStatistics.vue
Normal file
191
project/oms/apps/AppNewsStatistics/AppNewsStatistics.vue
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="AppNewsStatistics">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="新闻统计" isShowBottomBorder isShowArea :hideLevel="user.info.areaList.length - 1" v-model="areaId" :instance="instance" @change="onChange()">
|
||||||
|
<template #rightBtn>
|
||||||
|
<el-radio-group style="margin: 0 12px;" v-model="search.dateRange" size="small" @change="search.date = []">
|
||||||
|
<el-radio-button label="0">今天</el-radio-button>
|
||||||
|
<el-radio-button label="1">本周</el-radio-button>
|
||||||
|
<el-radio-button label="2">本月</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
style="width: 240px"
|
||||||
|
v-model="search.date"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
@change="search.dateRange = ''"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
size="small">
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<div class="statistics-top">
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>发布文章总数</span>
|
||||||
|
<h2 style="color: #2266FF;">{{ info.total }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>浏览量总数</span>
|
||||||
|
<h2 style="color: #22AA99;">{{ info.today }}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="statistics-top__item">
|
||||||
|
<span>平均浏览量</span>
|
||||||
|
<h2 style="color: #F8B425">{{ info.unReport }}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<ai-card title="文章浏览排行">
|
||||||
|
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="地区浏览排行">
|
||||||
|
|
||||||
|
</ai-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
name: 'AppNewsStatistics',
|
||||||
|
label: '新闻统计',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
date: '',
|
||||||
|
today: '',
|
||||||
|
search: {
|
||||||
|
title: '',
|
||||||
|
areaId: '',
|
||||||
|
dateRange: '1',
|
||||||
|
date: []
|
||||||
|
},
|
||||||
|
info: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.areaId = this.user.info.areaId
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange () {
|
||||||
|
},
|
||||||
|
|
||||||
|
initPieChart (data) {
|
||||||
|
let chart = echarts.init(document.querySelector('.chart'))
|
||||||
|
const option = {
|
||||||
|
tooltip: {},
|
||||||
|
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
|
||||||
|
legend: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
data: Object.keys(data).map(v => {
|
||||||
|
return {
|
||||||
|
value: data[v],
|
||||||
|
name: v
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
label : {
|
||||||
|
normal : {
|
||||||
|
formatter: '{b}：{c}',
|
||||||
|
textStyle : {
|
||||||
|
fontWeight : 'normal',
|
||||||
|
fontSize : 15
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
chart.setOption(option)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppNewsStatistics {
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& > .ai-card {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .ai-list__content ){
|
||||||
|
padding: 0!important;
|
||||||
|
|
||||||
|
.ai-list__content--right-wrapper {
|
||||||
|
background: transparent!important;
|
||||||
|
box-shadow: none!important;
|
||||||
|
margin: 0!important;
|
||||||
|
padding: 12px 16px 12px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.statistics-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1;
|
||||||
|
height: 96px;
|
||||||
|
line-height: 1;
|
||||||
|
margin-right: 20px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: #888888;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 16px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 6px -2px rgba(15, 15, 21, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user