生产计划

src/views/productionPlan/components/detail/gant copy.vue

@@ -0,0 +1,159 @@
+<template>
+  <v-chart ref="saleChartRef" style="height: 520px" :option="saleChartOption" />
+</template>
+
+<script>
+  import { use } from 'echarts/core';
+  import * as graphic from 'echarts/lib/util/graphic';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { CustomChart } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    TitleComponent,
+    DataZoomComponent
+  } from 'echarts/components';
+  import VChart from 'vue-echarts';
+  import { getSaleroomList } from '@/api/dashboard/analysis';
+
+  // 按需加载 echarts
+  use([
+    CanvasRenderer,
+    CustomChart,
+    TitleComponent,
+    GridComponent,
+    TooltipComponent,
+    DataZoomComponent
+  ]);
+
+  export default {
+    components: { VChart },
+    data () {
+      return {
+        // 图表配置
+        saleChartOption: {},
+        data: [],
+        dataCount: 10,
+        startTime: +new Date(),
+        categories: ['categoryA', 'categoryB', 'categoryC'],
+        types: [
+          { name: 'JS Heap', color: '#7b9ce1' },
+          { name: 'Documents', color: '#bd6d6c' },
+          { name: 'Nodes', color: '#75d874' },
+          { name: 'Listeners', color: '#e0bc78' },
+          { name: 'GPU Memory', color: '#dc77dc' },
+          { name: 'GPU', color: '#72b362' }
+        ]
+      };
+    },
+    created () {
+      this.init();
+    },
+    methods: {
+      init () {
+        this.categories.forEach((category, index) => {
+          var baseTime = this.startTime;
+          for (var i = 0; i < this.dataCount; i++) {
+            var typeItem =
+              this.types[Math.round(Math.random() * (this.types.length - 1))];
+            var duration = Math.round(Math.random() * 10000);
+            this.data.push({
+              name: typeItem.name,
+              value: [index, baseTime, (baseTime += duration), duration],
+              itemStyle: {
+                normal: {
+                  color: typeItem.color
+                }
+              }
+            });
+            baseTime += Math.round(Math.random() * 2000);
+          }
+        });
+
+        this.saleChartOption = {
+          tooltip: {
+            formatter: function (params) {
+              return (
+                params.marker + params.name + ': ' + params.value[3] + ' ms'
+              );
+            }
+          },
+          title: {
+            text: 'Profile',
+            left: 'center'
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              filterMode: 'weakFilter',
+              showDataShadow: false,
+              top: 400,
+              labelFormatter: ''
+            },
+            {
+              type: 'inside',
+              filterMode: 'weakFilter'
+            }
+          ],
+          grid: {
+            height: 300
+          },
+          xAxis: {
+            min: this.startTime,
+            scale: true,
+            axisLabel: {
+              formatter: (val) => {
+                return Math.max(0, val - this.startTime) + ' ms';
+              }
+            }
+          },
+          yAxis: {
+            data: this.categories
+          },
+          series: [
+            {
+              type: 'custom',
+              renderItem: this.renderItem,
+              itemStyle: {
+                opacity: 0.8
+              },
+              encode: {
+                x: [1, 2],
+                y: 0
+              },
+              data: this.data
+            }
+          ]
+        };
+      },
+      renderItem (params, api) {
+        let categoryIndex = api.value(0);
+        let start = api.coord([api.value(1), categoryIndex]);
+        let end = api.coord([api.value(2), categoryIndex]);
+        let height = api.size([0, 1])[1] * 0.6;
+        let rectShape = graphic.clipRectByRect(
+          {
+            x: start[0],
+            y: start[1] - height / 2,
+            width: end[0] - start[0],
+            height: height
+          },
+          {
+            x: params.coordSys.x,
+            y: params.coordSys.y,
+            width: params.coordSys.width,
+            height: params.coordSys.height
+          }
+        );
+        return (
+          rectShape && {
+            type: 'rect',
+            transition: ['shape'],
+            shape: rectShape,
+            style: api.style()
+          }
+        );
+      }
+    }
+  };
+</script>

