首页调整

src/views/home/index.vue

@@ -23,8 +23,18 @@
         <div class="item">
           <div class="header"> 7日内需要交付订单 </div>
           <div class="content">
-            <p><span>订单数</span><span>{{ orderCount7.formedOrders + '/' + orderCount7.orders }}</span></p>
-            <p><span>产品量</span><span>{{ orderCount7.formedNum + '/' + orderCount7.productNum }}</span></p>
+            <p
+              ><span>订单数</span
+              ><span>{{
+                orderCount7.formedOrders + '/' + orderCount7.orders
+              }}</span></p
+            >
+            <p
+              ><span>产品量</span
+              ><span>{{
+                orderCount7.formedNum + '/' + orderCount7.productNum
+              }}</span></p
+            >
           </div>
         </div>
       </el-col>
@@ -32,8 +42,18 @@
         <div class="item">
           <div class="header"> 本月需要完成订单 </div>
           <div class="content">
-            <p><span>订单数</span><span>{{ orderCount30.formedOrders + '/' + orderCount30.orders }}</span></p>
-            <p><span>产品量</span><span>{{ orderCount30.formedNum + '/' + orderCount30.productNum }}</span></p>
+            <p
+              ><span>订单数</span
+              ><span>{{
+                orderCount30.formedOrders + '/' + orderCount30.orders
+              }}</span></p
+            >
+            <p
+              ><span>产品量</span
+              ><span>{{
+                orderCount30.formedNum + '/' + orderCount30.productNum
+              }}</span></p
+            >
           </div>
         </div>
       </el-col>
@@ -67,349 +87,353 @@
             <span>计划进度看板</span>
           </div>
 
-          <ele-pro-table ref="table" height="calc(100%)" :columns="columns" :datasource="datasource"
-            :needPage="false" :toolbar="false">
-            <template v-slot="">
-
-            </template>
+          <ele-pro-table
+            ref="table"
+            height="calc(100% - 100px)"
+            @columns-change="handleColumnChange"
+            :cache-key="cacheKeyUrl"
+            :columns="columns"
+            :datasource="datasource"
+          >
+            <template v-slot=""> </template>
           </ele-pro-table>
-
-
         </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
