Skip to content

D
dcxy-manage-shell
Commit 26c949dd by 姜雷
Options

改造数据首页合并区域消费和服务消费占比

parent 759971c4
Showing with 201 additions and 112 deletions
src/containers/Dashboard/CampusCustomerData/CampusCustomerData.vue 0 → 100644
<template>
<div class="Dashboard-Campus-Service">
<div class="Dashboard-SearchBar bothSearch">
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operateId"
@input="val => changeOperatorHandle({ operateId: val })"
/>
</search-item>
<search-item label="区域">
<dashboard-area-select
:operateId="filters.operateId"
:value="filters.choiceareaIds"
multiple
@input="val => updateFilters({choiceareaIds: val})"
>
<el-option :value="-1">全选</el-option>
</dashboard-area-select>
</search-item>
<el-radio-group
class="Dashboard-Radio"
:value="filters.timeType"
@input="val => updateFilters({ timeType: val })"
>
<el-radio
class="Dashboard-Radio-item"
:label="0"
>本日</el-radio>
<el-radio
class="Dashboard-Radio-item"
:label="1"
>本月</el-radio>
<el-radio
class="Dashboard-Radio-item"
:label="2"
>本年</el-radio>
</el-radio-group>
<el-button
:loading="loading.service||loading.area||loading.equipment"
type="primary"
@click="fetchConsumeList"
class="CampusRank-search"
>搜索</el-button>
</div>
<div class="Dashboard-Campus-Service-chart">
<CampusRank />
<SeviceRatio />
</div>
</div>
</template>
<script>
import SeviceRatio from '../SeviceRatio/SeviceRatio';
import CampusRank from '../CampusRank/CampusRank';
import { mapGetters, mapActions } from 'vuex';
export default {
components: {
SeviceRatio,
CampusRank,
},
computed: {
...mapGetters('Dashboard', [
'campusRankList',
'filters',
'areaInfo',
'loading',
]),
},
methods: {
...mapActions('Dashboard', [
'fetchConsumeList',
'updateCampusName',
'updateFilters',
]),
changeOperatorHandle(data) {
this.updateFilters({ ...data, choiceareaIds: [] });
// this.fetchConsumeList();
},
},
};
</script>
<style lang="scss">
.Dashboard-Campus-Service {
.Dashboard & .Dashboard-SearchBar.bothSearch {
justify-content: flex-start;
align-items: center;
.Dashboard-Radio {
margin-left: 20px;
}
}
.Dashboard-Campus-Service-chart {
display: flex;
width: 100%;
.CampusRank-wrap {
position: relative;
flex: 1.2;
margin-right: 20px;
}
.CampusRank-wrap::after {
content: '';
position: absolute;
height: 80%;
top: 10%;
right: -10px;
border-right: 1px dotted #eee;
}
.SeviceRatio {
flex: 1;
}
}
.el-select {
.el-select__tags {
height: 90%;
overflow: hidden;
input {
display: none;
}
}
.el-input {
overflow: hidden;
}
.el-input__inner {
height: 100% !important;
}
}
}
</style>
src/containers/Dashboard/CampusRank/CampusRank.vue
<template> <template>
<div <div
class="Dashboard-DataCard CampusRank-wrap" class="CampusRank-wrap"
v-loading="loading.area" v-loading="loading.area"
> >
<div class="Dashboard-SearchBar"> <div class="Dashboard-title">各区域消费占比</div>
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operateId"
@input="val => changeOperatorHandle({ operateId: val })"
/>
</search-item>
<search-item label="区域">
<dashboard-area-select
:operateId="filters.operateId"
:value="filters.choiceareaIds"
multiple
@input="val => updateFilters({choiceareaIds: val})"
>
<el-option :value="-1">全选</el-option>
</dashboard-area-select>
</search-item>
<el-radio-group
class="Dashboard-Radio"
:value="filters.timeType"
@input="val => updateFilters({ timeType: val })"
>
<el-radio
class="Dashboard-Radio-item"
:label="0"
>本日</el-radio>
<el-radio
class="Dashboard-Radio-item"
:label="1"
>本月</el-radio>
<el-radio
class="Dashboard-Radio-item"
:label="2"
>本年</el-radio>
</el-radio-group>
<el-button
type="primary"
@click="fetchConsumeList"
class="CampusRank-search"
>搜索</el-button>
</div>
<CampusRankChart <CampusRankChart
:data="campusRankListFillAreaname" :data="campusRankListFillAreaname"
:changeCampusHandle="changeCampusHandle" :changeCampusHandle="changeCampusHandle"
...@@ -120,21 +79,6 @@ export default { ...@@ -120,21 +79,6 @@ export default {
<style lang="scss"> <style lang="scss">
.CampusRank-wrap { .CampusRank-wrap {
.el-select {
.el-select__tags {
height: 90%;
overflow: hidden;
input {
display: none;
}
}
.el-input {
overflow: hidden;
}
.el-input__inner {
height: 100% !important;
}
}
.CampusRank-search { .CampusRank-search {
margin-right: 5px; margin-right: 5px;
} }
......
src/containers/Dashboard/CampusRank/CampusRankChart.vue
...@@ -37,8 +37,8 @@ export default { ...@@ -37,8 +37,8 @@ export default {
this.chart = new G2.Chart({ this.chart = new G2.Chart({
container: 'CampusRank', container: 'CampusRank',
forceFit: true, forceFit: true,
height: this.height, height: this.height - 30,
padding: [20, 230, 20, 0], padding: [20, 249, 20, 0],
}); });
this.chart.source(this.data); this.chart.source(this.data);
this.chart.coord('theta', { this.chart.coord('theta', {
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
position: 'right-center', position: 'right-center',
marker: 'square', marker: 'square',
clickable: false, clickable: false,
offsetX: -4, offsetX: 2,
useHtml: true, useHtml: true,
containerTpl: ` containerTpl: `
<div class="g2-legend"> <div class="g2-legend">
...@@ -73,14 +73,14 @@ export default { ...@@ -73,14 +73,14 @@ export default {
style="display:inline-block;margin-right:10px;background-color:${color};" style="display:inline-block;margin-right:10px;background-color:${color};"
></i> ></i>
<span class="g2-legend-text" title="${value}">${value}： </span> <span class="g2-legend-text" title="${value}">${value}： </span>
<span class="g2-legend-price">${price}</span> <span class="g2-legend-price">${price}</span>元
</li> </li>
`; `;
}, },
'g2-legend': { 'g2-legend': {
width: '230px', width: '244px',
'max-width': '230px', 'max-width': '244px',
'max-height': this.height + 'px', 'max-height': this.height - 30 + 'px',
right: 0, right: 0,
}, },
'g2-legend-list-item': { 'g2-legend-list-item': {
......
src/containers/Dashboard/Dashboard.js
...@@ -16,6 +16,7 @@ const GET_TITLE_DATA = 'GET_TITLE_DATA'; ...@@ -16,6 +16,7 @@ const GET_TITLE_DATA = 'GET_TITLE_DATA';
const GET_PERCENT_DATA = 'GET_PERCENT_DATA'; const GET_PERCENT_DATA = 'GET_PERCENT_DATA';
const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA'; const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA';
const GET_CAMPUS_DATA = 'GET_CAMPUS_DATA'; const GET_CAMPUS_DATA = 'GET_CAMPUS_DATA';
const UPDATE_SERVICE_NAME = 'UPDATE_SERVICE_NAME';
const LOADING_AREA = 'LOADING_AREA'; const LOADING_AREA = 'LOADING_AREA';
const LOADING_SERVICE = 'LOADING_SERVICE'; const LOADING_SERVICE = 'LOADING_SERVICE';
const LOADING_EQUIPMENT = 'LOADING_EQUIPMENT'; const LOADING_EQUIPMENT = 'LOADING_EQUIPMENT';
...@@ -41,6 +42,9 @@ const state = () => ({ ...@@ -41,6 +42,9 @@ const state = () => ({
areaName: '', areaName: '',
areaId: undefined, areaId: undefined,
}, },
serviceInfo: {
serviceName: '',
},
consumeAfterVos: [], consumeAfterVos: [],
consumeHardVos: [], consumeHardVos: [],
list: [], list: [],
...@@ -76,6 +80,7 @@ const getters = { ...@@ -76,6 +80,7 @@ const getters = {
}); });
}, },
seviceRatioList: state => state.consume.percentList, seviceRatioList: state => state.consume.percentList,
consumeServiceInfo: state => state.consume.serviceInfo,
loading: state => state.loading, loading: state => state.loading,
}; };
...@@ -112,12 +117,16 @@ const actions = { ...@@ -112,12 +117,16 @@ const actions = {
}) })
.then(res => { .then(res => {
let list = res.data; let list = res.data;
if (list.percentList && list.percentList.length) {
commit(UPDATE_SERVICE_NAME, list.percentList[0].serviceName);
}
if (data && data.updatePercentList) { if (data && data.updatePercentList) {
commit(GET_PERCENT_DATA, list); commit(GET_PERCENT_DATA, list);
commit(GET_EUIPMENT_DATA, list); commit(GET_EUIPMENT_DATA, list);
commit(LOADING_SERVICE, false); commit(LOADING_SERVICE, false);
} else if (data && data.updateEuipmentList) { } else if (data && data.updateEuipmentList) {
commit(GET_EUIPMENT_DATA, list); commit(GET_EUIPMENT_DATA, list);
commit(UPDATE_SERVICE_NAME, data.serviceName);
commit(LOADING_EQUIPMENT, false); commit(LOADING_EQUIPMENT, false);
} else { } else {
if (entity && entity.choiceareaIds) { if (entity && entity.choiceareaIds) {
...@@ -217,6 +226,11 @@ const mutations = { ...@@ -217,6 +226,11 @@ const mutations = {
[GET_CAMPUS_DATA](state, name) { [GET_CAMPUS_DATA](state, name) {
state.consume.areaInfo = name; state.consume.areaInfo = name;
}, },
[UPDATE_SERVICE_NAME](state, name) {
state.consume.serviceInfo = {
serviceName: name,
};
},
[LOADING_AREA](state, fetching) { [LOADING_AREA](state, fetching) {
state.loading.area = fetching; state.loading.area = fetching;
state.loading.service = fetching; state.loading.service = fetching;
......
src/containers/Dashboard/Dashboard.vue
...@@ -6,8 +6,7 @@ ...@@ -6,8 +6,7 @@
<CustomerFeedback class="Dashboard-DataCard" /> <CustomerFeedback class="Dashboard-DataCard" />
</div> </div>
<div class="Dashboard-Row Dashboard-OperatorData"> <div class="Dashboard-Row Dashboard-OperatorData">
<CampusRank class="Dashboard-DataCard" /> <CampusCustomerData class="Dashboard-DataCard" />
<SeviceRatio class="Dashboard-DataCard" />
<EquipmentList class="Dashboard-DataCard" /> <EquipmentList class="Dashboard-DataCard" />
</div> </div>
<!-- <CustomerRegister class="Dashboard-Row Dashboard-DataCard" /> --> <!-- <CustomerRegister class="Dashboard-Row Dashboard-DataCard" /> -->
...@@ -18,11 +17,10 @@ ...@@ -18,11 +17,10 @@
<script> <script>
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
// import CustomerRegister from './CustomerRegister/CustomerRegister'; // import CustomerRegister from './CustomerRegister/CustomerRegister';
import SeviceRatio from './SeviceRatio/SeviceRatio';
import CampusRank from './CampusRank/CampusRank';
import EquipmentList from './EquipmentList/EquipmentList'; import EquipmentList from './EquipmentList/EquipmentList';
import CustomerFeedback from './CustomerFeedback/CustomerFeedback'; import CustomerFeedback from './CustomerFeedback/CustomerFeedback';
import CustomerData from './CustomerData/CustomerData'; import CustomerData from './CustomerData/CustomerData';
import CampusCustomerData from './CampusCustomerData/CampusCustomerData';
export default { export default {
name: 'Dashboard', name: 'Dashboard',
...@@ -30,9 +28,8 @@ export default { ...@@ -30,9 +28,8 @@ export default {
// CustomerRegister, // CustomerRegister,
CustomerData, CustomerData,
CustomerFeedback, CustomerFeedback,
SeviceRatio,
CampusRank,
EquipmentList, EquipmentList,
CampusCustomerData,
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
next(vm => { next(vm => {
...@@ -134,21 +131,8 @@ export default { ...@@ -134,21 +131,8 @@ export default {
flex: 1; flex: 1;
} }
} }
.Dashboard-title {
position: relative;
padding: 20px 0 12px;
margin: 0 20px;
}
.Dashboard-title::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 4px;
background-color: #4e82fb;
}
} }
.Dashboard-CampusData { .Dashboard-CampusData {
display: flex; display: flex;
padding: 0 15px; padding: 0 15px;
...@@ -192,9 +176,6 @@ export default { ...@@ -192,9 +176,6 @@ export default {
.Dashboard-title { .Dashboard-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 22px 10px 0;
padding-bottom: 20px;
border-bottom: 1px solid #f1f1f1;
.Dashboard-title-icon.service { .Dashboard-title-icon.service {
width: 28px; width: 28px;
height: 28px; height: 28px;
...@@ -216,16 +197,31 @@ export default { ...@@ -216,16 +197,31 @@ export default {
} }
.Dashboard-DataCard { .Dashboard-DataCard {
&:first-child { &:first-child {
flex: 2; flex: 3.5;
}
&:nth-child(2) {
flex: 1.5;
} }
&:last-child { &:last-child {
flex: 1.5; flex: 1.5;
} }
} }
} }
.Dashboard-OperatorData,
.Dashboard-CustomerData {
.Dashboard-title {
position: relative;
padding: 20px 0 12px;
margin: 0 20px;
}
.Dashboard-title::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 4px;
background-color: #4e82fb;
}
}
} }
@media screen and (max-width: $bigScreenWidth) { @media screen and (max-width: $bigScreenWidth) {
.Dashboard { .Dashboard {
......
src/containers/Dashboard/EquipmentList/EquipmentList.vue
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
<div class="Dashboard-title-icon equipment"> <div class="Dashboard-title-icon equipment">
<img src="@/assets/images/dashboard/icon_paiming@2x.png" /> <img src="@/assets/images/dashboard/icon_paiming@2x.png" />
</div> </div>
<div class="Dashboard-title-text">各设备消费排名</div> <div class="Dashboard-title-text">
<span class="serviceName">{{consumeServiceInfo.serviceName}}</span>设备消费排名
</div>
<el-radio-group v-model="showTopFive"> <el-radio-group v-model="showTopFive">
<el-radio-button :label="true">前五名</el-radio-button> <el-radio-button :label="true">前五名</el-radio-button>
<el-radio-button :label="false">后五名</el-radio-button> <el-radio-button :label="false">后五名</el-radio-button>
...@@ -35,6 +37,7 @@ export default { ...@@ -35,6 +37,7 @@ export default {
...mapGetters('Dashboard', [ ...mapGetters('Dashboard', [
'consumeHardVos', 'consumeHardVos',
'consumeAfterVos', 'consumeAfterVos',
'consumeServiceInfo',
'loading', 'loading',
]), ]),
}, },
...@@ -48,10 +51,17 @@ export default { ...@@ -48,10 +51,17 @@ export default {
@import '@/assets/styles/variables.scss'; @import '@/assets/styles/variables.scss';
.EquipmentList { .EquipmentList {
.Dashboard-title { .Dashboard-title {
border-bottom: 1px solid #f1f1f1;
&::before {
display: none;
}
.el-radio-button__inner { .el-radio-button__inner {
line-height: 0; line-height: 0;
padding: 12px 20px; padding: 12px 20px;
} }
.serviceName {
color: #f10000;
}
} }
} }
@media screen and (max-width: $bigScreenWidth) { @media screen and (max-width: $bigScreenWidth) {
......
src/containers/Dashboard/EquipmentList/EquipmentListChart.vue
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
> >
{{ item.equipmentPosition }} {{ item.equipmentPosition }}
</div> </div>
<div class="Dashboard-Equipment-money">￥{{ item.money.toFixed(2) }}</div> <div class="Dashboard-Equipment-money">{{ item.money.toFixed(2) }}元</div>
</div> </div>
</template> </template>
</div> </div>
......
src/containers/Dashboard/SeviceRatio/SeviceRatio.vue
<template> <template>
<div <div
class="Dashboard-DataCard" class="SeviceRatio"
v-loading="loading.service" v-loading="loading.service"
> >
<div class="Dashboard-title"> <div class="Dashboard-title">各服务消费占比</div>
<div class="Dashboard-title-icon service">
<img src="@/assets/images/dashboard/icon_zhanbi@2x.png" />
</div>
<div class="Dashboard-title-text">各服务消费占比</div>
<!-- <div class="Dashboard-title-top">TOP1</div> -->
</div>
<SeviceRatioChart <SeviceRatioChart
:data="seviceRatioList" :data="seviceRatioList"
:changeServiceHandle="changeServiceHandle" :changeServiceHandle="changeServiceHandle"
...@@ -32,6 +26,7 @@ export default { ...@@ -32,6 +26,7 @@ export default {
changeServiceHandle(data) { changeServiceHandle(data) {
this.fetchConsumeList({ this.fetchConsumeList({
serviceId: data.serviceId, serviceId: data.serviceId,
serviceName: data.serviceName,
updateEuipmentList: true, updateEuipmentList: true,
}); });
}, },
......
src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue
...@@ -32,13 +32,13 @@ export default { ...@@ -32,13 +32,13 @@ export default {
this.chart = new G2.Chart({ this.chart = new G2.Chart({
container: 'SeviceRatio', container: 'SeviceRatio',
forceFit: true, forceFit: true,
height: this.height, height: this.height - 30,
padding: [0, 130, 0, 0], padding: [0, 205, 0, 0],
}); });
this.chart.source(this.data); this.chart.source(this.data);
this.chart.coord('theta', { this.chart.coord('theta', {
radius: 0.75, radius: 0.9,
innerRadius: 0.6, innerRadius: 0.75,
}); });
this.chart.tooltip(false); this.chart.tooltip(false);
// 图例 // 图例
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
position: 'right-center', position: 'right-center',
marker: 'square', marker: 'square',
clickable: false, clickable: false,
offsetX: -10, offsetX: -2,
useHtml: true, useHtml: true,
containerTpl: ` containerTpl: `
<div class="g2-legend"> <div class="g2-legend">
...@@ -67,13 +67,13 @@ export default { ...@@ -67,13 +67,13 @@ export default {
class="g2-legend-marker" class="g2-legend-marker"
style="display:inline-block;margin-right:10px;background-color:${color};" style="display:inline-block;margin-right:10px;background-color:${color};"
></i> ></i>
<span class="g2-legend-text" title="${value}">${value}： </span> <span class="g2-legend-text" title="${value}">${value}:</span>
<span class="g2-legend-price">${price}</span> <span class="g2-legend-price">${price}</span>元
</li> </li>
`; `;
}, },
'g2-legend': { 'g2-legend': {
width: '140px', width: '200px',
// left: '-20px', // left: '-20px',
}, },
'g2-legend-list-item': { 'g2-legend-list-item': {
...@@ -96,7 +96,7 @@ export default { ...@@ -96,7 +96,7 @@ export default {
position: ['50%', '50%'], position: ['50%', '50%'],
html: `<div class="SeviceRatio-centerText"> html: `<div class="SeviceRatio-centerText">
<span class="SeviceRatio-percent">0.00</span>%<br> <span class="SeviceRatio-percent">0.00</span>%<br>
<span class="SeviceRatio-serviceName" ></span> <span class="SeviceRatio-serviceName"></span>
</div>`, </div>`,
alignX: 'middle', alignX: 'middle',
alignY: 'middle', alignY: 'middle',
...@@ -146,7 +146,7 @@ export default { ...@@ -146,7 +146,7 @@ export default {
#SeviceRatio { #SeviceRatio {
.g2-legend-text { .g2-legend-text {
display: inline-block; display: inline-block;
width: 46px; width: 90px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
......
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