<template>
<div>
<div class="dataList list-page-parent">
<!-- 搜索条件 -->
<div class="public-frame">
<publicSearch :searchItems="searchItems" @getSearchConditions="updateListLoad($event)" @getNewSelectedValue="getNewSelectedValue" ref="publicSearchRef"></publicSearch>
</div>
<!--列表-->
<el-card class="box-card box-card-list">
<div class="options-btn clear">
<el-button type="primary" icon="icon-export" size="small" @click="excelExport">Excel导出</el-button>
</div>
<el-card class="box-card box-card-table">
<div class="dataReport">
<el-table ref="multipleTable" :span-method="objectSpanMethod" :row-class-name="tableRowClassName"
v-loading="listLoading" height="470" style="width: 100%"
@cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :data="tableData">
<template v-for="(field, index) in tableFiled">
<el-table-column
v-if="field.type!==2"
:key="index"
:prop="field.prop"
:label="field.label"
:width="field.width"
show-overflow-tooltip>
</el-table-column>
<el-table-column
v-else
:key="index"
:prop="field.prop"
:label="field.label"
:width="field.width"
show-overflow-tooltip>
<template slot-scope="scope">
<!-- 悬浮提示 -->
<el-tooltip class="item" popper-class="degree-tooltip" effect="light" placement="top">
<!-- 注意 显示单元格浮框时 v-model 和 disabled 属性要一起使用才有效果 -->
<!-- <div class="cuijiNum">{{scope.row.contentFlag}}</div> -->
<i class="cuijiNum">{{scope.row.contentFlag}}</i>
<div slot="content">
<ul v-for="(item, index) in strArr" :key="index" class="strArrclass">
<li><span class="labelP" style="text-align:right;display:inline-block;width:100px;">{{item.item + '：'}}</span><span>{{item.value}}</span></li>
</ul>
</div>
</el-tooltip>
</template>
</el-table-column>
</template>
</el-table>
</div>
<div class="litPage-wrapper">
<listPage :pageObj = pageObj @pageSizeBack="pageSizeListLoad($event)" @currentPageBack="currentPageListLoad($event)"></listPage>
</div>
</el-card>
</el-card>
</div>
<!-- 图形化数据 -->
<div class="echartTotal">
<!-- 第一行 -->
<div class="echartContent">
<!-- 左侧 -->
<div class="echartUnitL">
<div class="unitTitle">通话状态</div>
<div class="unitContent" id="callStatusId">
<echartsbarChart ref="callStatusRef"></echartsbarChart>
</div>
</div>
<!-- 右侧 -->
<div class="echartUnitR">
<div class="unitTitle">内容标签</div>
<div class="unitContent" id="contentLabelId">
<echartsbarChart ref="contentLabelRef"></echartsbarChart>
</div>
</div>
</div>
<!-- 第二行 -->
<div class="echartContent">
<!-- 左侧 -->
<div class="echartUnitL">
<div class="unitTitle">通话时常占比</div>
<div class="unitContent" id="callTimeRateId">
<echartsbarChart ref="callTimeRateRef"></echartsbarChart>
</div>
</div>
<!-- 右侧 -->
<div class="echartUnitR">
<div class="unitTitle">交互轮次占比</div>
<div class="unitContent" id="eachRateId">
<echartsbarChart ref="eachRateRef"></echartsbarChart>
</div>
</div>
</div>
<!-- 第三行 -->
<div class="echartContent last">
<!-- 左侧 -->
<div class="echartUnitL">
<div class="unitTitle">欠款地域分布</div>
<div class="unitContent" id="areaId">
<echartsbarChart ref="areaRef"></echartsbarChart>
</div>
</div>
<!-- 右侧 -->
<div class="echartUnitR">
<div class="unitTitle">挂机节点占比</div>
<div class="unitContent" id="callNodeRateId">
<echartsbarChart ref="callNodeRateRef"></echartsbarChart>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import publicSearch from '@/components/common/publicSearch.vue'
import listPage from '@/components/common/listPage.vue'
import echartsbarChart from '@/components/common/echartsbarChart.vue'
export default {
name: 'dataReport',
data() {
return {
strArr: [
{item: '明确承诺还款', value: 11},
{item: '已经还款', value: 12},
{item: '不搭人理你', value: 111}
],
screenWidth: document.body.clientWidth,
listLoading: false, // 列表加载状态
pageObj: {
currentPage: 1,
pageSize: 10,
total: 0
},
// 搜索条件
searchCriteria: {
staffId: 'all',
versionNum: 'all'
},
// 搜索条件初始数据
searchItems: {
title: '数据列表',
searchArr: [
{
label: '合作企业：',
type: '1', // 下拉框
datas: [
{value: '1', label: '全部'}
],
value: '',
name: 'companyId',
hide: false,
eventFunction: this.companyIdchange
},
{
label: '案件发布公司：',
type: '1', // 下拉框
datas: [
{value: '1', label: '全部'}
],
value: '',
name: 'clientCompanyId',
clickFunction: this.clientChange
},
{
label: '产品名称：',
type: '45', // 下拉框
datas: [],
value: [],
name: 'productId'
},
{
label: '开始日期：',
type: '8', // 输入框
value1: '',
value2: '',
name1: 'updateTimeStart',
name2: 'updateTimeEnd'
},
{
label: '工具类型：',
type: '45', // 下拉框
datas: [
{value: 1, label: 'IVR'},
{value: 2, label: 'AI'}
],
value: '',
name: 'productId'
},
{
label: '逾期天数：',
type: '3', // 输入框
value1: '',
value2: '',
name1: 'overdueDayStart',
name2: 'overdueDayEnd'
}
]
},
tableFiled: [],
tableFiled1: [ // 筛选三个都没有
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableFiled2: [ // 筛选三个都有
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'productName', label: '产品名', width: '100'},
{prop: 'tools', label: '工具', width: '90'},
{prop: 'overday', label: '逾期天数', width: '100'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableFiled3: [ // 缺产品名
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'tools', label: '工具', width: '90'},
{prop: 'overday', label: '逾期天数', width: '100'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableFiled4: [ // 缺工具
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'productName', label: '产品名', width: '100'},
{prop: 'overday', label: '逾期天数', width: '100'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableFiled5: [ // 缺逾期天数
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'productName', label: '产品名', width: '100'},
{prop: 'tools', label: '工具', width: '90'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
// 三缺二
tableFiled6: [ // 缺工具，逾期天数
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'productName', label: '产品名', width: '100'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableFiled7: [ // 缺产品名，逾期天数
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'tools', label: '工具', width: '90'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableFiled8: [ // 缺产品，工具
{prop: 'company', label: '案件发布公司', width: '130'},
{prop: 'overday', label: '逾期天数', width: '100'},
{prop: 'callPercent', label: '呼叫量', width: '100'},
{prop: 'callSuccess', label: '呼叫接通率', width: '120'},
{prop: 'collectionNum', label: '案件量', width: '100'},
{prop: 'durationLv', label: '案件接通量', width: '120'},
{prop: 'duration', label: '案件接通率', width: '150'},
{prop: 'messageNum', label: '通话总时长', width: '120'},
{prop: 'fasongDx', label: '平均通话时长', width: '140'},
{prop: 'contentFlag', label: '内容标签', type: 2}
],
tableData: [
{
company: '案件发布公司A',
collectionNum: 123,
productName: '产品1',
tools: '工具1',
durationLv: 20,
overday: '3',
callPercent: '30%',
callSuccess: '45%',
duration: '2018083114200',
messageNum: '2018-08-31',
fasongDx: '小吴',
contentFlag: 'xxx'
},
{
company: '案件发布公司A',
collectionNum: 123,
productName: '产品1',
durationLv: 20,
overday: '4',
tools: '工具1',
callPercent: '30%',
callSuccess: '45%',
duration: '20180831142020',
messageNum: '2018-08-21',
fasongDx: '小吴',
contentFlag: 'xxx'
},
{
company: '案件发布公司A',
collectionNum: 123,
productName: '产品2',
durationLv: 20,
tools: '工具2',
callPercent: '30%',
callSuccess: '45%',
overday: '5',
duration: '20180823142020',
messageNum: '2018-08-31',
fasongDx: '小吴',
contentFlag: 'xxx'
},
{
company: '案件发布公司A',
collectionNum: 223,
productName: '产品2',
tools: '工具1',
overday: '5',
durationLv: 10,
callPercent: '30%',
callSuccess: '45%',
duration: '20180821142020',
messageNum: '2018-08-31',
fasongDx: '小王',
contentFlag: 'xxx'
},
{
company: '案件发布公司B',
collectionNum: 888,
productName: '产品1',
tools: '工具1',
durationLv: 200,
overday: '3',
callPercent: '30%',
callSuccess: '45%',
duration: '20180821142020',
messageNum: '2018-08-31',
fasongDx: '小吴',
contentFlag: 'xxx'
},
{
company: '案件发布公司B',
collectionNum: 123,
productName: '产品2',
durationLv: 20,
tools: '工具1',
overday: '2',
callPercent: '30%',
callSuccess: '45%',
duration: '20180821142020',
messageNum: '2018-08-31',
fasongDx: '小吴',
contentFlag: 'xxx'
},
{
company: '合计',
collectionNum: 123,
productName: 'ss',
durationLv: 20,
tools: '',
overday: '',
duration: '20180821142020',
messageNum: '2018-08-31',
fasongDx: '小吴',
contentFlag: 'xxx'
}
],
sameRowArr: [],
// sIdx: 0,
curRowArr: []
}
},
components: {
publicSearch,
listPage,
echartsbarChart
},
created() {
this.getCaseStatus()
this.casePie(2)
this.caseLine(1, 1)
},
mounted() {
this.tableFiled = this.tableFiled1
// this.$refs.multipleTable.$el.style.width = '99.99%'
this.handleData() // 解决表格hover样式问题
this.flitterData(this.tableData)
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},
watch: {
screenWidth(val) {
this.screenWidth = val
this.caseLine(1, 1)
this.casePie(2)
}
},
methods: {
// 导出按钮
excelExport() {},
// 标签点击详情
detailShow(row) {
// console.log(row)
},
// 饼图
casePie(value) {
let obj = {}
obj.type = value
this.$tools.commonAjaxPost('/xxx', obj, (res) => {
if (res.data.success) {
let {result} = res.data
let {casePie} = result // 饼图数据
let newcasePie = [] // 处理后的饼图数据
let arrColor = ['#5C89FF', '#7C6AF2', '#C95FF2', '#FF6383', '#FF9F40', '#FFCB48', '#31DC72', '#5C89FF', '#7C6AF2', '#C95FF2', '#FF6383', '#FF9F40', '#FFCB48', '#31DC72']
if (casePie) {
casePie.map((item, index) => {
newcasePie.push({name: item.type, value: item.count, color: arrColor[index]})
})
}
/**
* domId, seriesArr, xAxisArr, type, isTotal, textTitle, isShowBottomBar, name
* seriesArr接口返回数据(如果是柱状图则为纵坐标数组)
* xAxisArr:接口返回数据(如果是柱状图则为横坐标数组)
* 柱状图 isTotal:是否为堆叠图(柱状图且为堆叠图时传true)
* textTitle:图表标题
* isShowBottomBar: 是否显示x轴下放的横条(可拖动)
*/
this.$refs.callStatusRef.myChartBar('callStatusId', newcasePie, [], 'annular', '', '', '', '', false) // 饼状图 注意饼状图的y轴数组只有一个
this.$refs.contentLabelRef.myChartBar('contentLabelId', newcasePie, [], 'annular', '', '', '', '', false) // 饼状图 注意饼状图的y轴数组只有一个
this.$refs.callTimeRateRef.myChartBar('callTimeRateId', newcasePie, [], 'annular', '', '', '', '', false) // 饼状图 注意饼状图的y轴数组只有一个
this.$refs.eachRateRef.myChartBar('eachRateId', newcasePie, [], 'annular', '', '', '', '', false) // 饼状图 注意饼状图的y轴数组只有一个
this.$refs.callNodeRateRef.myChartBar('callNodeRateId', newcasePie, [], 'annular', '', '', '', '', false) // 饼状图 注意饼状图的y轴数组只有一个
}
}, 2, () => {}, 2)
},
// 折线图
caseLine(val1, val2) {
let obj = {}
obj.timeType = val1 // 本月/近6月
obj.dataType = val2 // 条数/金额
this.$tools.commonAjaxPost('/xxx', obj, (res) => {
if (res.data.success) {
let result = res.data.result
let repayLine = result.repayLine
let newArrX = [] // x轴数据
let newArrY = [{ // y轴数据
data: [],
color: '#5c89ff',
label: {
normal: {
show: true
}
}
}]
// newArrY[0].data = repayLine.dataList
newArrY[0].data = [1, 54, 32, 86, 21, 54, 23, 43, 66, 98, 45, 0, 2, 7, 87, 45, 34, 34, 32]
newArrX = repayLine.repayLine
this.$refs.areaRef.myChartBar('areaId', newArrY, newArrX, 'bar', '', '', '', '', '', false) // 折线图
}
}, 2, () => {}, 2)
},
// 更改列表数据
updateListLoad(searchItems) {
this.tableVersion = Math.random() * 1000
this.pageObj.currentPage = 1
this.searchCriteria = searchItems
this.listLoad()
},
listLoad() {
if (this.searchItems.searchArr[0].value === '') {
this.$message.warning('请选择合作企业')
return false
}
// 产品名称、工具、逾期天数都存在时
let type1 = this.searchItems.searchArr[2].value.length !== 0 && this.searchItems.searchArr[4].value.length !== 0 && (this.searchItems.searchArr[5].value1 !== '' || this.searchItems.searchArr[5].value2 !== '')
// 缺工具，逾期天数
let type2 = this.searchItems.searchArr[2].value.length !== 0 && this.searchItems.searchArr[4].value.length === 0 && (this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
// 缺产品，工具
let type3 = this.searchItems.searchArr[2].value.length === 0 && this.searchItems.searchArr[4].value.length === 0 && !(this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
// 缺产品，逾期天数
let type4 = this.searchItems.searchArr[2].value.length === 0 && this.searchItems.searchArr[4].value.length !== 0 && (this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
// 缺产品
let type5 = this.searchItems.searchArr[2].value.length === 0 && this.searchItems.searchArr[4].value.length !== 0 && !(this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
// 缺工具
let type6 = this.searchItems.searchArr[2].value.length !== 0 && this.searchItems.searchArr[4].value.length === 0 && !(this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
// 缺逾期天数
let type7 = this.searchItems.searchArr[2].value.length !== 0 && this.searchItems.searchArr[4].value.length !== 0 && (this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
// 都缺
let type8 = this.searchItems.searchArr[2].value.length === 0 && this.searchItems.searchArr[4].value.length == 0 && (this.searchItems.searchArr[5].value1 === '' || this.searchItems.searchArr[5].value2 === '')
if (type1) {
this.tableFiled = this.tableFiled2
} else if (type2) {
this.tableFiled = this.tableFiled6
} else if (type3) {
this.tableFiled = this.tableFiled8
} else if (type4) {
this.tableFiled = this.tableFiled7
} else if (type5) {
this.tableFiled = this.tableFiled3
} else if (type6) {
this.tableFiled = this.tableFiled4
} else if (type7) {
this.tableFiled = this.tableFiled5
} else if (type8) {
this.tableFiled = this.tableFiled1
}
this.listLoading = true
let obj = {}
if (this.searchCriteria != undefined) {
obj = this.searchCriteria
}
obj.currentPage = this.pageObj.currentPage
obj.limit = this.pageObj.pageSize
this.$tools.commonAjaxPost('/xxx', obj, (res) => {
if (res.data.success) {
this.listData = res.data.data.list == undefined ? [] : res.data.data.list
this.pageObj = {
currentPage: res.data.data.page.currentPage,
pageSize: res.data.data.page.limit,
total: res.data.data.page.total
}
} else {
this.$message.error(res.data.message)
}
this.listLoading = false
}, 1, (error) => {
this.listLoading = false
this.$message.error(error)
})
},
// 获取产品名称
getCaseStatus() {
this.$tools.commonAjaxPost('/xxx', null, (res) => {
if (res.data.success) {
let caseStatus = res.data.result.caseStatus
this.searchItems.searchArr[2].datas = caseStatus
}
}, 1, () => {}, 2)
},
// 案件发布公司
clientChange() {
},
companyIdchange() {},
// 每页条数发生变化时刷新列表
pageSizeListLoad(pageSize) {
this.pageObj.currentPage = 1
this.pageObj.pageSize = pageSize
this.listLoad()
},
// 当前页数发生变化时刷新列表
currentPageListLoad(currentPage) {
this.pageObj.currentPage = currentPage
this.listLoad()
},
// 更新搜索条件选择内容
getNewSelectedValue(newSelected, searchIndex) {
this.searchItems.searchArr[searchIndex].value = newSelected
this.searchItems.searchArr[searchIndex].oldOptions[1] = newSelected
},
flitterData(arr) {
let spanOneArr = []
let spanTwoArr = []
let spanThreeArr = []
let spanFourArr = []
let concatOne = 0
let concatTwo = 0
let concatThree = 0
let concatFour = 0
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
spanTwoArr.push(1)
spanThreeArr.push(1)
spanFourArr.push(1)
} else {
// 第一列需要合并为必须，案件发布公司
if (item.company === arr[index - 1].company) { // 第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
// 所有筛选条件都用上
if (this.tableFiled.length === 12) {
if (item.productName === arr[index - 1].productName && item.company === arr[index - 1].company) { // 第二列需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
if (item.tools === arr[index - 1].tools && item.company === arr[index - 1].company) { // 第三列需合并相同内容的判断条件
spanThreeArr[concatThree] += 1
spanThreeArr.push(0)
} else {
spanThreeArr.push(1)
concatThree = index
}
if (item.overday === arr[index - 1].overday && item.company === arr[index - 1].company) { // 第四列需合并相同内容的判断条件
spanFourArr[concatFour] += 1
spanFourArr.push(0)
} else {
spanFourArr.push(1)
concatFour = index
}
} else if (this.tableFiled.length === 11) {
// 如果第4列是呼叫量，表明--产品、工具、逾期天数某一项搜索条件未触发，不展示
if (this.tableFiled[3].label === '呼叫量') {
if (this.tableFiled[1].label === '产品名' && this.tableFiled[2].label === '逾期天数') {
if (item.productName === arr[index - 1].productName && item.company === arr[index - 1].company) { // 第二列产品名
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
if (item.overday === arr[index - 1].overday && item.company === arr[index - 1].company) { // 第三列工具
spanThreeArr[concatThree] += 1
spanThreeArr.push(0)
} else {
spanThreeArr.push(1)
concatThree = index
}
} else if (this.tableFiled[1].label === '产品名' && this.tableFiled[2].label === '工具') {
if (item.productName === arr[index - 1].productName && item.company === arr[index - 1].company) { // 第二列产品名
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
if (item.tools === arr[index - 1].tools && item.company === arr[index - 1].company) { // 第三列工具
spanThreeArr[concatThree] += 1
spanThreeArr.push(0)
} else {
spanThreeArr.push(1)
concatThree = index
}
} else if (this.tableFiled[1].label === '工具' && this.tableFiled[2].label === '逾期天数') {
if (item.tools === arr[index - 1].tools && item.company === arr[index - 1].company) { // 第二列产品名
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
if (item.overday === arr[index - 1].overday && item.company === arr[index - 1].company) { // 第三列工具
spanThreeArr[concatThree] += 1
spanThreeArr.push(0)
} else {
spanThreeArr.push(1)
concatThree = index
}
}
}
} else if (this.tableFiled.length === 10) {
// 产品名称、工具、逾期天数--3缺2
if (this.tableFiled[2].label === '呼叫量') {
if (this.tableFiled[1].label === '产品名') {
if (item.productName === arr[index - 1].productName && item.company === arr[index - 1].company) { // 第二列产品名
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
} else if (this.tableFiled[1].label === '工具') {
if (item.tools === arr[index - 1].tools && item.company === arr[index - 1].company) { // 第二列产品名
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
} else if (this.tableFiled[1].label === '逾期天数') {
if (item.overday === arr[index - 1].overday && item.company === arr[index - 1].company) { // 第二列产品名
spanTwoArr[concatTwo] += 1
spanTwoArr.push(0)
} else {
spanTwoArr.push(1)
concatTwo = index
}
}
}
}
}
})
return {
one: spanOneArr,
two: spanTwoArr,
three: spanThreeArr,
four: spanFourArr
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (this.tableFiled.length === 12) {
if (row.company === '合计') {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 4
}
} else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
return {
rowspan: 0,
colspan: 0
}
}
}
} else if (this.tableFiled.length === 11) {
if (row.company === '合计') {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 3
}
} else if (columnIndex === 1 || columnIndex === 2) {
return {
rowspan: 0,
colspan: 0
}
}
}
} else if (this.tableFiled.length === 10) {
if (row.company === '合计') {
if (columnIndex === 0) {
return {
rowspan: 1,
colspan: 2
}
} else if (columnIndex === 1) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
if (columnIndex === 0) { // 案件发布公司，一直需要合并
const Row = (this.flitterData(this.tableData).one)[rowIndex]
const Col = Row > 0 ? 1 : 0
return {
rowspan: Row,
colspan: Col
}
}
if (this.tableFiled.length > 9) {
if (columnIndex === 1) {
const Row = (this.flitterData(this.tableData).two)[rowIndex]
const Col = Row > 0 ? 1 : 0
return {
rowspan: Row,
colspan: Col
}
}
}
if (this.tableFiled.length > 10) {
if (columnIndex === 2) {
const Row = (this.flitterData(this.tableData).three)[rowIndex]
const Col = Row > 0 ? 1 : 0
return {
rowspan: Row,
colspan: Col
}
}
}
if (this.tableFiled.length > 11) {
if (columnIndex === 3) {
const Row = (this.flitterData(this.tableData).four)[rowIndex]
const Col = Row > 0 ? 1 : 0
return {
rowspan: Row,
colspan: Col
}
}
}
},
// 处理数据, 解决hover样式问题
handleData() {
let sIdx = 0
this.tableData.forEach((item, index) => {
item.index = index
if (index === 0) {
this.sameRowArr.push([index])
} else {
if (item.company === this.tableData[index - 1].company) {
this.sameRowArr[sIdx].push(index)
} else {
sIdx += 1
this.sameRowArr.push([index])
}
}
})
// console.log(this.sameRowArr)
},
tableRowClassName({row, rowIndex}) {
// console.log(rowIndex)
let temArr = this.curRowArr
for (let i = 0; i < temArr.length; i++) {
if (rowIndex == temArr[i]) {
return 'row_class'
}
}
},
cellMouseEnter(row, column, cell, event) {
// console.log(row.index)
this.sameRowArr.forEach((arr, index) => {
// console.log(arr)
if (arr.indexOf(row.index) != -1) {
this.curRowArr = arr
}
})
},
cellMouseLeave(row, column, cell, event) {
this.curRowArr = []
}
}
}
</script>
<style lang="scss">
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.echartTotal {
margin-top: 20px;
background:#fff;
.unitTitle {
height: 40px;
line-height: 40px;
font-weight: 700;
padding-left: 20px;
box-sizing: border-box;
background: #FBFCFF;
}
.unitContent {
height: 310px;
}
.echartContent {
display: flex;
padding: 20px 20px 0;
height: 350px;
&.last {
padding-bottom: 20px;
}
.echartUnitL {
// width: 49%;
border:1px solid rgba(245,245,245,1);
flex: 1;
float: left;
margin-right: 10px;
background: #fff;
box-sizing: border-box;
}
.echartUnitR {
// width: 49%;
border:1px solid rgba(245,245,245,1);
margin-left: 10px;
box-sizing: border-box;
background: #fff;
flex: 1;
float: right;
}
}
}
.dataReport {
.el-button.el-tooltip.labelBtn.el-button--default {
border: 0;
&:hover {
background: #f8faff;
}
}
// margin-top: 10px;
.el-table--border th.gutter:last-of-type {
display: block!important;
width: 17px!important;
} // 解决表格表头表体错位问题
.row_class {
background: #f8faff;
}
.el-table .el-table__body td:nth-child(1) {
padding-left: 0px;
}
.cuijiNum {
color: #3182ff;
cursor: pointer;
}
}
</style>
实际效果如下：
