Skip to content

S
shld-databoard-ui
Commit 4bfec5bd authored by 潘自豪's avatar 潘自豪
Browse files
Options

新增流失客户优化

parent d2c2e51c
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 48 deletions
config/index.js
View file @ 4bfec5bd
......@@ -29,14 +29,7 @@ module.exports = {
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://127.0.0.1:4523/m1/3446320-0-default', // 测试
changeOrigin: true, // 改变源（是否跨域）
pathRewrite: {
'^/api': '/'
}
},
'/m1/3446320-0-default/api': {
target: 'http://127.0.0.1:4523', // 测试
target: 'http://localhost:8080', // 测试
changeOrigin: true, // 改变源（是否跨域）
pathRewrite: {
'^/api': '/'
......
src/module/api/apiList.js
View file @ 4bfec5bd
......@@ -113,10 +113,11 @@ export const getOrderLoseAddCustomer = (cur_day) => fetch('/api/query/*/action/g
}, 'POST');
//流失客户 & 新增客户-明细
export const getOrderAddCustomerDetail = (cur_day, type) => fetch('/api/query/*/action/get_order_add_customer_detail', {
export const getOrderAddCustomerDetail = (cur_day, type,cur_page) => fetch('/api/query/*/action/get_order_add_customer_detail', {
aux: {
cur_day: cur_day,
type: type
type: type,
cur_page:cur_page
}
}, 'POST');
......
src/module/databoard/components/card/paging-list.vue 0 → 100644
View file @ 4bfec5bd
<template>
<div class="page_card">
<div class="winner_list">
<div class="list">
<table class="lw_table">
<tbody>
<tr v-for="(row, idx) in leftDatas" :key="idx" :style="{height: 100 / leftDatas.length + '%'}">
<td v-if="showIcon">
<div class="col_number">{{ idx + 1 }}</div>
</td>
<td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
<p class="key_span">{{ col.key }}</p>
<p class="value_span" :style="col.valStyle">
{{ colFormatter['' + idz] ? colFormatter['' + idz](col.value) : col.value }}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="list middle"></div>
<div class="list">
<table class="lw_table">
<tbody>
<tr v-for="(row, idx) in rightDatas" :key="idx" :style="{height: 100 / rightDatas.length + '%'}">
<td v-if="showIcon">
<div class="col_number">{{ idx + 26 }}</div>
</td>
<td class="winner_span" :style="columnsStyle['title']">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz" :style="columnsStyle[col.key]">
<p class="key_span">{{ col.key }}</p>
<p class="value_span" :style="col.valStyle">
{{ colFormatter['' + idz] ? colFormatter['' + idz](col.value) : col.value }}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "pagingList",
props: {
curPage: {
type: menubar,
default: 1
},
showIcon: {
type: Boolean,
default: true
},
columnsStyle: {
type: Object,
default: function () {
return {};
}
},
leftDatas: {
type: Array,
default: function () {
return [
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]}
];
}
},
rightDatas: {
type: Array,
default: function () {
return [
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]}
];
}
},
colFormatter: {
type: Object,
default: function () {
return {};
}
}
}
};
</script>
<style scoped>
.page_card {
height: 95%;
}
.winner_list {
text-align: center;
}
.page_card::-webkit-scrollbar {
width: 0 !important
}
table {
font-size: 5pt;
color: white;
display: block;
overflow: hidden;
}
tr:nth-child(odd) {
background-color: #0E5FFF20;
}
tr:nth-child(even) {
background-color: #0E5FFF30;
}
td {
padding: 0 0 0 1rem;
}
.col_number {
height: 10px;
color: #19EBFF;
font-weight: bold;
text-align: center;
line-height: 10px;
//background: url(../../assets/img/number_bg.png) no-repeat center;
}
.winner_span {
color: white;
font-size: 8px;
}
.key_span {
}
.value_span {
color: lightblue;
font-weight: bold;
}
.list {
display: inline-grid;
width: 35%;
}
.middle {
width: 15%;
}
.bottom {
}
</style>
src/module/databoard/databoard/js/lostAddCustomer.js
View file @ 4bfec5bd
......@@ -4,10 +4,17 @@ import {
import {conver_amont} from "./../../../utils/numUtil";
import moment from 'moment'
//天维度数据转换
export const getAllDatas = async function (cur_day, type) {
let res = await getOrderAddCustomerDetail(cur_day, type);
let lostAdd = resultProcess(res.data);
return lostAdd;
export const getAllDatas = async function (cur_day, type,cur_page) {
let pageData = {};
let totle = 0;
let curPage = 1;
let res = await getOrderAddCustomerDetail(cur_day, type,cur_page);
let lostAdd = resultProcess(res.data.data);
pageData.leftData = lostAdd.slice(0,25);
pageData.rightData = lostAdd.slice(25,50);
pageData.curPage = res.data.cur_page;
pageData.total = res.data.total;
return pageData;
};
/**
......
src/module/databoard/databoard/lost-add-customer.vue
View file @ 4bfec5bd
<template>
<div class="page">
<div class="content">
<display-board class="content_card" :title="lostCustomerTitle" title_size="large">
<winners-list style="height: 100%;overflow: auto;" id="ar_company_list"
:columns-style="{'title':{'width':'45%'}}"
:rows="lostCustomer"
/>
</display-board>
<display-board class="content_card" :title="addCustomerTitle" title_size="large">
<winners-list style="height: 100%;overflow: auto;" id="ar_company_list"
:columns-style="{'title':{'width':'45%'}}"
:rows="addCustomer"
<display-board class="content_card" :title="curPageTitle" title_size="large">
<paging-list class="list_data" style="overflow: auto;" id="ar_company_list"
:columns-style="{'title':{'width':'30%'}}"
:leftDatas="pageData.leftData" :rightDatas="pageData.rightData"
:curPage = "curPage"
/>
<div class="bottom">
<el-pagination
background
:page-size="50"
:pager-count="11"
:current-page="curPage"
layout="prev, pager, next"
@current-change="handleCurrentChange"
:total="pageData.total">
</el-pagination>
</div>
</display-board>
</div>
</div>
</template>
<script>
import data from "./mockData/lost_add_customer.json";
import DisplayBoard from "../components/container/display-board.vue";
import WinnersList from "../components/card/winners-list.vue";
import PagingList from "../components/card/paging-list.vue";
import {getAllDatas} from "./js/lostAddCustomer"
import moment from 'moment'
export default {
name: "LostAddCustomer",
components: {WinnersList, DisplayBoard},
components: {PagingList, DisplayBoard},
data() {
return {
today: moment().format("yyyy-MM-DD"),
lostCustomerTitle: "流失客户(较去年)",
lostCustomer: [],
addCustomerTitle: "新增客户(较去年)",
addCustomer: [],
currentData: {},
mockData: data.list,
chart: null,
currentCard: null,
listTitle: "流失客户(较去年)",
currentBtn: {
date: "day",
subdivide: "domain",
},
curPageTitle: this.$route.query.code === 1 ? "新增客户(较去年)" : "流失客户(较去年)",
pageData :{},
curPage:1,
}
},
methods: {
back() {
this.$router.push({path: '/'});
},
async handleCurrentChange(currentPage){
this.pageData = await getAllDatas(this.today, this.$route.query.code,currentPage)
}
},
async mounted() {
this.lostCustomer = await getAllDatas(this.today, 2)
this.addCustomer = await getAllDatas(this.today, 1)
this.pageData = await getAllDatas(this.today, this.$route.query.code)
},
}
</script>
......@@ -72,8 +68,19 @@ export default {
}
.content_card {
width: 35%;
margin-top: 5%;
height: 100%;
width: 100%;
height: 90%;
margin-top: 3%;
}
.list_data{
}
.bottom{
display: inline-block;
width: 100%;
height: 10%;
line-height: 10%;
text-align: center;
}
</style>
src/module/databoard/index.vue
View file @ 4bfec5bd
......@@ -112,7 +112,7 @@
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="yl.amount" mark="万元"/>
</showcase>
<showcase style="width: 18%;" title="流失客户" @click.native="routerTo('/lost-add-customer')">
<showcase style="width: 18%;" title="流失客户" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="lskh.weight"
......@@ -121,7 +121,7 @@
content-style="font-size: 16px;" mark-style="font-size: 10px;"
:content="lskh.amount" mark="万元"/>
</showcase>
<showcase style="width: 18%;" title="新增客户" @click.native="routerTo('/lost-add-customer')">
<showcase style="width: 18%;" title="新增客户" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 16px;" mark-style="font-size: 10px;" :content="xzkh.weight"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment