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

init

newStyle
lancer 3 years ago
parent
ef63fd1beb
commit
f5be5ec4b6
3 changed files with 1009 additions and 1 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/views/Equipment/equipmentDetailList.vue
  2. +530
    -0
      src/views/Statistics/ConsultantBrand.vue
  3. +478
    -0
      src/views/Statistics/MentoringAbility.vue

+ 1
- 1
src/views/Equipment/equipmentDetailList.vue View File

@@ -656,7 +656,7 @@ export default {
houseName: "",
accountName: "",
imei: "",
total: "",
total:10,
recording: "",
},
details: {


+ 530
- 0
src/views/Statistics/ConsultantBrand.vue View File

@@ -0,0 +1,530 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-titel">
<div class="titel-text">
楼盘选择：
<el-select v-model="houseId" placeholder="请选择">
<el-option
v-for="item in buildingoptions"
:key="item.value"
:label="item.propertyName"
:value="item.id"
>
</el-option>
</el-select>
</div>
</div>
<div class="app-titel">
<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
v-model="customtime"
@change="confirmtime()"
type="daterange"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
<div style="margin-left: 26px" class="div-lab">
<div class="label">员工</div>
<el-select v-model="value" placeholder="请选择" class="div-inp">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div style="margin-left: 26px" class="div-lab">
<div class="label">对比</div>
<el-select v-model="value" placeholder="请选择" class="div-inp">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>

<!-- 表格 -->
<div class="cen-tab">
<div class="app-titel">
<div class="toptimeqhuan">
<div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
销讲统计
</div>
<div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
违禁统计
</div>
</div>
</div>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="batchId" label="序号" align="center">
</el-table-column>
<el-table-column prop="name" label="顾问" align="center">
</el-table-column>
<el-table-column prop="name" label="归属团队" align="center">
</el-table-column>
<el-table-column
prop="name"
v-if="tabFlag == 0"
label="设备在线天数"
align="center"
>
</el-table-column>
<el-table-column prop="name" label="接待量" align="center">
</el-table-column>
<el-table-column
v-if="tabFlag == 1"
prop="realityEquipmentCount"
label="违禁次数"
align="center"
>
</el-table-column>
<el-table-column
v-if="tabFlag == 1"
prop="receivableEquipmentCount"
label="违禁占比"
align="center"
>
</el-table-column>
<el-table-column
v-if="tabFlag == 0"
prop="realityEquipmentCount"
label="接待时长"
align="center"
>
</el-table-column>
<el-table-column
v-if="tabFlag == 1"
prop="acceptanceNum"
label="返现执行率"
align="center"
>
</el-table-column>
<el-table-column
v-if="tabFlag == 1"
prop="acceptanceNum"
label="过度保证执行率"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
v-if="tabFlag == 0"
label="品牌介绍执行率"
align="center"
>
</el-table-column>
<el-table-column
prop="createTime"
v-if="tabFlag == 0"
label="沙盘介绍执行率"
align="center"
>
</el-table-column>
<el-table-column prop="remark" label="...执行性率" align="center">
</el-table-column>
<el-table-column label="违禁执行率" align="center"> </el-table-column>
</el-table>
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[8, 16, 24, 32]"
:page-size="4"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">接待量（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="text1-1">人均接待量</div>
<div class="text1-2">1</div>
</div>
</div>
<div
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
>
<div id="echar" style="height: 250px; width: 100%"></div>
</div>
</div>
<div class="you">
<div class="title">
<div class="text1">销讲执行率（TOP10）</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 class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 25%">
<div class="text1-1">人均接待量</div>
<div class="text1-2">1</div>
</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>
</template>

<script>
import * as echarts from "echarts";
export default {
data() {
return {
houseId: "",
buildingoptions: [],
TimetoAhoose: 2,
tabFlag: 1,
customtime: [],
tableData: [],
currentPage4: 1,
total: 20,
options: [
{
value: "1",
label: "排名",
},
{
value: "2",
label: "趋势",
},
],
value: "1",
ceratelist: [
{ name: "还是得", avgZxl: 80 },
{ name: "大大奥德赛", avgZxl: 90 },
{ name: "沙发和", avgZxl: 20 },
{ name: "还是得", avgZxl: 10 },
{ name: "还客户家客户是得", avgZxl: 80 },
],
};
},
mounted() {
this.echarCreat();
},
methods: {
echarCreat() {
let myChart = echarts.init(document.getElementById("echar"));
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
color: [
"#66AFF5",
"#FABD2B",
"#6F8EDC",
"#FFCF8F",
"#F98120",
"#1CC99E",
"#9474FB",
"#657292",
"#7A6A99",
"#BF5D52",
"#EE6666",
"#77B7E4",
"#E6A065",
"#9D5139",
"#C1AA88",
"#F87F7A",
"#F6CF74",
"#7F5506",
"#88BB9B",
"#6E99AA",
"#5789D0",
],
legend: {},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
},
yAxis: {
type: "category",
data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
},
series: [
{
type: "bar",
data: [19325, 23438, 31000, 121594, 134141, 681807],
},
],
};
myChart.setOption(option);
},
handleCurrentChange() {},
handleSizeChange() {},
//切换时间
tabtimetap(index) {
this.TimetoAhoose = index;
},
tabFlagChange(idx) {
this.tabFlag = idx;
},
},
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
}
.cen-tab {
width: 100%;
padding: 15px;
background: #ffffff;
margin-top: 15px;
}
.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;
flex-wrap: wrap;
.titel-text {
height: 100%;
font-size: 18px;
font-weight: 600;
color: #32363d;
line-height: 70px;
margin-left: 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-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;
}
}
}
}

