测试

src/views/home/common.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="ele-body">
+    <el-row :gutter="15">
+      <el-col :span="8" style="height: 40%">
+        <el-card class="box-card">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
+            <span style="cursor: pointer" @click="handelRouterTo('/page-qms/inspectionWork?name=workList')">工厂合格率</span>
+            <el-radio-group
+              style="margin-left: 15px; margin-right: 15px"
+              v-model="factoryTimeType"
+              @change="handleFactoryTimeChange"
+            >
+              <el-radio-button label="1">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+              <el-radio-button label="3">本年</el-radio-button>
+            </el-radio-group>
+          </div>
+          <v-chart
+            ref="pieRef1"
+            style="height: 100%"
+            :option="factoryQualifiedOption"
+          />
+        </el-card>
+      </el-col>
+
+      <el-col :span="8" style="height: 40%">
+        <el-card class="box-card">
+          <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="1">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+              <el-radio-button label="3">本年</el-radio-button>
+            </el-radio-group>
+          </div>
+          <v-chart
+            ref="pieRef2"
+            style="height: 100%"
+            :option="teamQualifiedOption"
+          />
+        </el-card>
+      </el-col>
+
+      <el-col :span="8" style="height: 40%">
+        <el-card class="box-card">
+          <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="1">本周</el-radio-button>
+              <el-radio-button label="2">本月</el-radio-button>
+              <el-radio-button label="3">本年</el-radio-button>
+            </el-radio-group>
+          </div>
+          <v-chart
+            ref="pieRef3"
+            style="height: 100%"
+            :option="lineQualifiedOption"
+          />
+        </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"
+            style="display: flex; align-items: center"
+          >
+            <span>产品合格率</span>
+            <div style="margin-left: 15px">
+              <el-radio-group
+                style="margin-right: 15px"
+                v-model="form.timeType"
+                @change="timeTypeChange"
+              >
+                <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>
+              自定义时间：
+              <el-date-picker
+                style="width: 140px"
+                v-model="form.finishTime"
+                type="date"
+                value-format="yyyy-MM-dd"
+              ></el-date-picker>
+            </div>
+          </div>
+          <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">
+            <span>不良类型占比</span>
+          </div>
+          <v-chart ref="pieRef4" style="height: 100%" :option="preOptions" />
+        </el-card>
+      </el-col>
+    </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 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();
+
+    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();
+    },
+
+    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: 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]);
+      }
+      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;
+
+  > 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-card__header) {
+      padding: 0.8vw;
+    }
+    :deep(.el-card__body) {
+      height: calc(100% - 1.6vw - 39px);
+    }
+    :deep(.ele-pro-table) {
+      height: 99%;
+    }
+  }
+}
+</style>

src/views/home/data.js

