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
5891bbbae4
commit
48dd311bc3
6 changed files with 1127 additions and 13 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/img/xiazai.png
  2. +527
    -0
      src/views/Statistics/EmployeesReceive.vue
  3. +553
    -8
      src/views/Statistics/ReceptionOverview.vue
  4. +32
    -0
      src/views/Statistics/TrendAnalysis.vue
  5. +13
    -3
      src/views/Statistics/index.vue
  6. +2
    -2
      vue.config.js

BIN
public/img/xiazai.png View File

Before After
Width: 30  |  Height: 30  |  Size: 784 B

+ 527
- 0
src/views/Statistics/EmployeesReceive.vue View File

@@ -0,0 +1,527 @@
<template>
<div class="box-center">
<div class="app-titel">
<el-row style="border-bottom: 1px solid #D8D8D8;height: 70px;">
<el-col :span="12">
<div style="line-height: 70px;color: #32363D;font-size: 18px;font-weight: 600;">
楼盘选择：
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="12">
<div class="screeningbox">
<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 style="width: 30px;height: 70px;margin-left: 20px;display:flex;align-items: center;">
<img @click="daochu()" style="width:30px;height: 30px;" src="/img/xiazai.png" alt="" id="poi">
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div style="margin-top: 15px;padding-bottom: 30px;">
<table>
<thead>
<tr>
<th class="theadtd">员工</th>
<th class="theadtd">录音条数</th>
<th class="theadtd">录音时长
<span class='thding'>
<i class='sotoA' @click="ascending(-1)"></i>
<i class='sotoB' @click="Descendingorder(-1)"></i>
</span>
</th>
<th class="theadtd" v-for="(item,index) in headerlist" :key='index'>
{{item.name}}
<span class='thding'>
<i @click="ascending(index)" class='sotoA'></i>
<i @click="Descendingorder(index)" class='sotoB'></i>
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in centedlist" :key='index'>
<td class="theadtd">{{item.name}}</td>
<td class="theadtd">{{item.receptionCount}}</td>
<td class="theadtd">{{(item.sumDuration == null ? '' : item.sumDuration) }}</td>
<td class="theadtd" v-for="(cet,index) in item.ejList" :key='index'>
{{cet.zxl}}%
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="theadtd">统计</td>
<td class="theadtd">{{footerlist.receptionCount}}</td>
<td class="theadtd">{{ (footerlist.sumDuration == null ? '' : footerlist.sumDuration)}}</td>
<td class="theadtd" v-for="(cet,index) in footerlist.ejList" :key='index'>
{{cet.zxl}}%
</td>
</tr>
</tfoot>
</table>
</div>
</el-col>
</el-row>
</div>
<div style="margin-top: 15px;">
<el-row :gutter="15">
<el-col :span="12">
<div class="zgutteruo">
<div class="zgutteruo-tit">录音量排名</div>
<div class="Templatetable">
<div class="table-tit">
<div>排名</div>
<div>员工</div>
<div>录音时长</div>
</div>
<div class="table-cent" v-for="(itcen,inde) in quantitylist" :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>{{itcen.name}}</div>
<div>{{itcen.sumDuration}}</div>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="zgutteruo">
<div class="zgutteruo-tit">执行率排行</div>
<div class="Templatetable">
<div class="zhibiaotab">
<div :class="{ xianzhongbiao: Timeindex == index }" @click="Timeindextab(index)"
v-for="(item,index) in performanceratelist" :key='index'>{{item.name}}</div>
</div>
<div style="overflow-y:auto;height: 400px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>

</div>
</div>
</el-col>
</el-row>
</div>


</div>
</template>