.hejisan {
width: 92%;
margin: 0 auto;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
.text1-1 {
color: #666666;
}
.text1-2 {
color: #333333;
margin-top: 10px;
}
}

// 进度条
.jinbox {
width: 100%;
height: 18px;
line-height: 18px;
display: flex;
font-size: 16px;
color: #2c3542;
margin-top: 10px;
.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;
}
}
.div-lab {
display: flex;
margin: 5px;
}
.div-inp {
width: 200px;
}
.label {
font-size: 14px;
font-weight: 400;
color: #32363d;
line-height: 32px;
margin-left: 15px;
min-width: 40px;
}
</style>

+ 478
- 0
src/views/Statistics/MentoringAbility.vue View File

@@ -0,0 +1,478 @@
<template>
<div class="box-center">
<!-- 头 -->
<div class="app-titel">
<div class="titel-text">
楼盘选择：
<el-select v-model="houseId" placeholder="请选择">
<el-option
v-for="item in buildingoptions"
:key="item.value"
:label="item.propertyName"
:value="item.id"
>
</el-option>
</el-select>
</div>
</div>
<div class="app-titel">
<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
v-model="customtime"
@change="confirmtime()"
type="daterange"
range-separator="-"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</div>
<div style="margin-left: 26px" class="div-lab">
<div class="label">员工</div>
<el-select v-model="value" placeholder="请选择" class="div-inp">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div style="margin-left: 26px" class="div-lab">
<div class="label">对比</div>
<el-select v-model="value" placeholder="请选择" class="div-inp">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>

<div class="app-box-san">
<div class="zuo">
<div class="title">
<div class="text1">接待量（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="text1-1">宋先锋</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="text1-1">案场平均</div>
<div class="text1-2">1</div>
</div>

</div>
<div
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
>
<div id="echar" style="height:300px;"></div>
</div>
</div>
<div class="zuo">
<div class="title">
<div class="text1">销讲能雷达图（TOP10）</div>
</div>
<div class="hejisan">
<div class="sanbox1" style="width: 35%">
<div class="text1-1">合计</div>
<div class="text1-2">1</div>
</div>
<div class="sanbox1" style="width: 40%">
<div class="text1-1">顾问</div>
<div class="text1-2">1</div>
</div>
</div>
<div
style="overflow-y: auto; height: 350px; width: 94%; margin: 0 auto"
>
<div id="echar1" style="height:250px;"></div>
</div>
</div>
</div>

