|
|
@@ -21,6 +21,7 @@
|
|
|
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
|
|
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
|
|
|
<script src="js/select-date.js"></script>
|
|
|
+ <script src="js/hierarchyFilter.js"></script>
|
|
|
<script
|
|
|
src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758187289797/echarts.js"></script>
|
|
|
<script src="js/echarts-wordcloud.js"></script>
|
|
|
@@ -154,7 +155,7 @@
|
|
|
top: 44px;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
|
|
|
.top_data_bottom {
|
|
|
@@ -250,6 +251,7 @@
|
|
|
.top_data_title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.top_data_right {
|
|
|
@@ -280,7 +282,18 @@
|
|
|
text-overflow: ellipsis;
|
|
|
/* 显示省略号 */
|
|
|
}
|
|
|
-
|
|
|
+ .top_data_title_branch2 {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #222222;
|
|
|
+ max-width: 180px;
|
|
|
+ white-space: nowrap;
|
|
|
+ /* 禁止换行 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 隐藏溢出内容 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /* 显示省略号 */
|
|
|
+ }
|
|
|
.triangle {
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
@@ -382,7 +395,7 @@
|
|
|
}
|
|
|
|
|
|
.date_list {
|
|
|
- width: 212px;
|
|
|
+ /* width: 212px; */
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -633,6 +646,109 @@
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+ /* 提升弹框层级,避免被 echarts 遮挡 */
|
|
|
+ .van-overlay {
|
|
|
+ z-index: 2999 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-popup {
|
|
|
+ z-index: 3000 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 层级筛选样式 */
|
|
|
+ .hierarchy_title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 13px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .hierarchy_filter {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_filter_trigger {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_filter_trigger .top_data_title_branch {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #222222;
|
|
|
+ max-width: 90px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_filter_trigger .triangle {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 6px solid transparent;
|
|
|
+ border-top-color: #222222;
|
|
|
+ margin-top: 6px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_panel {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 16px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_column {
|
|
|
+ flex: 1;
|
|
|
+ max-height: 320px;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_column + .hierarchy_column {
|
|
|
+ border-left: 1px solid #f0f2f5;
|
|
|
+ padding-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_item {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+ padding: 8px 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ background: #f7f9fc;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_item--active {
|
|
|
+ background: #1677ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 8px 16px 12px;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 1px solid #f0f2f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hierarchy_actions .van-button {
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .hierarchy_actions .van-button + .van-button {
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
@@ -665,14 +781,15 @@
|
|
|
<select-date :page-date="pageDate" @change-date="handleChangeDate"></select-date>
|
|
|
</div>
|
|
|
<div class="top_data_bottom">
|
|
|
- <div class="outlet_data item_gap" @click="showPicker = true">
|
|
|
+ <!-- <div class="outlet_data item_gap" @click="showPicker = true">
|
|
|
<div class="top_data_title_branch">网点:{{outletName}}</div>
|
|
|
<div class="triangle"></div>
|
|
|
</div>
|
|
|
<div class="outlet_data" @click="showDeptPicker = true">
|
|
|
<div class="top_data_title_branch">部门:{{deptName}}</div>
|
|
|
<div class="triangle"></div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ <hierarchy-filter :tenancy-Id="tenancyId" :token="token" @on-change="handleHierarchyChange"></hierarchy-filter>
|
|
|
</div>
|
|
|
<van-popup v-model="showPopup" duration="0.2" closeable position="top" :lock-scroll="false"
|
|
|
:style="{ height: '100vh' }" @close="handleClosePopup">
|
|
|
@@ -1296,6 +1413,9 @@
|
|
|
contentRankData: [], // 运营任务-素材排行榜
|
|
|
loading: false,
|
|
|
pageDate: [], // 日期范围
|
|
|
+ tenancyIds: [],
|
|
|
+ tenancyOutletIds: [],
|
|
|
+ departmentIds: [],
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -1331,6 +1451,12 @@
|
|
|
this.getAdminList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleHierarchyChange(departmentIds, outletIds, tenancyIds) {
|
|
|
+ this.tenancyIds = tenancyIds || [this.tenancyId]
|
|
|
+ this.tenancyOutletIds = outletIds
|
|
|
+ this.departmentIds = departmentIds
|
|
|
+ this.requestData()
|
|
|
+ },
|
|
|
// 初始化
|
|
|
initialization() {
|
|
|
this.clientIndicators = []
|
|
|
@@ -1345,6 +1471,7 @@
|
|
|
this.getDeptData() // 部门列表数据
|
|
|
},
|
|
|
requestData() {
|
|
|
+ this.tenancyIds = [this.tenancyId]
|
|
|
if (this.pageTitle === '客户资产') {
|
|
|
this.getClientIndicators() // 客户资产-总数据
|
|
|
this.getTrend() // 客户资产-统计趋势图
|
|
|
@@ -1566,8 +1693,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/clientIndicators`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : []
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
}),
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json',
|
|
|
@@ -1762,7 +1890,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/trend`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
@@ -2023,8 +2153,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/stepStatistic`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
}),
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json',
|
|
|
@@ -2053,8 +2184,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/intentRank`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
}),
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json',
|
|
|
@@ -2158,8 +2290,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/buyRank`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
}),
|
|
|
headers: {
|
|
|
'Content-Type': 'application/json',
|
|
|
@@ -2303,8 +2436,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/chatIndicators`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|
|
|
@@ -2929,8 +3063,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/wordCloudMap`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|
|
|
@@ -3451,7 +3586,7 @@
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ departmentIds: this.departmentIds || [],
|
|
|
startTime: this.memberStartTime,
|
|
|
endTime: this.memberEndTime,
|
|
|
page: this.currentPage,
|
|
|
@@ -3483,7 +3618,7 @@
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ departmentIds: this.departmentIds || [],
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|
|
|
@@ -3511,8 +3646,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/outletCount`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|
|
|
@@ -3541,8 +3677,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/taskCompletePercent`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|
|
|
@@ -3653,8 +3790,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/interact`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|
|
|
@@ -3766,8 +3904,9 @@
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/contentRank`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
- outletId: this.outletId,
|
|
|
- departmentIds: this.deptId ? [this.deptId] : [],
|
|
|
+ tenancyIds: this.tenancyIds,
|
|
|
+ tenancyOutletIds: this.tenancyOutletIds,
|
|
|
+ departmentIds: this.departmentIds,
|
|
|
startTime: this.pageStartTime,
|
|
|
endTime: this.pageEndTime,
|
|
|
}),
|