|
|
|
@@ -1,16 +1,536 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
这是统计 |
|
|
|
</div> |
|
|
|
<div class="box-center"> |
|
|
|
<!-- 头 --> |
|
|
|
<div class="app-titel"> |
|
|
|
<div class="titel-text">客户洞察</div> |
|
|
|
<div class="toptimeqhuan"> |
|
|
|
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)"> |
|
|
|
今日 |
|
|
|
</div> |
|
|
|
<div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> |
|
|
|
昨日 |
|
|
|
</div> |
|
|
|
<div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)"> |
|
|
|
近一周 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="margin-left: 26px"> |
|
|
|
<el-date-picker |
|
|
|
@change="confirmtime()" |
|
|
|
v-model="customtime" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
> |
|
|
|
</el-date-picker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 中间 --> |
|
|
|
<div class="app-box"> |
|
|
|
<div class="conbox">客群特征总览</div> |
|
|
|
<div class="alllistbox"> |
|
|
|
<div |
|
|
|
class="alllist" |
|
|
|
v-for="(item, index) in alllist" |
|
|
|
:key="index" |
|
|
|
@click="movePlace(index)" |
|
|
|
style="cursor: pointer" |
|
|
|
> |
|
|
|
<div class="alllist-text1">{{ item.name }}</div> |
|
|
|
<div class="alllist-text1">{{ item.num }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 下面 --> |
|
|
|
<div class="box-forhtml" v-for="(item, index) in objlist" :key="index"> |
|
|
|
<div class="conbox">{{ item.name }}触达排名</div> |
|
|
|
<div class="box-forhtml-flex"> |
|
|
|
<div class="left"> |
|
|
|
<div class="Templatetable"> |
|
|
|
<div class="table-tit"> |
|
|
|
<div>排名</div> |
|
|
|
<div>画像语意词/触达次数</div> |
|
|
|
<div>触达占比</div> |
|
|
|
<div>沟通记录</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="item.total == 0" |
|
|
|
style=" |
|
|
|
width: 100%; |
|
|
|
line-height: 300px; |
|
|
|
text-align: center; |
|
|
|
color: #999999; |
|
|
|
font-size: 16px; |
|
|
|
" |
|
|
|
> |
|
|
|
暂无数据 |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="table-cent" |
|
|
|
v-else |
|
|
|
v-for="(itcen, inde) in item.matchKeywords" |
|
|
|
:key="inde" |
|
|
|
> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-if="inde == 0" |
|
|
|
style="width: 30px; height: 30px" |
|
|
|
src="/img/ranking1.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<img |
|
|
|
v-else-if="inde == 1" |
|
|
|
style="width: 30px; height: 30px" |
|
|
|
src="/img/ranking2.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<img |
|
|
|
v-else-if="inde == 2" |
|
|
|
style="width: 30px; height: 30px" |
|
|
|
src="/img/ranking3.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
<div v-else class="indeclass">{{ inde + 1 }}</div> |
|
|
|
</div> |
|
|
|
<div v-if="index == 2"> |
|
|
|
{{ itcen.name + "-" + itcen.endName + "㎡" }}({{ itcen.total }}) |
|
|
|
</div> |
|
|
|
<div v-else-if="index == 3"> |
|
|
|
{{ itcen.name + "-" + itcen.endName + "万" }}({{ itcen.total }}) |
|
|
|
</div> |
|
|
|
<div v-else>{{ itcen.name }}({{ itcen.total }})</div> |
|
|
|
<div>{{ itcen.proportion }}%</div> |
|
|
|
<div |
|
|
|
style="color: #2671e2; cursor: pointer" |
|
|
|
@click="Toview(item, inde)" |
|
|
|
> |
|
|
|
查看 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<div |
|
|
|
:id="'ids' + item.id" |
|
|
|
class="container" |
|
|
|
style="width: 400px; height: 330px; text-align: center" |
|
|
|
> |
|
|
|
<img |
|
|
|
v-if="item.total == 0" |
|
|
|
style="width: 260px; height: 260px" |
|
|
|
src="/img/Elementcircle.png" |
|
|
|
alt="" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import * as echarts from "echarts"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
alllist: [ |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
{ name: "阿达", num: "5" }, |
|
|
|
], |
|
|
|
customtime: "", |
|
|
|
TimetoAhoose: 2, |
|
|
|
fromobj: { |
|
|
|
starttime: "", |
|
|
|
endoftime: "", |
|
|
|
}, |
|
|
|
namelist: [], |
|
|
|
numlist: [], |
|
|
|
objlist: [ |
|
|
|
{ |
|
|
|
children: null, |
|
|
|
endName: "", |
|
|
|
id: 5, |
|
|
|
isInterval: 1, |
|
|
|
keywordsId: null, |
|
|
|
level: 1, |
|
|
|
matchKeywords: [ |
|
|
|
{ |
|
|
|
carId: "", |
|
|
|
children: null, |
|
|
|
childrenName: "", |
|
|
|
endName: "", |
|
|
|
id: "", |
|
|
|
isInterval: null, |
|
|
|
keywordsId: 138, |
|
|
|
level: 3, |
|
|
|
matchName: "", |
|
|
|
name: "工作", |
|
|
|
orgCode: "", |
|
|
|
pid: 132, |
|
|
|
proportion: 75, |
|
|
|
selected: null, |
|
|
|
sort: null, |
|
|
|
total: 3, |
|
|
|
unit: "", |
|
|
|
}, |
|
|
|
{ |
|
|
|
carId: "", |
|
|
|
children: null, |
|
|
|
childrenName: "", |
|
|
|
endName: "", |
|
|
|
id: "", |
|
|
|
isInterval: null, |
|
|
|
keywordsId: 123, |
|
|
|
level: 3, |
|
|
|
matchName: "", |
|
|
|
name: "周末", |
|
|
|
orgCode: "", |
|
|
|
pid: 122, |
|
|
|
proportion: 25, |
|
|
|
selected: null, |
|
|
|
sort: null, |
|
|
|
total: 1, |
|
|
|
}, |
|
|
|
], |
|
|
|
name: "认知途径", |
|
|
|
orgCode: "031", |
|
|
|
pid: 0, |
|
|
|
sort: 5, |
|
|
|
total: 4, |
|
|
|
unit: "", |
|
|
|
}, |
|
|
|
], |
|
|
|
houseId: "", |
|
|
|
}; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.myChartinit(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
tabtimetap(index) { |
|
|
|
this.TimetoAhoose = index; |
|
|
|
this.fromobj.starttime = ""; |
|
|
|
this.fromobj.endoftime = ""; |
|
|
|
this.customtime = ""; |
|
|
|
this.getorgCode(); |
|
|
|
}, |
|
|
|
confirmtime() { |
|
|
|
if (this.customtime == "") { |
|
|
|
|
|
|
|
} |
|
|
|
} else { |
|
|
|
this.TimetoAhoose = 6; |
|
|
|
const d = new Date(this.customtime[0]); |
|
|
|
this.fromobj.starttime = d.getFullYear() + "-" + this.Zeropadding(d.getMonth() + 1) + "-" + this.Zeropadding(d.getDate()); |
|
|
|
const c = new Date(this.customtime[1]); |
|
|
|
this.fromobj.endoftime = c.getFullYear() + "-" + this.Zeropadding(c.getMonth() + 1) + "-" + this.Zeropadding(c.getDate()); |
|
|
|
} |
|
|
|
}, |
|
|
|
myChartinit() { |
|
|
|
this.objlist.forEach((item, index) => { |
|
|
|
if (item.total != 0) { |
|
|
|
var id = "ids" + item.id; |
|
|
|
var myChart = echarts.init(document.getElementById(id)); |
|
|
|
var objoptlis = []; |
|
|
|
item.matchKeywords.forEach((ice) => { |
|
|
|
objoptlis.push({ value: ice.total, name: ice.name }); |
|
|
|
}); |
|
|
|
var option = { |
|
|
|
color: [ |
|
|
|
"#66AFF5", |
|
|
|
"#FABD2B", |
|
|
|
"#6F8EDC", |
|
|
|
"#FFCF8F", |
|
|
|
"#F98120", |
|
|
|
"#1CC99E", |
|
|
|
"#9474FB", |
|
|
|
"#657292", |
|
|
|
"#7A6A99", |
|
|
|
"#BF5D52", |
|
|
|
"#EE6666", |
|
|
|
"#77B7E4", |
|
|
|
"#E6A065", |
|
|
|
"#9D5139", |
|
|
|
"#C1AA88", |
|
|
|
"#F87F7A", |
|
|
|
"#F6CF74", |
|
|
|
"#7F5506", |
|
|
|
"#88BB9B", |
|
|
|
"#6E99AA", |
|
|
|
"#5789D0", |
|
|
|
], |
|
|
|
tooltip: { |
|
|
|
trigger: "item", |
|
|
|
}, |
|
|
|
graphic: [ |
|
|
|
{ |
|
|
|
type: "text", |
|
|
|
left: "center", |
|
|
|
top: "42%", |
|
|
|
style: { |
|
|
|
text: item.total, |
|
|
|
textAlign: "center", |
|
|
|
fill: "#000", |
|
|
|
width: 30, |
|
|
|
height: 30, |
|
|
|
fontSize: 24, |
|
|
|
color: "#32363D", |
|
|
|
fontFamily: "Microsoft YaHei", |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: "text", |
|
|
|
left: "center", |
|
|
|
top: "55%", |
|
|
|
style: { |
|
|
|
text: "总触达次数", |
|
|
|
textAlign: "center", |
|
|
|
fill: "#000", |
|
|
|
width: 30, |
|
|
|
height: 30, |
|
|
|
fontSize: 16, |
|
|
|
color: "#666666", |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "", |
|
|
|
type: "pie", |
|
|
|
radius: ["48%", "70%"], |
|
|
|
avoidLabelOverlap: false, |
|
|
|
data: objoptlis, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
myChart.setOption(option); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="" scoped > |
|
|
|
<style scoped="scoped" lang="scss" > |
|
|
|
.box-center { |
|
|
|
width: 100%; |
|
|
|
padding: 15px; |
|
|
|
min-width: 1200px; |
|
|
|
padding-bottom: 100px; |
|
|
|
} |
|
|
|
.tophove { |
|
|
|
color: #ffffff; |
|
|
|
background: #2671e2; |
|
|
|
} |
|
|
|
.app-titel { |
|
|
|
width: 100%; |
|
|
|
height: 70px; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); |
|
|
|
border-radius: 4px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.titel-text { |
|
|
|
height: 100%; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 600; |
|
|
|
color: #32363d; |
|
|
|
line-height: 70px; |
|
|
|
text-indent: 30px; |
|
|
|
} |
|
|
|
.toptimeqhuan { |
|
|
|
width: 190px; |
|
|
|
height: 32px; |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
overflow: hidden; |
|
|
|
margin-left: 30px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.toptimeqhuan div { |
|
|
|
flex: 1; |
|
|
|
text-align: center; |
|
|
|
line-height: 32px; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.app-box { |
|
|
|
width: 100%; |
|
|
|
padding-bottom: 20px; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); |
|
|
|
border-radius: 4px; |
|
|
|
padding-top: 20px; |
|
|
|
padding-left: 30px; |
|
|
|
padding-right: 30px; |
|
|
|
margin-top: 20px; |
|
|
|
.conbox { |
|
|
|
height: 18px; |
|
|
|
font-size: 18px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #32363d; |
|
|
|
line-height: 18px; |
|
|
|
} |
|
|
|
.alllistbox { |
|
|
|
width: 100%; |
|
|
|
margin-top: 20px; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
.alllist { |
|
|
|
width: 16.66%; |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
padding-bottom: 2px; |
|
|
|
padding-top: 4px; |
|
|
|
} |
|
|
|
.alllist-text1 { |
|
|
|
width: 100%; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Regular, PingFang SC; |
|
|
|
font-weight: 400; |
|
|
|
color: #333333; |
|
|
|
line-height: 26px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.box-forhtml { |
|
|
|
width: 100%; |
|
|
|
height: 400px; |
|
|
|
background: #ffffff; |
|
|
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); |
|
|
|
border-radius: 4px; |
|
|
|
padding-top: 20px; |
|
|
|
padding-left: 30px; |
|
|
|
padding-right: 30px; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
.box-forhtml-flex { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
.box-forhtml-flex .left { |
|
|
|
width: 50%; |
|
|
|
height: 320px; |
|
|
|
} |
|
|
|
.box-forhtml-flex .right { |
|
|
|
width: 50%; |
|
|
|
height: 330px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.Templatetable { |
|
|
|
width: 88%; |
|
|
|
height: 100%; |
|
|
|
margin: 0 auto; |
|
|
|
overflow-y: auto; |
|
|
|
} |
|
|
|
.table-tit { |
|
|
|
width: 100%; |
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.table-tit > div:nth-of-type(1) { |
|
|
|
width: 10%; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #606775; |
|
|
|
} |
|
|
|
.table-tit > div:nth-of-type(2) { |
|
|
|
width: 40%; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #606775; |
|
|
|
} |
|
|
|
.table-tit > div:nth-of-type(3) { |
|
|
|
width: 25%; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #606775; |
|
|
|
} |
|
|
|
.table-tit > div:nth-of-type(4) { |
|
|
|
width: 25%; |
|
|
|
text-align: center; |
|
|
|
font-size: 16px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #606775; |
|
|
|
} |
|
|
|
|
|
|
|
.table-cent { |
|
|
|
width: 100%; |
|
|
|
height: 20px; |
|
|
|
line-height: 20px; |
|
|
|
display: flex; |
|
|
|
margin-top: 18px; |
|
|
|
} |
|
|
|
.table-cent > div:nth-of-type(1) { |
|
|
|
width: 10%; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
color: #32363d; |
|
|
|
} |
|
|
|
.table-cent > div:nth-of-type(2) { |
|
|
|
width: 40%; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
color: #32363d; |
|
|
|
} |
|
|
|
.table-cent > div:nth-of-type(3) { |
|
|
|
width: 25%; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
color: #32363d; |
|
|
|
} |
|
|
|
.table-cent > div:nth-of-type(4) { |
|
|
|
width: 25%; |
|
|
|
text-align: center; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
color: #32363d; |
|
|
|
} |
|
|
|
.indeclass { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
border-radius: 50%; |
|
|
|
background: #ecf1ff; |
|
|
|
color: #ffffff; |
|
|
|
text-align: center; |
|
|
|
line-height: 20px; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
</style> |
