<template>
  <div class="box-center">
    <!-- 头 -->
     <div class="app-top">
       <div class="app-titel" v-if="role!=3" style="margin-bottom:10px;">
        <div class="titel-text">楼盘选择:</div>
        <div style="margin-left: 26px">
           <el-select v-model="houseId" placeholder="请选择"  @change="houseChange">
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>

        <div class="app-titel">
          <div style="text-indent: 30px;">接待时间:</div>
          <div class="toptimeqhuan">
            <div :class="{ tophove: TimetoAhoose == 4 }" @click="tabtimetap(4)">
              近7天
            </div>
            <div :class="{ tophove: TimetoAhoose == 5 }" @click="tabtimetap(5)">
              近15天
            </div>
            <div :class="{ tophove: TimetoAhoose == 6 }" @click="tabtimetap(6)">
            近30天
            </div>
          </div>
          <div style="margin-left: 26px">
            <el-date-picker
              v-model="customtime"
              @change="confirmtime()"
              type="daterange"
              :clearable='false'
              range-separator="-"
              :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <div style="margin-left: auto;margin-right:10px;" v-if="sta_team_downLoad">
          <el-button @click="downLoad">导出</el-button>
        </div>
        </div>
     </div>
       <!-- 表格 -->
    <div class="cen-tab">
      <div style="overflow: auto;">
        <table>
          <tbody>
            <tr>
              <td v-for="(item,index) in tablsitdata1" :key="index" class="theadtd">{{item.name}}</td>
            </tr>
            <tr v-for="(item,iddex) in tablsitdata2" :key="iddex">
               <td v-if="iddex+1==tablsitdata2.length" class="theadtd">合计/平均</td>
               <td v-else class="theadtd">{{iddex+1}}</td>

               <td class="theadtd">{{item.deptName}}</td>
               <td class="theadtd">{{item.receptionCount}}</td>
               <td class="theadtd">{{item.accountNum}}</td>
               <td class="theadtd">{{item.activeCustomer||0}}</td>
               <td class="theadtd">{{item.prohibitedCustomer||0}}</td>
               <td class="theadtd">{{Math.floor(item.sumDuration/60) ||0}}</td>
               <td class="theadtd">{{item.fraction ||0}}%</td>
               <td class="theadtd">{{item.prohibitedZb||0}}%</td>
               <td class="theadtd" v-for="(che,ind) in item.resultsList" :key='ind'>{{che.zxl}}%</td>
            </tr>

      </tbody>
    </table>
      </div>

    </div>

     <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">接待量排名</div>
          </div>
         	<div class="hejisan">
            <div class="sanbox1" style="width: 50%;">
              <div class="text1-1">团队总数</div>
              <div class="text1-2">{{teamobj1.num||0}}个</div>
            </div>
            <div  class="sanbox1" style="width: 50%;">
              <div class="text1-1">均值</div>
              <div class="text1-2">{{teamobj1.avg||0}}个</div>
            </div>
         </div>
         <div  v-if="teamobj1.list.length!=0" style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in teamobj1.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}个</div>
              </div>
         </div>
         <div class="nulllist" style="height:300px" v-if="teamobj1.list.length==0">
                <div class="imgboxc">
                  <img class="imgboxc-img" src="/img/nullnull.png" alt="">
                  <div class="nulltext">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">接待时长排名</div>
          </div>
          	<div class="hejisan">
            <div class="sanbox1" style="width: 50%;">
              <div class="text1-1">团队总数</div>
              <div class="text1-2">{{teamobj2.num||0}}个</div>
            </div>
            <div  class="sanbox1" style="width: 50%;">
              <div class="text1-1">均值</div>
              <div class="text1-2">{{Math.floor(teamobj2.avg/60)||0}}分钟</div>
            </div>
         </div>
          <div v-if="teamobj2.list.length!=0" style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in teamobj2.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}分钟</div>
              </div>
         </div>
            <div class="nulllist" style="height:300px" v-if="teamobj2.list.length==0">
                <div class="imgboxc">
                  <img class="imgboxc-img" src="/img/nullnull.png" alt="">
                  <div class="nulltext">暂无数据</div>
                </div>
            </div>
        </div>
    </div>

     <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">销讲执行率</div>
            <div class="text2">
               <el-select @change="teamAllLevelidtap()" style="width: 90%; margin: 0 auto;" v-model="teamAllLevelid" placeholder="请选择">
                <el-option
                  v-for="item in teamAllLevel"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
             </div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%;">
              <div class="text1-1">团队总数</div>
              <div class="text1-2">{{teamobj3.num||0}}个</div>
            </div>
            <div  class="sanbox1" style="width: 50%;">
              <div class="text1-1">均值</div>
              <div class="text1-2">{{teamobj3.avg || 0}}%</div>
            </div>
         </div>
         <div v-if="teamobj3.list.length!=0" style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in teamobj3.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}%</div>
              </div>
         </div>
           <div class="nulllist" style="height:300px" v-if="teamobj3.list.length==0">
                <div class="imgboxc">
                  <img class="imgboxc-img" src="/img/nullnull.png" alt="">
                  <div class="nulltext">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">销讲能力雷达图</div>
          </div>
          <div id="main"  v-if="isshowcd2==true" style="height: 350px;width: 94%;margin: 0 auto;"></div>
            <div class="nulllist" style="height:300px" v-if="isshowcd2==false">
                <div class="imgboxc">
                  <img class="imgboxc-img" src="/img/nullnull.png" alt="">
                  <div class="nulltext">暂无数据</div>
                </div>
            </div>
        </div>
    </div>

     <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">违禁接待次数</div>
            <div class="text2">
               <el-select @change="teamAllLeve2tap()" style="width: 90%; margin: 0 auto;" v-model="teamAllLeve2id" placeholder="请选择">
                <el-option
                  v-for="item in teamAllLeve2"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
             </div>
          </div>
          <div class="hejisan">
            <div class="sanbox1" style="width: 50%;">
              <div class="text1-1">团队总数</div>
              <div class="text1-2">{{teamobj5.num||0}}个</div>
            </div>
            <div  class="sanbox1" style="width: 50%;">
              <div class="text1-1">均值</div>
              <div class="text1-2">{{teamobj5.avg||0}}次</div>
            </div>
         </div>
         <div v-if="teamobj5.list.length!=0" style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
              <div  class="jinbox" v-for="(item,i) in teamobj5.list" :key='i'>
                  <div class="jinboxtit">{{item.name}}</div>
                  <div class="jinbox-box">
                      <div class="boxbaifenbi" :style="'width:'+(item.zxl1)+'%;'"></div>
                  </div>
                  <div class="jinboxbott">{{item.zxl}}次</div>
              </div>
         </div>
           <div class="nulllist" style="height:300px" v-if="teamobj5.list.length==0">
                <div class="imgboxc">
                  <img class="imgboxc-img" src="/img/nullnull.png" alt="">
                  <div class="nulltext">暂无数据</div>
                </div>
            </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">违禁话术雷达图</div>
          </div>
          <div v-if="isshowcd==true" id="main2" style="height: 350px;width: 94%;margin: 0 auto;"></div>
           <div class="nulllist" style="height:300px" v-if="isshowcd==false">
                <div class="imgboxc">
                  <img class="imgboxc-img" src="/img/nullnull.png" alt="">
                  <div class="nulltext">暂无数据</div>
                </div>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { exportMethodPost} from "@/util/util";
