779 lines
20 KiB
Vue
779 lines
20 KiB
Vue
<template>
|
||
<ai-list class="AppActiveAnalysis">
|
||
<template slot="title">
|
||
<ai-title title="日活分析" isShowBottomBorder>
|
||
<template #rightBtn>
|
||
<ai-import
|
||
:instance="instance"
|
||
:dict="dict"
|
||
type="wxuseruselog"
|
||
name="成员日活记录"
|
||
@success="getData">
|
||
<el-button icon="iconfont iconImport" size="small">导入</el-button>
|
||
</ai-import>
|
||
</template>
|
||
</ai-title>
|
||
</template>
|
||
<template #left>
|
||
<div class="addressBook-left">
|
||
<div class="addressBook-left__title">
|
||
<h2 class="tab-active">组织架构</h2>
|
||
</div>
|
||
<div class="addressBook-left__list--title">
|
||
<el-input
|
||
size="mini"
|
||
placeholder="请输入部门名称"
|
||
v-model="unitName"
|
||
clearable
|
||
suffix-icon="iconfont iconSearch">
|
||
</el-input>
|
||
</div>
|
||
<div class="addressBook-left__list--wrapper">
|
||
<div class="addressBook-left__list">
|
||
<el-tree
|
||
:filter-node-method="filterNode"
|
||
ref="tree"
|
||
:props="defaultProps"
|
||
node-key="id"
|
||
:expand-on-click-node="false"
|
||
:data="unitList"
|
||
highlight-current
|
||
:current-node-key="departmentId"
|
||
:default-expanded-keys="defaultExpanded"
|
||
:default-checked-keys="defaultChecked"
|
||
@current-change="onTreeChange">
|
||
</el-tree>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<template slot="content">
|
||
<ai-card title="当天数据统计">
|
||
<template #right>
|
||
<el-date-picker
|
||
v-model="today"
|
||
value-format="yyyy-MM-dd"
|
||
:clearable="false"
|
||
type="date"
|
||
size="small"
|
||
placeholder="请选择开始日期"
|
||
@change="getDtInfo">
|
||
</el-date-picker>
|
||
<el-button type="text" @click="getActiveList(), isShowList = true">查看明细</el-button>
|
||
</template>
|
||
<template #content>
|
||
<div class="chart1" style="width: 100%; height: 300px"></div>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="趋势数据统计">
|
||
<template #content>
|
||
<div class="chart2" style="width: 100%; height: 400px"></div>
|
||
</template>
|
||
</ai-card>
|
||
<ai-card title="活跃统计">
|
||
<template #right>
|
||
<div class="right-search">
|
||
<div>
|
||
<span>数据统计日期范围：</span>
|
||
<el-input-number v-model="x" size="small" @change="getActiveAnalysStatistics" :min="1" label="请输入"></el-input-number>
|
||
</div>
|
||
<div>
|
||
<span>活跃状态天数指标：</span>
|
||
<el-input-number v-model="y" size="small" @change="getActiveAnalysStatistics" :min="1" label="请输入"></el-input-number>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #content>
|
||
<ai-table
|
||
:tableData="tableData"
|
||
:col-configs="colConfigs"
|
||
:total="search1.total"
|
||
:current.sync="search1.current"
|
||
:size.sync="search1.size"
|
||
@getList="getActiveAnalysStatistics">
|
||
</ai-table>
|
||
</template>
|
||
</ai-card>
|
||
<ai-dialog
|
||
:visible.sync="isShowList"
|
||
width="1090px"
|
||
customFooter
|
||
title="成员活跃明细">
|
||
<ai-search-bar bottomBorder>
|
||
<template #right>
|
||
<el-select @change="getActiveList" v-model="search.status" size="small" placeholder="请选择活跃状态">
|
||
<el-option
|
||
v-for="item in statusList"
|
||
:key="item.dictName"
|
||
:label="item.dictName"
|
||
:value="item.dictName">
|
||
</el-option>
|
||
</el-select>
|
||
<el-input
|
||
v-model="search.name"
|
||
size="small"
|
||
placeholder="请输入成员姓名"
|
||
clearable
|
||
v-throttle="() => {search.current = 1, getActiveList()}"
|
||
@clear="search.current = 1, search.name = '', getActiveList()"
|
||
suffix-icon="iconfont iconSearch">
|
||
</el-input>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="activeList"
|
||
:col-configs="activeColConfigs"
|
||
:total="search.total"
|
||
style="margin-top: 16px;"
|
||
:current.sync="search.current"
|
||
:size.sync="search.size"
|
||
@getList="getActiveList">
|
||
<el-table-column slot="options" width="90px" fixed="right" label="操作" align="center">
|
||
<template slot-scope="{ row }">
|
||
<div class="table-options">
|
||
<el-button type="text" @click="userSearch.wxUserId = row.wxUserId, isShowDetail = true, getUserActiveList()">详情</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</ai-table>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button @click="isShowList = false">关闭</el-button>
|
||
</div>
|
||
</ai-dialog>
|
||
<ai-dialog
|
||
:visible.sync="isShowDetail"
|
||
width="1090px"
|
||
customFooter
|
||
title="成员活跃明细">
|
||
<ai-search-bar bottomBorder>
|
||
<template #right>
|
||
<el-select @change="getUserActiveList" v-model="userSearch.status" size="small" placeholder="请选择活跃状态">
|
||
<el-option
|
||
v-for="item in statusList"
|
||
:key="item.dictName"
|
||
:label="item.dictName"
|
||
:value="item.dictName">
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</ai-search-bar>
|
||
<ai-table
|
||
:tableData="userDetailList"
|
||
:col-configs="activeColConfigs"
|
||
:total="userSearch.total"
|
||
style="margin-top: 16px;"
|
||
:current.sync="userSearch.current"
|
||
:size.sync="userSearch.size"
|
||
@getList="getUserActiveList">
|
||
</ai-table>
|
||
<div class="dialog-footer" slot="footer">
|
||
<el-button @click="isShowDetail = false">关闭</el-button>
|
||
</div>
|
||
</ai-dialog>
|
||
</template>
|
||
</ai-list>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
import * as echarts from 'echarts'
|
||
|
||
export default {
|
||
name: 'List',
|
||
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
|
||
data () {
|
||
return {
|
||
userSearch: {
|
||
status: '',
|
||
size: 10,
|
||
total: 0,
|
||
current: 1,
|
||
wxUserId: ''
|
||
},
|
||
search1: {
|
||
size: 10,
|
||
total: 0,
|
||
current: 1
|
||
},
|
||
search: {
|
||
status: '',
|
||
size: 10,
|
||
total: 0,
|
||
name: '',
|
||
current: 1
|
||
},
|
||
isShowDetail: false,
|
||
userDetailList: [],
|
||
activeList: [],
|
||
loading: false,
|
||
isShowList: false,
|
||
defaultChecked: [],
|
||
defaultExpanded: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
colConfigs: [
|
||
{ prop: 'name', label: '姓名', align: 'left' },
|
||
{ prop: 'department', label: '部门', align: 'center' },
|
||
{ prop: 'c', label: '活跃天数', align: 'center' }
|
||
],
|
||
activeColConfigs: [
|
||
{ prop: 'name', label: '姓名', align: 'left' },
|
||
{ prop: 'department', label: '部门', align: 'center' },
|
||
{ prop: 'status', label: '状态', align: 'center' },
|
||
{ prop: 'platform', label: '平台', align: 'center' },
|
||
{ prop: 'lastUseTime', label: '最后登录时间', align: 'center' },
|
||
{ prop: 'ymd', label: '日期', align: 'center' }
|
||
],
|
||
unitName: '',
|
||
unitList: [],
|
||
tableData: [],
|
||
department: '',
|
||
departmentId: '',
|
||
today: '',
|
||
x: 30,
|
||
y: 18,
|
||
statusList: []
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
|
||
watch: {
|
||
unitName(val) {
|
||
this.$refs.tree.filter(val)
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.today = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
|
||
this.getTree()
|
||
},
|
||
|
||
methods: {
|
||
onTreeChange (e) {
|
||
this.department = e.parentName || e.name
|
||
|
||
this.$nextTick(() => {
|
||
this.getData()
|
||
})
|
||
},
|
||
|
||
getUserActiveList () {
|
||
if (!this.userSearch.status && this.statusList.length) {
|
||
this.userSearch.status = this.statusList[0].dictName
|
||
}
|
||
|
||
this.instance.post(`/app/wxuseruselog/list`, null, {
|
||
params: {
|
||
...this.userSearch,
|
||
status: this.userSearch.status ? this.userSearch.status : this.statusList.length ? this.statusList[0].dictName : ''
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.userDetailList = res.data.records
|
||
this.userSearch.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
getActiveList () {
|
||
if (!this.search.status && this.statusList.length) {
|
||
this.search.status = this.statusList[0].dictName
|
||
}
|
||
|
||
this.instance.post(`/app/wxuseruselog/active-log-list`, null, {
|
||
params: {
|
||
...this.search,
|
||
ymd: this.today,
|
||
status: this.search.status ? this.search.status : this.statusList.length ? this.statusList[0].dictName : ''
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.activeList = res.data.records
|
||
this.search.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
initBarChart (data) {
|
||
let chart = echarts.init(document.querySelector('.chart2'))
|
||
const x = data.map(v => v.ymd)
|
||
const y = data.length ? Object.keys(data[0]).filter(v => v !== 'ymd') : []
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
type: "plain"
|
||
},
|
||
grid: {
|
||
left: '20px',
|
||
right: '38px',
|
||
bottom: '14px',
|
||
top: '30px',
|
||
containLabel: true
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 7,
|
||
minValueSpan: 7
|
||
},
|
||
{
|
||
start: 0,
|
||
end: 7
|
||
}
|
||
],
|
||
color: ['#2266FF', '#22AA99', '#F8B425'],
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
align: 'center',
|
||
padding: [2, 0, 0, 0],
|
||
interval: 0,
|
||
fontSize: 14,
|
||
color: '#666666'
|
||
},
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#E1E5EF'
|
||
}
|
||
},
|
||
data: x
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
length: 0,
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ['#E1E5EF'],
|
||
width: 1,
|
||
type: 'solid'
|
||
}
|
||
},
|
||
nameTextStyle: {
|
||
color: '#666666',
|
||
align: 'left'
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
color: '#666666'
|
||
},
|
||
type: 'value'
|
||
},
|
||
series: y.map(key => {
|
||
return {
|
||
data: data.map(v => v[key]),
|
||
type: 'line',
|
||
name: key,
|
||
tooltip: {
|
||
valueFormatter: function (value) {
|
||
return value
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
chart.setOption(option)
|
||
},
|
||
|
||
initPieChart (data) {
|
||
let chart = echarts.init(document.querySelector('.chart1'))
|
||
const option = {
|
||
tooltip: {},
|
||
color: ['#2896FF', '#09DBFE', '#61FDB9', '#FFBB69', '#8429FF', '#ea7ccc'],
|
||
legend: {
|
||
right: '5%',
|
||
top: 'center',
|
||
orient: 'vertical',
|
||
formatter: function(name) {
|
||
let data = option.series[0].data
|
||
let total = 0
|
||
let tarValue = 0
|
||
for (let i = 0, l = data.length; i < l; i++) {
|
||
total += data[i].value
|
||
if (data[i].name == name) {
|
||
tarValue = data[i].value
|
||
}
|
||
}
|
||
let p = total === 0 ? 0 : (tarValue / total * 100).toFixed(2)
|
||
return name + '：' + tarValue + ' ' + p + '%'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: '50%',
|
||
data: data.map(v => {
|
||
return {
|
||
value: v.c,
|
||
name: v.status
|
||
}
|
||
}),
|
||
label : {
|
||
normal : {
|
||
formatter: '{b}：({d}%)',
|
||
textStyle : {
|
||
fontWeight : 'normal',
|
||
fontSize : 15
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
chart.setOption(option)
|
||
},
|
||
|
||
getData () {
|
||
this.getDtInfo()
|
||
this.getActiveAnalysisTrend()
|
||
this.getActiveAnalysStatistics()
|
||
},
|
||
|
||
getDtInfo () {
|
||
this.instance.post(`/app/wxuseruselog/active-analysis-today?department=${this.department}&ymd=${this.today}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.initPieChart(res.data)
|
||
if (res.data.length) {
|
||
this.statusList = res.data.map(v => {
|
||
return {
|
||
dictName: v.status,
|
||
dictValue: v.status
|
||
}
|
||
})
|
||
} else {
|
||
this.search.status = ''
|
||
this.statusList = []
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
getActiveAnalysStatistics () {
|
||
this.instance.post(`/app/wxuseruselog/active-analysis-statistics`, null, {
|
||
params: {
|
||
department: this.department,
|
||
x: this.x,
|
||
y: this.y,
|
||
...this.search1
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.tableData = res.data.records
|
||
this.search1.total = res.data.total
|
||
}
|
||
})
|
||
},
|
||
|
||
getActiveAnalysisTrend () {
|
||
this.instance.post(`/app/wxuseruselog/active-analysis-trend?department=${this.department}`).then(res => {
|
||
if (res.code === 0) {
|
||
this.initBarChart(res.data)
|
||
}
|
||
})
|
||
},
|
||
|
||
filterNode(value, data) {
|
||
if (!value) return true
|
||
return data.name.indexOf(value) !== -1
|
||
},
|
||
|
||
getTree() {
|
||
this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => {
|
||
if (res.code === 0) {
|
||
let parent = res.data.map(v => {
|
||
v.label = v.name
|
||
v.children = []
|
||
|
||
return v
|
||
}).filter(e => !e.parentid)[0]
|
||
this.defaultExpanded = [parent.id]
|
||
this.defaultChecked = [parent.id]
|
||
this.departmentId = parent.id
|
||
this.department = parent.name
|
||
this.addChild(parent, res.data)
|
||
this.unitList = [parent]
|
||
|
||
this.$nextTick(() => {
|
||
this.$refs.tree.setCurrentKey(parent.id)
|
||
})
|
||
|
||
this.getData()
|
||
}
|
||
})
|
||
},
|
||
|
||
addChild (parent, list) {
|
||
for (let i = 0; i < list.length; i++) {
|
||
if (list[i].parentid === parent.id) {
|
||
list[i].i = parent.children.length
|
||
list[i].parentName = `${parent.parentName || parent.name}/${list[i].name}`
|
||
parent.children.push(list[i])
|
||
}
|
||
}
|
||
|
||
if (parent.children.length) {
|
||
parent.children.forEach(v => {
|
||
v.len = parent.children.length
|
||
})
|
||
}
|
||
|
||
if (list.length > 0) {
|
||
parent['children'].map(v => this.addChild(v, list))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppActiveAnalysis {
|
||
.right-search {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
span {
|
||
margin-right: 10px;
|
||
font-size: 14px;
|
||
color: #686868;
|
||
}
|
||
|
||
div:first-child {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
|
||
:deep( .ai-list__content--right-wrapper ) {
|
||
padding: 0!important;
|
||
background: transparent!important;
|
||
border-radius: 0!important;
|
||
box-shadow: none!important;
|
||
}
|
||
|
||
.tree-container {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.tree-name {
|
||
padding-right: 30px;
|
||
}
|
||
|
||
i {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 8px;
|
||
transform: translateY(-50%);
|
||
padding-right: 8px;
|
||
font-weight: normal;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.el-button--mini, .el-button--mini.is-round {
|
||
height: 28px;
|
||
line-height: 28px;
|
||
padding: 0;
|
||
font-size: 12px;
|
||
|
||
:deep( span ){
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
.addressBook-left__list--title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 8px 8px 0;
|
||
|
||
.addressBook-left__list--search {
|
||
flex: 1;
|
||
|
||
:deep( input ){
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.el-button {
|
||
width: 84px;
|
||
flex-shrink: 1;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.addressBook-left {
|
||
width: 100%;
|
||
height: auto;
|
||
background: #FAFAFB;
|
||
|
||
.addressBook-left__title {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
|
||
h2 {
|
||
flex: 1;
|
||
height: 100%;
|
||
line-height: 40px;
|
||
color: #222;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
border-bottom: 2px solid transparent;
|
||
|
||
&.tab-active {
|
||
color: #2266FF;
|
||
border-bottom: 2px solid #2266FF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addressBook-left__list--wrapper {
|
||
height: calc(100% - 68px);
|
||
padding: 8px;
|
||
}
|
||
|
||
.addressBook-left__list {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
:deep( .el-tree ){
|
||
width: fit-content;
|
||
min-width: 100%;
|
||
}
|
||
|
||
:deep( .el-scrollbar__wrap ){
|
||
margin-bottom: 0 !important;
|
||
overflow-x: hidden;
|
||
|
||
.el-scrollbar__view {
|
||
width: fit-content;
|
||
min-width: 100%;
|
||
}
|
||
}
|
||
|
||
.addressBook-left__tags--item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
padding: 0 8px 0 16px;
|
||
cursor: pointer;
|
||
color: #222222;
|
||
|
||
&.addressBook-left__tags--item-active, &:hover {
|
||
background: #E8EFFF;
|
||
color: #2266FF;
|
||
|
||
i, span {
|
||
color: #2266FF;
|
||
}
|
||
}
|
||
|
||
span {
|
||
font-size: 14px;
|
||
}
|
||
|
||
i {
|
||
cursor: pointer;
|
||
color: #8e9ebf;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
span {
|
||
color: #222222;
|
||
font-size: 14px;
|
||
}
|
||
|
||
:deep( .el-tree ){
|
||
background: transparent;
|
||
|
||
.el-tree-node__expand-icon.is-leaf {
|
||
color: transparent !important;
|
||
}
|
||
|
||
.el-tree-node__content > .el-tree-node__expand-icon {
|
||
padding: 4px;
|
||
}
|
||
|
||
.el-tree-node__content {
|
||
height: 32px;
|
||
}
|
||
|
||
.el-tree__empty-text {
|
||
color: #222;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-tree-node__children .el-tree-node__content {
|
||
height: 32px;
|
||
}
|
||
|
||
.el-tree-node__content:hover {
|
||
background: #E8EFFF;
|
||
color: #222222;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.is-current > .el-tree-node__content {
|
||
&:hover {
|
||
background: #2266FF;
|
||
color: #fff;
|
||
}
|
||
|
||
background: #2266FF;
|
||
|
||
span {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep( .ai-list__content--right ){
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-left: 1px;
|
||
box-shadow: none;
|
||
|
||
.ai-list__content--right-wrapper {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|