src/views/productionPlan/components/detail/gant.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="gant-container">
+    <div class="legend">
+      <div class="legend-item" v-for="item in legendColor" :key="item.color">
+        <span class="color-box" :style="{ backgroundColor: item.color }"></span>
+        {{ item.name }}
+      </div>
+    </div>
+    <el-table :data="tableData">
+      <el-table-column
+        label="工序"
+        fixed="left"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        label="计划达成率"
+        fixed="left"
+        align="center"
+      ></el-table-column>
+      <el-table-column
+        label="平均产能/天"
+        fixed="left"
+        align="center"
+      ></el-table-column>
+      <el-table-column label="3月" align="center">
+        <el-table-column
+          v-for="item in 31"
+          class="day-box"
+          :key="item"
+          :label="item"
+          width="20"
+          align="center"
+        >
+          <template
+            ><div
+              class="placeholder-div"
+              :style="{
+                backgroundColor: legendColor[item % legendColor.length].color
+              }"
+            ></div
+          ></template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="4月" align="center">
+        <el-table-column
+          v-for="item in 31"
+          width="20"
+          :key="item"
+          :label="item"
+          align="center"
+        >
+          <template
+            ><div
+              class="placeholder-div"
+              :style="{
+                backgroundColor: legendColor[item % legendColor.length].color
+              }"
+            ></div
+          ></template> </el-table-column
+      ></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        tableData: [{}, {}],
+        legendColor: [
+          {
+            color: 'rgba(242, 242, 242, 1)',
+            name: '未生产'
+          },
+          {
+            color: 'rgba(245, 154, 35, 1)',
+            name: '未达预期'
+          },
+          {
+            color: 'rgba(112, 182, 3, 1)',
+            name: '达到预期'
+          },
+          {
+            color: 'rgba(2, 167, 240, 1)',
+            name: '超出预期'
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .gant-container {
+    :deep(.el-table) {
+      th .cell {
+        padding: 0;
+      }
+      td {
+        position: relative;
+      }
+
+      .placeholder-div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+
+    .legend {
+      display: flex;
+      justify-content: flex-start;
+      padding: 20px;
+      .legend-item {
+        margin-right: 20px;
+        .color-box {
+          display: inline-block;
+          width: 12px;
+          height: 12px;
+          vertical-align: middle;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+</style>

src/views/productionPlan/components/detail/material.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="pane-box">
+    <HeaderTitle title="物料信息表"> </HeaderTitle>
+    <ele-pro-table ref="table" :columns="columns" :datasource="[{}]">
+    </ele-pro-table>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            width: '80'
+          },
+          {
+            prop: 'name',
+            label: '编码'
+          },
+          {
+            prop: 'name',
+            label: '名称'
+          },
+          {
+            prop: 'name',
+            label: '类型'
+          },
+          {
+            prop: 'name',
+            label: '单位'
+          },
+          {
+            prop: 'name',
+            label: '需求数量'
+          },
+          {
+            prop: 'name',
+            label: '领用数量'
+          },
+          {
+            prop: 'name',
+            label: '投入数量'
+          },
+          {
+            prop: 'name',
+            label: '退还数量'
+          }
+        ]
+      };
+    }
+  };
+</script>

src/views/productionPlan/components/detail/plan.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="pane-box">
+    <HeaderTitle title="计划基本信息"> </HeaderTitle>
+    <el-descriptions :column="5" border>
+      <el-descriptions-item label="计划单号">计划单号</el-descriptions-item>
+      <el-descriptions-item label="计划生产数量"
+        >计划生产数量</el-descriptions-item
+      >
+      <el-descriptions-item label="已交货数量">已交货数量</el-descriptions-item>
+      <el-descriptions-item label="未交货数量">未交货数量</el-descriptions-item>
+      <el-descriptions-item label="计划创建人">计划创建人</el-descriptions-item>
+      <el-descriptions-item label="计划类型">计划类型</el-descriptions-item>
+      <el-descriptions-item label="计划生产重量"
+        >计划生产重量</el-descriptions-item
+      >
+      <el-descriptions-item label="已交货重量">已交货重量</el-descriptions-item>
+      <el-descriptions-item label="未交货重量">未交货重量</el-descriptions-item>
+      <el-descriptions-item label="计划创建时间"
+        >计划创建时间</el-descriptions-item
+      >
+      <el-descriptions-item label="计划完成日期"
+        >计划完成日期</el-descriptions-item
+      >
+      <el-descriptions-item label="要求成型数量"
+        >要求成型数量</el-descriptions-item
+      >
+      <el-descriptions-item label="已成型数量">已成型数量</el-descriptions-item>
+      <el-descriptions-item label="未成型数量">未成型数量</el-descriptions-item>
+      <el-descriptions-item label="实际交货数量"
+        >实际交货数量</el-descriptions-item
+      >
+      <el-descriptions-item label="实际完成时间"
+        >实际完成时间</el-descriptions-item
+      >
+      <el-descriptions-item label="要求成型重量"
+        >要求成型重量</el-descriptions-item
+      >
+      <el-descriptions-item label="已成型重量">已成型重量</el-descriptions-item>
+      <el-descriptions-item label="未成型重量">未成型重量</el-descriptions-item>
+      <el-descriptions-item label="使用改型">使用改型</el-descriptions-item>
+      <el-descriptions-item label="备注" :span="5">备注</el-descriptions-item>
+    </el-descriptions>
+    <HeaderTitle title="产品需求信息"> </HeaderTitle>
+    <el-descriptions :column="5" border>
+      <el-descriptions-item label="产品编码">计划单号</el-descriptions-item>
+      <el-descriptions-item label="牌号">计划生产数量</el-descriptions-item>
+      <el-descriptions-item label="型号">已交货数量</el-descriptions-item>
+      <el-descriptions-item label="单重">未交货数量</el-descriptions-item>
+      <el-descriptions-item label="重量单位">计划创建人</el-descriptions-item>
+      <el-descriptions-item label="计量单位">计划类型</el-descriptions-item>
+      <el-descriptions-item label="产品层次4"
+        >计划生产重量</el-descriptions-item
+      >
+      <el-descriptions-item label="产品层次5">已交货重量</el-descriptions-item>
+      <el-descriptions-item label="包装要求">未交货重量</el-descriptions-item>
+      <el-descriptions-item label="物料描述" :span="3"
+        >计划创建时间</el-descriptions-item
+      >
+      <el-descriptions-item label="技术要求" :span="2"
+        >计划完成日期</el-descriptions-item
+      >
+      <el-descriptions-item label="印字要求" :span="2"
+        >要求成型数量</el-descriptions-item
+      >
+      <el-descriptions-item label="质量要求" :span="2"
+        >已成型数量</el-descriptions-item
+      >
+      <el-descriptions-item label="质量证书要求" :span="2"
+        >未成型数量</el-descriptions-item
+      >
+    </el-descriptions>
+    <HeaderTitle title="产品需求信息"> </HeaderTitle>
+    <ele-pro-table ref="table" :columns="columns" :datasource="[{}]">
+      <template v-slot:number="{ row }">
+        <el-progress
+          :percentage="20"
+          color="red"
+          :stroke-width="16"
+          :format="(percentage) => `${percentage}/100`"
+        ></el-progress>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        columns: [
+          {
+            prop: 'name',
+            label: '销售订单',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '行号',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '合同数量',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '合同重量',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '按单按库',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '交付要求',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '订单类型',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '下达时间',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'name',
+            label: '交付日期',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            action: 'number',
+            slot: 'number',
+            prop: 'name',
+            label: '已交付数量',
+
+            showOverflowTooltip: true,
+            minWidth: 300
+          },
+          {
+            prop: 'name',
+            label: '客户名称',
+
+            showOverflowTooltip: true,
+            minWidth: 110
+          }
+        ]
+      };
+    }
+  };
+</script>