<script>
export default {
data() {
return {
currentPage4: 1,
customtime:'',
TimetoAhoose:2,
fromobj:{
starttime:'',
endoftime:''
},
houseId:'',
headerlist:[],
centedlist:[],
footerlist:[],
quantitylist:[
{name:'萨达多撒',sumDuration:'10000'}
],
performanceratelist:[],
Timeindex:0,
ceratelist:[
{name:'还是得',avgZxl:80},
{name:'大大奥德赛',avgZxl:90},
{name:'沙发和',avgZxl:20},
{name:'还是得',avgZxl:10},
{name:'还客户家客户是得',avgZxl:80},
]
};
},
mounted() {
// this.houseId=localStorage.getItem("AitemId");
// this.Accesstolevel()
},
methods: {
//时间tab切换
tabtimetap(index){
this.TimetoAhoose=index;
this.fromobj.starttime='';
this.fromobj.endoftime='';
this.customtime='';
this.Accesstolevel()
},
//时间选择
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())
console.log(this.fromobj)
this.Accesstolevel()
}
},
//时间补0
Zeropadding(s) {
return s < 10 ? '0' + s : s
},
//获取数据
Accesstolevel(){
this.headerlist=[];
this.centedlist=[];
this.footerlist=[];
var datatype='';
if(this.TimetoAhoose==6){
datatype=''
}else {
datatype=this.TimetoAhoose
}
axios({
url: `${jypath}/cusStageStatistics/findPersonalData`,
method: 'get',
params: {
dateType:datatype,
itemId:this.houseId,
statDateStart:this.fromobj.starttime,
statDateEnd:this.fromobj.endoftime
}
}).then(data => {
if(data.data.code==10000){
var result = data.data.data;
this.headerlist=result.headerList;
this.centedlist=result.list;
this.footerlist= result.total;
this.tapequantity()
this.performancerate()
}
})
},
//升序
ascending(index){
var parames={
list:this.centedlist,
type:index,
sort:0,
}
this.getorgCode(parames)
},
//降序
Descendingorder(index){
var parames={
list:this.centedlist,
type:index,
sort:1,
}
this.getorgCode(parames)
},
getorgCode(parames){
this.centedlist=[];
axios({
url: `${jypath}/cusStageStatistics/findPersonalDataSort`,
method: 'post',
data: parames
}).then(data => {
if(data.data.code==10000){
var result = data.data.data;
this.centedlist=result;
}
})
},
//导出
daochu(){
var datatype='';
if(this.TimetoAhoose==6){
datatype=''
}else {
datatype=this.TimetoAhoose
}
var s = "statDateStart=" + this.fromobj.starttime + "&statDateEnd=" + this.fromobj.endoftime + "&itemId=" + this.houseId +"&dateType="+datatype;
window.location.href = "${jypath}/marketing/dczxl?" + s;
},
//录音量排名
tapequantity(){
this.quantitylist=[];
var datatype='';
if(this.TimetoAhoose==6){
datatype=''
}else {
datatype=this.TimetoAhoose
}
axios({
url: `${jypath}/cusStageStatistics/findReceptionTime`,
method: 'get',
params: {
dateType:datatype,
itemId:this.houseId,
statDateStart:this.fromobj.starttime,
statDateEnd:this.fromobj.endoftime
}
}).then(data => {
if(data.data.code==10000){
var result = data.data.data;
this.quantitylist=result;
}
})
},
//指标执行率tab切换
Timeindextab(index){
this.ceratelist=[];
this.Timeindex=index;
this.ceratelist=this.performanceratelist[index].acc
},
//指标执行率
performancerate(){
this.performanceratelist=[];
var datatype='';
if(this.TimetoAhoose==6){
datatype=''
}else {
datatype=this.TimetoAhoose
}
axios({
url: `${jypath}/cusStageStatistics/findExecutionRateAnalysis`,
method: 'get',
params: {
dateType:datatype,
itemId:this.houseId,
statDateStart:this.fromobj.starttime,
statDateEnd:this.fromobj.endoftime
}
}).then(data => {
if(data.data.code==10000){
var result = data.data.data;
this.performanceratelist=result;
this.ceratelist=this.performanceratelist[0].acc
}
})
}
},
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
}
.app-titel{
width: 100%;
min-height: 240px;
max-height: 500px;
background: #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);border-radius: 8px;
padding-left: 30px;
padding-right: 30px;
overflow-y:auto;
overflow-x:auto;
}
.screeningbox{
width: 100%;
height: 70px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.toptimeqhuan{
width: 190px;height: 32px;background: #FFFFFF;border-radius: 4px;
border: 1px solid #E0E0E0;display: flex;align-items: center;overflow: hidden;
}
.toptimeqhuan div{
flex: 1;text-align: center;
line-height: 32px;font-size: 16px;
}
.tophove{
color: #ffffff;background: #2671E2;
}
.theadtd{
width: 140px;
height: 48px;
border: 1px solid #E0E0E0;
text-align: center;
line-height: 48px;
font-size: 16px;
color: #32363D;
position: relative;
}
.thding{
display: inline-flex;
flex-direction: column;
align-items: center;
height: 34px;
width: 24px;
vertical-align: middle;
cursor: pointer;
overflow: initial;
position: relative;
}
.sotoA{
width: 0px;
height: 0px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent black transparent;
margin-top: 3px;
}
.sotoB{
width: 0px;
height: 0px;
border-width: 6px;
border-style: solid;
border-color: black transparent transparent transparent;
margin-top: 2px;
}
.zgutteruo{
width: 100%;
height: 477px;
background: #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 8px;
}
.zgutteruo-tit{
width: 100%;
height: 60px;
line-height: 60px;
font-size: 16px;
color: #32363D;
font-weight: 500;
text-indent: 30px;
border-bottom: 1px solid #E0E0E0;
}
.Templatetable{
width: 94%;height: 100%;margin: 0 auto;overflow-y:auto;
}
.table-tit{
width: 100%;height: 40px;line-height: 40px;display: flex;
background: #F2F4F5;margin-top: 22px;
}
.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: 70%;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: 20%;text-align: center;font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #606775;
}

