Skip to content

D
dcxy-system
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>
<div
class="Dashboard-DataCard CampusRank-wrap"
class="CampusRank-wrap"
v-loading="loading.area"
>
<div class="Dashboard-SearchBar">
<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>
<div class="Dashboard-title">各区域消费占比</div>
<CampusRankChart
:data="campusRankListFillAreaname"
:changeCampusHandle="changeCampusHandle"
......@@ -120,21 +79,6 @@ export default {
<style lang="scss">
.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 {
margin-right: 5px;
}
......
src/containers/Dashboard/CampusRank/CampusRankChart.vue
......@@ -37,8 +37,8 @@ export default {
this.chart = new G2.Chart({
container: 'CampusRank',
forceFit: true,
height: this.height,
padding: [20, 230, 20, 0],
height: this.height - 30,
padding: [20, 249, 20, 0],
});
this.chart.source(this.data);
this.chart.coord('theta', {
......@@ -51,7 +51,7 @@ export default {
position: 'right-center',
marker: 'square',
clickable: false,
offsetX: -4,
offsetX: 2,
useHtml: true,
containerTpl: `
<div class="g2-legend">
......@@ -73,14 +73,14 @@ export default {
style="display:inline-block;margin-right:10px;background-color:${color};"
></i>
<span class="g2-legend-text" title="${value}">${value}： </span>
<span class="g2-legend-price">${price}</span>
<span class="g2-legend-price">${price}</span>元
</li>
`;
},
'g2-legend': {
width: '230px',
'max-width': '230px',
'max-height': this.height + 'px',
width: '244px',
'max-width': '244px',
'max-height': this.height - 30 + 'px',
right: 0,
},
'g2-legend-list-item': {
......
src/containers/Dashboard/Dashboard.js
......@@ -16,6 +16,7 @@ const GET_TITLE_DATA = 'GET_TITLE_DATA';
const GET_PERCENT_DATA = 'GET_PERCENT_DATA';
const GET_EUIPMENT_DATA = 'GET_EUIPMENT_DATA';
const GET_CAMPUS_DATA = 'GET_CAMPUS_DATA';
const UPDATE_SERVICE_NAME = 'UPDATE_SERVICE_NAME';
const LOADING_AREA = 'LOADING_AREA';
const LOADING_SERVICE = 'LOADING_SERVICE';
const LOADING_EQUIPMENT = 'LOADING_EQUIPMENT';
......@@ -41,6 +42,9 @@ const state = () => ({
areaName: '',
areaId: undefined,
},
serviceInfo: {
serviceName: '',
},
consumeAfterVos: [],
consumeHardVos: [],
list: [],
......@@ -76,6 +80,7 @@ const getters = {
});
},
seviceRatioList: state => state.consume.percentList,
consumeServiceInfo: state => state.consume.serviceInfo,
loading: state => state.loading,
};
......@@ -112,12 +117,16 @@ const actions = {
})
.then(res => {
let list = res.data;
if (list.percentList && list.percentList.length) {
commit(UPDATE_SERVICE_NAME, list.percentList[0].serviceName);
}
if (data && data.updatePercentList) {
commit(GET_PERCENT_DATA, list);
commit(GET_EUIPMENT_DATA, list);
commit(LOADING_SERVICE, false);
} else if (data && data.updateEuipmentList) {
commit(GET_EUIPMENT_DATA, list);
commit(UPDATE_SERVICE_NAME, data.serviceName);
commit(LOADING_EQUIPMENT, false);
} else {
if (entity && entity.choiceareaIds) {
......@@ -217,6 +226,11 @@ const mutations = {
[GET_CAMPUS_DATA](state, name) {
state.consume.areaInfo = name;
},
[UPDATE_SERVICE_NAME](state, name) {
state.consume.serviceInfo = {
serviceName: name,
};
},
[LOADING_AREA](state, fetching) {
state.loading.area = fetching;
state.loading.service = fetching;
......
src/containers/Dashboard/Dashboard.vue
......@@ -6,8 +6,7 @@
<CustomerFeedback class="Dashboard-DataCard" />
</div>
<div class="Dashboard-Row Dashboard-OperatorData">
<CampusRank class="Dashboard-DataCard" />
<SeviceRatio class="Dashboard-DataCard" />
<CampusCustomerData class="Dashboard-DataCard" />
<EquipmentList class="Dashboard-DataCard" />
</div>
<!-- <CustomerRegister class="Dashboard-Row Dashboard-DataCard" /> -->
......@@ -18,11 +17,10 @@
<script>
import { mapActions, mapGetters } from 'vuex';
// import CustomerRegister from './CustomerRegister/CustomerRegister';
import SeviceRatio from './SeviceRatio/SeviceRatio';
import CampusRank from './CampusRank/CampusRank';
import EquipmentList from './EquipmentList/EquipmentList';
import CustomerFeedback from './CustomerFeedback/CustomerFeedback';
import CustomerData from './CustomerData/CustomerData';
import CampusCustomerData from './CampusCustomerData/CampusCustomerData';
export default {
name: 'Dashboard',
......@@ -30,9 +28,8 @@ export default {
// CustomerRegister,
CustomerData,
CustomerFeedback,
SeviceRatio,
CampusRank,
EquipmentList,
CampusCustomerData,
},
beforeRouteEnter(to, from, next) {
next(vm => {
......@@ -134,21 +131,8 @@ export default {
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 {
display: flex;
padding: 0 15px;
......@@ -192,9 +176,6 @@ export default {
.Dashboard-title {
display: flex;
align-items: center;
margin: 22px 10px 0;
padding-bottom: 20px;
border-bottom: 1px solid #f1f1f1;
.Dashboard-title-icon.service {
width: 28px;
height: 28px;
......@@ -216,16 +197,31 @@ export default {
}
.Dashboard-DataCard {
&:first-child {
flex: 2;
}
&:nth-child(2) {
flex: 1.5;
flex: 3.5;
}
&:last-child {
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) {
.Dashboard {
......
src/containers/Dashboard/EquipmentList/EquipmentList.vue
......@@ -7,7 +7,9 @@
<div class="Dashboard-title-icon equipment">
<img src="@/assets/images/dashboard/icon_paiming@2x.png" />
</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-button :label="true">前五名</el-radio-button>
<el-radio-button :label="false">后五名</el-radio-button>
......@@ -35,6 +37,7 @@ export default {
...mapGetters('Dashboard', [
'consumeHardVos',
'consumeAfterVos',
'consumeServiceInfo',
'loading',
]),
},
......@@ -48,10 +51,17 @@ export default {
@import '@/assets/styles/variables.scss';
.EquipmentList {
.Dashboard-title {
border-bottom: 1px solid #f1f1f1;
&::before {
display: none;
}
.el-radio-button__inner {
line-height: 0;
padding: 12px 20px;
}
.serviceName {
color: #f10000;
}
}
}
@media screen and (max-width: $bigScreenWidth) {
......
src/containers/Dashboard/EquipmentList/EquipmentListChart.vue
......@@ -46,7 +46,7 @@
>
{{ item.equipmentPosition }}
</div>
<div class="Dashboard-Equipment-money">￥{{ item.money.toFixed(2) }}</div>
<div class="Dashboard-Equipment-money">{{ item.money.toFixed(2) }}元</div>
</div>
</template>
</div>
......
src/containers/Dashboard/SeviceRatio/SeviceRatio.vue
<template>
<div
class="Dashboard-DataCard"
class="SeviceRatio"
v-loading="loading.service"
>
<div class="Dashboard-title">
<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>
<div class="Dashboard-title">各服务消费占比</div>
<SeviceRatioChart
:data="seviceRatioList"
:changeServiceHandle="changeServiceHandle"
......@@ -32,6 +26,7 @@ export default {
changeServiceHandle(data) {
this.fetchConsumeList({
serviceId: data.serviceId,
serviceName: data.serviceName,
updateEuipmentList: true,
});
},
......
src/containers/Dashboard/SeviceRatio/SeviceRatioChart.vue
......@@ -32,13 +32,13 @@ export default {
this.chart = new G2.Chart({
container: 'SeviceRatio',
forceFit: true,
height: this.height,
padding: [0, 130, 0, 0],
height: this.height - 30,
padding: [0, 205, 0, 0],
});
this.chart.source(this.data);
this.chart.coord('theta', {
radius: 0.75,
innerRadius: 0.6,
radius: 0.9,
innerRadius: 0.75,
});
this.chart.tooltip(false);
// 图例
......@@ -46,7 +46,7 @@ export default {
position: 'right-center',
marker: 'square',
clickable: false,
offsetX: -10,
offsetX: -2,
useHtml: true,
containerTpl: `
<div class="g2-legend">
......@@ -67,13 +67,13 @@ export default {
class="g2-legend-marker"
style="display:inline-block;margin-right:10px;background-color:${color};"
></i>
<span class="g2-legend-text" title="${value}">${value}： </span>
<span class="g2-legend-price">${price}</span>
<span class="g2-legend-text" title="${value}">${value}:</span>
<span class="g2-legend-price">${price}</span>元
</li>
`;
},
'g2-legend': {
width: '140px',
width: '200px',
// left: '-20px',
},
'g2-legend-list-item': {
......@@ -96,7 +96,7 @@ export default {
position: ['50%', '50%'],
html: `<div class="SeviceRatio-centerText">
<span class="SeviceRatio-percent">0.00</span>%<br>
<span class="SeviceRatio-serviceName" ></span>
<span class="SeviceRatio-serviceName"></span>
</div>`,
alignX: 'middle',
alignY: 'middle',
......@@ -146,7 +146,7 @@ export default {
#SeviceRatio {
.g2-legend-text {
display: inline-block;
width: 46px;
width: 90px;
overflow: hidden;
text-overflow: ellipsis;
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