zkPCproject/src/page/wel.vue

<template>
  <div class="box-center">
    <div v-if="role==3&&info.userRoleType!=6">
          <div class="app-titel">
            <div class="titel-text">时间</div>
            <div class="toptimeqhuan">
              <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</div>
              <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近7天 </div>
              <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">  近30天 </div>
            </div>
            <div style="margin-left: 26px">
              <el-date-picker
                @change="confirmtime()"
                v-model="customtime"
                 :clearable='false'
                type="daterange"
                range-separator="-"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
          </div>
        </div>
        <!-- 卡片部分 -->
        <div class="page-container">
            <div class="pagechen">
              <div class="pageboxtitle1">接待量 (次)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.receptionCount || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.receptionCount || 0}}</span>
                  <span class="span2-2" v-if="cardlist.liftlist.receptionCount>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.receptionCount || 0}}
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.receptionCount<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.receptionCount || 0}}
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">有效接待(次)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.activeCustomer || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.activeCustomer || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.activeCustomer || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.activeCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.activeCustomer || 0}}
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.activeCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.activeCustomer || 0}}
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">正在接待</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.receivingCustomer || 0}}</div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">平均接待时长(分钟)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.avgDuration || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.avgDuration || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.avgDuration || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.avgDuration>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.avgDuration || 0}}
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.avgDuration<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.avgDuration || 0}}
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">平均执行率(%)</div>
              <div class="pageboxtitle2">
                <div class="span1">{{cardlist.datalist.fraction || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{cardlist.sequential.fraction || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.fraction || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.fraction>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.fraction || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.fraction<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.fraction || 0}}%
                  </span>
                </div>
              </div>
            </div>
        </div>
        <div style=" margin-top: 20px;" class="page-container">
            <div class="pagechen">
              <div class="pageboxtitle1">违禁接待次数(次)</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{cardlist.datalist.prohibitedCustomer || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{cardlist.sequential.prohibitedCustomer || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedCustomer || 0}}%</span> -->
                 <span class="span2-2" v-if="cardlist.liftlist.prohibitedCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.prohibitedCustomer || 0}}
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.prohibitedCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.prohibitedCustomer || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">违禁接待占比(%)</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{cardlist.datalist.prohibitedZb || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{cardlist.sequential.prohibitedZb || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedZb || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.prohibitedZb>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.prohibitedZb || 0}}%
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.prohibitedZb<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.prohibitedZb || 0}}%
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">顾问(人)</div>
              <div class="pageboxtitle2">
                    <div class="span1">{{cardlist.datalist.accountNum || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{cardlist.sequential.accountNum || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="cardlist.liftlist.accountNum>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{cardlist.liftlist.accountNum || 0}}
                  </span>
                  <span class="span2-3" v-if="cardlist.liftlist.accountNum<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{cardlist.liftlist.accountNum || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen1"></div>
            <div class="pagechen1" ></div>
        </div>

        <div class="app-box-san">
           <div class="zuo">
              <div class="title">
                <div class="text1">维度触达占比</div>
              </div>
              <div v-if="indexZxllist.length==0" style="display:flex;justify-content: center; align-items: center;height: 60%;text-align:center;color: #909399;">
              <div class="imgboxc" style="margin-top:40px;">
                <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
                <div class="nulltext">暂无数据</div>
              </div>
              </div>
               <div v-else   class="tabbox" style="display:flex;flex-wrap: wrap;height: 290px;overflow-y: auto;width: 90%;margin:0 auto;">
                  <div v-for="(item,index) in indexZxllist" :key="index" style="width:33.3%;margin-top: 10px;cursor: pointer;">
                    <div style="width:130px;height:100px;margin:0 auto;"><el-progress :stroke-width="12" :width='130'  type="dashboard" :percentage="item.zxl" ></el-progress></div>
                    <div style="width:100%;text-align: center;margin-top:20px;">
                       <el-tooltip :content="item.name" placement="top">
                          <div style="width:80%;text-align: center;margin:0 auto;">{{item.name.substring(0,6)}}</div>
                        </el-tooltip>
                      </div>

                  </div>
               </div>
           </div>
           <div class="you">
              <div class="title">
                <div class="text1">顾问执行率排名(TOP10)</div>
              </div>

              <div  v-if="employeeExecutionRatelist.list.length==0" style="display:flex;justify-content: center; align-items: center;height: 60%;text-align:center;color: #909399;">
              <div class="imgboxc"  style="margin-top:40px;">
                <img class="imgboxc-img" src="/img/nullnull.png" alt="" />
                <div class="nulltext">暂无数据</div>
              </div>
              </div>
              <div class="hejisan"  v-if="employeeExecutionRatelist.list.length!=0">
                  <div  class="sanbox1" style="width: 40%;">
                    <div class="text1-1">顾问</div>
                    <div class="text1-2">{{employeeExecutionRatelist.num || ''}}</div>
                  </div>
                  <div  class="sanbox1" style="width: 25%;">
                    <div class="text1-1">平均执行</div>
                    <div class="text1-2">{{employeeExecutionRatelist.fraction || ''}}%</div>
                  </div>
              </div>
              <div class="tabbox"  v-if="employeeExecutionRatelist.list.length!=0">
                <div style="overflow-y:auto;height: 230px;width: 94%;margin: 0 auto;">
                    <div class="jinbox" v-for="(item,i) in employeeExecutionRatelist.list" :key='i'>
                        <div class="jinboxtit">{{item.accountName}}</div>
                        <div class="jinbox-box">
                            <div class="boxbaifenbi" :style="'width:'+(item.fraction)+'%;'"></div>
                        </div>
                        <div class="jinboxbott">{{item.fraction}}%</div>
                    </div>
                </div>
              </div>
           </div>
        </div>

        <div class="app-box-san" >
          <div class="zuo">
            <div class="title">
              <div class="text1">违禁提醒</div>
            </div>

            <div class="tabbox" >
              <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="prohibitedlist"
                  height="320"
                  style="width: 100%;font-size: 14px;">
                  <el-table-column
                    prop="agentName"
                    label="顾问"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="name"
                    label="客户"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="staTime"
                    label="接待时间"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="date"
                    label="操作"
                    align="center">
                      <template slot-scope="{row}">
                        <div @click="goinfo(row)"  style="color: #2671E2;cursor:pointer;">查看</div>
                      </template>
                  </el-table-column>
                </el-table>
              </div>

          </div>
          <div class="you">
            <div class="title"  style="cursor: pointer;">

              <el-badge :value="equNum" class="item" style="  margin-right: 10px;" :hidden="equNum==0?true:false">
                <div class="text1" @click="tabclick('1')" :class="{ colostyle: classatec == 1 }">离线工牌</div>
              </el-badge>
                <el-badge :value="equNum1" class="item" :hidden="equNum1==0?true:false">
                <div class="text1" @click="tabclick('0')" :class="{ colostyle: classatec == 0 }">低电工牌</div>
              </el-badge>

            </div>
              <div class="tabbox" v-if="classatec==0">
                <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="equipmentList"
                  height="320"
                  style="width: 100%;font-size: 14px;">>
                  <el-table-column
                    prop="accName"
                    label="顾问"
                    align="center">
                  </el-table-column>

                  <el-table-column
                    prop="accPhone"
                    label="电话"
                    align="center">
                  </el-table-column>
                    <el-table-column
                    prop="imei"
                    label="设备号"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="录音状态"
                    align="center">
                     <template slot-scope="scope" style="">
                       <span v-if="scope.row.recCmd=='start'">开启</span>
                       <span v-if="scope.row.recCmd=='stop'">关闭</span>
                     </template>
                  </el-table-column>

                  <el-table-column
                    prop="electricity"
                    label="电量"
                    align="center">
                  </el-table-column>
                </el-table>
              </div>
              <div class="tabbox" v-if="classatec==1">
                <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="equipmentList"
                  height="320"
                   style="width: 100%;font-size: 14px;">>
                  <el-table-column
                    prop="accName"
                    label="顾问"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="accPhone"
                    label="电话"
                    align="center">
                  </el-table-column>
                      <el-table-column
                    prop="imei"
                    label="设备号"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="updateTime"
                    label="离线时间"
                    align="center">
                  </el-table-column>
                </el-table>
              </div>
          </div>
      </div>
    </div>

    <div v-if="role!=3&&info.userRoleType!=6">
        <!-- 系统后台 -->
        <div style="margin-bottom:10px; cursor:pointer;" v-if="role!=2">
          <span style="font-weight:bold;font-size: 18px;">待处理</span>
          <div class="page-container">

             <div class="pagechen" @click="jumpto('1')" v-if="role==0">
              <div class="pageboxtitle1">30天到期的代理商</div>
              <div class="pageboxtitle3">
                {{sysTop.matuityOfAgent||0}}
              </div>
            </div>

            <div class="pagechen"  @click="jumpto('2')">
              <div class="pageboxtitle1">30天到期的楼盘</div>
              <div class="pageboxtitle3">
                {{sysTop.matuityOfHouse||0}}
              </div>
            </div>

            <div class="pagechen"  @click="jumpto('3')">
              <div class="pageboxtitle1">离线设备</div>
              <div class="pageboxtitle3">
                {{sysTop.offlineEquipmentQUantity||0}}
              </div>
            </div>

           <div class="pagechen"  @click="jumpto('4')">
              <div class="pageboxtitle1">低电量设备</div>
              <div class="pageboxtitle3">
                {{sysTop.lowElectricityEquipmentQuantity||0}}
              </div>
            </div>
            </div>
          </div>
          <div style="font-weight:bold;font-size: 18px; margin:10px 0 ;">数据简报</div>
          <div class="app-titel">
            <div class="titel-text">时间</div>
            <div class="toptimeqhuan">
              <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">今天</div>
              <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近7天 </div>
              <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">  近30天 </div>
            </div>
            <div style="margin-left: 26px">
              <el-date-picker
                @change="confirmtime()"
                v-model="customtime"
                 :clearable='false'
                type="daterange"
                range-separator="-"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
          </div>
        </div>
      <div v-if="role!=2">
        <!-- 卡片部分 -->
        <div class="page-container" >
            <div class="pagechen">
              <div class="pageboxtitle1">新增楼盘数</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.newAddHouseQuantity || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.newAddHouseQuantity || 0}}</span>
                  <span class="span2-2" v-if="orderBy.newAddHouseQuantity>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.newAddHouseQuantity || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.newAddHouseQuantity<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.newAddHouseQuantity || 0}}
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">活跃楼盘数</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.activeHouseQuantity || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.activeHouseQuantity || 0}}</span>
                   <span class="span2-2" v-if="orderBy.activeHouseQuantity>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeHouseQuantity || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeHouseQuantity<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeHouseQuantity || 0}}
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">销售设备数</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.equipmentQuantityWithSold || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.equipmentQuantityWithSold || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.avgDuration || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.equipmentQuantityWithSold>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.equipmentQuantityWithSold || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.equipmentQuantityWithSold<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.equipmentQuantityWithSold || 0}}
                  </span>
                </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">活跃设备数</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.activeEquipmentQuantity || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.activeEquipmentQuantity || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.fraction || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.activeEquipmentQuantity>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeEquipmentQuantity || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeEquipmentQuantity<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeEquipmentQuantity || 0}}
                  </span>
                </div>
              </div>
            </div>

            <div class="pagechen">
              <div class="pageboxtitle1">活跃用户数</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{sysSec.activeUserQuantity || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.activeUserQuantity || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedCustomer || 0}}%</span> -->
                 <span class="span2-2" v-if="orderBy.activeUserQuantity>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeUserQuantity || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeUserQuantity<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeUserQuantity || 0}}
                  </span>
              </div>
              </div>
            </div>
        </div>
        <div style=" margin-top: 20px;" class="page-container">
            <div class="pagechen">
              <div class="pageboxtitle1">接待量</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{sysSec.receptionCount || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.receptionCount || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedZb || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.receptionCount>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.receptionCount || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionCount<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.receptionCount || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">有效接待</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.activeCustomer || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.activeCustomer || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.activeCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeCustomer || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeCustomer || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">违禁接待次数</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.prohibitedCount || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.prohibitedCount || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.prohibitedCount>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.prohibitedCount || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.prohibitedCount<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.prohibitedCount || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">平均接待时长(分钟)</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.receptionTimeWithAvg || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.receptionTimeWithAvg || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.receptionTimeWithAvg>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.receptionTimeWithAvg || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTimeWithAvg<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.receptionTimeWithAvg || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">录音总时长(小时)</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.receptionTime || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.receptionTime || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.receptionTime>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.receptionTime || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTime<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.receptionTime || 0}}
                  </span>
              </div>
              </div>
            </div>
        </div>
        </div>
      <div v-if="role==2">
        <!-- 卡片部分 -->
        <div class="page-container" >

            <div class="pagechen">
              <div class="pageboxtitle1">接待量</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{sysSec.receptionCount || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.receptionCount || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedZb || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.receptionCount>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.receptionCount || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionCount<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.receptionCount || 0}}
                  </span>
              </div>
              </div>
            </div>

            <div class="pagechen">
              <div class="pageboxtitle1">有效接待</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.activeCustomer || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.activeCustomer || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.activeCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeCustomer || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeCustomer || 0}}
                  </span>
              </div>
              </div>
            </div>
            <div class="pagechen">
              <div class="pageboxtitle1">无效接待</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.invalidCustomer || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.invalidCustomer || 0}}</span>
                  <span class="span2-2" v-if="orderBy.invalidCustomer>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.invalidCustomer || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.invalidCustomer<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.invalidCustomer || 0}}
                  </span>
                </div>
              </div>
            </div>

              <div class="pagechen">
              <div class="pageboxtitle1">接待时长(小时)</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.receptionTime || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.receptionTime || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.receptionTime>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.receptionTime || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTime<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.receptionTime || 0}}
                  </span>
              </div>
              </div>
            </div>

            <div class="pagechen">
              <div class="pageboxtitle1">平均接待时长(分钟)</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.receptionTimeWithAvg || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.receptionTimeWithAvg || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.receptionTimeWithAvg>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.receptionTimeWithAvg || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.receptionTimeWithAvg<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.receptionTimeWithAvg || 0}}
                  </span>
              </div>
              </div>
            </div>




        </div>
        <div style=" margin-top: 20px;" class="page-container">

              <div class="pagechen">
              <div class="pageboxtitle1">平均执行率</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.avgFration || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.avgFration || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.avgDuration || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.avgFration>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.avgFration || 0}}%
                  </span>
                  <span class="span2-3" v-if="orderBy.avgFration<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.avgFration || 0}}%
                  </span>
                </div>
              </div>
            </div>


              <div class="pagechen">
              <div class="pageboxtitle1">违禁接待次数</div>
              <div class="pageboxtitle2">
              <div class="span1">{{sysSec.prohibitedCount || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.prohibitedCount || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.accountNum || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.prohibitedCount>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.prohibitedCount || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.prohibitedCount<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.prohibitedCount || 0}}
                  </span>
              </div>
              </div>
            </div>

            <div class="pagechen">
              <div class="pageboxtitle1">活跃设备</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.activeEquipmentQuantity || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.activeEquipmentQuantity || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.fraction || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.activeEquipmentQuantity>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeEquipmentQuantity || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeEquipmentQuantity<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeEquipmentQuantity || 0}}
                  </span>
                </div>
              </div>
            </div>

            <div class="pagechen">
              <div class="pageboxtitle1">活跃设备占比</div>
              <div class="pageboxtitle2">
                  <div class="span1">{{sysSec.activeEquipmentQuantityZB || 0}}</div>
              <div class="span2">
                <span class="span2-1"> 环比:{{sysCompare.activeEquipmentQuantityZB || 0}}</span>
                <!-- <span class="span2-2">{{cardlist.liftlist.prohibitedCustomer || 0}}%</span> -->
                 <span class="span2-2" v-if="orderBy.activeEquipmentQuantityZB>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeEquipmentQuantityZB || 0}}%
                  </span>
                  <span class="span2-3" v-if="orderBy.activeEquipmentQuantityZB<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeEquipmentQuantityZB || 0}}%
                  </span>
              </div>
              </div>
            </div>



          <div class="pagechen">
              <div class="pageboxtitle1">活跃楼盘数</div>
              <div class="pageboxtitle2">
                <div class="span1">{{sysSec.activeHouseQuantity || 0}}</div>
                <div class="span2">
                  <span class="span2-1"> 环比:{{sysCompare.activeHouseQuantity || 0}}</span>
                  <!-- <span class="span2-2">{{cardlist.liftlist.activeCustomer || 0}}%</span> -->
                  <span class="span2-2" v-if="orderBy.activeHouseQuantity>0">
                    <i class="el-icon-top" style="color: red;"></i>
                    {{orderBy.activeHouseQuantity || 0}}
                  </span>
                  <span class="span2-3" v-if="orderBy.activeHouseQuantity<0">
                     <i class="el-icon-bottom" style="color: #25CEBA;"></i>
                    {{orderBy.activeHouseQuantity || 0}}
                  </span>
                </div>
              </div>
            </div>

        </div>
        </div>

        <div class="app-box-san">
          <div class="zuo">
            <div class="title1"  style="cursor: pointer;">
              <div>{{role==2?'楼盘排名（TOP10）':'公司排名（TOP10）'}}</div>
              <div style="display:flex;">
                <div class="text1" style="margin-right:10px;" @click="classatec1=0" :class="{ colostyle: classatec1 == 0 }">接待量</div>
                <div class="text1" @click="classatec1=1" :class="{ colostyle: classatec1 == 1 }">平均执行率</div>
              </div>
            </div>
            <div class="tabbox">
              <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="companyRank"
                  height="320"
                   style="width: 100%;font-size: 14px;">>
                  <el-table-column
                    prop="companyName"
                    :label="role==2?'楼盘名称':'公司名称'"
                    align="center">
                    <template slot-scope="{row}">
                      {{role!=2?row.companyName:row.houseName}}
                    </template>
                  </el-table-column>

                  <el-table-column
                  v-if="classatec1==0"
                    prop="receptionCount"
                    label="接待量"
                    align="center">
                  </el-table-column>
                  <el-table-column
                  v-if="classatec1==0"
                    prop="receptionTime"
                    label="接待时长（小时）"
                    align="center">

                  </el-table-column>
                  <el-table-column
                    v-if="classatec1==1"
                    prop="avgFration"
                    label="平均执行率"
                    align="center">
                    <template slot-scope="{row}">
                      {{row.avgFration||0}}%
                    </template>
                  </el-table-column>
                </el-table>
              </div>

          </div>
          <div class="you">
            <div class="title1"  style="cursor: pointer;">
              <div>{{role==2?'顾问排名（TOP10）':'楼盘排名（TOP10）'}}</div>
              <div style="display:flex;">
                <div class="text1" style="margin-right:10px;" @click="classatec2=0" :class="{ colostyle: classatec2 == 0 }">接待量</div>
                <div class="text1" @click="classatec2=1" :class="{ colostyle: classatec2 == 1 }">平均执行率</div>
              </div>
            </div>

            <div class="tabbox">
              <el-table
                  :header-cell-style="{background:'#F2F4F5'}"
                  :data="houseRank"
                  height="320"
                    style="width: 100%;font-size: 14px;">>
                  <el-table-column
                    prop="houseName"
                    :label="role==2?'顾问名称':'楼盘名称'"
                    align="center">
                     <template slot-scope="{row}">
                      {{role!=2?row.houseName:row.accountName}}
                    </template>
                  </el-table-column>

                  <el-table-column
                    prop="receptionCount"
                    v-if="classatec2==0"
                    label="接待量"
                    align="center">
                  </el-table-column>

                  <el-table-column
                  v-if="classatec2==0"
                    prop="receptionTime"
                    label="接待时长（小时）"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    v-if="classatec2==1"
                    prop="avgFration"
                    label="平均执行率"
                    align="center">
                    <template slot-scope="{row}">
                      {{row.avgFration||0}}%
                    </template>
                  </el-table-column>
                </el-table>
              </div>
          </div>
      </div>
    </div>
    <div v-if="info.userRoleType==6" style="text-align: center;font-size: 30px; margin: 300px auto;">
      欢迎光临
    </div>
  </div>