.table-cent{
width: 100%;height: 44px;
line-height: 44px;display: flex;
border-bottom: 1px solid #F2F4F5;
}
.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: 70%;text-align: center;
font-size: 14px;font-family: PingFangSC-Semibold, PingFang SC;color: #32363D;
}
.table-cent>div:nth-of-type(3){
width: 20%;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;
}
.zhibiaotab {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 60px;
line-height: 45px;
color: #666666;
font-size: 14px;
display: flex;
/*flex-wrap: nowrap;*/
width: 100%;
overflow-x: auto;
margin-top: 6px;
}
.zhibiaotab div {
height: 20px;
margin-right:60px;
white-space: nowrap;
}
.xianzhongbiao {
color: #008EF2;
font-weight: 600;
}

.jinbox {
width: 100%;
height: 18px;
line-height: 18px;
display: flex;
font-size: 16px;
color: #2C3542;
margin-top: 18px;
}

.jinboxtit {
width: 14%;
height: 18px;
padding-right: 6px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}

.jinbox-box {
width: 75%;
height: 100%;
border-radius: 8px;
background: #F2F2F2;
}

.boxbaifenbi {
height: 100%;
background:#60D7A0;
border-radius: 8px;
}

.boxbaifenbi2 {
height: 100%;
background: #5B8FF9;
}

.jinboxbott {
width: 16%;
text-indent: 50px;
}
</style>

+ 553
- 8
src/views/Statistics/ReceptionOverview.vue View File

@@ -79,6 +79,122 @@
<div id="main"></div> <div id="main"></div>
</div> </div>


<!-- 三 -->
<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">客户来源</div>
</div>
<div id="Brokenline1"></div>
</div>
<div class="you">
<div class="title">
<div class="text1">客户性别</div>
</div>
<div id="Brokenline2"></div>
</div>
</div>

<!-- 四 -->
<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">团队销讲趋势</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div id="Pinspeak1"></div>
</div>
<div class="you">
<div class="title">
<div class="text1">员工销讲趋势</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div id="Pinspeak2"></div>
</div>
</div>


<!-- 五 -->
<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">销讲维度执行排名</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">销讲指标执行率排名</div>
<div class="text2"></div>
<div class="text2">
<el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
<div class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
<div class="jinboxtit">{{item.name}}</div>
<div class="jinbox-box">
<div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
</div>
<div class="jinboxbott">{{item.avgZxl}}%</div>
</div>
</div>
</div>
</div>

</div> </div>
</template> </template>


