liumin
/
zkPCproject
0
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

newStyle
wangxiaohua 3 years ago
parent
1bd34f6fa1
commit
9759b2f503
4 changed files with 279 additions and 170 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +20
    -0
      src/api/modules/http.js
  2. +1
    -0
      src/page/wel.vue
  3. +256
    -168
      src/views/Statistics/TrendAnalysis.vue
  4. +2
    -2
      vue.config.js

+ 20
- 0
src/api/modules/http.js View File

@@ -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
})
}





+ 1
- 0
src/page/wel.vue View File

@@ -26,6 +26,7 @@
<el-date-picker
@change="confirmtime()"
v-model="customtime"
:clearable='false'
type="daterange"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"


+ 256
- 168
src/views/Statistics/TrendAnalysis.vue View File

@@ -2,31 +2,7 @@
<div class="box-center">
<!-- 头 -->
<div class="app-top">
<div class="app-titel" v-if="orgType != 3">
<div
class="label"
style="color: #32363d; font-weight: 400; font-size: 16px; margin-left: 30px;"
>
楼盘选择：
</div>
<div>
<el-select
v-model="houseId"
@change="houseChange"
placeholder="请选择"
filterable
>
<el-option
v-for="item in houseList"
:key="item.id"
:label="item.propertyName"
:value="item.id"
>
</el-option>
</el-select>
</div>
</div>
<div class="app-titel" style="margin-top: 10px">
<div class="app-titel">
<div class="titel-text">接待时间</div>
<div class="toptimeqhuan">
<div :class="{ tophove: timeType == 4 }" @click="tabtimetap(4)">
@@ -39,10 +15,11 @@
近30天
</div>
</div>
<div style="margin-left: 26px">
<div style="margin-left: 20px">
<el-date-picker
@change="confirmtime"
v-model="customtime"
:clearable='false'
type="daterange"
range-separator="-"
format="yyyy-MM-dd"
@@ -53,19 +30,15 @@
>
</el-date-picker>
</div>
<div style="margin-left: 26px">
<div style="margin-left: 20px">
<el-checkbox v-model="checked" @change="radioChange"
>对比时间段</el-checkbox
>
</div>
<div style="margin-left: 26px">
<div v-if="checked">
<div class="demonstration timeSel" @click="show">
{{ selectTime1 ? "时段二： " : "请选择： "
}}<span v-if="selectTime1">{{
selectTime + "-" + selectTime1
}}</span>
</div>
<div v-if="checked" style="margin-left: 20px;border:1px solid #DCDFE6;min-width: 220px;height: 30px;border-radius: 4px;max-width:250px;
font-size: 13px; line-height: 30px; text-indent: 8px;" @click="show">
{{ selectTime1 ? "时段二： " : "请选择： "}}
<span v-if="selectTime1">{{ selectTime + "-" + selectTime1}}</span>
<el-date-picker
style="opacity: 0"
v-model="time"
@@ -78,55 +51,56 @@
:picker-options="pickerOptions"
>
</el-date-picker>
</div>
</div>
</div>
</div>
</div>


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

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

</div>
</div>
</div>
@@ -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 {


+ 2
- 2
vue.config.js View File

@@ -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']


Write Preview
Loading…
Cancel
Save