From 9759b2f503e62195383b37c645837ce277506c38 Mon Sep 17 00:00:00 2001 From: wangxiaohua <1214073490@qq.com> Date: Wed, 3 Nov 2021 19:25:29 +0800 Subject: [PATCH] init --- src/api/modules/http.js | 20 ++ src/page/wel.vue | 1 + src/views/Statistics/TrendAnalysis.vue | 424 +++++++++++++++---------- vue.config.js | 4 +- 4 files changed, 279 insertions(+), 170 deletions(-) diff --git a/src/api/modules/http.js b/src/api/modules/http.js index a9b6a17..040b193 100644 --- a/src/api/modules/http.js +++ b/src/api/modules/http.js @@ -532,4 +532,24 @@ export function overviewreceptionOverviewZxl(query) { } +//趋势分析 +export function trendtrendAnalysis(query) { + return request({ + url: 'autoSR/cusStageStatistics/trendAnalysis', + method:'get', + params:query + }) +} + +//项目 +export function trendtrendAnalysisProject(query) { + return request({ + url: 'autoSR/cusStageStatistics/trendAnalysisProject', + method:'get', + params:query + }) +} + + + diff --git a/src/page/wel.vue b/src/page/wel.vue index f9658eb..a17c43a 100644 --- a/src/page/wel.vue +++ b/src/page/wel.vue @@ -26,6 +26,7 @@
-
-
- 楼盘选择： -
-
- - - - -
-
-
+
接待时间
@@ -39,10 +15,11 @@ 近30天
-
+
-
+
对比时间段
-
-
-
- {{ selectTime1 ? "时段二： " : "请选择： " - }}{{ - selectTime + "-" + selectTime1 - }} -
+
+ {{ selectTime1 ? "时段二： " : "请选择： "}} + {{ selectTime + "-" + selectTime1}} -
-
+
+ +
有效接待
-
2
+
{{cardobj.startSumCustomer||0}}个
-
- 对比:78 - 50% +
+ 对比:{{cardobj.endSumCustomer ||0}}个 + {{cardobj.contrastSumCustomer ||0}}%
平均执行率
-
2
+
{{cardobj.startFraction||0}}%
-
- 对比:78 - 50% +
+ 对比:{{cardobj.endFraction ||0}}% + {{cardobj.contrastFraction ||0}}%
-
平均接待时长
-
2
+
平均接待时长/min
+
{{Math.floor(cardobj.startSumDuration/60)||0}}
-
- 对比:78 - 50% +
+ 对比:{{Math.floor(cardobj.endSumDuration/60) ||0}} + {{cardobj.contrastSumDuration ||0}}%
@@ -175,19 +149,30 @@
-
+
对比报表
- + - + + - + + - + + +
@@ -199,80 +184,132 @@ export default { data() { return { timeType: 4, - time: "", - customtime: [], - houseList: [], - orgType: localStorage.getItem("orgType"), - page: { - pageNum: 1, - pageSize: 6, - openTime: "", - closeTime: "", - houseName: "", - accountName: "", - imei: "", - total: "", - recording: "", - }, pickerOptions: { disabledDate(time) { - //根据当前日期 --- 禁止选中之后的日期 return time.getTime() > Date.now(); }, }, - selectTime1: "", - selectTime: "", - aliasclass: 1, - fromobj: { - starttime: "", - endoftime: "", + time: "",//对比时间的数组 + page: { + openTime: "", + closeTime: "", }, - houseId: "", - options: [ - { - value: "选项1", - label: "黄金糕", - }, - { - value: "选项2", - label: "双皮奶", - }, - ], + customtime: [],//自定义时间 + selectTime1: "",//对比时间 + selectTime: "",//对比时间 + aliasclass: 1,//tab下标 + houseId: "",//楼盘id + options: [], value: "", - checked: false, - value1: "99999999999999", - tableData: [], + checked: false,//是否对比 + Confirmthecontrast:false, + tableData: [],//表格数据 + cardobj:{} }; }, mounted() { - - this.zkhousePage(); + this.houseId = localStorage.getItem("houseId"); + this.tabtimetap(4); }, methods: { - tapChange(idx){ - this.aliasclass=idx + //获取卡片 + 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.trendtrendAnalysisProject(pamaet) + } + + }) }, - zkhousePage() { - this.$api.api - .findHouseByUser({ - orgType: localStorage.getItem("orgType"), - }) - .then((res) => { - // console.log(res) - this.houseList = res.data; - if (localStorage.getItem("orgType") == 3) { - this.houseId = localStorage.getItem("houseId"); - } else { - this.houseId = res.data[0].id; - } - this.SwitchCARDS(); - this.tabtimetap(4); - }); + //项目 + 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) + } + }) }, - houseChange() {}, + + //选项卡切换 + tapChange(idx){ + this.aliasclass=idx; + this.trendtrendAnalysis() + }, + //时间tab切换 tabtimetap(i) { this.timeType = i; - // this.getTableList() this.checked = false; this.selectTime = ""; this.selectTime1 = ""; @@ -288,42 +325,30 @@ export default { 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.getTableList(); - // this.getdetail(); + this.Confirmthecontrast=false; + this.trendtrendAnalysis() }, + // 对比时间选择弹框显示 show() { this.$refs.time.pickerVisible = true; }, + //选择对比时间 timeChange(e) { - // console.log(e) - // this.selectTime=e // 对数据进行处理 // 当当前选择的为自定义时间时 this.selectTime = ""; this.selectTime1 = ""; this.timeSelect(e); - // this.getdetail(); - // this.getcompare(); }, timeSelect(e) { - console.log(this.$refs.time); if (this.timeType == -1) { - // 将两者的时间戳相减，然后在在选择的自定义时间的时间戳想加 - // console.log(e,this.page.openTime,this.page.closeTime) - // console.log(new Date(e).getTime(),new Date(this.page.openTime).getTime(),new Date(this.page.closeTime).getTime(),'时间戳') - // console.log(this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime())) this.selectTime = e; - this.selectTime1 = this.timestampToTime( - new Date(e).getTime() + - new Date(this.page.closeTime).getTime() - - new Date(this.page.openTime).getTime() - ); + this.selectTime1 = this.timestampToTime(new Date(e).getTime()+new Date(this.page.closeTime).getTime()-new Date(this.page.openTime).getTime()); } else { // 获取今天昨天近一周 // 获取一天的时间戳 @@ -338,65 +363,122 @@ export default { if (this.timeType == 6) { num = 24 * 3600 * 1000 * 29; } - // console.log(-this.timeType*num) - // this.selectTime=this.timestampToTime(new Date().getTime()-this.timeType*num) 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.compareList = []; this.$set(this, "time", null); }, + //选择自定义时间 confirmtime(e) { this.timeType = "-1"; - // if(this.customtime==''){ }else{ - // const d = new Date(this.customtime[0]) - // this.page.openTime = d.getFullYear() + '-' + this.Zeropadding((d.getMonth() + 1)) + '-' + this.Zeropadding(d.getDate()) - // const c = new Date(this.customtime[1]) - // this.page.closeTime = c.getFullYear() + '-' + this.Zeropadding((c.getMonth() + 1)) + '-' + this.Zeropadding(c.getDate()) - // } this.checked = false; this.selectTime = ""; this.selectTime1 = ""; this.$set(this, "time", null); - console.log(e); if (!e) return; this.page.openTime = this.customtime[0]; this.page.closeTime = this.customtime[1]; - // this.getTableList() - // this.getdetail() + this.Confirmthecontrast=false; + this.trendtrendAnalysis() }, timestampToTime(timestamp) { var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 - // var date = new Date(timestamp * 1000);//时间戳为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; + }, - var MM = - (date.getMonth() + 1 < 10 - ? "0" + (date.getMonth() + 1) - : date.getMonth() + 1) + "-"; - // var dd = date.getDate() + ' '; - var dd = - (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; - // var HH = date.getHours() + ':'; - // var HH = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':'; - // - // // var mm = date.getMinutes() + ':'; - // var mm = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':'; - // - // // var ss = date.getSeconds(); - // var ss = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds()); + SwitchCARDS(newline,newline2) { + echarts.init(document.getElementById("main")).dispose(); + var chartDom = document.getElementById("main"); + var myChart = echarts.init(chartDom); + var option; - // return yyyy+MM+dd+HH+mm+ss; - return yyyy + MM + dd; + 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(); + }); }, - SwitchCARDS() { + SwitchCARDS2(newline,newline1,newline2) { + echarts.init(document.getElementById("main")).dispose(); var chartDom = document.getElementById("main"); var myChart = echarts.init(chartDom); var option; @@ -406,7 +488,7 @@ export default { trigger: "axis", }, legend: { - data: ["来访人数/个"], + data: ["起始时间","对比时间"], bottom: "10", }, grid: { @@ -417,7 +499,7 @@ export default { }, xAxis: { type: "category", - data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + data: newline2, axisLabel: { //重点在这一块，其余可以忽略 textStyle: { @@ -460,11 +542,17 @@ export default { }, series: [ { - name: "来访人数/个", - data: [820, 932, 901, 934, 1290, 1330, 1320], + name: "起始时间", + data:newline, type: "line", smooth: true, }, + { + name: "对比时间", + data:newline1, + type: "line", + smooth: true, + } ], }; @@ -556,7 +644,7 @@ export default { width: 100%; display: flex; .zuo { - flex: 1; + width: 50%; .text1 { font-size: 16px; font-weight: 400; @@ -573,7 +661,7 @@ export default { } } .you { - flex: 2; + width:50%; display: flex; align-items: center; .youimg { diff --git a/vue.config.js b/vue.config.js index f4d080c..6d9e22c 100644 --- a/vue.config.js +++ b/vue.config.js @@ -5,9 +5,9 @@ // const url = 'http://pigx-gateway' // const url = 'http://39.97.167.65:9999' //测试 // const url = 'http://192.168.31.169:9999' //长龙 -// const url = 'http://192.168.31.133:9999' //嘉豪 +const url = 'http://192.168.31.134:9999' //嘉豪 // const url = 'http://192.168.31.100:9999' //王笑 -const url = 'http://mrra2f.natappfree.cc' //王笑 +// const url = 'http://mrra2f.natappfree.cc' //王笑 const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = ['js', 'css']