@@ -187,37 +187,38 @@ export const preOptions = (
   labelPosition = 'outside'
 ) => {
   return {
-    color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
+    color: ['#398f4e', '#458ef7'],
     tooltip: {
       formatter: function (params) {
-        return `${params.name}<br/>数量: ${params.value}<br/>占比: ${params.percent}%`;
+        return `${params.name}<br/>次数: ${params.value}<br/>占比: ${params.percent}%`;
       },
       // formatter: '{d}%',
       trigger: 'item'
     },
-    // legend: {
-    //   orient: 'vertical',
-    //   left: 'left',
-    //   left: '10%',
-    //   top: '25%',
-    //   itemGap: window.innerHeight * 0.018,
-    //   textStyle: {
-    //     fontSize: window.innerHeight * 0.014
-    //   }
-    // },
+    legend: {
+      orient: 'vertical',
+      right: '10%',
+      top: '35%',
+      itemGap: window.innerHeight * 0.018,
+      formatter: function (name) {
+        let value = data.find(item => item.name === name);
+        console.log(value)
+        return `${name}  |  ${value.value}`;
+      },
+      textStyle: {
+        fontSize: window.innerHeight * 0.014
+      }
+    },
     series: [
       {
-        center: ['50%', '50%'],
+        center: ['30%', '50%'],
         label: {
           position: labelPosition,
-          show: true,
-          // formatter: '{c}',
+          show: false,
           formatter: (item) => {
             return item.name + '：' + item.value;
           },
-          // fontSize: 16
-          fontSize: window.innerHeight * 0.014,
-          // color:"#fff"
+          fontSize: window.innerHeight * 0.014
         },
         labelLine: {
           show: labelLineShow
@@ -231,6 +232,31 @@ export const preOptions = (
         },
         data
       }
+    ],
+    graphic: [
+      {
+        type: 'text',
+        left: '26%',
+        top: '45%',
+        style: {
+          text: '质检总数',
+          textAlign: 'center',
+          fill: '#000',
+          fontSize: window.innerHeight * 0.013
+        }
+      },
+      {
+        type: 'text',
+        left: '27%',
+        top: '55%',
+        style: {
+          text: 55,
+          textAlign: 'center',
+          fill: '#000',
+          fontSize: window.innerHeight * 0.013,
+          fontWeight: 'bold'
+        }
+      }
     ]
   };
 };

src/views/home/index.vue

@@ -1,359 +1,24 @@
 <template>
-  <div class="ele-body">
-    <el-row :gutter="15">
-      <el-col :span="8" style="height: 40%">
-        <el-card class="box-card">
-          <div
-            slot="header"
-            class="clearfix"
-            style="display: flex; align-items: center"
-          >
-            <span style="cursor: pointer" @click="handelRouterTo('/page-qms/inspectionWork?name=workList')">工厂合格率</span>
-            <el-radio-group
-              style="margin-left: 15px; margin-right: 15px"
-              v-model="factoryTimeType"
-              @change="handleFactoryTimeChange"
-            >
-              <el-radio-button label="1">本周</el-radio-button>
-              <el-radio-button label="2">本月</el-radio-button>
-              <el-radio-button label="3">本年</el-radio-button>
-            </el-radio-group>
-          </div>
-          <v-chart
-            ref="pieRef1"
-            style="height: 100%"
-            :option="factoryQualifiedOption"
-          />
-        </el-card>
-      </el-col>
+  <div>
+    <yuxin v-if="$store.state.user.info.clientEnvironmentId==10"></yuxin>
 
-      <el-col :span="8" style="height: 40%">
-        <el-card class="box-card">
-          <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="1">本周</el-radio-button>
-              <el-radio-button label="2">本月</el-radio-button>
-              <el-radio-button label="3">本年</el-radio-button>
-            </el-radio-group>
-          </div>
-          <v-chart
-            ref="pieRef2"
-            style="height: 100%"
-            :option="teamQualifiedOption"
-          />
-        </el-card>
-      </el-col>
-
-      <el-col :span="8" style="height: 40%">
-        <el-card class="box-card">
-          <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="1">本周</el-radio-button>
-              <el-radio-button label="2">本月</el-radio-button>
-              <el-radio-button label="3">本年</el-radio-button>
-            </el-radio-group>
-          </div>
-          <v-chart
-            ref="pieRef3"
-            style="height: 100%"
-            :option="lineQualifiedOption"
-          />
-        </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"
-            style="display: flex; align-items: center"
-          >
-            <span>产品合格率</span>
-            <div style="margin-left: 15px">
-              <el-radio-group
-                style="margin-right: 15px"
-                v-model="form.timeType"
-                @change="timeTypeChange"
-              >
-                <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>
-              自定义时间：
-              <el-date-picker
-                style="width: 140px"
-                v-model="form.finishTime"
-                type="date"
-                value-format="yyyy-MM-dd"
-              ></el-date-picker>
-            </div>
-          </div>
-          <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">
-            <span>不良类型占比</span>
-          </div>
-          <v-chart ref="pieRef4" style="height: 100%" :option="preOptions" />
-        </el-card>
-      </el-col>
-    </el-row>
+    <common v-else></common>
   </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 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();
-
-    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();
-    },
-
-    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 };
-        })
-      );
-    },
+  import common from './common.vue';
+  import yuxin from './yuxin.vue';
 