-// import {
-//   queryHomePage,
-//   queryFactory,
-//   queryTeam,
-//   queryProductionLine
-// } from '@/api/qms';
-import { pieOption, barOption, lineOption, columns } 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 { getList } from '@/api/workOrder/index'
-import VChart from 'vue-echarts';
-import { echartsMixin } from '@/utils/echarts-mixin';
-import { getOrderCount, deliveryCompletionRate } from '@/api/home/index'
-// 按需加载 echarts
-use([
-  CanvasRenderer,
-  BarChart,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  LineChart
-]);
-export default {
-  mixins: [echartsMixin(['pieRef', 'barRef1', 'lineRef', 'barRef3'])],
-
-  components: { VChart },
-  data() {
-    return {
-      columns,
-      arr: [
-        {
-          name: '在制工单数',
-          num: '188',
-          // imgUrl: require('../../assets/Group1.png'),
-          unit: '个'
-        },
-        {
-          name: '在制工单计划生产数',
-          num: '188',
-          // imgUrl: require('../../assets/Group2.png'),
-          unit: 'pcs'
-        },
-        {
-          name: '在制工单已入库数',
-          num: '188',
-          // imgUrl: require('../../assets/Group3.png'),
-          unit: 'pcs'
-        },
-        {
-          name: '在制工单延期生产数',
-          num: '188',
-          // imgUrl: require('../../assets/Group4.png'),
-          unit: 'pcs',
-          color: '#f97876'
-        }
-      ],
+  // import {
+  //   queryHomePage,
+  //   queryFactory,
+  //   queryTeam,
+  //   queryProductionLine
+  // } from '@/api/qms';
+  import { pieOption, barOption, lineOption, columns } 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 { getList } from '@/api/workOrder/index';
+  import VChart from 'vue-echarts';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  import { getOrderCount, deliveryCompletionRate } from '@/api/home/index';
+  import tabMixins from '@/mixins/tableColumnsMixin';
 
-      pieOption: {},
-      barOption: {},
-      barOption1: {},
-      lineOption: {},
-      form: {
-        finishTime: '',
-        timeType: '1'
-      },
-      orderCount7: {}, // 7天内订单情况
-      orderCount30: {}, // 30天内订单情况
-      orderCountYear: [], // 年度订单情况
-      date: [], //日期
-      productNum: [], //任务量
-      completeNum: [], //完成量
-      completionRate: [],//达成率
-      deliveryRate: [],//交付率
-      orders: [],//应完成订单
-      formedOrders: [],//已完成订单数
-    };
-  },
+  // 按需加载 echarts
+  use([
+    CanvasRenderer,
+    BarChart,
+    PieChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    LineChart
+  ]);
+  export default {
+    mixins: [echartsMixin(['pieRef', 'barRef1', 'lineRef', 'barRef3']),tabMixins],
 
-  created() { 
-    this.getOrderCount(0);
-    this.getOrderCount(7);
-    this.getYearRate();
-  },
-  mounted() {
-    this.pieOption = pieOption([
-      { value: 60, name: '人员异常' },
-      { value: 60, name: '物料异常' },
-      { value: 60, name: '设备异常' },
-      { value: 60, name: '工装异常' },
-      { value: 60, name: '工装异常' },
-      { value: 60, name: '设计异常' },
-      { value: 60, name: '交期异常' }
-    ]);
-    this.barOption = barOption(
-      [
-        '一月',
-        '二月',
-        '三月',
-        '四月',
-        '五月',
-        '六月',
-        '七月',
-        '八月',
-        '九月',
-        '十月',
-        '十一月',
-        '十二月'
-      ],
-      [
-        {
-          name: '任务量',
-          barWidth: '25%',
-          data: this.productNum,
-          type: 'bar',
-          yAxisIndex: 0, // 使用第一个Y轴
-          itemStyle: {
-            color: '#f9cd5d'
-          }
-        },
-        {
-          name: '完成量',
-          barWidth: '25%',
-          data: this.completeNum,
-          type: 'bar',
-          yAxisIndex: 0, // 使用第一个Y轴
-          itemStyle: {
-            color: '#5893eb'
+    components: { VChart },
+    data() {
+      return {
+        cacheKeyUrl: 'aps-home-plan',
+        columns,
+        arr: [
+          {
+            name: '在制工单数',
+            num: '188',
+            // imgUrl: require('../../assets/Group1.png'),
+            unit: '个'
+          },
+          {
+            name: '在制工单计划生产数',
+            num: '188',
+            // imgUrl: require('../../assets/Group2.png'),
+            unit: 'pcs'
+          },
+          {
+            name: '在制工单已入库数',
+            num: '188',
+            // imgUrl: require('../../assets/Group3.png'),
+            unit: 'pcs'
+          },
+          {
+            name: '在制工单延期生产数',
+            num: '188',
+            // imgUrl: require('../../assets/Group4.png'),
+            unit: 'pcs',
+            color: '#f97876'
           }
+        ],
+
+        pieOption: {},
+        barOption: {},
+        barOption1: {},
+        lineOption: {},
+        form: {
+          finishTime: '',
+          timeType: '1'
         },
-        {
-          name: '达成率',
-          symbolSize: 10,
-          data: this.completionRate,
-          type: 'line',
-          smooth: true,
-          yAxisIndex: 1, // 使用第一个Y轴
-          itemStyle: {
-            color: '#59b9fe'
+        orderCount7: {}, // 7天内订单情况
+        orderCount30: {}, // 30天内订单情况
+        orderCountYear: [], // 年度订单情况
+        date: [], //日期
+        productNum: [], //任务量
+        completeNum: [], //完成量
+        completionRate: [], //达成率
+        deliveryRate: [], //交付率
+        orders: [], //应完成订单
+        formedOrders: [] //已完成订单数
+      };
+    },
+
+    created() {
+      this.getOrderCount(0);
+      this.getOrderCount(7);
+      this.getYearRate();
+    },
+    mounted() {
+      this.pieOption = pieOption([
+        { value: 60, name: '人员异常' },
+        { value: 60, name: '物料异常' },
+        { value: 60, name: '设备异常' },
+        { value: 60, name: '工装异常' },
+        { value: 60, name: '工装异常' },
+        { value: 60, name: '设计异常' },
+        { value: 60, name: '交期异常' }
+      ]);
+      this.barOption = barOption(
+        [
+          '一月',
+          '二月',
+          '三月',
+          '四月',
+          '五月',
+          '六月',
+          '七月',
+          '八月',
+          '九月',
+          '十月',
+          '十一月',
+          '十二月'
+        ],
+        [
+          {
+            name: '任务量',
+            barWidth: '25%',
+            data: this.productNum,
+            type: 'bar',
+            yAxisIndex: 0, // 使用第一个Y轴
+            itemStyle: {
+              color: '#f9cd5d'
+            }
+          },
+          {
+            name: '完成量',
+            barWidth: '25%',
+            data: this.completeNum,
+            type: 'bar',
+            yAxisIndex: 0, // 使用第一个Y轴
+            itemStyle: {
+              color: '#5893eb'
+            }
+          },
+          {
+            name: '达成率',
+            symbolSize: 10,
+            data: this.completionRate,
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 1, // 使用第一个Y轴
+            itemStyle: {
+              color: '#59b9fe'
+            }
           }
-        }
-      ]
-    );
-    this.barOption1 = barOption(
-      [
-        '一月',
-        '二月',
-        '三月',
-        '四月',
-        '五月',
-        '六月',
-        '七月',
-        '八月',
-        '九月',
-        '十月',
-        '十一月',
-        '十二月'
-      ],
-      [
-        {
-          name: '应完成订单',
-          barWidth: '25%',
-          data: this.orders,
-          type: 'bar',
-          yAxisIndex: 0 // 使用第一个Y轴
-        },
-        {
-          name: '实际完成订单',
-          barWidth: '25%',
-          data: this.formedOrders,
-          type: 'bar',
-          yAxisIndex: 0 // 使用第一个Y轴
-        },
-        {
-          name: '准时交付率',
-          symbolSize: 10,
-          data: this.deliveryRate,
-          type: 'line',
-          smooth: true,
-          yAxisIndex: 1, // 使用第一个Y轴
-          itemStyle: {
-            color: '#ff8856'
+        ]
+      );
+      this.barOption1 = barOption(
+        [
+          '一月',
+          '二月',
+          '三月',
+          '四月',
+          '五月',
+          '六月',
+          '七月',
+          '八月',
+          '九月',
+          '十月',
+          '十一月',
+          '十二月'
+        ],
+        [
+          {
+            name: '应完成订单',
+            barWidth: '25%',
+            data: this.orders,
+            type: 'bar',
+            yAxisIndex: 0 // 使用第一个Y轴
+          },
+          {
+            name: '实际完成订单',
+            barWidth: '25%',
+            data: this.formedOrders,
+            type: 'bar',
+            yAxisIndex: 0 // 使用第一个Y轴
+          },
+          {
+            name: '准时交付率',
+            symbolSize: 10,
+            data: this.deliveryRate,
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 1, // 使用第一个Y轴
+            itemStyle: {
+              color: '#ff8856'
+            }
           }
-        }
-      ]
-    );
-    this.lineOption = lineOption([
-      [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 }) {
-      return getList({
-        ...where,
-        pageNum: page,
-        size: limit
-      });
+        ]
+      );
+      this.lineOption = lineOption([
+        [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 }) {
+        return getList({
+          ...where,
+          pageNum: page,
+          size: limit
+        });
+      },
 
-    //获取订单统计
-    async getOrderCount(days) {
-      let params = {
-        days: days,
-        factoriesId: 0
-      };
-      let rest = await getOrderCount(params);
-      if (days === 7) {
-        this.orderCount7 = rest;
-      } else if (days === 0) {
-        this.orderCount30 = rest;
-      } 
-    },
+      //获取订单统计
+      async getOrderCount(days) {
+        let params = {
+          days: days,
+          factoriesId: 0
+        };
+        let rest = await getOrderCount(params);
+        if (days === 7) {
+          this.orderCount7 = rest;
+        } else if (days === 0) {
+          this.orderCount30 = rest;
+        }
+      },
 
-    //年度准时交付率&完成率
-    async getYearRate() {
-      let params = {
-        startDate: new Date().getFullYear() + '-01-01',
-        endDate: new Date().getFullYear() + '-12-31',
-        factoriesId: 0
-      }
-      let rest = await deliveryCompletionRate(params);
-      console.log(rest)
-      for (let i = 0; i < rest.length; i++) {
-        this.date.push(rest[i].deliveryRateDate);
-        this.productNum.push(rest[i].productNum);
-        this.completeNum.push(rest[i].formedNum);
-        this.completionRate.push(rest[i].completionRate);
-        this.deliveryRate.push(rest[i].deliveryRate);
-        this.orders.push(rest[i].orders);
-        this.formedOrders.push(rest[i].formedOrders);
+      //年度准时交付率&完成率
+      async getYearRate() {
+        let params = {
+          startDate: new Date().getFullYear() + '-01-01',
+          endDate: new Date().getFullYear() + '-12-31',
+          factoriesId: 0
+        };
+        let rest = await deliveryCompletionRate(params);
+        console.log(rest);
+        for (let i = 0; i < rest.length; i++) {
+          this.date.push(rest[i].deliveryRateDate);
+          this.productNum.push(rest[i].productNum);
+          this.completeNum.push(rest[i].formedNum);
+          this.completionRate.push(rest[i].completionRate);
+          this.deliveryRate.push(rest[i].deliveryRate);
+          this.orders.push(rest[i].orders);
+          this.formedOrders.push(rest[i].formedOrders);
+        }
       }
     }
-  }
-};
+  };
 </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 - 136px);
+    > span {
+      font-weight: bold;
+    }
 
-  >.el-row {
-    height: 100%;
+    :deep(.el-radio-button__inner) {
+      font-size: 0.7vw;
+    }
   }
 
-  .el-card {
-    height: 100%;
+  .ele-body {
+    height: calc(100vh - 136px);
 
-    :deep(.el-card__body) {
-      padding: 0.3vw;
+    > .el-row {
+      height: 100%;
     }
 
-    :deep(.el-card__header) {
-      padding: 0.6vw;
-    }
+    .el-card {
+      height: 100%;
 
-    :deep(.el-card__body) {
-      height: calc(100% - 2.3vw);
-    }
+      :deep(.el-card__body) {
+        padding: 0.3vw;
+      }
 
-    :deep(.ele-pro-table) {
-      height: 99%;
-    }
+      :deep(.el-card__header) {
+        padding: 0.6vw;
+      }
 
-    :deep(.el-table) {
-      font-size: 0.65vw;
+      :deep(.el-card__body) {
+        height: calc(100% - 2.3vw);
+      }
+
+      :deep(.ele-pro-table) {
+        height: 99%;
+      }
+
+      :deep(.el-table) {
+        font-size: 0.65vw;
+      }
     }
   }
-}
-
-.item {
-  width: 100%;
-  height: 100%;
-  background: url(../../assets/main_item.png);
-  background-size: cover;
-  border-radius: 6px;
-  padding: 1vw;
-  color: #333;
 
-  >.header {
-    font-size: 0.9vw;
-    font-weight: 600;
+  .item {
     width: 100%;
-    padding-bottom: 0.7vw;
-    border-bottom: 1px solid #f3f3f3;
-    text-align: center;
-    color: #3a92edd1;
-  }
+    height: 100%;
+    background: url(../../assets/main_item.png);
+    background-size: cover;
+    border-radius: 6px;
+    padding: 1vw;
+    color: #333;
 
-  >.content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    font-size: 0.9vw;
-    font-weight: 500;
-    height: calc(100% - 1.5vw);
+    > .header {
+      font-size: 0.9vw;
+      font-weight: 600;
+      width: 100%;
+      padding-bottom: 0.7vw;
+      border-bottom: 1px solid #f3f3f3;
+      text-align: center;
+      color: #3a92edd1;
+    }
 
-    p {
+    > .content {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      height: 33%;
+      justify-content: center;
+      flex-direction: column;
+      font-size: 0.9vw;
+      font-weight: 500;
+      height: calc(100% - 1.5vw);
+
+      p {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 33%;
+      }
     }
   }
-}
-</style>
+</style>

src/views/materialPlan/components/plan-edit-dialog.vue

@@ -181,6 +181,7 @@
               :columns="columns2"
               :key="row.sort + '-' + row.materialList.sort"
               @selection-change="handleSelectionChange"
+              maxHeight="350px"
             >
               <template v-slot:sort="{ $index }">
                 {{ $index + 1 }}
@@ -830,7 +831,7 @@
       },
       chooseOrder(list) {
         let salesOrderIds = [];
-        console.log(list,'listlistlistlistlistlistlistlistlist 获取的数据')
+        console.log(list, 'listlistlistlistlistlistlistlistlist 获取的数据');
         const tableList = this.$refs.table.getData() || [];
         const existingIds = tableList.map((item) => item.id);