</template>

<script>
import { getStore, setStore } from "@/util/store";
export default {
  name: 'Wel',
  data() {
    return {
      role:'',
      houseId:"",
      houseList:[],
      houseRank:[],
      companyRank:[],
      classatec:1,
      classatec1:0,
      classatec2:0,
      customtime:[],
      statDateStart:'',
      statDateEnd:'',
      TimetoAhoose:1,
      equNum:0,
      equNum1:0,
      cardlist:{
        datalist:{},
        liftlist:{},
        sequential:{},
      },
      sysData:{},
      orderBy:{},
      sysCompare:{},
      sysTop:{},
      sysSec:{},
      tableData: [],
      equipmentList:[],
      prohibitedlist:[],
      indexZxllist:[],
      employeeExecutionRatelist:{
        num:'',
        list:[],
        fraction:''
      },
      info:{},

    }
  },
   mounted() {
    //  location.reload();
    this.role=localStorage.getItem("orgType");
    this.info = getStore({ name: "userInfo" });
    if(this.role==3){
      this.houseId = localStorage.getItem("houseId");

        this.getgicd();
        // 获取维度占比
        this.getindexZxllist()
        // 员工执行率
        this.getemployeeExecutionRatelist()
        // 违禁提醒列表
        this.findProhibitedRecord()
        // 获取设备
        this.findAllZkEquipment()
    }
    // else if(this.role==0){
    //   // 系统
    //     //  this.zkhousePage()
    //     this.waitingForOperation()
    // }
    // else if(this.role==1){
    //   // 代理商
    //     //  this.zkhousePage()
    // }
    else{
      // 公司
      this.waitingForOperation()
    }

  },
  methods: {
    goinfo(row){
         this.$api.http.findByCusIdcusId({cusId:row.id}).then((res) => {
        if(res.data.length==0){
          this.$message({
            message: '无录音',
            type: 'warning'
          });
        }else{
            this.$router.push({
              path: "/Receive/index",
              query: { flag: row.id ,AudioIdx:0},
            });
        }
      })
    },
    jumpto(ind){
       let  num = 24 * 3600 * 1000 * 29;
       let dang=this.getCurrentTime()
       let timevt=this.timestampToTime(new Date(dang).getTime() + num);
       let newtime=[dang,timevt]
      // console.log(newtime)
      //  return
        if(ind==1){
          this.$router.push({
            path: "/Customer/AgentManagement",
            query: { residueTime: newtime,serviceStatus:0 },
          });
        }else if(ind==2){
           this.$router.push({
            path: "/building/index",
            query: {  residueTime: newtime,serviceStatus:0 },
          });
        }else if(ind==3){
           this.$router.push({
            path: "/Equipment/state",
            query: { flag: 1 },
          });
        }else{
           this.$router.push({
            path: "/Equipment/state",
            query: { flag: 2,electricity:20},
          });
        }
    },
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var yyyy = date.getFullYear() + "-";
      var MM =(date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "-";
      var dd =(date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
      return yyyy + MM + dd;
    },
    getCurrentTime() {
        //获取当前时间并打印
    　　let yy = new Date().getFullYear();
    　　let mm = new Date().getMonth()+1;
        if(mm<10){
          mm='0'+mm
        }
    　　let dd = new Date().getDate();
      // console.log(dd,'时间')
      if(dd<10){
       dd='0'+dd
      }
    　  let gettime = yy+'-'+mm+'-'+dd
    　  return gettime
    },
       //切换楼盘
    houseChange() {
        this.TimetoAhoose=0;
        this.statDateStart='';
        this.statDateEnd='';
        this.getgicd()
        this.findProhibitedRecord()
    },
    // 系统获取第一个数据
    waitingForOperation(){
      let obj={
        dateType: this.TimetoAhoose==5?null:this.TimetoAhoose,
        // dateType: 1,
        orderBy:1,
        startDate: this.statDateStart,
        endDate:this.statDateEnd,
         orgType: localStorage.getItem("orgType"),
      }
      if(this.role==1){
        obj.agentId=localStorage.getItem('agentId')/1
      }
      if(this.role==2){
        obj.orgCode=localStorage.getItem('orgCode')
      }
      this.$api.api.waitingForOperation(obj)
      .then(res=>{
        // console.log(res);
        // this.sysData=res.data
        this.sysTop=res.data.top
        this.sysSec=res.data.midA
        this.sysCompare=res.data.midB
        this.orderBy=res.data.midC
        if(this.role==2){
        this.houseRank=res.data.accountRank
        this.companyRank=res.data.houseRank
        }else{
        this.houseRank=res.data.houseRank
        this.companyRank=res.data.companyRank
        }

      })
    },
    //获取楼盘
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.getgicd();
          this.getindexZxllist()
          this.getemployeeExecutionRatelist()
          this.findProhibitedRecord()
          this.findAllZkEquipment()
        });
    },
    //获取卡片数据
    getgicd(){
       let obj = {
        houseId:this.houseId,
        dateType: this.TimetoAhoose==5?null:this.TimetoAhoose,
        statDateStart: this.statDateStart,
        statDateEnd:this.statDateEnd
      };
      this.$api.http.houseIndex(obj).then((res) => {

            this.cardlist.datalist={
              receptionCount:res.data.todayStat.receptionCount,
              activeCustomer:res.data.todayStat.activeCustomer,
              receivingCustomer:res.data.todayStat.receivingCustomer,
              avgDuration:res.data.todayStat.avgDuration,
              fraction:res.data.todayStat.fraction,
              prohibitedCustomer:res.data.todayStat.prohibitedCustomer,
              prohibitedZb:res.data.todayStat.prohibitedZb,
              accountNum:res.data.todayStat.accountNum,

            }
            this.cardlist.liftlist={
              receptionCount:res.data.comparedStat.receptionCount,
              activeCustomer:res.data.comparedStat.activeCustomer,
              receivingCustomer:res.data.comparedStat.receivingCustomer,
              avgDuration:res.data.comparedStat.avgDuration,
              fraction:res.data.comparedStat.fraction,
              prohibitedCustomer:res.data.comparedStat.prohibitedCustomer,
              prohibitedZb:res.data.comparedStat.prohibitedZb,
              accountNum:res.data.comparedStat.accountNum,
            }
             this.cardlist.sequential={
              receptionCount:res.data.yesterdayStat.receptionCount,
              activeCustomer:res.data.yesterdayStat.activeCustomer,
              receivingCustomer:res.data.yesterdayStat.receivingCustomer,
              avgDuration:res.data.yesterdayStat.avgDuration,
              fraction:res.data.yesterdayStat.fraction,
              prohibitedCustomer:res.data.yesterdayStat.prohibitedCustomer,
              prohibitedZb:res.data.yesterdayStat.prohibitedZb,
              accountNum:res.data.yesterdayStat.accountNum,
            }
      });
    },
    //获取设备
    findAllZkEquipment(){
      this.equipmentList=[];
        this.$api.http.findAllZkEquipment({
          onLine:this.classatec,
          houseId:this.houseId
        }).then((res) => {
          // 在这里赋值 低电
          this.equNum=res.data.offline
          this.equNum1=res.data.lowpower
          this.equipmentList=res.data.list;
        })
    },
    //获取违禁提醒列表
    findProhibitedRecord(){
          this.prohibitedlist=[];
          this.$api.http.findProhibitedRecord({
            houseId:this.houseId,
            dateType:this.TimetoAhoose==5?null:this.TimetoAhoose,
            statDateStart: this.statDateStart,
            statDateEnd:this.statDateEnd
          }).then((res) => {
              this.prohibitedlist=res.data;
          })
    },
    getindexZxllist(){
          this.indexZxllist=[]
          this.$api.http.getindexZxllist({
            houseId:this.houseId,
            dateType:this.TimetoAhoose==5?null:this.TimetoAhoose,
            statDateStart: this.statDateStart,
            statDateEnd:this.statDateEnd
          }).then((res) => {
           this.indexZxllist=res.data.list||[]
          })
    },
    getemployeeExecutionRatelist(){
          this.employeeExecutionRatelist={
            num:'',
            list:[],
            fraction:''
          }
          this.$api.http.getemployeeExecutionRatelist({
            houseId:this.houseId,
            dateType: this.TimetoAhoose==5?null:this.TimetoAhoose,
            statDateStart: this.statDateStart,
            statDateEnd:this.statDateEnd
          }).then((res) => {
               this.employeeExecutionRatelist=res.data
          })
    },

      tabclick(i){
        this.classatec=i;
        this.findAllZkEquipment()
      },
      tabclick2(e){
        console.log(e);
      },
      tabclick1(e){
        console.log(e);
      },
      tabtimetap(i){
        this.statDateStart='';
        this.statDateEnd='';
        this.customtime=[];
        this.TimetoAhoose=i;
        if(this.role==3){
        this.getgicd()
        this.getindexZxllist()
        this.getemployeeExecutionRatelist()
        this.findProhibitedRecord()
        }else{
          this.waitingForOperation()
        }

      },
      //切换时间
      confirmtime() {
        this.statDateStart=this.customtime[0];
        this.statDateEnd=this.customtime[1];
        this.TimetoAhoose=5;
        if(this.role==3){
        this.getgicd()
        this.getindexZxllist()
        this.getemployeeExecutionRatelist()
        this.findProhibitedRecord()
        }else{
          this.waitingForOperation()
        }
      },
  }
}
</script>

