|
<template>
<div class="app-container">
<div class="box-container">
<div class="contain-title">内容数据统计</div>
</div>
<div class="content-container">
<div class="content-item" style="padding-top:0">
<div class="content-item-tit">内容浏览量统计</div>
<div class="line-chart-box">
<LineChart :chartData="chartData"></LineChart>
</div>
</div>
<div class="content-item">
<div class="content-item-tit">内容浏览量查询</div>
<div class="contain-search" style="margin-top:20px; width:95%">
<el-form :model="formFilter" class="demo-form" label-width="100px">
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="栏目分类：">
<el-select v-model="formFilter.catalog" placeholder="选择分类" clearable @change="catalogChanged">
<el-option :label="item.tit" :value="item.val" v-for="item in columnType" :key="item.index"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="标题：">
<el-input v-model="formFilter.title" placeholder="搜索标题"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="作者来源：">
<el-input v-model="formFilter.source" placeholder="搜索作者来源"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发布时间：">
<el-date-picker v-model="formFilter.dateRange" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
format="yyyy-MM-dd" value-format="yyyyMMdd" @change="changeRangerDate">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="排序方式：">
<el-select v-model="formFilter.orderBy" placeholder="选择排序方式" @change="sortChanged">
<el-option label="按创建时间由新到旧排序" value="1"></el-option>
<el-option label="按浏览量由高到底排序" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发布者：">
<el-select v-model="formFilter.creator" clearable filterable remote :remote-method="remoteOwnerName"
suffix-icon="el-icon-search" @change="ownerChanged" placeholder="搜索发布者">
<el-option v-for="item in nameOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label-width="30px" align="right">
<el-button type="primary" @click="filterSearch">查询</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<complex-table :tableData="tableData" :tableItem="tableItem" :total="total" :jump="'content'" v-on:current="current" :chartLine= true @showChart="showChart"></complex-table>
</div>
</div>
<el-dialog title="文章流量分析" :visible.sync="ChartItemDialogVisible" width="860px">
<LineChart :chartData="chartOneData"></LineChart>
</el-dialog>
</div>
</template>
<script>
import { pqFilterList, queryTotalView, queryCreator, queryOneView } from '@/api/statistics'
import { parseTime, contentType, columnType } from '@/utils/index'
import complexTable from '@/components/complexTable'
import ret from '@/utils/comTable'
import cacheModule from '@/utils/queryName'
import LineChart from './lineChart/LineChart'
import { dayListFn, chartModel } from './lineChart/chart'
export default {
data() {
return {
ChartItemDialogVisible: false,
columnType,
nameOptions: [],
formFilter: {
title: '',
catalog: '',
source: '',
creator: '',
dateRange: '',
orderBy: '1'
},
pageSize: 10,
pageNo: 1,
total: 0,
tableData: [],
tableLoading: true,
tableItem: [
{
tit: '图表',
chart: true,
width: 80
},
{
prop: 'title',
tit: '标题',
active: 'active'
},
{
prop: 'catalog',
tit: '栏目分类'
},
{
prop: 'creator',
tit: '发布人',
width: '160'
},
{
prop: 'modifyTime',
tit: '发布时间',
width: '160'
},
{
prop: 'sum',
tit: '浏览数量',
width: '160'
}
],
chartData: [],
chartOneData: [],
beginDate: dayListFn(true)
}
},
components: {
complexTable,
LineChart
},
created() {
this.publishList()
this.getContentTotal()
},
methods: {
getContentTotal() {
this.$http.get(queryTotalView, {
tn: 'article',
bt: this.beginDate
}, (res) => {
var obj = res.data
this.chartData = chartModel(obj)
})
// this.$http.get('/static/json.txt', {
// }, (res) => {
// var obj = res.data
// this.chartData = chartModel(obj)
// })
},
filterSearch() {
this.pageNo = 1
this.total = 0
this.tableData = []
this.publishList()
},
publishList() {
var that = this
const form = this.formFilter
let st = ''
let et = ''
if (form.dateRange) {
st = form.dateRange[0]
et = form.dateRange[1]
}
var obj = {
title: form.title,
catalog: form.catalog,
source: form.source,
creator: form.creator,
published: 1,
bt: st,
et: et,
orderBy: form.orderBy,
pageSize: this.pageSize,
pageNo: this.pageNo
}
this.$http.get(pqFilterList, obj, (response) => {
if (response.success && response.data) {
const res = response.data
const epData = res.data
let j = 0
for (let i = 0; i < epData.length; i++) {
epData[i].modifyTime = parseTime(epData[i].modifyTime).substr(0, 16)
epData[i].catalog = contentType[epData[i].catalog]
j++
cacheModule.Judge(epData[i].creator, info => {
j--
epData[i].creator = info.name
if (j === 0) {
this.total = res.total
if (epData.length === that.info.pageSize) {
this.tableData = epData
} else {
const array = epData
ret.gapFilling(array)
this.tableData = array
}
}
})
}
if (epData.length === 0) {
this.total = 0
this.tableData = []
}
} else {
this.total = 0
this.tableData = []
}
})
},
current(val) {
this.pageNo = val
this.publishList()
},
remoteOwnerName(query) {
var that = this
if (query !== '') {
that.selectLoading = true
that.$http.get(queryCreator, {
name: query,
size: 5
}, function(res) {
that.selectLoading = false
if (res.success && res.data) {
const obj = res.data
that.nameOptions = obj.map(item => {
return { value: item.id, label: item.name }
})
} else {
that.nameOptions = []
}
})
} else {
that.compOptions = []
}
},
changeRangerDate(val) {
this.formFilter.dateRange = val
},
ownerChanged(val) {
this.formFilter.creator = val
},
catalogChanged(val) {
this.formFilter.catalog = val
},
sortChanged(val) {
this.formFilter.orderBy = val
},
showChart(val) {
this.chartOneData = []
this.$http.get(queryOneView, {
tn: 'article',
id: val,
bt: this.beginDate
}, (res) => {
if (res.success) {
this.chartOneData = chartModel(res.data)
this.ChartItemDialogVisible = true
}
})
}
}
}
</script>
<style>
.content-item{
padding: 10px;
}
.content-item + .content-item {
border-top: 1px solid #ccc;
}
.content-item-tit{
line-height: 30px;
}
</style>
|
