<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel">
         <div style="text-indent: 30px;">接待时间:</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
            近7天
          </div>
          <div :class="{ tophove: timeType == 5 }" @click="tabtimetap(5)">
            近15天
          </div>
          <div :class="{ tophove: timeType == 6 }" @click="tabtimetap(6)">
            近30天
          </div>
        </div>
        <div style="margin-left: 20px">
          <el-date-picker
            @change="confirmtime"
            v-model="customtime"
            :clearable='false'
            type="daterange"
            range-separator="-"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div style="margin-left: 20px">
          <el-checkbox v-model="checked" @change="radioChange"
            >对比时间段</el-checkbox
          >
        </div>
         <div v-if="checked" style="margin-left: 20px;border:1px solid #DCDFE6;min-width: 220px;height: 30px;border-radius: 4px;max-width:250px;
             font-size: 13px; line-height: 30px; text-indent: 8px;" @click="show">
            {{ selectTime1 ? "时段二： " : "请选择： "}}
            <span v-if="selectTime1">{{ selectTime + "-" + selectTime1}}</span>
            <el-date-picker
              style="opacity: 0"
              v-model="time"
              @change="timeChange"
              ref="time"
              type="date"
              :clearable='false'
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
         </div>
      </div>
    </div>


    <!-- //卡片 -->
    <div class="kapian-box">
      <div class="kayi">
        <div class="shang">
          <div class="zuo">
            <div class="text1">有效接待</div>
            <div class="text2">{{cardobj.startSumCustomer||0}}个</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves1.png" alt="" />
          </div>
        </div>
        <div v-if="Confirmthecontrast" class="xia">
          <span class="span1">对比:{{cardobj.endSumCustomer ||0}}个</span>
          <span class="span2">{{cardobj.contrastSumCustomer ||0}}%</span>
        </div>
      </div>
      <div class="kayi">
        <div class="shang">
          <div class="zuo">
            <div class="text1">平均执行率</div>
            <div class="text2">{{cardobj.startFraction||0}}%</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves2.png" alt="" />
          </div>
        </div>
        <div v-if="Confirmthecontrast" class="xia">
          <span class="span1">对比:{{cardobj.endFraction ||0}}%</span>
          <span class="span2">{{cardobj.contrastFraction ||0}}%</span>
        </div>
      </div>
      <div class="kayi" style="margin: 0px">
        <div class="shang">
          <div class="zuo">
            <div class="text1">平均接待时长/min</div>
            <div class="text2">{{Math.floor(cardobj.startSumDuration/60)||0}}</div>
          </div>
          <div class="you">
            <img class="youimg" src="/img/waves3.png" alt="" />
          </div>
        </div>
        <div v-if="Confirmthecontrast" class="xia">
          <span class="span1">对比:{{Math.floor(cardobj.endSumDuration/60) ||0}}</span>
          <span class="span2">{{cardobj.contrastSumDuration ||0}}%</span>
        </div>
      </div>
    </div>

    <!-- 图表 -->
    <div class="app-box-er">
      <div class="titletab" style="cursor: pointer;">
        <div :class="{ claindex: aliasclass == 1 }" @click="tapChange(1)">项目</div>
        <div :class="{ claindex: aliasclass == 2 }" @click="tapChange(2)">团队</div>
        <div :class="{ claindex: aliasclass == 3 }" @click="tapChange(3)">顾问</div>
        <div :class="{ claindex: aliasclass == 4 }" @click="tapChange(4)">销讲一级</div>
        <div :class="{ claindex: aliasclass == 5 }" @click="tapChange(5)">销讲二级</div>
      </div>
      <!-- 团队选部门 -->
      <div v-if="aliasclass==2" style="display: flex;align-items: center;margin-top: 26px;">
        部门：
        <el-select  @change="departmenttap()" v-model="departmentid" placeholder="请选择">
          <el-option
            v-for="item in departmentlist"
            :key="item.deptId"
            :label="item.name"
            :value="item.deptId"
          >
          </el-option>
        </el-select>
      </div>

        <!-- 选择顾问 -->
      <div v-if="aliasclass==3" style="display: flex;align-items: center;margin-top: 26px;">
        顾问：
        <el-select  @change="consultanttap()" v-model="consultantid" placeholder="请选择">
          <el-option
            v-for="item in consultantlist"
            :key="item.accountId"
            :label="item.accountName"
            :value="item.accountId"
          >
          </el-option>
        </el-select>
      </div>

         <!-- 一二级 -->
      <div v-if="aliasclass==5" style="display: flex;align-items: center;margin-top: 26px;">
        一级：
        <el-select @change="Level1tap()"  v-model="Level1id" placeholder="请选择">
          <el-option
            v-for="item in Level1"
            :key="item.marketingId"
            :label="item.name"
            :value="item.marketingId"
          >
          </el-option>
        </el-select>
       &nbsp; &nbsp; 二级：
        <el-select  @change="Level2tap()"  v-model="Level2id" placeholder="请选择">
          <el-option
            v-for="item in Level2"
            :key="item.marketingId"
            :label="item.name"
            :value="item.marketingId"
          >
          </el-option>
        </el-select>
      </div>

      <div v-if="echartsisshow" id="main"></div>
      <div  v-else style="display:flex;justify-content: center; align-items: center;height: 350px;">
          <div>暂无数据</div>
       </div>
    </div>

    <!-- 表格 -->
    <div class="app-box-san" v-if="Confirmthecontrast && aliasclass!=3 && aliasclass!=4">
      <div class="santitle">对比报表</div>
      <div class="santab">
        <el-table :data="tableData" height="400" border style="width: 100%">
          <el-table-column prop="name" label="时间" align="center">
          </el-table-column>
          <el-table-column prop="shiduan1" label="时段1" align="center">
             <template slot-scope="scope">
               <span>{{scope.row.shiduan1}}%</span>
             </template>
          </el-table-column>
          <el-table-column prop="shiduan2" label="时段2" align="center">
             <template slot-scope="scope">
               <span>{{scope.row.shiduan2}}%</span>
             </template>
          </el-table-column>
          <el-table-column prop="heji" label="变化" align="center">
             <template slot-scope="scope">
               <span v-if="scope.row.heji>0"> <i class="el-icon-top" style="color: red;"></i>{{scope.row.heji}}%</span>
               <span v-if="scope.row.heji==0">{{scope.row.heji}}%</span>
               <span v-if="scope.row.heji<0"> <i class="el-icon-bottom" style="color: 25CEBA;"></i>{{scope.row.heji}}%</span>
             </template>
          </el-table-column>
        </el-table>

      </div>
    </div>

      <div v-if="aliasclass==3 || aliasclass==4" class="app-box-san" style="padding:12px;" >
        <div style="overflow: auto;">
            <table class="table">
                <tbody class="tbody">
                    <tr v-if="tablelist1.length!=0">
                        <td class="theadtd" v-for="(item,index) in tablelist1" :key='index'>{{item.name}}</td>
                    </tr>
                    <tr v-if="tablelist2.length!=0">
                        <td class="theadtd" v-for="(item,index) in tablelist2" :key='index'>{{item.name}}</td>
                    </tr>
                    <tr v-if="tablelist3.length!=0">
                        <td class="theadtd" v-for="(item,index) in tablelist3" :key='index'>{{item.name}}</td>
                    </tr>
                    <tr v-if="tablelist4.length!=0">
                          <td class="theadtd" v-for="(item,index) in tablelist4" :key='index'>
                            <span v-if="item.name=='变化'">{{item.name}}</span>
                            <span v-else-if="item.name==0">{{item.name}}%</span>
                            <span v-else-if="item.name>0" style="color: red;">{{item.name}}%</span>
                            <span v-else-if="item.name<0" style="color: #25CEBA;">{{item.name}}%</span>
                          </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      timeType: 4,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      time: "",//对比时间的数组
      page: {
        openTime: "",
        closeTime: "",
      },
      customtime: [],//自定义时间
      selectTime1: "",//对比时间
      selectTime: "",//对比时间
      aliasclass: 1,//tab下标
      houseId: "",//楼盘id
      options: [],
      value: "",
      checked: false,//是否对比
      Confirmthecontrast:false,
      tableData: [],//表格数据
      cardobj:{},
      departmentlist:[],
      departmentid:'',
      echartsisshow:true,
      consultantlist:[],
      consultantid:'',
      tablelist1:[],
      tablelist2:[],
      tablelist3:[],
      tablelist4:[],
      Level1:[],
      Level2:[],
      Level1id:'',
      Level2id:''
    };
  },
  mounted() {
    this.houseId = localStorage.getItem("houseId");
    this.tabtimetap(4);
     this.overviewfindList()
  },
  methods: {
    //销讲二级
    trendAnalysisLevel2(){
      let pamaet={
        showStatus:'',
        houseId:this.houseId,
        timeType:0,
        firstStartDate:this.page.openTime,
        firstEndDate:this.page.closeTime,
        lastStartDate:this.selectTime,
        lastEndDate:this.selectTime1,
        marketingId:this.Level2id
      }

      if(this.timeType==-1){
        pamaet.timeType=null
      }else{
        pamaet.timeType=this.timeType
      }
      if(this.checked==true){
        pamaet.showStatus=1;
        pamaet.timeType=null
      }else{
         pamaet.showStatus=0
      }
      this.$api.http.trendAnalysisLevel2(pamaet).then((res) => {
          if(this.Confirmthecontrast==false){
            let newlist=res.data.startList || [];
            var newline=[];
            var newline2=[];
            newlist.map(item=>{
              newline.push(item.zxl)
              newline2.push(item.statDate.slice(5,10))
            })
            this.SwitchCARDS(newline,newline2)
         }else{
            let newlist=res.data.startList || [];
            let newlist2=res.data.endList || [];
            let hejilist=res.data.comparedList || [];
            var newline=[];//起始数据
            var newline2=[];//对比数据
            var newline1=[];//时间

            let arr=[];
            newlist.map(item=>{
              newline.push(item.zxl)
            })
            newlist2.map(item=>{
              newline1.push(item.zxl)
            })
           newlist.forEach((item, sdf) => {
							newlist2.forEach((child, zxc) => {
								if (sdf == zxc) {
                   newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10))
                   arr.push({
                     name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10),
                     shiduan1:item.zxl,
                     shiduan2:child.zxl,
                   });
								}
							})
						})
            hejilist.forEach((acd,xdx)=>{
              arr.forEach((che,ind)=>{
                if(xdx==ind){
                  che.heji=acd.zxl;
                }
              })
            })
            arr.unshift({
              name:'项目合计',
              shiduan1:res.data.startSum,
              shiduan2:res.data.endSum,
              heji:res.data.comparedSum,
            })

            this.SwitchCARDS2(newline,newline1,newline2)
            this.tableData=arr;
            console.log( this.tableData)
         }
      })

    },
    //切换一级
    Level1tap(){
      this.Level1.forEach((item,index)=>{
        if(this.Level1id==item.marketingId){
          this.Level2=item.children || [];
          this.Level2id=item.children[0].marketingId || '';
        }
      })
      this.trendAnalysisLevel2()
    },
     //切换er级
    Level2tap(){
      this.trendAnalysisLevel2()
    },
    //一二级
    trendAnalysisAllLevel(){
       let pamaet={
        showStatus:'',
        houseId:this.houseId,
        timeType:0,
        firstStartDate:this.page.openTime,
        firstEndDate:this.page.closeTime,
        lastStartDate:this.selectTime,
        lastEndDate:this.selectTime1,
      }

      if(this.timeType==-1){
        pamaet.timeType=null
      }else{
        pamaet.timeType=this.timeType
      }
      if(this.checked==true){
        pamaet.showStatus=1;
        pamaet.timeType=null
      }else{
         pamaet.showStatus=0
      }
      this.$api.http.trendAnalysisAllLevel(pamaet).then((res) => {
        this.Level1=res.data || [];
        this.Level1id=res.data[0].marketingId || '';
        this.Level2=res.data[0].children || [];
        this.Level2id=res.data[0].children[0].marketingId || '';
        this.trendAnalysisLevel2()
      })
    },

    //切换顾问
    consultanttap(){
      this.trendAnalysisAccount()
    },
    // 获取顾问
    trendAnalysisAllAccount(pamaet){
      this.$api.http.trendAnalysisAllAccount(pamaet).then((res) => {
        this.consultantlist=res.data || [];
        if( this.consultantlist.length!=0){
            this.consultantid=res.data[0].accountId;
            this.trendAnalysisAccount()
        }else{
           echarts.init(document.getElementById("main")).dispose();
            this.echartsisshow=false;
            this.tableData=[];
        }
      })
    },
    trendAnalysisAccount(){
      var that=this;
       let pamaet={
        showStatus:'',
        houseId:this.houseId,
        timeType:0,
        firstStartDate:this.page.openTime,
        firstEndDate:this.page.closeTime,
        lastStartDate:this.selectTime,
        lastEndDate:this.selectTime1,

      }
      if(this.aliasclass==3){
          pamaet.accountId=this.consultantid
      }
      if(this.timeType==-1){
        pamaet.timeType=null
      }else{
        pamaet.timeType=this.timeType
      }
      if(this.checked==true){
        pamaet.showStatus=1;
        pamaet.timeType=null
      }else{
         pamaet.showStatus=0
      }
      this.$api.http.trendAnalysisAccount(pamaet).then((res) => {
         if(this.Confirmthecontrast==false){
             let newlist=res.data.firstList || [];
             var newline=[];//起始数据
             var newlinename=[];
             let tablist=[
              {name:'时间',}
             ]
             let tablist2=[
              {name:that.customtime[0].substring(5,10)+'/'+that.customtime[1].substring(5,10),}
             ]
             newlist.map(item=>{
                newline.push(item.zxl)
                newlinename.push({name:item.name,max:100})
                tablist.push({name:item.name})
                tablist2.push({name:item.zxl+'%',})
             })
            this.tablelist1=tablist;
            this.tablelist2=tablist2;
            this.tablelist3=[];
            this.tablelist4=[];
            this.piechart(newline,newlinename)
         }else{

             let newlist=res.data.firstList || [];
             let newlist2=res.data.secondList|| [];
             let newlist4=res.data.thirdList|| [];

             var newline=[];//起始数据
             let newline2=[];//对比数据
             var newlinename=[];

              let tablist1=[
                 {name:'时间',}
              ]
              let tablist2=[
                {name:that.customtime[0].substring(5,10)+'/'+that.customtime[1].substring(5,10),}
              ]
              let tablist3=[
                {name:that.selectTime.substring(5,10)+'/'+that.selectTime1.substring(5,10),}
              ]
              let tablist4=[
                {name:'变化',}
              ]

             newlist.map(item=>{
                newline.push(item.zxl)
                newlinename.push({name:item.name,max:100})
                tablist1.push({name:item.name})
                tablist2.push({name:item.zxl+'%',})
             })
             newlist2.map(item=>{
                newline2.push(item.zxl)
                tablist3.push({name:item.zxl+'%',})
             })
             newlist4.map(item=>{
                tablist4.push({name:item.zxl,})
             })

            this.tablelist1=tablist1;
            this.tablelist2=tablist2;
            this.tablelist3=tablist3;
            this.tablelist4=tablist4;
            this.piechart2(newline,newlinename,newline2)
         }
      })
    },
    //获取卡片
    trendtrendAnalysis(){
      let pamaet={
        showStatus:'',
        houseId:this.houseId,
        timeType:0,
        firstStartDate:this.page.openTime,
        firstEndDate:this.page.closeTime,
        lastStartDate:this.selectTime,
        lastEndDate:this.selectTime1
      }

      if(this.timeType==-1){
        pamaet.timeType=null
      }else{
        pamaet.timeType=this.timeType
      }
      if(this.checked==true){
        pamaet.showStatus=1;
        pamaet.timeType=null
      }else{
         pamaet.showStatus=0
      }
      this.$api.http.trendtrendAnalysis(pamaet).then((res) => {
        this.cardobj=res.data;
        if(this.aliasclass==1){
          this.echartsisshow=true;
          this.trendtrendAnalysisProject(pamaet)
        }else if(this.aliasclass==2){
          if(this.departmentid!=''){
            pamaet.deptId=this.departmentid
            this.trendtrendAnalysisProject(pamaet)
          }else{
            echarts.init(document.getElementById("main")).dispose();
            this.echartsisshow=false;
            this.tableData=[];
          }
        }else if(this.aliasclass==3){
          if(this.consultantid.length==0){
            this.trendAnalysisAllAccount(pamaet)
          }else{
            this.trendAnalysisAccount()
          }
        }else if(this.aliasclass==4){
          this.trendAnalysisAccount()
        }else{
          this.trendAnalysisAllLevel()
        }

      })
    },
    //项目
    trendtrendAnalysisProject(pamaet){
       this.$api.http.trendtrendAnalysisProject(pamaet).then((res) => {
         if(this.Confirmthecontrast==false){
            let newlist=res.data.startList || [];
            var newline=[];
            var newline2=[];
            newlist.map(item=>{
              newline.push(item.fraction)
              newline2.push(item.statDate.slice(5,10))
            })
            this.SwitchCARDS(newline,newline2)
         }else{
            let newlist=res.data.startList || [];
            let newlist2=res.data.endList || [];
            let hejilist=res.data.comparedList || [];
            var newline=[];//起始数据
            var newline2=[];//对比数据
            var newline1=[];//时间

            let arr=[];
            newlist.map(item=>{
              newline.push(item.fraction)
            })
            newlist2.map(item=>{
              newline1.push(item.fraction)
            })
           newlist.forEach((item, sdf) => {
							newlist2.forEach((child, zxc) => {
								if (sdf == zxc) {
                   newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10))
                   arr.push({
                     name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10),
                     shiduan1:item.fraction,
                     shiduan2:child.fraction,
                   });
								}
							})
						})
            hejilist.forEach((acd,xdx)=>{
              arr.forEach((che,ind)=>{
                if(xdx==ind){
                  che.heji=acd.fraction;
                }
              })
            })
            arr.unshift({
              name:'项目合计',
              shiduan1:res.data.startSum,
              shiduan2:res.data.endSum,
              heji:res.data.comparedSum,
            })

            this.SwitchCARDS2(newline,newline1,newline2)
            this.tableData=arr;
            console.log( this.tableData)
         }
      })
    },
    //获取部门下拉菜单
    overviewfindList(){
        this.$api.http.overviewfindList({
          houseId:this.houseId,
        }).then((res) => {
          this.departmentlist=res.data || [];
          if(this.departmentlist.length!=0){
            this.departmentid=res.data[0].deptId
          }else{
            this.departmentid=''
          }
        })
    },
    //切换部门
    departmenttap(){
      this.trendtrendAnalysis()
    },


    //选项卡切换
    tapChange(idx){
      this.aliasclass=idx;
      this.trendtrendAnalysis()
    },
    //时间tab切换
    tabtimetap(i) {
      this.timeType = i;
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      //给时间选择器赋值
      let num = 24 * 3600 * 1000;
      //	获取当前时间戳转换为日期格式
      if (this.timeType == 4) {
        num = 24 * 3600 * 1000 * 6;
      }
      if (this.timeType == 5) {
        num = 24 * 3600 * 1000 * 14;
      }
      if (this.timeType == 6) {
        num = 24 * 3600 * 1000 * 29;
      }
      this.customtime = [
        this.timestampToTime(new Date().getTime() - num),
        this.timestampToTime(new Date().getTime()),
      ];
      this.$set(this, "time", null);
       this.Confirmthecontrast=false;
      this.trendtrendAnalysis()
    },
    // 对比时间选择弹框显示
    show() {
      this.$refs.time.pickerVisible = true;
    },
    //选择对比时间
    timeChange(e) {
      //	对数据进行处理
      //	当当前选择的为自定义时间时
      this.selectTime = "";
      this.selectTime1 = "";
      this.timeSelect(e);
    },
    timeSelect(e) {
      if (this.timeType == -1) {
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime());
      } else {
        //	获取今天昨天近一周
        //	获取一天的时间戳
        let num = 24 * 3600 * 1000;
        //	获取当前时间戳转换为日期格式
        if (this.timeType == 4) {
          num = 24 * 3600 * 1000 * 6;
        }
        if (this.timeType == 5) {
          num = 24 * 3600 * 1000 * 14;
        }
        if (this.timeType == 6) {
          num = 24 * 3600 * 1000 * 29;
        }
        this.selectTime = e;
        this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);
      }
        this.Confirmthecontrast=true;
        this.page.openTime=this.customtime[0]
        this.page.closeTime=this.customtime[1]
        this.trendtrendAnalysis()
    },
    radioChange() {
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
    },
    //选择自定义时间
    confirmtime(e) {
      this.timeType = "-1";
      this.checked = false;
      this.selectTime = "";
      this.selectTime1 = "";
      this.$set(this, "time", null);
      if (!e) return;
      this.page.openTime = this.customtime[0];
      this.page.closeTime = this.customtime[1];
      this.Confirmthecontrast=false;
      this.trendtrendAnalysis()
    },
    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;
    },



    SwitchCARDS(newline,newline2) {
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["起始时间"],
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: newline2,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: "起始时间",
            data:newline,
            type: "line",
            smooth: true,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    SwitchCARDS2(newline,newline1,newline2) {
       echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["起始时间","对比时间"],
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: newline2,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: "起始时间",
            data:newline,
            type: "line",
            smooth: true,
          },
          {
            name: "对比时间",
            data:newline1,
            type: "line",
            smooth: true,
          }
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
     piechart2(newline,newlinename,newline2){
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          data: ['起始时间','对比时间'],
            bottom: "10",
        },
        color:[
          '#2671E2',
          '#F3787B',
        ],
        radar: {
          // shape: 'circle',
          indicator: newlinename
        },
        series: [
          {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: [
              {
                value:newline,
                name: '起始时间'
              },
              {
                value:newline2,
                name: '对比时间'
              },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
       myChart.resize();
      });
    },
    piechart(newline,newlinename){
      echarts.init(document.getElementById("main")).dispose();
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
          data: ['起始时间'],
            bottom: "10",
        },
        color:[
          '#2671E2',
          '#F3787B',
        ],
        radar: {
          // shape: 'circle',
          indicator: newlinename
        },
        series: [
          {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            data: [
              {
                value:newline,
                name: '起始时间'
              },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
      myChart.resize();
      });
    }

  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}

