Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

首页考勤统计

Browse Source
This commit is contained in:
zhanglipeng 2020-11-30 10:08:11 +08:00
parent f11278bce2
commit 3ebc280a25
6 changed files with 152 additions and 85 deletions
ruoyi-ui
src/views
dashboard
LineChart.vue
index.vue
vue.config.js
ruoyi/src/main
java/com/ruoyi/project/system/domain
ByClass.java
resources
application-druid.yml
mybatis/system
ByClassMapper.xml

180
ruoyi-ui/src/views/dashboard/LineChart.vue

@ -1,135 +1,161 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { listClass } from "@/api/system/class";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
default: "chart",
},
width: {
type: String,
default: '100%'
default: "100%",
},
height: {
type: String,
default: '350px'
default: "350px",
},
autoResize: {
type: Boolean,
default: true
default: true,
},
chartData: {
type: Object,
required: true
}
// chartData: {
// type: Object,
// required: true,
// },
},
data() {
return {
chart: null
}
chart: null,
classOptions: null,
expectedData: null,
actualData: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
// chartData: {
// deep: true,
// handler(val) {
// this.setOptions(val);
// },
// },
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
this.getClassList();
});
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.setOptions(this.chartData)
/** 查询班级信息列表 */
async getClassList() {
await listClass(this.queryParams).then((response) => {
// console.log(response.rows);
var items = [];
var childcounts = [];
var childcheckincounts = [];
response.rows.forEach((element) => {
items.push(element.bjmc);
childcounts.push(element.childcount);
childcheckincounts.push(element.childcheckincount);
});
this.classOptions = items;
this.expectedData = childcounts;
this.actualData = childcheckincounts;
// console.log(this.classOptions);
});
this.initChart();
},
setOptions({ expectedData, actualData } = {}) {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions();
},
setOptions() {
this.chart.setOption({
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: this.classOptions,
boundaryGap: false,
axisTick: {
show: false
}
show: false,
},
},
grid: {
left: 10,
right: 10,
bottom: 20,
top: 30,
containLabel: true
containLabel: true,
},
tooltip: {
trigger: 'axis',
trigger: "axis",
axisPointer: {
type: 'cross'
type: "cross",
},
padding: [5, 10]
padding: [5, 10],
},
yAxis: {
axisTick: {
show: false
}
show: false,
},
},
legend: {
data: ['expected', 'actual']
data: ["幼儿总数", "幼儿出勤人数"],
},
series: [{
name: 'expected', itemStyle: {
normal: {
color: '#FF005A',
lineStyle: {
color: '#FF005A',
width: 2
}
}
},
smooth: true,
type: 'line',
data: expectedData,
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: 'actual',
smooth: true,
type: 'line',
itemStyle: {
normal: {
color: '#3888fa',
lineStyle: {
color: '#3888fa',
width: 2
series: [
{
name: "幼儿总数",
itemStyle: {
normal: {
color: "#FF005A",
lineStyle: {
color: "#FF005A",
width: 2,
},
},
areaStyle: {
color: '#f3f8ff'
}
}
},
smooth: true,
type: "line",
data: this.expectedData,
animationDuration: 2800,
animationEasing: "cubicInOut",
},
data: actualData,
animationDuration: 2800,
animationEasing: 'quadraticOut'
}]
})
}
}
}
{
name: "幼儿出勤人数",
smooth: true,
type: "line",
itemStyle: {
normal: {
color: "#3888fa",
lineStyle: {
color: "#3888fa",
width: 2,
},
areaStyle: {
color: "#f3f8ff",
},
},
},
data: this.actualData,
animationDuration: 2800,
animationEasing: "quadraticOut",
},
],
});
},
},
};
</script>

22
ruoyi-ui/src/views/index.vue

