成品发货

src/views/order/base/orderManage/components/addWorkOrder.vue

@@ -5,8 +5,8 @@
         <el-form-item label="工单名称" prop="name" v-if='!isBind'>
           <el-input v-model="form.name"></el-input>
         </el-form-item>
-        <el-form-item label="产品名称" prop="orderId"  v-if='isBind'>
-          <el-select v-model="form.orderId" placeholder="请选择" style="width: 100%;">
+        <el-form-item label="工单名称" prop="workOrderId"  v-if='isBind'>
+          <el-select v-model="form.workOrderId" placeholder="请选择" style="width: 100%;" @change="getWorkOrderMsg">
             <el-option
               v-for="item in workOrderList"
               :key="item.id"
@@ -25,7 +25,7 @@
     <el-row>
       <el-col :span='12'>
         <el-form-item label="产品名称" prop="planProductId">
-          <el-select v-model="form.planProductId" placeholder="请选择" style="width: 100%;" @change="selectProduct">
+          <el-select v-model="form.planProductId" placeholder="请选择" :disabled="isBind"  style="width: 100%;" @change="selectProduct">
             <el-option
               v-for="item in productList"
               :key="item.id"
@@ -49,7 +49,8 @@
             type="datetime"
             value-format="yyyy-MM-dd HH:mm:ss"
             style="width: 100%;"
-            placeholder="选择日期">
+            placeholder="选择日期"
+            :disabled="isBind">
           </el-date-picker>
         </el-form-item>
       </el-col>
@@ -60,7 +61,8 @@
             type="datetime"
             value-format="yyyy-MM-dd HH:mm:ss"
             style="width: 100%;"
-            placeholder="选择日期">
+            placeholder="选择日期"
+            :disabled="isBind">
           </el-date-picker>
         </el-form-item>
       </el-col>
@@ -68,19 +70,19 @@
     <el-row>
       <el-col :span='12'>
         <el-form-item label="计划投入数量" prop="planAssignQuantity">
-          <el-input-number v-model="form.planAssignQuantity" :min="0" :max="9999999999999" style="width: 100%;"></el-input-number>
+          <el-input-number v-model="form.planAssignQuantity" :min="0" :max="9999999999999" :disabled="isBind" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
       <el-col :span='12'>
         <el-form-item label="计划生产数量" prop="planQuantity">
-          <el-input-number v-model="form.planQuantity" :min="0" :max="9999999999999" style="width: 100%;"></el-input-number>
+          <el-input-number v-model="form.planQuantity" :min="0" :max="9999999999999" :disabled="isBind" style="width: 100%;"></el-input-number>
         </el-form-item>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span='12'>
         <el-form-item label="关联工艺" prop="processFlowId">
-          <el-select v-model="form.processFlowId" placeholder="请选择" style="width: 100%;">
+          <el-select v-model="form.processFlowId" placeholder="请选择" :disabled="isBind" style="width: 100%;">
             <el-option
               v-for="item in processFlowList"
               :key="item.id"
@@ -92,7 +94,7 @@
       </el-col>
       <el-col :span='12'>
         <el-form-item label="物料计算方式" prop="materialMethod">
-          <el-radio-group v-model="form.materialMethod">
+          <el-radio-group v-model="form.materialMethod" :disabled="isBind">
             <el-radio :label="1">产品基础</el-radio>
             <el-radio :label="2">工艺扩展</el-radio>
           </el-radio-group>
@@ -102,7 +104,7 @@
     <el-row>
       <el-col :span='12'>
         <el-form-item label="优先级" prop="priority">
-          <el-select v-model="form.priority" placeholder="请选择" style="width: 100%;">
+          <el-select v-model="form.priority" placeholder="请选择" style="width: 100%;" :disabled="isBind">
             <el-option
               v-for="item in getDictDatas(DICT_TYPE.ORDER_PRIORITY)"
               :key="item.value"
@@ -114,7 +116,7 @@
       </el-col>
       <el-col :span='12'>
         <el-form-item label="工单类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择" style="width: 100%;">
+          <el-select v-model="form.type" placeholder="请选择" style="width: 100%;" :disabled="isBind">
             <el-option
               v-for="item in workOrderTypeList"
               :key="item.id"
