This commit is contained in:
parent
fefd70a01a
commit
28471a4fef
|
|
@ -120,3 +120,7 @@
|
|||
background-color: rgba(20, 38, 66, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.h100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -197,7 +197,6 @@ export default {
|
|||
},
|
||||
watch: {},
|
||||
mounted() {
|
||||
console.log(this.dropdownClassName);
|
||||
this.handleSearch()
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -295,7 +294,7 @@ export default {
|
|||
searchValues[formItem.key] = values[formItem.key]
|
||||
}
|
||||
}
|
||||
const {api, noPage, method, renderKey} = this.apiConf.listApi
|
||||
const {api, noPage, method, renderKey, after} = this.apiConf.listApi
|
||||
const {data} = await this[`$${method}`](api, {
|
||||
...searchValues,
|
||||
pageSize: this.page.pageSize,
|
||||
|
|
@ -303,12 +302,14 @@ export default {
|
|||
})
|
||||
if (noPage) {
|
||||
this.page = false
|
||||
this.cacheData = data
|
||||
this.tableDataSource = data
|
||||
this.cacheData = renderKey ? get(data, renderKey) : data
|
||||
this.tableDataSource = renderKey ? get(data, renderKey) : data
|
||||
after && after(data)
|
||||
} else {
|
||||
this.page.total = data.total || 0
|
||||
this.cacheData = renderKey ? get(data, renderKey) : data.items
|
||||
this.tableDataSource = renderKey ? get(data, renderKey) : data.items
|
||||
after && after(data)
|
||||
}
|
||||
},
|
||||
async handleOk() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<VueEcharts :options="options" autoresize style="width: 100%;height: 100%;"></VueEcharts>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echartsMixin from "@/mixins/echarts.mixin";
|
||||
export default {
|
||||
name: "Pie2",
|
||||
mixins: [echartsMixin],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
options () {
|
||||
return {
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: this.title,
|
||||
type: 'pie',
|
||||
radius: ['0%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
// roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 8
|
||||
},
|
||||
data: this.data
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -2,6 +2,10 @@ import {groupBy} from 'lodash'
|
|||
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
|
|
|
|||
205
mixins/https.js
205
mixins/https.js
|
|
@ -1,205 +0,0 @@
|
|||
import * as apis from '@/services/apis'
|
||||
import { orderBy } from 'lodash'
|
||||
import moment from "moment";
|
||||
import {generateUUID} from "ant-design-vue/lib/vc-select/util";
|
||||
|
||||
const colors = [
|
||||
'#00FEF6',
|
||||
'#FF9811',
|
||||
'#FF4D11',
|
||||
'#529a58',
|
||||
'#D58FFF',
|
||||
'#0395F6',
|
||||
'#d5b11e',
|
||||
'#03f634',
|
||||
'#d5391e',
|
||||
'#f6ce03'
|
||||
]
|
||||
export default {
|
||||
created() {
|
||||
this.getData()
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
this.timer = setInterval(() => {
|
||||
this.getData()
|
||||
}, 5000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
resourcesStatistics: {},
|
||||
studentGradStatistics: [],
|
||||
deviceStatistics: {},
|
||||
accessStatistics: {},
|
||||
classBrandStatistics: {},
|
||||
studentAttendanceStatistics: {},
|
||||
studentAttendanceStatisticsPie: [],
|
||||
leaveStatistics: [],
|
||||
gradeStatistics: [],
|
||||
gradeStatisticsData: [],
|
||||
accessInfo: [],
|
||||
studentSexStatistics: {
|
||||
men: {
|
||||
total: 0,
|
||||
percent: 0
|
||||
},
|
||||
women: {
|
||||
total: 0,
|
||||
percent: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.getResourcesStatistics()
|
||||
this.getStudentGradStatistics()
|
||||
this.getStudentSexStatistics()
|
||||
this.getDeviceStatistics()
|
||||
this.getAccessStatistics()
|
||||
this.getClassBrandStatistics()
|
||||
this.getAccessInfo()
|
||||
this.getStudentAttendanceStatistics()
|
||||
this.getGradeStatistics()
|
||||
this.getLeaveStatistics()
|
||||
},
|
||||
|
||||
getPercent (num, total) {
|
||||
if (num === 0) return 0
|
||||
if (total === 0) return 100
|
||||
return (num * 100 / total).toFixed(2)
|
||||
},
|
||||
// 获取教育资源
|
||||
async getResourcesStatistics () {
|
||||
const { data } = await apis.getResourcesStatistics()
|
||||
this.resourcesStatistics = data || {}
|
||||
},
|
||||
// 各年级学生分布信息
|
||||
async getStudentGradStatistics () {
|
||||
const {data} = await apis.getStudentGradStatistics()
|
||||
|
||||
this.studentGradStatistics = (data || []).map((item, index) => {
|
||||
return {
|
||||
attr: '年级分布',
|
||||
name: `${item.gradeIndex}年级`,
|
||||
value: item.studentNumber,
|
||||
color: colors[index]
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
// 性别分布
|
||||
async getStudentSexStatistics () {
|
||||
const { data } = await apis.getStudentSexStatistics()
|
||||
const total = (data || []).reduce((a, b) => a + b.studentNumber || 0, 0)
|
||||
const men = (data || []).filter(item => `${item.studentSex}` === '1').reduce((a, b) => a + b.studentNumber || 0, 0)
|
||||
const women = (data || []).filter(item => `${item.studentSex}` === '2').reduce((a, b) => a + b.studentNumber || 0, 0)
|
||||
this.studentSexStatistics = {
|
||||
men: {
|
||||
total: men,
|
||||
percent: this.getPercent(men, total)
|
||||
},
|
||||
women: {
|
||||
total: women,
|
||||
percent: this.getPercent(women, total)
|
||||
}
|
||||
}
|
||||
},
|
||||
// 电子班牌概况
|
||||
async getDeviceStatistics () {
|
||||
const { data } = await apis.getDeviceStatistics()
|
||||
this.deviceStatistics = data || {}
|
||||
},
|
||||
// 门禁出入人数
|
||||
async getAccessStatistics () {
|
||||
const { data } = await apis.getAccessStatistics()
|
||||
this.accessStatistics = data || {}
|
||||
},
|
||||
|
||||
async getClassBrandStatistics () {
|
||||
const { data } = await apis.getClassBrandStatistics()
|
||||
this.classBrandStatistics = data || {}
|
||||
},
|
||||
|
||||
|
||||
async getAccessInfo () {
|
||||
const { data } = await apis.getAccessInfo()
|
||||
this.accessInfo = (data || []).map(item => ({
|
||||
...item,
|
||||
uuid: generateUUID()
|
||||
}))
|
||||
},
|
||||
|
||||
async getStudentAttendanceStatistics () {
|
||||
const { data } = await apis.getStudentAttendanceStatistics()
|
||||
const _data = data || {}
|
||||
this.studentAttendanceStatistics =_data
|
||||
this.studentAttendanceStatisticsPie = [
|
||||
{
|
||||
attr: '考勤',
|
||||
name: '出勤',
|
||||
value: _data.studentAttendanceNumber || 0,
|
||||
color: colors[0]
|
||||
},
|
||||
{
|
||||
attr: '考勤',
|
||||
name: '迟到',
|
||||
value: _data.studentAttendanceLaterNumber || 0,
|
||||
color: colors[1]
|
||||
},
|
||||
{
|
||||
attr: '考勤',
|
||||
name: '缺勤',
|
||||
value: _data.studentAttendanceLossNumber || 0,
|
||||
color: colors[2]
|
||||
},
|
||||
{
|
||||
attr: '考勤',
|
||||
name: '请假',
|
||||
value: _data.studentAttendanceLeaveNumber || 0,
|
||||
color: colors[3]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
async getGradeStatistics () {
|
||||
const { data } = await apis.getGradeStatistics()
|
||||
this.gradeStatisticsData = data || []
|
||||
this.getGradeStatisticsPieData()
|
||||
},
|
||||
getGradeStatisticsPieData () {
|
||||
const item = this.gradeStatisticsData.find(item => `${item && item.gradeIndex}` === `${this.cls}`) || {}
|
||||
this.gradeStatistics = orderBy((item.classStatisticsList || []).map((item, index) => ({
|
||||
attr: '班级',
|
||||
name: `${item.className }`,
|
||||
value: item.studentNumber || 0,
|
||||
color: colors[index]
|
||||
})), ['name'], ['asc'])
|
||||
},
|
||||
|
||||
async getLeaveStatistics () {
|
||||
const { data } = await apis.getLeaveStatistics()
|
||||
this.leaveStatistics = (data || []).map(item => {
|
||||
return [
|
||||
{
|
||||
attr: '事假',
|
||||
name: moment(item.leaveDate).format('MM/DD'),
|
||||
value: item.businessLeavee || 0
|
||||
},
|
||||
{
|
||||
attr: '病假',
|
||||
name: moment(item.leaveDate).format('MM/DD'),
|
||||
value: item.sickLeaveNumber || 0
|
||||
}
|
||||
]
|
||||
}).flat(Infinity)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,31 +3,44 @@
|
|||
<flex-col>
|
||||
<system-title show-back/>
|
||||
<ModuleContent padding="0px 20px 20px">
|
||||
<web2-title>清洁运输+趋势</web2-title>
|
||||
<Split height="16"/>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<ModuleContent2 :border="false" padding="0">
|
||||
<web3-title>运输车辆占比</web3-title>
|
||||
<web3-title>运输量占比</web3-title>
|
||||
</ModuleContent2>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<CustomTable
|
||||
hide-action
|
||||
hide-button
|
||||
:columns="columns"
|
||||
:api-conf="apiConf"
|
||||
:form-items="formItems"
|
||||
>
|
||||
<template slot="search-button" slot-scope="{ search }">
|
||||
<a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
|
||||
<Split height="10"></Split>
|
||||
</template>
|
||||
</CustomTable>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<FlexCol>
|
||||
|
||||
<web2-title>清洁运输+趋势</web2-title>
|
||||
<Split height="16"/>
|
||||
<ModuleContent2 :border="false" padding="0">
|
||||
<a-row :gutter="16" class="h100">
|
||||
<a-col :span="6" class="h100">
|
||||
<ModuleContent2 :border="false" padding="0">
|
||||
<FlexCol>
|
||||
<web3-title>运输车辆占比</web3-title>
|
||||
<ModuleContent2 :border="false" padding="0" height="43%">
|
||||
<Pie2 :data="cheliangData" title="运输车辆"></Pie2>
|
||||
</ModuleContent2>
|
||||
<web3-title>运输量占比</web3-title>
|
||||
<ModuleContent2 :border="false" padding="0">
|
||||
<Pie2 :data="yunshuliangData" title="运输量"></Pie2>
|
||||
</ModuleContent2>
|
||||
</FlexCol>
|
||||
|
||||
</ModuleContent2>
|
||||
</a-col>
|
||||
<a-col :span="18" class="h100">
|
||||
<CustomTable
|
||||
hide-action
|
||||
hide-button
|
||||
:columns="columns"
|
||||
:api-conf="apiConf"
|
||||
:form-items="formItems"
|
||||
>
|
||||
<template slot="search-button" slot-scope="{ search }">
|
||||
<a-button type="primary" @click="exportList(search)" style="margin-left: 10px;">导出</a-button>
|
||||
<Split height="10"></Split>
|
||||
</template>
|
||||
</CustomTable>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</ModuleContent2>
|
||||
</FlexCol>
|
||||
</ModuleContent>
|
||||
</flex-col>
|
||||
</new-bg>
|
||||
|
|
@ -36,16 +49,17 @@
|
|||
<script>
|
||||
import Curd from "../../components/smallCommon/Curd.vue";
|
||||
import moment from 'moment'
|
||||
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
|
||||
import NewBg from "../../components/NewBg.vue";
|
||||
import FlexCol from "../../components/FlexCol.vue";
|
||||
import ModuleContent from "../../components/ModuleContent.vue";
|
||||
import CustomTable from "../../components/smallCommon/CustomTable.vue";
|
||||
import Split from "../../components/smallCommon/Split.vue";
|
||||
import Web2Title from "../../components/smallCommon/Web2Title.vue";
|
||||
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
|
||||
import CustomDesc2 from "../../components/smallCommon/CusDesc2.vue";
|
||||
import Web3Title from "../../components/smallCommon/Web3Title.vue";
|
||||
import SystemTitle from "@/components/smallCommon/SystemTitle.vue";
|
||||
import NewBg from "@/components/NewBg.vue";
|
||||
import FlexCol from "@/components/FlexCol.vue";
|
||||
import ModuleContent from "@/components/ModuleContent.vue";
|
||||
import CustomTable from "@/components/smallCommon/CustomTable.vue";
|
||||
import Split from "@/components/smallCommon/Split.vue";
|
||||
import Web2Title from "@/components/smallCommon/Web2Title.vue";
|
||||
import ModuleContent2 from "@/components/smallCommon/ModuleContent2.vue";
|
||||
import CustomDesc2 from "@/components/smallCommon/CusDesc2.vue";
|
||||
import Web3Title from "@/components/smallCommon/Web3Title.vue";
|
||||
import Pie2 from "@/components/smallCommon/Pie2.vue";
|
||||
|
||||
export default {
|
||||
name: "user",
|
||||
|
|
@ -56,10 +70,14 @@ export default {
|
|||
Split,
|
||||
CustomTable,
|
||||
ModuleContent, FlexCol, NewBg, SystemTitle,
|
||||
Curd
|
||||
Curd,
|
||||
Pie2
|
||||
},
|
||||
data() {
|
||||
const self = this
|
||||
return {
|
||||
cheliangData: [],
|
||||
yunshuliangData: [],
|
||||
yunshuzongliang: 0,
|
||||
isEdit: false,
|
||||
roles: [],
|
||||
|
|
@ -86,7 +104,21 @@ export default {
|
|||
}
|
||||
],
|
||||
apiConf: {
|
||||
listApi: {api: '/api/Transport/gettransport', method: 'get', renderKey: 'item.cleans'},
|
||||
listApi: {api: '/api/Transport/gettransport', method: 'get', renderKey: 'item.cleans', after (data) {
|
||||
self.cheliangData = [
|
||||
{ name: '国五', value: data.item.v5Percent },
|
||||
{ name: '国六', value: data.item.v6Percent },
|
||||
{ name: '电动', value: data.item.electricPrecent },
|
||||
{ name: '其他', value: data.item.otherPrecent },
|
||||
]
|
||||
|
||||
self.yunshuliangData = [
|
||||
{ name: '国五', value: data.item.v5WeightPercent },
|
||||
{ name: '国六', value: data.item.v6WeightPercent },
|
||||
{ name: '电动', value: data.item.electricWeightPrecent },
|
||||
{ name: '其他', value: data.item.otherWeightPrecent },
|
||||
]
|
||||
}},
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -115,9 +147,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
getyunshuzongliang() {
|
||||
/*this.$get('/api/Transport/count').then(({ data }) => {
|
||||
this.yunshuzongliang = data
|
||||
})*/
|
||||
|
||||
},
|
||||
editHandler(isEdit) {
|
||||
this.isEdit = isEdit
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { message } from 'ant-design-vue';
|
|||
const service = axios.create({
|
||||
baseURL: '', // 所有异步请求都加上/api,nginx转发到后端Springboot
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000 // request timeout
|
||||
timeout: 50000 // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
|
|
|
|||
Loading…
Reference in New Issue