-    async queryProductionLine() {
-      const data = await queryProductionLine({
-        timeType: this.lineTimeType
-      });
-      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'
-              }
-            ])
-          }
-        }
-      );
+  export default {
+    components: { common, yuxin },
+    data() {
+      return {};
     },
+    computed: {},
 
-    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
-      });
-    }
-  }
-};
+    mounted() {}
+  };
 </script>
 
-<style lang="scss" scoped>
-.clearfix {
-  font-size: 0.7vw;
-
-  > 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-card__header) {
-      padding: 0.8vw;
-    }
-    :deep(.el-card__body) {
-      height: calc(100% - 1.6vw - 39px);
-    }
-    :deep(.ele-pro-table) {
-      height: 99%;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/home/yuxin.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="ele-body">
+    <el-row :gutter="15">
+      <el-col :span="8" style="height: 40%">
+        <el-card class="box-card">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
+            <span
+              style="cursor: pointer"
+              @click="handelRouterTo('/page-qms/inspectionWork?name=workList')"
+              >合格率</span
+            >
+          </div>
+          <v-chart
+            ref="pieRef2"
+            style="height: 100%"
+            :option="teamQualifiedOption"
+          />
+        </el-card>
+      </el-col>
+
+      <el-col :span="8" style="height: 40%">
+        <el-card class="box-card">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
+            <span>质检次数</span>
+            <div class="time">
+              <el-date-picker
+                v-model="value2"
+                type="month"
+                placeholder="选择月"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <v-chart ref="pieRef4" style="height: 100%" :option="preOptions" />
+        </el-card>
+      </el-col>
+
+      <el-col :span="8" style="height: 40%">
+        <el-card class="box-card">
+          <div
+            slot="header"
+            class="clearfix"
+            style="display: flex; align-items: center"
+          >
+            <span>时率</span>
+          </div>
+          <v-chart
+            ref="pieRef2"
+            style="height: 100%"
+            :option="teamQualifiedOption"
+          />
+        </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"
+            style="display: flex; align-items: center"
+          >
+            <span>合格率趋势图</span>
+            <div class="time">
+              <el-date-picker
+                v-model="value2"
+                type="year"
+                placeholder="选择年"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <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"  style="display: flex; align-items: center">
+            <span>时率趋势图</span>
+            <div class="time">
+              <el-date-picker
+                v-model="value2"
+                type="year"
+                placeholder="选择年"
+              >
+              </el-date-picker>
+            </div>
+          </div>
+          <v-chart ref="lineRef" style="height: 100%" :option="lineOption" />
+        </el-card>
+      </el-col>
+    </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 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();
+
+      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();
+      },
+
+      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: 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]);
+        }
+        this.lineOption = lineOption(
+          values.map((item) => {
+            return {
+              name: item.productName,
+              data: item.listQualificationRate,
+              type: 'line',
+              smooth: true // 开启平滑曲线
+            };
+          }),
+          this.form.timeType
+        );
+      },
+
+      datasource({ page, where, limit }) {
+        return getList({
+          ...where,
+          pageNum: page,
+          size: limit
+        });
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .clearfix {
+    font-size: 0.7vw;
+    position: relative;
+
+    > span {
+      font-weight: bold;
+    }
+    :deep(.el-radio-button__inner) {
+      font-size: 0.7vw;
+    }
+    .time {
+      position: absolute;
+      right: 10px;
+    }
+  }
+  .ele-body {
+    height: calc(100vh - 126px);
+    > .el-row {
+      height: 100%;
+    }
+    .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>