|
@@ -7,11 +7,13 @@
|
|
<div class="item">累计报名人数</div>
|
|
<div class="item">累计报名人数</div>
|
|
<div class="item">销售主管人数</div>
|
|
<div class="item">销售主管人数</div>
|
|
<div class="item">销售经理人数</div>
|
|
<div class="item">销售经理人数</div>
|
|
|
|
+ <div class="item">代理公司人数</div>
|
|
</div>
|
|
</div>
|
|
<div class="bot">
|
|
<div class="bot">
|
|
<div class="item">{{ total }}</div>
|
|
<div class="item">{{ total }}</div>
|
|
<div class="item">{{ superNum }}</div>
|
|
<div class="item">{{ superNum }}</div>
|
|
<div class="item">{{ topNum }}</div>
|
|
<div class="item">{{ topNum }}</div>
|
|
|
|
+ <div class="item">{{ crownNum }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="map">
|
|
<div class="map">
|
|
@@ -27,22 +29,24 @@
|
|
</div>
|
|
</div>
|
|
<div id="table-wrapper" class="table-wrapper">
|
|
<div id="table-wrapper" class="table-wrapper">
|
|
<el-table ref="table" :data="tabbleChartData" style="width: 100%" header-cell-class-name="fsdfasdfas" @expand-change="open">
|
|
<el-table ref="table" :data="tabbleChartData" style="width: 100%" header-cell-class-name="fsdfasdfas" @expand-change="open">
|
|
- <el-table-column label="排名" :width="width / 11 * 2" type="index" align="center" :index="index => index + 1" />
|
|
|
|
- <el-table-column label="地区" :width="width / 11 * 2" prop="name" align="center" />
|
|
|
|
- <el-table-column label="销售主管" :width="width / 11 * 2" prop="tj" align="center" />
|
|
|
|
- <el-table-column label="销售经理" :width="width / 11 * 2" prop="top" align="center" />
|
|
|
|
- <el-table-column label="合计" :width="width / 11 * 2" align="center">
|
|
|
|
|
|
+ <el-table-column label="排名" :width="width / 13 * 2" type="index" align="center" :index="index => index + 1" />
|
|
|
|
+ <el-table-column label="地区" :width="width / 13 * 2" prop="name" align="center" />
|
|
|
|
+ <el-table-column label="销售主管" :width="width / 13 * 2" prop="tj" align="center" />
|
|
|
|
+ <el-table-column label="销售经理" :width="width / 13 * 2" prop="top" align="center" />
|
|
|
|
+ <el-table-column label="代理公司" :width="width / 13 * 2" prop="crown" align="center" />
|
|
|
|
+ <el-table-column label="合计" :width="width / 13 * 2" align="center">
|
|
<template slot-scope="scope">{{ scope.row.top + scope.row.tj }}</template>
|
|
<template slot-scope="scope">{{ scope.row.top + scope.row.tj }}</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column type="expand" :width="width / 11 * 1">
|
|
|
|
|
|
+ <el-table-column type="expand" :width="width / 13 * 1">
|
|
<template slot-scope="props">
|
|
<template slot-scope="props">
|
|
<signup-line-chart1 v-if="props.row.chart" :chart-data="props.row.chart" />
|
|
<signup-line-chart1 v-if="props.row.chart" :chart-data="props.row.chart" />
|
|
<el-table v-if="props.row.list" :data="props.row.list" border style="width: 100%">
|
|
<el-table v-if="props.row.list" :data="props.row.list" border style="width: 100%">
|
|
- <el-table-column label="排名" type="index" align="center" :width="(width - 16 ) / 5" :index="index => index + 1" />
|
|
|
|
- <el-table-column label="城市" prop="name" align="center" :width="(width - 16 ) / 5" />
|
|
|
|
- <el-table-column label="销售主管" prop="tj" align="center" :width="(width - 16 ) / 5" />
|
|
|
|
- <el-table-column label="销售经理" prop="top" align="center" :width="(width - 16 ) / 5" />
|
|
|
|
- <el-table-column label="合计" prop="value" align="center" :width="(width - 16 ) / 5" />
|
|
|
|
|
|
+ <el-table-column label="排名" type="index" align="center" :width="(width - 16 ) / 6" :index="index => index + 1" />
|
|
|
|
+ <el-table-column label="城市" prop="name" align="center" :width="(width - 16 ) / 6" />
|
|
|
|
+ <el-table-column label="销售主管" prop="tj" align="center" :width="(width - 16 ) / 6" />
|
|
|
|
+ <el-table-column label="销售经理" prop="top" align="center" :width="(width - 16 ) / 6" />
|
|
|
|
+ <el-table-column label="代理公司" prop="crown" align="center" :width="(width - 16 ) / 6" />
|
|
|
|
+ <el-table-column label="合计" prop="value" align="center" :width="(width - 16 ) / 6" />
|
|
</el-table>
|
|
</el-table>
|
|
</template>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
@@ -120,6 +124,7 @@ export default {
|
|
width: document.body.offsetWidth,
|
|
width: document.body.offsetWidth,
|
|
total: 0,
|
|
total: 0,
|
|
topNum: 0,
|
|
topNum: 0,
|
|
|
|
+ crownNum: 0,
|
|
superNum: 0,
|
|
superNum: 0,
|
|
timer: null,
|
|
timer: null,
|
|
opened: false,
|
|
opened: false,
|
|
@@ -164,6 +169,13 @@ export default {
|
|
female: '/'
|
|
female: '/'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
|
|
+ level: '代理公司',
|
|
|
|
+ num: this.superNum,
|
|
|
|
+ percent: (this.crownNum / this.total * 100).toFixed(2) + '%',
|
|
|
|
+ male: '/',
|
|
|
|
+ female: '/'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
level: '合计',
|
|
level: '合计',
|
|
num: this.total,
|
|
num: this.total,
|
|
percent: (this.total / this.total * 100).toFixed(2) + '%',
|
|
percent: (this.total / this.total * 100).toFixed(2) + '%',
|
|
@@ -254,12 +266,14 @@ export default {
|
|
this.lineChartData = {
|
|
this.lineChartData = {
|
|
top: res.data.list1,
|
|
top: res.data.list1,
|
|
tj: res.data.list2,
|
|
tj: res.data.list2,
|
|
|
|
+ crown: res.data.list7,
|
|
time: res.data.list3
|
|
time: res.data.list3
|
|
}
|
|
}
|
|
if (!this.opened) {
|
|
if (!this.opened) {
|
|
this.tabbleChartData = res.data.list.sort((a, b) => b.value - a.value)
|
|
this.tabbleChartData = res.data.list.sort((a, b) => b.value - a.value)
|
|
}
|
|
}
|
|
this.topNum = res.data.top
|
|
this.topNum = res.data.top
|
|
|
|
+ this.crownNum = res.data.crown
|
|
this.superNum = res.data.tj
|
|
this.superNum = res.data.tj
|
|
this.total = res.data.total
|
|
this.total = res.data.total
|
|
res.data.list4.forEach(e => {
|
|
res.data.list4.forEach(e => {
|
|
@@ -290,13 +304,14 @@ export default {
|
|
formatter: params => {
|
|
formatter: params => {
|
|
this.$emit('renderDetail', params.dataIndex)
|
|
this.$emit('renderDetail', params.dataIndex)
|
|
return `
|
|
return `
|
|
- <div style="min-width: 123px; height: 60px; display:flex; align-items: center;">
|
|
|
|
|
|
+ <div style="min-width: 123px; height: 75px; display:flex; align-items: center;">
|
|
<div id="TooltipInfo" style="flex: 1; height: 100%; font-size: 8px; line-height: 12px; padding-right: 6px; border-right: 0.4px solid #FFFFFF;">
|
|
<div id="TooltipInfo" style="flex: 1; height: 100%; font-size: 8px; line-height: 12px; padding-right: 6px; border-right: 0.4px solid #FFFFFF;">
|
|
<div>省份:${params.name}</div>
|
|
<div>省份:${params.name}</div>
|
|
<div>排名:${params.dataIndex + 1}</div>
|
|
<div>排名:${params.dataIndex + 1}</div>
|
|
<div>总报名人数:${params.value}</div>
|
|
<div>总报名人数:${params.value}</div>
|
|
<div>销售主管报名人数:${this.mapChartData[params.dataIndex].tj}</div>
|
|
<div>销售主管报名人数:${this.mapChartData[params.dataIndex].tj}</div>
|
|
<div>销售经理报名人数:${this.mapChartData[params.dataIndex].top}</div>
|
|
<div>销售经理报名人数:${this.mapChartData[params.dataIndex].top}</div>
|
|
|
|
+ 代理公司报名人数:${this.mapChartData[params.dataIndex].crown} <br />
|
|
</div>
|
|
</div>
|
|
<div id="TooltipDetail" style="height: 100%; line-height: 60px; margin-left: 8px;">详情 ></div>
|
|
<div id="TooltipDetail" style="height: 100%; line-height: 60px; margin-left: 8px;">详情 ></div>
|
|
</div>
|
|
</div>
|