|
@@ -19,260 +19,128 @@
|
|
|
<!-- 图标 -->
|
|
|
<div>
|
|
|
<p>
|
|
|
- <img src="../../assets/bargound/data.png" alt="" /><span class="kccl">客源分析</span>
|
|
|
+ <img src="../../assets/bargound/data.png" alt="" /><span
|
|
|
+ class="kccl"
|
|
|
+ >客源分析</span
|
|
|
+ >
|
|
|
</p>
|
|
|
</div>
|
|
|
<div style="display: flex">
|
|
|
<!-- 下拉框 -->
|
|
|
<div style="margin-right: 20px">
|
|
|
- <el-select class="select" v-model="company_ids" multiple placeholder="请选择" style="width: 200px">
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value">
|
|
|
+ <el-select
|
|
|
+ class="select"
|
|
|
+ v-model="company_ids"
|
|
|
+ multiple
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.text"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<!-- 日期表 -->
|
|
|
<div class="dataForm" style="margin-right: 20px">
|
|
|
- <el-date-picker v-model="value1" type="daterange" range-separator="——" start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value1"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="——"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ >
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
<!-- 按钮 -->
|
|
|
- <el-button @click="searchBtn" style="background-color: rgb(40, 155, 209); color: black">查询</el-button>
|
|
|
+ <el-button
|
|
|
+ @click="searchBtn"
|
|
|
+ style="background-color: rgb(40, 155, 209); color: black"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 表格 -->
|
|
|
<el-table
|
|
|
+ border
|
|
|
class="exporttable"
|
|
|
:data="tableData"
|
|
|
- border
|
|
|
+
|
|
|
stripe
|
|
|
:header-cell-style="{ 'text-align': 'center', background: '#03111c' }"
|
|
|
:cell-style="{ 'text-align': 'center' }"
|
|
|
show-summary
|
|
|
- style="width: 100%; margin: 1px">
|
|
|
- <el-table-column
|
|
|
- prop="company"
|
|
|
- label="品牌">
|
|
|
+ style="width: 100%; margin: 1px"
|
|
|
+ max-height="700"
|
|
|
+ >
|
|
|
+ <el-table-column prop="company" label="品牌"> </el-table-column>
|
|
|
+ <el-table-column prop="name" label="展厅">
|
|
|
+ <el-table-column prop="ztjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="ztzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="ztcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="展厅">
|
|
|
- <el-table-column
|
|
|
- prop="ztjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ztzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ztcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="转介绍">
|
|
|
+ <el-table-column prop="zjsjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="zjszs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="zjscjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="转介绍">
|
|
|
- <el-table-column
|
|
|
- prop="zjsjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="zjszs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="zjscjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="网络直销">
|
|
|
+ <el-table-column prop="wlzxjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="wlzxzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="wlzxcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="网络直销">
|
|
|
- <el-table-column
|
|
|
- prop="wlzxjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="wlzxzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="wlzxcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="车展外拓">
|
|
|
+ <el-table-column prop="czwtjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="czwtzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="czwtcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="车展外拓">
|
|
|
- <el-table-column
|
|
|
- prop="czwtjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="czwtzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="czwtcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="二网大客">
|
|
|
+ <el-table-column prop="ewdkjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="ewdkzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="ewdkcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="二网大客">
|
|
|
- <el-table-column
|
|
|
- prop="ewdkjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ewdkzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ewdkcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="厂家">
|
|
|
+ <el-table-column prop="cjjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="cjzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="cjcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="厂家">
|
|
|
- <el-table-column
|
|
|
- prop="cjjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="cjzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="cjcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="懂车帝">
|
|
|
+ <el-table-column prop="dcdjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="dcdzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="dcdcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="懂车帝">
|
|
|
- <el-table-column
|
|
|
- prop="dcdjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dcdzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dcdcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="抖音">
|
|
|
+ <el-table-column prop="dyjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="dyzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="dycjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="抖音">
|
|
|
- <el-table-column
|
|
|
- prop="dyjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dyzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dycjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="易车网">
|
|
|
+ <el-table-column prop="ycwjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="ycwzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="ycwcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="易车网">
|
|
|
- <el-table-column
|
|
|
- prop="ycwjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ycwzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="ycwcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="汽车之家">
|
|
|
+ <el-table-column prop="qczjjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="qczjzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="qczjcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="汽车之家">
|
|
|
- <el-table-column
|
|
|
- prop="qczjjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="qczjzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="qczjcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="电台广告">
|
|
|
+ <el-table-column prop="dtggjc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="dtggzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="dtggcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="电台广告">
|
|
|
- <el-table-column
|
|
|
- prop="dtggjc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dtggzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dtggcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="其他网络平台">
|
|
|
- <el-table-column
|
|
|
- prop="qtwljc"
|
|
|
- label="交车数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="qtwlzs"
|
|
|
- label="客户总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="qtwlcjl"
|
|
|
- label="成交率">
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
+ <el-table-column prop="name" label="其他网络平台">
|
|
|
+ <el-table-column prop="qtwljc" label="交车数"> </el-table-column>
|
|
|
+ <el-table-column prop="qtwlzs" label="客户总数"> </el-table-column>
|
|
|
+ <el-table-column prop="qtwlcjl" label="成交率"> </el-table-column>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
-
|
|
|
<!-- <el-tab-pane label=" 分渠道销量统计分析">配置管理</el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
</div>
|
|
@@ -284,7 +152,6 @@ import axios from "axios";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
currentTime: "",
|
|
|
company_ids: [],
|
|
|
//表格各类属性
|
|
@@ -294,7 +161,6 @@ export default {
|
|
|
//日期表属性
|
|
|
pickerOptions: {
|
|
|
shortcuts: [
|
|
|
-
|
|
|
{
|
|
|
text: "最近一个月",
|
|
|
onClick(picker) {
|
|
@@ -304,23 +170,21 @@ export default {
|
|
|
picker.$emit("pick", [start, end]);
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
],
|
|
|
},
|
|
|
- value1: [("2023-08-01"), ("2023-08-08")],
|
|
|
+ value1: ["2023-08-01", "2023-08-08"],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.updateTime(); //时间
|
|
|
- this.getTableDate();//开始获取表格
|
|
|
- this.getSelectDate()//下拉框接口数据
|
|
|
+ this.getTableDate(); //开始获取表格
|
|
|
+ this.getSelectDate(); //下拉框接口数据
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
// 在组件销毁前清除定时器,避免内存泄漏
|
|
|
clearInterval(this.timer);
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
//表格接口数据
|
|
|
getTableDate() {
|
|
|
axios
|
|
@@ -328,8 +192,8 @@ export default {
|
|
|
params: {
|
|
|
company_ids: this.company_ids.join(),
|
|
|
date_begin: this.value1[0],
|
|
|
- date_end: this.value1[1]
|
|
|
- }
|
|
|
+ date_end: this.value1[1],
|
|
|
+ },
|
|
|
})
|
|
|
.then((res) => {
|
|
|
console.log("--------", res.data.data);
|
|
@@ -381,9 +245,8 @@ export default {
|
|
|
},
|
|
|
//查询
|
|
|
searchBtn() {
|
|
|
- this.getTableDate()
|
|
|
-
|
|
|
- }
|
|
|
+ this.getTableDate();
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -408,7 +271,6 @@ export default {
|
|
|
font-size: 24px;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
-
|
|
|
.el-input__inner {
|
|
|
background-color: #133654;
|
|
|
}
|
|
@@ -416,7 +278,6 @@ export default {
|
|
|
.el-input__inner {
|
|
|
border: 0;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-date-editor .el-range-input {
|
|
|
display: inline-block;
|
|
|
height: 100%;
|
|
@@ -426,21 +287,17 @@ export default {
|
|
|
color: #ffffffba;
|
|
|
background-color: #133654;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-table {
|
|
|
border: none;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-table::before {
|
|
|
background-color: black;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
|
|
|
.el-table__header-wrapper tbody td.el-table__cell {
|
|
|
background-color: rgb(2, 62, 2);
|
|
|
color: #93acbf;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-table--border::after,
|
|
|
.el-table--group::after,
|
|
|
.el-table::before {
|
|
@@ -449,24 +306,31 @@ export default {
|
|
|
background-color: black;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
-
|
|
|
+::v-deep
|
|
|
+ .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card
|
|
|
+ .el-tabs__nav-scroll {
|
|
|
+ border-bottom: 1px solid;
|
|
|
+}
|
|
|
::v-deep .el-table td,
|
|
|
.building-top .el-table th.is-leaf {
|
|
|
color: #93acbf;
|
|
|
}
|
|
|
-
|
|
|
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
|
|
|
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
background-color: #133654;
|
|
|
}
|
|
|
+/* 日期表 */
|
|
|
+:deep(.el-input__inner) {
|
|
|
+ background-color: #133654;
|
|
|
+ border: none;
|
|
|
+ color: #ffffffc1;
|
|
|
+}
|
|
|
|
|
|
::v-deep .el-table tr {
|
|
|
background: #133654;
|
|
|
}
|
|
|
-
|
|
|
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
|
|
background: #081b2b;
|
|
|
}
|
|
|
-
|
|
|
/**
|
|
|
改变边框颜色
|
|
|
*/
|
|
@@ -475,11 +339,6 @@ export default {
|
|
|
border-right: 1px solid #102b47;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
-
|
|
|
-::v-deep .el-tabs.theme.el-tabs--top.theme.el-tabs--border-card .el-tabs__nav-scroll {
|
|
|
- border-bottom: 1px solid;
|
|
|
-}
|
|
|
-
|
|
|
::v-deep.el-table th {
|
|
|
border: 1px solid #102b47 !important;
|
|
|
border-right: none !important;
|
|
@@ -490,7 +349,6 @@ export default {
|
|
|
border: 1px solid #102b47;
|
|
|
border-right: none !important;
|
|
|
}
|
|
|
-
|
|
|
.time {
|
|
|
color: rgb(174, 201, 222);
|
|
|
margin-right: 2%;
|