|
<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:70%">
<el-form :model="formFilter" class="demo-form" label-width="100px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="机构名称：">
<el-input v-model="formFilter.name" placeholder="搜索机构名称"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="机构类型：">
<el-input v-model="formFilter.orgType" placeholder="搜索机构类型"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<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="yyyy-MM-dd" @change="changeRangerDate">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<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="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="tableDataEnd" :tableItem="tableItem" :total="total" :jump="'org'" v-on:current="current" :chartLine= true @showChart="showChart"
v-loading="tableLoding"></complex-table>
</div>
</div>
<el-dialog title="机构流量分析" :visible.sync="ChartItemDialogVisible" width="860px">
<LineChart :chartData="chartOneData"></LineChart>
</el-dialog>
</div>
</template>
<script>
import { pqOrgFilterList, queryTotalView, queryOneView } from '@/api/statistics'
import { parseTime } from '@/utils/index'
import complexTable from '@/components/complexTable'
import crossDomin from '@/utils/CrossDomain'
import LineChart from './lineChart/LineChart'
import { dayListFn, chartModel } from './lineChart/chart'
import { doneFilter } from './ObjFilters'
export default {
data() {
return {
ChartItemDialogVisible: false,
formFilter: {
name: '',
orgType: '',
dateRange: '',
orderBy: '1'
},
pageSize: 10,
pageNo: 1,
total: 0,
tableData: [],
tableDataEnd: [],
filterTableDataEnd: [],
flag: false,
tableLoding: true,
tableItem: [
{
tit: '图表',
chart: true,
width: 80
},
{
prop: 'name',
tit: '机构名称',
active: 'active'
},
{
prop: 'orgType',
tit: '机构类型'
},
{
prop: 'phone',
tit: '联系电话',
width: '160'
},
{
prop: 'email',
tit: '联系邮箱',
width: '160'
},
{
prop: 'assTime',
tit: '入驻时间',
width: '160'
},
{
prop: 'sum',
tit: '浏览数量'
}
],
chartData: [],
chartOneData: [],
beginDate: dayListFn(true)
}
},
components: {
complexTable,
LineChart
},
created() {
this.queryInfoList()
this.getInfoTotal()
},
methods: {
getInfoTotal() {
this.$http.get(queryTotalView, {
tn: 'organization',
bt: this.beginDate
}, (res) => {
var obj = res.data
this.chartData = chartModel(obj)
})
},
filterSearch() {
this.tableLoding = true
const form = this.formFilter
let st = new Date('1970-01-01')
let et = new Date().getTime()
if (form.dateRange) {
st = new Date(form.dateRange[0]).getTime()
et = new Date(form.dateRange[1]).getTime()
}
// 筛选条件
var Conditions = {
strs: [
{
type: 'name',
val: form.name
},
{
type: 'orgType',
val: form.orgType
}
],
ranges: [
{
type: 'assTime',
min: st,
max: et
}
]
}
this.tableDataEnd = []
this.filterTableDataEnd = []
this.filterTableDataEnd = doneFilter(this.tableData, Conditions)
this.pageNo = 1
this.total = this.filterTableDataEnd.length
this.currentChangePage(this.filterTableDataEnd)
this.flag = true
this.tableLoding = false
},
sortChanged(val) {
this.formFilter.orderBy = val
},
sortTableOperate(val) {
if (val.length > 0) {
val.sort((a, b) => {
if (this.formFilter.orderBy === '1') {
return new Date(b.assTime).getTime() - new Date(a.assTime).getTime()
} else if (this.formFilter.orderBy === '2') {
return b.sum - a.sum
}
})
}
return val
},
queryInfoList() {
this.$http.get(pqOrgFilterList, {}, (response) => {
if (response.success && response.data) {
const epData = response.data
let j = 0
for (let i = 0; i < epData.length; i++) {
epData[i].assTime = parseTime(epData[i].assTime).substr(0, 10)
j++
crossDomin.getAgencyInfo(epData[i].id, data => {
j--
Object.assign(epData[i], data)
if (j === 0) {
this.tableData = epData
this.total = epData.length
if (this.total > this.pageSize) {
for (let i = 0; i < this.pageSize; i++) {
this.tableDataEnd.push(epData[i])
}
} else {
this.tableDataEnd = epData
}
this.tableLoding = false
this.tableDataEnd = this.sortTableOperate(this.tableDataEnd)
}
})
}
if (epData.length === 0) {
this.dataList = []
this.tableData = []
this.total = 0
}
} else {
this.$sort.total = 0
this.tableData = []
}
})
},
current(val) {
this.pageNo = val
if (!this.flag) {
this.currentChangePage(this.tableDataEnd)
} else {
this.currentChangePage(this.filterTableDataEnd)
}
},
currentChangePage(list) {
let from = (this.pageNo - 1) * this.pageSize
const to = this.pageNo * this.pageSize
this.tableDataEnd = []
for (; from < to; from++) {
if (list[from]) {
this.tableDataEnd.push(list[from])
}
}
this.tableDataEnd = this.sortTableOperate(this.tableDataEnd)
},
changeRangerDate(val) {
this.formFilter.dateRange = val
},
showChart(val) {
this.chartOneData = []
this.$http.get(queryOneView, {
tn: 'organization',
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>
|
