liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
539 Commits
4 Branches
45 MiB
 
 
 
Tree: d0a7878df1
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'd0a7878df1'
${ noResults }
zkPCproject/src/views/Statistics/TheTeamCompared.vue

1192 lines
35 KiB
Raw Blame History 

  1. <template>

  2.   <div class="box-center">

  3.     <!-- 头 -->

  4.     <div class="app-top">

  5.       <div class="app-titel" v-if="role != 3" style="margin-bottom: 10px">

  6.         <div class="titel-text">项目选择:</div>

  7.         <div style="margin-left: 26px">

  8.           <el-select v-model="houseId" placeholder="请选择" filterable @change="houseChange">

  9.             <el-option v-for="item in houseList" :key="item.id" :label="item.propertyName" :value="item.id">

  10.             </el-option>

  11.           </el-select>

  12.         </div>

  13.       </div>

  14. 

  15.       <!-- <div class="app-titel">

  16.         <div style="text-indent: 30px;font-weight: bold;">接待时间:</div>

  17.         <div class="toptimeqhuan">

  18.           <div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">

  19.             近7天

  20.           </div>

  21.           <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">

  22.             近15天

  23.           </div>

  24.           <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">

  25.             近30天

  26.           </div>

  27.         </div>

  28.         <div style="margin-left: 26px">

  29.           <el-date-picker v-model="customtime" @change="confirmtime()" type="daterange" :clearable="false"

  30.             range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"

  31.             start-placeholder="开始日期" end-placeholder="结束日期">

  32.           </el-date-picker>

  33.         </div>

  34.         <div style="margin-left: auto; margin-right: 10px" v-if="sta_team_downLoad">

  35.           <el-button @click="downLoad" icon="el-icon-download">导出</el-button>

  36.         </div>

  37.       </div> -->

  38.       <div class="app-titel projectBackend">

  39.         <div class="titel-text">筛选日期：</div>

  40.         <div style="margin-left: 14px;">

  41.           <el-button

  42.             :class="{ 'el-button--primary': TimetoAhoose == 0 }"

  43.             @click="tabtimetap(0)"

  44.             >今天</el-button

  45.           >

  46.           <el-button

  47.             :class="{ 'el-button--primary': TimetoAhoose == 4 }"

  48.             @click="tabtimetap(4)"

  49.             >近7天</el-button

  50.           >

  51.           <el-button

  52.             :class="{ 'el-button--primary': TimetoAhoose == 6 }"

  53.             @click="tabtimetap(6)"

  54.             >近30天</el-button

  55.           >

  56.         </div>

  57.         <div style="margin-left: 26px">

  58.           <el-date-picker v-model="customtime" @change="confirmtime()" type="daterange" :clearable="false"

  59.             range-separator="-" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd"

  60.             start-placeholder="开始日期" end-placeholder="结束日期">

  61.           </el-date-picker>

  62.         </div>

  63.       </div>

  64.     </div>

  65.     <!-- 表格 -->

  66.     <div class="cen-tab" :style="{'margin-top':role != 3?'100px':'60px'}">

  67.       <div style="overflow: auto">

  68.         <table>

  69.           <tbody>

  70.             <tr style="background: #F5F7FA;color: #333333;">

  71.               <td v-for="(item, index) in tablsitdata1" :key="index" class="theadtd">

  72.                 {{ item.name }}

  73.               </td>

  74.             </tr>

  75.             <tr v-for="(item, iddex) in tablsitdata2" :key="iddex">

  76.               <td v-if="iddex + 1 == tablsitdata2.length" class="theadtd">

  77.                 合计/平均

  78.               </td>

  79.               <td v-else class="theadtd">{{ iddex + 1 }}</td>

  80. 

  81.               <td class="theadtd">{{ item.deptName }}</td>

  82.               <td class="theadtd">{{ item.receptionCount }}</td>

  83.               <td class="theadtd">{{ item.accountNum }}</td>

  84.               <td class="theadtd">{{ item.activeCustomer || 0 }}</td>

  85.               <td class="theadtd">{{ item.prohibitedCustomer || 0 }}</td>

  86.               <td class="theadtd">

  87.                 {{ Math.floor(item.sumDuration / 60) || 0 }}

  88.               </td>

  89.               <td class="theadtd">{{ item.fraction || 0 }}%</td>

  90.               <td class="theadtd">{{ item.prohibitedZb || 0 }}%</td>

  91.               <td class="theadtd" v-for="(che, ind) in item.resultsList" :key="ind">

  92.                 {{ che.zxl }}%

  93.               </td>

  94.             </tr>

  95.           </tbody>

  96.         </table>

  97.       </div>

  98.     </div>

  99. 

  100.     <div class="app-box-san">

  101.       <div class="zuo">

  102.         <div class="title">

  103.           <div class="text1">接待量排名

  104.             <el-tooltip effect="light" content="筛选时间内，已经结束的接待条数，不包含待接单；" placement="bottom-end">

  105.               <i class="pop"></i>

  106.             </el-tooltip>

  107.           </div>

  108.         </div>

  109.         <div class="hejisan">

  110.           <div class="sanbox1" style="width: 50%;text-align: center;">

  111.             <div class="text1-1">团队总数</div>

  112.             <div class="text1-2">{{ teamobj1.num || 0 }}个</div>

  113.           </div>

  114.           <div class="sanbox1" style="width: 50%;text-align: center;">

  115.             <div class="text1-1">均值</div>

  116.             <div class="text1-2">{{ teamobj1.avg || 0 }}个</div>

  117.           </div>

  118.         </div>

  119.         <div v-if="teamobj1.list.length != 0" style="width: 94%; margin: 0 auto">

  120.           <div class="jinbox" v-for="(item, i) in teamobj1.list" :key="i">

  121.             <!-- <div class="jinboxtit">{{ item.name }}</div> -->

  122.             <span class="sequenceNum" :style="{

  123.               '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',

  124.               'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',

  125.               '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',

  126.             'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',

  127.             }">{{ i + 1 }}</span>

  128.             <div class="jinboxtit">

  129.               <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">

  130.                 <span class="name">{{ item.name }}</span>

  131.               </el-tooltip>

  132.             </div>

  133.             <div class="jinbox-box">

  134.               <!-- <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div> -->

  135.               <div class="boxbaifenbi"

  136.                 :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 + '%' }">

  137.               </div>

  138. 

  139.             </div>

  140.             <div class="jinboxbott">{{ item.zxl }}个</div>

  141.           </div>

  142.         </div>

  143.         <div class="nulllist" v-if="teamobj1.list.length == 0">

  144.           <div class="imgboxc">

  145.             <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->

  146.             <div class="nulltext" style="font-size:14px;">暂无数据</div>

  147.           </div>

  148.         </div>

  149.       </div>

  150.       <div class="you">

  151.         <div class="title">

  152.           <div class="text1">接待时长排名</div>

  153.         </div>

  154.         <div class="hejisan">

  155.           <div class="sanbox1" style="width: 50%;text-align: center;">

  156.             <div class="text1-1">团队总数</div>

  157.             <div class="text1-2">{{ teamobj2.num || 0 }}个</div>

  158.           </div>

  159.           <div class="sanbox1" style="width: 50%;text-align: center;">

  160.             <div class="text1-1">均值</div>

  161.             <div class="text1-2">

  162.               {{ Math.floor(teamobj2.avg / 60) || 0 }}分钟

  163.             </div>

  164.           </div>

  165.         </div>

  166.         <div v-if="teamobj2.list.length != 0" style="width: 94%; margin: 0 auto">

  167.           <div class="jinbox" v-for="(item, i) in teamobj2.list" :key="i">

  168.             <!-- <div class="jinboxtit">{{ item.name }}</div>

  169.             <div class="jinbox-box">

  170.               <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>

  171.             </div> -->

  172.              <span class="sequenceNum" :style="{

  173.               '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',

  174.               'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',

  175.               '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',

  176.             'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',

  177.             }">{{ i + 1 }}</span>

  178.             <div class="jinboxtit">

  179.               <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">

  180.                 <span class="name">{{ item.name }}</span>

  181.               </el-tooltip>

  182.             </div>

  183.             <div class="jinbox-box">

  184.               <!-- <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div> -->

  185.               <div class="boxbaifenbi"

  186.                 :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 + '%' }">

  187.               </div>

  188.             </div>

  189.             <div class="jinboxbott">{{ item.zxl }}分钟</div>

  190.           </div>

  191.         </div>

  192.         <div class="nulllist" v-if="teamobj2.list.length == 0">

  193.           <div class="imgboxc">

  194.             <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->

  195.             <div class="nulltext" style="font-size:14px;">暂无数据</div>

  196.           </div>

  197.         </div>

  198.       </div>

  199.     </div>

  200. 

  201.     <div class="app-box-san">

  202.       <div class="zuo">

  203.         <div class="title">

  204.           <div class="text1">销讲执行率</div>

  205.           <div class="text2">

  206.             <el-select @change="teamAllLevelidtap()" style="width: 90%; margin: 0 auto" v-model="teamAllLevelid"

  207.               placeholder="请选择">

  208.               <el-option v-for="item in teamAllLevel" :key="item.value" :label="item.name" :value="item.value">

  209.               </el-option>

  210.             </el-select>

  211.           </div>

  212.         </div>

  213.         <div class="hejisan">

  214.           <div class="sanbox1" style="width: 50%;text-align: center;">

  215.             <div class="text1-1">团队总数</div>

  216.             <div class="text1-2">{{ teamobj3.num || 0 }}个</div>

  217.           </div>

  218.           <div class="sanbox1" style="width: 50%;text-align: center;">

  219.             <div class="text1-1">均值</div>

  220.             <div class="text1-2">{{ teamobj3.avg || 0 }}%</div>

  221.           </div>

  222.         </div>

  223.         <div v-if="teamobj3.list.length != 0" style="width: 94%; margin: 0 auto">

  224.           <div class="jinbox" v-for="(item, i) in teamobj3.list" :key="i">

  225.              <span class="sequenceNum" :style="{

  226.               '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',

  227.               'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',

  228.               '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',

  229.            'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',

  230.              }">{{ i + 1 }}</span>

  231.             <div class="jinboxtit">

  232.               <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">

  233.                 <span class="name">{{ item.name }}</span>

  234.               </el-tooltip>

  235.             </div>

  236.             <div class="jinbox-box">

  237.               <!-- <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div> -->

  238.               <div class="boxbaifenbi"

  239.                 :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 + '%' }">

  240.               </div>

  241. 

  242.             </div>

  243.             <div class="jinboxbott">{{ item.zxl }}%</div>

  244.           </div>

  245.         </div>

  246.         <div class="nulllist" v-if="teamobj3.list.length == 0">

  247.           <div class="imgboxc">

  248.             <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->

  249.             <div class="nulltext" style="font-size:14px;">暂无数据</div>

  250.           </div>

  251.         </div>

  252.       </div>

  253.       <div class="you">

  254.         <div class="title">

  255.           <div class="text1">销讲能力雷达图</div>

  256.         </div>

  257.         <div id="main" v-if="isshowcd2 == true" style="width: 94%; margin: 0 auto"></div>

  258.         <div class="nulllist" v-if="isshowcd2 == false">

  259.           <div class="imgboxc">

  260.             <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->

  261.             <div class="nulltext" style="font-size:14px;">暂无数据</div>

  262.           </div>

  263.         </div>

  264.       </div>

  265.     </div>

  266. 

  267.     <div class="app-box-san">

  268.       <div class="zuo">

  269.         <div class="title">

  270.           <div class="text1">违禁接待次数

  271.             <el-tooltip effect="light" content="筛选时间内，出现违禁的接待次数，不包含待接单/无效接待/无效违禁；" placement="bottom-end">

  272.               <i class="pop"></i>

  273.             </el-tooltip>

  274.           </div>

  275.           <div class="text2">

  276.             <el-select @change="teamAllLeve2tap()" style="width: 90%; margin: 0 auto" v-model="teamAllLeve2id"

  277.               placeholder="请选择">

  278.               <el-option v-for="item in teamAllLeve2" :key="item.value" :label="item.name" :value="item.value">

  279.               </el-option>

  280.             </el-select>

  281.           </div>

  282.         </div>

  283.         <div class="hejisan">

  284.           <div class="sanbox1" style="width: 50%;text-align: center;">

  285.             <div class="text1-1">团队总数</div>

  286.             <div class="text1-2">{{ teamobj5.num || 0 }}个</div>

  287.           </div>

  288.           <div class="sanbox1" style="width: 50%;text-align: center;">

  289.             <div class="text1-1">均值</div>

  290.             <div class="text1-2">{{ teamobj5.avg || 0 }}次</div>

  291.           </div>

  292.         </div>

  293.         <div v-if="teamobj5.list.length != 0" style="width: 94%; margin: 0 auto">

  294.           <div class="jinbox" v-for="(item, i) in teamobj5.list" :key="i">

  295.             <!-- <div class="jinboxtit">{{ item.name }}</div>

  296.             <div class="jinbox-box">

  297.               <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div>

  298.             </div> -->

  299.              <span class="sequenceNum" :style="{

  300.               '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',

  301.               'color': i + 1 == 1 ? '#FFF' : i + 1 == 2 ? '#FFF' : i + 1 == 3 ? '#FFF' : '#333',

  302.               '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',

  303.            'border': i + 1 == 1 ? '1px solid #FFCAC6' : i + 1 == 2 ? '1px solid #FFD6AA' : i + 1 == 3 ? '1px solid #FFEEAC' : 'none',

  304.              }">{{ i + 1 }}</span>

  305.             <div class="jinboxtit">

  306.               <el-tooltip class="item" effect="dark" :content="item.name" placement="top-start">

  307.                 <span class="name">{{ item.name }}</span>

  308.               </el-tooltip>

  309.             </div>

  310.             <div class="jinbox-box">

  311.               <!-- <div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div> -->

  312.               <div class="boxbaifenbi"

  313.                 :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 + '%' }">

  314.               </div>

  315. 

  316.             </div>

  317.             <div class="jinboxbott">{{ item.zxl }}次</div>

  318.           </div>

  319.         </div>

  320.         <div class="nulllist" v-if="teamobj5.list.length == 0">

  321.           <div class="imgboxc">

  322.             <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->

  323.             <div class="nulltext" style="font-size:14px;">暂无数据</div>

  324.           </div>

  325.         </div>

  326.       </div>

  327.       <div class="you">

  328.         <div class="title">

  329.           <div class="text1">违禁话术雷达图</div>

  330.         </div>

  331.         <div v-if="isshowcd == true" id="main2" style="width: 94%; margin: 0 auto"></div>

  332.         <div class="nulllist" v-if="isshowcd == false">

  333.           <div class="imgboxc">

  334.             <!-- <img class="imgboxc-img" src="/img/nullnull.png" alt="" /> -->

  335.             <div class="nulltext" style="font-size:14px;">暂无数据</div>

  336.           </div>

  337.         </div>

  338.       </div>

  339.     </div>

  340. 

  341.   </div>

  342. </template>

  343. 

  344. <script>

  345. import * as echarts from "echarts";

  346. import { mapGetters } from "vuex";

  347. import { exportMethodPost } from "@/util/util";

  348. export default {

  349.   data() {

  350.     return {

  351.       houseId: "",

  352.       TimetoAhoose: 4,

  353.       customtime: [],

  354.       statDateStart: "",

  355.       statDateEnd: "",

  356.       tablsitdata1: [],

  357.       tablsitdata2: [],

  358.       teamobj1: {

  359.         avg: "",

  360.         list: [],

  361.         num: "",

  362.       },

  363.       teamobj2: {

  364.         avg: "",

  365.         list: [],

  366.         num: "",

  367.       },

  368.       teamobj3: {

  369.         avg: "",

  370.         list: [],

  371.         num: "",

  372.       },

  373.       teamobj5: {

  374.         avg: "",

  375.         list: [],

  376.         num: "",

  377.       },

  378.       teamAllLevel: [],

  379.       teamAllLevelid: "",

  380.       teamAllLeve2: [],

  381.       teamAllLeve2id: "",

  382.       ceratelist: [],

  383.       role: "",

  384.       houseList: [],

  385.       isshowcd: true,

  386.       isshowcd2: true,

  387.     };

  388.   },

  389.   computed: {

  390.     ...mapGetters(["permissions"]),

  391.   },

  392.   created() {

  393.     this.sta_team_downLoad = this.permissions["sta_team_downLoad"];

  394.   },

  395.   mounted() {

  396.     this.role = localStorage.getItem("orgType");

  397.     if (this.role == 3) {

  398.       this.houseId = localStorage.getItem("houseId");

  399.       this.allhttp();

  400.     } else {

  401.       this.zkhousePage();

  402.     }

  403.   },

  404.   methods: {

  405.     downLoad() {

  406.       let pamaet = {

  407.         houseId: this.houseId,

  408.         dateType: 0,

  409.         statDateStart: this.statDateStart,

  410.         statDateEnd: this.statDateEnd,

  411.       };

  412.       if (this.TimetoAhoose == 7) {

  413.         pamaet.dateType = null;

  414.       } else {

  415.         pamaet.dateType = this.TimetoAhoose;

  416.       }

  417.       exportMethodPost(

  418.         "autoSR/cusStageStatistics/teamTableExport",

  419.         "团队对比",

  420.         pamaet

  421.       );

  422.     },

  423.     zkhousePage() {

  424.       this.$api.api

  425.         .findHouseByUser({

  426.           orgType: localStorage.getItem("orgType"),

  427.         })

  428.         .then((res) => {

  429.           this.houseList = res.data;

  430.           this.houseId = res.data[0].id;

  431.           this.allhttp();

  432.         });

  433.     },

  434.     houseChange() {

  435.       this.customtime = [];

  436.       this.TimetoAhoose = 4;

  437.       this.statDateStart = "";

  438.       this.statDateEnd = "";

  439.       this.allhttp();

  440.     },

  441.     allhttp() {

  442.       this.teamteamTable();

  443.       this.teamData1();

  444.       this.teamData2();

  445.       this.teamData3();

  446.       this.teamData4();

  447.       this.teamData5();

  448.       this.teamData6();

  449.       this.teamAllLeve();

  450.     },

  451.     // 获取一级

  452.     teamAllLeve() {

  453.       this.teamAllLevel = [{ name: "平均执行", value: "" }];

  454.       this.teamAllLeve2 = [{ name: "总次数", value: "" }];

  455.       let pamaet = {

  456.         houseId: this.houseId,

  457.         dateType: 0,

  458.         statDateStart: this.statDateStart,

  459.         statDateEnd: this.statDateEnd,

  460.       };

  461.       if (this.TimetoAhoose == 7) {

  462.         pamaet.dateType = null;

  463.       } else {

  464.         pamaet.dateType = this.TimetoAhoose;

  465.       }

  466.       this.$api.http.teamAllLevel(pamaet).then((res) => {

  467.         let arr1 = res.data.resultsList || [];

  468.         let arr2 = res.data.sensitiveWordsList || [];

  469.         arr1.map((item) => {

  470.           this.teamAllLevel.push({

  471.             name: item.name,

  472.             value: item.marketingId,

  473.           });

  474.         });

  475.         arr2.map((item) => {

  476.           this.teamAllLeve2.push({

  477.             name: item.words,

  478.             value: item.words,

  479.           });

  480.         });

  481.         this.teamAllLevelid = "";

  482.         this.teamAllLeve2id = "";

  483.       });

  484.     },

  485.     //表格

  486.     teamteamTable() {

  487.       this.tablsitdata1 = [

  488.         { name: "序号" },

  489.         { name: "团队" },

  490.         { name: "接待量" },

  491.         { name: "接待顾问" },

  492.         { name: "有效接待" },

  493.         { name: "违禁接待次数" },

  494.         { name: "接待时长（分）" },

  495.         { name: "平均执行率" },

  496.         { name: "违禁接待占比" },

  497.       ];

  498.       let pamaet = {

  499.         houseId: this.houseId,

  500.         dateType: 0,

  501.         statDateStart: this.statDateStart,

  502.         statDateEnd: this.statDateEnd,

  503.       };

  504. 

  505.       if (this.TimetoAhoose == 7) {

  506.         pamaet.dateType = null;

  507.       } else {

  508.         pamaet.dateType = this.TimetoAhoose;

  509.       }

  510.       this.$api.http.teamteamTable(pamaet).then((res) => {

  511.         let newlist = res.data || [];

  512.         this.tablsitdata2 = res.data;

  513.         newlist[0].resultsList.map((item) => {

  514.           this.tablsitdata1.push({ name: item.name });

  515.         });

  516.       });

  517.     },

  518.     //接待量排名

  519.     teamData1() {

  520.       this.teamobj1 = {

  521.         avg: "",

  522.         list: [],

  523.         num: "",

  524.       };

  525.       let pamaet = {

  526.         houseId: this.houseId,

  527.         dateType: 0,

  528.         statDateStart: this.statDateStart,

  529.         statDateEnd: this.statDateEnd,

  530.         type: 1,

  531.       };

  532.       if (this.TimetoAhoose == 7) {

  533.         pamaet.dateType = null;

  534.       } else {

  535.         pamaet.dateType = this.TimetoAhoose;

  536.       }

  537.       this.$api.http.teamData(pamaet).then((res) => {

  538.         let arr = [];

  539.         res.data.list.map((item) => {

  540.           let obj = {};

  541.           obj.name = item.deptName;

  542.           obj.zxl = item.activeCustomer;

  543.           arr.push(obj);

  544.         });

  545.         arr = this.dealData(arr);

  546.         this.teamobj1 = {

  547.           avg: res.data.avg || 0,

  548.           num: res.data.num || 0,

  549.           list: arr || [],

  550.         };

  551.       });

  552.     },

  553.     //录音时长排名

  554.     teamData2() {

  555.       this.teamobj2 = {

  556.         avg: "",

  557.         list: [],

  558.         num: "",

  559.       };

  560.       let pamaet = {

  561.         houseId: this.houseId,

  562.         dateType: 0,

  563.         statDateStart: this.statDateStart,

  564.         statDateEnd: this.statDateEnd,

  565.         type: 2,

  566.       };

  567.       if (this.TimetoAhoose == 7) {

  568.         pamaet.dateType = null;

  569.       } else {

  570.         pamaet.dateType = this.TimetoAhoose;

  571.       }

  572.       this.$api.http.teamData(pamaet).then((res) => {

  573.         let arr = [];

  574.         res.data.list.map((item) => {

  575.           let obj = {};

  576.           obj.name = item.deptName;

  577.           obj.zxl = Math.floor(item.sumDuration / 60);

  578.           arr.push(obj);

  579.         });

  580.         arr = this.dealData(arr);

  581.         this.teamobj2 = {

  582.           avg: res.data.avg || 0,

  583.           num: res.data.num || 0,

  584.           list: arr || [],

  585.         };

  586.       });

  587.     },

  588.     //销讲执行率切换一级

  589.     teamAllLevelidtap() {

  590.       this.teamData3();

  591.     },

  592.     //销讲执行率

  593.     teamData3() {

  594.       this.teamobj3 = {

  595.         avg: "",

  596.         list: [],

  597.         num: "",

  598.       };

  599.       let pamaet = {

  600.         houseId: this.houseId,

  601.         dateType: 0,

  602.         statDateStart: this.statDateStart,

  603.         statDateEnd: this.statDateEnd,

  604.         type: 3,

  605.         marketingId: this.teamAllLevelid,

  606.       };

  607.       if (this.TimetoAhoose == 7) {

  608.         pamaet.dateType = null;

  609.       } else {

  610.         pamaet.dateType = this.TimetoAhoose;

  611.       }

  612.       this.$api.http.teamData(pamaet).then((res) => {

  613.         let arr = [];

  614.         res.data.list.map((item) => {

  615.           let obj = {};

  616.           obj.name = item.deptName;

  617.           obj.zxl = item.fraction;

  618.           arr.push(obj);

  619.         });

  620.         // arr=this.dealData(arr)

  621.         this.teamobj3 = {

  622.           avg: res.data.avg || 0,

  623.           num: res.data.num || 0,

  624.           list: arr || [],

  625.         };

  626.       });

  627.     },

  628.     //销讲雷达图

  629.     teamData4() {

  630.       let pamaet = {

  631.         houseId: this.houseId,

  632.         dateType: 0,

  633.         statDateStart: this.statDateStart,

  634.         statDateEnd: this.statDateEnd,

  635.         type: 4,

  636.       };

  637.       if (this.TimetoAhoose == 7) {

  638.         pamaet.dateType = null;

  639.       } else {

  640.         pamaet.dateType = this.TimetoAhoose;

  641.       }

  642.       this.$api.http.teamData(pamaet).then((res) => {

  643.         let namelist = [];

  644.         let datalist = [];

  645.         let newlinename = [];

  646.         let arr = res.data.list || [];

  647. 

  648.         if (arr.length != 0) {

  649.           arr.map((item) => {

  650.             namelist.push(item.deptName);

  651.             datalist.push({

  652.               name: item.deptName,

  653.               value: [],

  654.             });

  655.           });

  656.           arr[0].resultsList.map((item) => {

  657.             newlinename.push({

  658.               name: item.name,

  659.               max: 100,

  660.             });

  661.           });

  662.           arr.map((item, index) => {

  663.             datalist.map((che) => {

  664.               if (item.deptName == che.name) {

  665.                 item.resultsList.map((as) => {

  666.                   che.value.push(as.zxl);

  667.                 });

  668.               }

  669.             });

  670.           });

  671.         }

  672. 

  673.         this.initecah(namelist, datalist, newlinename);

  674.       });

  675.     },

  676.     //违禁话术雷达图

  677.     teamData6() {

  678.       let pamaet = {

  679.         houseId: this.houseId,

  680.         dateType: 0,

  681.         statDateStart: this.statDateStart,

  682.         statDateEnd: this.statDateEnd,

  683.         type: 6,

  684.       };

  685.       if (this.TimetoAhoose == 7) {

  686.         pamaet.dateType = null;

  687.       } else {

  688.         pamaet.dateType = this.TimetoAhoose;

  689.       }

  690.       this.$api.http.teamData(pamaet).then((res) => {

  691.         let namelist = [];

  692.         let datalist = [];

  693.         let newlinename = [];

  694.         let arr = res.data.list || [];

  695.         if (arr.length != 0) {

  696.           arr.map((item) => {

  697.             namelist.push(item.deptName);

  698.             datalist.push({

  699.               name: item.deptName,

  700.               value: [],

  701.             });

  702.           });

  703.           arr[0].sensitiveWordsList.map((item) => {

  704.             newlinename.push({

  705.               name: item.words,

  706.               max: 100,

  707.             });

  708.           });

  709.           arr.map((item, index) => {

  710.             datalist.map((che) => {

  711.               if (item.deptName == che.name) {

  712.                 item.sensitiveWordsList.map((as) => {

  713.                   che.value.push(as.num);

  714.                 });

  715.               }

  716.             });

  717.           });

  718.         }

  719.         this.initecah2(namelist, datalist, newlinename);

  720.       });

  721.     },

  722. 

  723.     initecah(namelist, datalist, newlinename) {

  724.       if (datalist.length == 0) {

  725.         this.isshowcd2 = false;

  726.         return;

  727.       } else {

  728.         this.isshowcd2 = true;

  729.       }

  730.       echarts.init(document.getElementById("main")).dispose();

  731.       var chartDom = document.getElementById("main");

  732.       var myChart = echarts.init(chartDom);

  733.       var option;

  734.       option = {

  735.         color: [

  736.           "#6F8EDC",

  737.           "#EE6666",

  738.           "#F98120",

  739.           "#1CC99E",

  740.           "#9474FB",

  741.           "#66AFF5",

  742.           "#FABD2B",

  743.           "#FFCF8F",

  744.           "#657292",

  745.           "#7A6A99",

  746.           "#BF5D52",

  747.           "#77B7E4",

  748.           "#E6A065",

  749.           "#9D5139",

  750.           "#C1AA88",

  751.           "#F87F7A",

  752.           "#F6CF74",

  753.           "#7F5506",

  754.           "#88BB9B",

  755.           "#6E99AA",

  756.           "#5789D0",

  757.         ],

  758.         tooltip: {

  759.           trigger: "axis",

  760.         },

  761.         legend: {

  762.           data: namelist,

  763.           right: "10",

  764.           top: "10",

  765.           icon:"roundRect"

  766.         },

  767.         color: ["#2671E2", "#F3787B"],

  768.         radar: {

  769.           // shape: 'circle',

  770.           indicator: newlinename,

  771.         },

  772.         series: [

  773.           {

  774.             type: "radar",

  775.             tooltip: {

  776.               trigger: "item",

  777.             },

  778.             data: datalist,

  779.           },

  780.         ],

  781.       };

  782.       option && myChart.setOption(option);

  783.       window.addEventListener("resize", () => {

  784.         myChart.resize();

  785.       });

  786.     },

  787.     initecah2(namelist, datalist, newlinename) {

  788.       if (datalist.length == 0) {

  789.         this.isshowcd = false;

  790.         return;

  791.       } else {

  792.         this.isshowcd = true;

  793.       }

  794.       echarts.init(document.getElementById("main2")).dispose();

  795.       var chartDom = document.getElementById("main2");

  796.       var myChart = echarts.init(chartDom);

  797.       var option;

  798.       option = {

  799.         color: [

  800.           "#6F8EDC",

  801.           "#EE6666",

  802.           "#F98120",

  803.           "#1CC99E",

  804.           "#9474FB",

  805.           "#66AFF5",

  806.           "#FABD2B",

  807.           "#FFCF8F",

  808.           "#657292",

  809.           "#7A6A99",

  810.           "#BF5D52",

  811.           "#77B7E4",

  812.           "#E6A065",

  813.           "#9D5139",

  814.           "#C1AA88",

  815.           "#F87F7A",

  816.           "#F6CF74",

  817.           "#7F5506",

  818.           "#88BB9B",

  819.           "#6E99AA",

  820.           "#5789D0",

  821.         ],

  822.         tooltip: {

  823.           trigger: "axis",

  824.         },

  825.         legend: {

  826.           data: namelist,

  827.           right: "10",

  828.           top: "10",

  829.           icon:"roundRect"

  830.         },

  831.         color: ["#2671E2", "#F3787B"],

  832.         radar: {

  833.           // shape: 'circle',

  834.           indicator: newlinename,

  835.         },

  836.         series: [

  837.           {

  838.             type: "radar",

  839.             tooltip: {

  840.               trigger: "item",

  841.             },

  842.             data: datalist,

  843.           },

  844.         ],

  845.       };

  846.       option && myChart.setOption(option);

  847.       window.addEventListener("resize", () => {

  848.         myChart.resize();

  849.       });

  850.     },

  851. 

  852.     //违禁接待次数一级切换

  853.     teamAllLeve2tap() {

  854.       this.teamData5();

  855.     },

  856.     //违禁接待次数

  857.     teamData5() {

  858.       this.teamobj5 = {

  859.         avg: "",

  860.         list: [],

  861.         num: "",

  862.       };

  863.       let pamaet = {

  864.         houseId: this.houseId,

  865.         dateType: 0,

  866.         statDateStart: this.statDateStart,

  867.         statDateEnd: this.statDateEnd,

  868.         type: 5,

  869.         words: this.teamAllLeve2id,

  870.       };

  871.       if (this.TimetoAhoose == 7) {

  872.         pamaet.dateType = null;

  873.       } else {

  874.         pamaet.dateType = this.TimetoAhoose;

  875.       }

  876.       this.$api.http.teamData(pamaet).then((res) => {

  877.         let arr = [];

  878.         res.data.list.map((item) => {

  879.           let obj = {};

  880.           obj.name = item.deptName;

  881.           obj.zxl = item.prohibitedCustomer;

  882.           arr.push(obj);

  883.         });

  884.         arr = this.dealData(arr);

  885.         this.teamobj5 = {

  886.           avg: res.data.avg || 0,

  887.           num: res.data.num || 0,

  888.           list: arr || [],

  889.         };

  890.       });

  891.     },

  892. 

  893.     // 自定义时间

  894.     confirmtime() {

  895.       this.TimetoAhoose = 7;

  896.       (this.statDateStart = this.customtime[0]),

  897.         (this.statDateEnd = this.customtime[1]);

  898.       this.allhttp();

  899.     },

  900.     //切换时间

  901.     tabtimetap(index) {

  902.       this.TimetoAhoose = index;

  903.       this.statDateStart = "";

  904.       this.statDateEnd = "";

  905.       this.customtime = [];

  906.       this.allhttp();

  907.     },

  908.     dealData(arr) {

  909.       console.log(arr);

  910.       let num = Math.max.apply(

  911.         Math,

  912.         arr.map(function (o) {

  913.           return o.zxl;

  914.         })

  915.       ); //结果：3

  916.       arr.map((item) => {

  917.         item.zxl1 = Math.floor((item.zxl / num) * 100) || 0;

  918.       });

  919.       return arr;

  920.     },

  921.   },

  922. };

  923. </script>

  924. 

  925. <style scoped="scoped" lang="scss" >

  926. /* 添加table滚动条 */

  927. table {

  928.   border-collapse: collapse;

  929.   width: 100%;

  930. }

  931. 

  932. tbody {

  933.   display: block;

  934.   // width: 100%;

  935.   // overflow-x: auto;

  936.   height: 220px;

  937. }

  938. 

  939. tbody tr {

  940.   display: table;

  941.   width: 100%;

  942.   table-layout: fixed;

  943.   // word-break: break-all;

  944. }

  945. 

  946. .box-center {

  947.   width: 100%;

  948.   padding: 20px 15px;

  949.   min-width: 1000px;

  950. }

  951. 

  952. .cen-tab {

  953.   width: 100%;

  954.   padding: 15px;

  955.   background: #ffffff;

  956.   margin-top: 60px;

  957. }

  958. 

  959. .tophove {

  960.   color: #ffffff;

  961.   background: #2671e2;

  962. }

  963. 

  964. .app-top {

  965.   // width: 100%;

  966.   width: calc(100% - 270px);

  967.   position: fixed;

  968.   z-index: 999;

  969.   margin-top: -16px;

  970.   background: #ffffff;

  971.   box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);

  972.   box-shadow: 0px 0px 10px 0px #dadada;

  973.   border-radius: 4px;

  974.   padding-top: 15px;

  975.   padding-bottom: 15px;

  976. }

  977. 

  978. .app-titel {

  979.   width: 100%;

  980.   display: flex;

  981.   align-items: center;

  982. 

  983.   .titel-text {

  984.     height: 100%;

  985.     font-size: 16px;

  986.     color: #32363d;

  987.     text-indent: 30px;

  988.   }

  989. 

  990.   .toptimeqhuan {

  991.     width: 190px;

  992.     height: 32px;

  993.     background: #ffffff;

  994.     border-radius: 4px;

  995.     border: 1px solid #e0e0e0;

  996.     display: flex;

  997.     align-items: center;

  998.     overflow: hidden;

  999.     margin-left: 20px;

  1000.     cursor: pointer;

  1001.   }

  1002. 

  1003.   .toptimeqhuan div {

  1004.     flex: 1;

  1005.     text-align: center;

  1006.     line-height: 32px;

  1007.     font-size: 14px;

  1008.   }

  1009. }

  1010. 

  1011. .app-box-san {

  1012.   width: 100%;

  1013.   min-height: 400px;

  1014.   display: flex;

  1015.   margin-top: 15px;

  1016. 

  1017.   .zuo {

  1018.     flex: 1;

  1019.     margin-right: 15px;

  1020.     background: #ffffff;

  1021.     border-radius: 4px;

  1022. 

  1023.     .title {

  1024.       width: 100%;

  1025.       height: 55px;

  1026.       // border-bottom: 1px solid #e0e0e0;

  1027.       display: flex;

  1028.       align-content: center;

  1029. 

  1030.       .text1 {

  1031.         flex: 2;

  1032.         line-height: 55px;

  1033.         text-indent: 20px;

  1034.         font-weight: 500;

  1035.         font-size: 16px;

  1036.         color: #333333;

  1037.             display: flex;

  1038.             align-items: center;

  1039.       }

  1040. 

  1041.       .text2 {

  1042.         flex: 1;

  1043.         height: 55px;

  1044.         display: flex;

  1045.         align-items: center;

  1046.       }

  1047.     }

  1048.   }

  1049. 

  1050.   .you {

  1051.     flex: 1;

  1052.     background: #ffffff;

  1053.     border-radius: 4px;

  1054. 

  1055.     .title {

  1056.       width: 100%;

  1057.       height: 55px;

  1058.       // border-bottom: 1px solid #e0e0e0;

  1059.       display: flex;

  1060.       align-content: center;

  1061. 

  1062.       .text1 {

  1063.         flex: 2;

  1064.         line-height: 55px;

  1065.         text-indent: 20px;

  1066.         font-weight: 500;

  1067.         font-size: 16px;

  1068.         color: #333333;

  1069.             display: flex;

  1070.             align-items: center;

  1071.       }

  1072. 

  1073.       .text2 {

  1074.         flex: 1;

  1075.         height: 55px;

  1076.         display: flex;

  1077.         align-items: center;

  1078.       }

  1079.     }

  1080. 

  1081.     #main {

  1082.       height: calc(400px - 55px);

  1083.     }

  1084. 

  1085.     #main2 {

  1086.       height: calc(400px - 55px);

  1087.     }

  1088.   }

  1089. }

  1090. 

  1091. .hejisan {

  1092.   width: 92%;

  1093.   margin: 15px auto;

  1094.   display: flex;

  1095.   // padding-top: 10px;

  1096.   // padding-bottom: 10px;

  1097. 

  1098.   .text1-1 {

  1099.     color: #666666;

  1100.   }

  1101. 

  1102.   .text1-2 {

  1103.     color: #333333;

  1104.     margin-top: 10px;

  1105.     font-weight: bold;

  1106.   }

  1107. }

  1108. 

  1109. // 进度条

  1110. .jinbox {

  1111.   width: 100%;

  1112.   height: 18px;

  1113.   line-height: 18px;

  1114.   display: flex;

  1115.   font-size: 16px;

  1116.   color: #2c3542;

  1117.   margin-top: 24px;

  1118.   align-items: center;

  1119. 

  1120.   .jinboxtit {

  1121.     width: 14%;

  1122.     height: 18px;

  1123.     padding-right: 6px;

  1124.     white-space: nowrap;

  1125.     text-overflow: ellipsis;

  1126.     overflow: hidden;

  1127.   }

  1128. 

  1129.   .jinbox-box {

  1130.     width: 75%;

  1131.     height: 100%;

  1132.     border-radius: 8px;

  1133.     background: #f2f2f2;

  1134.   }

  1135. 

  1136.   .boxbaifenbi {

  1137.     height: 100%;

  1138.     background: #60d7a0;

  1139.     border-radius: 8px;

  1140.     max-width: 100%;

  1141.   }

  1142. 

  1143.   .boxbaifenbi2 {

  1144.     height: 100%;

  1145.     background: #5b8ff9;

  1146.     max-width: 100%;

  1147.   }

  1148. 

  1149.   .jinboxbott {

  1150.     width: 16%;

  1151.     text-indent: 16px;

  1152.   }

  1153. }

  1154. 

  1155. .theadtd {

  1156.   width: 140px;

  1157.   height: 48px;

  1158.   border-bottom: 1px solid #E0E0E0;

  1159.   text-align: center;

  1160.   line-height: 48px;

  1161.   font-size: 14px;

  1162.   color: #32363d;

  1163. }

  1164. 

  1165. .nulllist {

  1166.   flex: 1;

  1167. }

  1168. .sequenceNum {

  1169.       display: flex;

  1170.       width: 26px;

  1171.       height: 24px;

  1172.       justify-content: center;

  1173.       align-items: center;

  1174.       background: #E5F0FF;

  1175.       border-radius: 15px;

  1176.       color: #333333;

  1177.       margin-right: 10px;

  1178.     }

  1179.     .pop{

  1180.   display: inline-block;

  1181.   width: 18px;

  1182.   height: 18px;

  1183.   background: url('../../../public/img/pop.png') no-repeat;

  1184.   background-size: 100%;

  1185.   margin-left: 6px;

  1186. }

  1187. /deep/ .el-button--primary{

  1188.   background: #2671E2 !important;

  1189.   border: 1px solid #2671E2 !important;

  1190. }

  1191. </style>