src/views/productionPlan/components/detail/prod.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="pane-box">
+    <HeaderTitle title="生产信息"> </HeaderTitle>
+    <el-descriptions :column="5" border>
+      <el-descriptions-item label="生产版本">生产版本</el-descriptions-item>
+      <el-descriptions-item label="工单总数量">工单总数量</el-descriptions-item>
+      <el-descriptions-item label="生产工单数量"
+        >生产工单数量</el-descriptions-item
+      >
+      <el-descriptions-item label="改型工单数量"
+        >改型工单数量</el-descriptions-item
+      >
+      <el-descriptions-item label="改型生产数量"
+        >改型生产数量</el-descriptions-item
+      >
+      <el-descriptions-item label="已成型工单数量"
+        >已成型工单数量</el-descriptions-item
+      >
+      <el-descriptions-item label="产线">产线</el-descriptions-item>
+      <el-descriptions-item label="未开工数">未开工数</el-descriptions-item>
+      <el-descriptions-item label="首工序完成数量"
+        >首工序完成数量</el-descriptions-item
+      >
+      <el-descriptions-item label="首工序完成重量"
+        >首工序完成重量</el-descriptions-item
+      >
+      <el-descriptions-item label="首工序欠生产"
+        >首工序欠生产</el-descriptions-item
+      >
+      <el-descriptions-item label="首工序欠产重量"
+        >首工序欠产重量</el-descriptions-item
+      >
+      <el-descriptions-item label="工艺路线版本"
+        >工艺路线版本</el-descriptions-item
+      >
+      <el-descriptions-item label="完成工单数量"
+        >完成工单数量</el-descriptions-item
+      >
+      <el-descriptions-item label="首工序开始时间"
+        >首工序开始时间</el-descriptions-item
+      >
+      <el-descriptions-item label="预计交付时间"
+        >预计交付时间</el-descriptions-item
+      >
+      <el-descriptions-item label="成型完成时间"
+        >成型完成时间</el-descriptions-item
+      >
+      <el-descriptions-item label="生产完成时间"
+        >生产完成时间</el-descriptions-item
+      >
+    </el-descriptions>
+    <div class="progress-wrapper">
+      <div class="progress-item">
+        <div class="label"> 首工序完成数量 </div>
+        <el-progress
+          :percentage="20"
+          color="rgba(0, 191, 191, 1)"
+          :text-inside="true"
+          :stroke-width="16"
+        ></el-progress>
+      </div>
+      <div class="progress-item">
+        <div class="label"> 已成型数量 </div>
+        <el-progress
+          :percentage="20"
+          color="rgba(0, 191, 191, 1)"
+          :text-inside="true"
+          :stroke-width="16"
+        ></el-progress>
+      </div>
+      <div class="progress-item">
+        <div class="label"> 已交付数量 </div>
+        <el-progress
+          :percentage="20"
+          color="rgba(0, 191, 191, 1)"
+          :text-inside="true"
+          :stroke-width="16"
+        ></el-progress>
+      </div>
+      <div class="progress-item">
+        <div class="label"> 已完成工单 </div>
+        <el-progress
+          :percentage="20"
+          color="rgba(2, 125, 180, 1)"
+          :text-inside="true"
+          :stroke-width="16"
+        ></el-progress>
+      </div>
+    </div>
+
+    <ele-pro-table ref="table" :columns="columns" :datasource="[{}]">
+    </ele-pro-table>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        columns: [
+          {
+            type: 'index',
+            label: '序号',
+            align: 'center',
+            width: '80'
+          },
+          {
+            prop: 'name',
+            label: '工单号'
+          },
+          {
+            prop: 'name',
+            label: '计划开始时间'
+          },
+          {
+            prop: 'name',
+            label: '要求成型数量'
+          },
+          {
+            prop: 'name',
+            label: '首工序开始时间'
+          },
+          {
+            prop: 'name',
+            label: '已成型数量'
+          },
+          {
+            prop: 'name',
+            label: '已成型重量'
+          },
+          {
+            prop: 'name',
+            label: '成型完成时间'
+          },
+          {
+            prop: 'name',
+            label: '已交付数量'
+          },
+          {
+            prop: 'name',
+            label: '已交付重量'
+          },
+          {
+            prop: 'name',
+            label: '完成交付时间'
+          },
+          {
+            prop: 'name',
+            label: '生产周期'
+          },
+          {
+            prop: 'name',
+            label: '状态'
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .progress-wrapper {
+    padding: 10px 0;
+    .progress-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      .label {
+        width: 180px;
+      }
+      .el-progress {
+        flex: 1;
+      }
+    }
+  }
+</style>

src/views/productionPlan/detail.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <div class="page-title">
+        <el-page-header @back="$router.go(-1)" content="计划详情">
+        </el-page-header>
+      </div>
+      <el-tabs v-model="activeName">
+        <el-tab-pane label="计划信息" name="plan">
+          <plan />
+        </el-tab-pane>
+        <el-tab-pane label="物料信息表" name="material">
+          <material />
+        </el-tab-pane>
+        <el-tab-pane label="生产信息" name="prod"> <prod /></el-tab-pane>
+        <el-tab-pane label="甘特图" name="gant">
+          <gant />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import plan from './components/detail/plan.vue';
+  import material from './components/detail/material.vue';
+  import gant from './components/detail/gant.vue';
+  import prod from './components/detail/prod.vue';
+  export default {
+    components: { plan, material, prod, gant },
+    data () {
+      return {
+        activeName: 'plan'
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .pane-box {
+    padding: 20px 0;
+  }
+</style>

src/views/productionPlan/workOrderPublish.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="ele-body">
     <el-card shadow="never">
-      <HeaderTitle title="发布工单">
-        <el-button size="small" @click="$router.go(-1)">返回</el-button>
-      </HeaderTitle>
+      <div class="page-title">
+        <el-page-header @back="$router.go(-1)" content="发布工单">
+        </el-page-header>
+      </div>
 
       <el-descriptions title="" :column="6" border>
         <el-descriptions-item label="计划编号"