质检首页 不良占比数据对接

src/api/main/index.js

@@ -41,7 +41,7 @@ export async function queryProductionLine () {
   return Promise.reject(new Error(res.data.message));
 }
 
-// 产线数据
+// 不良占比
 export async function queryProportionDefectiveTypes () {
   const res = await request.post(`/qms/quality_work_order/queryProportionDefectiveTypes`);
   if (res.data.code == 0) {

src/views/home/index.vue

@@ -106,202 +106,214 @@
   </div>
 </template>
 <script>
-import {
-  queryHomePage,
-  queryFactory,
-  queryTeam,
-  queryProductionLine,
-  queryProportionDefectiveTypes
-} from '@/api/main';
-import dictMixins from '@/mixins/dictMixins';
-import {
-  userList,
-  unacceptedProduct,
-  lineOption,
-  preOption,
-  barOption
-} from './data';
-import { use } from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import { BarChart, PieChart, LineChart } from 'echarts/charts';
-import {
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
-} from 'echarts/components';
-import EleChart from 'ele-admin/packages/ele-chart';
+  import {
+    queryHomePage,
+    queryFactory,
+    queryTeam,
+    queryProductionLine,
+    queryProportionDefectiveTypes
+  } from '@/api/main';
+  import dictMixins from '@/mixins/dictMixins';
+  import {
+    userList,
+    unacceptedProduct,
+    lineOption,
+    preOption,
+    barOption
+  } from './data';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { BarChart, PieChart, LineChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent
+  } from 'echarts/components';
+  import EleChart from 'ele-admin/packages/ele-chart';
 
-import VChart from 'vue-echarts';
-import { echartsMixin } from '@/utils/echarts-mixin';
-// 按需加载 echarts
-use([
-  CanvasRenderer,
-  BarChart,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  LineChart
-]);
-export default {
-  mixins: [
-    dictMixins,
-    echartsMixin(['pieRef1', 'pieRef2', 'pieRef3', 'pieRef4', 'lineRef'])
-  ],
-  components: { VChart },
-  data() {
-    return {
-      teamQualifiedOption: {},
-      factoryQualifiedOption: {},
-      lineQualifiedOption: {},
-      preOption: {},
-      barOption: {},
-      lineOption: {},
-      form: {
-        finishTime: '',
-        timeType: '1'
-      }
-    };
-  },
-  computed: {
-    userList: () => userList,
-    unacceptedProduct: () => unacceptedProduct
-  },
-
-  mounted() {
-    this.queryHomePage();
-    this.queryFactory();
-    this.queryTeam();
-    this.queryProductionLine();
-    this.preOption = preOption([
-      { value: 40, name: '  外观检测' },
-      { value: 30, name: '  尺寸检测' },
-      { value: 15, name: '  性能检测' },
-      { value: 10, name: '  密度检测' },
-      { value: 5, name: '  重量检测' }
-    ]);
-    setTimeout(() => {
-      this.$refs.pieRef1.resize();
-      this.$refs.pieRef2.resize();
-      this.$refs.pieRef3.resize();
-      this.$refs.pieRef4.resize();
-      this.$refs.lineRef.resize();
-    }, 300);
-  },
-  methods: {
-    timeTypeChange() {
-      this.queryHomePage();
+  import VChart from 'vue-echarts';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  // 按需加载 echarts
+  use([
+    CanvasRenderer,
+    BarChart,
+    PieChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    LineChart
+  ]);
+  export default {
+    mixins: [
+      dictMixins,
+      echartsMixin(['pieRef1', 'pieRef2', 'pieRef3', 'pieRef4', 'lineRef'])
+    ],
+    components: { VChart },
+    data() {
+      return {
+        teamQualifiedOption: {},
+        factoryQualifiedOption: {},
+        lineQualifiedOption: {},
+        preOption: {},
+        barOption: {},
+        lineOption: {},
+        form: {
+          finishTime: '',
+          timeType: '1'
+        }
+      };
     },
-    async queryFactory() {
-      const data = await queryFactory();
-      this.factoryQualifiedOption = preOption(
-        data.map((item) => {
-          return { value: item.qualificationRate, name: item.factoryName };
-        }),
-        '70%',
-        false,
-        'inside'
-      );
+    computed: {
+      userList: () => userList,
+      unacceptedProduct: () => unacceptedProduct
     },
-    async queryTeam() {
-      const data = await queryTeam();
-      this.teamQualifiedOption = barOption(
-        data.map((item) => {
-          return { value: item.qualificationRate, name: item.teamName };
-        })
-      );
+
+    mounted() {
+      this.queryHomePage();
+      this.queryFactory();
+      this.queryTeam();
+      this.queryProductionLine();
+      this.proportion();
+      // this.preOption = preOption([
+      //   { value: 40, name: '  外观检测' },
+      //   { value: 30, name: '  尺寸检测' },
+      //   { value: 15, name: '  性能检测' },
+      //   { value: 10, name: '  密度检测' },
+      //   { value: 5, name: '  重量检测' }
+      // ]);
+      setTimeout(() => {
+        this.$refs.pieRef1.resize();
+        this.$refs.pieRef2.resize();
+        this.$refs.pieRef3.resize();
+        this.$refs.pieRef4.resize();
+        this.$refs.lineRef.resize();
+      }, 300);
     },
-    async queryProductionLine() {
-      // const data = await queryProductionLine();
-      const data = await queryProportionDefectiveTypes();
-      console.log(data,'data data 33')
-      this.lineQualifiedOption = barOption(
-        data.map((item) => {
+    methods: {
+      timeTypeChange() {
+        this.queryHomePage();
+      },
+      async queryFactory() {
+        const data = await queryFactory();
+        console.log(data, 'data ===');
+        this.factoryQualifiedOption = preOption(
+          data.map((item) => {
+            return { value: item.qualificationRate, name: item.factoryName };
+          }),
+          '70%',
+          false,
+          'inside'
+        );
+        console.log(this.factoryQualifiedOption,'0000000000000000')
+      },
+      async proportion() {
+        const res = await queryProportionDefectiveTypes();
+        let list = res.map((el) => {
           return {
-            value: item.unQualifiedNumber,
-            name: item.categoryLevelClassName
+            value: el.unQualifiedNumber,
+            name: el.categoryLevelClassName
           };
-        }),
-        {
-          normal: {
-            barBorderRadius: 30,
-            color: EleChart.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: '#00feff'
-              },
-              {
-                offset: 0.5,
-                color: '#027eff'
-              },
-              {
-                offset: 1,
-                color: '#0286ff'
-              }
-            ])
+        });
+        this.preOption = preOption(list);
+        console.log(res, 'res ----');
+      },
+      async queryTeam() {
+        const data = await queryTeam();
+        this.teamQualifiedOption = barOption(
+          data.map((item) => {
+            return { value: item.qualificationRate, name: item.teamName };
+          })
+        );
+      },
+      async queryProductionLine() {
+        const data = await queryProductionLine();
+        console.log(data,'data +++++')
+        this.lineQualifiedOption = barOption(
+          data.map((item) => {
+            return {
+              value: item.qualificationRate,
+              name: item.productionLineName
+            };
+          }),
+          {
+            normal: {
+              barBorderRadius: 30,
+              color: EleChart.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#00feff'
+                },
+                {
+                  offset: 0.5,
+                  color: '#027eff'
+                },
+                {
+                  offset: 1,
+                  color: '#0286ff'
+                }
+              ])
+            }
           }
+        );
+      },
+      async queryHomePage() {
+        const data = await queryHomePage(this.form);
+        let values = [];
+        for (let key in data) {
+          values.push(data[key]);
         }
-      );
-    },
-    async queryHomePage() {
-      const data = await queryHomePage(this.form);
-      let values = [];
-      for (let key in data) {
-        values.push(data[key]);
+        this.lineOption = lineOption(
+          values.map((item) => {
+            return {
+              name: item.productName,
+              data: item.listQualificationRate,
+              type: 'line'
+            };
+          }),
+          this.form.timeType
+        );
+        // console.log(values)
+      },
+      datasource({ page, where, limit }) {
+        return getList({
+          ...where,
+          pageNum: page,
+          size: limit
+        });
       }
-      this.lineOption = lineOption(
-        values.map((item) => {
-          return {
-            name: item.productName,
-            data: item.listQualificationRate,
-            type: 'line'
-          };
-        }),
-        this.form.timeType
-      );
-      // console.log(values)
-    },
-    datasource({ page, where, limit }) {
-      return getList({
-        ...where,
-        pageNum: page,
-        size: limit
-      });
     }
-  }
-};
+  };
 </script>
 <style lang="scss" scoped>
-.clearfix {
-  font-size: 0.7vw;
-
-  > span {
-    font-weight: bold;
-  }
-  :deep(.el-radio-button__inner) {
+  .clearfix {
     font-size: 0.7vw;
-  }
-}
-.ele-body {
-  height: calc(100vh - 126px);
-  > .el-row {
-    height: 100%;
-  }
-  .el-card {
-    height: 100%;
-    :deep(.el-card__body) {
-      padding: 0.3vw;
+
+    > span {
+      font-weight: bold;
     }
-    :deep(.el-card__header) {
-      padding: 0.8vw;
+    :deep(.el-radio-button__inner) {
+      font-size: 0.7vw;
     }
-    :deep(.el-card__body) {
-      height: calc(100% - 1.6vw - 39px);
+  }
+  .ele-body {
+    height: calc(100vh - 126px);
+    > .el-row {
+      height: 100%;
     }
-    :deep(.ele-pro-table) {
-      height: 99%;
+    .el-card {
+      height: 100%;
+      :deep(.el-card__body) {
+        padding: 0.3vw;
+      }
+      :deep(.el-card__header) {
+        padding: 0.8vw;
+      }
+      :deep(.el-card__body) {
+        height: calc(100% - 1.6vw - 39px);
+      }
+      :deep(.ele-pro-table) {
+        height: 99%;
+      }
     }
   }
-}
 </style>
-