@@ -101,10 +217,29 @@ export default {
value: '选项2', value: '选项2',
label: '双皮奶' label: '双皮奶'
}], }],
value: ''
value: '',
ceratelist:[
{name:'还是得',avgZxl:80},
{name:'大大奥德赛',avgZxl:90},
{name:'沙发和',avgZxl:20},
{name:'还是得',avgZxl:10},
{name:'还客户家客户是得',avgZxl:80},
]
}; };
}, },
mounted() { mounted() {
this.SwitchCARDS()
//客户来源
this.Brokenlinefun()
//客户性别
this.Broken2inefun()
//团队销讲
this.Pinspeakfun1()
//员工销讲
this.Pinspeakfun2()
},
methods: {
SwitchCARDS(){
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
@@ -126,10 +261,15 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: { //重点在这一块，其余可以忽略
textStyle: {
color: '#212121', //更改坐标轴文字颜色
}
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
color: '#f0f0f0',//x线的颜色
color: '#DDE1EE',//x线的颜色
width:'1'//坐标线的宽度 width:'1'//坐标线的宽度


} }
@@ -138,25 +278,306 @@ export default {
yAxis: { yAxis: {
type: 'value', type: 'value',
splitNumber:4, splitNumber:4,
axisLabel: { //重点在这一块，其余可以忽略
textStyle: {
color: '#212121', //更改坐标轴文字颜色
}
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
ype: 'solid', ype: 'solid',
color: '#f0f0f0',//x线的颜色
color: '#DDE1EE',//x线的颜色
width:'1'//坐标线的宽度 width:'1'//坐标线的宽度
} }
},
splitLine: {
lineStyle: {
type: 'dashed' // y轴分割线类型
}
},
axisTick: { //y轴刻度线
show: false
},
},
series: [{
name:'来访人数/个',
data: [820, 932, 901, 934, 1290, 1330, 1320,],
type: 'line',
smooth: true,

}]
};

option && myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},
//客户来源
Brokenlinefun(){
let chartDom = document.getElementById('Brokenline1');
let myChart = echarts.init(chartDom);
let option = {
tooltip: {
trigger: "item",
},
graphic: [
{
type: "text",
left: "center",
top: "42%",
style: {
text: '80',
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,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
{value: 580, name: '邮件营销'},
{value: 484, name: '联盟广告'},
{value: 300, name: '视频广告'}
]
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},
//客户性别
Broken2inefun(){
let chartDom = document.getElementById('Brokenline2');
let myChart = echarts.init(chartDom);
let option = {
tooltip: {
trigger: "item",
},
graphic: [
{
type: "text",
left: "center",
top: "42%",
style: {
text: '80',
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,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
data: [
{value: 1048, name: '搜索引擎'},
{value: 735, name: '直接访问'},
]
},
],
};
option && myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},
//团队销讲
Pinspeakfun1(){
let chartDom = document.getElementById('Pinspeak1');
let myChart = echarts.init(chartDom);
let option= {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['来访人数/个'],
bottom: '10',
},
grid: {
left: 10,
right: 10,

containLabel: true,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
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: [{ series: [{
name:'来访人数/个', name:'来访人数/个',
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: [820, 932, 901, 934, 1290, 1330, 1320,],
type: 'line', type: 'line',
smooth: true, smooth: true,

}] }]
}; };


option && myChart.setOption(option); option && myChart.setOption(option);
},
methods: {
window.addEventListener("resize", () => { myChart.resize();});
},
//员工销讲
Pinspeakfun2(){
let chartDom = document.getElementById('Pinspeak2');
let myChart = echarts.init(chartDom);
let option= {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['来访人数/个'],
bottom: '10',
},
grid: {
left: 10,
right: 10,

containLabel: true,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
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: [820, 932, 901, 934, 1290, 1330, 1320,],
type: 'line',
smooth: true,

}]
};

option && myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},

//时间选择
tabtimetap(index) { tabtimetap(index) {
this.TimetoAhoose = index; this.TimetoAhoose = index;
this.fromobj.starttime = ""; this.fromobj.starttime = "";
@@ -164,6 +585,7 @@ export default {
this.customtime = ""; this.customtime = "";
this.getorgCode(); this.getorgCode();
}, },
//自定义时间
confirmtime() { confirmtime() {
if (this.customtime == "") { if (this.customtime == "") {


@@ -187,13 +609,136 @@ export default {
min-width: 1200px; min-width: 1200px;
padding-bottom: 100px; padding-bottom: 100px;
} }

// 进度条
.jinbox {
width: 100%;
height: 18px;
line-height: 18px;
display: flex;
font-size: 16px;
color: #2C3542;
margin-top: 20px;
.jinboxtit {
width: 14%;
height: 18px;
padding-right: 6px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
.jinbox-box {
width: 75%;
height: 100%;
border-radius: 8px;
background: #F2F2F2;
}
.boxbaifenbi {
height: 100%;
background:#60D7A0;
border-radius: 8px;
}
.boxbaifenbi2 {
height: 100%;
background: #5B8FF9;
}
.jinboxbott {
width: 16%;
text-indent: 50px;
}
}




#main{ #main{
width: 100%; width: 100%;
height: 330px;
height: 380px;
}
#Brokenline1{
width: 100%;
height: 350px;
}
#Brokenline2{
width: 100%;
height: 350px;
}
#Pinspeak1{
width: 100%;
height: 350px;
} }
#Pinspeak2{
width: 100%;
height: 350px;
}
.app-box-san{
width: 100%;
height: 400px;
display: flex;
margin-top: 15px;
.zuo{
flex: 1;
height: 100%;
margin-right: 15px;
background: #FFFFFF;
border-radius: 4px;
.title{
width: 100%;
height: 55px;
border-bottom: 1px solid #E0E0E0;
display: flex;
align-content: center;
.text1{
flex: 2;
line-height: 55px;
text-indent: 20px;
font-weight: 500;
font-size: 16px;
color: #333333;
}
.text2{
flex: 1;
height: 55px;
display: flex;
align-items: center;
}
}
}
.you{
height: 100%;
flex: 1;
background: #FFFFFF;
border-radius: 4px;
.title{
width: 100%;
height: 55px;
border-bottom: 1px solid #E0E0E0;
display: flex;
align-content: center;
.text1{
flex: 2;
line-height: 55px;
text-indent: 20px;
font-weight: 500;
font-size: 16px;
color: #333333;
}
.text2{
flex: 1;
height: 55px;
display: flex;
align-items: center;
}
}
}
}





.app-box-er{ .app-box-er{
width: 100%; width: 100%;
height: 453px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
border-radius: 4px; border-radius: 4px;


+ 32
- 0
src/views/Statistics/TrendAnalysis.vue View File

@@ -0,0 +1,32 @@
<template>
<div class="box-center">
asad
</div>
</template>

<script>
import * as echarts from "echarts";
export default {
data() {
return {

};
},
mounted() {

},
methods: {

},
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
}

</style>

+ 13
- 3
src/views/Statistics/index.vue View File

@@ -2,7 +2,17 @@
<div class="box-center"> <div class="box-center">
<!-- 头 --> <!-- 头 -->
<div class="app-titel"> <div class="app-titel">
<div class="titel-text">客户洞察</div>
<div class="titel-text">
楼盘选择：
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="toptimeqhuan"> <div class="toptimeqhuan">
<div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)"> <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
今日 今日
@@ -350,11 +360,11 @@ export default {
align-items: center; align-items: center;
.titel-text { .titel-text {
height: 100%; height: 100%;
font-size: 20px;
font-size: 18px;
font-weight: 600; font-weight: 600;
color: #32363d; color: #32363d;
line-height: 70px; line-height: 70px;
text-indent: 30px;
margin-left: 30px;
} }
.toptimeqhuan { .toptimeqhuan {
width: 190px; width: 190px;


+ 2
- 2
vue.config.js View File

@@ -3,9 +3,9 @@
* https://cli.vuejs.org/zh/config/ * https://cli.vuejs.org/zh/config/
*/ */
// const url = 'http://pigx-gateway' // const url = 'http://pigx-gateway'
// const url = 'http://39.97.167.65:9999' //测试
const url = 'http://39.97.167.65:9999' //测试
// const url = 'http://192.168.31.161:9999' //长龙 // const url = 'http://192.168.31.161:9999' //长龙
const url = 'http://192.168.31.128:9999' //嘉豪
// const url = 'http://192.168.31.128:9999' //嘉豪


const CompressionWebpackPlugin = require('compression-webpack-plugin') const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css'] const productionGzipExtensions = ['js', 'css']


Write Preview
Loading…
Cancel
Save