Skip to content

D
dcxy-manage-shell
Commit c45f0a7d by 姜雷
Options

添加运营管理系统

parent b0b416ae
Showing with 478 additions and 73 deletions
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
......@@ -12,20 +13,19 @@
<script src="<%= VUE_APP_LIB_MANAGER %>/customerManage/lib/customerManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.umd.min.js"></script>
<link
rel="stylesheet"
href="<%= VUE_APP_LIB_MANAGER %><%= VUE_APP_LIB_BASE_URL %>lib/manageShell.css"
/>
<script src="<%= VUE_APP_LIB_MANAGER %>/operateManage/lib/operateManage.umd.min.js"></script>
<link rel="stylesheet" href="<%= VUE_APP_LIB_MANAGER %><%= VUE_APP_LIB_BASE_URL %>lib/manageShell.css" />
<title>系统管理</title>
</head>
<body>
</head>
<body>
<noscript>
<strong
>We're sorry but hello-world doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
<strong>We're sorry but hello-world doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</body>
</html>
src/App.vue
......@@ -74,7 +74,7 @@ export default {
selectedRoute: [],
routerDone: false,
isInnerPage: true,
showFastLink: false,
showFastLink: true,
showSelected: false,
};
},
......
src/api/base/index.js
......@@ -14,6 +14,12 @@ export const fetchAccessAreaList = req =>
method: 'get',
...req,
});
export const fetchDashboardAreaList = req =>
fetch({
url: path + '/dcxy/baseArea/findAccessArea',
method: 'POST',
...req,
});
//获取下拉列表
export const fetchSelectList = req =>
fetch({
......
src/components/input/AreaDashboard/AreaSelect.vue 0 → 100644
<template>
<el-select
clearable
filterable
:value="value"
@change="changeHandle"
:multiple="multiple"
>
<el-option
v-for="(item, index) in dashboardArea"
:key="index"
:value="item.id"
:label="item.areaName"
></el-option>
</el-select>
</template>
<script>
import areaMixin from './mixin.js';
export default {
name: 'dashboard-area-select',
props: {
size: String,
value: {
required: true,
},
multiple: {
type: Boolean,
default: false,
},
},
mixins: [areaMixin],
methods: {
changeHandle(val) {
if (val) {
this.$emit('input', val);
} else {
if (this.multiple) {
this.$emit('input', dashboardArea.map(item => item.id));
} else {
this.$emit('input', null);
}
}
},
},
};
</script>
src/components/input/AreaDashboard/areaStore.js 0 → 100644
import { fetchDashboardAreaList } from '@/api/base/index';
const GET_AREA_LIST = 'GET_AREA_LIST';
const FETCH_STATE = 'FETCH_STATE';
const FETCH_END = 'FETCH_END';
const state = () => ({
fetching: false,
list: [],
});
const initGetters = () => ({
dashboardArea: state => state.list,
});
const getters = initGetters();
const initAction = () => ({
fetchDashboardAreaList({ commit }, entity) {
return fetchDashboardAreaList({
data: entity,
}).then(res => {
console.log(res);
const list = res.data;
commit(GET_AREA_LIST, list);
});
},
});
const actions = initAction();
const mutations = {
[GET_AREA_LIST](state, list) {
state.list = list;
},
[FETCH_STATE](state) {
state.fetching = true;
},
[FETCH_END](state) {
state.fetching = false;
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};
src/components/input/AreaDashboard/index.js 0 → 100644
import AreaSelect from './AreaSelect';
import areaMixin from './mixin';
export { areaMixin };
export default AreaSelect;
src/components/input/AreaDashboard/mixin.js 0 → 100644
import { mapGetters, mapActions } from 'vuex';
import store from './store';
export default {
props: {
operateId: {
type: Number,
},
},
created() {
store.install(this.$store);
},
mounted() {
if (this.dashboardArea && !this.dashboardArea.length) {
this.fetchDashboardAreaList({
operateId: null,
});
}
},
watch: {
operateId(val) {
this.fetchDashboardAreaList({
operateId: val,
});
},
},
computed: {
...mapGetters('dashboardArea', ['dashboardArea']),
},
methods: {
...mapActions('dashboardArea', ['fetchDashboardAreaList']),
getAreaName(id) {
let item = this.dashboardArea.find(area => area.id === id);
if (item) {
return item.areaName;
} else {
return '';
}
},
getAreaOperatorInfo(id) {
let item = this.dashboardArea.find(area => area.id === id);
if (item) {
return {
rechargeOperateId: item.rechargeOperateId,
rechargeOperateName: item.rechargeOperateName,
};
} else {
return null;
}
},
},
};
src/components/input/AreaDashboard/store.js 0 → 100644
import areaStroe from './areaStore';
export default {
install(store) {
if (!store.state.base) {
store.registerModule(['base'], {
state: {},
});
}
if (!store.state.base.dashboardArea) {
store.registerModule(['base', 'dashboardArea'], areaStroe);
}
},
uninstall(store) {
store.unregisterModule(['base', 'dashboardArea']);
},
};
src/containers/Dashboard/CampusRank/CampusRank.vue
<template>
<div
class="Dashboard-DataCard"
class="Dashboard-DataCard CampusRank-wrap"
v-loading="loading.area"
>
<div class="Dashboard-SearchBar">
......@@ -8,7 +8,15 @@
<operator-select
:accessType="1"
:value="filters.operateId"
@input="val => changeFilterHandle({ operateId: val })"
@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})"
/>
</search-item>
<el-radio-group
......@@ -29,6 +37,10 @@
:label="2"
>本年</el-radio>
</el-radio-group>
<el-button
type="primary"
@click="fetchConsumeList"
>搜索</el-button>
</div>
<CampusRankChart
:data="campusRankList"
......@@ -77,9 +89,33 @@ export default {
this.showOther = false;
});
},
changeOperatorHandle(data) {
this.updateFilters({ ...data, choiceareaIds: [] });
// this.fetchConsumeList();
},
showOtherNameHandle() {
this.showOther = true;
},
},
};
</script>
<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;
}
}
}
</style>
src/containers/Dashboard/CustomerConsumption/CustomerConsumption.vue
<template>
<div
class="Dashboard-DataCard CustomerConsumption"
class="CustomerConsumption"
v-loading="loading"
>
<div class="Dashboard-SearchBar">
<!-- <div class="Dashboard-SearchBar">
<search-item label="运营商">
<operator-select
:accessType="1"
......@@ -36,7 +36,7 @@
:label="2"
>本年</el-radio>
</el-radio-group>
</div>
</div> -->
<div class="Dashboard-title">消费视图
<div
class="CustomerConsumptionChart-tip"
......
src/containers/Dashboard/CustomerConsumption/CustomerConsumptionStore.js
......@@ -31,6 +31,9 @@ const actions = {
getConsumeOrderList({ commit, getters, dispatch }, data) {
commit(FETCH_DATA, true);
if (data) {
if (data.operateId) {
data.areaId = undefined;
}
dispatch('updateFilters', data);
}
let entity = getFilters(getters.filters);
......
src/containers/Dashboard/CustomerData/CustomerData.vue 0 → 100644
<template>
<div class="Dashboard-CustomerMoneyData">
<div class="Dashboard-SearchBar bothSearch">
<search-item label="运营商">
<operator-select
:accessType="1"
:value="filters.operateId"
@input="val => fetchAllData({operateId: val})"
/>
</search-item>
<search-item label="区域">
<dashboard-area-select
:operateId="filters.operateId"
:value="filters.areaId"
@input="val => fetchAllData({areaId: val})"
/>
</search-item>
<el-radio-group
class="Dashboard-Radio"
:value="filters.timeType"
@input="val => fetchAllData({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="fetchAllData"
>搜索</el-button>
</div>
<div class="Dashboard-CustomerMoneyData-chart">
<CustomerRecharge />
<CustomerConsumption />
</div>
</div>
</template>
<script>
import CustomerRecharge from '../CustomerRecharge/CustomerRecharge';
import CustomerConsumption from '../CustomerConsumption/CustomerConsumption';
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'CustomerMoneyData',
components: {
CustomerRecharge,
CustomerConsumption,
},
computed: {
...mapGetters('Dashboard/customerConsumption', ['filters']),
},
methods: {
...mapActions('Dashboard/customerConsumption', ['getConsumeOrderList']),
...mapActions('Dashboard/customerRecharge', ['getRechargeOrderList']),
fetchAllData(entity) {
this.getConsumeOrderList(entity);
this.getRechargeOrderList(entity);
},
},
};
</script>
<style lang="scss">
.Dashboard-CustomerMoneyData {
.Dashboard & .Dashboard-SearchBar.bothSearch {
justify-content: flex-start;
align-items: center;
.Dashboard-Radio {
margin-left: 20px;
}
}
.Dashboard-CustomerMoneyData-chart {
display: flex;
width: 100%;
.CustomerRecharge {
flex: 1;
position: relative;
margin-right: 30px;
}
.CustomerRecharge::after {
content: '';
position: absolute;
height: 80%;
top: 10%;
right: -25px;
border-right: 1px dotted #eee;
}
.CustomerConsumption {
flex: 1;
}
}
}
</style>
src/containers/Dashboard/CustomerRecharge/CustomerRecharge.vue
<template>
<div
class="Dashboard-DataCard CustomerRecharge"
class="CustomerRecharge"
v-loading="loading"
>
<div class="Dashboard-SearchBar">
<!-- <div class="Dashboard-SearchBar">
<search-item label="运营商">
<operator-select
:accessType="1"
......@@ -29,7 +29,7 @@
:label="2"
>本年</el-radio>
</el-radio-group>
</div>
</div> -->
<div class="Dashboard-title">储值视图
<div class="CustomerRechargeChart-tip">
<span
......@@ -61,7 +61,6 @@ export default {
...mapGetters('Dashboard/customerRecharge', [
'rechargeList',
'rechargeCount',
'filters',
'loading',
]),
},
......
src/containers/Dashboard/CustomerRecharge/CustomerRechargeStore.js
......@@ -6,6 +6,7 @@ const FETCH_DATA = 'FETCH_DATA';
const initFilters = () => ({
operateId: undefined,
areaId: undefined,
timeType: 0, // 0 本日，1 本月， 2 本年
});
const filtersStore = initFiltersStore(initFilters);
......@@ -30,6 +31,9 @@ const actions = {
getRechargeOrderList({ commit, getters, dispatch }, data) {
commit(FETCH_DATA, true);
if (data) {
if (data.operateId) {
data.areaId = undefined;
}
dispatch('updateFilters', data);
}
let entity = getFilters(getters.filters);
......
src/containers/Dashboard/Dashboard.js
......@@ -22,6 +22,7 @@ const LOADING_REGIST = 'LOADING_REGIST';
const initFilters = () => ({
operateId: undefined,
choiceareaIds: [],
timeType: 0, // 0 本日，1 本月， 2 本年
});
const filtersStore = initFiltersStore(initFilters);
......@@ -68,13 +69,17 @@ const getters = {
areaInfo: state => state.consume.areaInfo,
consumeAfterVos: state => state.consume.consumeAfterVos,
consumeHardVos: state => state.consume.consumeHardVos,
campusRankList: state => state.consume.list,
campusRankList: state => {
return state.consume.list.filter(item => {
return state.filtersStore.filters.choiceareaIds.indexOf(item.areaId) > -1;
});
},
seviceRatioList: state => state.consume.percentList,
loading: state => state.loading,
};
const actions = {
fetchConsumeList({ commit, getters }, data) {
fetchConsumeList({ commit, getters, dispatch }, data) {
let entity = getFilters(getters.filters);
switch (entity.timeType) {
case 1:
......@@ -114,6 +119,19 @@ const actions = {
commit(GET_EUIPMENT_DATA, list);
commit(LOADING_EQUIPMENT, false);
} else {
console.log(list.list);
if (list.list && list.list.length > 5) {
let areaList = list.list.slice(0, 5);
dispatch('updateFilters', {
choiceareaIds: areaList.map(item => item.areaId),
});
} else if (list.list) {
dispatch('updateFilters', {
choiceareaIds: list.list.map(item => item.areaId),
});
}
commit(GET_CONSUME_DATA, list);
commit(LOADING_AREA, false);
}
......@@ -166,22 +184,7 @@ const mutations = {
state.consume.consumeAfterVos = data.consumeAfterVos
? data.consumeAfterVos
: [];
let campusList = data.list ? data.list : [];
if (campusList.length > 10) {
let arrStart = campusList.slice(0, 9);
let arrEnd = campusList.slice(9).reduce(
(item, curentVal) => ({
...item,
count: item.count + curentVal.count,
}),
{
areaName: '其他校区',
count: 0,
}
);
campusList = [...arrStart, arrEnd];
}
state.consume.list = campusList;
state.consume.list = data.list ? data.list : [];
state.consume.percentList = data.percentList ? data.percentList : [];
},
[GET_PERCENT_DATA]: (state, data) => {
......
src/containers/Dashboard/Dashboard.vue
......@@ -2,10 +2,7 @@
<div>
<div class="Dashboard">
<div class="Dashboard-Row Dashboard-CustomerData">
<div class="Dashboard-DataCard">
<CustomerRecharge />
<CustomerConsumption />
</div>
<CustomerData class="Dashboard-DataCard" />
<CustomerFeedback class="Dashboard-DataCard" />
</div>
<div class="Dashboard-Row Dashboard-OperatorData">
......@@ -20,20 +17,18 @@
<script>
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 CustomerRecharge from './CustomerRecharge/CustomerRecharge';
import CustomerConsumption from './CustomerConsumption/CustomerConsumption';
import CustomerFeedback from './CustomerFeedback/CustomerFeedback';
import CustomerData from './CustomerData/CustomerData';
export default {
name: 'Dashboard',
components: {
CustomerRegister,
CustomerRecharge,
CustomerConsumption,
// CustomerRegister,
CustomerData,
CustomerFeedback,
SeviceRatio,
CampusRank,
......@@ -106,7 +101,7 @@ export default {
justify-self: flex-end;
.Dashboard-Radio-item {
font-size: 12px;
margin: 0 5px 0 0;
margin: 0 10px 0 0;
.el-radio__label {
padding-left: 2px;
}
......@@ -127,10 +122,7 @@ export default {
}
.Dashboard-DataCard {
&:first-child {
flex: 2;
}
&:nth-child(2) {
flex: 2;
flex: 4;
}
&:last-child {
flex: 1;
......
src/containers/layout/Collect/Collect.vue
......@@ -22,10 +22,21 @@ export default {
},
computed: {
routeList() {
return this.collectList.map(item => {
if (
this.collectList &&
this.collectList.length &&
this.routers &&
this.routers.length
) {
let list = this.collectList.map(item => {
let name = item.menuId.toString();
return getCollectMenu(this.routers, name);
});
list = list.filter(item => !!item);
return list;
} else {
return [];
}
},
},
};
......
src/containers/layout/IconMenu/IconMenu.vue
......@@ -71,6 +71,8 @@
<MenuItem
:class="`fastLink ${dashboardVisiable?'marleft':''}`"
menuName="快速访问"
:menuList="collectRouteList"
:noTitle="true"
>
<img
slot="icon"
......@@ -98,7 +100,7 @@
<script>
import MenuItem from './components/MenuItem';
import { mapGetters } from 'vuex';
import { formatRouteLink } from '@/utils/route';
import { formatRouteLink, getFilterMenu } from '@/utils/route';
export default {
name: 'IconMenus',
......@@ -148,6 +150,7 @@ export default {
},
computed: {
...mapGetters('Dashboard', ['titleData']),
...mapGetters(['collectList']),
customerManage() {
let item = this.routers.find(
menu => menu.menuCode === process.env.VUE_APP_CUSTOMER_MENU_CODE
......@@ -172,6 +175,22 @@ export default {
);
return item ? true : false;
},
collectRouteList() {
if (
this.routers &&
this.routers.length &&
this.collectList &&
this.collectList.length
) {
let item = this.collectList.map(item => {
let id = item.menuId;
return getFilterMenu(this.routers, id);
});
return item ? formatRouteLink(item) : null;
} else {
return null;
}
},
},
methods: {
clickHandle() {
......
src/containers/layout/IconMenu/components/MenuItem.vue
......@@ -21,6 +21,24 @@
:style="style"
v-if="menuList && menuList.length"
>
<template v-if="noTitle">
<div class="Submenu">
<div class="Submenu-list">
<div
class="Submenu-link"
v-for="(item, index) in menuList"
:key="index"
>
<LikeIcon :name="item.name" />
<router-link
class="Submenu-link-text"
:to="item.path"
>{{item.meta.title}}</router-link>
</div>
</div>
</div>
</template>
<template v-else>
<div
class="Submenu"
......@@ -51,6 +69,8 @@
</div>
</div>
</div>
</template>
</div>
</div>
</template>
......@@ -73,6 +93,10 @@ export default {
selectRouteMenu: {
type: Function,
},
noTitle: {
type: Boolean,
default: false,
},
},
data() {
return {
......@@ -148,6 +172,7 @@ export default {
height: auto;
}
.Submenu-title {
width: 560px;
height: 30px;
line-height: 30px;
font-size: 14px;
......
src/containers/login/index.vue
......@@ -143,10 +143,18 @@ export default {
varifyCode: this.loginForm.vcode,
remenberAccount: this.remenberAccount,
})
.then(() => {
.then(userRoles => {
console.log('login done');
this.loading = false;
if (
userRoles.find(
item => item.menuCode === process.env.VUE_APP_DASHBOARD_CODE
)
) {
this.$router.push({ name: 'dashboard' });
} else {
this.$router.push({ path: '/' });
}
})
.catch(err => {
console.error(err);
......
src/dev-local/develop.html
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
......@@ -9,21 +10,22 @@
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.js"></script>
<title>系统管理</title>
</head>
<body>
</head>
<body>
<noscript>
<strong
>We're sorry but hello-world doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
<strong>We're sorry but hello-world doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="<%= VUE_APP_LIB_MANAGER %>/customerManage/lib/customerManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.umd.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=dd6103c90f2f17310a8711f2d330a0a6"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://unpkg.com/@antv/data-set"></script>
</body>
<script src="<%= VUE_APP_LIB_MANAGER %>/customerManage/lib/customerManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/baseManage/lib/baseManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/systemManage/lib/systemManage.umd.min.js"></script>
<script src="<%= VUE_APP_LIB_MANAGER %>/operateManage/lib/operateManage.umd.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=dd6103c90f2f17310a8711f2d330a0a6"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="https://unpkg.com/@antv/data-set"></script>
</html>
src/dev-local/develop.js
......@@ -7,6 +7,7 @@ setTimeout(() => {
...customerManage.default,
...baseManage.default,
...systemManage.default,
...operateManage.default,
];
System.createSystem({
......
src/lib/main.js
......@@ -49,7 +49,6 @@ class SystemShell {
...whiteList.split(','),
]
: process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白名单
console.log(allWhiteList);
store.dispatch('getWhiteList', allWhiteList);
configRoutePermission(router, store, routers, allWhiteList);
......
src/main.js
......@@ -2,6 +2,7 @@ let allAasyncRouterMap = [
...customerManage.default,
...baseManage.default,
...systemManage.default,
...operateManage.default,
];
const System = manageShell.default;
......
src/store/modules/user/index.js
......@@ -40,6 +40,7 @@ const actions = {
commit(SET_TOKEN, token);
commit(UPDATE_USERINFO, userInfo);
dispatch('getAsyncRoute', userRoles);
return userRoles;
});
},
// token登录
......
src/utils/extends.js
......@@ -15,6 +15,7 @@ import UserCard from '../components/UserCard/UserCard.vue';
import UserInfo from '../components/UserCard/UserInfo.vue';
import UserDialog from '../components/Dialog/UserDialogWrap';
import DashboardArea from '../components/input/AreaDashboard/index';
import AreaSelect from '../components/input/AreaSelect/index';
import ServiceTypeSelect from '../components/input/ServiceTypeSelect/index';
import BaseDataSelect from '../components/input/BaseDataSelect/index';
......@@ -38,6 +39,7 @@ const extendVue = Vue => {
Vue.component(HeaderImg.name, HeaderImg);
// input
Vue.component(DashboardArea.name, DashboardArea);
Vue.component(AreaSelect.name, AreaSelect);
Vue.component(BaseDataSelect.name, BaseDataSelect);
Vue.component(ServiceTypeSelect.name, ServiceTypeSelect);
......
src/utils/route.js
......@@ -82,3 +82,18 @@ export const getCollectMenu = (routeList, name) => {
}
return menuData;
};
export const getFilterMenu = (allRouterMap, id) => {
let menuData = null;
for (let index = 0; index < allRouterMap.length; index++) {
const element = allRouterMap[index];
if (element.childs && element.childs.length) {
menuData = getFilterMenu(element.childs, id);
if (menuData) break;
} else if (element.id === id) {
menuData = element;
break;
}
}
return menuData;
};
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