@ -13,11 +13,16 @@
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart/>
<bar-chart />
</div>
</el-col>
</el-row>
<el-row :gutter="32">
<el-row :gutter="30">
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper">
<line-chart />
</div>
</el-col>
<!-- <el-calendar v-model="value" id="calendar">-->
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<!--<template slot="dateCell" slot-scope="{date, data}">-->
@ -49,6 +54,7 @@
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import LineChart from "./dashboard/LineChart";
//import { getSchoolCalendars } from "@/api/benyi/schoolcalendar";
//备用进行班级园历显示操作import { getSchoolCalendarsClass } from "@/api/benyi/schoolcalendarclass";
@ -58,14 +64,16 @@ export default {
components: {
RaddarChart,
PieChart,
BarChart
BarChart,
LineChart,
},
data() {
return {
calendarData: [],
value: new Date(),
// 查询参数
queryParams: {}
queryParams: {},
// lineChartData: lineChartData.newVisitis,
};
},
created() {
@ -78,7 +86,10 @@ export default {
// this.calendarData = response.calendarData;
// });
// }
}
// handleSetLineChartData(type) {
// this.lineChartData = lineChartData[type];
// },
},
};
</script>
@ -88,7 +99,6 @@ export default {
background-color: rgb(240, 242, 245);
position: relative;
.el-card.is-always-shadow {
box-shadow: none;
border: 0;

4
ruoyi-ui/vue.config.js

@ -33,8 +33,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:8083`,
target: `http://120.53.14.147:9990/`,
target: `http://localhost:8083`,
//target: `http://120.53.14.147:9990/`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''

24
ruoyi/src/main/java/com/ruoyi/project/system/domain/ByClass.java

@ -110,6 +110,12 @@ public class ByClass extends BaseEntity {
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date createtime;
/***
* 幼儿总数
*/
private Long childcount;
private Long childcheckincount;
public String getMonth() {
return month;
}
@ -529,6 +535,22 @@ public class ByClass extends BaseEntity {
return createtime;
}
public Long getChildcount() {
return childcount;
}
public void setChildcount(Long childcount) {
this.childcount = childcount;
}
public Long getChildcheckincount() {
return childcheckincount;
}
public void setChildcheckincount(Long childcheckincount) {
this.childcheckincount = childcheckincount;
}
@Override
public String toString() {
return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
@ -548,6 +570,8 @@ public class ByClass extends BaseEntity {
.append("zljsxm", getZljsxm())
.append("isdel", getIsdel())
.append("createtime", getCreatetime())
.append("childcount", getChildcount())
.append("childcheckincount", getChildcheckincount())
.append("month", getMonth())
.append("day1", getDay1())
.append("day2", getDay2())

3
ruoyi/src/main/resources/application-druid.yml

@ -9,6 +9,9 @@ spring:
url: jdbc:mysql://120.53.14.147:3306/benyi-vue-dev?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
username: root
password: tsbz2020!
# url: jdbc:mysql://192.144.133.123:3306/benyi-vue?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
# username: root
# password: msd5Ysql$%123
# 从库数据源
slave:
# 从数据源开关/默认关闭

4
ruoyi/src/main/resources/mybatis/system/ByClassMapper.xml

@ -19,6 +19,8 @@
<result property="pbjsxm" column="pbjsxm"/>
<result property="zljs" column="zljs"/>
<result property="zljsxm" column="zljsxm"/>
<result property="childcount" column="childcount"/>
<result property="childcheckincount" column="childcheckincount"/>
<result property="isdel" column="isdel"/>
<result property="createtime" column="createtime"/>
<result property="month" column="month"/>
@ -61,6 +63,8 @@
zbjs, (select nick_name from sys_user where sys_user.user_id=zbjs) zbjsxm,
pbjs, (select nick_name from sys_user where sys_user.user_id=pbjs) pbjsxm,
zljs, (select nick_name from sys_user where sys_user.user_id=zljs) zljsxm,
(select count(*) from by_child WHERE by_child.classid=d.bjbh) childcount,
(select count(*) from by_child_checkin_detail WHERE by_child_checkin_detail.classid=d.bjbh and type='01' and date_format(by_child_checkin_detail.create_time,'%Y-%m-%d')=date_format(sysdate(),'%Y-%m-%d')) childcheckincount,
isdel, createtime from by_class d
</sql>