.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;
}

#main {
  width: 100%;
  height: 380px;
}

.app-box-san {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding-bottom: 15px;
  .santitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
    text-indent: 15px;
  }
  .santab {
    width: 100%;
    height: 400px;
    padding: 15px;
  }
}
.app-box-er {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding: 15px;
  .titletab {
    width: 100%;
    height: 42px;
    display: flex;
    // border: 1px solid red;
  }
  .titletab div {
    width: 130px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border: 1px solid #e0e0e0;
    font-size: 14px;
  }
  .claindex {
    background: #2671e2;
    color: #ffffff;
    border: none;
  }
}

.kapian-box {
  width: 100%;
  height: 144px;
  margin-top: 15px;
  display: flex;
  .kayi {
    flex: 1;
    margin-right: 15px;
    height: 144px;
    background: #ffffff;
    border-radius: 4px;
    .shang {
      width: 100%;
      display: flex;
      .zuo {
        width: 50%;
        .text1 {
          font-size: 16px;
          font-weight: 400;
          color: #666666;
          margin-left: 30px;
          margin-top: 24px;
        }
        .text2 {
          font-size: 32px;
          font-weight: normal;
          color: #32363d;
          margin-left: 30px;
          margin-top: 18px;
        }
      }
      .you {
        width:50%;
        display: flex;
        align-items: center;
        .youimg {
          width: 90%;
          height: 60px;
        }
      }
    }
    .xia {
      width: 100%;
      font-size: 14px;
      text-indent: 30px;
      margin-top: 10px;
      .span1 {
        color: #333333;
        font-weight: 400;
      }
      .span2 {
        color: #e6273a;
        font-weight: 400;
        margin-left: 16px;
      }
    }
  }
}

.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;
  }
}
.timeSel {
  margin-top: 8px;
  margin-left: 20px;
  border: 1px solid #ccc;
  padding: 0 5px;
  cursor: pointer;
  color: #606266;
}
      .theadtd{
            width: 140px;
            height: 48px;
            border: 1px solid #E0E0E0;
            text-align: center;
            line-height: 48px;
            font-size: 16px;
            color: #32363D;

        }
</style>
