质检首页图标新增选择周,月,年

src/api/main/index.js

@@ -1,55 +1,49 @@
 import request from '@/utils/request';
-
-
 // 产品合格率
-
-export async function queryHomePage (data) {
-    const res = await request.post(`/qms/quality_work_order/queryHomePage` , data);
-    if (res.data.code == 0) {
-      return res.data.data;
-    }
-    return Promise.reject(new Error(res.data.message));
+export async function queryHomePage(data) {
+  const res = await request.post(`/qms/quality_work_order/queryHomePage`, data);
+  if (res.data.code == 0) {
+    return res.data.data;
   }
-
+  return Promise.reject(new Error(res.data.message));
+}
 // 工厂查询
-
-export async function queryFactory () {
-  const res = await request.get(`/qms/quality_work_order/queryFactory`);
+export async function queryFactory(data) {
+  const res = await request.post(`/qms/quality_work_order/queryFactory`, data);
   if (res.data.code == 0) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
-
-
 // 班组查询
-
-export async function queryTeam () {
-  const res = await request.get(`/qms/quality_work_order/queryTeam`);
+export async function queryTeam(data) {
+  const res = await request.post(`/qms/quality_work_order/queryTeam`, data);
   if (res.data.code == 0) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
 // 产线查询
-
-export async function queryProductionLine () {
-  const res = await request.get(`/qms/quality_work_order/queryProductionLine`);
+export async function queryProductionLine(data) {
+  const res = await request.post(
+    `/qms/quality_work_order/queryProductionLine`,
+    data
+  );
   if (res.data.code == 0) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
-
 // 不良占比
-export async function queryProportionDefectiveTypes () {
-  const res = await request.post(`/qms/quality_work_order/queryProportionDefectiveTypes`);
+export async function queryProportionDefectiveTypes() {
+  const res = await request.post(
+    `/qms/quality_work_order/queryProportionDefectiveTypes`
+  );
   if (res.data.code == 0) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
 }
-
 //获取系统参数
 export async function parameterGetByCode(data) {
   const res = await request.post('/sys/parameter/getByCode', data);
@@ -58,12 +52,10 @@ export async function parameterGetByCode(data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
-
-
 export async function getCategoryByCode(code) {
   const res = await request.get(`/main/category/getByCode/${code}`);
   if (res.data.code == 0) {
     return res.data.data;
   }
   return Promise.reject(new Error(res.data.message));
-}
+}

src/views/home/index.vue

@@ -3,8 +3,21 @@
     <el-row :gutter="15">
       <el-col :span="8" style="height: 40%">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
             <span>工厂合格率</span>
+            <el-radio-group
+              style="margin-left: 15px; margin-right: 15px"
+              v-model="factoryTimeType"
+              @change="handleFactoryTimeChange"
+            >
+              <el-radio-button label="3">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+              <el-radio-button label="1">本年</el-radio-button>
+            </el-radio-group>
           </div>
           <v-chart
             ref="pieRef1"
@@ -13,10 +26,24 @@
           />
         </el-card>
       </el-col>
+
       <el-col :span="8" style="height: 40%">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
             <span>班组合格率</span>
+            <el-radio-group
+              style="margin-left: 15px; margin-right: 15px"
+              v-model="teamTimeType"
+              @change="handleTeamTimeChange"
+            >
+              <el-radio-button label="3">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+              <el-radio-button label="1">本年</el-radio-button>
+            </el-radio-group>
           </div>
           <v-chart
             ref="pieRef2"
@@ -25,10 +52,24 @@
           />
         </el-card>
       </el-col>
+
       <el-col :span="8" style="height: 40%">
         <el-card class="box-card">
-          <div slot="header" class="clearfix">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
             <span>产线合格率</span>
+            <el-radio-group
+              style="margin-left: 15px; margin-right: 15px"
+              v-model="lineTimeType"
+              @change="handleLineTimeChange"
+            >
+              <el-radio-button label="3">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+              <el-radio-button label="1">本年</el-radio-button>
+            </el-radio-group>
           </div>
           <v-chart
             ref="pieRef3"
@@ -37,33 +78,7 @@
           />
         </el-card>
       </el-col>
-      <!-- <el-col :span="8" style="height: 40%">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>人员合格率</span>
-          </div>
-          <ele-pro-table
-            ref="table"
-            :columns="userList"
-            :datasource="datasource"
-            :toolbar="false"
-            :needPage="false"
-            height="100%"
-          >
-
 
-            <template v-slot:qualified="{ row }">
-              <el-progress
-                :text-inside="true"
-                :stroke-width="24"
-                :percentage="80"
-                text-color="#fff"
-                color="#398e4e"
-              ></el-progress>
-            </template>
-          </ele-pro-table>
-        </el-card>
-      </el-col> -->
       <el-col :span="12" style="margin-top: 15px; height: calc(60% - 15px)">
         <el-card class="box-card">
           <div
@@ -94,6 +109,7 @@
           <v-chart ref="lineRef" style="height: 100%" :option="lineOption" />
         </el-card>
       </el-col>
+
       <el-col :span="12" style="margin-top: 15px; height: calc(60% - 15px)">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
@@ -105,216 +121,239 @@
     </el-row>
   </div>
 </template>
+
 <script>
-  import {
-    queryHomePage,
-    queryFactory,
-    queryTeam,
-    queryProductionLine,
-    queryProportionDefectiveTypes
-  } from '@/api/main';
-  import dictMixins from '@/mixins/dictMixins';
-  import {
-    userList,
-    unacceptedProduct,
-    lineOption,
-    preOption,
-    barOption,
-    preOptions
-  } 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,
+  preOptions
+} 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: {},
-        preOptions:{},
-        form: {
-          finishTime: '',
-          timeType: '1'
-        }
-      };
-    },
-    computed: {
-      userList: () => userList,
-      unacceptedProduct: () => unacceptedProduct
-    },
+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 {
+      factoryTimeType: '3',
+      teamTimeType: '3',
+      lineTimeType: '3',
+
+      // 图表配置
+      teamQualifiedOption: {},
+      factoryQualifiedOption: {},
+      lineQualifiedOption: {},
+      preOption: {},
+      barOption: {},
+      lineOption: {},
+      preOptions: {},
+
+      form: {
+        finishTime: '',
+        timeType: '1' // 默认本年
+      }
+    };
+  },
+  computed: {
+    userList: () => userList,
+    unacceptedProduct: () => unacceptedProduct
+  },
+
+  mounted() {
+    this.queryHomePage();
+    this.queryFactory();
+    this.queryTeam();
+    this.queryProductionLine();
+    this.proportion();
 
-    mounted() {
+    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();
+    },
+
+    handleFactoryTimeChange() {
       this.queryFactory();
+    },
+
+    handleTeamTimeChange() {
       this.queryTeam();
+    },
+
+    handleLineTimeChange() {
       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);
     },
-    methods: {
-      timeTypeChange() {
-        this.queryHomePage();
-      },
-      async queryFactory() {
-        const data = await queryFactory();
-        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) => {
+
+    async queryFactory() {
+      const data = await queryFactory({
+        timeType: this.factoryTimeType
+      });
+      this.factoryQualifiedOption = preOption(
+        data.map((item) => {
+          return { value: item.qualificationRate, name: item.factoryName };
+        }),
+        '70%',
+        false,
+        'inside'
+      );
+    },
+
+    async proportion() {
+      const res = await queryProportionDefectiveTypes();
+      let list = res.map((el) => {
+        return {
+          value: el.unQualifiedNumber,
+          name: el.categoryLevelClassName
+        };
+      });
+      this.preOptions = preOptions(list);
+    },
+
+    async queryTeam() {
+      console.log(this.teamTimeType);
+      const data = await queryTeam({
+        timeType: this.teamTimeType
+      });
+      this.teamQualifiedOption = barOption(
+        data.map((item) => {
+          return { value: item.qualificationRate, name: item.teamName };
+        })
+      );
+    },
+
+    async queryProductionLine() {
+      const data = await queryProductionLine({
+        timeType: this.lineTimeType
+      });
+      this.lineQualifiedOption = barOption(
+        data.map((item) => {
           return {
-            value: el.unQualifiedNumber,
-            name: el.categoryLevelClassName
+            value: item.qualificationRate,
+            name: item.productionLineName
           };
-        });
-        this.preOptions = preOptions(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'
-                }
-              ])
-            }
+        }),
+        {
+          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]);
         }
-        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
-        });
+      );
+    },
+
+    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
+      );
+    },
+
+    datasource({ page, where, limit }) {
+      return getList({
+        ...where,
+        pageNum: page,
+        size: limit
+      });
     }
-  };
+  }
+};
 </script>
+
 <style lang="scss" scoped>
-  .clearfix {
-    font-size: 0.7vw;
+.clearfix {
+  font-size: 0.7vw;
 
-    > span {
-      font-weight: bold;
+  > span {
+    font-weight: bold;
+  }
+  :deep(.el-radio-button__inner) {
+    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;
     }
-    :deep(.el-radio-button__inner) {
-      font-size: 0.7vw;
+    :deep(.el-card__header) {
+      padding: 0.8vw;
     }
-  }
-  .ele-body {
-    height: calc(100vh - 126px);
-    > .el-row {
-      height: 100%;
+    :deep(.el-card__body) {
+      height: calc(100% - 1.6vw - 39px);
     }
-    .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%;
-      }
+    :deep(.ele-pro-table) {
+      height: 99%;
     }
   }
-</style>
+}
+</style>