liumin
/
zkPCproject
0
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 0 Wiki Aktiviteter
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
237 Incheckningar
4 Grenar
45 MiB
 
 
 
Träd: 597584b89a
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '597584b89a'
${ noResults }
zkPCproject/src/views/Statistics/TrendAnalysis.vue

1258 rader
35 KiB
Rå Blame Historik 

  1. <template>

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

  3.     <!-- 头 -->

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

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

  6.         <div class="titel-text">楼盘选择:</div>

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

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

  9.             <el-option

  10.               v-for="item in houseList"

  11.               :key="item.id"

  12.               :label="item.propertyName"

  13.               :value="item.id">

  14.             </el-option>

  15.           </el-select>

  16.         </div>

  17.       </div>

  18. 

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

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

  21.         <div class="toptimeqhuan">

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

  23.             近7天

  24.           </div>

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

  26.             近15天

  27.           </div>

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

  29.             近30天

  30.           </div>

  31.         </div>

  32.         <div style="margin-left: 20px">

  33.           <el-date-picker

  34.             @change="confirmtime"

  35.             v-model="customtime"

  36.             :clearable='false'

  37.             type="daterange"

  38.             range-separator="-"

  39.             format="yyyy-MM-dd"

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

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

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

  43.             :picker-options="pickerOptions"

  44.           >

  45.           </el-date-picker>

  46.         </div>

  47.         <div style="margin-left: 20px">

  48.           <el-checkbox v-model="checked" @change="radioChange"

  49.             >对比时间段</el-checkbox

  50.           >

  51.         </div>

  52.          <div v-if="checked" style="margin-left: 20px;border:1px solid #DCDFE6;min-width: 220px;height: 30px;border-radius: 4px;max-width:250px;

  53.              font-size: 13px; line-height: 30px; text-indent: 8px;" @click="show">

  54.             {{ selectTime1 ? "时段二： " : "请选择： "}}

  55.             <span v-if="selectTime1">{{ selectTime + "-" + selectTime1}}</span>

  56.             <el-date-picker

  57.               style="opacity: 0"

  58.               v-model="time"

  59.               @change="timeChange"

  60.               ref="time"

  61.               type="date"

  62.               :clearable='false'

  63.               placeholder="选择日期"

  64.               format="yyyy-MM-dd"

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

  66.               :picker-options="pickerOptions"

  67.             >

  68.             </el-date-picker>

  69.          </div>

  70.       </div>

  71.     </div>

  72. 

  73. 

  74.     <!-- //卡片 -->

  75.     <div class="kapian-box">

  76.       <div class="kayi">

  77.         <div class="shang">

  78.           <div class="zuo">

  79.             <div class="text1">有效接待</div>

  80.             <div class="text2">{{cardobj.startSumCustomer||0}}个</div>

  81.           </div>

  82.           <div class="you">

  83.             <img class="youimg" src="/img/waves1.png" alt="" />

  84.           </div>

  85.         </div>

  86.         <div v-if="Confirmthecontrast" class="xia">

  87.           <span class="span1">对比:{{cardobj.endSumCustomer ||0}}次</span>

  88.           <span class="span2">{{cardobj.contrastSumCustomer ||0}}%</span>

  89.         </div>

  90.       </div>

  91.       <div class="kayi">

  92.         <div class="shang">

  93.           <div class="zuo">

  94.             <div class="text1">平均执行率</div>

  95.             <div class="text2">{{cardobj.startFraction||0}}%</div>

  96.           </div>

  97.           <div class="you">

  98.             <img class="youimg" src="/img/waves2.png" alt="" />

  99.           </div>

  100.         </div>

  101.         <div v-if="Confirmthecontrast" class="xia">

  102.           <span class="span1">对比:{{cardobj.endFraction ||0}}%</span>

  103.           <span class="span2">{{cardobj.contrastFraction ||0}}%</span>

  104.         </div>

  105.       </div>

  106.       <div class="kayi" style="margin: 0px">

  107.         <div class="shang">

  108.           <div class="zuo">

  109.             <div class="text1">平均接待时长/min</div>

  110.             <div class="text2">{{Math.floor(cardobj.startSumDuration/60)||0}}</div>

  111.           </div>

  112.           <div class="you">

  113.             <img class="youimg" src="/img/waves3.png" alt="" />

  114.           </div>

  115.         </div>

  116.         <div v-if="Confirmthecontrast" class="xia">

  117.           <span class="span1">对比:{{Math.floor(cardobj.endSumDuration/60) ||0}}</span>

  118.           <span class="span2">{{cardobj.contrastSumDuration ||0}}%</span>

  119.         </div>

  120.       </div>

  121.     </div>

  122. 

  123.     <!-- 图表 -->

  124.     <div class="app-box-er">

  125.       <div class="titletab" style="cursor: pointer;">

  126.         <div :class="{ claindex: aliasclass == 1 }" @click="tapChange(1)">平均执行率</div>

  127.         <div :class="{ claindex: aliasclass == 2 }" @click="tapChange(2)">团队执行率</div>

  128.         <div :class="{ claindex: aliasclass == 3 }" @click="tapChange(3)">顾问销讲能力</div>

  129.         <div :class="{ claindex: aliasclass == 4 }" @click="tapChange(4)">销讲一级执行</div>

  130.         <div :class="{ claindex: aliasclass == 5 }" @click="tapChange(5)">销讲二级执行</div>

  131.       </div>

  132.       <!-- 团队选部门 -->

  133.       <div v-if="aliasclass==2" style="display: flex;align-items: center;margin-top: 26px;">

  134.         部门：

  135.         <el-select  @change="departmenttap()" v-model="departmentid" placeholder="请选择">

  136.           <el-option

  137.             v-for="item in departmentlist"

  138.             :key="item.deptId"

  139.             :label="item.name"

  140.             :value="item.deptId"

  141.           >

  142.           </el-option>

  143.         </el-select>

  144.       </div>

  145. 

  146.         <!-- 选择顾问 -->

  147.       <div v-if="aliasclass==3" style="display: flex;align-items: center;margin-top: 26px;">

  148.         顾问：

  149.         <el-select  @change="consultanttap()" v-model="consultantid" placeholder="请选择">

  150.           <el-option

  151.             v-for="item in consultantlist"

  152.             :key="item.accountId"

  153.             :label="item.accountName"

  154.             :value="item.accountId"

  155.           >

  156.           </el-option>

  157.         </el-select>

  158.       </div>

  159. 

  160.          <!-- 一二级 -->

  161.       <div v-if="aliasclass==5" style="display: flex;align-items: center;margin-top: 26px;">

  162.         一级：

  163.         <el-select @change="Level1tap()"  v-model="Level1id" placeholder="请选择">

  164.           <el-option

  165.             v-for="item in Level1"

  166.             :key="item.marketingId"

  167.             :label="item.name"

  168.             :value="item.marketingId"

  169.           >

  170.           </el-option>

  171.         </el-select>

  172.        &nbsp; &nbsp; 二级：

  173.         <el-select  @change="Level2tap()"  v-model="Level2id" placeholder="请选择">

  174.           <el-option

  175.             v-for="item in Level2"

  176.             :key="item.marketingId"

  177.             :label="item.name"

  178.             :value="item.marketingId"

  179.           >

  180.           </el-option>

  181.         </el-select>

  182.       </div>

  183. 

  184.       <div v-if="echartsisshow" id="main"></div>

  185.       <div  v-else style="display:flex;justify-content: center; align-items: center;height: 350px;">

  186.           <div>暂无数据</div>

  187.        </div>

  188.     </div>

  189. 

  190.     <!-- 表格 -->

  191.     <div class="app-box-san" v-if="Confirmthecontrast && aliasclass!=3 && aliasclass!=4">

  192.       <div class="santitle">对比报表</div>

  193.       <div class="santab">

  194.         <el-table :data="tableData" height="400" border style="width: 100%">

  195.           <el-table-column prop="name" label="时间" align="center">

  196.           </el-table-column>

  197.           <el-table-column prop="shiduan1" label="时段1" align="center">

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

  199.                <span>{{scope.row.shiduan1}}%</span>

  200.              </template>

  201.           </el-table-column>

  202.           <el-table-column prop="shiduan2" label="时段2" align="center">

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

  204.                <span>{{scope.row.shiduan2}}%</span>

  205.              </template>

  206.           </el-table-column>

  207.           <el-table-column prop="heji" label="变化" align="center">

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

  209.                <span v-if="scope.row.heji>0"> <i class="el-icon-top" style="color: red;"></i>{{scope.row.heji}}%</span>

  210.                <span v-if="scope.row.heji==0">{{scope.row.heji}}%</span>

  211.                <span v-if="scope.row.heji<0"> <i class="el-icon-bottom" style="color: #25CEBA;"></i>{{scope.row.heji}}%</span>

  212.              </template>

  213.           </el-table-column>

  214.         </el-table>

  215. 

  216.       </div>

  217.     </div>

  218. 

  219.       <div v-if="aliasclass==3 || aliasclass==4" class="app-box-san" style="padding:12px;" >

  220.         <div style="overflow: auto;">

  221.             <table class="table">

  222.                 <tbody class="tbody">

  223.                     <tr v-if="tablelist1.length!=0">

  224.                         <td class="theadtd" v-for="(item,index) in tablelist1" :key='index'>{{item.name}}</td>

  225.                     </tr>

  226.                     <tr v-if="tablelist2.length!=0">

  227.                         <td class="theadtd" v-for="(item,index) in tablelist2" :key='index'>{{item.name}}</td>

  228.                     </tr>

  229.                     <tr v-if="tablelist3.length!=0">

  230.                         <td class="theadtd" v-for="(item,index) in tablelist3" :key='index'>{{item.name}}</td>

  231.                     </tr>

  232.                     <tr v-if="tablelist4.length!=0">

  233.                           <td class="theadtd" v-for="(item,index) in tablelist4" :key='index'>

  234.                             <span v-if="item.name=='变化'">{{item.name}}</span>

  235.                             <span v-else-if="item.name==0">{{item.name}}%</span>

  236.                             <span v-else-if="item.name>0" style="color: red;">{{item.name}}%</span>

  237.                             <span v-else-if="item.name<0" style="color: #25CEBA;">{{item.name}}%</span>

  238.                           </td>

  239.                     </tr>

  240.                 </tbody>

  241.             </table>

  242.         </div>

  243.         </div>

  244.   </div>

  245. </template>

  246. 

  247. <script>

  248. import * as echarts from "echarts";

  249. export default {

  250.   data() {

  251.     return {

  252.       timeType: 4,

  253.       pickerOptions: {

  254.         disabledDate(time) {

  255.           // return time.getTime() > Date.now();

  256.         },

  257.       },

  258.       time: "",//对比时间的数组

  259.       page: {

  260.         openTime: "",

  261.         closeTime: "",

  262.       },

  263.       customtime: [],//自定义时间

  264.       selectTime1: "",//对比时间

  265.       selectTime: "",//对比时间

  266.       aliasclass: 1,//tab下标

  267.       houseId: "",//楼盘id

  268.       options: [],

  269.       value: "",

  270.       checked: false,//是否对比

  271.       Confirmthecontrast:false,

  272.       tableData: [],//表格数据

  273.       cardobj:{},

  274.       departmentlist:[],

  275.       departmentid:'',

  276.       echartsisshow:true,

  277.       consultantlist:[],

  278.       consultantid:'',

  279.       tablelist1:[],

  280.       tablelist2:[],

  281.       tablelist3:[],

  282.       tablelist4:[],

  283.       Level1:[],

  284.       Level2:[],

  285.       Level1id:'',

  286.       Level2id:'',

  287.         houseList:[],

  288.         role:''

  289.     };

  290.   },

  291.   mounted() {

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

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

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

  295.      this.tabtimetap(4);

  296.      this.overviewfindList()

  297. 

  298.     }else{

  299.       this.zkhousePage()

  300.     }

  301.   },

  302.   methods: {

  303.       houseChange(){

  304.       this.customtime=[];

  305.       this.TimetoAhoose=4;

  306.       this.selectTime1= "";//对比时间

  307.       this.selectTime= "";//对比时间

  308.       this.aliasclass= 1;//tab下标

  309.       this.page.openTime='';

  310.         this.page.closeTime='';

  311.         this.checked=false;

  312.        this.tabtimetap(4);

  313.             this.overviewfindList()

  314.     },

  315.        zkhousePage() {

  316.       this.$api.api

  317.         .findHouseByUser({

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

  319.         })

  320.         .then((res) => {

  321.           this.houseList = res.data;

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

  323.            this.tabtimetap(4);

  324.             this.overviewfindList()

  325.         });

  326.     },

  327.     //销讲二级

  328.     trendAnalysisLevel2(){

  329.       let pamaet={

  330.         showStatus:'',

  331.         houseId:this.houseId,

  332.         timeType:0,

  333.         firstStartDate:this.page.openTime,

  334.         firstEndDate:this.page.closeTime,

  335.         lastStartDate:this.selectTime,

  336.         lastEndDate:this.selectTime1,

  337.         marketingId:this.Level2id

  338.       }

  339. 

  340.       if(this.timeType==-1){

  341.         pamaet.timeType=null

  342.       }else{

  343.         pamaet.timeType=this.timeType

  344.       }

  345.       if(this.checked==true){

  346.         pamaet.showStatus=1;

  347.         pamaet.timeType=null

  348.       }else{

  349.          pamaet.showStatus=0

  350.       }

  351.       this.$api.http.trendAnalysisLevel2(pamaet).then((res) => {

  352.           if(this.Confirmthecontrast==false){

  353.             let newlist=res.data.startList || [];

  354.             var newline=[];

  355.             var newline2=[];

  356.             newlist.map(item=>{

  357.               newline.push(item.zxl)

  358.               newline2.push(item.statDate.slice(5,10))

  359.             })

  360.             this.SwitchCARDS(newline,newline2)

  361.          }else{

  362.             let newlist=res.data.startList || [];

  363.             let newlist2=res.data.endList || [];

  364.             let hejilist=res.data.comparedList || [];

  365.             var newline=[];//起始数据

  366.             var newline2=[];//对比数据

  367.             var newline1=[];//时间

  368. 

  369.             let arr=[];

  370.             newlist.map(item=>{

  371.               newline.push(item.zxl)

  372.             })

  373.             newlist2.map(item=>{

  374.               newline1.push(item.zxl)

  375.             })

  376.            newlist.forEach((item, sdf) => {

  377. 							newlist2.forEach((child, zxc) => {

  378. 								if (sdf == zxc) {

  379.                    newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10))

  380.                    arr.push({

  381.                      name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10),

  382.                      shiduan1:item.zxl,

  383.                      shiduan2:child.zxl,

  384.                    });

  385. 								}

  386. 							})

  387. 						})

  388.             hejilist.forEach((acd,xdx)=>{

  389.               arr.forEach((che,ind)=>{

  390.                 if(xdx==ind){

  391.                   che.heji=acd.zxl;

  392.                 }

  393.               })

  394.             })

  395.             arr.unshift({

  396.               name:'项目合计',

  397.               shiduan1:res.data.startSum,

  398.               shiduan2:res.data.endSum,

  399.               heji:res.data.comparedSum,

  400.             })

  401. 

  402.             this.SwitchCARDS2(newline,newline1,newline2)

  403.             this.tableData=arr;

  404.             console.log( this.tableData)

  405.          }

  406.       })

  407. 

  408.     },

  409.     //切换一级

  410.     Level1tap(){

  411.       this.Level1.forEach((item,index)=>{

  412.         if(this.Level1id==item.marketingId){

  413.           this.Level2=item.children || [];

  414.           this.Level2id=item.children[0].marketingId || '';

  415.         }

  416.       })

  417.       this.trendAnalysisLevel2()

  418.     },

  419.      //切换er级

  420.     Level2tap(){

  421.       this.trendAnalysisLevel2()

  422.     },

  423.     //一二级

  424.     trendAnalysisAllLevel(){

  425.        let pamaet={

  426.         showStatus:'',

  427.         houseId:this.houseId,

  428.         timeType:0,

  429.         firstStartDate:this.page.openTime,

  430.         firstEndDate:this.page.closeTime,

  431.         lastStartDate:this.selectTime,

  432.         lastEndDate:this.selectTime1,

  433.       }

  434. 

  435.       if(this.timeType==-1){

  436.         pamaet.timeType=null

  437.       }else{

  438.         pamaet.timeType=this.timeType

  439.       }

  440.       if(this.checked==true){

  441.         pamaet.showStatus=1;

  442.         pamaet.timeType=null

  443.       }else{

  444.          pamaet.showStatus=0

  445.       }

  446.       this.$api.http.trendAnalysisAllLevel(pamaet).then((res) => {

  447.         this.Level1=res.data || [];

  448.         this.Level1id=res.data[0].marketingId || '';

  449.         this.Level2=res.data[0].children || [];

  450.         this.Level2id=res.data[0].children[0].marketingId || '';

  451.         this.trendAnalysisLevel2()

  452.       })

  453.     },

  454. 

  455.     //切换顾问

  456.     consultanttap(){

  457.       this.trendAnalysisAccount()

  458.     },

  459.     // 获取顾问

  460.     trendAnalysisAllAccount(pamaet){

  461.       this.$api.http.trendAnalysisAllAccount(pamaet).then((res) => {

  462.         this.consultantlist=res.data || [];

  463.         if( this.consultantlist.length!=0){

  464.             this.consultantid=res.data[0].accountId;

  465.             this.trendAnalysisAccount()

  466.         }else{

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

  468.             this.echartsisshow=false;

  469.             this.tableData=[];

  470.         }

  471.       })

  472.     },

  473.     trendAnalysisAccount(){

  474.       var that=this;

  475.        let pamaet={

  476.         showStatus:'',

  477.         houseId:this.houseId,

  478.         timeType:0,

  479.         firstStartDate:this.page.openTime,

  480.         firstEndDate:this.page.closeTime,

  481.         lastStartDate:this.selectTime,

  482.         lastEndDate:this.selectTime1,

  483. 

  484.       }

  485.       if(this.aliasclass==3){

  486.           pamaet.accountId=this.consultantid

  487.       }

  488.       if(this.timeType==-1){

  489.         pamaet.timeType=null

  490.       }else{

  491.         pamaet.timeType=this.timeType

  492.       }

  493.       if(this.checked==true){

  494.         pamaet.showStatus=1;

  495.         pamaet.timeType=null

  496.       }else{

  497.          pamaet.showStatus=0

  498.       }

  499.       this.$api.http.trendAnalysisAccount(pamaet).then((res) => {

  500.          if(this.Confirmthecontrast==false){

  501.              let newlist=res.data.firstList || [];

  502.              var newline=[];//起始数据

  503.              var newlinename=[];

  504.              let tablist=[

  505.               {name:'时间',}

  506.              ]

  507.              let tablist2=[

  508.               {name:that.customtime[0].substring(5,10)+'/'+that.customtime[1].substring(5,10),}

  509.              ]

  510.              newlist.map(item=>{

  511.                 newline.push(item.zxl)

  512.                 newlinename.push({name:item.name,max:100})

  513.                 tablist.push({name:item.name})

  514.                 tablist2.push({name:item.zxl+'%',})

  515.              })

  516.             this.tablelist1=tablist;

  517.             this.tablelist2=tablist2;

  518.             this.tablelist3=[];

  519.             this.tablelist4=[];

  520.             this.piechart(newline,newlinename)

  521.          }else{

  522. 

  523.              let newlist=res.data.firstList || [];

  524.              let newlist2=res.data.secondList|| [];

  525.              let newlist4=res.data.thirdList|| [];

  526. 

  527.              var newline=[];//起始数据

  528.              let newline2=[];//对比数据

  529.              var newlinename=[];

  530. 

  531.               let tablist1=[

  532.                  {name:'时间',}

  533.               ]

  534.               let tablist2=[

  535.                 {name:that.customtime[0].substring(5,10)+'/'+that.customtime[1].substring(5,10),}

  536.               ]

  537.               let tablist3=[

  538.                 {name:that.selectTime.substring(5,10)+'/'+that.selectTime1.substring(5,10),}

  539.               ]

  540.               let tablist4=[

  541.                 {name:'变化',}

  542.               ]

  543. 

  544.              newlist.map(item=>{

  545.                 newline.push(item.zxl)

  546.                 newlinename.push({name:item.name,max:100})

  547.                 tablist1.push({name:item.name})

  548.                 tablist2.push({name:item.zxl+'%',})

  549.              })

  550.              newlist2.map(item=>{

  551.                 newline2.push(item.zxl)

  552.                 tablist3.push({name:item.zxl+'%',})

  553.              })

  554.              newlist4.map(item=>{

  555.                 tablist4.push({name:item.zxl,})

  556.              })

  557. 

  558.             this.tablelist1=tablist1;

  559.             this.tablelist2=tablist2;

  560.             this.tablelist3=tablist3;

  561.             this.tablelist4=tablist4;

  562.             this.piechart2(newline,newlinename,newline2)

  563.          }

  564.       })

  565.     },

  566.     //获取卡片

  567.     trendtrendAnalysis(){

  568.       let pamaet={

  569.         showStatus:'',

  570.         houseId:this.houseId,

  571.         timeType:0,

  572.         firstStartDate:this.page.openTime,

  573.         firstEndDate:this.page.closeTime,

  574.         lastStartDate:this.selectTime,

  575.         lastEndDate:this.selectTime1

  576.       }

  577. 

  578.       if(this.timeType==-1){

  579.         pamaet.timeType=null

  580.       }else{

  581.         pamaet.timeType=this.timeType

  582.       }

  583.       if(this.checked==true){

  584.         pamaet.showStatus=1;

  585.         pamaet.timeType=null

  586.       }else{

  587.          pamaet.showStatus=0

  588.       }

  589.       this.$api.http.trendtrendAnalysis(pamaet).then((res) => {

  590.         this.cardobj=res.data;

  591.         if(this.aliasclass==1){

  592.           this.echartsisshow=true;

  593.           this.trendtrendAnalysisProject(pamaet)

  594.         }else if(this.aliasclass==2){

  595.           if(this.departmentid!=''){

  596.             pamaet.deptId=this.departmentid

  597.             this.trendtrendAnalysisProject(pamaet)

  598.           }else{

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

  600.             this.echartsisshow=false;

  601.             this.tableData=[];

  602.           }

  603.         }else if(this.aliasclass==3){

  604.           if(this.consultantid.length==0){

  605.             this.trendAnalysisAllAccount(pamaet)

  606.           }else{

  607.             this.trendAnalysisAccount()

  608.           }

  609.         }else if(this.aliasclass==4){

  610.           this.trendAnalysisAccount()

  611.         }else{

  612.           this.trendAnalysisAllLevel()

  613.         }

  614. 

  615.       })

  616.     },

  617.     //项目

  618.     trendtrendAnalysisProject(pamaet){

  619.        this.$api.http.trendtrendAnalysisProject(pamaet).then((res) => {

  620.          if(this.Confirmthecontrast==false){

  621.             let newlist=res.data.startList || [];

  622.             var newline=[];

  623.             var newline2=[];

  624.             newlist.map(item=>{

  625.               newline.push(item.fraction)

  626.               newline2.push(item.statDate.slice(5,10))

  627.             })

  628.             this.SwitchCARDS(newline,newline2)

  629.          }else{

  630.             let newlist=res.data.startList || [];

  631.             let newlist2=res.data.endList || [];

  632.             let hejilist=res.data.comparedList || [];

  633.             var newline=[];//起始数据

  634.             var newline2=[];//对比数据

  635.             var newline1=[];//时间

  636. 

  637.             let arr=[];

  638.             newlist.map(item=>{

  639.               newline.push(item.fraction)

  640.             })

  641.             newlist2.map(item=>{

  642.               newline1.push(item.fraction)

  643.             })

  644.            newlist.forEach((item, sdf) => {

  645. 							newlist2.forEach((child, zxc) => {

  646. 								if (sdf == zxc) {

  647.                    newline2.push(item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10))

  648.                    arr.push({

  649.                      name:item.statDate.substring(5,10) + 'vs' + child.statDate.substring(5, 10),

  650.                      shiduan1:item.fraction,

  651.                      shiduan2:child.fraction,

  652.                    });

  653. 								}

  654. 							})

  655. 						})

  656.             hejilist.forEach((acd,xdx)=>{

  657.               arr.forEach((che,ind)=>{

  658.                 if(xdx==ind){

  659.                   che.heji=acd.fraction;

  660.                 }

  661.               })

  662.             })

  663.             arr.unshift({

  664.               name:'项目合计',

  665.               shiduan1:res.data.startSum,

  666.               shiduan2:res.data.endSum,

  667.               heji:res.data.comparedSum,

  668.             })

  669. 

  670.             this.SwitchCARDS2(newline,newline1,newline2)

  671.             this.tableData=arr;

  672.             console.log( this.tableData)

  673.          }

  674.       })

  675.     },

  676.     //获取部门下拉菜单

  677.     overviewfindList(){

  678.         this.$api.http.overviewfindList({

  679.           houseId:this.houseId,

  680.         }).then((res) => {

  681.           this.departmentlist=res.data || [];

  682.           if(this.departmentlist.length!=0){

  683.             this.departmentid=res.data[0].deptId

  684.           }else{

  685.             this.departmentid=''

  686.           }

  687.         })

  688.     },

  689.     //切换部门

  690.     departmenttap(){

  691.       this.trendtrendAnalysis()

  692.     },

  693. 

  694. 

  695.     //选项卡切换

  696.     tapChange(idx){

  697.       this.aliasclass=idx;

  698.       this.trendtrendAnalysis()

  699.     },

  700.     //时间tab切换

  701.     tabtimetap(i) {

  702.       this.timeType = i;

  703.       this.checked = false;

  704.       this.selectTime = "";

  705.       this.selectTime1 = "";

  706.       //给时间选择器赋值

  707.       let num = 24 * 3600 * 1000;

  708.       //	获取当前时间戳转换为日期格式

  709.       if (this.timeType == 4) {

  710.         num = 24 * 3600 * 1000 * 6;

  711.       }

  712.       if (this.timeType == 5) {

  713.         num = 24 * 3600 * 1000 * 14;

  714.       }

  715.       if (this.timeType == 6) {

  716.         num = 24 * 3600 * 1000 * 29;

  717.       }

  718.       this.customtime = [

  719.         this.timestampToTime(new Date().getTime() - num),

  720.         this.timestampToTime(new Date().getTime()),

  721.       ];

  722.       this.$set(this, "time", null);

  723.        this.Confirmthecontrast=false;

  724.       this.trendtrendAnalysis()

  725.     },

  726.     // 对比时间选择弹框显示

  727.     show() {

  728.       this.$refs.time.pickerVisible = true;

  729.     },

  730.     //选择对比时间

  731.     timeChange(e) {

  732.       //	对数据进行处理

  733.       //	当当前选择的为自定义时间时

  734.       this.selectTime = "";

  735.       this.selectTime1 = "";

  736.       this.timeSelect(e);

  737.     },

  738.     timeSelect(e) {

  739.       if (this.timeType == -1) {

  740.         this.selectTime = e;

  741.         this.selectTime1 = this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime());

  742.       } else {

  743.         //	获取今天昨天近一周

  744.         //	获取一天的时间戳

  745.         let num = 24 * 3600 * 1000;

  746.         //	获取当前时间戳转换为日期格式

  747.         if (this.timeType == 4) {

  748.           num = 24 * 3600 * 1000 * 6;

  749.         }

  750.         if (this.timeType == 5) {

  751.           num = 24 * 3600 * 1000 * 14;

  752.         }

  753.         if (this.timeType == 6) {

  754.           num = 24 * 3600 * 1000 * 29;

  755.         }

  756.         this.selectTime = e;

  757.         this.selectTime1 = this.timestampToTime(new Date(e).getTime() + num);

  758.       }

  759.         this.Confirmthecontrast=true;

  760.         this.page.openTime=this.customtime[0]

  761.         this.page.closeTime=this.customtime[1]

  762.         this.trendtrendAnalysis()

  763.     },

  764.     radioChange() {

  765.       this.selectTime = "";

  766.       this.selectTime1 = "";

  767.       this.$set(this, "time", null);

  768.     },

  769.     //选择自定义时间

  770.     confirmtime(e) {

  771.       this.timeType = "-1";

  772.       this.checked = false;

  773.       this.selectTime = "";

  774.       this.selectTime1 = "";

  775.       this.$set(this, "time", null);

  776.       if (!e) return;

  777.       this.page.openTime = this.customtime[0];

  778.       this.page.closeTime = this.customtime[1];

  779.       this.Confirmthecontrast=false;

  780.       this.trendtrendAnalysis()

  781.     },

  782.     timestampToTime(timestamp) {

  783.       var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000

  784.       var yyyy = date.getFullYear() + "-";

  785.       var MM =(date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1): date.getMonth() + 1) + "-";

  786.       var dd =(date.getDate() < 10 ? "0" + date.getDate() : date.getDate());

  787.       return yyyy + MM + dd;

  788.     },

  789. 

  790. 

  791. 

  792.     SwitchCARDS(newline,newline2) {

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

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

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

  796.       var option;

  797. 

  798.       option = {

  799.         tooltip: {

  800.           trigger: "axis",

  801.             formatter: '{b0}: {c0}'+'%'

  802.         },

  803.         legend: {

  804.           data: ["起始时间"],

  805.           bottom: "10",

  806.         },

  807.         grid: {

  808.           left: 10,

  809.           right: 10,

  810. 

  811.           containLabel: true,

  812.         },

  813.         xAxis: {

  814.           type: "category",

  815.           data: newline2,

  816.           axisLabel: {

  817.             //重点在这一块，其余可以忽略

  818.             textStyle: {

  819.               color: "#212121", //更改坐标轴文字颜色

  820.             },

  821.           },

  822.           axisLine: {

  823.             lineStyle: {

  824.               type: "solid",

  825.               color: "#DDE1EE", //x线的颜色

  826.               width: "1", //坐标线的宽度

  827.             },

  828.           },

  829.         },

  830.         yAxis: {

  831.           type: "value",

  832.            splitNumber:5,

  833.               max:100,

  834.                min:0,

  835.           axisLabel: {

  836.             //重点在这一块，其余可以忽略

  837.             textStyle: {

  838.               color: "#212121", //更改坐标轴文字颜色

  839.             },

  840.           },

  841.           axisLine: {

  842.             lineStyle: {

  843.               ype: "solid",

  844.               color: "#DDE1EE", //x线的颜色

  845.               width: "1", //坐标线的宽度

  846.             },

  847.           },

  848.           splitLine: {

  849.             lineStyle: {

  850.               type: "dashed", // y轴分割线类型

  851.             },

  852.           },

  853.           axisTick: {

  854.             //y轴刻度线

  855.             show: false,

  856.           },

  857.         },

  858.         series: [

  859.           {

  860.             name: "起始时间",

  861.             data:newline,

  862.             type: "line",

  863.             smooth: true,

  864.           },

  865.         ],

  866.       };

  867. 

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

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

  870.         myChart.resize();

  871.       });

  872.     },

  873.     SwitchCARDS2(newline,newline1,newline2) {

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

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

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

  877.       var option;

  878. 

  879.       option = {

  880.         tooltip: {

  881.           trigger: "axis",

  882.           formatter: function (params) {

  883.               let src= '<p>'+params[0].seriesName+':'+params[0].data+'%'+'</p>'+'<p>'+params[1].seriesName+':'+ params[1].data+'%'+'</p>';

  884.               return src

  885.             }

  886.         },

  887.         legend: {

  888.           data: ["起始时间","对比时间"],

  889.           bottom: "10",

  890.         },

  891.         grid: {

  892.           left: 10,

  893.           right: 10,

  894. 

  895.           containLabel: true,

  896.         },

  897.         xAxis: {

  898.           type: "category",

  899.           data: newline2,

  900.           axisLabel: {

  901.             //重点在这一块，其余可以忽略

  902.             textStyle: {

  903.               color: "#212121", //更改坐标轴文字颜色

  904.             },

  905.           },

  906.           axisLine: {

  907.             lineStyle: {

  908.               type: "solid",

  909.               color: "#DDE1EE", //x线的颜色

  910.               width: "1", //坐标线的宽度

  911.             },

  912.           },

  913.         },

  914.         yAxis: {

  915.           type: "value",

  916.           splitNumber:5,

  917.               max:100,

  918.                min:0,

  919.           axisLabel: {

  920.             //重点在这一块，其余可以忽略

  921.             textStyle: {

  922.               color: "#212121", //更改坐标轴文字颜色

  923.             },

  924.           },

  925.           axisLine: {

  926.             lineStyle: {

  927.               ype: "solid",

  928.               color: "#DDE1EE", //x线的颜色

  929.               width: "1", //坐标线的宽度

  930.             },

  931.           },

  932.           splitLine: {

  933.             lineStyle: {

  934.               type: "dashed", // y轴分割线类型

  935.             },

  936.           },

  937.           axisTick: {

  938.             //y轴刻度线

  939.             show: false,

  940.           },

  941.         },

  942.         series: [

  943.           {

  944.             name: "起始时间",

  945.             data:newline,

  946.             type: "line",

  947.             smooth: true,

  948.           },

  949.           {

  950.             name: "对比时间",

  951.             data:newline1,

  952.             type: "line",

  953.             smooth: true,

  954.           }

  955.         ],

  956.       };

  957. 

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

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

  960.         myChart.resize();

  961.       });

  962.     },

  963.      piechart2(newline,newlinename,newline2){

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

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

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

  967.       var option;

  968.       option = {

  969.         tooltip: {

  970.             trigger: 'axis'

  971.         },

  972.         legend: {

  973.           data: ['起始时间','对比时间'],

  974.               right: "10",

  975.           top:'10'

  976.         },

  977.         color:[

  978.           '#2671E2',

  979.           '#F3787B',

  980.         ],

  981.         radar: {

  982.           // shape: 'circle',

  983.           indicator: newlinename

  984.         },

  985.         series: [

  986.           {

  987.             type: 'radar',

  988.             tooltip: {

  989.                 trigger: 'item'

  990.             },

  991.             data: [

  992.               {

  993.                 value:newline,

  994.                 name: '起始时间'

  995.               },

  996.               {

  997.                 value:newline2,

  998.                 name: '对比时间'

  999.               },

  1000.             ]

  1001.           }

  1002.         ]

  1003.       };

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

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

  1006.        myChart.resize();

  1007.       });

  1008.     },

  1009.     piechart(newline,newlinename){

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

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

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

  1013.       var option;

  1014.       option = {

  1015.         tooltip: {

  1016.             trigger: 'axis'

  1017.         },

  1018.         legend: {

  1019.           data: ['起始时间'],

  1020.               right: "10",

  1021.           top:'10'

  1022.         },

  1023.         color:[

  1024.           '#2671E2',

  1025.           '#F3787B',

  1026.         ],

  1027.         radar: {

  1028.           // shape: 'circle',

  1029.           indicator: newlinename

  1030.         },

  1031.         series: [

  1032.           {

  1033.             type: 'radar',

  1034.             tooltip: {

  1035.                 trigger: 'item'

  1036.             },

  1037.             data: [

  1038.               {

  1039.                 value:newline,

  1040.                 name: '起始时间'

  1041.               },

  1042.             ]

  1043.           }

  1044.         ]

  1045.       };

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

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

  1048.       myChart.resize();

  1049.       });

  1050.     }

  1051. 

  1052.   },

  1053. };

  1054. </script>

  1055. 

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

  1057. .box-center {

  1058.   width: 100%;

  1059.   padding: 15px;

  1060.   min-width: 1200px;

  1061.   padding-bottom: 100px;

  1062. }

  1063. 

  1064. .table {

  1065.   border-collapse: collapse;

  1066.   width: 100%;

  1067. }

  1068. .tbody {

  1069.   display: block;

  1070.   // width: 100%;

  1071.   // overflow-x: auto;

  1072.   // overflow-y: auto;

  1073.   height: 220px;

  1074. }

  1075. .tbody tr {

  1076.   display: table;

  1077.   width: 100%;

  1078.   table-layout: fixed;

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

  1080. }

  1081. 

  1082. #main {

  1083.   width: 100%;

  1084.   height: 380px;

  1085. }

  1086. 

  1087. .app-box-san {

  1088.   width: 100%;

  1089.   background: #ffffff;

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

  1091.   border-radius: 4px;

  1092.   margin-top: 15px;

  1093.   padding-bottom: 15px;

  1094.   .santitle {

  1095.     width: 100%;

  1096.     height: 50px;

  1097.     line-height: 50px;

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

  1099.     font-size: 16px;

  1100.     color: #333333;

  1101.     font-weight: 500;

  1102.     text-indent: 15px;

  1103.   }

  1104.   .santab {

  1105.     width: 100%;

  1106.     height: 400px;

  1107.     padding: 15px;

  1108.   }

  1109. }

  1110. .app-box-er {

  1111.   width: 100%;

  1112.   background: #ffffff;

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

  1114.   border-radius: 4px;

  1115.   margin-top: 15px;

  1116.   padding: 15px;

  1117.   .titletab {

  1118.     width: 100%;

  1119.     height: 42px;

  1120.     display: flex;

  1121.     // border: 1px solid red;

  1122.   }

  1123.   .titletab div {

  1124.     width: 130px;

  1125.     height: 42px;

  1126.     line-height: 42px;

  1127.     text-align: center;

  1128.     border: 1px solid #e0e0e0;

  1129.     font-size: 14px;

  1130.   }

  1131.   .claindex {

  1132.     background: #2671e2;

  1133.     color: #ffffff;

  1134.     border: none;

  1135.   }

  1136. }

  1137. 

  1138. .kapian-box {

  1139.   width: 100%;

  1140.   height: 144px;

  1141.   margin-top: 15px;

  1142.   display: flex;

  1143.   .kayi {

  1144.     flex: 1;

  1145.     margin-right: 15px;

  1146.     height: 144px;

  1147.     background: #ffffff;

  1148.     border-radius: 4px;

  1149.     .shang {

  1150.       width: 100%;

  1151.       display: flex;

  1152.       .zuo {

  1153.         width: 50%;

  1154.         .text1 {

  1155.           font-size: 16px;

  1156.           font-weight: 400;

  1157.           color: #666666;

  1158.           margin-left: 30px;

  1159.           margin-top: 24px;

  1160.         }

  1161.         .text2 {

  1162.           font-size: 32px;

  1163.           font-weight: normal;

  1164.           color: #32363d;

  1165.           margin-left: 30px;

  1166.           margin-top: 18px;

  1167.         }

  1168.       }

  1169.       .you {

  1170.         width:50%;

  1171.         display: flex;

  1172.         align-items: center;

  1173.         .youimg {

  1174.           width: 90%;

  1175.           height: 60px;

  1176.         }

  1177.       }

  1178.     }

  1179.     .xia {

  1180.       width: 100%;

  1181.       font-size: 14px;

  1182.       text-indent: 30px;

  1183.       margin-top: 10px;

  1184.       .span1 {

  1185.         color: #333333;

  1186.         font-weight: 400;

  1187.       }

  1188.       .span2 {

  1189.         color: #e6273a;

  1190.         font-weight: 400;

  1191.         margin-left: 16px;

  1192.       }

  1193.     }

  1194.   }

  1195. }

  1196. 

  1197. .tophove {

  1198.   color: #ffffff;

  1199.   background: #2671e2;

  1200. }

  1201. .app-top {

  1202.   width: 100%;

  1203.   background: #ffffff;

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

  1205.   border-radius: 4px;

  1206.   padding-top: 15px;

  1207.   padding-bottom: 15px;

  1208. }

  1209. .app-titel {

  1210.   width: 100%;

  1211.   display: flex;

  1212.   align-items: center;

  1213.   .titel-text {

  1214.     height: 100%;

  1215.     font-size: 16px;

  1216.     font-weight: 600;

  1217.     color: #32363d;

  1218.     text-indent: 30px;

  1219.   }

  1220.   .toptimeqhuan {

  1221.     width: 190px;

  1222.     height: 32px;

  1223.     background: #ffffff;

  1224.     border-radius: 4px;

  1225.     border: 1px solid #e0e0e0;

  1226.     display: flex;

  1227.     align-items: center;

  1228.     overflow: hidden;

  1229.     margin-left: 20px;

  1230.     cursor: pointer;

  1231.   }

  1232.   .toptimeqhuan div {

  1233.     flex: 1;

  1234.     text-align: center;

  1235.     line-height: 32px;

  1236.     font-size: 14px;

  1237.   }

  1238. }

  1239. .timeSel {

  1240.   margin-top: 8px;

  1241.   margin-left: 20px;

  1242.   border: 1px solid #ccc;

  1243.   padding: 0 5px;

  1244.   cursor: pointer;

  1245.   color: #606266;

  1246. }

  1247.       .theadtd{

  1248.             width: 140px;

  1249.             height: 48px;

  1250.             border: 1px solid #E0E0E0;

  1251.             text-align: center;

  1252.             line-height: 48px;

  1253.             font-size: 16px;

  1254.             color: #32363D;

  1255. 

  1256.         }

  1257. </style>