首页

src/views/home/index.vue

@@ -3,7 +3,7 @@
     <el-row :gutter="5">
       <el-col :span="24" style="height: 46px; margin-bottom: 5px">
         <el-card class="box-card">
-          <el-radio-group v-model="form.timeType" @change="timeTypeChange">
+          <el-radio-group v-model="form.timeType">
             <el-radio-button label="1">企业</el-radio-button>
             <el-radio-button label="2">工厂</el-radio-button>
             <el-radio-button label="3">班组</el-radio-button>
@@ -11,15 +11,15 @@
           </el-radio-group>
         </el-card>
       </el-col>
-      <el-col :span="8" style="height: 33%">
+      <el-col :span="10" style="height: 33%">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>计划达成情况</span>
+            <span>年度计划达成情况</span>
           </div>
           <v-chart ref="barRef1" style="height: 100%" :option="barOption" />
         </el-card>
       </el-col>
-      <el-col :span="4" style="height: 33%">
+      <el-col :span="3" style="height: 33%">
         <div class="item">
           <div class="header"> 7日内需要交付订单 </div>
           <div class="content">
@@ -28,7 +28,7 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="4" style="height: 33%">
+      <el-col :span="3" style="height: 33%">
         <div class="item">
           <div class="header"> 本月需要完成订单 </div>
           <div class="content">
@@ -38,7 +38,7 @@
         </div>
       </el-col>
       <el-col :span="8" style="height: 33%">
-        <el-card class="box-card">
+        <el-card class="box-card" style="height: 100%">
           <div slot="header" class="clearfix">
             <span>本月异常类型分布</span>
           </div>
@@ -86,7 +86,6 @@
 //   queryTeam,
 //   queryProductionLine
 // } from '@/api/qms';
-import dictMixins from '@/mixins/dictMixins';
 import { pieOption, barOption, lineOption, columns } from './data';
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -96,7 +95,6 @@ import {
   TooltipComponent,
   LegendComponent
 } from 'echarts/components';
-import EleChart from 'ele-admin/packages/ele-chart';
 
 import VChart from 'vue-echarts';
 import { echartsMixin } from '@/utils/echarts-mixin';
@@ -111,10 +109,8 @@ use([
   LineChart
 ]);
 export default {
-  mixins: [
-    dictMixins,
-    echartsMixin(['pieRef', 'barRef1', 'lineRef', 'barRef3'])
-  ],
+  mixins: [echartsMixin(['pieRef', 'barRef1', 'lineRef', 'barRef3'])],
+
   components: { VChart },
   data() {
     return {
@@ -158,7 +154,8 @@ export default {
     };
   },
 
-  created() {
+  created() {},
+  mounted() {
     this.pieOption = pieOption([
       { value: 60, name: '人员异常' },
       { value: 60, name: '物料异常' },
@@ -169,26 +166,45 @@ export default {
       { value: 60, name: '交期异常' }
     ]);
     this.barOption = barOption(
-      ['一厂', '二厂', '三厂', '四厂', '五厂', '六厂'],
+      [
+        '一月',
+        '二月',
+        '三月',
+        '四月',
+        '五月',
+        '六月',
+        '七月',
+        '八月',
+        '九月',
+        '十月',
+        '十一月',
+        '十二月'
+      ],
       [
         {
           name: '任务量',
           barWidth: '25%',
-          data: [50, 78, 88, 76, 75, 91],
+          data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
           type: 'bar',
-          yAxisIndex: 0 // 使用第一个Y轴
+          yAxisIndex: 0, // 使用第一个Y轴
+          itemStyle: {
+            color: '#f9cd5d'
+          }
         },
         {
           name: '完成量',
           barWidth: '25%',
-          data: [50, 78, 88, 76, 75, 91],
+          data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
           type: 'bar',
-          yAxisIndex: 0 // 使用第一个Y轴
+          yAxisIndex: 0, // 使用第一个Y轴
+          itemStyle: {
+            color: '#5893eb'
+          }
         },
         {
           name: '达成率',
           symbolSize: 10,
-          data: [50, 78, 88, 76, 75, 91],
+          data: [50, 78, 88, 76, 75, 91, 50, 78, 88, 76, 75, 91],
           type: 'line',
           smooth: true,
           yAxisIndex: 1, // 使用第一个Y轴
@@ -245,6 +261,13 @@ export default {
       [30, 58, 68, 36, 55, 41, 73],
       [55, 81, 90, 80, 78, 95, 80]
     ]);
+    setTimeout(() => {
+      
+      this.$refs.pieRef.resize();
+      this.$refs.barRef1.resize();
+      this.$refs.lineRef.resize();
+      this.$refs.barRef3.resize();
+    }, 300);
   },
   methods: {
     datasource({ page, where, limit }) {
@@ -297,10 +320,11 @@ export default {
 .item {
   width: 100%;
   height: 100%;
-  background: linear-gradient(to right, #3283ee, #81b3f5);
+  background: url(../../assets/main_item.png);
+  background-size: cover;
   border-radius: 6px;
   padding: 1vw;
-  color: #fff;
+  color: #333;
   > .header {
     font-size: 0.9vw;
     font-weight: 600;
@@ -308,6 +332,7 @@ export default {
     padding-bottom: 0.7vw;
     border-bottom: 1px solid #f3f3f3;
     text-align: center;
+    color: #3a92edd1;
   }
   > .content {
     display: flex;