Skip to content

D
dcxy-manage-shell
Commit 623264ef by 姜雷
Options

调整数据首页样式

parent 87f391ed
Showing with 79 additions and 98 deletions
src/containers/Dashboard/CampusRank/CampusRank.vue
......@@ -4,8 +4,8 @@
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operatorId"
@input="val => fetchConsumeList({ operatorId: val })"
:value="filters.operateId"
@input="val => fetchConsumeList({ operateId: val })"
/>
</search-item>
<el-radio-group
......
src/containers/Dashboard/CampusRank/CampusRankChart.vue
<template>
<div class="CampusRank">
<div id="CampusRank"></div>
<div id="CampusRank">
<div class="CampusRank-legend">
<template v-if="this.data && this.data.length === 10">
其他校区：<span>{{other}}</span><br>
前十校区：<span>{{topTen}}</span>
</template>
<template v-else-if="this.data.length">
校区汇总：<span>{{topTen}}</span>
</template>
</div>
</div>
</div>
</template>
......@@ -9,7 +19,7 @@ import chartMixin from '../chartMixin';
import { mapActions } from 'vuex';
export default {
name: 'CampusRank',
name: 'CampusRankChart',
mixins: [chartMixin],
props: {
changeCampusHandle: {
......@@ -17,11 +27,13 @@ export default {
},
},
data() {
let totle = this.data.reduce((count, item) => count + item.count, 0);
let total = this.data.reduce((count, item) => count + item.count, 0);
return {
chart: null,
today: this.$formatDate(new Date(), 'yyyy-MM-dd'),
totle: totle,
total: total,
topTen: 0,
other: 0,
percentDom: null,
areaNameDom: null,
SelectedDataIndex: null,
......@@ -36,7 +48,7 @@ export default {
container: 'CampusRank',
forceFit: true,
height: this.height,
padding: [0, 130, 0, 0],
padding: [20, 160, 20, 0],
});
this.chart.source(this.data);
this.chart.coord('theta', {
......@@ -45,54 +57,7 @@ export default {
});
this.chart.tooltip(false);
// 图例
this.chart.legend({
position: 'right-center',
marker: 'square',
useHtml: true,
itemTpl: (value, color, checked, index) => {
const obj = this.data[index];
return obj.type === '8'
? `
<li
class="g2-legend-list-item item-${index} ${checked}"
data-value="${value}"
data-color=${color}
style="cursor: pointer;font-size:14px;"
>
<i
class="g2-legend-marker"
style="background-color:${color};"
></i>
<span>其他校区<br/>汇总数据</span>
</li>
`
: `<li
class="g2-legend-list-item item-noshow item-${index} ${checked}"
data-value="${value}"
data-color=${color}
>
<i
class="g2-legend-marker"
style="background-color:${color};"
></i>
${value}
</li>`;
},
'g2-legend-list-item': {
display: 'flex',
// color: '#333',
},
'g2-legend-marker': {
width: '10px',
height: '5px',
borderRadius: 'none',
marginTop: '8px',
marginRight: '10px',
},
'item-noshow': {
display: 'none',
},
});
this.chart.legend(false);
// 坐标系及着色
this.chartGeom = this.chart
.intervalStack()
......@@ -126,7 +91,14 @@ export default {
},
updateData() {
if (this.data.length) {
this.totle = this.data.reduce((count, item) => count + item.count, 0);
this.total = this.data.reduce((count, item) => count + item.count, 0);
if (this.data.length === 10) {
this.other = this.data[this.data.length - 1].count;
this.topTen = this.total - this.other;
} else {
this.other = 0;
this.topTen = this.total;
}
let data = this.SelectedDataIndex;
this.chartGeom.setSelected(this.data[0]);
......@@ -148,7 +120,7 @@ export default {
this.percentDom = document.querySelector('.CampusRank-percent');
this.areaNameDom = document.querySelector('.CampusRank-areaName');
if (this.percentDom) {
this.percentDom.innerHTML = ((data.count / this.totle) * 100).toFixed(
this.percentDom.innerHTML = ((data.count / this.total) * 100).toFixed(
2
);
}
......@@ -162,10 +134,19 @@ export default {
<style lang="scss">
.CampusRank {
position: relative;
.CampusRank-title {
font-size: 16px;
text-align: center;
padding-bottom: 12px;
}
.CampusRank-legend {
position: absolute;
width: 160px;
transform: translateY(-50%);
line-height: 30px;
top: 50%;
right: 0;
}
}
</style>
src/containers/Dashboard/CustomerConsumption/CustomerConsumption.vue
......@@ -4,8 +4,8 @@
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operatorId"
@input="val => getConsumeOrderList({operatorId: val})"
:value="filters.operateId"
@input="val => getConsumeOrderList({operateId: val})"
/>
</search-item>
<search-item label="区域">
......@@ -34,7 +34,7 @@
>本年</el-radio>
</el-radio-group>
</div>
<div class="Dashboard-title">会员消费数据
<div class="Dashboard-title">消费视图
<div
class="CustomerConsumptionChart-tip"
style="color:#333;font-size:14px;text-align: center;"
......@@ -96,7 +96,6 @@ export default {
.CustomerConsumptionChart-tip {
position: absolute;
right: 0;
top: 50px;
margin-left: 10px;
color: #333;
font-size: 14px;
......
src/containers/Dashboard/CustomerConsumption/CustomerConsumptionStore.js
......@@ -4,7 +4,7 @@ import { getFilters, formatDate } from '@/utils/index';
const FETCH_CONSUME_LIST = 'FETCH_CONSUME_LIST';
const initFilters = () => ({
operatorId: undefined,
operateId: undefined,
areaId: undefined,
timeType: 0, // 0 本日，1 本月， 2 本年
});
......
src/containers/Dashboard/CustomerConsumption/chart.vue
......@@ -56,18 +56,6 @@ export default {
this.consumeCount && this.consumeCount.payMen
? this.consumeCount.payMen
: '0';
// 辅助元素
// this.chart.guide().html({
// position: ['0%', '0%'],
// htmlContent: `<div style="color:#333;font-size:14px;text-align: center;">
// 合计消费总金额：<span class="CustomerConsumption-total" style="color:#f00;">0.00元</span>
// 合计消费人数：<span class="CustomerConsumption-count" style="color:#f00;">0人</span>
// </div>`,
// alignX: 'left',
// alignY: 'top',
// offsetX: -40,
// offsetY: -40,
// });
this.chart.render();
this.chart.guide().text({
......
src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue
......@@ -4,8 +4,8 @@
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operatorId"
@input="val => getRechargeOrderList({operatorId: val})"
:value="filters.operateId"
@input="val => getRechargeOrderList({operateId: val})"
/>
</search-item>
<el-radio-group
......@@ -27,12 +27,12 @@
>本年</el-radio>
</el-radio-group>
</div>
<div class="Dashboard-title">会员充值数据
<div class="Dashboard-title">充值视图
<div class="CustomerRechargeChart-tip">
<span
class="CustomerRecharge-tooltip"
style="background-color:#4e82fb;"
></span> 累计充值：
></span> 总充值：
<span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? (rechargeCount.rechargeMoney).toFixed(2) : '0.00' }}元</span>
<span
class="CustomerRecharge-tooltip"
......@@ -85,8 +85,6 @@ export default {
.CustomerRechargeChart-tip {
position: absolute;
right: 0;
top: 50px;
margin-right: 10px;
color: #333;
font-size: 14px;
font-weight: normal;
......
src/containers/Dashboard/CustomerRecharge/CustomerRechargeStore.js
......@@ -4,7 +4,7 @@ import { getFilters, formatDate } from '@/utils';
const FETCH_RECHARGE_LIST = 'FETCH_RECHARGE_LIST';
const initFilters = () => ({
operatorId: undefined,
operateId: undefined,
timeType: 0, // 0 本日，1 本月， 2 本年
});
const filtersStore = initFiltersStore(initFilters);
......
src/containers/Dashboard/CustomerRecharge/chart.vue
<template>
<div class="CustomerRechargeChart">
<div id='CustomerRechargeChart'></div>
<div id='CustomerRechangeSlider'></div>
<div
id='CustomerRechargeChart'
:style="`height: ${height}px;width: ${width?width+'px':'auto'}`"
></div>
<!-- <div id='CustomerRechangeSlider'></div> -->
</div>
</template>
......@@ -41,8 +44,7 @@ Shape.registerShape('interval', 'left', {
draw: function draw(cfg, container) {
var points = this.parsePoints(cfg.points);
var style = Util.mix(Global.shape.interval, cfg.style, { fill: cfg.color });
var rectCfg = getRectRange(points, cfg.size); // cfg.size 对应 .size(25)
var rectCfg = getRectRange(points, cfg.size / 2); // cfg.size 对应 .size(25)
return container.addShape('rect', {
className: 'interval',
......@@ -55,7 +57,7 @@ Shape.registerShape('interval', 'right', {
draw: function draw(cfg, container) {
var points = this.parsePoints(cfg.points);
var style = Util.mix(Global.shape.interval, cfg.style, { fill: cfg.color });
var rectCfg = getRectRange(points, -cfg.size / 2); // cfg.size 对应 .size(25
var rectCfg = getRectRange(points, -cfg.size / 2); // cfg.size 对应 .size(25)
return container.addShape('rect', {
className: 'interval',
......@@ -125,7 +127,7 @@ export default {
container: 'CustomerRechargeChart',
forceFit: true,
height: this.height,
padding: [50, 50, 50, 120],
padding: [50, 50, 20, 120],
});
this.chart.source(dv, {
......@@ -136,6 +138,11 @@ export default {
alias: '充值人数',
},
});
this.chart.axis('areaName', {
label: {
offsetX: 10,
},
});
this.chart.axis('rechargeMoney', {
grid: null,
});
......@@ -146,18 +153,18 @@ export default {
.position('areaName*rechargeMoney')
.color('#4e82fb')
.shape('left')
.size(10);
.size(18);
this.chart
.interval()
.position('areaName*rechargeMen')
.shape('right')
.color('#26c9a8')
.size(10);
.size(18);
this.chart.legend(false);
this.chart.render();
this.initSlider();
// this.initSlider();
},
initSlider() {
const wrapDom = document.getElementById('CustomerRechargeChart');
......@@ -235,11 +242,13 @@ export default {
let spanNum = 4 / arrLength;
this.ds.setState('endRadio', spanNum);
this.dv.source(this.data);
this.updateSlider();
let height = this.data.length * 20;
this.chart.changeHeight(height);
// this.updateSlider();
this.updateData();
} else {
this.initData();
this.initSlider();
// this.initSlider();
}
},
},
......@@ -249,6 +258,11 @@ export default {
<style lang="scss">
.CustomerRechargeChart {
position: relative;
#CustomerRechargeChart {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#CustomerRechangeSlider {
margin-left: -30px;
width: 100%;
......
src/containers/Dashboard/Dashboard.js
......@@ -17,7 +17,7 @@ const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA';
const GET_CAMPUS_DATA = 'GET_CAMPUS_DATA';
const initFilters = () => ({
operatorId: undefined,
operateId: undefined,
timeType: 0, // 0 本日，1 本月， 2 本年
});
const filtersStore = initFiltersStore(initFilters);
......@@ -62,15 +62,14 @@ const getters = {
const actions = {
fetchConsumeList({ commit, dispatch, getters }, data) {
if (data) {
const { timeType, operatorId } = data;
const { timeType, operateId } = data;
(timeType || timeType == 0) &&
dispatch('updateFilters', {
timeType: timeType,
});
operatorId &&
dispatch('updateFilters', {
operatorId,
});
dispatch('updateFilters', {
operateId,
});
}
let entity = getFilters(getters.filters);
switch (entity.timeType) {
......
src/containers/Dashboard/chartMixin.js
......@@ -9,6 +9,7 @@ export default {
return {
chart: null,
height: 270,
width: 0,
chartGeom: null,
};
},
......@@ -23,6 +24,7 @@ export default {
if (innerWidth < 1600) {
this.height = (innerHeight - 270) / 2;
}
this.width = this.$el.clientWidth;
this.initData();
},
methods: {
......
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