<!-- 表格 -->
<div class="cen-tab">
<div class="app-titel">
<div class="toptimeqhuan">
<div :class="{ tophove: tabFlag == 0 }" @click="tabFlagChange(0)">
销讲统计
</div>
<div :class="{ tophove: tabFlag == 1 }" @click="tabFlagChange(1)">
违禁统计
</div>
</div>
</div>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="batchId" label="日期" align="center">
</el-table-column>
<el-table-column prop="name" label="接待量" align="center">
</el-table-column>
<el-table-column
v-if="tabFlag == 1"
prop="realityEquipmentCount"
label="违禁次数"
align="center"
>
</el-table-column>
<el-table-column
v-if="tabFlag == 1"
prop="receivableEquipmentCount"
label="违禁占比"
align="center"
>
</el-table-column>
<el-table-column
v-if="tabFlag == 0"
prop="realityEquipmentCount"
label="接待时长"
align="center"
>
</el-table-column>
<el-table-column prop="acceptanceNum" label="返现执行率" align="center">
</el-table-column>
<el-table-column
prop="createTime"
label="过度保证执行率"
align="center"
>
</el-table-column>

<el-table-column prop="remark" label="...执行性率" align="center">
</el-table-column>
<el-table-column label="违禁执行率" align="center"> </el-table-column>
</el-table>
<div style="display: flex; justify-content: flex-end; margin-top: 10px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[8, 16, 24, 32]"
:page-size="4"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>

<script>
import * as echarts from "echarts";
export default {
data() {
return {
houseId: "",
buildingoptions: [],
TimetoAhoose: 2,
tabFlag: 1,
customtime: [],
tableData: [],
currentPage4: 1,
total: 20,
options: [
{
value: "1",
label: "排名",
},
{
value: "2",
label: "趋势",
},
],
echarList: {},
value: "1",
ceratelist: [
{ name: "还是得", avgZxl: 80 },
{ name: "大大奥德赛", avgZxl: 90 },
{ name: "沙发和", avgZxl: 20 },
{ name: "还是得", avgZxl: 10 },
{ name: "还客户家客户是得", avgZxl: 80 },
],
};
},
mounted() {
this.echarCreat();
this.creatRadar();
},
methods: {
echarCreat() {
let myChart = echarts.init(document.getElementById("echar"));
let option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
legend: {
data: ["line", "line1"],
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
name: "line",
},
{
data: [10, 20, 24, 28, 13, 17, 20],
type: "line",
name: "line1",
},
],
};
myChart.setOption(option);
},
creatRadar() {
let myChart = echarts.init(document.getElementById("echar1"));
let option = {
legend: {
data: ["Allocate", "Actua"],
},
radar: {
// shape: 'circle',
indicator: [
{ name: "Sales", max: 6500 },
{ name: "Administration", max: 16000 },
{ name: "Information Technology", max: 30000 },
{ name: "Customer Support", max: 38000 },
{ name: "Development", max: 52000 },
{ name: "Marketing", max: 25000 },
],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "Allocate",
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "Actua",
},
],
},
],
};
myChart.setOption(option);
},
handleCurrentChange() {},
handleSizeChange() {},
//切换时间
tabtimetap(index) {
this.TimetoAhoose = index;
},
tabFlagChange(idx) {
this.tabFlag = idx;
},
},
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
width: 100%;
padding: 15px;
min-width: 1200px;
padding-bottom: 100px;
}
.cen-tab {
width: 100%;
padding: 15px;
background: #ffffff;
margin-top: 15px;
}
.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: 18px;
font-weight: 600;
color: #32363d;
line-height: 70px;
margin-left: 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-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;
}
}
}
}

.hejisan {
width: 92%;
margin: 0 auto;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
.text1-1 {
color: #666666;
}
.text1-2 {
color: #333333;
margin-top: 10px;
}
}

// 进度条
.jinbox {
width: 100%;
height: 18px;
line-height: 18px;
display: flex;
font-size: 16px;
color: #2c3542;
margin-top: 10px;
.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;
}
}
.div-lab {
display: flex;
margin: 5px;
}
.div-inp {
width: 200px;
}
.label {
font-size: 14px;
font-weight: 400;
color: #32363d;
line-height: 32px;
margin-left: 15px;
min-width: 40px;
}
</style>

Write Preview
Loading…
Cancel
Save