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

1201 行
34 KiB
原始文件 Blame 文件历史 

  1. <template>

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

  3.     <!-- 头 -->

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

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

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

  7.         <div class="toptimeqhuan">

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

  9.             近7天

  10.           </div>

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

  12.             近15天

  13.           </div>

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

  15.             近30天

  16.           </div>

  17.         </div>

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

  19.           <el-date-picker

  20.             @change="confirmtime"

  21.             v-model="customtime"

  22.             :clearable='false'

  23.             type="daterange"

  24.             range-separator="-"

  25.             format="yyyy-MM-dd"

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

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

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

  29.             :picker-options="pickerOptions"

  30.           >

  31.           </el-date-picker>

  32.         </div>

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

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

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

  36.           >

  37.         </div>

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

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

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

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

  42.             <el-date-picker

  43.               style="opacity: 0"

  44.               v-model="time"

  45.               @change="timeChange"

  46.               ref="time"

  47.               type="date"

  48.               :clearable='false'

  49.               placeholder="选择日期"

  50.               format="yyyy-MM-dd"

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

  52.               :picker-options="pickerOptions"

  53.             >

  54.             </el-date-picker>

  55.          </div>

  56.       </div>

  57.     </div>

  58. 

  59. 

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

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

  62.       <div class="kayi">

  63.         <div class="shang">

  64.           <div class="zuo">

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

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

  67.           </div>

  68.           <div class="you">

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

  70.           </div>

  71.         </div>

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

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

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

  75.         </div>

  76.       </div>

  77.       <div class="kayi">

  78.         <div class="shang">

  79.           <div class="zuo">

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

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

  82.           </div>

  83.           <div class="you">

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

  85.           </div>

  86.         </div>

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

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

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

  90.         </div>

  91.       </div>

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

  93.         <div class="shang">

  94.           <div class="zuo">

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

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

  97.           </div>

  98.           <div class="you">

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

  100.           </div>

  101.         </div>

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

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

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

  105.         </div>

  106.       </div>

  107.     </div>

  108. 

  109.     <!-- 图表 -->

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

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

  112.         <div :class="{ claindex: aliasclass == 1 }" @click="tapChange(1)">项目</div>

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

  114.         <div :class="{ claindex: aliasclass == 3 }" @click="tapChange(3)">顾问</div>

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

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

  117.       </div>

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

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

  120.         部门：

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

  122.           <el-option

  123.             v-for="item in departmentlist"

  124.             :key="item.deptId"

  125.             :label="item.name"

  126.             :value="item.deptId"

  127.           >

  128.           </el-option>

  129.         </el-select>

  130.       </div>

  131. 

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

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

  134.         顾问：

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

  136.           <el-option

  137.             v-for="item in consultantlist"

  138.             :key="item.accountId"

  139.             :label="item.accountName"

  140.             :value="item.accountId"

  141.           >

  142.           </el-option>

  143.         </el-select>

  144.       </div>

  145. 

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

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

  148.         一级：

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

  150.           <el-option

  151.             v-for="item in Level1"

  152.             :key="item.marketingId"

  153.             :label="item.name"

  154.             :value="item.marketingId"

  155.           >

  156.           </el-option>

  157.         </el-select>

  158.        &nbsp; &nbsp; 二级：

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

  160.           <el-option

  161.             v-for="item in Level2"

  162.             :key="item.marketingId"

  163.             :label="item.name"

  164.             :value="item.marketingId"

  165.           >

  166.           </el-option>

  167.         </el-select>

  168.       </div>

  169. 

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

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

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

  173.        </div>

  174.     </div>

  175. 

  176.     <!-- 表格 -->

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

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

  179.       <div class="santab">

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

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

  182.           </el-table-column>

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

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

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

  186.              </template>

  187.           </el-table-column>

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

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

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

  191.              </template>

  192.           </el-table-column>

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

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

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

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

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

  198.              </template>

  199.           </el-table-column>

  200.         </el-table>

  201. 

  202.       </div>

  203.     </div>

  204. 

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

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

  207.             <table class="table">

  208.                 <tbody class="tbody">

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

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

  211.                     </tr>

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

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

  214.                     </tr>

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

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

  217.                     </tr>

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

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

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

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

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

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

  224.                           </td>

  225.                     </tr>

  226.                 </tbody>

  227.             </table>

  228.         </div>

  229.         </div>

  230.   </div>

  231. </template>

  232. 

  233. <script>

  234. import * as echarts from "echarts";

  235. export default {

  236.   data() {

  237.     return {

  238.       timeType: 4,

  239.       pickerOptions: {

  240.         disabledDate(time) {

  241.           return time.getTime() > Date.now();

  242.         },

  243.       },

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

  245.       page: {

  246.         openTime: "",

  247.         closeTime: "",

  248.       },

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

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

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

  252.       aliasclass: 1,//tab下标

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

  254.       options: [],

  255.       value: "",

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

  257.       Confirmthecontrast:false,

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

  259.       cardobj:{},

  260.       departmentlist:[],

  261.       departmentid:'',

  262.       echartsisshow:true,

  263.       consultantlist:[],

  264.       consultantid:'',

  265.       tablelist1:[],

  266.       tablelist2:[],

  267.       tablelist3:[],

  268.       tablelist4:[],

  269.       Level1:[],

  270.       Level2:[],

  271.       Level1id:'',

  272.       Level2id:''

  273.     };

  274.   },

  275.   mounted() {

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

  277.     this.tabtimetap(4);

  278.      this.overviewfindList()

  279.   },

  280.   methods: {

  281.     //销讲二级

  282.     trendAnalysisLevel2(){

  283.       let pamaet={

  284.         showStatus:'',

  285.         houseId:this.houseId,

  286.         timeType:0,

  287.         firstStartDate:this.page.openTime,

  288.         firstEndDate:this.page.closeTime,

  289.         lastStartDate:this.selectTime,

  290.         lastEndDate:this.selectTime1,

  291.         marketingId:this.Level2id

  292.       }

  293. 

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

  295.         pamaet.timeType=null

  296.       }else{

  297.         pamaet.timeType=this.timeType

  298.       }

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

  300.         pamaet.showStatus=1;

  301.         pamaet.timeType=null

  302.       }else{

  303.          pamaet.showStatus=0

  304.       }

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

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

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

  308.             var newline=[];

  309.             var newline2=[];

  310.             newlist.map(item=>{

  311.               newline.push(item.zxl)

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

  313.             })

  314.             this.SwitchCARDS(newline,newline2)

  315.          }else{

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

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

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

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

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

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

  322. 

  323.             let arr=[];

  324.             newlist.map(item=>{

  325.               newline.push(item.zxl)

  326.             })

  327.             newlist2.map(item=>{

  328.               newline1.push(item.zxl)

  329.             })

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

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

  332. 								if (sdf == zxc) {

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

  334.                    arr.push({

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

  336.                      shiduan1:item.zxl,

  337.                      shiduan2:child.zxl,

  338.                    });

  339. 								}

  340. 							})

  341. 						})

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

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

  344.                 if(xdx==ind){

  345.                   che.heji=acd.zxl;

  346.                 }

  347.               })

  348.             })

  349.             arr.unshift({

  350.               name:'项目合计',

  351.               shiduan1:res.data.startSum,

  352.               shiduan2:res.data.endSum,

  353.               heji:res.data.comparedSum,

  354.             })

  355. 

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

  357.             this.tableData=arr;

  358.             console.log( this.tableData)

  359.          }

  360.       })

  361. 

  362.     },

  363.     //切换一级

  364.     Level1tap(){

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

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

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

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

  369.         }

  370.       })

  371.       this.trendAnalysisLevel2()

  372.     },

  373.      //切换er级

  374.     Level2tap(){

  375.       this.trendAnalysisLevel2()

  376.     },

  377.     //一二级

  378.     trendAnalysisAllLevel(){

  379.        let pamaet={

  380.         showStatus:'',

  381.         houseId:this.houseId,

  382.         timeType:0,

  383.         firstStartDate:this.page.openTime,

  384.         firstEndDate:this.page.closeTime,

  385.         lastStartDate:this.selectTime,

  386.         lastEndDate:this.selectTime1,

  387.       }

  388. 

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

  390.         pamaet.timeType=null

  391.       }else{

  392.         pamaet.timeType=this.timeType

  393.       }

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

  395.         pamaet.showStatus=1;

  396.         pamaet.timeType=null

  397.       }else{

  398.          pamaet.showStatus=0

  399.       }

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

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

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

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

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

  405.         this.trendAnalysisLevel2()

  406.       })

  407.     },

  408. 

  409.     //切换顾问

  410.     consultanttap(){

  411.       this.trendAnalysisAccount()

  412.     },

  413.     // 获取顾问

  414.     trendAnalysisAllAccount(pamaet){

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

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

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

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

  419.             this.trendAnalysisAccount()

  420.         }else{

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

  422.             this.echartsisshow=false;

  423.             this.tableData=[];

  424.         }

  425.       })

  426.     },

  427.     trendAnalysisAccount(){

  428.       var that=this;

  429.        let pamaet={

  430.         showStatus:'',

  431.         houseId:this.houseId,

  432.         timeType:0,

  433.         firstStartDate:this.page.openTime,

  434.         firstEndDate:this.page.closeTime,

  435.         lastStartDate:this.selectTime,

  436.         lastEndDate:this.selectTime1,

  437. 

  438.       }

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

  440.           pamaet.accountId=this.consultantid

  441.       }

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

  443.         pamaet.timeType=null

  444.       }else{

  445.         pamaet.timeType=this.timeType

  446.       }

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

  448.         pamaet.showStatus=1;

  449.         pamaet.timeType=null

  450.       }else{

  451.          pamaet.showStatus=0

  452.       }

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

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

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

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

  457.              var newlinename=[];

  458.              let tablist=[

  459.               {name:'时间',}

  460.              ]

  461.              let tablist2=[

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

  463.              ]

  464.              newlist.map(item=>{

  465.                 newline.push(item.zxl)

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

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

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

  469.              })

  470.             this.tablelist1=tablist;

  471.             this.tablelist2=tablist2;

  472.             this.tablelist3=[];

  473.             this.tablelist4=[];

  474.             this.piechart(newline,newlinename)

  475.          }else{

  476. 

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

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

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

  480. 

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

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

  483.              var newlinename=[];

  484. 

  485.               let tablist1=[

  486.                  {name:'时间',}

  487.               ]

  488.               let tablist2=[

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

  490.               ]

  491.               let tablist3=[

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

  493.               ]

  494.               let tablist4=[

  495.                 {name:'变化',}

  496.               ]

  497. 

  498.              newlist.map(item=>{

  499.                 newline.push(item.zxl)

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

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

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

  503.              })

  504.              newlist2.map(item=>{

  505.                 newline2.push(item.zxl)

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

  507.              })

  508.              newlist4.map(item=>{

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

  510.              })

  511. 

  512.             this.tablelist1=tablist1;

  513.             this.tablelist2=tablist2;

  514.             this.tablelist3=tablist3;

  515.             this.tablelist4=tablist4;

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

  517.          }

  518.       })

  519.     },

  520.     //获取卡片

  521.     trendtrendAnalysis(){

  522.       let pamaet={

  523.         showStatus:'',

  524.         houseId:this.houseId,

  525.         timeType:0,

  526.         firstStartDate:this.page.openTime,

  527.         firstEndDate:this.page.closeTime,

  528.         lastStartDate:this.selectTime,

  529.         lastEndDate:this.selectTime1

  530.       }

  531. 

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

  533.         pamaet.timeType=null

  534.       }else{

  535.         pamaet.timeType=this.timeType

  536.       }

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

  538.         pamaet.showStatus=1;

  539.         pamaet.timeType=null

  540.       }else{

  541.          pamaet.showStatus=0

  542.       }

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

  544.         this.cardobj=res.data;

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

  546.           this.echartsisshow=true;

  547.           this.trendtrendAnalysisProject(pamaet)

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

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

  550.             pamaet.deptId=this.departmentid

  551.             this.trendtrendAnalysisProject(pamaet)

  552.           }else{

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

  554.             this.echartsisshow=false;

  555.             this.tableData=[];

  556.           }

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

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

  559.             this.trendAnalysisAllAccount(pamaet)

  560.           }else{

  561.             this.trendAnalysisAccount()

  562.           }

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

  564.           this.trendAnalysisAccount()

  565.         }else{

  566.           this.trendAnalysisAllLevel()

  567.         }

  568. 

  569.       })

  570.     },

  571.     //项目

  572.     trendtrendAnalysisProject(pamaet){

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

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

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

  576.             var newline=[];

  577.             var newline2=[];

  578.             newlist.map(item=>{

  579.               newline.push(item.fraction)

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

  581.             })

  582.             this.SwitchCARDS(newline,newline2)

  583.          }else{

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

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

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

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

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

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

  590. 

  591.             let arr=[];

  592.             newlist.map(item=>{

  593.               newline.push(item.fraction)

  594.             })

  595.             newlist2.map(item=>{

  596.               newline1.push(item.fraction)

  597.             })

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

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

  600. 								if (sdf == zxc) {

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

  602.                    arr.push({

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

  604.                      shiduan1:item.fraction,

  605.                      shiduan2:child.fraction,

  606.                    });

  607. 								}

  608. 							})

  609. 						})

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

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

  612.                 if(xdx==ind){

  613.                   che.heji=acd.fraction;

  614.                 }

  615.               })

  616.             })

  617.             arr.unshift({

  618.               name:'项目合计',

  619.               shiduan1:res.data.startSum,

  620.               shiduan2:res.data.endSum,

  621.               heji:res.data.comparedSum,

  622.             })

  623. 

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

  625.             this.tableData=arr;

  626.             console.log( this.tableData)

  627.          }

  628.       })

  629.     },

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

  631.     overviewfindList(){

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

  633.           houseId:this.houseId,

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

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

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

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

  638.           }else{

  639.             this.departmentid=''

  640.           }

  641.         })

  642.     },

  643.     //切换部门

  644.     departmenttap(){

  645.       this.trendtrendAnalysis()

  646.     },

  647. 

  648. 

  649.     //选项卡切换

  650.     tapChange(idx){

  651.       this.aliasclass=idx;

  652.       this.trendtrendAnalysis()

  653.     },

  654.     //时间tab切换

  655.     tabtimetap(i) {

  656.       this.timeType = i;

  657.       this.checked = false;

  658.       this.selectTime = "";

  659.       this.selectTime1 = "";

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

  661.       let num = 24 * 3600 * 1000;

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

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

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

  665.       }

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

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

  668.       }

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

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

  671.       }

  672.       this.customtime = [

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

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

  675.       ];

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

  677.        this.Confirmthecontrast=false;

  678.       this.trendtrendAnalysis()

  679.     },

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

  681.     show() {

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

  683.     },

  684.     //选择对比时间

  685.     timeChange(e) {

  686.       //	对数据进行处理

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

  688.       this.selectTime = "";

  689.       this.selectTime1 = "";

  690.       this.timeSelect(e);

  691.     },

  692.     timeSelect(e) {

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

  694.         this.selectTime = e;

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

  696.       } else {

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

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

  699.         let num = 24 * 3600 * 1000;

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

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

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

  703.         }

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

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

  706.         }

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

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

  709.         }

  710.         this.selectTime = e;

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

  712.       }

  713.         this.Confirmthecontrast=true;

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

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

  716.         this.trendtrendAnalysis()

  717.     },

  718.     radioChange() {

  719.       this.selectTime = "";

  720.       this.selectTime1 = "";

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

  722.     },

  723.     //选择自定义时间

  724.     confirmtime(e) {

  725.       this.timeType = "-1";

  726.       this.checked = false;

  727.       this.selectTime = "";

  728.       this.selectTime1 = "";

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

  730.       if (!e) return;

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

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

  733.       this.Confirmthecontrast=false;

  734.       this.trendtrendAnalysis()

  735.     },

  736.     timestampToTime(timestamp) {

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

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

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

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

  741.       return yyyy + MM + dd;

  742.     },

  743. 

  744. 

  745. 

  746.     SwitchCARDS(newline,newline2) {

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

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

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

  750.       var option;

  751. 

  752.       option = {

  753.         tooltip: {

  754.           trigger: "axis",

  755.         },

  756.         legend: {

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

  758.           bottom: "10",

  759.         },

  760.         grid: {

  761.           left: 10,

  762.           right: 10,

  763. 

  764.           containLabel: true,

  765.         },

  766.         xAxis: {

  767.           type: "category",

  768.           data: newline2,

  769.           axisLabel: {

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

  771.             textStyle: {

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

  773.             },

  774.           },

  775.           axisLine: {

  776.             lineStyle: {

  777.               type: "solid",

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

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

  780.             },

  781.           },

  782.         },

  783.         yAxis: {

  784.           type: "value",

  785.           splitNumber: 4,

  786.           axisLabel: {

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

  788.             textStyle: {

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

  790.             },

  791.           },

  792.           axisLine: {

  793.             lineStyle: {

  794.               ype: "solid",

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

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

  797.             },

  798.           },

  799.           splitLine: {

  800.             lineStyle: {

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

  802.             },

  803.           },

  804.           axisTick: {

  805.             //y轴刻度线

  806.             show: false,

  807.           },

  808.         },

  809.         series: [

  810.           {

  811.             name: "起始时间",

  812.             data:newline,

  813.             type: "line",

  814.             smooth: true,

  815.           },

  816.         ],

  817.       };

  818. 

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

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

  821.         myChart.resize();

  822.       });

  823.     },

  824.     SwitchCARDS2(newline,newline1,newline2) {

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

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

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

  828.       var option;

  829. 

  830.       option = {

  831.         tooltip: {

  832.           trigger: "axis",

  833.         },

  834.         legend: {

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

  836.           bottom: "10",

  837.         },

  838.         grid: {

  839.           left: 10,

  840.           right: 10,

  841. 

  842.           containLabel: true,

  843.         },

  844.         xAxis: {

  845.           type: "category",

  846.           data: newline2,

  847.           axisLabel: {

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

  849.             textStyle: {

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

  851.             },

  852.           },

  853.           axisLine: {

  854.             lineStyle: {

  855.               type: "solid",

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

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

  858.             },

  859.           },

  860.         },

  861.         yAxis: {

  862.           type: "value",

  863.           splitNumber: 4,

  864.           axisLabel: {

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

  866.             textStyle: {

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

  868.             },

  869.           },

  870.           axisLine: {

  871.             lineStyle: {

  872.               ype: "solid",

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

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

  875.             },

  876.           },

  877.           splitLine: {

  878.             lineStyle: {

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

  880.             },

  881.           },

  882.           axisTick: {

  883.             //y轴刻度线

  884.             show: false,

  885.           },

  886.         },

  887.         series: [

  888.           {

  889.             name: "起始时间",

  890.             data:newline,

  891.             type: "line",

  892.             smooth: true,

  893.           },

  894.           {

  895.             name: "对比时间",

  896.             data:newline1,

  897.             type: "line",

  898.             smooth: true,

  899.           }

  900.         ],

  901.       };

  902. 

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

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

  905.         myChart.resize();

  906.       });

  907.     },

  908.      piechart2(newline,newlinename,newline2){

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

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

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

  912.       var option;

  913.       option = {

  914.         tooltip: {

  915.             trigger: 'axis'

  916.         },

  917.         legend: {

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

  919.             bottom: "10",

  920.         },

  921.         color:[

  922.           '#2671E2',

  923.           '#F3787B',

  924.         ],

  925.         radar: {

  926.           // shape: 'circle',

  927.           indicator: newlinename

  928.         },

  929.         series: [

  930.           {

  931.             type: 'radar',

  932.             tooltip: {

  933.                 trigger: 'item'

  934.             },

  935.             data: [

  936.               {

  937.                 value:newline,

  938.                 name: '起始时间'

  939.               },

  940.               {

  941.                 value:newline2,

  942.                 name: '对比时间'

  943.               },

  944.             ]

  945.           }

  946.         ]

  947.       };

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

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

  950.        myChart.resize();

  951.       });

  952.     },

  953.     piechart(newline,newlinename){

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

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

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

  957.       var option;

  958.       option = {

  959.         tooltip: {

  960.             trigger: 'axis'

  961.         },

  962.         legend: {

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

  964.             bottom: "10",

  965.         },

  966.         color:[

  967.           '#2671E2',

  968.           '#F3787B',

  969.         ],

  970.         radar: {

  971.           // shape: 'circle',

  972.           indicator: newlinename

  973.         },

  974.         series: [

  975.           {

  976.             type: 'radar',

  977.             tooltip: {

  978.                 trigger: 'item'

  979.             },

  980.             data: [

  981.               {

  982.                 value:newline,

  983.                 name: '起始时间'

  984.               },

  985.             ]

  986.           }

  987.         ]

  988.       };

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

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

  991.       myChart.resize();

  992.       });

  993.     }

  994. 

  995.   },

  996. };

  997. </script>

  998. 

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

  1000. .box-center {

  1001.   width: 100%;

  1002.   padding: 15px;

  1003.   min-width: 1200px;

  1004.   padding-bottom: 100px;

  1005. }

  1006. 

  1007. .table {

  1008.   border-collapse: collapse;

  1009.   width: 100%;

  1010. }

  1011. .tbody {

  1012.   display: block;

  1013.   // width: 100%;

  1014.   // overflow-x: auto;

  1015.   // overflow-y: auto;

  1016.   height: 220px;

  1017. }

  1018. .tbody tr {

  1019.   display: table;

  1020.   width: 100%;

  1021.   table-layout: fixed;

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

  1023. }

  1024. 

  1025. #main {

  1026.   width: 100%;

  1027.   height: 380px;

  1028. }

  1029. 

  1030. .app-box-san {

  1031.   width: 100%;

  1032.   background: #ffffff;

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

  1034.   border-radius: 4px;

  1035.   margin-top: 15px;

  1036.   padding-bottom: 15px;

  1037.   .santitle {

  1038.     width: 100%;

  1039.     height: 50px;

  1040.     line-height: 50px;

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

  1042.     font-size: 16px;

  1043.     color: #333333;

  1044.     font-weight: 500;

  1045.     text-indent: 15px;

  1046.   }

  1047.   .santab {

  1048.     width: 100%;

  1049.     height: 400px;

  1050.     padding: 15px;

  1051.   }

  1052. }

  1053. .app-box-er {

  1054.   width: 100%;

  1055.   background: #ffffff;

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

  1057.   border-radius: 4px;

  1058.   margin-top: 15px;

  1059.   padding: 15px;

  1060.   .titletab {

  1061.     width: 100%;

  1062.     height: 42px;

  1063.     display: flex;

  1064.     // border: 1px solid red;

  1065.   }

  1066.   .titletab div {

  1067.     width: 130px;

  1068.     height: 42px;

  1069.     line-height: 42px;

  1070.     text-align: center;

  1071.     border: 1px solid #e0e0e0;

  1072.     font-size: 14px;

  1073.   }

  1074.   .claindex {

  1075.     background: #2671e2;

  1076.     color: #ffffff;

  1077.     border: none;

  1078.   }

  1079. }

  1080. 

  1081. .kapian-box {

  1082.   width: 100%;

  1083.   height: 144px;

  1084.   margin-top: 15px;

  1085.   display: flex;

  1086.   .kayi {

  1087.     flex: 1;

  1088.     margin-right: 15px;

  1089.     height: 144px;

  1090.     background: #ffffff;

  1091.     border-radius: 4px;

  1092.     .shang {

  1093.       width: 100%;

  1094.       display: flex;

  1095.       .zuo {

  1096.         width: 50%;

  1097.         .text1 {

  1098.           font-size: 16px;

  1099.           font-weight: 400;

  1100.           color: #666666;

  1101.           margin-left: 30px;

  1102.           margin-top: 24px;

  1103.         }

  1104.         .text2 {

  1105.           font-size: 32px;

  1106.           font-weight: normal;

  1107.           color: #32363d;

  1108.           margin-left: 30px;

  1109.           margin-top: 18px;

  1110.         }

  1111.       }

  1112.       .you {

  1113.         width:50%;

  1114.         display: flex;

  1115.         align-items: center;

  1116.         .youimg {

  1117.           width: 90%;

  1118.           height: 60px;

  1119.         }

  1120.       }

  1121.     }

  1122.     .xia {

  1123.       width: 100%;

  1124.       font-size: 14px;

  1125.       text-indent: 30px;

  1126.       margin-top: 10px;

  1127.       .span1 {

  1128.         color: #333333;

  1129.         font-weight: 400;

  1130.       }

  1131.       .span2 {

  1132.         color: #e6273a;

  1133.         font-weight: 400;

  1134.         margin-left: 16px;

  1135.       }

  1136.     }

  1137.   }

  1138. }

  1139. 

  1140. .tophove {

  1141.   color: #ffffff;

  1142.   background: #2671e2;

  1143. }

  1144. .app-top {

  1145.   width: 100%;

  1146.   background: #ffffff;

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

  1148.   border-radius: 4px;

  1149.   padding-top: 15px;

  1150.   padding-bottom: 15px;

  1151. }

  1152. .app-titel {

  1153.   width: 100%;

  1154.   display: flex;

  1155.   align-items: center;

  1156.   .titel-text {

  1157.     height: 100%;

  1158.     font-size: 16px;

  1159.     font-weight: 600;

  1160.     color: #32363d;

  1161.     text-indent: 30px;

  1162.   }

  1163.   .toptimeqhuan {

  1164.     width: 190px;

  1165.     height: 32px;

  1166.     background: #ffffff;

  1167.     border-radius: 4px;

  1168.     border: 1px solid #e0e0e0;

  1169.     display: flex;

  1170.     align-items: center;

  1171.     overflow: hidden;

  1172.     margin-left: 20px;

  1173.     cursor: pointer;

  1174.   }

  1175.   .toptimeqhuan div {

  1176.     flex: 1;

  1177.     text-align: center;

  1178.     line-height: 32px;

  1179.     font-size: 14px;

  1180.   }

  1181. }

  1182. .timeSel {

  1183.   margin-top: 8px;

  1184.   margin-left: 20px;

  1185.   border: 1px solid #ccc;

  1186.   padding: 0 5px;

  1187.   cursor: pointer;

  1188.   color: #606266;

  1189. }

  1190.       .theadtd{

  1191.             width: 140px;

  1192.             height: 48px;

  1193.             border: 1px solid #E0E0E0;

  1194.             text-align: center;

  1195.             line-height: 48px;

  1196.             font-size: 16px;

  1197.             color: #32363D;

  1198. 

  1199.         }

  1200. </style>