|
- <template>
- <div class="box-center">
- <div class="app-top">
- <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">
- <div class="titel-text">项目选择:</div>
- <div style="margin-left: 26px">
- <el-select
- v-model="houseId"
- filterable
- placeholder="请选择"
- @change="houseChange"
- >
- <el-option
- v-for="item in houseList"
- :key="item.id"
- :label="item.propertyName"
- :value="item.id"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="app-titel">
- <div style="text-indent: 30px">接待时间:</div>
- <div class="toptimeqhuan">
- <div :class="{ tophove: dateType == 4 }" @click="tabtimetap(4)">
- 近7天
- </div>
- <div :class="{ tophove: dateType == 5 }" @click="tabtimetap(5)">
- 近15天
- </div>
- <div :class="{ tophove: dateType == 6 }" @click="tabtimetap(6)">
- 近30天
- </div>
- </div>
- <div style="margin-left: 26px">
- <el-date-picker
- v-model="customtime"
- @change="confirmtime()"
- type="daterange"
- range-separator="-"
- :default-time="['00:00:00', '23:59:59']"
- value-format="yyyy-MM-dd"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- >
- </el-date-picker>
- </div>
- <div style="margin-left: 26px" class="div-lab">
- <div class="label">团队</div>
- <el-select
- v-model="deptId"
- filterable
- @change="deptChange"
- placeholder="请选择"
- class="div-inp"
- >
- <el-option
- v-for="item in options"
- :key="item.deptId"
- :label="item.name"
- :value="item.deptId"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- </div>
- <!-- 表格 -->
- <div class="cen-tab" :style="{'margin-top':role != 3?'110px':'70px'}">
- <div class="app-titel1">
- <!-- <div class="toptimeqhuan"> -->
- <!-- <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
- 销讲统计
- </div>
- <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
- 违禁统计
- </div> -->
- <el-radio-group @change="tabFlagChange" v-model="tabFlag">
- <el-radio-button :label="0">销讲统计</el-radio-button>
- <el-radio-button :label="1">违禁统计</el-radio-button>
- </el-radio-group>
- <!-- </div> -->
- <div
- style="margin-left: auto; margin-right: 10px"
- v-if="sta_men_downLoad"
- >
- <el-button @click="downLoad">导出</el-button>
- </div>
- </div>
- <el-table max-height="300" :data="tableData" stripe style="width: 100%" height="390">
- <el-table-column prop="batchId" label="序号" align="center">
- <template slot-scope="scope">
- {{
- scope.$index == tableData.length - 1
- ? "合计/平均"
- : scope.$index + 1
- }}
- </template>
- </el-table-column>
- <el-table-column prop="accountName" label="顾问" align="center">
- </el-table-column>
- <el-table-column prop="deptName" label="归属团队" align="center">
- </el-table-column>
- <el-table-column
- prop="activeCustomer"
- label="接待量"
- align="center"
- sortable
- >
- <template slot-scope="{ row }"> {{ row.activeCustomer }}次 </template>
- </el-table-column>
-
- <el-table-column
- prop="activeCustomer"
- label="未标顾问"
- align="center"
- sortable
- >
- <template slot-scope="{ row }"> {{ row.unTagCustomer }}个 </template>
- </el-table-column>
- <el-table-column
- v-if="tabFlag == 1"
- prop="prohibitedCustomer"
- label="违禁接待次数"
- align="center"
- sortable
- >
- <template slot-scope="{ row }">
- {{ row.prohibitedCustomer }}次
- </template>
- </el-table-column>
- <el-table-column
- v-if="tabFlag == 1"
- prop="prohibitedZb"
- label="违禁接待占比"
- align="center"
- sortable
- >
- <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>
- </el-table-column>
- <el-table-column
- v-if="tabFlag == 0"
- prop="realityEquipmentCount"
- label="接待时长"
- align="center"
- sortable
- width="110"
- >
- <template slot-scope="{ row }">
- {{ Math.floor(row.sumDuration / 60) }}分钟
- </template>
- </el-table-column>
- <el-table-column
- v-if="tabFlag == 0"
- prop="fraction"
- label="销讲执行率"
- align="center"
- sortable
- width="110"
- >
- <template slot-scope="{ row }"> {{ row.fraction }}% </template>
- </el-table-column>
- <el-table-column
- v-for="(item, idx) in tablist"
- :key="idx"
- :prop="item.props"
- :label="item.label"
- align="center"
- width="100"
- >
- <template slot-scope="{ row }"> {{ row[item.props] }}% </template>
- </el-table-column>
- </el-table>
- <div style="display: flex; justify-content: flex-end; margin-top: 10px">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="current"
- :page-sizes="[10, 30, 50]"
- :page-size="size"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- >
- </el-pagination>
- </div>
- </div>
-
- <div class="app-box-san">
- <div class="zuo">
- <div class="title">
- <div class="text1">接待量排名(TOP10)</div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 35%;text-align: center;">
- <div class="text1-1">接待合计</div>
- <div class="text1-2">{{ sum1 }}次</div>
- </div>
- <div class="sanbox1" style="width: 40%;text-align: center;">
- <div class="text1-1">顾问人数</div>
- <div class="text1-2">{{ num1 }}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;text-align: center;">
- <div class="text1-1">人均接待</div>
- <div class="text1-2">{{ avg1 }}次</div>
- </div>
- </div>
- <div
- v-if="echarlist.length != 0"
- style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
- >
- <div class="jinbox" v-for="(item, i) in echarlist" :key="i">
- <!-- <div class="jinboxtit">{{ item.name }}</div> -->
- <span class="sequenceNum" :style="{
- 'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
- 'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
- 'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
- }">{{ i + 1 }}</span>
- <div class="jinboxtit">
- <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
- <span class="name">{{ item.name }}</span>
- </el-tooltip>
- </div>
- <div class="jinbox-box">
- <!-- <div
- class="boxbaifenbi"
- :style="'width:' + item.zxl1 + '%;'"
- ></div> -->
- <div class="boxbaifenbi"
- :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
- </div>
-
- </div>
- <div class="jinboxbott">{{ item.zxl }}次</div>
- </div>
- </div>
- <div
- class="nulllist"
- style="height: 250px"
- v-if="echarlist.length == 0"
- >
- <div class="imgboxc">
- <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
- <div class="nulltext" style="font-size:14px;">暂无数据</div>
- </div>
- </div>
- </div>
- <div class="you">
- <div class="title">
- <div class="text1">接待时长排名(TOP10)</div>
- </div>
-
- <div class="hejisan">
- <div class="sanbox1" style="width: 35%;text-align: center;">
- <div class="text1-1">接待时长合计</div>
- <div class="text1-2">{{ Math.floor(sum2 / 60) }}分钟</div>
- </div>
- <div class="sanbox1" style="width: 40%;text-align: center;">
- <div class="text1-1">顾问人数</div>
- <div class="text1-2">{{ num2 }}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;text-align: center;">
- <div class="text1-1">均值</div>
- <div class="text1-2">{{ Math.floor(avg2 / 60) }}分钟</div>
- </div>
- </div>
- <div
- v-if="echarlist2.length != 0"
- style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
- >
- <div class="jinbox" v-for="(item, i) in echarlist2" :key="i">
- <!-- <div class="jinboxtit">{{ item.name }}</div> -->
- <span class="sequenceNum" :style="{
- 'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
- 'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
- 'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
- }">{{ i + 1 }}</span>
- <div class="jinboxtit">
- <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
- <span class="name">{{ item.name }}</span>
- </el-tooltip>
- </div>
- <div class="jinbox-box">
- <!-- <div
- class="boxbaifenbi"
- :style="'width:' + item.percentage + '%;'"
- ></div> -->
- <div class="boxbaifenbi"
- :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.percentage + '%' }">
- </div>
-
- </div>
- <div class="jinboxbott">{{ item.zxl }}分钟</div>
- </div>
- </div>
- <div
- class="nulllist"
- style="height: 250px"
- v-if="echarlist2.length == 0"
- >
- <div class="imgboxc">
- <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
- <div class="nulltext" style="font-size:14px;">暂无数据</div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="app-box-san">
- <div class="zuo">
- <div class="title">
- <div class="text1">平均执行率排名(TOP10)</div>
- <div class="text2">
- <el-select
- @change="teamAllLevelidtap()"
- style="width: 90%; margin: 0 auto"
- v-model="teamAllLevelid"
- placeholder="请选择"
- >
- <el-option
- v-for="item in teamAllLevel"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 50%;text-align: center;">
- <div class="text1-1">顾问人数</div>
- <div class="text1-2">{{ num3 }}个</div>
- </div>
- <div class="sanbox1" style="width: 50%;text-align: center;">
- <div class="text1-1">平均执行</div>
- <div class="text1-2">{{ avg3 }}%</div>
- </div>
- </div>
- <div
- v-if="echarlist1.length != 0"
- style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
- >
- <div class="jinbox" v-for="(item, i) in echarlist1" :key="i">
- <!-- <div class="jinboxtit">{{ item.name }}</div> -->
- <span class="sequenceNum" :style="{
- 'background': topThreeColor(i),
- 'color': i < 3 ? '#FFF' : '#333',
- 'box-shadow': i < 3 ? '0px 0px 6px 1px' + topThreeColor(i) : '0px 0px 6px 1px' + '#E5F0FF',
- }">{{ i + 1 }}</span>
- <div class="jinboxtit">
- <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
- <span class="name">{{ item.name }}</span>
- </el-tooltip>
- </div>
- <div class="jinbox-box">
- <!-- <div
- class="boxbaifenbi"
- :style="'width:' + item.zxl + '%;'"
- ></div> -->
- <div class="boxbaifenbi"
- :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl + '%' }">
- </div>
-
- </div>
- <div class="jinboxbott">{{ item.zxl }}%</div>
- </div>
- </div>
- <div
- class="nulllist"
- style="height: 250px"
- v-if="echarlist1.length == 0"
- >
- <div class="imgboxc">
- <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
- <div class="nulltext" style="font-size:14px;">暂无数据</div>
- </div>
- </div>
- </div>
- <div class="you">
- <div class="title">
- <div class="text1">违禁接待次数排名(TOP10)</div>
- <div class="text2">
- <el-select
- @change="teamAllLeve2tap()"
- style="width: 90%; margin: 0 auto"
- v-model="teamAllLeve2id"
- placeholder="请选择"
- >
- <el-option
- v-for="item in teamAllLeve2"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 35%;text-align: center;">
- <div class="text1-1">违禁合计</div>
- <div class="text1-2">{{ sum4 }}次</div>
- </div>
- <div class="sanbox1" style="width: 40%;text-align: center;">
- <div class="text1-1">顾问人数</div>
- <div class="text1-2">{{ num4 }}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;text-align: center;">
- <div class="text1-1">均值</div>
- <div class="text1-2">{{ avg4 }}次</div>
- </div>
- </div>
- <div
- v-if="echarlist3.length != 0"
- style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
- >
- <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
- <!-- <div class="jinboxtit">{{ item.name }}</div> -->
- <span class="sequenceNum" :style="{
- 'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
- 'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
- 'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
- }">{{ i + 1 }}</span>
- <div class="jinboxtit">
- <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
- <span class="name">{{ item.name }}</span>
- </el-tooltip>
- </div>
- <div class="jinbox-box">
- <!-- <div
- class="boxbaifenbi"
- :style="'width:' + item.zxl1 + '%;'"
- ></div> -->
- <div class="boxbaifenbi"
- :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
- </div>
-
- </div>
- <div class="jinboxbott">{{ item.zxl }}次</div>
- </div>
- </div>
- <div
- class="nulllist"
- style="height: 250px"
- v-if="echarlist3.length == 0"
- >
- <div class="imgboxc">
- <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
- <div class="nulltext" style="font-size:14px;">暂无数据</div>
- </div>
- </div>
- </div>
- </div>
-
-
- <!-- 接待未标顾问排名(TOP10) -->
- <div class="app-box-san">
- <div class="zuo">
- <div class="title">
- <div class="text1">接待未标顾问排名(TOP10)</div>
- <div class="text2">
- <el-select
- style="width: 90%; margin: 0 auto"
- v-model="teamAllLevelsId"
- placeholder="请选择"
- >
- <el-option
- v-for="item in teamAllLevels"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 50%;text-align: center;">
- <div class="text1-1">未标记合计</div>
- <div class="text1-2">{{ num5 }}个</div>
- </div>
- <div class="sanbox1" style="width: 50%;text-align: center;">
- <div class="text1-1">均值</div>
- <div class="text1-2">{{ avg5 }}个</div>
- </div>
- </div>
- <div
- v-if="echarlist1.length != 0"
- style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
- >
- <div class="jinbox" v-for="(item, i) in echarlist4" :key="i">
- <!-- <div class="jinboxtit">{{ item.name }}</div> -->
- <span class="sequenceNum" :style="{
- 'background': topThreeColor(i),
- 'color': i < 3 ? '#FFF' : '#333',
- 'box-shadow': '0px 0px 6px 1px' + topThreeColor(i)
- }">{{ i + 1 }}</span>
- <div class="jinboxtit">
- <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
- <span class="name">{{ item.name }}</span>
- </el-tooltip>
- </div>
- <div class="jinbox-box">
- <!-- <div
- class="boxbaifenbi"
- :style="'width:' + item.zxl + '%;'"
- ></div> -->
- <div class="boxbaifenbi"
- :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
- </div>
-
- </div>
- <div class="jinboxbott">{{ item.zxl }}个</div>
- </div>
- </div>
- <div
- class="nulllist"
- style="height: 250px"
- v-if="echarlist4.length == 0"
- >
- <div class="imgboxc">
- <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
- <div class="nulltext" style="font-size:14px;">暂无数据</div>
- </div>
- </div>
- </div>
- <div class="you" style="opacity: 0;">
- <div class="title">
- <div class="text1">违禁接待次数排名(TOP10)</div>
- <div class="text2">
- <el-select
- @change="teamAllLeve2tap()"
- style="width: 90%; margin: 0 auto"
- v-model="teamAllLeve2id"
- placeholder="请选择"
- >
- <el-option
- v-for="item in teamAllLeve2"
- :key="item.value"
- :label="item.name"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="hejisan">
- <div class="sanbox1" style="width: 35%;text-align: center;">
- <div class="text1-1">违禁合计</div>
- <div class="text1-2">{{ sum4 }}次</div>
- </div>
- <div class="sanbox1" style="width: 40%;text-align: center;">
- <div class="text1-1">顾问人数</div>
- <div class="text1-2">{{ num4 }}个</div>
- </div>
- <div class="sanbox1" style="width: 25%;text-align: center;">
- <div class="text1-1">均值</div>
- <div class="text1-2">{{ avg4 }}次</div>
- </div>
- </div>
- <div
- v-if="echarlist3.length != 0"
- style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"
- >
- <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">
- <!-- <div class="jinboxtit">{{ item.name }}</div> -->
- <span class="sequenceNum" :style="{
- 'background': i + 1 == 1 ? 'linear-gradient(180deg, #FFA395 0%, #F54D3F 100%)' : i + 1 == 2 ? 'linear-gradient(180deg, #FFBE70 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(180deg, #FFE683 0%, #FFCC00 100%)' : '#E5F0FF',
- 'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',
- 'box-shadow': i + 1 == 1 ? '0px 0px 6px 1px #F54D3F' : i + 1 == 2 ? '0px 0px 6px 1px #FF981E' : i + 1 == 3 ? '0px 0px 6px 1px #FFCC00' : '#E5F0FF',
- }">{{ i + 1 }}</span>
- <div class="jinboxtit">
- <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">
- <span class="name">{{ item.name }}</span>
- </el-tooltip>
- </div>
- <div class="jinbox-box">
- <!-- <div
- class="boxbaifenbi"
- :style="'width:' + item.zxl1 + '%;'"
- ></div> -->
- <div class="boxbaifenbi"
- :style="{ 'background': i + 1 == 1 ? 'linear-gradient(270deg, #F88881 0%, #E6625B 100%)' : i + 1 == 2 ? 'linear-gradient(270deg, #FFC940 0%, #FF981E 100%)' : i + 1 == 3 ? 'linear-gradient(270deg, #FFE800 0%, #FFCC00 100%)' : 'inear-gradient(270deg, #7BB1FF 0%, #618FFF 100%)', 'width': item.zxl1 + '%' }">
- </div>
-
- </div>
- <div class="jinboxbott">{{ item.zxl }}次</div>
- </div>
- </div>
- <div
- class="nulllist"
- style="height: 250px"
- v-if="echarlist3.length == 0"
- >
- <div class="imgboxc">
- <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->
- <div class="nulltext" style="font-size:14px;">暂无数据</div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
- </template>
-
- <script>
- import * as echarts from "echarts";
- import { mapGetters } from "vuex";
- import { exportMethodPost } from "@/util/util";
- export default {
- name: "consultantBrand",
- data() {
- return {
- houseId: "",
- buildingoptions: [],
- houseList: [],
- dateType: 2,
- tabFlag: 0,
- current: 1,
- size: 30,
- total: 20,
- customtime: [],
- tablist: [],
- deptId: "",
- tableData: [],
- orgType: localStorage.getItem("orgType"),
- options: [],
- value: "1",
- statDateStart: "",
- statDateEnd: "",
- echarlist: [],
- echarlist1: [],
- echarlist2: [],
- echarlist3: [],
- echarlist4: [],
- teamAllLevel: [],
- teamAllLevels: [],
- teamAllLevelid: "",
- teamAllLeve2id: "",
- teamAllLeve2: [],
- teamAllLevels: [],
- teamAllLevelsId: '',
- sum1: "",
- avg1: "",
- num1: "",
-
- sum2: "",
- avg2: "",
- num2: "",
-
- sum3: "",
- avg3: "",
- num3: "",
-
- sum4: "",
- avg4: "",
- num4: "",
-
- sum5: "",
- avg5: "",
- num5: "",
- houseList: [],
- role: "",
- };
- },
- computed: {
- ...mapGetters(["permissions"]),
- },
- created() {
- this.sta_men_downLoad = this.permissions["sta_men_downLoad"];
- },
- mounted() {
- this.role = localStorage.getItem("orgType");
- if (this.role == 3) {
- this.houseId = localStorage.getItem("houseId");
- this.tabtimetap(4);
- this.deptFindList();
- this.teamAllLeve();
- } else {
- this.zkhousePage();
- }
- },
- methods: {
- // 排名颜色
- topThreeColor(index) {
- let str = ''
- switch (index) {
- case 0:
- str = '#F54D3F'
- break
- case 1:
- str = '#FF981E'
- break
- case 2:
- str = '#FFCC00'
- break
- default:
- str = '#E5F0FF'
- break
- }
-
- return str
- },
-
- downLoad() {
- let obj = {
- houseId: this.houseId,
- statDateStart: this.statDateStart,
- statDateEnd: this.statDateEnd,
- deptId: this.deptId,
- dateType: this.dateType == 7 ? null : this.dateType,
- type: 1,
- current: 1,
- size: 1,
- };
- // exportMethodPost()
- exportMethodPost(
- "autoSR/cusStageStatistics/accountRankExport",
- "顾问排名",
- obj
- );
- },
- houseChange() {
- this.customtime = [];
- this.TimetoAhoose = 4;
- this.statDateStart = "";
- this.statDateEnd = "";
- this.sum1 = "";
- this.avg1 = "";
- this.num1 = "";
-
- this.sum2 = "";
- this.avg2 = "";
- this.num2 = "";
-
- this.sum3 = "";
- this.avg3 = "";
- this.num3 = "";
-
- this.sum4 = "";
- this.avg4 = "";
- this.num4 = "";
-
-
- this.sum5 = "";
- this.avg5 = "";
- this.num5 = "";
- this.tableData = [];
- this.tabFlag = 0;
- this.echarlist = [];
- this.echarlist1 = [];
- this.echarlist2 = [];
- this.echarlist3 = [];
- this.echarlist4 = [];
- this.tabtimetap(4);
- this.deptFindList();
- this.teamAllLeve();
- },
- zkhousePage() {
- this.$api.api
- .findHouseByUser({
- orgType: localStorage.getItem("orgType"),
- })
- .then((res) => {
- this.houseList = res.data;
- this.houseId = res.data[0].id;
- this.tabtimetap(4);
- this.deptFindList();
- this.teamAllLeve();
- });
- },
- async deptChange() {
- await this.init();
- },
- // 获取一级
- teamAllLeve() {
- this.teamAllLevel = [{ name: "平均执行", value: "" }];
- this.teamAllLeve2 = [{ name: "总次数", value: "" }];
- this.teamAllLevels = [{name: '总次数', value: ''}]
- let pamaet = {
- houseId: this.houseId,
- dateType: 0,
- statDateStart: this.statDateStart,
- statDateEnd: this.statDateEnd,
- };
- if (this.dateType == 7) {
- pamaet.dateType = null;
- } else {
- pamaet.dateType = this.dateType;
- }
- this.$api.http.teamAllLevel(pamaet).then((res) => {
- let arr1 = res.data.resultsList || [];
- let arr2 = res.data.sensitiveWordsList || [];
- arr1.map((item) => {
- this.teamAllLevel.push({
- name: item.name,
- value: item.marketingId,
- });
- });
- arr2.map((item) => {
- this.teamAllLeve2.push({
- name: item.words,
- value: item.words,
- });
- });
- this.teamAllLevelid = "";
- this.teamAllLeve2id = "";
- });
- },
- deptFindList() {
- this.options = [];
- // 获取团队
- this.$api.http
- .overviewfindList({
- houseId: this.houseId,
- })
- .then((res) => {
- let userinfo = JSON.parse(sessionStorage.getItem("zk-userInfo"));
- if (userinfo.content.deptType == 1) {
- this.options.push(...res.data);
- this.deptId = this.options[0].deptId;
- } else {
- this.options = [
- {
- name: "全部",
- deptId: "",
- },
- ];
- this.deptId = "";
- this.options.push(...res.data);
- }
-
- this.accountRank();
- });
- },
- async init() {
- this.accountRank();
- this.echarlist = await this.accountRankTOP10(1);
- this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");
- this.echarlist2 = await this.accountRankTOP10(2);
- this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);
- this.echarlist4 = await this.accountRankTOP10(5, "", this.teamAllLeve2id);
- },
- // 获取图标
- async accountRankTOP10(type, marketingId = "", words = "") {
- let res = await this.$api.api.accountRankTOP10({
- houseId: this.houseId,
- statDateStart: this.statDateStart,
- statDateEnd: this.statDateEnd,
-
- deptId: this.deptId,
- dateType: this.dateType == 7 ? null : this.dateType,
- type,
- marketingId,
- words,
- });
- this["sum" + type] = res.data.sum || 0;
- this["num" + type] = res.data.num || 0;
- this["avg" + type] = res.data.avg || 0;
- let arr = [];
- let max = 0;
- let newarr = res.data.list || [];
- if (newarr.length != 0) {
- res.data.list.map((item) => {
- let obj = {};
- if (type == 1) {
- obj.name = item.accountName;
- obj.zxl = item.activeCustomer;
- arr.push(obj);
- } else if (type == 2) {
- obj.name = item.accountName;
- obj.zxl = Math.floor(item.sumDuration / 60);
- if (max < obj.zxl) {
- max = obj.zxl;
- }
- arr.push(obj);
- } else if (type == 3) {
- obj.name = item.accountName;
- obj.zxl = item.fraction;
- arr.push(obj);
- } else if(type == 5) {
- obj.name = item.accountName;
- obj.zxl = item.unTagCustomer;
- arr.push(obj);
- } else {
- obj.name = item.accountName;
- obj.zxl = item.prohibitedCustomer;
- arr.push(obj);
- }
- });
- }
-
- if (type == 2) {
- arr.forEach((item) => {
- item.percentage = (item.zxl / max) * 100;
- });
- }
-
- if (type == 3) {
- arr = arr;
- }
-
- if (type == 4) {
- console.log(
- arr,
- "arr4,ajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjaksl"
- );
- arr = this.dealData(arr);
- }
- if (type == 5) {
- arr = this.dealData(arr);
- }
- return arr;
- },
- accountRank() {
- this.$api.api
- .accountRank({
- houseId: this.houseId,
- statDateStart: this.statDateStart,
- statDateEnd: this.statDateEnd,
- current: this.current,
- size: this.size,
- deptId: this.deptId,
- dateType: this.dateType == 7 ? null : this.dateType,
- })
- .then((res) => {
- this.tableData = res.data.records;
- // 数据处理
- // 需要两个数组,一个用来展示
- this.deailDate();
- this.total = res.data.total;
- });
- },
- confirmtime() {
- this.dateType = 7;
- this.statDateStart = this.customtime[0];
- this.statDateEnd = this.customtime[1];
- this.init();
- },
- deailDate() {
- this.tablist = [];
- // 当他是第一个 小将
- if (this.tabFlag == 0) {
- this.tableData[0].resultsList.map((item, idx) => {
- let obj = {};
- obj.label = item.name;
- obj.props = "str" + idx;
- this.tablist.push(obj);
- });
- this.tableData.map((item) => {
- this.tablist.map((item1, idx) => {
- item[item1.props] = item.resultsList[idx].zxl;
- });
- });
- } else {
- this.tableData[0].sensitiveWordsList.map((item, idx) => {
- let obj = {};
- obj.label = item.words;
- obj.props = "str" + idx;
- this.tablist.push(obj);
- });
- this.tableData.map((item) => {
- this.tablist.map((item1, idx) => {
- item[item1.props] = item.sensitiveWordsList[idx].num;
- });
- });
- }
- },
- //平均执行率切换一级
- async teamAllLevelidtap() {
- // this.teamData3();
- this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");
- },
- //违禁接待次数一级切换
- async teamAllLeve2tap() {
- // this.teamData5();
- this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);
- },
- echarCreat() {
- let myChart = echarts.init(document.getElementById("echar"));
- let option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- color: [
- "#66AFF5",
- "#FABD2B",
- "#6F8EDC",
- "#FFCF8F",
- "#F98120",
- "#1CC99E",
- "#9474FB",
- "#657292",
- "#7A6A99",
- "#BF5D52",
- "#EE6666",
- "#77B7E4",
- "#E6A065",
- "#9D5139",
- "#C1AA88",
- "#F87F7A",
- "#F6CF74",
- "#7F5506",
- "#88BB9B",
- "#6E99AA",
- "#5789D0",
- ],
- legend: {},
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- xAxis: {
- type: "value",
- boundaryGap: [0, 0.01],
- },
- yAxis: {
- type: "category",
- data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
- },
- series: [
- {
- type: "bar",
- data: [19325, 23438, 31000, 121594, 134141, 681807],
- },
- ],
- };
- myChart.setOption(option);
- },
- handleCurrentChange(e) {
- this.current = e;
- this.accountRank();
- },
- handleSizeChange(e) {
- this.size = e;
- this.accountRank();
- },
- //切换时间
- tabtimetap(index) {
- this.statDateStart = "";
- this.statDateEnd = "";
- this.dateType = index;
- this.init();
- },
- tabFlagChange(idx) {
- this.tabFlag = idx;
- this.deailDate();
- },
- dealData(arr) {
- console.log(arr, "arr");
- let num = Math.max.apply(
- Math,
- arr.map(function (o) {
- return o.zxl;
- })
- ); //结果:3
- console.log(num, "nums");
- arr.map((item) => {
- if (num != 0) {
- item.zxl1 = Math.floor((item.zxl / num) * 100);
- } else {
- item.zxl1 = 0;
- }
- });
- console.log(arr, "arr2");
- return arr;
- },
- },
- };
- </script>
-
- <style scoped="scoped" lang="scss" >
- .sequenceNum {
- display: flex;
- width: 28px;
- height: 24px;
- justify-content: center;
- align-items: center;
- background: #E5F0FF;
- border-radius: 15px;
- color: #333333;
- margin-right: 10px;
- }
- .box-center {
- width: 100%;
- padding: 15px;
- min-width: 1000px;
- padding-bottom: 100px;
- }
- .cen-tab {
- width: 100%;
- padding: 15px;
- background: #ffffff;
- margin-top: 15px;
- }
- .tophove {
- color: #ffffff;
- background: #2671e2;
- }
- .app-titel1 {
- width: 100%;
- height: 70px;
- background: #ffffff;
- // box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
- border-radius: 4px;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- .titel-text {
- height: 100%;
- font-size: 18px;
- font-weight: 600;
- color: #32363d;
- line-height: 70px;
- margin-left: 30px;
- }
- .toptimeqhuan {
- width: 190px;
- height: 32px;
- background: #ffffff;
- border-radius: 4px;
- border: 1px solid #e0e0e0;
- display: flex;
- align-items: center;
- overflow: hidden;
- margin-left: 20px;
- cursor: pointer;
- }
- .toptimeqhuan div {
- flex: 1;
- text-align: center;
- line-height: 32px;
- font-size: 16px;
- }
- }
-
- .app-top {
- // width: 100%;
- width: calc(100% - 270px);
- position: fixed;
- z-index: 999;
- margin-top: -16px;
- background: #ffffff;
- box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
- box-shadow: 0px 0px 10px 0px #dadada;
- border-radius: 4px;
- padding-top: 15px;
- padding-bottom: 15px;
- .app-titel {
- width: 100%;
- display: flex;
- align-items: center;
- .titel-text {
- height: 100%;
- font-size: 16px;
- font-weight: 600;
- color: #32363d;
- text-indent: 30px;
- }
- .toptimeqhuan {
- width: 190px;
- height: 32px;
- background: #ffffff;
- border-radius: 4px;
- border: 1px solid #e0e0e0;
- display: flex;
- align-items: center;
- overflow: hidden;
- margin-left: 20px;
- cursor: pointer;
- }
- .toptimeqhuan div {
- flex: 1;
- text-align: center;
- line-height: 32px;
- font-size: 14px;
- }
- }
- }
-
- .app-box-san {
- width: 100%;
- min-height: 400px;
- display: flex;
- margin-top: 15px;
- .zuo {
- flex: 1;
- height: 100%;
- margin-right: 15px;
- background: #ffffff;
- border-radius: 4px;
- .title {
- width: 100%;
- height: 55px;
- border-bottom: 1px solid #e0e0e0;
- display: flex;
- align-content: center;
- .text1 {
- flex: 2;
- line-height: 55px;
- text-indent: 20px;
- font-weight: 500;
- font-size: 16px;
- color: #333333;
- }
- .text2 {
- flex: 1;
- height: 55px;
- display: flex;
- align-items: center;
- }
- }
- }
- .you {
- height: 100%;
- flex: 1;
- background: #ffffff;
- border-radius: 4px;
- .title {
- width: 100%;
- height: 55px;
- border-bottom: 1px solid #e0e0e0;
- display: flex;
- align-content: center;
- .text1 {
- flex: 2;
- line-height: 55px;
- text-indent: 20px;
- font-weight: 500;
- font-size: 16px;
- color: #333333;
- }
- .text2 {
- flex: 1;
- height: 55px;
- display: flex;
- align-items: center;
- }
- }
- }
- }
-
- .hejisan {
- width: 92%;
- margin: 0 auto;
- display: flex;
- padding-top: 10px;
- padding-bottom: 10px;
- .text1-1 {
- color: #666666;
- }
- .text1-2 {
- color: #333333;
- margin-top: 10px;
- font-weight: bold;
- }
- }
-
- // 进度条
- .jinbox {
- width: 100%;
- height: 18px;
- line-height: 18px;
- display: flex;
- font-size: 16px;
- color: #2c3542;
- margin-top: 24px;
- .jinboxtit {
- width: 14%;
- height: 18px;
- padding-right: 6px;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .jinbox-box {
- position: relative;
- width: 75%;
- height: 100%;
- border-radius: 8px;
- background: #f2f2f2;
- }
- .boxbaifenbi {
- height: 100%;
- background: #60d7a0;
- border-radius: 8px;
- }
- .boxbaifenbi2 {
- height: 100%;
- background: #5b8ff9;
- }
- .jinboxbott {
- width: 16%;
- display: flex;
- justify-content: flex-end;
- }
- }
- .div-lab {
- display: flex;
- margin: 5px;
- }
- .div-inp {
- width: 200px;
- }
- .label {
- font-size: 14px;
- font-weight: 400;
- color: #32363d;
- line-height: 32px;
- margin-left: 15px;
- min-width: 40px;
- }
- /deep/ .el-table__header-wrapper{
- thead{
- tr{
- th{
- background: #F5F7FA;
- color: #333333;
- }
- }
- }
- }
- </style>
|