@@ -128,7 +130,7 @@
     <el-row>
       <el-col :span='12'>
         <el-form-item label="关联产线" prop="productLineId">
-          <el-select v-model="form.productLineId" placeholder="请选择" multiple style="width: 100%;">
+          <el-select v-model="form.productLineId" placeholder="请选择" multiple style="width: 100%;" :disabled="isBind">
             <el-option
               v-for="item in productLineList"
               :key="item.id"
@@ -140,7 +142,7 @@
       </el-col>
       <el-col :span='12'>
         <el-form-item label="负责人" prop="workers">
-          <el-input v-model="form.workers"></el-input>
+          <el-input v-model="form.workers" :disabled="isBind"></el-input>
         </el-form-item>
       </el-col>
     </el-row>
@@ -155,8 +157,9 @@
 </template>
 <script>
 import { getProductAll } from '@/api/base/product'
-import { getProcessFlowList, getWorkOrderCode, orderIssue, workOrderList } from '@/api/base/orderManage'
+import { getProcessFlowList, getWorkOrderCode, orderIssue, workOrderList, getWorkOrderById } from '@/api/base/orderManage'
 import { getLineAll } from '@/api/base/productionLine'
+import moment from 'moment'
 export default {
   name: 'AddWorkOrder',
   data() {
@@ -185,7 +188,8 @@ export default {
         planProductId: [{ required: true, message: "产品名称不能为空", trigger: "change" }],
         planAssignQuantity: [{ required: true, message: "计划投入数量不能为空", trigger: "blur" }],
         planQuantity: [{ required: true, message: "计划生产数量不能为空", trigger: "blur" }],
-        productLineId: [{ required: true, message: "产品不能为空", trigger: "change" }]
+        productLineId: [{ required: true, message: "产线不能为空", trigger: "change" }],
+        planAssignmentQuantity: [{ required: true, message: "计划分配订单量不能为空", trigger: "blur" }]
       },
       productList: [],
       processFlowList: [],
@@ -202,7 +206,6 @@ export default {
   },
   methods: {
     init(id, param) {
-      console.log(id)
       this.form.orderId = id
       this.getList()
       if (param === 'add') {
@@ -249,33 +252,29 @@ export default {
     addWorkOrderSubmit() {
       this.$refs['addWorkOrder'].validate((valid) => {
         if (valid) {
-          this.form.planStartTime = this.planStartTime ? new Date(this.planStartTime).valueOf() : ''
-          this.form.planFinishTime = this.planFinishTime ? new Date(this.planFinishTime).valueOf() : ''
-          console.log(this.form)
-          orderIssue({ ...this.form }).then(res => {
-            if (res.code === 0) {
-              this.$modal.msgSuccess("操作成功")
-              this.$emit('addWorkOrderSubmit')
-            }
-          })
-          // if (this.isEdit) {
-          //   //编辑
-          //   orderUpdate({ ...this.form }).then((res) => {
-          //     if (res.code === 0) {
-          //       this.$modal.msgSuccess("操作成功");
-          //       this.$emit('successSubmit')
-          //     }
-          //   })
-          // } else {
-          //   this.form.status = 1
-          //   this.form.triggerOrigin = 1
-          //   orderCreate({ ...this.form }).then((res) => {
-          //     if (res.code === 0) {
-          //       this.$modal.msgSuccess("操作成功");
-          //       this.$emit('successSubmit')
-          //     }
-          //   })
-          // }
+          if (this.isBind) {
+            //绑定工单
+            orderIssue({
+              workOrderId: this.form.workOrderId,
+              orderId: this.form.orderId,
+              planAssignmentQuantity: this.form.planAssignmentQuantity
+             }).then((res) => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功")
+                this.$emit('addWorkOrderSubmit')
+              }
+            })
+          } else {
+            // 新增工单
+            this.form.planStartTime = this.planStartTime ? new Date(this.planStartTime).valueOf() : ''
+            this.form.planFinishTime = this.planFinishTime ? new Date(this.planFinishTime).valueOf() : ''
+            orderIssue({ ...this.form }).then(res => {
+              if (res.code === 0) {
+                this.$modal.msgSuccess("操作成功")
+                this.$emit('addWorkOrderSubmit')
+              }
+            })
+          }
         } else {
           return false
         }
@@ -283,6 +282,37 @@ export default {
     },
     formClear() {
       this.$refs.addWorkOrder.resetFields()
+      this.form.materialMethod = 1
+      this.form.planAssignQuantity = 0
+      this.form.planQuantity = 0
+      this.planFinishTime = ''
+      this.planStartTime = ''
+      this.form.planFinishTime = ''
+      this.form.planStartTime = ''
+      this.isBind = false
+    },
+    // 绑定工单，选择工单时获取工单信息
+    getWorkOrderMsg() {
+      if (this.form.workOrderId) {
+        getWorkOrderById({id:this.form.workOrderId}).then(res => {
+          if (res.code === 0) {
+            this.form.code = res.data.code
+            this.form.planProductId = res.data.planProductId
+            this.selectProduct(this.form.planProductId)
+            this.form.productSpec = res.data.productSpec
+            this.planStartTime = res.data.planStartTime ? moment.unix(res.data.planStartTime).format('YYYY-MM-DD HH:mm:ss') : null
+            this.planFinishTime = res.data.planFinishTime ? moment.unix(res.data.planFinishTime).format('YYYY-MM-DD HH:mm:ss') : null
+            this.form.planAssignQuantity = res.data.planAssignQuantity
+            this.form.planQuantity = res.data.planQuantity
+            this.form.processFlowId = res.data.processFlowId
+            this.form.materialMethod = res.data.materialMethod
+            this.form.priority = res.data.priority ? res.data.priority + '' : ''
+            this.form.productLineId = res.data.productLineIds
+            this.form.type = res.data.type
+            this.form.workers = res.data.workers
+          }
+        })
+      }
     }
   }
 }

src/views/order/base/orderManage/components/bindWorkOrder.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>111</div>
-</template>
-<script>
-export default {
-  name: 'BindWorkOrder',
-  data() {
-    return {}
-  }
-}
-</script>

src/views/order/base/orderManage/index.vue

@@ -50,28 +50,16 @@
       :before-close="addWorkOrderCancel"
       width='70%'
     >
-      <add-work-order ref="addWorkOrder" @successSubmit="addWorkOrderSubmit" />
+      <add-work-order ref="addWorkOrder" @addWorkOrderSubmit="addWorkOrderSubmit" />
     </base-dialog>
-    <!-- 绑定工单 -->
-    <!-- <base-dialog
-      dialogTitle="绑定工单"
-      :dialogVisible="bindWorkOrdervisible"
-      @cancel="bindWorkOrderCancel"
-      @confirm="bindWorkOrderConfirm"
-      :before-close="bindWorkOrderCancel"
-      width='70%'
-    >
-      <bind-work-order ref="bindWorkOrder" @successSubmit="bindWorkOrderSubmit" />
-    </base-dialog> -->
   </div>
 </template>
 <script>
 import { parseTime } from '@/utils/ruoyi'
-import { getOrderPage, orderDelete } from '@/api/base/orderManage'
+import { getOrderPage, orderDelete, customerList } from '@/api/base/orderManage'
 import OrderAdd from './components/orderAdd'
 import AddWorkOrder from './components/addWorkOrder'
-import BindWorkOrder from './components/bindWorkOrder'
-import { publicFormatter } from '@/utils/dict';
+import { publicFormatter } from '@/utils/dict'
 const tableProps = [
   {
     prop: 'createTime',
@@ -81,7 +69,9 @@ const tableProps = [
   },
   {
     prop: 'name',
-    label: '订单名称'
+    label: '订单名称',
+    minWidth: 120,
+    showOverflowtooltip: true
   },
   {
     prop: 'code',
@@ -90,7 +80,8 @@ const tableProps = [
   },
   {
     prop: 'customerId',
-    label: '客户(?)'
+    label: '客户',
+    showOverflowtooltip: true
   },
   {
     prop: 'triggerOrigin',
@@ -109,19 +100,22 @@ const tableProps = [
   },
   {
     prop: 'planQuantity',
-    label: '计划加工量'
+    label: '计划加工量',
+    width: 90
   },
   {
     prop: 'actualQuantity',
-    label: '实际加工量'
+    label: '实际加工量',
+    width: 90
   },
   {
-    prop: 'planProductId',
-    label: '产品(?)'
+    prop: 'productName',
+    label: '产品',
+    showOverflowtooltip: true
   },
   {
     prop: 'unit',
-    label: '单位(?)'
+    label: '单位'
   },
   {
     prop: 'price',
@@ -229,26 +223,39 @@ export default {
       centervisible: false,
       priorityList: this.getDictDatas(this.DICT_TYPE.ORDER_PRIORITY),
       workIssueTitle: '',
-      addWorkOrdervisible: false
-      // bindWorkOrdervisible: false
+      addWorkOrdervisible: false,
+      orderDetailVisible: false
     }
   },
-  components: { OrderAdd, AddWorkOrder, BindWorkOrder },
+  components: { OrderAdd, AddWorkOrder },
   created() {
     window.addEventListener('resize', () => {
       this.tableH = this.tableHeight(260)
     })
-    this.getSelectList()
-    this.getList();
+    this.getList()
   },
   methods: {
-    getSelectList() {
-      console.log(this.getDictDatas(this.DICT_TYPE.ORDER_PRIORITY))
-    },
     getList() {
       getOrderPage({...this.queryParams}).then(res => {
-        this.list = res.data.records || []
+        let arr = res.data.records || []
         this.total = res.data.total || 0
+        if (arr.length > 0) {
+          customerList().then(result => {
+            let tempData = result.data || []
+            if (tempData.length > 0) {
+              arr.map(item => {
+                for (let i of tempData) {
+                  if (item.customerId === i.id) {
+                    item.customerId = i.name
+                  }
+                }
+              })
+              this.list = arr
+            }
+          })
+        }else {
+          this.list = arr
+        }
       })
     },
     buttonClick(val) {
@@ -256,7 +263,7 @@ export default {
       if (val.btnName === 'search') {
         this.queryParams.name = val.name
         this.queryParams.status = val.status
-        if (val.timeVal.length > 0) {
+        if (val.timeVal && val.timeVal.length > 0) {
           this.queryParams.lastIssuedTime[0] = val.timeVal[0] + ' 00:00:00'
           this.queryParams.lastIssuedTime[1] = val.timeVal[1] + ' 23:59:59'
         } else {
@@ -285,6 +292,7 @@ export default {
           this.handleDelete(val.data)
           break
         case 'detail':
+          this.$router.push({ name: 'OrderDetailData', params: { orderId: val.data.id }})
           break
         case 'add':
           this.workIssueTitle = '新增工单'

src/views/order/base/orderManage/orderDetailData.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="orderDetailData">
+    <div class="box1">
+      <div class="boxTitle">
+        <span class="blueTitle"></span>
+        <span>订单编码: 432784632747238</span>
+      </div>
+      <div style="padding-left: 14px;">
+        <el-row>
+          <el-col :span='4'>
+            <div class="blodTip">订单名</div>
+            <div class="lightTip">{{orderMsg.name}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">产品信息</div>
+            <div class="lightTip">{{orderMsg.productName}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">产品规格</div>
+            <div class="lightTip">{{orderMsg.specifications}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">客户</div>
+            <div class="lightTip">{{orderMsg.customerName}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">包装规格</div>
+            <div class="lightTip">{{ getDictDataLabel(DICT_TYPE.PACK_SPEC, orderMsg.packSpec)}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">物料计算方式</div>
+            <div class="lightTip">{{orderMsg.materialMethod ? (orderMsg.materialMethod === 1 ? '产品基础' : '工艺扩展') : ''}}</div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span='4'>
+            <div class="blodTip">创建时间</div>
+            <div class="lightTip">{{ parseTime(orderMsg.triggerTime) }}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">计划开始时间</div>
+            <div class="lightTip">{{ parseTime(orderMsg.planStartTime) }}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">计划完成时间</div>
+            <div class="lightTip">{{ parseTime(orderMsg.planFinishTime) }}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">计划加工数量</div>
+            <div class="lightTip">{{orderMsg.planQuantity}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">加工平方数(平方米)</div>
+            <div class="lightTip">{{orderMsg.planArea}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">预计用时(时)</div>
+            <div class="lightTip">{{ orderMsg.expectTime }}</div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span='4'>
+            <div class="blodTip">状态</div>
+            <div class="lightTip">{{getDictDataLabel(DICT_TYPE.ORDER_STATUS, orderMsg.status)}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">实际开始时间</div>
+            <div class="lightTip">{{ parseTime(orderMsg.startProduceTime) }}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">实际完成时间</div>
+            <div class="lightTip">{{ parseTime(orderMsg.finishProduceTime) }}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">实际生产数量</div>
+            <div class="lightTip">{{orderMsg.actualQuantity	}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">完成比%</div>
+            <div class="lightTip">{{orderMsg.completeProp}}</div>
+          </el-col>
+          <el-col :span='4'>
+            <div class="blodTip">废片数量</div>
+            <div class="lightTip">{{orderMsg.nokQuantity}}</div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <div class="box2">
+      <div class="boxTitle">
+        <span class="blueTitle"></span>
+        <span>工单信息</span>
+      </div>
+      <!-- 列表 -->
+      <base-table
+        :page="queryParams.pageNo"
+        :limit="queryParams.pageSize"
+        :table-props="tableProps1"
+        :table-data="list1"
+        :max-height="tableH"
+      />
+    </div>
+    <div class="box3">
+      <div class="boxTitle">
+        <span class="blueTitle"></span>
+        <span>预计用料信息</span>
+      </div>
+      <!-- 列表 -->
+      <base-table
+        :page="queryParams.pageNo"
+        :limit="queryParams.pageSize"
+        :table-props="tableProps2"
+        :table-data="list2"
+        :max-height="tableH"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { parseTime } from '@/utils/ruoyi'
+import { publicFormatter } from '@/utils/dict';
+const tableProps1 = [
+  {
+    prop: 'issueTime',
+    label: '下发时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'name',
+    label: '工单名',
+    minWidth: 100,
+    showOverflowtooltip: true
+  },
+  {
+    prop: 'code',
+    label: '工单编码',
+    minWidth: 150
+  },
+  {
+    prop: 'planQuantity',
+    label: '计划加工量',
+    width: 90
+  },
+  {
+    prop: 'actualQuantity',
+    label: '实际加工量',
+    width: 90
+  },
+  {
+    prop: 'actualArea',
+    label: '加工平方数',
+    width: 90
+  },
+  {
+    prop: 'status',
+    label: '状态',
+    filter: publicFormatter('order_status')
+  },
+  {
+    prop: 'startProduceTime',
+    label: '开始时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'finishProduceTime',
+    label: '结束时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'productLineNames',
+    label: '关联产线',
+    filter: (val) => val.join(','),
+    showOverflowtooltip: true
+  },
+  {
+    prop: 'workers',
+    label: '负责人'
+  },
+  {
+    prop: 'remark',
+    label: '备注'
+  }
+]
+const tableProps2 = [
+  {
+    prop: 'materialName',
+    label: '物料名称'
+  },
+  {
+    prop: 'unit',
+    label: '单位',
+    filter: publicFormatter('unit_dict')
+  },
+  {
+    prop: 'num',
+    label: '剩余生产预计消耗'
+  }
+]
+import { orderDetail, bomUseNum } from '@/api/base/orderManage'
+export default {
+  name: 'OrderDetailData',
+  data() {
+    return {
+      orderId: '',
+      tableProps1,
+      tableProps2,
+      list1: [],
+      list2: [],
+      tableH: this.tableHeight(510) / 2,
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 500
+      },
+      orderMsg: {}
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(510) / 2
+    })
+    this.orderId = this.$route.params.orderId
+    this.getMsg()
+  },
+  watch: {
+    $route: 'initData'
+  },
+  methods: {
+    initData(to) {
+      if (to.name === 'OrderDetailData') {
+        this.orderId = this.$route.params.orderId
+        this.getMsg()
+      }
+    },
+    getMsg() {
+      orderDetail({
+        id: this.orderId
+      }).then(res => {
+        this.orderMsg = res.data
+        this.list1 = res.data.coreWorkOrderRespVOS
+        bomUseNum({
+          productId: this.orderMsg.planProductId
+        }).then(res2 => {
+          if (res2.data && res2.data.length > 0) {
+            let arr = res2.data
+            arr.map(item => {
+              if (item) {
+                item.num = item.num * this.orderMsg.remainingQuantity
+              }
+            })
+            this.list2 = arr
+          }else {
+            this.list2 = []
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.orderDetailData {
+  background-color: rgb(242, 244, 249);
+  .box1, .box2, .box3 {
+    background-color: #fff;
+    border-radius: 9px;
+  }
+  .box2 {
+    height: calc((100vh - 360px) / 2);
+    padding: 12px 16px 0;
+    margin: 8px 0;
+  }
+  .box1 {
+    height: 215px;
+    padding: 16px 16px 0 16px;
+    .blodTip {
+      height: 16px;
+      font-weight: 600;
+      color: rgba(0,0,0,0.85);
+      margin-bottom: 8px;
+    }
+    .lightTip {
+      height: 16px;
+      font-weight: 400;
+      color: rgba(102,102,102,0.75);
+      margin-bottom: 12px;
+    }
+  }
+  .box3 {
+    padding: 16px;
+    height: calc((100vh - 360px) / 2);
+    }
+  .boxTitle {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+    margin:0 10px 20px 0;
+  }
+  .blueTitle {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 18px;
+    background-color: #0B58FF;
+    border-radius: 1px;
+    margin-right: 8px;
+    vertical-align: bottom;
+  }
+}
+</style>

src/views/order/monitoring/orderCompletionMonitoring/index.vue

@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container orderMonitoring">
+    <!-- 搜索工作栏 -->
+    <search-bar
+      :formConfigs="formConfig"
+      ref="searchBarForm"
+      @headBtnClick="buttonClick"
+    />
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="数据列表" name="dataList">
+        <!-- 列表 -->
+        <base-table
+          :page="queryParams.pageNo"
+          :limit="queryParams.pageSize"
+          :table-props="tableProps"
+          :table-data="list"
+          :max-height="tableH"
+        >
+          <method-btn
+            v-if="tableBtn.length"
+            slot="handleBtn"
+            :width="250"
+            label="操作"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </el-tab-pane>
+      <el-tab-pane label="柱状图" name="barChart">
+        <div class="boxTitle">
+          <span class="blueTitle"></span>
+          <span>各订单环形图</span>
+        </div>
+        <div 
+          id="orderPieBar"
+          style="width: 182px; height: 180px;"
+        ></div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import { parseTime } from '@/utils/ruoyi'
+import { publicFormatter } from '@/utils/dict'
+import { orderMonitor, orderList } from '@/api/base/orderManage'
+const tableProps = [
+  {
+    prop: 'name',
+    label: '订单名称'
+  },
+  {
+    prop: 'customerName',
+    label: '客户'
+  },
+  {
+    prop: 'productname',
+    label: '产品'
+  },
+  {
+    prop: 'planStartTime',
+    label: '计划开始时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'planFinishTime',
+    label: '计划完成时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'status',
+    label: '订单状态',
+    filter: publicFormatter('order_priority')
+  },
+  {
+    prop: 'startProduceTime',
+    label: '实际开始时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'finishProduceTime',
+    label: '实际完成时间',
+    filter: parseTime,
+    minWidth: 150
+  },
+  {
+    prop: 'productLines',
+    label: '加工线',
+    filter: (val) => val ? val.join(',') : '',
+    minWidth: 180
+  },
+  {
+    prop: 'planQuantity',
+    label: '计划生产量',
+    width: 100
+  },
+  {
+    prop: 'actualquantity',
+    label: '实际产出量',
+    width: 100
+  },
+  {
+    prop: 'completeRate',
+    label: '订单完成率',
+    width: 100
+  },
+  {
+    prop: 'workOrderNum',
+    label: '关联工单数量',
+    width: 100
+  }
+]
+export default {
+  name: 'OrderCompletionMonitoring',
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'select',
+          label: '订单名称',
+          selectOptions: [],
+          param: 'name'
+        },
+        {
+          type: 'datePicker',
+          label: '时间段',
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: "yyyy-MM-dd",
+          rangeSeparator: '-',
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          param: 'timeVal',
+          defaultSelect: [],
+          width: 250
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      activeName: 'barChart',
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 20,
+        name: null,
+        startProduceTime: []
+      },
+      tableProps,
+      list: [],
+      tableH: this.tableHeight(270),
+      total: 0,
+      tableBtn: [
+      this.$auth.hasPermi('base:group-team:update')
+          ? {
+              type: 'orderDetail',
+              btnName: '工单详情'
+            }
+          : undefined,
+      this.$auth.hasPermi('base:group-team:update')
+          ? {
+              type: 'qualityDetail',
+              btnName: '质量详情'
+            }
+          : undefined,
+      this.$auth.hasPermi('base:group-team:update')
+          ? {
+              type: 'sendOutDetail',
+              btnName: '发货详情'
+            }
+          : undefined
+      ].filter((v) => v),
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = this.tableHeight(270)
+    })
+    this.getOrderList()
+    this.getPage()
+  },
+  methods: {
+    getOrderList() {
+      orderList({}).then(res => {
+        this.formConfig[0].selectOptions = res.data || []
+      })
+    },
+    getPage() {
+      orderMonitor({...this.queryParams}).then(res => {
+        this.list = res.data || []
+        this.getPieChart()
+      })
+    },
+    // 饼图
+    getPieChart() {
+      var chartDom = document.getElementById('orderPieBar');
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        color:['#288AFF','#7164FF','#fff','#63BDFF','#8EF0AB','#FFCE6A'],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['92%', '100%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              position: 'center'
+            },
+            emphasis: {
+              disabled: true,
+              scale:false,
+              scaleSize: 0
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1000, name: '1' }
+            ]
+          },
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['84%', '92%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              disabled: true,
+              scale:false,
+              scaleSize: 0
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 50 ,name: '2' },
+              { value: 500, name: 'xxx' }
+            ]
+          },
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['76%', '84%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              disabled: true,
+              scale:false,
+              scaleSize: 0
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 250, name: '3' },
+              { value: 750, name: 'xxx' }
+            ]
+          },
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['68%', '76%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              disabled: true,
+              scale:false,
+              scaleSize: 0
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 800, name: '4' },
+              { value: 1048, name: 'xxx' }
+            ]
+          },
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['60%', '68%'],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              disabled: true,
+              scale:false,
+              scaleSize: 0
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1000, name: '5' },
+              { value: 1048, name: 'xxx' }
+            ]
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+    },
+    // 查询
+    buttonClick(val) {
+      this.queryParams.name = val.name
+      if (val.timeVal && val.timeVal.length > 0) {
+        this.queryParams.startProduceTime[0] = val.timeVal[0] + ' 00:00:00'
+        this.queryParams.startProduceTime[1] = val.timeVal[1] + ' 23:59:59'
+      } else {
+        this.queryParams.startProduceTime = []
+      }
+      this.getPage()
+    },
+    handleClick() {}
+  }
+}
+</script>
+<style lang='scss'>
+.orderMonitoring {
+  .el-tabs__nav::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background-color: #e4e7ed;
+    /* z-index: 1; */
+  }
+  .el-tabs__nav-wrap::after {
+    width: 0;
+  }
+  .el-tabs__item {
+    padding: 0 10px;
+  }
+  .el-tabs__item:hover {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item.is-active {
+    color: rgba(0, 0, 0, 0.85);
+  }
+  .el-tabs__item {
+    color: rgba(0, 0, 0, 0.45);
+  }
+  .boxTitle {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 400;
+    color: #000000;
+    margin:0 10px 20px 0;
+  }
+  .blueTitle {
+    content: '';
+    display: inline-block;
+    width: 4px;
+    height: 18px;
+    background-color: #0B58FF;
+    border-radius: 1px;
+    margin-right: 8px;
+    vertical-align: bottom;
+  }
+}
+</style>