<style scoped="scoped" lang="scss">
.box-center{
  width: 100%;
  padding: 15px;
  min-width:1000px;
  padding-bottom: 100px;
}
.page-container{
  width: 100%;
  display: flex;
  margin-top: 16px;
  .pagechen1{
    flex: 1;
    // min-width: 190px;
    border-radius: 4px;
    margin-right: 20px;
    padding: 20px;
  }
  .pagechen{
    flex: 1;
    // min-width: 190px;
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    margin-right: 20px;
    padding: 20px;
    .pageboxtitle1{
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
    }
    .pageboxtitle2{
      width: 100%;
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      .span1{
        width: 100px;
          height: 30px;
        font-size: 30px;
        font-weight: normal;
        color: #32363D;
        line-height: 30px;
      }
       .span2{
         height: 30px;
         font-size: 16px;
         display:flex;
         align-items:flex-end;
         .span2-1{
           color: #424D64;
           margin-right: 15px;
           font-weight: 400;
         }
         .span2-2{
           font-weight: 600;
           color: #E6273A;
         }
         .span2-3{
           font-weight: 600;
           color:#25CEBA;
         }
      }
    }
    .pageboxtitle3{
      text-align: center;
      font-size: 30px;
      line-height: 44px;
    }
  }
}
.colostyle{
  color: #1E90FF;
  // font-size: 18px;
  font-weight: 600;
}
.table-box{
  width:98.8%;
  height: 400px;
  background: #FFFFFF;
  border-radius: 4px;
  margin-top: 24px;
  .title{
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-indent: 30px;
    font-weight: 500;
    color: #32363D;
    // border-bottom: 1px solid #E6E6E6;
  }
  .tabbox{
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
  }
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }


  .app-box-san{
  width: 100%;
  height: 350px;
  display: flex;
  margin-top: 15px;
  .zuo{
    // flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #FFFFFF;
    border-radius: 4px;
    width: 48.7%;
    .title{
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
      }
    }
  }
  .you{
    height: 100%;
    width: 49%;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      // border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
      }
    }
  }
}

.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    color: #32363d;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}
// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 20px;
      .jinboxtit {
            width: 14%;
            height: 18px;
            padding-right: 6px;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }
        .jinbox-box {
            width: 75%;
            height: 100%;
            border-radius: 8px;
            background: #F2F2F2;
        }
        .boxbaifenbi {
            height: 100%;
            background:#60D7A0;
            border-radius: 8px;
        }
        .boxbaifenbi2 {
            height: 100%;
            background: #5B8FF9;
        }
        .jinboxbott {
            width: 16%;
            text-indent: 50px;
        }
  }
  .hejisan{
		width: 92%;
		margin: 0 auto;
		display: flex;
		.text1-1{
			color: #666666;
		}
		.text1-2{
			color: #333333;
			margin-top: 10px;
		}
	}
  .title1{
    width: 100%;
    height: 55px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    padding: 0 20px;
    line-height: 55px;
  }
  /deep/ .el-badge__content{
    top:10px;
  }
</style>