更新8d处理和管理

src/views/modules/managementCenter/components/line-chart.vue

@@ -23,6 +23,10 @@ export default {
         return [];
       },
     },
+    eType: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -81,12 +85,11 @@ export default {
       this.dataList.forEach((item) => {
         const i = option.series.findIndex((c) => c.id === item.productTypeId);
         if (i >= 0) {
-          option.series[i].data.push(item.productTypeNumber);
+          option.series[i].data.push(this.eType?item.problemTypeNumber:item.productTypeNumber);
         } else {
-          console.log(item.productTypeName)
           const obj = {
-            name: item.productTypeName,
-            id: item.productTypeId,
+            name: this.eType?item.problemTypeName:item.productTypeName,
+            id: this.eType?item.problemTypeId:item.productTypeId,
             type: "bar",
             stack: "total",
             label: {
@@ -97,7 +100,7 @@ export default {
             },
             data: [],
           };
-          obj.data.push(item.productTypeNumber);
+          obj.data.push(this.eType?item.problemTypeNumber:item.productTypeNumber);
           option.series.push(obj);
         }
       })

src/views/modules/managementCenter/components/pie-chart.vue

@@ -23,6 +23,10 @@ export default {
         return [];
       },
     },
+    eType: {
+      type: Number,
+      default: 0
+    }
   },
   data() {
     return {
@@ -62,8 +66,8 @@ export default {
             radius: "50%",
             data: this.dataList?.map((item) => {
               const obj = {
-                value: item.productTypeNumber,
-                name: item.productTypeName,
+                value: this.eType?item.problemTypeNumber:item.productTypeNumber,
+                name: this.eType?item.problemTypeName:item.productTypeName,
               };
               return obj;
             }),

src/views/modules/managementCenter/problemTypeDistribution.vue

@@ -0,0 +1,194 @@
+<!--
+ * @Author: zwq
+ * @Date: 2023-07-03 15:21:14
+ * @LastEditors: zwq
+ * @LastEditTime: 2023-07-14 14:10:48
+ * @Description: 
+-->
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+      <div class="mod-sys__user">
+        <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
+        <div style="height:20px;width:100%"></div>
+        <el-row :gutter="4" style="margin-top:20px">
+          <el-col :span="12" v-if="pieVisible">
+            <pie-chart
+              v-loading="pieLoading"
+              element-loading-text="拼命加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(0, 0, 0, 0.8)"
+              ref="pieRef"
+              :e-type="1"
+              :title="'问题类型分布图'"
+              :data-list="pieData"
+            ></pie-chart>
+          </el-col>
+          <el-col :span="12" v-else>
+            <el-empty description="无数据"></el-empty>
+          </el-col>
+          <el-col :span="12" v-if="lineVisible">
+            <line-chart
+              v-loading="lineLoading"
+              element-loading-text="拼命加载中"
+              element-loading-spinner="el-icon-loading"
+              element-loading-background="rgba(0, 0, 0, 0.8)"
+              ref="lineRef"
+              :e-type="1"
+              :title="'问题类型月份分布图'"
+              :data-list="lineData"
+            ></line-chart>
+          </el-col>
+          <el-col :span="12" v-else>
+            <el-empty description="无数据"></el-empty>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </template>
+  
+  <script>
+  import pieChart from "./components/pie-chart";
+  import lineChart from "./components/line-chart";
+  import basicPage from "@/mixins/basic-page";
+  
+  export default {
+    mixins: [basicPage],
+    data() {
+      return {
+        urlOptions: {
+          pieURL: "/code/startEightDiscipline/problem/type/distribution",
+          lineURL: "/code/startEightDiscipline/problem/type/month/distribution",
+        },
+        pieLoading: false,
+        pieVisible: false,
+        lineLoading: false,
+        lineVisible: false,
+        listQuery: {
+          limit: 999,
+          page: 1,
+          total: 1,
+        },
+        formConfig: [
+          {
+            type: "datePicker",
+            label: "日期",
+            dateType: "daterange",
+            format: "yyyy-MM-dd",
+            valueFormat: "yyyy-MM-ddTHH:mm:ss",
+            rangeSeparator: "-",
+            startPlaceholder: "开始时间",
+            endPlaceholder: "结束时间",
+            param: "time",
+          },
+          {
+            type: "select",
+            label: "8D类型",
+            selectOptions: [
+              { id: 1, name: "客诉问题" },
+              { id: 2, name: "重大质量问题" },
+              { id: 0, name: "重复发生问题" },
+            ],
+            param: "eightDisciplineType",
+            defaultSelect: "",
+          },
+          {
+            type: "button",
+            btnName: "搜索",
+            name: "search",
+            color: "primary",
+          },
+        ],
+        pieData: [],
+        lineData: [],
+      };
+    },
+    components: {
+      pieChart,
+      lineChart,
+    },
+    methods: {
+      // 获取数据列表
+      getDataList() {
+        this.dataListLoading = true;
+        this.$http
+          .post(this.urlOptions.pieURL, this.listQuery)
+          .then(({ data: res }) => {
+            this.dataListLoading = false;
+            if (res.code !== 0) {
+              this.pieData = [];
+              this.pieLoading = false;
+              return this.$message.error(res.msg);
+            }
+            this.pieLoading = false;
+            this.pieData = res.data;
+            if (this.pieData.length > 0) {
+              this.pieVisible = true;
+              this.$nextTick(() => {
+                this.$refs.pieRef.initChartLine();
+              });
+            } else {
+              this.pieVisible = false;
+              this.$message({
+                message: "没有发现数据",
+                type: "warning",
+              });
+            }
+          })
+          .catch(() => {});
+        this.$http
+          .post(this.urlOptions.lineURL, this.listQuery)
+          .then(({ data: res }) => {
+            this.dataListLoading = false;
+            if (res.code !== 0) {
+              this.lineData = [];
+              this.lineLoading = false;
+              return this.$message.error(res.msg);
+            }
+            this.lineLoading = false;
+            this.lineData = res.data;
+            if (this.lineData.length > 0) {
+              this.lineVisible = true;
+              this.$nextTick(() => {
+                this.$refs.lineRef.initChartLine();
+              });
+            } else {
+              this.lineVisible = false;
+              this.$message({
+                message: "没有发现数据",
+                type: "warning",
+              });
+            }
+          })
+          .catch(() => {});
+      },
+      //search-bar点击
+      buttonClick(val) {
+        switch (val.btnName) {
+          case "search":
+            this.listQuery.page = 1;
+            this.listQuery.eightDisciplineType = val.eightDisciplineType;
+            this.listQuery.startTime = val.time && val.time.length > 0 ? val.time[0] : "";
+            this.listQuery.endTime = val.time && val.time.length > 0 ? val.time[1] : "";
+            this.getDataList();
+            break;
+          default:
+            console.log(val);
+        }
+      },
+    },
+  };
+  </script>
+  <style lang="scss">
+  .mod-sys__user {
+    > .el-row {
+          display:flex;
+          flex-wrap: wrap; 
+      .el-col {
+      }
+    }
+    .chart-box {
+      min-height: 400px;
+    }
+  }
+  </style>
+