首页考勤统计

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'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
-import resize from './mixins/resize'
+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: {
+    // chartData: {
-      type: Object,
+    //   type: Object,
-      required: true
+    //   required: true,
-    }
+    // },
   },
   data() {
     return {
-      chart: null
+      chart: null,
-    }
+      classOptions: null,
+      expectedData: null,
+      actualData: null,
+    };
   },
   watch: {
-    chartData: {
+    // chartData: {
-      deep: true,
+    //   deep: true,
-      handler(val) {
+    //   handler(val) {
-        this.setOptions(val)
+    //     this.setOptions(val);
-      }
+    //   },
-    }
+    // },
   },
   mounted() {
     this.$nextTick(() => {
-      this.initChart()
+      this.getClassList();
-    })
+    });
   },
   beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
+    this.chart.dispose();
-    this.chart = null
+    this.chart = null;
   },
   methods: {
-    initChart() {
+    /** 查询班级信息列表 */
-      this.chart = echarts.init(this.$el, 'macarons')
+    async getClassList() {
-      this.setOptions(this.chartData)
+      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: [{
+        series: [
-          name: 'expected', itemStyle: {
+          {
-            normal: {
+            name: "幼儿总数",
-              color: '#FF005A',
+            itemStyle: {
-              lineStyle: {
+              normal: {
-                color: '#FF005A',
+                color: "#FF005A",
-                width: 2
+                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
               },
-              areaStyle: {
+            },
-                color: '#f3f8ff'
+            smooth: true,
-              }
+            type: "line",
-            }
+            data: this.expectedData,
+            animationDuration: 2800,
+            animationEasing: "cubicInOut",
           },
-          data: actualData,
+          {
-          animationDuration: 2800,
+            name: "幼儿出勤人数",
-          animationEasing: 'quadraticOut'
+            smooth: true,
-        }]
+            type: "line",
-      })
+            itemStyle: {
-    }
+              normal: {
-  }
+                color: "#3888fa",
-}
+                lineStyle: {
+                  color: "#3888fa",
+                  width: 2,
+                },
+                areaStyle: {
+                  color: "#f3f8ff",
+                },
+              },
+            },
+            data: this.actualData,
+            animationDuration: 2800,
+            animationEasing: "quadraticOut",
+          },
+        ],
+      });
+    },
+  },
+};
 </script>

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;

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://localhost:8083`,
-        target: `http://120.53.14.147:9990/`,
+        //target: `http://120.53.14.147:9990/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''

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())

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:
                 # 从数据源开关/默认关闭

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>