export default {
  data() {
    return {
      houseId: "",
      TimetoAhoose: 4,
      customtime: [],
      statDateStart:'',
      statDateEnd:'',
      tablsitdata1:[],
      tablsitdata2:[],
      teamobj1:{
        avg:'',
        list:[],
        num:''
      },
      teamobj2:{
        avg:'',
        list:[],
        num:''
      },
      teamobj3:{
        avg:'',
        list:[],
        num:''
      },
      teamobj5:{
        avg:'',
        list:[],
        num:''
      },
      teamAllLevel:[],
      teamAllLevelid:'',
      teamAllLeve2:[],
      teamAllLeve2id:'',
      ceratelist:[],
       role:'',
      houseList:[],
      isshowcd:true,
      isshowcd2:true
    };
  },
    computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.sta_team_downLoad = this.permissions["sta_team_downLoad"];
  },
  mounted() {
    this.role=localStorage.getItem("orgType");
    if(this.role==3){
       this.houseId = localStorage.getItem("houseId");
      this.allhttp()
    }else{
      this.zkhousePage()
    }
  },
  methods: {
      downLoad(){
      let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      exportMethodPost('autoSR/cusStageStatistics/teamTableExport','团队对比',pamaet)
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          this.houseList = res.data;
          this.houseId = res.data[0].id;
          this.allhttp()
        });
    },
    houseChange(){
      this.customtime=[];
      this.TimetoAhoose=4;
      this.statDateStart=''
      this.statDateEnd=''
      this.allhttp()

    },
    allhttp(){
      this.teamteamTable()
      this.teamData1()
      this.teamData2()
      this.teamData3()
      this.teamData4()
      this.teamData5()
      this.teamData6()
      this.teamAllLeve()
    },
    // 获取一级
    teamAllLeve(){
      this.teamAllLevel=[
        {name:'平均执行',value:''},
      ]
       this.teamAllLeve2=[
        {name:'总次数',value:''},
      ]
      let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamAllLevel(pamaet).then((res) => {
        let arr1=res.data.resultsList ||[];
        let arr2=res.data.sensitiveWordsList ||[];
        arr1.map(item=>{
          this.teamAllLevel.push({
            name:item.name,
            value:item.marketingId
          })
        })
        arr2.map(item=>{
          this.teamAllLeve2.push({
            name:item.words,
            value:item.words
          })
        })
        this.teamAllLevelid='';
        this.teamAllLeve2id='';
      })
    },
    //表格
    teamteamTable(){
      this.tablsitdata1=[
        {name:'序号'},{name:'团队'},{name:'接待量'},{name:'接待顾问'},{name:'有效接待'},{name:'违禁接待次数'},
        {name:'接待时长（分）'},{name:'平均执行率'},{name:'违禁接待占比'},
      ]
      let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
      }

      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamteamTable(pamaet).then((res) => {
        let newlist=res.data || [];
        this.tablsitdata2=res.data;
          newlist[0].resultsList.map(item=>{
            this.tablsitdata1.push( {name:item.name})
          })
      })
    },
    //接待量排名
    teamData1(){
      this.teamobj1={
        avg:'',
        list:[],
        num:''
      }
       let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:1
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.deptName
            obj.zxl=item.activeCustomer;
            arr.push(obj)
          })
          arr=this.dealData(arr)
          this.teamobj1={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            list:arr || []
          }
      })
    },
    //录音时长排名
    teamData2(){
      this.teamobj2={
        avg:'',
        list:[],
        num:''
      }
       let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:2
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.deptName
            obj.zxl=Math.floor(item.sumDuration/60)
            arr.push(obj)
          })
          arr=this.dealData(arr)
          this.teamobj2={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            list:arr || []
          }
      })
    },
    //销讲执行率切换一级
    teamAllLevelidtap(){
      this.teamData3()
    },
    //销讲执行率
    teamData3(){
      this.teamobj3={
        avg:'',
        list:[],
        num:''
      }
       let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:3,
        marketingId:this.teamAllLevelid
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.deptName
            obj.zxl=item.fraction
            arr.push(obj)
          })
          // arr=this.dealData(arr)
          this.teamobj3={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            list:arr || []
          }
      })
    },
    //销讲雷达图
    teamData4(){
       let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:4,
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamData(pamaet).then((res) => {
          let namelist=[];
          let datalist=[];
          let newlinename=[];
          let arr=res.data.list||[];

            if(arr.length!=0){
              arr.map(item=>{
                namelist.push(item.deptName)
                datalist.push({
                  name:item.deptName,
                  value:[]
                })
              })
                 arr[0].resultsList.map(item=>{
                  newlinename.push({
                    name:item.name,max:100
                  })
              })
              arr.map((item,index)=>{
                datalist.map(che=>{
                  if(item.deptName==che.name){
                    item.resultsList.map(as=>{
                        che.value.push(as.zxl)
                    })
                  }
                })
              })
            }

          this.initecah(namelist,datalist,newlinename)
      })
    },
    //违禁话术雷达图
    teamData6(){
       let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:6,
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamData(pamaet).then((res) => {
          let namelist=[];
          let datalist=[];
          let newlinename=[];
          let arr=res.data.list||[];
          if(arr.length!=0){
               arr.map(item=>{
                namelist.push(item.deptName)
                datalist.push({
                  name:item.deptName,
                  value:[]
                })
              })
              arr[0].sensitiveWordsList.map(item=>{
                  newlinename.push({
                    name:item.words,max:100
                  })
              })
              arr.map((item,index)=>{
                datalist.map(che=>{
                  if(item.deptName==che.name){
                    item.sensitiveWordsList.map(as=>{
                        che.value.push(as.num)
                    })
                  }
                })
              })
          }
          this.initecah2(namelist,datalist,newlinename)
      })
    },

    initecah(namelist,datalist,newlinename){
      if(datalist.length==0){
        this.isshowcd2=false
        return
      }else{
         this.isshowcd2=true
      }
       echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
          color: [
              "#6F8EDC",
              "#EE6666",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#66AFF5",
              "#FABD2B",
              "#FFCF8F",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          data: namelist,
              right: "10",
          top:'10'
        },
        color:[
          '#2671E2',
          '#F3787B',
        ],
        radar: {
          // shape: 'circle',
          indicator: newlinename
        },
        series: [
          {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: datalist
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
       myChart.resize();
      });
    },
    initecah2(namelist,datalist,newlinename){
      if(datalist.length==0){
        this.isshowcd=false
        return
      }else{
         this.isshowcd=true
      }
       echarts.init(document.getElementById("main2")).dispose();
      var chartDom = document.getElementById("main2");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
          color: [
              "#6F8EDC",
              "#EE6666",
              "#F98120",
              "#1CC99E",
              "#9474FB",
              "#66AFF5",
              "#FABD2B",
              "#FFCF8F",
              "#657292",
              "#7A6A99",
              "#BF5D52",
              "#77B7E4",
              "#E6A065",
              "#9D5139",
              "#C1AA88",
              "#F87F7A",
              "#F6CF74",
              "#7F5506",
              "#88BB9B",
              "#6E99AA",
              "#5789D0",
            ],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          data: namelist,
               right: "10",
          top:'10'
        },
        color:[
          '#2671E2',
          '#F3787B',
        ],
        radar: {
          // shape: 'circle',
          indicator: newlinename
        },
        series: [
          {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: datalist
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
       myChart.resize();
      });
    },

    //违禁接待次数一级切换
    teamAllLeve2tap(){
        this.teamData5()
    },
    //违禁接待次数
    teamData5(){
      this.teamobj5={
        avg:'',
        list:[],
        num:''
      }
       let pamaet={
        houseId:this.houseId,
        dateType:0,
        statDateStart:this.statDateStart,
        statDateEnd:this.statDateEnd,
        type:5,
        words:this.teamAllLeve2id
      }
      if(this.TimetoAhoose==7){
        pamaet.dateType=null
      }else{
        pamaet.dateType=this.TimetoAhoose
      }
      this.$api.http.teamData(pamaet).then((res) => {
          let arr=[]
          res.data.list.map(item=>{
            let obj={}
            obj.name=item.deptName
            obj.zxl=item.prohibitedCustomer
            arr.push(obj)
          })
          arr=this.dealData(arr)
          this.teamobj5={
            avg: res.data.avg || 0,
            num: res.data.num || 0,
            list:arr || []
          }
      })
    },



    // 自定义时间
    confirmtime(){
      this.TimetoAhoose=7;
      this.statDateStart=this.customtime[0],
      this.statDateEnd=this.customtime[1];
      this.allhttp()
    },
    //切换时间
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.statDateStart='';
      this.statDateEnd='';
      this.customtime=[];
      this.allhttp()
    },
    dealData(arr){
      console.log(arr)
      let num=Math.max.apply(Math, arr.map(function (o) { return o.zxl })) //结果：3
			arr.map(item=>{
					item.zxl1=Math.floor(item.zxl/num*100) || 0;
				})
				return arr
		},
  },
};
</script>

<style scoped="scoped" lang="scss" >
/* 添加table滚动条 */
table {
  border-collapse: collapse;
  width: 100%;
}
tbody {
  display: block;
  // width: 100%;
  // overflow-x: auto;
  // overflow-y: auto;
  height: 220px;
}
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  // word-break: break-all;
}



.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab{
  width: 100%;
  padding: 15px;
  background: #FFFFFF;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top{
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}

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

	.hejisan{
		width: 92%;
		margin: 0 auto;
		display: flex;
		padding-top: 10px;
		padding-bottom:10px;
		.text1-1{
			color: #666666;
		}
		.text1-2{
			color: #333333;
			margin-top: 10px;
		}
	}

// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 10px;
      .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: 16px;
        }
  }
    .theadtd{
            width: 140px;
            height: 48px;
            border: 1px solid #E0E0E0;
            text-align: center;
            line-height: 48px;
            font-size: 16px;
            color: #32363D;

        }
</style>
