This commit is contained in:
parent
fefd70a01a
commit
28471a4fef
|
|
@ -120,3 +120,7 @@
|
||||||
background-color: rgba(20, 38, 66, 0.3);
|
background-color: rgba(20, 38, 66, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -197,7 +197,6 @@ export default {
|
||||||
},
|
},
|
||||||
watch: {},
|
watch: {},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log(this.dropdownClassName);
|
|
||||||
this.handleSearch()
|
this.handleSearch()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -295,7 +294,7 @@ export default {
|
||||||
searchValues[formItem.key] = values[formItem.key]
|
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, {
|
const {data} = await this[`$${method}`](api, {
|
||||||
...searchValues,
|
...searchValues,
|
||||||
pageSize: this.page.pageSize,
|
pageSize: this.page.pageSize,
|
||||||
|
|
@ -303,12 +302,14 @@ export default {
|
||||||
})
|
})
|
||||||
if (noPage) {
|
if (noPage) {
|
||||||
this.page = false
|
this.page = false
|
||||||
this.cacheData = data
|
this.cacheData = renderKey ? get(data, renderKey) : data
|
||||||
this.tableDataSource = data
|
this.tableDataSource = renderKey ? get(data, renderKey) : data
|
||||||
|
after && after(data)
|
||||||
} else {
|
} else {
|
||||||
this.page.total = data.total || 0
|
this.page.total = data.total || 0
|
||||||
this.cacheData = renderKey ? get(data, renderKey) : data.items
|
this.cacheData = renderKey ? get(data, renderKey) : data.items
|
||||||
this.tableDataSource = renderKey ? get(data, renderKey) : data.items
|
this.tableDataSource = renderKey ? get(data, renderKey) : data.items
|
||||||
|
after && after(data)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async handleOk() {
|
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 {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
data: {
|
data: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => []
|
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>
|
<flex-col>
|
||||||
<system-title show-back/>
|
<system-title show-back/>
|
||||||
<ModuleContent padding="0px 20px 20px">
|
<ModuleContent padding="0px 20px 20px">
|
||||||
<web2-title>清洁运输+趋势</web2-title>
|
<FlexCol>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<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>
|
</ModuleContent>
|
||||||
</flex-col>
|
</flex-col>
|
||||||
</new-bg>
|
</new-bg>
|
||||||
|
|
@ -36,16 +49,17 @@
|
||||||
<script>
|
<script>
|
||||||
import Curd from "../../components/smallCommon/Curd.vue";
|
import Curd from "../../components/smallCommon/Curd.vue";
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import SystemTitle from "../../components/smallCommon/SystemTitle.vue";
|
import SystemTitle from "@/components/smallCommon/SystemTitle.vue";
|
||||||
import NewBg from "../../components/NewBg.vue";
|
import NewBg from "@/components/NewBg.vue";
|
||||||
import FlexCol from "../../components/FlexCol.vue";
|
import FlexCol from "@/components/FlexCol.vue";
|
||||||
import ModuleContent from "../../components/ModuleContent.vue";
|
import ModuleContent from "@/components/ModuleContent.vue";
|
||||||
import CustomTable from "../../components/smallCommon/CustomTable.vue";
|
import CustomTable from "@/components/smallCommon/CustomTable.vue";
|
||||||
import Split from "../../components/smallCommon/Split.vue";
|
import Split from "@/components/smallCommon/Split.vue";
|
||||||
import Web2Title from "../../components/smallCommon/Web2Title.vue";
|
import Web2Title from "@/components/smallCommon/Web2Title.vue";
|
||||||
import ModuleContent2 from "../../components/smallCommon/ModuleContent2.vue";
|
import ModuleContent2 from "@/components/smallCommon/ModuleContent2.vue";
|
||||||
import CustomDesc2 from "../../components/smallCommon/CusDesc2.vue";
|
import CustomDesc2 from "@/components/smallCommon/CusDesc2.vue";
|
||||||
import Web3Title from "../../components/smallCommon/Web3Title.vue";
|
import Web3Title from "@/components/smallCommon/Web3Title.vue";
|
||||||
|
import Pie2 from "@/components/smallCommon/Pie2.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "user",
|
name: "user",
|
||||||
|
|
@ -56,10 +70,14 @@ export default {
|
||||||
Split,
|
Split,
|
||||||
CustomTable,
|
CustomTable,
|
||||||
ModuleContent, FlexCol, NewBg, SystemTitle,
|
ModuleContent, FlexCol, NewBg, SystemTitle,
|
||||||
Curd
|
Curd,
|
||||||
|
Pie2
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
const self = this
|
||||||
return {
|
return {
|
||||||
|
cheliangData: [],
|
||||||
|
yunshuliangData: [],
|
||||||
yunshuzongliang: 0,
|
yunshuzongliang: 0,
|
||||||
isEdit: false,
|
isEdit: false,
|
||||||
roles: [],
|
roles: [],
|
||||||
|
|
@ -86,7 +104,21 @@ export default {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
apiConf: {
|
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: {
|
methods: {
|
||||||
getyunshuzongliang() {
|
getyunshuzongliang() {
|
||||||
/*this.$get('/api/Transport/count').then(({ data }) => {
|
|
||||||
this.yunshuzongliang = data
|
|
||||||
})*/
|
|
||||||
},
|
},
|
||||||
editHandler(isEdit) {
|
editHandler(isEdit) {
|
||||||
this.isEdit = isEdit
|
this.isEdit = isEdit
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { message } from 'ant-design-vue';
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
baseURL: '', // 所有异步请求都加上/api,nginx转发到后端Springboot
|
baseURL: '', // 所有异步请求都加上/api,nginx转发到后端Springboot
|
||||||
withCredentials: true, // send cookies when cross-domain requests
|
withCredentials: true, // send cookies when cross-domain requests
|
||||||
timeout: 5000 // request timeout
|
timeout: 50000 // request timeout
|
||||||
})
|
})
|
||||||
|
|
||||||
// request interceptor
|
// request interceptor
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue