From 473e269e65afe27735b4de7a17fa1faf3fc0070a Mon Sep 17 00:00:00 2001
From: zhanglipeng <chinazhanglipeng@qq.com>
Date: Sun, 25 Apr 2021 11:02:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=80=E6=97=A5=E6=B5=81=E7=A8=8B=E8=AF=84?=
 =?UTF-8?q?=E4=BC=B0echart=E5=92=8C=E5=88=B7=E6=96=B0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../benyi/dayflowassessmentpjf/index.vue      |   8 +-
 .../dayflowassessmentteacherpjf/index.vue     |  28 ++--
 .../views/dashboard/LineChartBjyrlcpjpjf.vue  |  32 +---
 .../dashboard/LineChartTeacherDayFlowAvg.vue  | 143 ++++++++++++++++++
 4 files changed, 170 insertions(+), 41 deletions(-)
 create mode 100644 ruoyi-ui/src/views/dashboard/LineChartTeacherDayFlowAvg.vue

diff --git a/ruoyi-ui/src/views/benyi/dayflowassessmentpjf/index.vue b/ruoyi-ui/src/views/benyi/dayflowassessmentpjf/index.vue
index 139ddebc9..1052ee229 100644
--- a/ruoyi-ui/src/views/benyi/dayflowassessmentpjf/index.vue
+++ b/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() {
diff --git a/ruoyi-ui/src/views/benyi/dayflowassessmentteacherpjf/index.vue b/ruoyi-ui/src/views/benyi/dayflowassessmentteacherpjf/index.vue
index 7fcacde16..ba05e0bf1 100644
--- a/ruoyi-ui/src/views/benyi/dayflowassessmentteacherpjf/index.vue
+++ b/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
-        label="评估对象"
-        align="center"
-        prop="pgdxxm"
-        fixed
-      />
+      <el-table-column 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 {
-  listDayflowassessmentTeacherAvg,
-} from "@/api/benyi/dayflowassessment";
+import LineChart from "../../dashboard/LineChartTeacherDayFlowAvg";
+import { listDayflowassessmentTeacherAvg } 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() {
diff --git a/ruoyi-ui/src/views/dashboard/LineChartBjyrlcpjpjf.vue b/ruoyi-ui/src/views/dashboard/LineChartBjyrlcpjpjf.vue
index 750f34860..696d7090e 100644
--- a/ruoyi-ui/src/views/dashboard/LineChartBjyrlcpjpjf.vue
+++ b/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",
-          },
         ],
       });
     },
diff --git a/ruoyi-ui/src/views/dashboard/LineChartTeacherDayFlowAvg.vue b/ruoyi-ui/src/views/dashboard/LineChartTeacherDayFlowAvg.vue
new file mode 100644
index 000000000..05c00b922
--- /dev/null
+++ b/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>