liumin
/
zkPCproject
0
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
504 提交
4 分支
45 MiB
 
 
 
目录树: 5c8683cd30
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '5c8683cd30'
${ noResults }
zkPCproject/src/views/Statistics/ConsultantBrand.vue

1330 行
40 KiB
原始文件 Blame 文件历史 

  1. <template>

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

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

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

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

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

  7.           <el-select

  8.             v-model="houseId"

  9.             filterable

  10.             placeholder="请选择"

  11.             @change="houseChange"

  12.           >

  13.             <el-option

  14.               v-for="item in houseList"

  15.               :key="item.id"

  16.               :label="item.propertyName"

  17.               :value="item.id"

  18.             >

  19.             </el-option>

  20.           </el-select>

  21.         </div>

  22.       </div>

  23.       <div class="app-titel">

  24.         <div style="text-indent: 30px">接待时间:</div>

  25.         <div class="toptimeqhuan">

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

  27.             近7天

  28.           </div>

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

  30.             近15天

  31.           </div>

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

  33.             近30天

  34.           </div>

  35.         </div>

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

  37.           <el-date-picker

  38.             v-model="customtime"

  39.             @change="confirmtime()"

  40.             type="daterange"

  41.             range-separator="-"

  42.             :default-time="['00:00:00', '23:59:59']"

  43.             value-format="yyyy-MM-dd"

  44.             start-placeholder="开始日期"

  45.             end-placeholder="结束日期"

  46.           >

  47.           </el-date-picker>

  48.         </div>

  49.         <div style="margin-left: 26px" class="div-lab">

  50.           <div class="label">团队</div>

  51.           <el-select

  52.             v-model="deptId"

  53.             filterable

  54.             @change="deptChange"

  55.             placeholder="请选择"

  56.             class="div-inp"

  57.           >

  58.             <el-option

  59.               v-for="item in options"

  60.               :key="item.deptId"

  61.               :label="item.name"

  62.               :value="item.deptId"

  63.             >

  64.             </el-option>

  65.           </el-select>

  66.         </div>

  67.       </div>

  68.     </div>

  69.     <!-- 表格 -->

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

  71.       <div class="app-titel1">

  72.         <!-- <div class="toptimeqhuan"> -->

  73.           <!-- <div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">

  74.             销讲统计

  75.           </div>

  76.           <div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">

  77.             违禁统计

  78.           </div> -->

  79.           <el-radio-group @change="tabFlagChange" v-model="tabFlag">

  80.             <el-radio-button :label="0">销讲统计</el-radio-button>

  81.             <el-radio-button :label="1">违禁统计</el-radio-button>

  82.           </el-radio-group>

  83.         <!-- </div> -->

  84.         <div

  85.           style="margin-left: auto; margin-right: 10px"

  86.           v-if="sta_men_downLoad"

  87.         >

  88.           <el-button @click="downLoad">导出</el-button>

  89.         </div>

  90.       </div>

  91.       <el-table max-height="300" :data="tableData" stripe style="width: 100%"  height="390">

  92.         <el-table-column prop="batchId" label="序号" align="center">

  93.           <template slot-scope="scope">

  94.             {{

  95.               scope.$index == tableData.length - 1

  96.                 ? "合计/平均"

  97.                 : scope.$index + 1

  98.             }}

  99.           </template>

  100.         </el-table-column>

  101.         <el-table-column prop="accountName" label="顾问" align="center">

  102.         </el-table-column>

  103.         <el-table-column prop="deptName" label="归属团队" align="center">

  104.         </el-table-column>

  105.         <el-table-column

  106.           prop="activeCustomer"

  107.           label="接待量"

  108.           align="center"

  109.           sortable

  110.         >

  111.           <template slot-scope="{ row }"> {{ row.activeCustomer }}次 </template>

  112.         </el-table-column>

  113.         

  114.         <el-table-column

  115.           prop="activeCustomer"

  116.           label="未标顾问"

  117.           align="center"

  118.           sortable

  119.         >

  120.           <template slot-scope="{ row }"> {{ row.unTagCustomer }}个 </template>

  121.         </el-table-column>

  122.         <el-table-column

  123.           v-if="tabFlag == 1"

  124.           prop="prohibitedCustomer"

  125.           label="违禁接待次数"

  126.           align="center"

  127.           sortable

  128.         >

  129.           <template slot-scope="{ row }">

  130.             {{ row.prohibitedCustomer }}次

  131.           </template>

  132.         </el-table-column>

  133.         <el-table-column

  134.           v-if="tabFlag == 1"

  135.           prop="prohibitedZb"

  136.           label="违禁接待占比"

  137.           align="center"

  138.           sortable

  139.         >

  140.           <template slot-scope="{ row }"> {{ row.prohibitedZb }}% </template>

  141.         </el-table-column>

  142.         <el-table-column

  143.           v-if="tabFlag == 0"

  144.           prop="realityEquipmentCount"

  145.           label="接待时长"

  146.           align="center"

  147.           sortable

  148.           width="110"

  149.         >

  150.           <template slot-scope="{ row }">

  151.             {{ Math.floor(row.sumDuration / 60) }}分钟

  152.           </template>

  153.         </el-table-column>

  154.         <el-table-column

  155.           v-if="tabFlag == 0"

  156.           prop="fraction"

  157.           label="销讲执行率"

  158.           align="center"

  159.           sortable

  160.           width="110"

  161.         >

  162.           <template slot-scope="{ row }"> {{ row.fraction }}% </template>

  163.         </el-table-column>

  164.         <el-table-column

  165.           v-for="(item, idx) in tablist"

  166.           :key="idx"

  167.           :prop="item.props"

  168.           :label="item.label"

  169.           align="center"

  170.           width="100"

  171.         >

  172.           <template slot-scope="{ row }"> {{ row[item.props] }}% </template>

  173.         </el-table-column>

  174.       </el-table>

  175.       <div style="display: flex; justify-content: flex-end; margin-top: 10px">

  176.         <el-pagination

  177.           @size-change="handleSizeChange"

  178.           @current-change="handleCurrentChange"

  179.           :current-page="current"

  180.           :page-sizes="[10, 30, 50]"

  181.           :page-size="size"

  182.           layout="total, sizes, prev, pager, next, jumper"

  183.           :total="total"

  184.         >

  185.         </el-pagination>

  186.       </div>

  187.     </div>

  188. 

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

  190.       <div class="zuo">

  191.         <div class="title">

  192.           <div class="text1">接待量排名（TOP10）</div>

  193.         </div>

  194.         <div class="hejisan">

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

  196.             <div class="text1-1">接待合计</div>

  197.             <div class="text1-2">{{ sum1 }}次</div>

  198.           </div>

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

  200.             <div class="text1-1">顾问人数</div>

  201.             <div class="text1-2">{{ num1 }}个</div>

  202.           </div>

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

  204.             <div class="text1-1">人均接待</div>

  205.             <div class="text1-2">{{ avg1 }}次</div>

  206.           </div>

  207.         </div>

  208.         <div

  209.           v-if="echarlist.length != 0"

  210.           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"

  211.         >

  212.           <div class="jinbox" v-for="(item, i) in echarlist" :key="i">

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

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

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

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

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

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

  219.              <div class="jinboxtit">

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

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

  222.               </el-tooltip>

  223.             </div>

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

  225.               <!-- <div

  226.                 class="boxbaifenbi"

  227.                 :style="'width:' + item.zxl1 + '%;'"

  228.               ></div> -->

  229.               <div class="boxbaifenbi" 

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

  231.                </div>

  232.              

  233.             </div>

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

  235.           </div>

  236.         </div>

  237.         <div

  238.           class="nulllist"

  239.           style="height: 250px"

  240.           v-if="echarlist.length == 0"

  241.         >

  242.           <div class="imgboxc">

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

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

  245.           </div>

  246.         </div>

  247.       </div>

  248.       <div class="you">

  249.         <div class="title">

  250.           <div class="text1">接待时长排名（TOP10）</div>

  251.         </div>

  252. 

  253.         <div class="hejisan">

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

  255.             <div class="text1-1">接待时长合计</div>

  256.             <div class="text1-2">{{ Math.floor(sum2 / 60) }}分钟</div>

  257.           </div>

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

  259.             <div class="text1-1">顾问人数</div>

  260.             <div class="text1-2">{{ num2 }}个</div>

  261.           </div>

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

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

  264.             <div class="text1-2">{{ Math.floor(avg2 / 60) }}分钟</div>

  265.           </div>

  266.         </div>

  267.         <div

  268.           v-if="echarlist2.length != 0"

  269.           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"

  270.         >

  271.           <div class="jinbox" v-for="(item, i) in echarlist2" :key="i">

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

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

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

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

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

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

  278.              <div class="jinboxtit">

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

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

  281.               </el-tooltip>

  282.             </div>

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

  284.               <!-- <div

  285.                 class="boxbaifenbi"

  286.                 :style="'width:' + item.percentage + '%;'"

  287.               ></div> -->

  288.               <div class="boxbaifenbi" 

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

  290.                </div>

  291.              

  292.             </div>

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

  294.           </div>

  295.         </div>

  296.         <div

  297.           class="nulllist"

  298.           style="height: 250px"

  299.           v-if="echarlist2.length == 0"

  300.         >

  301.           <div class="imgboxc">

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

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

  304.           </div>

  305.         </div>

  306.       </div>

  307.     </div>

  308. 

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

  310.       <div class="zuo">

  311.         <div class="title">

  312.           <div class="text1">平均执行率排名（TOP10）</div>

  313.           <div class="text2">

  314.             <el-select

  315.               @change="teamAllLevelidtap()"

  316.               style="width: 90%; margin: 0 auto"

  317.               v-model="teamAllLevelid"

  318.               placeholder="请选择"

  319.             >

  320.               <el-option

  321.                 v-for="item in teamAllLevel"

  322.                 :key="item.value"

  323.                 :label="item.name"

  324.                 :value="item.value"

  325.               >

  326.               </el-option>

  327.             </el-select>

  328.           </div>

  329.         </div>

  330.         <div class="hejisan">

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

  332.             <div class="text1-1">顾问人数</div>

  333.             <div class="text1-2">{{ num3 }}个</div>

  334.           </div>

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

  336.             <div class="text1-1">平均执行</div>

  337.             <div class="text1-2">{{ avg3 }}%</div>

  338.           </div>

  339.         </div>

  340.         <div

  341.           v-if="echarlist1.length != 0"

  342.           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"

  343.         >

  344.           <div class="jinbox" v-for="(item, i) in echarlist1" :key="i">

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

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

  347.                 'background': topThreeColor(i),

  348.                 'color': i < 3 ? '#FFF' : '#333',

  349.                 'box-shadow': i < 3 ? '0px 0px 6px 1px' + topThreeColor(i) : '0px 0px 6px 1px' + '#E5F0FF',

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

  351.              <div class="jinboxtit">

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

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

  354.               </el-tooltip>

  355.             </div>

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

  357.               <!-- <div

  358.                 class="boxbaifenbi"

  359.                 :style="'width:' + item.zxl + '%;'"

  360.               ></div> -->

  361.               <div class="boxbaifenbi" 

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

  363.                </div>

  364.              

  365.             </div>

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

  367.           </div>

  368.         </div>

  369.         <div

  370.           class="nulllist"

  371.           style="height: 250px"

  372.           v-if="echarlist1.length == 0"

  373.         >

  374.           <div class="imgboxc">

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

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

  377.           </div>

  378.         </div>

  379.       </div>

  380.       <div class="you">

  381.         <div class="title">

  382.           <div class="text1">违禁接待次数排名（TOP10）</div>

  383.           <div class="text2">

  384.             <el-select

  385.               @change="teamAllLeve2tap()"

  386.               style="width: 90%; margin: 0 auto"

  387.               v-model="teamAllLeve2id"

  388.               placeholder="请选择"

  389.             >

  390.               <el-option

  391.                 v-for="item in teamAllLeve2"

  392.                 :key="item.value"

  393.                 :label="item.name"

  394.                 :value="item.value"

  395.               >

  396.               </el-option>

  397.             </el-select>

  398.           </div>

  399.         </div>

  400.         <div class="hejisan">

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

  402.             <div class="text1-1">违禁合计</div>

  403.             <div class="text1-2">{{ sum4 }}次</div>

  404.           </div>

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

  406.             <div class="text1-1">顾问人数</div>

  407.             <div class="text1-2">{{ num4 }}个</div>

  408.           </div>

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

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

  411.             <div class="text1-2">{{ avg4 }}次</div>

  412.           </div>

  413.         </div>

  414.         <div

  415.           v-if="echarlist3.length != 0"

  416.           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"

  417.         >

  418.           <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">

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

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

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

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

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

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

  425.              <div class="jinboxtit">

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

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

  428.               </el-tooltip>

  429.             </div>

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

  431.               <!-- <div

  432.                 class="boxbaifenbi"

  433.                 :style="'width:' + item.zxl1 + '%;'"

  434.               ></div> -->

  435.               <div class="boxbaifenbi" 

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

  437.                </div>

  438.              

  439.             </div>

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

  441.           </div>

  442.         </div>

  443.         <div

  444.           class="nulllist"

  445.           style="height: 250px"

  446.           v-if="echarlist3.length == 0"

  447.         >

  448.           <div class="imgboxc">

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

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

  451.           </div>

  452.         </div>

  453.       </div>

  454.     </div>

  455. 

  456. 

  457.     <!-- 接待未标顾问排名（TOP10） -->

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

  459.       <div class="zuo">

  460.         <div class="title">

  461.           <div class="text1">接待未标顾问排名（TOP10）</div>

  462.           <div class="text2">

  463.             <el-select

  464.               style="width: 90%; margin: 0 auto"

  465.               v-model="teamAllLevelsId"

  466.               placeholder="请选择"

  467.             >

  468.               <el-option

  469.                 v-for="item in teamAllLevels"

  470.                 :key="item.value"

  471.                 :label="item.name"

  472.                 :value="item.value"

  473.               >

  474.               </el-option>

  475.             </el-select>

  476.           </div>

  477.         </div>

  478.         <div class="hejisan">

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

  480.             <div class="text1-1">未标记合计</div>

  481.             <div class="text1-2">{{ num5 }}个</div>

  482.           </div>

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

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

  485.             <div class="text1-2">{{ avg5 }}个</div>

  486.           </div>

  487.         </div>

  488.         <div

  489.           v-if="echarlist1.length != 0"

  490.           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"

  491.         >

  492.           <div class="jinbox" v-for="(item, i) in echarlist4" :key="i">

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

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

  495.                 'background': topThreeColor(i),

  496.                 'color': i < 3 ? '#FFF' : '#333',

  497.                 'box-shadow': '0px 0px 6px 1px' + topThreeColor(i)

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

  499.              <div class="jinboxtit">

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

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

  502.               </el-tooltip>

  503.             </div>

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

  505.               <!-- <div

  506.                 class="boxbaifenbi"

  507.                 :style="'width:' + item.zxl + '%;'"

  508.               ></div> -->

  509.               <div class="boxbaifenbi" 

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

  511.               </div>

  512.              

  513.             </div>

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

  515.           </div>

  516.         </div>

  517.         <div

  518.           class="nulllist"

  519.           style="height: 250px"

  520.           v-if="echarlist4.length == 0"

  521.         >

  522.           <div class="imgboxc">

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

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

  525.           </div>

  526.         </div>

  527.       </div>

  528.       <div class="you" style="opacity: 0;">

  529.         <div class="title">

  530.           <div class="text1">违禁接待次数排名（TOP10）</div>

  531.           <div class="text2">

  532.             <el-select

  533.               @change="teamAllLeve2tap()"

  534.               style="width: 90%; margin: 0 auto"

  535.               v-model="teamAllLeve2id"

  536.               placeholder="请选择"

  537.             >

  538.               <el-option

  539.                 v-for="item in teamAllLeve2"

  540.                 :key="item.value"

  541.                 :label="item.name"

  542.                 :value="item.value"

  543.               >

  544.               </el-option>

  545.             </el-select>

  546.           </div>

  547.         </div>

  548.         <div class="hejisan">

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

  550.             <div class="text1-1">违禁合计</div>

  551.             <div class="text1-2">{{ sum4 }}次</div>

  552.           </div>

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

  554.             <div class="text1-1">顾问人数</div>

  555.             <div class="text1-2">{{ num4 }}个</div>

  556.           </div>

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

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

  559.             <div class="text1-2">{{ avg4 }}次</div>

  560.           </div>

  561.         </div>

  562.         <div

  563.           v-if="echarlist3.length != 0"

  564.           style="min-height: 258px; width: 94%; margin: 0 auto;padding: 0 0 20px 0;"

  565.         >

  566.           <div class="jinbox" v-for="(item, i) in echarlist3" :key="i">

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

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

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

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

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

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

  573.              <div class="jinboxtit">

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

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

  576.               </el-tooltip>

  577.             </div>

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

  579.               <!-- <div

  580.                 class="boxbaifenbi"

  581.                 :style="'width:' + item.zxl1 + '%;'"

  582.               ></div> -->

  583.               <div class="boxbaifenbi" 

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

  585.               </div>

  586.              

  587.             </div>

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

  589.           </div>

  590.         </div>

  591.         <div

  592.           class="nulllist"

  593.           style="height: 250px"

  594.           v-if="echarlist3.length == 0"

  595.         >

  596.           <div class="imgboxc">

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

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

  599.           </div>

  600.         </div>

  601.       </div>

  602.     </div>

  603. 

  604.   </div>

  605. </template>

  606. 

  607. <script>

  608. import * as echarts from "echarts";

  609. import { mapGetters } from "vuex";

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

  611. export default {

  612.   name: "consultantBrand",

  613.   data() {

  614.     return {

  615.       houseId: "",

  616.       buildingoptions: [],

  617.       houseList: [],

  618.       dateType: 2,

  619.       tabFlag: 0,

  620.       current: 1,

  621.       size: 30,

  622.       total: 20,

  623.       customtime: [],

  624.       tablist: [],

  625.       deptId: "",

  626.       tableData: [],

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

  628.       options: [],

  629.       value: "1",

  630.       statDateStart: "",

  631.       statDateEnd: "",

  632.       echarlist: [],

  633.       echarlist1: [],

  634.       echarlist2: [],

  635.       echarlist3: [],

  636.       echarlist4: [],

  637.       teamAllLevel: [],

  638.       teamAllLevels: [],

  639.       teamAllLevelid: "",

  640.       teamAllLeve2id: "",

  641.       teamAllLeve2: [],

  642.       teamAllLevels: [],

  643.       teamAllLevelsId: '',

  644.       sum1: "",

  645.       avg1: "",

  646.       num1: "",

  647. 

  648.       sum2: "",

  649.       avg2: "",

  650.       num2: "",

  651. 

  652.       sum3: "",

  653.       avg3: "",

  654.       num3: "",

  655. 

  656.       sum4: "",

  657.       avg4: "",

  658.       num4: "",

  659. 

  660.       sum5: "",

  661.       avg5: "",

  662.       num5: "",

  663.       houseList: [],

  664.       role: "",

  665.     };

  666.   },

  667.   computed: {

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

  669.   },

  670.   created() {

  671.     this.sta_men_downLoad = this.permissions["sta_men_downLoad"];

  672.   },

  673.   mounted() {

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

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

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

  677.       this.tabtimetap(4);

  678.       this.deptFindList();

  679.       this.teamAllLeve();

  680.     } else {

  681.       this.zkhousePage();

  682.     }

  683.   },

  684.   methods: {

  685.     // 排名颜色

  686.     topThreeColor(index) {

  687.       let str = ''

  688.       switch (index) {

  689.         case 0:

  690.           str = '#F54D3F'

  691.           break

  692.         case 1:

  693.           str = '#FF981E'

  694.           break

  695.         case 2:

  696.           str = '#FFCC00'

  697.           break

  698.         default:

  699.           str = '#E5F0FF'

  700.           break

  701.       }

  702. 

  703.       return str

  704.     },

  705. 

  706.     downLoad() {

  707.       let obj = {

  708.         houseId: this.houseId,

  709.         statDateStart: this.statDateStart,

  710.         statDateEnd: this.statDateEnd,

  711.         deptId: this.deptId,

  712.         dateType: this.dateType == 7 ? null : this.dateType,

  713.         type: 1,

  714.         current: 1,

  715.         size: 1,

  716.       };

  717.       // exportMethodPost()

  718.       exportMethodPost(

  719.         "autoSR/cusStageStatistics/accountRankExport",

  720.         "顾问排名",

  721.         obj

  722.       );

  723.     },

  724.     houseChange() {

  725.       this.customtime = [];

  726.       this.TimetoAhoose = 4;

  727.       this.statDateStart = "";

  728.       this.statDateEnd = "";

  729.       this.sum1 = "";

  730.       this.avg1 = "";

  731.       this.num1 = "";

  732. 

  733.       this.sum2 = "";

  734.       this.avg2 = "";

  735.       this.num2 = "";

  736. 

  737.       this.sum3 = "";

  738.       this.avg3 = "";

  739.       this.num3 = "";

  740. 

  741.       this.sum4 = "";

  742.       this.avg4 = "";

  743.       this.num4 = "";

  744. 

  745.       

  746.       this.sum5 = "";

  747.       this.avg5 = "";

  748.       this.num5 = "";

  749.       this.tableData = [];

  750.       this.tabFlag = 0;

  751.       this.echarlist = [];

  752.       this.echarlist1 = [];

  753.       this.echarlist2 = [];

  754.       this.echarlist3 = [];

  755.       this.echarlist4 = [];

  756.       this.tabtimetap(4);

  757.       this.deptFindList();

  758.       this.teamAllLeve();

  759.     },

  760.     zkhousePage() {

  761.       this.$api.api

  762.         .findHouseByUser({

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

  764.         })

  765.         .then((res) => {

  766.           this.houseList = res.data;

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

  768.           this.tabtimetap(4);

  769.           this.deptFindList();

  770.           this.teamAllLeve();

  771.         });

  772.     },

  773.     async deptChange() {

  774.       await this.init();

  775.     },

  776.     // 获取一级

  777.     teamAllLeve() {

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

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

  780.       this.teamAllLevels = [{name: '总次数', value: ''}]

  781.       let pamaet = {

  782.         houseId: this.houseId,

  783.         dateType: 0,

  784.         statDateStart: this.statDateStart,

  785.         statDateEnd: this.statDateEnd,

  786.       };

  787.       if (this.dateType == 7) {

  788.         pamaet.dateType = null;

  789.       } else {

  790.         pamaet.dateType = this.dateType;

  791.       }

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

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

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

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

  796.           this.teamAllLevel.push({

  797.             name: item.name,

  798.             value: item.marketingId,

  799.           });

  800.         });

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

  802.           this.teamAllLeve2.push({

  803.             name: item.words,

  804.             value: item.words,

  805.           });

  806.         });

  807.         this.teamAllLevelid = "";

  808.         this.teamAllLeve2id = "";

  809.       });

  810.     },

  811.     deptFindList() {

  812.       this.options = [];

  813.       // 获取团队

  814.       this.$api.http

  815.         .overviewfindList({

  816.           houseId: this.houseId,

  817.         })

  818.         .then((res) => {

  819.           let userinfo = JSON.parse(sessionStorage.getItem("zk-userInfo"));

  820.           if (userinfo.content.deptType == 1) {

  821.             this.options.push(...res.data);

  822.             this.deptId = this.options[0].deptId;

  823.           } else {

  824.             this.options = [

  825.               {

  826.                 name: "全部",

  827.                 deptId: "",

  828.               },

  829.             ];

  830.             this.deptId = "";

  831.             this.options.push(...res.data);

  832.           }

  833. 

  834.           this.accountRank();

  835.         });

  836.     },

  837.     async init() {

  838.       this.accountRank();

  839.       this.echarlist = await this.accountRankTOP10(1);

  840.       this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");

  841.       this.echarlist2 = await this.accountRankTOP10(2);

  842.       this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);

  843.       this.echarlist4 = await this.accountRankTOP10(5, "", this.teamAllLeve2id);

  844.     },

  845.     // 获取图标

  846.     async accountRankTOP10(type, marketingId = "", words = "") {

  847.       let res = await this.$api.api.accountRankTOP10({

  848.         houseId: this.houseId,

  849.         statDateStart: this.statDateStart,

  850.         statDateEnd: this.statDateEnd,

  851. 

  852.         deptId: this.deptId,

  853.         dateType: this.dateType == 7 ? null : this.dateType,

  854.         type,

  855.         marketingId,

  856.         words,

  857.       });

  858.       this["sum" + type] = res.data.sum || 0;

  859.       this["num" + type] = res.data.num || 0;

  860.       this["avg" + type] = res.data.avg || 0;

  861.       let arr = [];

  862.       let max = 0;

  863.       let newarr = res.data.list || [];

  864.       if (newarr.length != 0) {

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

  866.           let obj = {};

  867.           if (type == 1) {

  868.             obj.name = item.accountName;

  869.             obj.zxl = item.activeCustomer;

  870.             arr.push(obj);

  871.           } else if (type == 2) {

  872.             obj.name = item.accountName;

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

  874.             if (max < obj.zxl) {

  875.               max = obj.zxl;

  876.             }

  877.             arr.push(obj);

  878.           } else if (type == 3) {

  879.             obj.name = item.accountName;

  880.             obj.zxl = item.fraction;

  881.             arr.push(obj);

  882.           } else if(type == 5) {

  883.             obj.name = item.accountName;

  884.             obj.zxl = item.unTagCustomer;

  885.             arr.push(obj);

  886.           } else {

  887.             obj.name = item.accountName;

  888.             obj.zxl = item.prohibitedCustomer;

  889.             arr.push(obj);

  890.           }

  891.         });

  892.       }

  893. 

  894.       if (type == 2) {

  895.         arr.forEach((item) => {

  896.           item.percentage = (item.zxl / max) * 100;

  897.         });

  898.       }

  899. 

  900.       if (type == 3) {

  901.         arr = arr;

  902.       }

  903. 

  904.       if (type == 4) {

  905.         console.log(

  906.           arr,

  907.           "arr4,ajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjakslajdklsajkldjaskldjaksl"

  908.         );

  909.         arr = this.dealData(arr);

  910.       }

  911.       if (type == 5) {

  912.         arr = this.dealData(arr);

  913.       }

  914.       return arr;

  915.     },

  916.     accountRank() {

  917.       this.$api.api

  918.         .accountRank({

  919.           houseId: this.houseId,

  920.           statDateStart: this.statDateStart,

  921.           statDateEnd: this.statDateEnd,

  922.           current: this.current,

  923.           size: this.size,

  924.           deptId: this.deptId,

  925.           dateType: this.dateType == 7 ? null : this.dateType,

  926.         })

  927.         .then((res) => {

  928.           this.tableData = res.data.records;

  929.           // 数据处理

  930.           // 需要两个数组，一个用来展示

  931.           this.deailDate();

  932.           this.total = res.data.total;

  933.         });

  934.     },

  935.     confirmtime() {

  936.       this.dateType = 7;

  937.       this.statDateStart = this.customtime[0];

  938.       this.statDateEnd = this.customtime[1];

  939.       this.init();

  940.     },

  941.     deailDate() {

  942.       this.tablist = [];

  943.       // 当他是第一个 小将

  944.       if (this.tabFlag == 0) {

  945.         this.tableData[0].resultsList.map((item, idx) => {

  946.           let obj = {};

  947.           obj.label = item.name;

  948.           obj.props = "str" + idx;

  949.           this.tablist.push(obj);

  950.         });

  951.         this.tableData.map((item) => {

  952.           this.tablist.map((item1, idx) => {

  953.             item[item1.props] = item.resultsList[idx].zxl;

  954.           });

  955.         });

  956.       } else {

  957.         this.tableData[0].sensitiveWordsList.map((item, idx) => {

  958.           let obj = {};

  959.           obj.label = item.words;

  960.           obj.props = "str" + idx;

  961.           this.tablist.push(obj);

  962.         });

  963.         this.tableData.map((item) => {

  964.           this.tablist.map((item1, idx) => {

  965.             item[item1.props] = item.sensitiveWordsList[idx].num;

  966.           });

  967.         });

  968.       }

  969.     },

  970.     //平均执行率切换一级

  971.     async teamAllLevelidtap() {

  972.       // this.teamData3();

  973.       this.echarlist1 = await this.accountRankTOP10(3, this.teamAllLevelid, "");

  974.     },

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

  976.     async teamAllLeve2tap() {

  977.       // this.teamData5();

  978.       this.echarlist3 = await this.accountRankTOP10(4, "", this.teamAllLeve2id);

  979.     },

  980.     echarCreat() {

  981.       let myChart = echarts.init(document.getElementById("echar"));

  982.       let option = {

  983.         tooltip: {

  984.           trigger: "axis",

  985.           axisPointer: {

  986.             type: "shadow",

  987.           },

  988.         },

  989.         color: [

  990.           "#66AFF5",

  991.           "#FABD2B",

  992.           "#6F8EDC",

  993.           "#FFCF8F",

  994.           "#F98120",

  995.           "#1CC99E",

  996.           "#9474FB",

  997.           "#657292",

  998.           "#7A6A99",

  999.           "#BF5D52",

  1000.           "#EE6666",

  1001.           "#77B7E4",

  1002.           "#E6A065",

  1003.           "#9D5139",

  1004.           "#C1AA88",

  1005.           "#F87F7A",

  1006.           "#F6CF74",

  1007.           "#7F5506",

  1008.           "#88BB9B",

  1009.           "#6E99AA",

  1010.           "#5789D0",

  1011.         ],

  1012.         legend: {},

  1013.         grid: {

  1014.           left: "3%",

  1015.           right: "4%",

  1016.           bottom: "3%",

  1017.           containLabel: true,

  1018.         },

  1019.         xAxis: {

  1020.           type: "value",

  1021.           boundaryGap: [0, 0.01],

  1022.         },

  1023.         yAxis: {

  1024.           type: "category",

  1025.           data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],

  1026.         },

  1027.         series: [

  1028.           {

  1029.             type: "bar",

  1030.             data: [19325, 23438, 31000, 121594, 134141, 681807],

  1031.           },

  1032.         ],

  1033.       };

  1034.       myChart.setOption(option);

  1035.     },

  1036.     handleCurrentChange(e) {

  1037.       this.current = e;

  1038.       this.accountRank();

  1039.     },

  1040.     handleSizeChange(e) {

  1041.       this.size = e;

  1042.       this.accountRank();

  1043.     },

  1044.     //切换时间

  1045.     tabtimetap(index) {

  1046.       this.statDateStart = "";

  1047.       this.statDateEnd = "";

  1048.       this.dateType = index;

  1049.       this.init();

  1050.     },

  1051.     tabFlagChange(idx) {

  1052.       this.tabFlag = idx;

  1053.       this.deailDate();

  1054.     },

  1055.     dealData(arr) {

  1056.       console.log(arr, "arr");

  1057.       let num = Math.max.apply(

  1058.         Math,

  1059.         arr.map(function (o) {

  1060.           return o.zxl;

  1061.         })

  1062.       ); //结果：3

  1063.       console.log(num, "nums");

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

  1065.         if (num != 0) {

  1066.           item.zxl1 = Math.floor((item.zxl / num) * 100);

  1067.         } else {

  1068.           item.zxl1 = 0;

  1069.         }

  1070.       });

  1071.       console.log(arr, "arr2");

  1072.       return arr;

  1073.     },

  1074.   },

  1075. };

  1076. </script>

  1077. 

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

  1079. .sequenceNum {

  1080.       display: flex;

  1081.       width: 28px;

  1082.       height: 24px;

  1083.       justify-content: center;

  1084.       align-items: center;

  1085.       background: #E5F0FF;

  1086.       border-radius: 15px;

  1087.       color: #333333;

  1088.       margin-right: 10px;

  1089.     }

  1090. .box-center {

  1091.   width: 100%;

  1092.   padding: 15px;

  1093.   min-width: 1000px;

  1094.   padding-bottom: 100px;

  1095. }

  1096. .cen-tab {

  1097.   width: 100%;

  1098.   padding: 15px;

  1099.   background: #ffffff;

  1100.   margin-top: 15px;

  1101. }

  1102. .tophove {

  1103.   color: #ffffff;

  1104.   background: #2671e2;

  1105. }

  1106. .app-titel1 {

  1107.   width: 100%;

  1108.   height: 70px;

  1109.   background: #ffffff;

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

  1111.   border-radius: 4px;

  1112.   display: flex;

  1113.   align-items: center;

  1114.   flex-wrap: wrap;

  1115.   .titel-text {

  1116.     height: 100%;

  1117.     font-size: 18px;

  1118.     font-weight: 600;

  1119.     color: #32363d;

  1120.     line-height: 70px;

  1121.     margin-left: 30px;

  1122.   }

  1123.   .toptimeqhuan {

  1124.     width: 190px;

  1125.     height: 32px;

  1126.     background: #ffffff;

  1127.     border-radius: 4px;

  1128.     border: 1px solid #e0e0e0;

  1129.     display: flex;

  1130.     align-items: center;

  1131.     overflow: hidden;

  1132.     margin-left: 20px;

  1133.     cursor: pointer;

  1134.   }

  1135.   .toptimeqhuan div {

  1136.     flex: 1;

  1137.     text-align: center;

  1138.     line-height: 32px;

  1139.     font-size: 16px;

  1140.   }

  1141. }

  1142. 

  1143. .app-top {

  1144.   // width: 100%;

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

  1146.   position: fixed;    

  1147.   z-index: 999;

  1148.   margin-top: -16px;

  1149.   background: #ffffff;

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

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

  1152.   border-radius: 4px;

  1153.   padding-top: 15px;

  1154.   padding-bottom: 15px;

  1155.   .app-titel {

  1156.     width: 100%;

  1157.     display: flex;

  1158.     align-items: center;

  1159.     .titel-text {

  1160.       height: 100%;

  1161.       font-size: 16px;

  1162.       font-weight: 600;

  1163.       color: #32363d;

  1164.       text-indent: 30px;

  1165.     }

  1166.     .toptimeqhuan {

  1167.       width: 190px;

  1168.       height: 32px;

  1169.       background: #ffffff;

  1170.       border-radius: 4px;

  1171.       border: 1px solid #e0e0e0;

  1172.       display: flex;

  1173.       align-items: center;

  1174.       overflow: hidden;

  1175.       margin-left: 20px;

  1176.       cursor: pointer;

  1177.     }

  1178.     .toptimeqhuan div {

  1179.       flex: 1;

  1180.       text-align: center;

  1181.       line-height: 32px;

  1182.       font-size: 14px;

  1183.     }

  1184.   }

  1185. }

  1186. 

  1187. .app-box-san {

  1188.   width: 100%;

  1189.   min-height: 400px;

  1190.   display: flex;

  1191.   margin-top: 15px;

  1192.   .zuo {

  1193.     flex: 1;

  1194.     height: 100%;

  1195.     margin-right: 15px;

  1196.     background: #ffffff;

  1197.     border-radius: 4px;

  1198.     .title {

  1199.       width: 100%;

  1200.       height: 55px;

  1201.       border-bottom: 1px solid #e0e0e0;

  1202.       display: flex;

  1203.       align-content: center;

  1204.       .text1 {

  1205.         flex: 2;

  1206.         line-height: 55px;

  1207.         text-indent: 20px;

  1208.         font-weight: 500;

  1209.         font-size: 16px;

  1210.         color: #333333;

  1211.       }

  1212.       .text2 {

  1213.         flex: 1;

  1214.         height: 55px;

  1215.         display: flex;

  1216.         align-items: center;

  1217.       }

  1218.     }

  1219.   }

  1220.   .you {

  1221.     height: 100%;

  1222.     flex: 1;

  1223.     background: #ffffff;

  1224.     border-radius: 4px;

  1225.     .title {

  1226.       width: 100%;

  1227.       height: 55px;

  1228.       border-bottom: 1px solid #e0e0e0;

  1229.       display: flex;

  1230.       align-content: center;

  1231.       .text1 {

  1232.         flex: 2;

  1233.         line-height: 55px;

  1234.         text-indent: 20px;

  1235.         font-weight: 500;

  1236.         font-size: 16px;

  1237.         color: #333333;

  1238.       }

  1239.       .text2 {

  1240.         flex: 1;

  1241.         height: 55px;

  1242.         display: flex;

  1243.         align-items: center;

  1244.       }

  1245.     }

  1246.   }

  1247. }

  1248. 

  1249. .hejisan {

  1250.   width: 92%;

  1251.   margin: 0 auto;

  1252.   display: flex;

  1253.   padding-top: 10px;

  1254.   padding-bottom: 10px;

  1255.   .text1-1 {

  1256.     color: #666666;

  1257.   }

  1258.   .text1-2 {

  1259.     color: #333333;

  1260.     margin-top: 10px;

  1261.     font-weight: bold;

  1262.   }

  1263. }

  1264. 

  1265. // 进度条

  1266. .jinbox {

  1267.   width: 100%;

  1268.   height: 18px;

  1269.   line-height: 18px;

  1270.   display: flex;

  1271.   font-size: 16px;

  1272.   color: #2c3542;

  1273.   margin-top: 24px;

  1274.   .jinboxtit {

  1275.     width: 14%;

  1276.     height: 18px;

  1277.     padding-right: 6px;

  1278.     white-space: nowrap;

  1279.     text-overflow: ellipsis;

  1280.     overflow: hidden;

  1281.   }

  1282.   .jinbox-box {

  1283.     position: relative;

  1284.     width: 75%;

  1285.     height: 100%;

  1286.     border-radius: 8px;

  1287.     background: #f2f2f2;

  1288.   }

  1289.   .boxbaifenbi {

  1290.     height: 100%;

  1291.     background: #60d7a0;

  1292.     border-radius: 8px;

  1293.   }

  1294.   .boxbaifenbi2 {

  1295.     height: 100%;

  1296.     background: #5b8ff9;

  1297.   }

  1298.   .jinboxbott {

  1299.     width: 16%;

  1300.     display: flex;

  1301.     justify-content: flex-end;

  1302.   }

  1303. }

  1304. .div-lab {

  1305.   display: flex;

  1306.   margin: 5px;

  1307. }

  1308. .div-inp {

  1309.   width: 200px;

  1310. }

  1311. .label {

  1312.   font-size: 14px;

  1313.   font-weight: 400;

  1314.   color: #32363d;

  1315.   line-height: 32px;

  1316.   margin-left: 15px;

  1317.   min-width: 40px;

  1318. }

  1319. /deep/ .el-table__header-wrapper{

  1320.   thead{

  1321.     tr{

  1322.       th{

  1323.         background: #F5F7FA;

  1324.         color: #333333;

  1325.       }

  1326.     }

  1327.   }

  1328. }

  1329. </style>