一日流程评估echart和刷新组件

ruoyi-ui/src/views/benyi/dayflowassessmentpjf/index.vue

@@ -71,7 +71,7 @@
       @pagination="getList"
     />
     <div class="chart-wrapper">
-      <line-chart />
+      <line-chart :queryParams="queryParams" v-if="isRouterAlive" />
     </div>
   </div>
 </template>
@@ -82,12 +82,14 @@ import { listDayflowassessmentPjf } from "@/api/benyi/dayflowassessment";
 import { listClass } from "@/api/system/class";
 
 export default {
-  name: "Dayflowassessment",
+  name: "DayflowassessmentClassAvg",
   components: {
     LineChart,
   },
   data() {
     return {
+      //是否重新加载组件
+      isRouterAlive: true,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -166,6 +168,8 @@ export default {
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
+      this.isRouterAlive = false;
+      this.$nextTick(() => (this.isRouterAlive = true));
     },
     /** 重置按钮操作 */
     resetQuery() {

ruoyi-ui/src/views/benyi/dayflowassessmentteacherpjf/index.vue

@@ -48,12 +48,7 @@
     </el-form>
 
     <el-table v-loading="loading" border :data="dayflowassessmentList">
-      <el-table-column
+      <el-table-column label="评估对象" align="center" prop="pgdxxm" fixed />
-        label="评估对象"
-        align="center"
-        prop="pgdxxm"
-        fixed
-      />
       <el-table-column label="最终得分" align="center" prop="bjpjf" />
       <el-table-column label="早间接待" align="center" prop="zjjdpjf" />
       <el-table-column label="用餐" align="center" prop="ycpjf" />
@@ -83,21 +78,28 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <div class="chart-wrapper">
+      <line-chart :queryParams="queryParams" v-if="isRouterAlive" />
+    </div>
   </div>
 </template>
 
 <script>
-import {
+import LineChart from "../../dashboard/LineChartTeacherDayFlowAvg";
-  listDayflowassessmentTeacherAvg,
+import { listDayflowassessmentTeacherAvg } from "@/api/benyi/dayflowassessment";
-} from "@/api/benyi/dayflowassessment";
 import { listClass } from "@/api/system/class";
 import { listUser } from "@/api/system/user";
 import { listDetail, getDetail } from "@/api/benyi/dayflow/dayflowmanger";
 
 export default {
-  name: "Dayflowassessment",
+  name: "DayflowassessmentTeacherDayFlowAvg",
+  components: {
+    LineChart,
+  },
   data() {
     return {
+      isRouterAlive: true,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -158,7 +160,9 @@ export default {
     /** 查询幼儿园一日流程评估列表 */
     getList() {
       this.loading = true;
-      listDayflowassessmentTeacherAvg(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+      listDayflowassessmentTeacherAvg(
+        this.addDateRange(this.queryParams, this.dateRange)
+      ).then((response) => {
         this.dayflowassessmentList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -192,6 +196,8 @@ export default {
     handleQuery() {
       this.queryParams.pageNum = 1;
       this.getList();
+      this.isRouterAlive = false;
+      this.$nextTick(() => (this.isRouterAlive = true));
     },
     /** 重置按钮操作 */
     resetQuery() {

ruoyi-ui/src/views/dashboard/LineChartBjyrlcpjpjf.vue

@@ -6,7 +6,6 @@
 import echarts from "echarts";
 require("echarts/theme/macarons"); // echarts theme
 import resize from "./mixins/resize";
-import { listClass } from "@/api/system/class";
 import { listDayflowassessmentPjf } from "@/api/benyi/dayflowassessment";
 
 export default {
@@ -24,6 +23,7 @@ export default {
       type: String,
       default: "350px",
     },
+    queryParams: {},
     autoResize: {
       type: Boolean,
       default: true,
@@ -38,7 +38,6 @@ export default {
       chart: null,
       classOptions: null,
       expectedData: null,
-      actualData: null,
     };
   },
   watch: {
@@ -65,18 +64,15 @@ export default {
     /** 查询班级信息列表 */
     async getClassList() {
       await listDayflowassessmentPjf(this.queryParams).then((response) => {
-        console.log(response.rows);
+        //console.log(response.rows);
         var items = [];
         var childcounts = [];
-        var childcheckincounts = [];
         response.rows.forEach((element) => {
           items.push(element.byClass.bjmc);
           childcounts.push(element.bjpjf);
-          childcheckincounts.push(element.childcheckincount);
         });
         this.classOptions = items;
         this.expectedData = childcounts;
-        this.actualData = childcheckincounts;
         // console.log(this.classOptions);
       });
       this.initChart();
@@ -88,7 +84,7 @@ export default {
     setOptions() {
       this.chart.setOption({
         title: {
-          text: "一日流程评估班级平均分", 
+          text: "一日流程评估班级平均分",
         },
         xAxis: {
           data: this.classOptions,
@@ -121,7 +117,7 @@ export default {
         },
         series: [
           {
-            name: "幼儿总数",
+            name: "班级平均分",
             itemStyle: {
               normal: {
                 color: "#FF005A",
@@ -137,26 +133,6 @@ export default {
             animationDuration: 2800,
             animationEasing: "cubicInOut",
           },
-          {
-            name: "幼儿出勤人数",
-            smooth: true,
-            type: "line",
-            itemStyle: {
-              normal: {
-                color: "#3888fa",
-                lineStyle: {
-                  color: "#3888fa",
-                  width: 2,
-                },
-                areaStyle: {
-                  color: "#f3f8ff",
-                },
-              },
-            },
-            data: this.actualData,
-            animationDuration: 2800,
-            animationEasing: "quadraticOut",
-          },
         ],
       });
     },

ruoyi-ui/src/views/dashboard/LineChartTeacherDayFlowAvg.vue

@@ -0,0 +1,143 @@
+<template>
+  <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 { listDayflowassessmentTeacherAvg } from "@/api/benyi/dayflowassessment";
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    queryParams: {},
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    // chartData: {
+    //   type: Object,
+    //   required: true,
+    // },
+  },
+  data() {
+    return {
+      chart: null,
+      classOptions: null,
+      expectedData: null,
+    };
+  },
+  watch: {
+    // chartData: {
+    //   deep: true,
+    //   handler(val) {
+    //     this.setOptions(val);
+    //   },
+    // },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getClassList();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    /** 查询班级信息列表 */
+    async getClassList() {
+      await listDayflowassessmentTeacherAvg(this.queryParams).then(
+        (response) => {
+          console.log(this.queryParams);
+          var items = [];
+          var childcounts = [];
+          response.rows.forEach((element) => {
+            items.push(element.pgdxxm);
+            childcounts.push(element.bjpjf);
+          });
+          this.classOptions = items;
+          this.expectedData = childcounts;
+          // console.log(this.classOptions);
+        }
+      );
+      this.initChart();
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions();
+    },
+    setOptions() {
+      this.chart.setOption({
+        title: {
+          text: "一日流程评估教师平均分",
+        },
+        xAxis: {
+          data: this.classOptions,
+          boundaryGap: false,
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+          },
+          padding: [5, 10],
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+        },
+        legend: {
+          data: this.classOptions,
+        },
+        series: [
+          {
+            name: "教师平均分",
+            itemStyle: {
+              normal: {
+                color: "#FF005A",
+                lineStyle: {
+                  color: "#FF005A",
+                  width: 2,
+                },
+              },
+            },
+            smooth: true,
+            type: "line",
+            data: this.expectedData,
+            animationDuration: 2800,
+            animationEasing: "cubicInOut",
+          },
+        ],
+      });
+    },
+  },
+};
+</script>