init

src/views/orderManage/components/HeadForm.vue

@@ -0,0 +1,183 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-04-15 10:05:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-15 10:05:39
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\orderManage\components\HeadForm.vue
+-->
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:18:27
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-11 11:25:26
+ * @Description:
+-->
+<template>
+  <el-form :inline="true" @keyup.enter.native="getDataList()">
+    <el-form-item v-for="(item, index) in keyName" :key="index" :label="item.name">
+      <el-input v-if="item.type === 'input'" v-model="key[index]" style="width:150px" :placeholder="placeholderName[index]" clearable />
+      <el-select v-if="item.type === 'select'" v-model="key[index]" style="width:150px" :placeholder="placeholderName[index]" clearable>
+        <!-- 这里用 :value="i.alarmId" :label="i.alarmGrade"  可以将数据传进select -->
+        <el-option v-for="i in item.option" :key="i.value" :value="i.value" :label="i.label" />
+      </el-select>
+      <el-date-picker
+        v-if="item.type === 'datePicker'"
+        v-model="key[index]"
+        type="daterange"
+        align="right"
+        unlink-panels
+        :range-separator="'formItem.to' | i18nFilter"
+        :start-placeholder="'formItem.beginTime' | i18nFilter"
+        :end-placeholder="'formItem.endTime' | i18nFilter"
+        :picker-options="pickerOptions"
+      />
+    </el-form-item>
+    <el-form-item>
+      <el-button @click="getDataList()">{{ searchTitle | i18nFilter }}</el-button>
+      <el-button v-if="showAdd" type="primary" @click="addNew()">{{ addTitle | i18nFilter }}</el-button>
+      <el-button v-if="showExportTemplate" type="success" @click="exportTemplate()">{{ exportTemplateTitle | i18nFilter }}</el-button>
+      <el-button v-if="showExport" type="success" @click="exportFile()">{{ exportTitle | i18nFilter }}</el-button>
+      <el-upload
+        v-if="showImport"
+        class="upload-demo"
+        style="display: inline-block"
+        :on-success="importFile"
+        :action="importUrl"
+        :show-file-list="false"
+      >
+        <el-button type="success">{{ importTitle | i18nFilter }}</el-button>
+      </el-upload>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+
+export default {
+  props: {
+    keyName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    showAdd: {
+      type: Boolean,
+      default: () => {
+        return true
+      }
+    },
+    showExportTemplate: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    showExport: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    showImport: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    },
+    placeholderName: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    importUrl: {
+      type: String,
+      default: ''
+    },
+    searchTitle: {
+      type: String,
+      default: 'btn.search'
+    },
+    addTitle: {
+      type: String,
+      default: 'btn.add'
+    },
+    exportTitle: {
+      type: String,
+      default: 'btn.export'
+    },
+    importTitle: {
+      type: String,
+      default: 'btn.import'
+    },
+    exportTemplateTitle: {
+      type: String,
+      default: 'btn.exportTemplate'
+    }
+  },
+  data() {
+    return {
+      key: [],
+      pickerOptions: {
+        shortcuts: [{
+          text: this.$t('datePickerOption.lastWeek'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastMonth'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: this.$t('datePickerOption.lastThreeMonths'),
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.keyName.map(item => {
+      if (item.type === 'datePicker') {
+        this.key.push([])
+      } else {
+        this.key.push(null)
+      }
+    })
+  },
+  methods: {
+    getDataList() {
+      this.$emit('getDataList', this.key)
+    },
+    addNew() {
+      this.$emit('addNew')
+    },
+    exportTemplate() {
+      this.$emit('exportTemplate')
+    },
+    exportFile() {
+      this.$emit('exportFile', this.key)
+    },
+    importFile(response, file, fileList) {
+      this.$emit('importFile', response, file, fileList)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/orderManage/components/detailBtn.vue

@@ -0,0 +1,41 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-20 15:17:31
+ * @FilePath:
+ * @Description:
+-->
+<template>
+  <div>
+    <span>
+      <el-button type="text" size="small" @click="emitClick">{{ 'routerTitle.order.workOrderManage.tagDetail' | i18nFilter }}</el-button>
+    </span>
+    <tag-detail v-if="tagDetailVisible" ref="tagDetail" :packaging-box-id="injectData.id" />
+  </div>
+</template>
+
+<script>
+import tagDetail from './tagDetail'
+export default {
+  components: { tagDetail },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      tagDetailVisible: false
+    }
+  },
+  methods: {
+    emitClick() {
+      this.tagDetailVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagDetail.init()
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/components/mapColumn.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 11:22:36
+ * @Description:
+-->
+<template>
+  <span>
+    {{ injectData[injectData.prop] ? injectData[injectData.prop].map(item => {
+      return item.name
+    }).join(',') : '' }}
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>

src/views/orderManage/components/powerClassification-add.vue

@@ -0,0 +1,135 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-05-28 16:16:27
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.orderManage.powerClassification.typeName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.powerClassification.typeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.powerClassification.typeCode')" prop="code">
+        <el-input v-model="dataForm.code" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.powerClassification.typeCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.powerClassification.parentClass')" prop="parentId">
+        <el-cascader
+          ref="cascader"
+          v-model="dataForm.parentId"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.powerClassification.parentClass')])"
+          :props="{ checkStrictly: true,value: 'id',label: 'name' }"
+          :options="parentArr"
+          filterable
+          clearable
+          @change="setParent"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { powerClassificationTree, powerClassificationDetail, powerClassificationUpdate, powerClassificationAdd, powerClassificationCode } from '@/api/orderManage/powerClassification'
+
+export default {
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        name: '',
+        code: '',
+        parentId: '',
+        parentName: '',
+        remark: ''
+      },
+      parentArr: [],
+      dataRule: {
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.powerClassification.typeName')]),
+            trigger: 'blur' }
+        ],
+        parentId: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.powerClassification.parentClass')]),
+            trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.visible = true
+      this.parentArr.splice(0, this.parentArr.length)
+      powerClassificationTree().then(res => {
+        this.parentArr = res.data
+      })
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          powerClassificationDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+          })
+        } else {
+          powerClassificationCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = this.dataForm
+          data.parentId = data.parentId[data.parentId.length - 1]
+          if (this.dataForm.id) {
+            powerClassificationUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            powerClassificationAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    setParent(val) {
+      this.dataForm.parentName = this.$refs['cascader'].getCheckedNodes()[0].pathLabels[this.$refs['cascader'].getCheckedNodes()[0].pathLabels.length - 1]
+    }
+  }
+}
+</script>

src/views/orderManage/components/statusColumn.vue

@@ -0,0 +1,18 @@
+<template>
+  <span>
+    {{ injectData.status ? injectData.statusObj[String(injectData.status)] : '' }}
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>

src/views/orderManage/components/substrateBatchAttr-add.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 18:39:46
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="40%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">
+      {{ !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}
+    </div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.basicData.visual.AttributeName')" prop="attrName">
+        <el-input v-model="dataForm.attrName" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.basicData.visual.AttributeValue')" prop="attrValue">
+        <el-input v-model="dataForm.attrValue" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.AttributeValue')])" clearable />
+      </el-form-item>
+    </el-form>
+    <div class="drawer-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" :loading="btnLoading" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { substrateBatchAttrDetail, substrateBatchAttrUpdate, substrateBatchAttrAdd } from '@/api/orderManage/substrateBatchAttr'
+
+export default {
+  props: {
+    subId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      btnLoading: false,
+      dataForm: {
+        id: 0,
+        attrName: '',
+        attrValue: ''
+      },
+      dataRule: {
+        attrName: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeName')]), trigger: 'blur' }
+        ],
+        attrValue: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.visual.AttributeValue')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.dataForm.id = id || ''
+      this.btnLoading = false
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          substrateBatchAttrDetail(this.dataForm.id).then(res => {
+            this.dataForm.attrName = res.data.name
+            this.dataForm.attrValue = res.data.value
+          })
+        }
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.btnLoading = true
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'name': this.dataForm.attrName,
+            'value': this.dataForm.attrValue,
+            'subId': this.subId,
+            'id': this.dataForm.id
+          }
+          if (this.dataForm.id) {
+            substrateBatchAttrUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            substrateBatchAttrAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>

src/views/orderManage/components/substrateBatchAttr.vue

@@ -0,0 +1,235 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-31 11:24:59
+ * @enName:
+-->
+<template>
+  <div style="margin:20px">
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px;margin:20px">{{ isdetail? 'btn.detail' : !dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter }}</div>
+    <div style="margin:0 15px">
+      <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
+        <el-form-item :label="$t('module.orderManage.substrateBatch.batchName')" prop="name">
+          <el-input v-model="dataForm.name" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.substrateBatch.batchName')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.orderManage.substrateBatch.batchCode')" prop="code">
+          <el-input v-model="dataForm.code" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.substrateBatch.batchCode')])" clearable />
+        </el-form-item>
+        <el-form-item :label="$t('module.basicData.visual.Remarks')" prop="remark">
+          <el-input v-model="dataForm.remark" :disabled="isdetail" :placeholder="$i18nForm(['placeholder.input', $t('module.basicData.visual.Remarks')])" clearable />
+        </el-form-item>
+      </el-form>
+      <div style="margin:20px">
+        <el-button type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <el-button v-if="isdetail" type="primary" @click="goEdit()">{{ 'btn.edit' | i18nFilter }}</el-button>
+        <span v-if="!isdetail">
+          <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.save' | i18nFilter }}</el-button>
+          <el-button v-if="listQuery.subId" type="primary" @click="addNew()">{{ 'btn.addattr' | i18nFilter }}</el-button>
+        </span>
+      </div>
+      <div style="height:380px;overflow:auto">
+        <base-table
+          :page="listQuery.current"
+          :limit="listQuery.size"
+          :table-config="tableProps"
+          :table-data="list"
+        >
+          <method-btn
+            v-if="!isdetail"
+            slot="handleBtn"
+            :method-list="tableBtn"
+            @clickBtn="handleClick"
+          />
+        </base-table>
+      </div>
+    </div>
+    <substrate-batch-attr-add v-if="addOrUpdateVisible" ref="addOrUpdate" :sub-id="listQuery.subId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { substrateBatchDetail, substrateBatchUpdate, substrateBatchAdd, substrateBatchCode } from '@/api/orderManage/substrateBatch'
+import { substrateBatchAttrList, substrateBatchAttrDelete } from '@/api/orderManage/substrateBatchAttr'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import substrateBatchAttrAdd from './substrateBatchAttr-add'
+import { timeFormatter } from '@/filters'
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.basicData.visual.AttributeName'),
+    align: 'center'
+  },
+  {
+    prop: 'value',
+    label: i18n.t('module.basicData.visual.AttributeValue'),
+    align: 'center'
+  }
+]
+
+export default {
+  components: { BaseTable, MethodBtn, substrateBatchAttrAdd },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      dataForm: {
+        name: '',
+        code: '',
+        enName: '',
+        abbr: '',
+        category: '',
+        description: '',
+        remark: ''
+      },
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialName')]), trigger: 'blur' }
+        ],
+        code: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.basicData.material.MaterialCoding')]), trigger: 'blur' }
+        ]
+      },
+      listQuery: {
+        current: 1,
+        size: 990,
+        subId: ''
+      },
+      isdetail: false
+    }
+  },
+  created() {
+    this.listQuery.subId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.isdetail = false
+      this.isdetail = Boolean(this.$route.query.isdetail)
+      this.list.splice(0, this.list.length)
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.listQuery.subId) {
+          substrateBatchDetail(this.listQuery.subId).then(res => {
+            this.dataForm = res.data
+          })
+          substrateBatchAttrList(this.listQuery).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+          })
+        } else {
+          substrateBatchCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    getList() {
+      substrateBatchAttrList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          substrateBatchAttrDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dataForm.id = this.listQuery.subId
+          const data = this.dataForm
+          if (this.listQuery.subId) {
+            substrateBatchUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+            })
+          } else {
+            substrateBatchAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500
+              })
+              this.listQuery.subId = res.data.id
+            })
+          }
+        }
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    goEdit() {
+      this.isdetail = false
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  border-bottom: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>

src/views/orderManage/components/tagDetail.vue

@@ -0,0 +1,197 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-21 09:33:06
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="55%"
+  >
+    <div
+      slot="title"
+      style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px"
+    >
+      {{ "routerTitle.order.workOrderManage.tagDetail" | i18nFilter }}
+    </div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span><b>{{ "BOX_ID：" + dataForm.id }}</b></span>
+        <el-button
+          type="primary"
+          style="float:right"
+          size="small"
+          @click="btnClickPrint"
+        >{{ "btn.print" | i18nFilter }}</el-button>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col
+            :span="6"
+          ><div>{{ "Power：" + dataForm.power }}</div></el-col>
+          <el-col
+            :span="6"
+          ><div>{{ "SAP Material：" + dataForm.sapMaterial }}</div></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <div id="tablePrint">
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-config="tableProps"
+        :table-data="list"
+        :is-loading="listLoading"
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import {
+  packagingDetail,
+  packagingBoxList
+} from '@/api/orderManage/workOrder/workOrder'
+// import { timeFormatter } from '@/filters'
+import { getLodop } from '@/assets/libs/LodopFuncs.js'
+import { getInfo } from '@/api/packing-manage/packing-label.js'
+const tableProps = [
+  {
+    prop: 'woSubstrateId',
+    label: i18n.t('module.orderManage.packingTags.moduleId'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'finishProduceTime',
+  //   label: i18n.t('module.orderManage.packingTags.UnloadingTime'),
+  //   align: 'center'
+  // },
+  // {
+  //   prop: 'name',
+  //   label: i18n.t('module.orderManage.packingTags.UnloadingEquipment'),
+  //   align: 'center',
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'oneCode',
+    label: i18n.t('module.orderManage.packingTags.oneDimensionalCode'),
+    align: 'center'
+  }
+]
+export default {
+  components: { BaseTable },
+  props: {
+    packagingBoxId: {
+      type: String,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      dataForm: {},
+      listQuery: {
+        current: 1,
+        size: 500
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listLoading = true
+      packagingDetail(this.packagingBoxId).then(res => {
+        this.dataForm = res.data
+      })
+      this.getList()
+    },
+    getList() {
+      this.listQuery.packagingBoxId = this.packagingBoxId
+      this.listLoading = true
+      packagingBoxList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.listLoading = false
+      })
+    },
+    // btnClickPrint() {
+    //   const LODOP = getLodop()
+    //   const strHTML = document.getElementById('tablePrint').innerHTML
+    //   LODOP.ADD_PRINT_HTM(30, 5, '100%', '80%', strHTML) // 装载模板
+    //   LODOP.PREVIEW()
+    // }
+    btnClickPrint() {
+      getInfo({ id: '1387070313172353025' }).then(res => {
+        this.printPreview('预览', res.data.content)
+      })
+    },
+    printPreview(name = '预览', modelCode) {
+      console.log(modelCode)
+      const LODOP = getLodop()
+      LODOP.PRINT_INIT(name)
+      const aaa = LODOP.ADD_PRINT_DATA('ProgramData', modelCode)
+      console.log(aaa)
+      const obj = {
+        time: this.dataForm.packagingTime,
+        orderCode: this.orderCode,
+        power: this.dataForm.power,
+        sapMaterial: this.dataForm.sapMaterial,
+        BarCode: this.dataForm.boxNo
+      }
+      this.list.forEach((item, index) => {
+        const str = 'modul' + (index + 1)
+        obj[str] = item.woSubstrateId
+      })
+      Object.keys(obj).forEach(key => {
+        LODOP.SET_PRINT_STYLEA(key, 'CONTENT', obj[key])
+      })
+      LODOP.NewPageA()
+      LODOP.PREVIEW()
+    },
+    print(name = '打印') {
+      console.log(name, this.currentIndex)
+      // 装载模板
+      const modelCode = this.printModels[this.currentIndex].printModelContent
+      console.log(modelCode)
+      this.objs.forEach(obj => {
+        const LODOP = getLodop() // 调用getLodop获取LODOP对象
+        LODOP.PRINT_INIT(name)
+        const aaa = LODOP.ADD_PRINT_DATA('ProgramData', modelCode)
+        console.log(aaa)
+        obj.partCode = obj.itemCode
+        obj.productTypeName = obj.itemTypeName
+        Object.keys(obj).forEach(key => {
+          LODOP.SET_PRINT_STYLEA(key, 'CONTENT', obj[key])
+        })
+        // LODOP.ADD_PRINT_HTM(10, 10, 350, 600, `--------${index}----------`);
+        LODOP.NewPageA()
+        LODOP.PRINT()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>

src/views/orderManage/components/unitColumn.vue

@@ -0,0 +1,27 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-04-20 10:25:35
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 10:29:32
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\orderManage\components\unitColumn.vue
+-->
+
+<template>
+  <span>
+    {{ (injectData.dictDataId || injectData.unitCode) ? injectData.unitObj[String(injectData.dictDataId || injectData.unitCode)] : '' }}
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>

src/views/orderManage/consumption/consumption.vue

@@ -0,0 +1,123 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-21 16:13:20
+ * @LastEditTime: 2021-07-21 17:32:59
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\orderManage\consumption\consumption.vue
+-->
+<template>
+  <div>
+    <div class="method-btn-area">
+      <el-input v-model="listQuery.key" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.consumption.workOrderId')])" filterable clearable style="width: 200px;" />
+      <!-- <el-select v-model="listQuery.workerId" :placeholder="$t('module.equipmentManager.eqManagerManage.worker')" clearable style="width: 200px;">
+        <el-option
+          v-for="item in workerList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select> -->
+      <el-button type="primary" @click="getList">{{ 'btn.search' | i18nFilter }}</el-button>
+    </div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList1()"
+    />
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import i18n from '@/lang'
+import { getPower } from '@/api/orderManage/order/order'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'workOrderId',
+    label: i18n.t('module.orderManage.consumption.workOrderId'),
+    align: 'center'
+  },
+  {
+    prop: 'power',
+    label: i18n.t('module.orderManage.consumption.power'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderStatus',
+    label: i18n.t('module.orderManage.consumption.workOrderStatus'),
+    align: 'center'
+  }
+]
+export default {
+  components: {
+    BaseTable,
+    Pagination,
+    MethodBtn
+  },
+  data() {
+    return {
+      tableProps,
+      tableBtn,
+      list: [],
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        key: ''
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getPower(this.listQuery).then(res => {
+        if (res.code === 0) {
+          this.list = res.data.records
+          this.listLoading = false
+        }
+      })
+      // this.list = result.data.records
+    },
+    handleClick(raw) {
+      const id = raw.data.workOrderId
+      this.$router.push({
+        path: '/powerList',
+        query: {
+          id
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/orderManage/consumption/list.vue

@@ -0,0 +1,94 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-07-21 17:08:01
+ * @LastEditTime: 2021-07-21 17:33:37
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \mt-bus-fe\src\views\orderManage\consumption\list.vue
+-->
+<template>
+  <div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList1()"
+    />
+  </div>
+</template>
+
+<script>
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import i18n from '@/lang'
+import { getPower } from '@/api/orderManage/order/order'
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'equipmentName',
+    label: i18n.t('module.orderManage.consumption.equipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'power',
+    label: i18n.t('module.orderManage.consumption.power'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderStatus',
+    label: i18n.t('module.orderManage.consumption.workOrderStatus'),
+    align: 'center'
+  }
+]
+export default {
+  components: {
+    BaseTable,
+    Pagination
+  },
+  data() {
+    return {
+      tableProps,
+      tableBtn,
+      list: [],
+      listLoading: true,
+      total: 0,
+      listQuery: {
+        current: 1,
+        size: 10,
+        workOrderId: this.$route.query.id
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      console.log(this.listQuery.workOrderId)
+      getPower(this.listQuery).then(res => {
+        if (res.code === 0) {
+          this.list = res.data.records
+          this.listLoading = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/orderManage/erpToMesData.vue

@@ -0,0 +1,237 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-06-24 15:21:19
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 16:45:26
+ * @Description:
+-->
+<template>
+  <div style="padding:10px">
+    <span>{{ $t('module.orderManage.erpToMes.erpToMesMaterial') }}</span>
+    <base-table
+      :page="listQuery1.current"
+      :limit="listQuery1.size"
+      :table-config="tableProps1"
+      :table-data="list1"
+      :is-loading="listLoading1"
+    />
+    <pagination
+      v-show="total1 > 0"
+      :total="total1"
+      :page.sync="listQuery1.current"
+      :limit.sync="listQuery1.size"
+      @pagination="getList1()"
+    />
+    <hr>
+    <span>{{ $t('module.orderManage.erpToMes.erpToMesMaterialBom') }}</span>
+    <base-table
+      :page="listQuery2.current"
+      :limit="listQuery2.size"
+      :table-config="tableProps2"
+      :table-data="list2"
+      :is-loading="listLoading2"
+    />
+    <pagination
+      v-show="total2 > 0"
+      :total="total2"
+      :page.sync="listQuery2.current"
+      :limit.sync="listQuery2.size"
+      @pagination="getLis2()"
+    />
+    <hr>
+    <span>{{ $t('module.orderManage.erpToMes.erpToMesOrder') }}</span>
+    <base-table
+      :page="listQuery3.current"
+      :limit="listQuery3.size"
+      :table-config="tableProps3"
+      :table-data="list3"
+      :is-loading="listLoading3"
+    />
+    <pagination
+      v-show="total3 > 0"
+      :total="total3"
+      :page.sync="listQuery3.current"
+      :limit.sync="listQuery3.size"
+      @pagination="getList3()"
+    />
+  </div>
+</template>
+
+<script>
+import { erpToMesMaterialList, erpToMesMaterialBomList, erpToMesOrderList } from '@/api/orderManage/erpToMes'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import i18n from '@/lang'
+
+const tableProps1 = [
+  {
+    prop: 'batchNumber',
+    label: i18n.t('module.orderManage.erpToMes.batchNumber'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsCode',
+    label: i18n.t('module.orderManage.erpToMes.materialsCode'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsName',
+    label: i18n.t('module.orderManage.erpToMes.materialsName'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.orderManage.erpToMes.quantity'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.orderManage.erpToMes.unit'),
+    align: 'center'
+  }
+]
+const tableProps2 = [
+  {
+    prop: 'bomContent',
+    label: i18n.t('module.orderManage.erpToMes.bomContent'),
+    align: 'center'
+  },
+  {
+    prop: 'craftCode',
+    label: i18n.t('module.orderManage.erpToMes.craftCode'),
+    align: 'center'
+  },
+  {
+    prop: 'craftName',
+    label: i18n.t('module.orderManage.erpToMes.craftName'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsBomCode',
+    label: i18n.t('module.orderManage.erpToMes.materialsBomCode'),
+    align: 'center'
+  },
+  {
+    prop: 'materialsBomName',
+    label: i18n.t('module.orderManage.erpToMes.materialsBomName'),
+    align: 'center'
+  },
+  {
+    prop: 'substrateBatch',
+    label: i18n.t('module.orderManage.erpToMes.substrateBatch'),
+    align: 'center'
+  }
+]
+const tableProps3 = [
+  {
+    prop: 'customerCode',
+    label: i18n.t('module.orderManage.erpToMes.customerCode'),
+    align: 'center'
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.erpToMes.customerName'),
+    align: 'center'
+  },
+  {
+    prop: 'orderCode',
+    label: i18n.t('module.orderManage.erpToMes.orderCode'),
+    align: 'center'
+  },
+  {
+    prop: 'orderName',
+    label: i18n.t('module.orderManage.erpToMes.orderName'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.orderManage.erpToMes.quantity'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ErpToMesData',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      tableProps1,
+      tableProps2,
+      tableProps3,
+      list1: [],
+      list2: [],
+      list3: [],
+      total1: 0,
+      total2: 0,
+      total3: 0,
+      listLoading1: true,
+      listLoading2: true,
+      listLoading3: true,
+      listQuery1: {
+        current: 1,
+        size: 10
+      },
+      listQuery2: {
+        current: 1,
+        size: 10
+      },
+      listQuery3: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList1()
+    this.getList2()
+    this.getList3()
+  },
+  methods: {
+    getList1() {
+      this.listLoading1 = true
+      erpToMesMaterialList(this.listQuery1).then(response => {
+        if (response.data.records) {
+          this.list1 = response.data.records
+        } else {
+          this.list1.splice(0, this.list1.length)
+        }
+        this.total1 = response.data.total
+        this.listLoading1 = false
+      })
+    },
+    getList2() {
+      this.listLoading2 = true
+      erpToMesMaterialBomList(this.listQuery2).then(response => {
+        if (response.data.records) {
+          this.list2 = response.data.records
+        } else {
+          this.list2.splice(0, this.list2.length)
+        }
+        this.total2 = response.data.total
+        this.listLoading2 = false
+      })
+    },
+    getList3() {
+      this.listLoading3 = true
+      erpToMesOrderList(this.listQuery3).then(response => {
+        if (response.data.records) {
+          this.list3 = response.data.records
+        } else {
+          this.list3.splice(0, this.list3.length)
+        }
+        this.total3 = response.data.total
+        this.listLoading3 = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  background-color: #ECF5FF;
+  font-size: 20px;
+  padding: 5px;
+  color: #409EFF;
+}
+</style>

src/views/orderManage/fee/components/AddDetailForm.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-dialog :title="'btn.add' | i18nFilter" :visible.sync="visible" @closed="handleClosed">
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="dataRule"
+      label-width="100px"
+    >
+      <el-form-item
+        :label="this.$t('module.orderManage.feeInfo.orderName')"
+        prop="orderId"
+      >
+        <el-select
+          v-model="dataForm.orderId"
+          filterable
+          :placeholder="this.$t('module.orderManage.feeInfo.orderName')"
+          @change="selectOrder()"
+        >
+          <el-option
+            v-for="item in list"
+            :key="item.orderId"
+            :label="item.name"
+            :value="item.orderId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="this.$t('module.orderManage.feeInfo.orderCode')"
+        prop="code"
+      >
+        <el-input
+          v-model="dataForm.code"
+          clearable
+          :placeholder="this.$t('module.orderManage.feeInfo.orderCode')"
+          disabled
+        />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ 'btn.cancel' | i18nFilter }}
+      </el-button>
+      <el-button type="primary" @click="dataFormSubmit()">
+        {{ 'btn.confirm' | i18nFilter }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { listForAdd } from '@/api/orderManage/fee/fee'
+import { orderAdd } from '@/api/orderManage/fee/fee'
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+      visible: false,
+      list: '',
+      dataForm: {
+        code: '',
+        orderId: ''
+      },
+      dataRule: {
+        orderId: [
+          { required: true, message: this.$t('module.orderManage.feeInfo.orderName'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      listForAdd().then(res => {
+        this.list = res.data
+      })
+    },
+    selectOrder() {
+      this.list.map(item => {
+        if (item.orderId === this.dataForm.orderId) {
+          this.dataForm.code = item.code
+        }
+      })
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          orderAdd({ orderId: this.dataForm.orderId }).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.handleClosed()
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    },
+    handleClosed() {
+      this.$refs['dataForm'].resetFields()
+      this.visible = false
+    }
+  }
+}
+</script>
+

src/views/orderManage/fee/components/EditDetail.vue

@@ -0,0 +1,418 @@
+<template>
+  <el-dialog :title="'btn.edit' | i18nFilter" :visible.sync="visible" @closed="handleClosed">
+    <div>
+      <ul style="list-style: none;display: flex;text-align: left;">
+        <li style="width: 50%;">{{ this.$t('module.orderManage.order.OrderName') | i18nFilter }}： {{ orderName }}</li>
+        <li style="width: 50%;">{{ this.$t('module.orderManage.order.OrderCode') | i18nFilter }}： {{ orderCode }}</li>
+      </ul>
+    </div>
+    <!-- 新增编辑 -->
+    <template>
+      <el-divider content-position="center">
+        <span class="lb-text-middle">
+          {{ dividingLine | i18nFilter }}{{ this.$t('module.orderManage.feeInfo.details') | i18nFilter }}
+        </span>
+      </el-divider>
+
+      <el-row>
+        <div v-if="displayCreateStockButton" class="lb-create-stock-container">
+          <button @click.prevent="displayCreateStockForm">
+            +{{ dividingLine | i18nFilter }}{{ this.$t('module.orderManage.feeInfo.details') | i18nFilter }}
+          </button>
+        </div>
+        <div v-else class="lb-create-stock-alert">
+          <el-form
+            ref="detailData"
+            style="padding: 24px;"
+            :model="detailData"
+            label-position="top"
+            :rules="stockFormValidationRules"
+          >
+            <el-row :gutter="20">
+              <template v-for="(item, index) in detailForm">
+                <el-col :span="8">
+                  <el-form-item :key="index" :label="item.label ? item.label : ''" :prop="item.param">
+                    <!-- input -->
+                    <el-input
+                      v-if="item.type === 'input'"
+                      v-model="detailData[item.param]"
+                      clearable
+                      :style="item.width ? 'width:' + item.width + 'px' : 'width:100%'"
+                      :placeholder="['placeholder.input', item.placeholder] | i18nFilterForm"
+                    />
+                    <!-- select -->
+                    <el-select
+                      v-if="item.type === 'select'"
+                      v-model="detailData[item.param]"
+                      :filterable="item.filterable ? item.filterable : false"
+                      :clearable="item.clearable === false ? false : true"
+                      :style="item.width ? item.width + 'px' : 'width:100%'"
+                      :placeholder="['placeholder.select', item.label] | i18nFilterForm"
+                    >
+                      <template v-for="(sub, i) in item.selectOptions">
+                        <el-option :key="i" :label="sub.name" :value="sub.id" />
+                      </template>
+                    </el-select>
+                    <!-- inputNumber -->
+                    <el-input-number
+                      v-if="item.type === 'inputNumber'"
+                      v-model="detailData[item.param]"
+                      :min="item.min ? item.min : 0"
+                      :max="item.max ? item.max : 'Infinity'"
+                      :precision="item.precision"
+                      :step="item.step ? item.step : 1"
+                      :style="item.width ? 'width:' + item.width + 'px' : 'width:100%'"
+                    />
+                  </el-form-item>
+                </el-col>
+              </template>
+            </el-row>
+
+            <div style="text-align: center;">
+              <el-button @click="cancelCreateOrEditController">
+                {{ 'btn.cancel' | i18nFilter }}
+              </el-button>
+              <el-button type="primary" @click="stockCreateOrEditController">
+                {{ 'btn.confirm' | i18nFilter }}
+              </el-button>
+            </div>
+          </el-form>
+        </div>
+      </el-row>
+      <!-- table -->
+      <template>
+        <el-row>
+          <base-table
+            :page="listQuery.current"
+            :limit="listQuery.size"
+            :table-data="diaList"
+            :table-config="tableProps"
+            :is-loading="listLoading"
+          >
+            <template>
+              <method-btn slot="handleBtn" :width="100" :method-list="tableBtn" @clickBtn="tablebtnClick" />
+            </template>
+          </base-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page-sizes="[3, 5, 10, 20]"
+            :page.sync="listQuery.current"
+            :limit.sync="listQuery.size"
+            @pagination="getOrderDetail"
+          />
+        </el-row>
+      </template>
+    </template>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ 'btn.cancel' | i18nFilter }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { orderDetail } from '@/api/orderManage/order/order'
+import { feeDetailPage, feeDetailAdd, feeDetail, UpdateDetail, deleteDetail } from '@/api/orderManage/fee/fee'
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+export default {
+  components: {
+    BaseTable,
+    MethodBtn,
+    Pagination
+  },
+  props: {
+    dividingLine: {
+      type: String,
+      default: ''
+    },
+    detailForm: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    const detailData = {}
+    const stockFormValidationRules = {}
+    for (const obj of this.detailForm) {
+      detailData[obj.param] = obj.defaultSelect || '' // defaultSelect下拉框默认选中项
+      stockFormValidationRules[obj.param] = []
+      const newObj = {}
+      newObj.required = obj.required
+      newObj.message = this.$i18nForm(['placeholder.input', obj.placeholder])
+      newObj.trigger = obj.trigger
+      stockFormValidationRules[obj.param].push(newObj)
+    }
+    return {
+      orderName: '',
+      orderCode: '',
+      visible: false,
+      tableProps: null,
+      listQuery: {
+        current: 1,
+        size: 3,
+        orderId: '',
+        queryType: ''
+      },
+      detailData, // 中间新增明细的form
+      stockFormValidationRules,
+      displayCreateStockButton: true,
+      total: 0,
+      diaList: [],
+      detailEdit: false, // 编辑明细
+      tableBtn,
+      listLoading: false
+    }
+  },
+  methods: {
+    init(tableProps, orderId, feeType) {
+      // 表格配置 订单id，费用类型
+      this.listQuery.orderId = orderId
+      this.tableProps = tableProps
+      this.listQuery.queryType = feeType
+      this.visible = true
+      // 根据orderId查订单详情
+      orderDetail(this.listQuery.orderId).then(res => {
+        console.log(res)
+        this.orderName = res.data.name
+        this.orderCode = res.data.code
+      })
+      this.getOrderDetail()
+    },
+    getOrderDetail() {
+      // 查询该订单的明细
+      this.listLoading = true
+      feeDetailPage(this.listQuery).then(res => {
+        this.diaList = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      })
+    },
+    displayCreateStockForm() {
+      this.displayCreateStockButton = false
+      this.detailEdit = false
+    },
+    cancelCreateOrEditController() {
+      // 取消
+      // 恢复按钮
+      this.displayCreateStockButton = true
+      // 清空form中的数据
+      for (const obj of this.detailForm) {
+        this.detailData[obj.param] = obj.defaultSelect || ''
+      }
+    },
+    tablebtnClick(raw) {
+      this.detailData.id = raw.data.id
+      this.detailEdit = true
+      if (raw.type === 'edit') {
+        // 编辑明细，调用接口查最新信息
+        feeDetail({ id: this.detailData.id }).then(res => {
+          console.log(res)
+          this.displayCreateStockButton = false
+          this.detailData = res.data
+        })
+      } else {
+        // 删除明细
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        })
+          .then(() => {
+            // 删除费用明细
+            deleteDetail({ id: raw.data.id }).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.listQuery.current = 1
+                  this.getOrderDetail()
+                }
+              })
+            })
+          })
+          .catch(() => {})
+      }
+    },
+    // 判断明细当前是编辑，还是新增
+    stockCreateOrEditController() {
+      // 确定
+      if (this.detailEdit) {
+        // 编辑
+        this.submitEditStockForm()
+      } else {
+        // 新增
+        this.submitCreateStockForm()
+      }
+    },
+    submitEditStockForm() {
+      // 编辑 明细表单提交
+      this.$refs['detailData'].validate(valid => {
+        if (valid) {
+          console.log('调用编辑明细接口')
+          UpdateDetail(this.detailData).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.cancelCreateOrEditController()
+                this.getOrderDetail()
+              }
+            })
+          })
+        }
+      })
+    },
+    submitCreateStockForm() {
+      // 新增 明细表单提交
+      this.$refs['detailData'].validate(valid => {
+        if (valid) {
+          this.detailData.queryType = this.listQuery.queryType
+          this.detailData.orderId = this.listQuery.orderId
+          feeDetailAdd(this.detailData).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.displayCreateStockButton = true
+                this.$refs['detailData'].resetFields()
+                this.getOrderDetail()
+              }
+            })
+          })
+        }
+      })
+    },
+    // 弹窗关闭
+    handleClosed() {
+      this.cancelCreateOrEditController()
+      this.$emit('refreshDataList')
+      this.visible = false
+      this.orderName = ''
+      this.orderCode = ''
+      // this.tableProps = null
+      this.listQuery = {
+        current: 1,
+        size: 3,
+        orderId: '',
+        queryType: ''
+      }
+      this.diaList = []
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.lb-text-middle {
+  font-size: 18px;
+}
+
+.lb-create-stock-container {
+  border: 3px dashed #ccc;
+  width: 235px;
+  margin: 24px auto 0;
+  transition: background-color 0.2s ease-out;
+  &:hover {
+    background-color: #ccc;
+
+    button {
+      color: white;
+    }
+  }
+
+  button {
+    cursor: pointer;
+    color: #999;
+    transition: color 0.2s ease-out;
+    background-color: unset;
+    border: none;
+    outline: none;
+    letter-spacing: 5px;
+    font-size: 20px;
+    display: inline-block;
+    width: 235px;
+    height: 50px;
+  }
+}
+
+.lb-create-stock-alert {
+  position: relative;
+  width: 100%;
+  border-radius: 8px;
+  padding: 8px;
+  min-height: 50px;
+  overflow: hidden;
+  background-color: #eee;
+}
+
+// 动画效果
+
+// 关键帧
+.flip-diagonal-1-tr {
+  -webkit-animation: flip-diagonal-1-tr 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+  animation: flip-diagonal-1-tr 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
+}
+
+/* ----------------------------------------------
+ * Generated by Animista on 2022-3-11 13:18:44
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation flip-diagonal-1-tr
+ * ----------------------------------------
+ */
+@-webkit-keyframes flip-diagonal-1-tr {
+  0% {
+    -webkit-transform: rotate3d(1, 1, 0, 0deg);
+    transform: rotate3d(1, 1, 0, 0deg);
+  }
+  100% {
+    -webkit-transform: rotate3d(1, 1, 0, 180deg);
+    transform: rotate3d(1, 1, 0, 180deg);
+  }
+}
+@keyframes flip-diagonal-1-tr {
+  0% {
+    -webkit-transform: rotate3d(1, 1, 0, 0deg);
+    transform: rotate3d(1, 1, 0, 0deg);
+  }
+  100% {
+    -webkit-transform: rotate3d(1, 1, 0, 180deg);
+    transform: rotate3d(1, 1, 0, 180deg);
+  }
+}
+</style>
+
+<style scoped>
+.lb-create-stock-alert >>> .el-form-item {
+  text-align: left;
+}
+.lb-create-stock-alert >>> .el-form-item .el-form-item__label {
+  padding: 0;
+}
+</style>

src/views/orderManage/fee/components/FeeDetail.vue

@@ -0,0 +1,216 @@
+<template>
+  <el-dialog :title="'btn.detail' | i18nFilter" :visible.sync="visible" @closed="handleClosed">
+    <div>
+      <ul style="list-style: none;display: flex;text-align: left;">
+        <li style="width: 50%;">{{ $t('module.orderManage.feeInfo.orderName') }}: {{ orderName }}</li>
+        <li style="width: 50%;">{{ $t('module.orderManage.feeInfo.orderCode') }}: {{ orderCode }}</li>
+      </ul>
+    </div>
+    <div>
+      <el-tabs v-model="feeType" @tab-click="changeTabs">
+        <el-tab-pane name="1" :label="$t('module.orderManage.feeInfo.transportationCosts')" />
+        <el-tab-pane name="2" :label="$t('module.orderManage.feeInfo.staffCosts')" />
+        <el-tab-pane name="3" :label="$t('module.orderManage.feeInfo.wasteCosts')" />
+        <el-tab-pane name="4" :label="$t('module.orderManage.feeInfo.equipmentCosts')" />
+        <el-tab-pane name="5" :label="$t('module.orderManage.feeInfo.otherCosts')" />
+      </el-tabs>
+    </div>
+    <div>
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :table-config="tableProps"
+        :table-data="list"
+        :is-loading="listLoading"
+      />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page-sizes="[3, 5, 10, 20]"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList"
+      />
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { orderDetail } from '@/api/orderManage/order/order'
+import BaseTable from '@/components/BaseTable'
+import i18n from '@/lang'
+import { feeDetailPage } from '@/api/orderManage/fee/fee'
+import Pagination from '@/components/Pagination'
+import newBasicData from '@/filters/newBasicData'
+const tableProps1 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.feeType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps2 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.staffType')
+  },
+  {
+    prop: 'time',
+    label: i18n.t('module.orderManage.feeInfo.lengthOfwork')
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.feeInfo.costSource'),
+    filter: newBasicData('1526436576788647938')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps3 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.wasteType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'count',
+    label: i18n.t('module.orderManage.feeInfo.quantity')
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.feeInfo.costSource'),
+    filter: newBasicData('1526436576788647938')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps4 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.deviceType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps5 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.otheType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+export default {
+  components: { BaseTable, Pagination },
+  data() {
+    return {
+      visible: false,
+      orderName: '',
+      orderCode: '',
+      orderId: '',
+      feeType: '1',
+      listQuery: {
+        current: 1,
+        size: 3
+      },
+      total: 0,
+      listLoading: true,
+      list: [],
+      tableProps: [], // 表格配置项
+      tableProps1,
+      tableProps2,
+      tableProps3,
+      tableProps4,
+      tableProps5
+
+    }
+  },
+  methods: {
+    init(orderId) {
+      this.visible = true
+      this.orderId = orderId
+      // 根据orderId查订单详情
+      orderDetail(this.orderId).then(res => {
+        console.log(res)
+        this.orderName = res.data.name
+        this.orderCode = res.data.code
+      })
+      this.configTable()
+      this.getList()
+    },
+    changeTabs() {
+      this.configTable()
+      this.listQuery.current = 1
+      this.getList()
+    },
+    getList() {
+      // 查询该订单的明细
+      this.listQuery.orderId = this.orderId
+      this.listQuery.queryType = this.feeType
+      feeDetailPage(this.listQuery).then(res => {
+        this.list = res.data.records ? res.data.records : []
+        this.total = res.data.total
+        this.listLoading = false
+      })
+    },
+
+    configTable() {
+      if (this.feeType === '1') {
+        this.tableProps = this.tableProps1
+      } else if (this.feeType === '2') {
+        this.tableProps = this.tableProps2
+      } else if (this.feeType === '3') {
+        this.tableProps = this.tableProps3
+      } else if (this.feeType === '4') {
+        this.tableProps = this.tableProps4
+      } else if (this.feeType === '5') {
+        this.tableProps = this.tableProps5
+      }
+    },
+    handleClosed() {
+      this.visible = false
+      this.orderName = ''
+      this.orderCode = ''
+      this.orderId = ''
+      this.feeType = '1'
+      this.listQuery = {
+        current: 1,
+        size: 3
+      }
+      this.total = 0
+      this.listLoading = false
+      this.list = []
+      this.tableProps = []
+    }
+  }
+}
+</script>

src/views/orderManage/fee/components/feeDetailEdit.vue

@@ -0,0 +1,414 @@
+<template>
+  <div style="height:23px;line-height:23px;">
+    <el-button type="text" size="small" style="font-size: 16px;font-weight: bold;padding: 0;" @click="emitClick">{{ parseFloat(showFee).toFixed(2) }}</el-button>
+    <edit-detail
+      v-if="visible"
+      ref="updateForm"
+      :dividing-line="dividingTitle"
+      :detail-form="detailForm"
+      @refreshDataList="getList"
+    />
+  </div>
+</template>
+
+<script>
+import EditDetail from './EditDetail.vue'
+import i18n from '@/lang'
+import newBasicData from '@/filters/newBasicData'
+const detailForm1 = [
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.feeType'),
+    placeholder: i18n.t('module.orderManage.feeInfo.feeType'),
+    param: 'costType',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    placeholder: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    param: 'cost',
+    min: 0,
+    max: 999999999999,
+    precision: 4,
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.remark'),
+    placeholder: i18n.t('module.orderManage.feeInfo.remark'),
+    param: 'remark',
+    required: true,
+    trigger: 'blur'
+
+  }
+]
+const detailForm2 = [
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.staffType'),
+    placeholder: i18n.t('module.orderManage.feeInfo.staffType'),
+    param: 'costType',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.lengthOfwork'),
+    placeholder: i18n.t('module.orderManage.feeInfo.lengthOfwork'),
+    param: 'time',
+    min: 0,
+    max: 999999999999,
+    precision: 1,
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'select',
+    label: i18n.t('module.orderManage.feeInfo.costSource'),
+    placeholder: i18n.t('module.orderManage.feeInfo.costSource'),
+    selectOptions: [],
+    param: 'source',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.fee'),
+    placeholder: i18n.t('module.orderManage.feeInfo.fee'),
+    param: 'cost',
+    min: 0,
+    max: 999999999999,
+    precision: 4,
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.remark'),
+    placeholder: i18n.t('module.orderManage.feeInfo.remark'),
+    param: 'remark',
+    required: true,
+    trigger: 'blur'
+
+  }
+]
+const detailForm3 = [
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.wasteType'),
+    placeholder: i18n.t('module.orderManage.feeInfo.wasteType'),
+    param: 'costType',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    placeholder: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    param: 'cost',
+    required: true,
+    min: 0,
+    max: 999999999999,
+    precision: 4,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.quantity'),
+    placeholder: i18n.t('module.orderManage.feeInfo.quantity'),
+    param: 'count',
+    min: 0,
+    max: 999999999999,
+    precision: 2,
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'select',
+    label: i18n.t('module.orderManage.feeInfo.costSource'),
+    placeholder: i18n.t('module.orderManage.feeInfo.costSource'),
+    selectOptions: [],
+    param: 'source',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.remark'),
+    placeholder: i18n.t('module.orderManage.feeInfo.remark'),
+    param: 'remark',
+    required: true,
+    trigger: 'blur'
+
+  }
+]
+const detailForm4 = [
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.deviceType'),
+    placeholder: i18n.t('module.orderManage.feeInfo.deviceType'),
+    param: 'costType',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    placeholder: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    param: 'cost',
+    min: 0,
+    max: 999999999999,
+    precision: 4,
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.remark'),
+    placeholder: i18n.t('module.orderManage.feeInfo.remark'),
+    param: 'remark',
+    required: true,
+    trigger: 'blur'
+
+  }
+]
+const detailForm5 = [
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.otheType'),
+    placeholder: i18n.t('module.orderManage.feeInfo.otheType'),
+    param: 'costType',
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'inputNumber',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    placeholder: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan'),
+    param: 'cost',
+    min: 0,
+    max: 999999999999,
+    precision: 4,
+    required: true,
+    trigger: 'blur'
+
+  },
+  {
+    type: 'input',
+    label: i18n.t('module.orderManage.feeInfo.remark'),
+    placeholder: i18n.t('module.orderManage.feeInfo.remark'),
+    param: 'remark',
+    required: true,
+    trigger: 'blur'
+
+  }
+]
+const tableProps1 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.feeType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps2 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.staffType')
+  },
+  {
+    prop: 'time',
+    label: i18n.t('module.orderManage.feeInfo.lengthOfwork')
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.feeInfo.costSource'),
+    filter: newBasicData('1526436576788647938')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps3 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.wasteType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'count',
+    label: i18n.t('module.orderManage.feeInfo.quantity')
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.feeInfo.costSource'),
+    filter: newBasicData('1526436576788647938')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps4 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.deviceType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+const tableProps5 = [
+  {
+    prop: 'costType',
+    label: i18n.t('module.orderManage.feeInfo.otheType')
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.fee') + i18n.t('module.orderManage.feeInfo.yuan')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.feeInfo.remark')
+  }
+]
+export default {
+
+  components: { EditDetail },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      showFee: '',
+      showFeeType: '',
+      visible: false,
+      dividingTitle: '',
+      feeSource: JSON.parse(localStorage.getItem('dictObj'))['1526436576788647938'],
+      listQuery: {
+        current: 1,
+        size: 100,
+        dictTypeId: '1523941494259912706'
+      },
+      detailForm: [],
+      detailForm1,
+      detailForm2,
+      detailForm3,
+      detailForm4,
+      detailForm5,
+      tableProps: [], // 表格配置项
+      tableProps1,
+      tableProps2,
+      tableProps3,
+      tableProps4,
+      tableProps5
+    }
+  },
+  watch: {
+    injectData(newVal, oldVal) {
+      if ((oldVal.tranCost !== newVal.tranCost) || (oldVal.teamCost !== newVal.teamCost) || (oldVal.scrapCost !== newVal.scrapCost) || (oldVal.equipmentCost !== newVal.equipmentCost) || (oldVal.otherCost !== newVal.otherCost)) {
+        this.init()
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+
+  methods: {
+    emitClick() {
+      this.visible = true
+      const arr = []
+      this.feeSource.map(item => {
+        arr.push({
+          id: item.dataCode,
+          name: item.dataName
+        })
+      })
+      if (this.showFeeType === '2') {
+        this.detailForm2[2].selectOptions = arr
+      } else if (this.showFeeType === '3') {
+        this.detailForm3[3].selectOptions = arr
+      }
+      this.$nextTick(() => {
+        this.$refs.updateForm.init(this.tableProps, this.injectData.orderId, this.showFeeType)
+      })
+    },
+    init() {
+      if (this.injectData.prop === 'tranCost') {
+        this.showFee = this.injectData.tranCost ? this.injectData.tranCost : 0
+        console.log(this.showFee)
+        this.showFeeType = '1'
+        this.dividingTitle = i18n.t('module.orderManage.feeInfo.transportationCosts')
+        this.detailForm = this.detailForm1
+        this.tableProps = this.tableProps1
+      } else if (this.injectData.prop === 'teamCost') {
+        this.showFee = this.injectData.teamCost ? this.injectData.teamCost : 0
+        this.showFeeType = '2'
+        this.dividingTitle = i18n.t('module.orderManage.feeInfo.staffCosts')
+        this.detailForm = this.detailForm2
+        this.tableProps = this.tableProps2
+      } else if (this.injectData.prop === 'scrapCost') {
+        this.showFee = this.injectData.scrapCost ? this.injectData.scrapCost : 0
+        this.showFeeType = '3'
+        this.dividingTitle = i18n.t('module.orderManage.feeInfo.wasteCosts')
+        this.detailForm = this.detailForm3
+        this.tableProps = this.tableProps3
+      } else if (this.injectData.prop === 'equipmentCost') {
+        this.showFee = this.injectData.equipmentCost ? this.injectData.equipmentCost : 0
+        this.showFeeType = '4'
+        this.dividingTitle = i18n.t('module.orderManage.feeInfo.equipmentCosts')
+        this.detailForm = this.detailForm4
+        this.tableProps = this.tableProps4
+      } else if (this.injectData.prop === 'otherCost') {
+        this.showFee = this.injectData.otherCost ? this.injectData.otherCost : 0
+        this.showFeeType = '5'
+        this.dividingTitle = i18n.t('module.orderManage.feeInfo.otherCosts')
+        this.detailForm = this.detailForm5
+        this.tableProps = this.tableProps5
+      }
+    },
+    getList() {
+      this.$emit('emitData', { action: 'editFee' })
+    }
+  }
+}
+</script>

src/views/orderManage/fee/freight.vue

@@ -0,0 +1,266 @@
+<template>
+  <div class="app-container">
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :height="tableH"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+      @emitFun="getList"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <add-detailForm
+      ref="addOrder"
+      @refreshDataList="getList"
+    />
+    <fee-detail
+      ref="feeDetails"
+    />
+  </div>
+
+</template>
+<script>
+import HeadForm from '@/components/basicData/HeadForm'
+import i18n from '@/lang'
+import { timeFormatter, amountFormatter } from '@/filters'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import AddDetailForm from './components/AddDetailForm.vue'
+import FeeDetail from './components/FeeDetail.vue'
+import { orderList } from '@/api/orderManage/order/order'
+import { List, deleteFee } from '@/api/orderManage/fee/fee'
+import newBasicData from '@/filters/newBasicData'
+import feeDetailEdit from './components/feeDetailEdit.vue'
+import { tableHeight } from '@/utils/index'
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.feeInfo.createTime'),
+    filter: timeFormatter,
+    minWidth: 160,
+    isFixed: true
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.feeInfo.orderName'),
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.feeInfo.orderCode')
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.feeInfo.source'),
+    filter: newBasicData('1526436576788647938'),
+    width: 100
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.feeInfo.state'),
+    filter: newBasicData('1526063541841727490'),
+    width: 100
+  },
+  {
+    prop: 'cost',
+    label: i18n.t('module.orderManage.feeInfo.costAll') + i18n.t('module.orderManage.feeInfo.yuan'),
+    filter: amountFormatter,
+    align: 'right'
+  },
+  {
+    prop: 'tranCost',
+    label: i18n.t('module.orderManage.feeInfo.transportationCosts') + i18n.t('module.orderManage.feeInfo.yuan'),
+    subcomponent: feeDetailEdit,
+    align: 'right',
+    width: 120
+  },
+  {
+    prop: 'teamCost',
+    label: i18n.t('module.orderManage.feeInfo.staffCosts') + i18n.t('module.orderManage.feeInfo.yuan'),
+    subcomponent: feeDetailEdit,
+    align: 'right',
+    width: 120
+  },
+  {
+    prop: 'scrapCost',
+    label: i18n.t('module.orderManage.feeInfo.wasteCosts') + i18n.t('module.orderManage.feeInfo.yuan'),
+    subcomponent: feeDetailEdit,
+    align: 'right',
+    width: 120
+  },
+  {
+    prop: 'equipmentCost',
+    label: i18n.t('module.orderManage.feeInfo.equipmentCosts') + i18n.t('module.orderManage.feeInfo.yuan'),
+    subcomponent: feeDetailEdit,
+    align: 'right',
+    width: 120
+  },
+  {
+    prop: 'otherCost',
+    label: i18n.t('module.orderManage.feeInfo.otherCosts') + i18n.t('module.orderManage.feeInfo.yuan'),
+    subcomponent: feeDetailEdit,
+    align: 'right',
+    width: 120
+  }
+]
+export default {
+  name: 'Freight',
+  components: { HeadForm, Pagination, BaseTable, MethodBtn, AddDetailForm, FeeDetail },
+  data() {
+    return {
+      topBtnConfig,
+      listQuery: {
+        current: 1,
+        size: 20,
+        name: '',
+        startTime: '',
+        endTime: ''
+      },
+      tableBtn,
+      trueWidth: 100,
+      tableH: tableHeight(280),
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.feeInfo.orderName'),
+          placeholder: this.$t('module.orderManage.feeInfo.orderName'),
+          param: 'keyName'
+        },
+        {
+          type: 'datePicker',
+          label: this.$t('module.orderManage.track.ProcessTime'),
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: this.$t('module.orderManage.feeInfo.startTime'),
+          endPlaceholder: this.$t('module.orderManage.feeInfo.endTime'),
+          param: 'timeSlot'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(280)
+    })
+    this.getList()
+    this.getOrderList()
+  },
+  methods: {
+    getList() {
+      this.listQuery.name = this.headFormValue.keyName
+      this.listQuery.startTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[0] + 'T00:00:00' : ''
+      this.listQuery.endTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] + 'T23:59:59' : ''
+      List(this.listQuery).then(response => {
+        this.list = response.data.records ? response.data.records : []
+        this.total = response.data.total
+      })
+    },
+    getOrderList() { // 获取订单列表
+      const listQuery = {
+        current: 1,
+        size: 1000
+      }
+      orderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.headFormConfig[0].selectOptions = response.data.records
+        }
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          deleteFee({ id: raw.data.id }).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.listQuery.current = 1
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.$nextTick(() => {
+          this.$refs.feeDetails.init(raw.data.orderId)
+        })
+      }
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.listQuery.current = 1
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()// 新增
+      }
+    },
+    addNew() {
+      this.$nextTick(() => {
+        this.$refs.addOrder.init()
+      })
+    }
+  }
+}
+</script>
+

src/views/orderManage/index.vue

@@ -0,0 +1,12 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-01-12 11:13:03
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-02-23 13:35:09
+ * @Description:
+-->
+<template>
+  <div id="orderManage">
+    <router-view />
+  </div>
+</template>

src/views/orderManage/infoTrack/equipmentEventTrack.vue

@@ -0,0 +1,197 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-18 18:35:28
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.EquipmentName')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.track.event')" prop="equipmentEventId">
+        <el-input v-model="formData.equipmentEventId" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.track.event')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.track.parameterName')" prop="equipmentParameterId">
+        <el-input v-model="formData.equipmentParameterId" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.track.parameterName')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { equipmentEventTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue'),
+    align: 'center'
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        workOrderId: '',
+        equipmentId: '',
+        equipmentEventId: '',
+        equipmentParameterId: '',
+        current: 1,
+        size: 10
+      },
+      equipmentList: [],
+      WorkOrderList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.equipmentList.splice(0, this.equipmentList.length)
+      equipmentInfoList(listQuery).then(response => {
+        if (response.data.records) {
+          this.equipmentList = response.data.records
+        }
+      })
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.listLoading = true
+          equipmentEventTrackList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/infoTrack/equipmentParametersTrack.vue

@@ -0,0 +1,211 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: juzi
+ * @LastEditTime: 2022-04-22
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <top-title />
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import TopTitle from '@/components/TopTitle'
+import HeadForm from '@/components/basicData/HeadForm'
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { equipmentParametersTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.orderManage.order.createTime'),
+  //   filter: timeFormatter
+  // },
+  // {
+  //   prop: 'workOrderNo',
+  //   label: i18n.t('module.orderManage.order.WorkOrderCode'),
+  //   align: 'center'
+  // },
+  // {
+  //   prop: 'code',
+  //   label: i18n.t('module.orderManage.order.processCode'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'substrateNo',
+    label: i18n.t('module.orderManage.order.basePlateId'),
+    align: 'center'
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName')
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue')
+  },
+  {
+    prop: 'eventTime',
+    label: i18n.t('module.orderManage.track.occurTime'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { TopTitle, HeadForm, Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        substrateNo: '',
+        workOrderId: '',
+        equipmentId: '',
+        equipmentParameterId: '',
+        current: 1,
+        size: 10
+      },
+      WorkOrderList: [],
+      equipmentList: [],
+      headFormConfig: [
+        {
+          type: 'select',
+          label: this.$t('module.orderManage.order.WorkOrderName'),
+          selectOptions: [],
+          param: 'workOrderId',
+          defaultSelect: '',
+          clearable: false,
+          required: true
+        },
+        {
+          type: 'select',
+          label: this.$t('module.orderManage.order.EquipmentName'),
+          selectOptions: [],
+          param: 'equipmentId'
+        },
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.order.basePlate'),
+          placeholder: this.$t('module.orderManage.order.basePlate'),
+          param: 'substrateNo'
+        },
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.track.parameterName'),
+          placeholder: this.$t('module.orderManage.track.parameterName'),
+          param: 'equipmentParameterId'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.equipmentList.splice(0, this.equipmentList.length)
+      equipmentInfoList(listQuery).then(response => {
+        if (response.data.records) {
+          this.equipmentList = response.data.records
+          this.headFormConfig[1].selectOptions = this.equipmentList
+        }
+      })
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+          this.headFormConfig[0].selectOptions = this.WorkOrderList
+          this.headFormConfig[0].defaultSelect = this.WorkOrderList[0].id
+        }
+      })
+    },
+    getList() {
+      // this.$refs['formData'].validate((valid) => {
+      // if (valid) {
+      this.listLoading = true
+      this.formData.substrateNo = this.headFormValue.substrateNo
+      this.formData.workOrderId = this.headFormValue.workOrderId
+      this.formData.equipmentId = this.headFormValue.equipmentId
+      this.formData.equipmentParameterId = this.headFormValue.equipmentParameterId
+      equipmentParametersTrackList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+      // }
+      // })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    }
+  }
+}
+</script>

src/views/orderManage/infoTrack/processSubstrateDataTrack.vue

@@ -0,0 +1,185 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: juzi
+ * @LastEditTime: 2022-04-22
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <top-title />
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import TopTitle from '@/components/TopTitle'
+import HeadForm from '@/components/basicData/HeadForm'
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { processSubstrateDataTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'workOrderNo',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    align: 'center'
+  },
+  // {
+  //   prop: 'processFlowCode',
+  //   label: i18n.t('module.orderManage.order.processCode'),
+  //   align: 'center'
+  // },
+  {
+    prop: 'substrateNo',
+    label: i18n.t('module.orderManage.order.basePlateId'),
+    align: 'center'
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.loadingTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.unLoadingTime'),
+    filter: timeFormatter
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { TopTitle, HeadForm, Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        current: 1,
+        size: 10
+      },
+      WorkOrderList: [],
+      headFormConfig: [
+        {
+          type: 'select',
+          label: this.$t('module.orderManage.order.WorkOrderName'),
+          selectOptions: [],
+          param: 'workOrderId',
+          defaultSelect: '',
+          clearable: false,
+          required: true
+        },
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.order.basePlateCode'),
+          placeholder: this.$t('module.orderManage.order.basePlateCode'),
+          param: 'substrateNo'
+        },
+        {
+          type: 'datePicker',
+          label: this.$t('module.orderManage.order.loadingTime'),
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: this.$t('module.orderManage.order.StartTime'),
+          endPlaceholder: this.$t('module.orderManage.order.EndTime'),
+          param: 'timeSlot'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+          this.headFormConfig[0].selectOptions = this.WorkOrderList
+          this.headFormConfig[0].defaultSelect = this.WorkOrderList[0].id
+        }
+      })
+    },
+    getList() {
+      // this.$refs['formData'].validate((valid) => {
+      // if (valid) {
+      this.listLoading = true
+      this.formData.substrateNo = this.headFormValue.substrateNo
+      this.formData.workOrderId = this.headFormValue.workOrderId
+      this.formData.startTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[0] : ''
+      this.formData.endTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : ''
+      processSubstrateDataTrackList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+      // }
+      // })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    }
+  }
+}
+</script>

src/views/orderManage/infoTrack/substrateEquipment.vue

@@ -0,0 +1,224 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 19:05:32
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="80px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="workOrderId">
+        <el-select v-model="formData.workOrderId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable>
+          <el-option
+            v-for="item in WorkOrderList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.EquipmentName')" prop="equipmentId">
+        <el-select v-model="formData.equipmentId" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.EquipmentName')])" clearable>
+          <el-option
+            v-for="item in equipmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.basePlateCode')" prop="substrateNo">
+        <el-input v-model="formData.substrateNo" :placeholder="$i18nForm(['placeholder.input', this.$t('module.orderManage.order.basePlateCode')])" style="width:200px" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getList()"> {{ 'btn.search' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+    <substrateEquipmentDetail v-if="substrateVisible" ref="substrateDetail" />
+  </div>
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { equipmentInfoList } from '@/api/basicData/Equipment/equipmentInfo'
+import { substrateEquipmentList } from '@/api/orderManage/infoTrack/infoTrack'
+import substrateEquipmentDetail from './substrateEquipmentDetail'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+
+const tableProps = [
+  // {
+  //   prop: 'createTime',
+  //   label: i18n.t('module.orderManage.order.createTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'substrateNo',
+    label: i18n.t('module.orderManage.order.basePlateCode'),
+    align: 'center'
+  },
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.StartTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.track.ProcessTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.finishTime'),
+    align: 'center',
+    filter: timeFormatter
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { Pagination, BaseTable, MethodBtn, substrateEquipmentDetail },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      tableBtn,
+      list: [],
+      total: 0,
+      substrateVisible: false,
+      listLoading: false,
+      formData: {
+        substrateNo: '',
+        workOrderId: '',
+        equipmentId: '',
+        current: 1,
+        size: 10
+      },
+      equipmentList: [],
+      WorkOrderList: [],
+      rules: {
+        workOrderId: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.equipmentList.splice(0, this.equipmentList.length)
+      equipmentInfoList(listQuery).then(response => {
+        if (response.data.records) {
+          this.equipmentList = response.data.records
+        }
+      })
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+        }
+      })
+    },
+    getList() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          this.listLoading = true
+          substrateEquipmentList(this.formData).then(response => {
+            if (response.data.records) {
+              this.list = response.data.records
+            } else {
+              this.list.splice(0, this.list.length)
+            }
+            this.total = response.data.total
+            this.listLoading = false
+          })
+        }
+      })
+    },
+    handleClick(raw) {
+      this.substrateVisible = true
+      this.$nextTick(() => {
+        this.$refs.substrateDetail.init(raw)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/infoTrack/substrateEquipmentDetail.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 19:08:59
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :append-to-body="true"
+    :show-close="false"
+    :visible.sync="visible"
+    size="55%"
+  >
+    <el-card class="box-card">
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.basePlateCode')+'：'+dataForm.substrateNo }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.EquipmentName')+'：'+dataForm.name }}</div></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination'
+import { substrateEquipmentDetail } from '@/api/orderManage/infoTrack/infoTrack'
+import { timeFormatter } from '@/filters'
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue'),
+    align: 'center'
+  }
+]
+export default {
+  components: { BaseTable, Pagination },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      dataForm: {},
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listLoading = true
+      this.getList()
+    },
+    getList(raw) {
+      this.dataForm = raw
+      this.listQuery.orderId = raw.id
+      this.listLoading = true
+      substrateEquipmentDetail(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer-footer {
+  width: 100%;
+  margin-top: 50px;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 50px;
+  text-align: left;
+  background: #fff;
+}
+</style>

src/views/orderManage/infoTrack/substrateParametersTrack.vue

@@ -0,0 +1,173 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: juzi
+ * @LastEditTime: 2022-04-22
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <top-title />
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :page="formData.current"
+      :limit="formData.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="formData.current"
+      :limit.sync="formData.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import TopTitle from '@/components/TopTitle'
+import HeadForm from '@/components/basicData/HeadForm'
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import { substrateParametersTrackList } from '@/api/orderManage/infoTrack/infoTrack'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramName',
+    label: i18n.t('module.orderManage.track.parameterName'),
+    align: 'center'
+  },
+  {
+    prop: 'paramValue',
+    label: i18n.t('module.orderManage.track.parameterValue'),
+    align: 'center'
+  },
+  {
+    prop: 'eventName',
+    label: i18n.t('module.orderManage.track.event'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { TopTitle, HeadForm, Pagination, BaseTable },
+  data() {
+    return {
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        substrateNo: '',
+        workOrderId: '',
+        current: 1,
+        size: 10
+      },
+      WorkOrderList: [],
+      headFormConfig: [
+        {
+          type: 'select',
+          label: this.$t('module.orderManage.order.WorkOrderName'),
+          selectOptions: [],
+          param: 'workOrderId',
+          defaultSelect: '',
+          clearable: false,
+          required: true
+        },
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.order.basePlateCode'),
+          placeholder: this.$t('module.orderManage.order.basePlateCode'),
+          param: 'substrateNo'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.WorkOrderList.splice(0, this.WorkOrderList.length)
+      workOrderList(listQuery).then(response => {
+        if (response.data.records) {
+          this.WorkOrderList = response.data.records
+          this.headFormConfig[0].selectOptions = this.WorkOrderList
+          this.headFormConfig[0].defaultSelect = this.WorkOrderList[0].id
+        }
+      })
+    },
+    getList() {
+      // this.$refs['formData'].validate((valid) => {
+      // if (valid) {
+      this.listLoading = true
+      this.formData.substrateNo = this.headFormValue.substrateNo
+      this.formData.workOrderId = this.headFormValue.workOrderId
+      substrateParametersTrackList(this.formData).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+      //   }
+      // })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    }
+  }
+}
+</script>

src/views/orderManage/mesToErp.vue

@@ -0,0 +1,345 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-07-19 15:18:30
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-07-19 15:50:36
+ * @Description:
+-->
+<template>
+  <el-row :gutter="10">
+    <el-form
+      ref="dataForm"
+      :model="dataForm"
+      :rules="rules"
+      size="medium"
+      label-width="110px"
+      style="margin:30px"
+      label-position="left"
+    >
+      <el-col :span="6">
+        <el-form-item label="grade" prop="grade">
+          <el-input v-model="dataForm.grade" placeholder="grade" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('module.orderManage.erpToMes.mfoCode')" prop="mfoCode">
+          <el-input v-model="dataForm.mfoCode" :placeholder="$t('module.orderManage.erpToMes.mfoCode')" clearable :style="{width: '100%'}" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('module.orderManage.erpToMes.packagingBoxId')" prop="packagingBoxId">
+          <el-input
+            v-model="dataForm.packagingBoxId"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            :placeholder="$t('module.orderManage.erpToMes.packagingBoxId')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item :label="$t('module.orderManage.erpToMes.reportTime')" prop="reportTime">
+          <el-date-picker
+            v-model="dataForm.reportTime"
+            :style="{width: '100%'}"
+            :placeholder="$t('module.orderManage.erpToMes.reportTime')"
+            clearable
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="totlePower" prop="totlePower">
+          <el-input
+            v-model="dataForm.totlePower"
+            placeholder="totlePower"
+            oninput="value=value.replace(/[^\d]/g,'')"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId1" prop="substrateId1">
+          <el-input
+            v-model="dataForm.substrateId1"
+            placeholder="substrateId1"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId2" prop="substrateId2">
+          <el-input
+            v-model="dataForm.substrateId2"
+            placeholder="substrateId2"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId3" prop="substrateId3">
+          <el-input
+            v-model="dataForm.substrateId3"
+            placeholder="substrateId3"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId4" prop="substrateId4">
+          <el-input
+            v-model="dataForm.substrateId4"
+            placeholder="substrateId4"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId5" prop="substrateId5">
+          <el-input
+            v-model="dataForm.substrateId5"
+            placeholder="substrateId5"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId6" prop="substrateId6">
+          <el-input
+            v-model="dataForm.substrateId6"
+            placeholder="substrateId6"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId7" prop="substrateId7">
+          <el-input
+            v-model="dataForm.substrateId7"
+            placeholder="substrateId7"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId8" prop="substrateId8">
+          <el-input
+            v-model="dataForm.substrateId8"
+            placeholder="substrateId8"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId9" prop="substrateId9">
+          <el-input
+            v-model="dataForm.substrateId9"
+            placeholder="substrateId9"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId10" prop="substrateId10">
+          <el-input
+            v-model="dataForm.substrateId10"
+            placeholder="substrateId10"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId11" prop="substrateId11">
+          <el-input
+            v-model="dataForm.substrateId11"
+            placeholder="substrateId11"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId12" prop="substrateId12">
+          <el-input
+            v-model="dataForm.substrateId12"
+            placeholder="substrateId12"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId13" prop="substrateId13">
+          <el-input
+            v-model="dataForm.substrateId13"
+            placeholder="substrateId13"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId14" prop="substrateId14">
+          <el-input
+            v-model="dataForm.substrateId14"
+            placeholder="substrateId14"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId15" prop="substrateId15">
+          <el-input
+            v-model="dataForm.substrateId15"
+            placeholder="substrateId15"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId16" prop="substrateId16">
+          <el-input
+            v-model="dataForm.substrateId16"
+            placeholder="substrateId16"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId17" prop="substrateId17">
+          <el-input
+            v-model="dataForm.substrateId17"
+            placeholder="substrateId17"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId18" prop="substrateId18">
+          <el-input
+            v-model="dataForm.substrateId18"
+            placeholder="substrateId18"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId19" prop="substrateId19">
+          <el-input
+            v-model="dataForm.substrateId19"
+            placeholder="substrateId19"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="substrateId20" prop="substrateId20">
+          <el-input
+            v-model="dataForm.substrateId20"
+            placeholder="substrateId20"
+            clearable
+            :style="{width: '100%'}"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label-width="0" prop="">
+          <el-button type="primary" size="medium" @click="submit"> 提交 </el-button>
+        </el-form-item>
+      </el-col>
+    </el-form>
+  </el-row>
+</template>
+
+<script>
+import { mesToErpAdd } from '@/api/orderManage/erpToMes'
+
+export default {
+  components: {},
+  props: [],
+  data() {
+    return {
+      dataForm: {
+        grade: undefined,
+        mfoCode: undefined,
+        packagingBoxId: undefined,
+        reportTime: undefined,
+        totlePower: undefined,
+        substrateId1: undefined,
+        substrateId2: undefined,
+        substrateId3: undefined,
+        substrateId4: undefined,
+        substrateId5: undefined,
+        substrateId6: undefined,
+        substrateId7: undefined,
+        substrateId8: undefined,
+        substrateId9: undefined,
+        substrateId10: undefined,
+        substrateId11: undefined,
+        substrateId12: undefined,
+        substrateId13: undefined,
+        substrateId14: undefined,
+        substrateId15: undefined,
+        substrateId16: undefined,
+        substrateId17: undefined,
+        substrateId18: undefined,
+        substrateId19: undefined,
+        substrateId20: undefined
+      },
+      rules: {
+        grade: [],
+        mfoCode: [],
+        packagingBoxId: [],
+        reportTime: [],
+        totlePower: [],
+        substrateId1: []
+      }
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {
+    this.init()
+  },
+  mounted() {},
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    submit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          mesToErpAdd(this.dataForm).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.init()
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/order/components/completionSchedule.vue

@@ -0,0 +1,25 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-30 11:22:36
+ * @Description:
+-->
+<template>
+  <span>
+    {{ injectData.actualQuantity >= 0 && injectData. planQuantity >= 0 ? ((injectData.actualQuantity / injectData.planQuantity) * 100).toFixed(2) + '%' : '' }}
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>

src/views/orderManage/order/components/materialBomInfo.vue

@@ -0,0 +1,122 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-27 09:40:10
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import { list } from '@/api/material-manage/bom-list.js'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.materialManager.materialbom.name'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.materialManager.materialbom.bomcode'),
+    align: 'center'
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.materialManager.materialbom.quantity'),
+    align: 'center'
+  },
+  {
+    prop: 'unit',
+    label: i18n.t('module.materialManager.materialbom.unit'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    bomId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 500,
+        bomId: ''
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery.bomId = this.bomId
+      if (this.bomId) {
+        this.getList()
+      } else {
+        this.$message.error(this.$t('module.orderManage.order.materialBomMessage'))
+      }
+    },
+    getList() {
+      this.listLoading = true
+      list(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/order/components/order-add.vue

@@ -0,0 +1,437 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-04 15:58:33
+ * @LastEditors: juzi
+ * @LastEditTime: 2022-05-07
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+    class="hfxny-dialog"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <div style="max-height: 50vh; padding-right: 8px; overflow: hidden; overflow-y: scroll;">
+      <el-row :gutter="24">
+        <el-form
+          ref="dataForm"
+          :model="dataForm"
+          class="dataForm"
+          :rules="rules"
+          label-position="top"
+          label-width="120px"
+        >
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.OrderCode')" prop="code">
+              <el-input
+                v-model="dataForm.code"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.OrderCode')])"
+                clearable
+                :style="{ width: '100%' }"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.OrderName')" prop="name">
+              <el-input
+                v-model="dataForm.name"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.OrderName')])"
+                clearable
+                :style="{ width: '100%' }"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.ProductName')" prop="productId">
+              <el-select
+                v-model="dataForm.productId"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.ProductName')])"
+                clearable
+                filterable
+                :style="{ width: '100%' }"
+                @change="changeProduct"
+              >
+                <el-option
+                  v-for="(item, index) in productOptions"
+                  :key="index"
+                  :label="item.name + '|' + item.code"
+                  :value="item.id"
+                >
+                  <span style="float: left">{{ item.name }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.unit')">
+              <el-input v-model="temp.unitName" disabled clearable :style="{ width: '100%' }" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.specifications')">
+              <el-input v-model="temp.specName" disabled clearable :style="{ width: '100%' }" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+              <el-input-number
+                v-model="dataForm.planQuantity"
+                :min="1"
+                :max="9999999999999"
+                :style="{ width: '100%' }"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])"
+                :step="1"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.price')" prop="price">
+              <el-input-number
+                v-model="dataForm.price"
+                :min="0"
+                :precision="2"
+                :max="9999999999999"
+                :style="{ width: '100%' }"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.price')])"
+                :step="1"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.packageSpecifications')" prop="packSpec">
+              <el-select
+                v-model="dataForm.packSpec"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.packageSpecifications')])"
+                clearable
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="item in packSpecOptions"
+                  :key="item.dataCode"
+                  :label="item.dataName"
+                  :value="item.dataCode"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.customer')" prop="customerId">
+              <el-select
+                v-model="dataForm.customerId"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.customer')])"
+                clearable
+                filterable
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="(item, index) in customerArr"
+                  :key="index"
+                  :label="item.name + (item.address ? '|' + item.address : '')"
+                  :value="item.id"
+                >
+                  <span style="float: left">{{ item.name }}</span>
+                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.priority')" prop="priority">
+              <el-select
+                v-model="dataForm.priority"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.priority')])"
+                clearable
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="(item, index) in priorityOptions"
+                  :key="index"
+                  :label="item.dataName"
+                  :value="parseInt(item.dataCode)"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.ProductProcess')" prop="processFlowId">
+              <el-select
+                v-model="dataForm.processFlowId"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.ProductProcess')])"
+                clearable
+                :style="{ width: '100%' }"
+              >
+                <el-option v-for="(item, index) in processOptions" :key="index" :label="item.name" :value="item.id" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.workers')" prop="worker">
+              <el-input
+                v-model="dataForm.worker"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.workers')])"
+                clearable
+                :style="{ width: '100%' }"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.PlanningStartTime')" prop="planStartProduceTime">
+              <el-date-picker
+                v-model="dataForm.planStartProduceTime"
+                type="date"
+                format="yyyy-MM-dd"
+                :style="{ width: '100%' }"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.PlanningStartTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('module.orderManage.order.PlanningEndTime')" prop="planFinishProduceTime">
+              <el-date-picker
+                v-model="dataForm.planFinishProduceTime"
+                type="date"
+                format="yyyy-MM-dd"
+                :style="{ width: '100%' }"
+                :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.PlanningEndTime')])"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('module.orderManage.order.Remarks')" prop="remark">
+              <el-input
+                v-model="dataForm.remark"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Remarks')])"
+                clearable
+                :style="{ width: '100%' }"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item :label="$t('module.orderManage.order.Description')" prop="description">
+              <el-input
+                v-model="dataForm.description"
+                :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Description')])"
+                clearable
+                :style="{ width: '100%' }"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { orderDetail, orderUpdate, orderAdd, orderCode } from '@/api/orderManage/order/order'
+import { list as customerList } from '@/api/basicData/CustomerSupplier/customer'
+import { list as ProductPoolList } from '@/api/basicData/ProductPool'
+import { list as BomList } from '@/api/material-manage/bom'
+import { list } from '@/api/art-manage/art.js'
+
+export default {
+  components: {},
+  inheritAttrs: false,
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        name: undefined,
+        code: undefined,
+        planQuantity: undefined,
+        productId: null,
+        customerId: '',
+        priority: undefined,
+        processFlowId: undefined,
+        planStartProduceTime: null,
+        planFinishProduceTime: null,
+        remark: undefined,
+        description: undefined,
+        dictDataId: '',
+        price: '',
+        worker: '',
+        packSpec: ''
+      },
+      temp: {
+        unitName: '',
+        specName: ''
+      },
+      rules: {
+        code: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.OrderCode')]),
+            trigger: 'blur'
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.OrderName')]),
+            trigger: 'blur'
+          }
+        ],
+        planQuantity: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.PlannedProcessingVolume')]),
+            trigger: 'blur'
+          }
+        ],
+        processFlowId: [
+          {
+            required: true,
+            message: this.$i18nForm(['placeholder.select', this.$t('module.orderManage.order.ProductProcess')]),
+            trigger: 'blur'
+          }
+        ]
+      },
+      unitList: JSON.parse(localStorage.getItem('dictObj'))['1'],
+      powerClassificationArr: [],
+      priorityOptions: JSON.parse(localStorage.getItem('dictObj'))['1524577291887898626'],
+      processOptions: [],
+      productOptions: [],
+      packSpecOptions: JSON.parse(localStorage.getItem('dictObj'))['1522121700583342082'],
+      materialBomOptions: [],
+      customerArr: [],
+      productUnitObj: {}
+    }
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    init(id) {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.dataForm.id = id || ''
+      this.customerArr.splice(0, this.customerArr.length)
+      customerList(listQuery).then(response => {
+        if (response.data.records) {
+          this.customerArr = response.data.records
+        }
+      })
+      this.materialBomOptions.splice(0, this.materialBomOptions.length)
+      BomList(listQuery).then(response => {
+        if (response.data.records) {
+          this.materialBomOptions = response.data.records
+        }
+      })
+      this.productOptions.splice(0, this.productOptions.length)
+      ProductPoolList(listQuery).then(response => {
+        if (response.data.records) {
+          this.productOptions = response.data.records
+          response.data.records.map(item => {
+            this.productUnitObj[item.id] = String(item.dictDataId)
+          })
+        }
+      })
+      this.processOptions.splice(0, this.processOptions.length)
+      list(listQuery).then(response => {
+        if (response.data.records) {
+          this.processOptions = response.data.records
+        }
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.onClose()
+        if (this.dataForm.id) {
+          orderDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+            this.dataForm.dictDataId = res.data.dictDataId + ''
+            // 获取默认的单位和规格
+            this.specName(res.data.productId)
+            this.unitName(res.data.dictDataId)
+          })
+        } else {
+          orderCode().then(res => {
+            this.dataForm.code = res.data
+          })
+        }
+      })
+    },
+    onOpen() {},
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+      this.dataForm.dictDataId = ''
+      this.temp.unitName = ''
+      this.temp.specName = ''
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            orderUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            orderAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    changeProduct(v) {
+      this.dataForm.dictDataId = this.productUnitObj[String(v)]
+      this.unitName(this.dataForm.dictDataId)
+      this.specName(v)
+    },
+    specName(pid) {
+      this.productOptions &&
+        this.productOptions.map(item => {
+          if (pid === item.id) {
+            this.temp.specName = (item.specifications ? item.specifications : '') + (item.area ? '|' + item.area : '')
+          }
+        })
+    },
+    unitName(dictDataId) {
+      this.unitList &&
+        this.unitList.map(item => {
+          if (dictDataId === item.dataCode) {
+            this.temp.unitName = item.dataName
+          }
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dataForm >>> .el-form-item__label {
+  padding: 0;
+}
+
+.hfxny-dialog >>> .el-dialog__body {
+  padding: 30px 30px 30px 40px;
+}
+</style>

src/views/orderManage/order/components/orderDetail.vue

@@ -0,0 +1,237 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-23 11:05:06
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 13:39:13
+ * @Description: 工单监控
+-->
+<template>
+  <el-drawer :title="'btn.detail' | i18nFilter" :wrapper-closable="false" :visible.sync="visible" size="60%" class="drawer">
+    <small-title slot="title" :no-padding="true">
+      {{ 'routerTitle.order.orderManage.orderIssue' | i18nFilter }}
+    </small-title>
+    <div class="detailBox">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.OrderName') }}</p>
+          <p class="text">{{ stringfilter(dataForm.name) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.OrderCode') }}</p>
+          <p class="text">{{ stringfilter(dataForm.code) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.ProductName') }}</p>
+          <p class="text">{{ stringfilter(dataForm.productName) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.ProductCode') }}</p>
+          <p class="text">{{ stringfilter(dataForm.productCode) }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.IssueOrderTime') }}</p>
+          <p class="text">{{ timefilter(dataForm.changeWorkOrder) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.status') }}</p>
+          <p class="text">{{ stringfilter(statusfilter(dataForm.status)) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ (dataForm.status === 9 ? $t('module.orderManage.order.CompletionTime') : $t('module.orderManage.order.PlanningEndTime')) }}</p>
+          <p class="text">{{ (dataForm.status === 9 ? timefilter(dataForm.finishProduceTime) : timefilter(dataForm.planFinishProduceTime)) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.specifications') }}</p>
+          <p class="text">{{ stringfilter(dataForm.specifications) }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.packageSpecifications') }}</p>
+          <p class="text">{{ stringfilter(dataForm.packSpec) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.unit') }}</p>
+          <p class="text">{{ stringfilter(dataForm.dictDataId) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.price') }}</p>
+          <p class="text">{{ dataForm.price }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.PlannedProcessingVolume') }}</p>
+          <p class="text">{{ dataForm.planQuantity }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.ActualFinishedProduct') }}</p>
+          <p class="text">{{ dataForm.actualQuantity }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.orderDetail.completionSchedule') }}</p>
+          <p class="text">{{ towNumber((stringfilter(dataForm.actualQuantity / dataForm.planQuantity)) * 100) + '%' }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.orderDetail.processingSquareMeters') }}</p>
+          <p class="text">{{ dataForm.quantity }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.customer') }}</p>
+          <p class="text">{{ stringfilter(dataForm.customerName) }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.NumberOfDamages') }}</p>
+          <p class="text">{{ dataForm.scrapQuantity }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.EstimatedTime') }}</p>
+          <p class="text">{{ stringfilter(dataForm.time) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.workers') }}</p>
+          <p class="text">{{ stringfilter(dataForm.worker) }}</p>
+        </el-col>
+      </el-row>
+    </div>
+    <order-info v-if="dataForm.status && dataForm.status !== 1" ref="orderInfo" :order-id="OrderId" />
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+    </span>
+  </el-drawer>
+</template>
+
+<script>
+import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+import { orderDetail } from '@/api/orderManage/order/order'
+import { timeFormatter } from '@/filters'
+import orderInfo from './orderInfo'
+
+export default {
+  name: '',
+  components: { orderInfo, SmallTitle },
+  props: {
+    unitList: {
+      type: Array,
+      default: () => []
+    },
+    spacList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      packageVisible: false,
+      scrapVisible: false,
+      OrderId: '',
+      activeIndex: '1',
+      dataForm: {}
+    }
+  },
+  mounted() {
+    console.log(this.unitList)
+  },
+  methods: {
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    init(id) {
+      this.OrderId = id
+      this.dataForm = {}
+      this.visible = true
+      orderDetail(this.OrderId).then((res) => {
+        const obj = res.data
+        this.unitList.map((k) => {
+          if (obj.dictDataId + '' === k.dataCode + '') {
+            obj.dictDataId = k.dataName
+          }
+        })
+        this.spacList.map((k) => {
+          if (obj.packSpec + '' === k.dataCode + '') {
+            obj.packSpec = k.dataName
+          }
+        })
+        this.dataForm = obj
+        if (this.dataForm.status && this.dataForm.status !== 1) {
+          this.$nextTick(() => {
+            this.$refs.orderInfo.init()
+          })
+        }
+      })
+    },
+    scrapClick() {
+      this.scrapVisible = true
+      this.$nextTick(() => {
+        this.$refs.scrapDetail.init()
+      })
+    },
+    packageClick() {
+      this.packageVisible = true
+      this.$nextTick(() => {
+        this.$refs.packageDetail.init()
+      })
+    },
+    towNumber(val) {
+      return val.toFixed(2)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    statusfilter(val) {
+      const orderStatus = JSON.parse(localStorage.getItem('dictObj'))['1526063541841727490']
+      let temp = ''
+      orderStatus && orderStatus.map((item) => {
+        if (item.dataCode === val + '') {
+          temp = item.dataName
+        }
+      })
+      return temp
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 30px;
+}
+.detailBox p {
+  margin: 0;
+  padding: 0 32px;
+}
+.detailBox .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0,0,0,0.65);
+  padding-bottom: 10px;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+  padding-bottom: 20px;
+}
+</style>

src/views/orderManage/order/components/orderDetailBtn.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 13:40:05
+ * @FilePath: \mt-bus-fe\src\views\orderManage\order\components\orderDetailBtn.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.orderManage.order.detail') }}</el-button>
+    <order-detail v-if="visible" ref="orderDetail" :unit-obj="injectData.unitObj" />
+  </span>
+</template>
+
+<script>
+import orderDetail from './orderDetail.vue'
+export default {
+  components: { orderDetail },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    emitClick() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.orderDetail.init(this.injectData.id)
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/order/components/orderInfo.vue

@@ -0,0 +1,153 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 10:48:00
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+    :height="tableH"
+  />
+</template>
+
+<script>
+import { workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import mapColumn from '../../components/mapColumn.vue'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import { timeFormatter } from '@/filters'
+import { tableHeight } from '@/utils/index'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.executionTime'),
+    filter: timeFormatter,
+    minWidth: 160,
+    isFixed: true
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    minWidth: 220,
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    width: 200
+  },
+  {
+    prop: 'actualQuantity',
+    label: i18n.t('module.orderManage.order.completQuantity')
+  },
+  {
+    prop: 'orderName',
+    label: i18n.t('module.orderManage.order.OrderName'),
+    width: 180
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.orderManage.orderDetail.processingSquareMeters')
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.finishTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'productlines',
+    label: i18n.t('module.orderManage.order.ProductLines'),
+    subcomponent: mapColumn
+  },
+  {
+    prop: 'workers',
+    label: i18n.t('module.orderManage.order.workers')
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      tableH: tableHeight(440),
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 500,
+        orderId: ''
+      }
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(440)
+    })
+  },
+  methods: {
+    init() {
+      this.listQuery.orderId = this.orderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      workOrderList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/order/components/orderIssue-add.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 18:39:26
+ * @enName:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.orderManage.orderIssue' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <div style="font-size:20px;margin:0 0 18px 10% ;color:#1890FF;">{{ $t('module.orderManage.orderDetail.remainingPlannedQuantity')+'：'+remainingPlannedQuantity }}</div>
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="name">
+        <el-input v-model="dataForm.name" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderCode')" prop="workOrderNo">
+        <el-input v-model="dataForm.workOrderNo" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderCode')])" clearable />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+        <el-input-number v-model="dataForm.planQuantity" :max="remainingPlannedQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])" :step="1" />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.priority')" prop="priority">
+        <el-select v-model="dataForm.priority" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.priority')])" clearable>
+          <el-option
+            v-for="item in priorityArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.Remarks')" prop="remark">
+        <el-input v-model="dataForm.remark" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.Remarks')])" clearable />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderAdd, workOrderCode } from '@/api/orderManage/workOrder/workOrder'
+export default {
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        name: '',
+        orderId: '',
+        workOrderNo: '',
+        priority: 2,
+        planQuantity: '',
+        remark: ''
+      },
+      priorityArr: [
+        {
+          label: '低',
+          value: 1
+        },
+        {
+          label: '正常',
+          value: 2
+        },
+        {
+          label: '高',
+          value: 3
+        }
+      ],
+      remainingPlannedQuantity: 0,
+      dataRule: {
+        name: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderName')]), trigger: 'blur' }
+        ],
+        workOrderNo: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.WorkOrderCode')]), trigger: 'blur' }
+        ],
+        planQuantity: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.PlannedProcessingVolume')]), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(remainingPlannedQuantity) {
+      this.remainingPlannedQuantity = remainingPlannedQuantity
+      this.visible = true
+      this.dataForm.orderId = this.orderId
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        workOrderCode().then(res => {
+          this.dataForm.workOrderNo = res.data
+        })
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          if (this.dataForm.planQuantity > 0) {
+            workOrderAdd(this.dataForm).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            this.$message({
+              message: '计划加工量不能小于1',
+              type: 'warning'
+            })
+          }
+        }
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/order/components/orderIssue.vue

@@ -0,0 +1,241 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-23 11:05:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 16:29:19
+ * @Description: 工单监控
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button style="margin-right:50px" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <span><b>{{ $t('module.orderManage.order.OrderCode')+'：'+stringfilter(dataForm.orderNo) }}</b></span>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.OrderName')+'：'+stringfilter(dataForm.name) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.process')+'：'+stringfilter(dataForm.processFlowName) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.customer')+'：'+stringfilter(dataForm.customerName) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.ActualTargetQuantity')+'：'+stringfilter(dataForm.planQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.issuedQuantity')+'：'+stringfilter(issuedQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.remainingPlannedQuantity')+'：'+stringfilter(remainingPlannedQuantity) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <!-- <el-col :span="6"><div>{{ $t('module.orderManage.orderDetail.issueTime')+'：'+timefilter(dataForm.startProduceTime) }}</div></el-col> -->
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.DeliveryTime')+'：'+timefilter(dataForm.deliveryTime) }}</div></el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <el-button type="primary" :disabled="remainingPlannedQuantity<1" :order-id="orderId" @click="issueClick()"> {{ 'routerTitle.order.orderManage.orderIssue' | i18nFilter }} </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <orderIssue-add v-if="addOrUpdateVisible" ref="addOrUpdate" :order-id="orderId" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import { orderDetail } from '@/api/orderManage/order/order'
+import { workOrderList, workOrderDelete } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import orderIssueAdd from './orderIssue-add'
+import { timeFormatter } from '@/filters'
+
+const tableBtn = [
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderNo',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    align: 'center'
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  }
+]
+export default {
+  name: '',
+  components: { Pagination, BaseTable, MethodBtn, orderIssueAdd },
+  data() {
+    return {
+      orderId: '',
+      addOrUpdateVisible: false,
+      tableProps,
+      tableBtn,
+      list: [],
+      total: 0,
+      trueWidth: 200,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        orderId: ''
+      },
+      dataForm: {},
+      issuedQuantity: 0,
+      remainingPlannedQuantity: 0
+    }
+  },
+  created() {
+    this.orderId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.listQuery.orderId = this.orderId
+      this.issuedQuantity = 0
+      this.dataForm = {}
+      orderDetail(this.orderId).then(res => {
+        this.dataForm = res.data
+        this.getList()
+      })
+    },
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]？`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          workOrderDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      }
+    },
+    getList() {
+      this.listLoading = true
+      this.issuedQuantity = 0
+      this.remainingPlannedQuantity = this.dataForm.planQuantity
+      workOrderList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+          this.list.forEach(item => {
+            this.issuedQuantity += item.planQuantity
+          })
+          this.remainingPlannedQuantity = this.remainingPlannedQuantity - this.issuedQuantity
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    issueClick() {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(this.remainingPlannedQuantity)
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    towNumber(val) {
+      return val.toFixed(2)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    statusfilter(val) {
+      const orderStatus = {
+        '1': '新增',
+        '2': '启动',
+        '3': '暂停',
+        '9': '完成'
+      }
+      return orderStatus?.[val]
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    font-size: 20px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>

src/views/orderManage/order/components/packageDetail.vue

@@ -0,0 +1,148 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:33:10
+ * @Description:
+-->
+<template>
+  <el-drawer
+    :visible.sync="visible"
+    :append-to-body="true"
+    size="65%"
+  >
+    <div slot="title" style=" background-color:#02BCFF;font-size:1.5em;color:white;padding:5px 20px">{{ 'routerTitle.order.orderManage.packageDetail' | i18nFilter }}</div>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList()"
+      />
+    </base-table></el-drawer>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import detailBtn from '../../components/detailBtn'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.reportingTime')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.packageNumber'),
+    align: 'center'
+  },
+  {
+    prop: 'SAP',
+    label: i18n.t('module.orderManage.order.SAPMaterial')
+  },
+  {
+    prop: 'power',
+    label: i18n.t('module.orderManage.order.power')
+  },
+  {
+    prop: 'detail',
+    label: i18n.t('module.orderManage.order.detail'),
+    subcomponent: detailBtn
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'createTime': '2020-12-21 13：44:15',
+          'code': '110',
+          'SAP': ''
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.total = response.data.total
+      //   this.listLoading = false
+      // })
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/order/components/reportInfo.vue

@@ -0,0 +1,120 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-22 14:23:15
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import { reportList } from '@/api/orderManage/order/order'
+import BaseTable from '@/components/BaseTable'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'reportTime',
+    label: i18n.t('module.orderManage.order.reportingTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'reportType',
+    label: i18n.t('module.orderManage.order.workReportMethod'),
+    align: 'center'
+  },
+  {
+    prop: 'workOrderStatus',
+    label: i18n.t('module.orderManage.order.status'),
+    align: 'center'
+  },
+  {
+    prop: 'goodQuantity',
+    label: i18n.t('module.orderManage.order.goodQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'scrapQuantity',
+    label: i18n.t('module.orderManage.order.scrapQuantity'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10,
+        orderId: ''
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery.orderId = this.orderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      reportList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/order/components/scrapDetail.vue

@@ -0,0 +1,139 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:33:27
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.orderManage.scrapDetail' | i18nFilter"
+    :visible.sync="visible"
+    :before-close="goback"
+    :append-to-body="true"
+    width="80%"
+  >
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList()"
+      />
+    </base-table></el-dialog>
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.initiateTime')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'scrapId',
+    label: i18n.t('module.orderManage.order.scrapId'),
+    align: 'center'
+  },
+  {
+    prop: 'scrapLevel',
+    label: i18n.t('module.orderManage.order.scrapLevel')
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable },
+  props: {
+    orderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.visible = true
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'createTime': '2020-12-21 13：44:15',
+          'scrapId': '110',
+          'scrapLevel': ''
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.total = response.data.total
+      //   this.listLoading = false
+      // })
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/order/components/workorder-add.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-dialog
+    :title="'routerTitle.order.orderManage.orderIssue' | i18nFilter"
+    :visible.sync="visible"
+    width="40%"
+    :append-to-body="true"
+    @closed="cancelWOrkorder"
+  >
+    <el-form
+      ref="dataForm"
+      style="padding: 24px 0;"
+      :model="dataForm"
+      label-width="90px"
+      :rules="dataFormRules"
+    >
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="name">
+        <el-input
+          v-model="dataForm.name"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.WorkOrderCode')" prop="code">
+        <el-input
+          v-model="dataForm.code"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderCode')])"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+        <el-input-number
+          v-model="dataForm.planQuantity"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])"
+          :style="{ width: '100%' }"
+          :step="1"
+          :max="maxPlanQuantity"
+          :min="0"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.ProductLines')" prop="productlines">
+        <el-select
+          v-model="dataForm.productlines"
+          :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.ProductLines')])"
+          multiple
+          clearable
+        >
+          <el-option
+            v-for="(item, index) in productLineOptions"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.workers')" prop="workers">
+        <el-input
+          v-model="dataForm.workers"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.workers')])"
+          clearable
+        />
+      </el-form-item>
+
+      <div style="text-align: center;">
+        <el-button @click="cancelWOrkorder">
+          {{ 'btn.cancel' | i18nFilter }}
+        </el-button>
+        <el-button type="primary" @click="addWOrkorder">
+          {{ 'btn.confirm' | i18nFilter }}
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+<script>
+import { toWorkOrder } from '@/api/orderManage/order/order'
+import { getProductLineList, workOrderAdd } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+export default {
+  data() {
+    return {
+      visible: false,
+      maxPlanQuantity: 9999999999,
+      dataForm: {
+        name: '',
+        code: '',
+        planQuantity: '',
+        productlines: '',
+        workers: ''
+      },
+      productLineOptions: [],
+      dataFormRules: {
+        name: [{ required: true, message: i18n.t('module.orderManage.order.WorkOrderName'), trigger: 'blur' }],
+        code: [{ required: true, message: i18n.t('module.orderManage.order.WorkOrderCode'), trigger: 'blur' }],
+        planQuantity: [{ required: true, message: i18n.t('module.orderManage.order.PlannedProcessingVolume'), trigger: 'blur' }],
+        productlines: [{ required: true, message: i18n.t('module.orderManage.order.ProductLines'), trigger: 'blur' }],
+        workers: [{ required: true, message: i18n.t('module.orderManage.order.workers'), trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      toWorkOrder(id).then(res => {
+        this.dataForm = res.data
+        this.maxPlanQuantity = res.data.planQuantity
+        getProductLineList(listQuery).then(response => {
+          if (response.data.records) {
+            this.productLineOptions = response.data.records
+          }
+        })
+      })
+    },
+    cancelWOrkorder() {
+      // 清空form中的数据
+      this.visible = false
+      this.dataForm.name = ''
+      this.dataForm.code = ''
+      this.dataForm.planQuantity = ''
+      this.dataForm.productlines = ''
+      this.dataForm.workers = ''
+    },
+    addWOrkorder() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          workOrderAdd(this.dataForm).then(res => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+              }
+            })
+            this.$emit('refreshDataList')
+            this.cancelWOrkorder()
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>

src/views/orderManage/order/components/workorder.vue

@@ -0,0 +1,216 @@
+<template>
+  <el-drawer
+    size="60%"
+    :visible.sync="visible"
+    :wrapper-closable="false"
+    class="drawer"
+    @close="close"
+  >
+    <small-title slot="title" :no-padding="true">
+      {{ 'routerTitle.order.orderManage.orderIssue' | i18nFilter }}
+    </small-title>
+    <div>
+      <ul class="detailBox">
+        <li style="width: 50%;">
+          <p class="title">{{ this.$t('module.orderManage.order.OrderName') | i18nFilter }}</p>
+          <p class="text">{{ orderName }}</p>
+        </li>
+        <li style="width: 50%;">
+          <p class="title">{{ this.$t('module.orderManage.order.OrderCode') | i18nFilter }}</p>
+          <p class="text">{{ orderCode }}</p>
+        </li>
+      </ul>
+    </div>
+    <div class="tableBox">
+      <small-title>
+        {{ this.$t('module.orderManage.order.workOrderInfo') | i18nFilter }}
+      </small-title>
+      <base-table
+        :top-btn-config="topBtnConfig"
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :height="tableH"
+        :table-data="diaList"
+        :table-config="tableProps"
+        @clickTopBtn="clickTopBtn"
+      />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList"
+      />
+    </div>
+    <workorder-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </el-drawer>
+</template>
+<script>
+import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+import WorkorderAdd from './workorder-add.vue'
+import Pagination from '@/components/Pagination'
+import BaseTable from '@/components/BaseTable'
+import { orderDetail } from '@/api/orderManage/order/order'
+import { getProductLineList, workOrderList } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import { tableHeight } from '@/utils/index'
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName')
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.WorkOrderCode')
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume')
+  },
+  {
+    prop: 'productlines',
+    label: i18n.t('module.orderManage.order.ProductLines')
+  },
+  {
+    prop: 'workers',
+    label: i18n.t('module.orderManage.order.workers')
+  }
+]
+export default {
+  components: {
+    BaseTable,
+    Pagination,
+    SmallTitle,
+    WorkorderAdd
+  },
+  data() {
+    return {
+      topBtnConfig,
+      orderName: '',
+      orderCode: '',
+      visible: false,
+      tableProps,
+      tableH: tableHeight(350),
+      listQuery: {
+        current: 1,
+        size: 20,
+        orderId: ''
+      },
+      total: 0,
+      diaList: [],
+      productLineOptions: [],
+      addOrUpdateVisible: false
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(350)
+    })
+  },
+  methods: {
+    init(id) {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.listQuery.orderId = id
+      this.visible = true
+      orderDetail(this.listQuery.orderId).then((res) => {
+        this.orderName = res.data.name
+        this.orderCode = res.data.code
+        this.productLineOptions.splice(0, this.productLineOptions.length)
+        this.getList()
+      })
+      getProductLineList(listQuery).then(response => {
+        if (response.data.records) {
+          this.productLineOptions = response.data.records
+        }
+      })
+    },
+    getList() { // 查询已下发的工单
+      workOrderList(this.listQuery).then(res => {
+        if (res.data.records && res.data.records.length > 0) {
+          const obj = res.data.records
+          let str = ''
+          for (const i of obj) {
+            if (i.productlines.length > 0) {
+              str += i.productlines.map(item => {
+                return item.name
+              })
+              i.productlines = str
+              str = ''
+            } else {
+              i.productlines = ''
+            }
+          }
+
+          this.total = res.data.total
+          this.diaList = obj
+        } else {
+          this.total = 0
+          this.diaList = []
+        }
+      })
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew() // 新增
+      }
+    },
+    addNew() {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init({ id: this.listQuery.orderId })
+      })
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 30px;
+}
+.detailBox {
+  list-style: none;
+  display: flex;
+  text-align: left;
+}
+.detailBox p {
+  margin: 0;
+}
+.detailBox .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0,0,0,0.65);
+  padding-bottom: 10px;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+}
+.tableBox {
+  padding: 0 32px;
+}
+</style>

src/views/orderManage/order/order.vue

@@ -0,0 +1,522 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-07-25 10:35:12
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <el-row>
+      <el-tabs v-model="orderStatus" @tab-click="getList">
+        <el-tab-pane name="1" :label="$t('module.orderManage.order.all')" />
+        <el-tab-pane name="2" :label="$t('module.orderManage.order.unComplete')" />
+        <el-tab-pane name="3" :label="$t('module.orderManage.order.complete')" />
+      </el-tabs>
+    </el-row>
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :height="tableH"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :method-list="tableBtn"
+        :width="trueWidth"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <order-add v-if="addOrUpdateVisible" ref="addOrUpdate" :unit-list="unitList" @refreshDataList="getList" />
+    <order-detail v-if="showDetail" ref="showDetail" :unit-list="unitList" :spac-list="packSpacList" />
+    <workorder v-if="showWorkorder" ref="showWorkorder" :unit-list="unitList" :spac-list="packSpacList" />
+  </div>
+</template>
+
+<script>
+import HeadForm from '@/components/basicData/HeadForm'
+import { orderList, orderDelete } from '@/api/orderManage/order/order'
+import i18n from '@/lang'
+import orderAdd from './components/order-add'
+import orderDetail from './components/orderDetail'
+import workorder from './components/workorder'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import completionSchedule from './components/completionSchedule.vue'
+import { timeFormatter, amountFormatter } from '@/filters'
+import newBasicData from '@/filters/newBasicData'
+import { tableHeight } from '@/utils/index'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+const tableBtn = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  },
+  {
+    type: 'issue',
+    btnName: 'routerTitle.order.orderManage.orderIssue'
+  },
+  {
+    type: 'edit',
+    btnName: 'btn.edit',
+    showParam: {
+      type: '&',
+      data: [
+        {
+          type: 'equal',
+          name: 'source',
+          value: 1
+        },
+        {
+          type: 'unindexof',
+          name: 'status',
+          value: [2, 9]
+        }
+      ]
+    }
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete',
+    showParam: {
+      type: '&',
+      data: [
+        {
+          type: 'equal',
+          name: 'source',
+          value: 1
+        },
+        {
+          type: 'unindexof',
+          name: 'status',
+          value: [2, 9]
+        }
+      ]
+    }
+  }
+]
+const tableBtn2 = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tablePropsAll = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter,
+    width: 160,
+    isFixed: true
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.OrderName'),
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.OrderCode')
+  },
+  // {
+  //   prop: 'changeWorkOrder',
+  //   label: i18n.t('module.orderManage.order.triggerTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'priority',
+    label: i18n.t('module.orderManage.order.priority'),
+    filter: newBasicData('1524577291887898626'),
+    width: 100
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.order.customer')
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.order.source'),
+    filter: newBasicData('1523941494259912706'),
+    width: 100
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.order.status'),
+    filter: newBasicData('1526063541841727490'),
+    width: 100
+  },
+  {
+    prop: 'productName',
+    label: i18n.t('module.orderManage.order.ProductName')
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    width: 100
+  },
+  {
+    prop: 'dictDataId',
+    label: i18n.t('module.orderManage.order.unit'),
+    filter: newBasicData('1'),
+    width: 100
+  },
+  {
+    prop: 'price',
+    label: i18n.t('module.orderManage.order.price'),
+    filter: amountFormatter,
+    align: 'right',
+    width: 100
+  }
+]
+const tablePropsUnComplete = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter,
+    width: 160,
+    isFixed: true
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.OrderName'),
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.OrderCode')
+  },
+  // {
+  //   prop: 'changeWorkOrder',
+  //   label: i18n.t('module.orderManage.order.triggerTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'planFinishProduceTime',
+    label: i18n.t('module.orderManage.order.PlanningEndTime'),
+    width: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'priority',
+    label: i18n.t('module.orderManage.order.priority'),
+    filter: newBasicData('1524577291887898626'),
+    width: 100
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.order.customer'),
+    width: 100
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.order.source'),
+    filter: newBasicData('1523941494259912706'),
+    width: 100
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.order.status'),
+    filter: newBasicData('1526063541841727490'),
+    width: 100
+  },
+  {
+    prop: 'productName',
+    label: i18n.t('module.orderManage.order.ProductName')
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    width: 100
+  },
+  {
+    prop: 'dictDataId',
+    label: i18n.t('module.orderManage.order.unit'),
+    filter: newBasicData('1'),
+    width: 100
+  },
+  {
+    prop: 'price',
+    label: i18n.t('module.orderManage.order.price'),
+    filter: amountFormatter,
+    align: 'right',
+    width: 100
+  }
+]
+const tablePropsComplete = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.OrderName'),
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.OrderCode')
+  },
+  // {
+  //   prop: 'changeWorkOrder',
+  //   label: i18n.t('module.orderManage.order.triggerTime'),
+  //   filter: timeFormatter
+  // },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.CompletionTime'),
+    width: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.order.customer'),
+    width: 100
+  },
+  {
+    prop: 'source',
+    label: i18n.t('module.orderManage.order.source'),
+    filter: newBasicData('1523941494259912706'),
+    width: 100
+  },
+  {
+    prop: 'productName',
+    label: i18n.t('module.orderManage.order.ProductName')
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    width: 100
+  },
+  {
+    prop: 'dictDataId',
+    label: i18n.t('module.orderManage.order.unit'),
+    filter: newBasicData('1'),
+    width: 100
+  },
+  {
+    prop: 'price',
+    label: i18n.t('module.orderManage.order.price'),
+    width: 100
+  },
+  {
+    prop: 'actualQuantity',
+    label: i18n.t('module.orderManage.order.ActualFinishedProduct'),
+    width: 100
+  },
+  {
+    prop: 'completionSchedule',
+    label: i18n.t('module.orderManage.orderDetail.completionSchedule'),
+    subcomponent: completionSchedule,
+    width: 100
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { HeadForm, Pagination, BaseTable, MethodBtn, orderAdd, orderDetail, workorder },
+  data() {
+    return {
+      topBtnConfig,
+      addOrUpdateVisible: false,
+      showDetail: false,
+      showWorkorder: false,
+      tableBtn,
+      trueWidth: 150,
+      tableH: tableHeight(333),
+      tableProps: [],
+      list: [],
+      total: 0,
+      listLoading: false,
+      tablePropsAll,
+      tablePropsUnComplete,
+      tablePropsComplete,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.order.OrderName'),
+          placeholder: this.$t('module.orderManage.order.OrderName'),
+          param: 'name'
+        },
+        {
+          type: 'datePicker',
+          label: this.$t('module.orderManage.order.triggerTime'),
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: this.$t('module.orderManage.order.StartTime'),
+          endPlaceholder: this.$t('module.orderManage.order.EndTime'),
+          param: 'searchTime'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {},
+      unitList: JSON.parse(localStorage.getItem('dictObj'))['1'],
+      unitObj: {},
+      packSpacList: JSON.parse(localStorage.getItem('dictObj'))['1522121700583342082'],
+      orderStatus: '1'
+    }
+  },
+  created() {
+    this.tableProps = this.tablePropsAll
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(333)
+    })
+    this.unitList.map((item) => {
+      this.unitObj[item.dataCode] = item.dataName
+    })
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        if (raw.data.status !== 4) {
+          this.$confirm(
+            `${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`,
+            this.$t('module.basicData.visual.Tips'),
+            {
+              confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+              cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+              type: 'warning'
+            }
+          )
+            .then(() => {
+              orderDelete(raw.data.id).then((response) => {
+                this.$message({
+                  message: this.$t('module.basicData.visual.success'),
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.listQuery.current = 1
+                    this.getList()
+                  }
+                })
+              })
+            })
+            .catch(() => {})
+        } else {
+          this.$message({
+            message: this.$t('module.orderManage.order.warnMessage'),
+            type: 'warning'
+          })
+        }
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else if (raw.type === 'detail') {
+        this.showDetail = true
+        this.$nextTick(() => {
+          this.$refs.showDetail.init(raw.data.id)
+        })
+      } else if (raw.type === 'issue') {
+        this.showWorkorder = true
+        this.$nextTick(() => {
+          this.$refs.showWorkorder.init(raw.data.id)
+        })
+      } else {
+        this.$message.warning('功能待开发')
+      }
+    },
+    getList() {
+      if (this.orderStatus === '1') {
+        this.listQuery.status = ''
+        this.tableBtn = tableBtn
+        this.trueWidth = 150
+        this.tableProps = this.tablePropsAll
+        this.topBtnConfig = [{ type: 'add', btnName: 'btn.add' }]
+      } else if (this.orderStatus === '3') {
+        this.listQuery.status = 9
+        this.tableBtn = tableBtn2
+        this.trueWidth = 80
+        this.tableProps = this.tablePropsComplete
+        this.topBtnConfig = []
+      } else if (this.orderStatus === '2') {
+        this.listQuery.status = 1
+        this.tableBtn = tableBtn
+        this.trueWidth = 150
+        this.tableProps = this.tablePropsUnComplete
+        this.topBtnConfig = []
+      }
+      this.listLoading = true
+      this.listQuery.name = this.headFormValue.name
+      if (this.headFormValue.searchTime && this.headFormValue.searchTime.length) {
+        this.listQuery.startTime = this.headFormValue.searchTime[0] + 'T00:00:00'
+        this.listQuery.endTime = this.headFormValue.searchTime[1] + 'T23:59:59'
+      } else {
+        this.listQuery.startTime = ''
+        this.listQuery.endTime = ''
+      }
+      orderList(this.listQuery).then((response) => {
+        console.log(response.data.records)
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.listQuery.current = 1
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew() // 新增
+      }
+    }
+  }
+}
+</script>

src/views/orderManage/orderManagerCockpit/cockpit.vue

@@ -0,0 +1,321 @@
+<template>
+  <div id="container" ref="container" class="visual-container order-cockpit">
+    <el-row
+      class="container-title"
+      :style="{
+        height: beilv * 88 + 'px',
+        lineHeight: beilv * 88 + 'px',
+        fontSize: beilv * 30 + 'px'
+      }"
+    >
+      <div :style="{ paddingLeft: 645 * beilv + 'px' }">
+        <img src="../../../assets/img/logo.png" style="width:1.1em;position: relative;top:.4em" alt="">
+        合肥新能源数字工厂工单管理驾驶舱
+      </div>
+      <el-button
+        type="text"
+        class="title-button"
+        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
+        @click="changeFullScreen"
+      >
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
+        <svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
+      </el-button>
+    </el-row>
+    <el-row class="container-main">
+      <!-- 上 -->
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="16 * beilv">
+        <el-col :span="10">
+          <base-container :beilv="beilv" :height="412" :title="'工单一览表'" :title-icon="'cockpit_1_1'">
+            <work-order :beilv="beilv" :order-msg="orderList" />
+          </base-container>
+        </el-col>
+        <el-col :span="14">
+          <base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
+            <div class="box-padding specil-table1">
+              <base-table
+                :page="1"
+                :limit="12"
+                :show-index="false"
+                :beilv="beilv"
+                :table-config="orderPool"
+                :table-data="orderPoolList"
+              />
+            </div>
+          </base-container>
+        </el-col>
+      </el-row>
+      <!-- 下 -->
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
+        <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
+          <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
+            <div class="box-padding specil-table2">
+              <base-table
+                :page="1"
+                :limit="16"
+                :show-index="false"
+                :beilv="beilv"
+                :table-config="orderMonitiring"
+                :table-data="orderMonitiringList"
+              />
+            </div>
+          </base-container>
+        </el-col>
+      </el-row>
+    </el-row>
+  </div>
+</template>
+<script>
+import baseContainer from './components/baseContainer'
+import workOrder from './components/workOrder.vue'
+import screenfull from 'screenfull'
+import BaseTable from './components/baseTable.vue'
+import moment from 'moment'
+import orderStatus from './components/orderStatus.vue'
+const orderPool = [
+  {
+    prop: 'customerName',
+    label: '客户名称',
+    minWidth: 35.2
+  },
+  {
+    prop: 'orderCode',
+    label: '订单编号',
+    minWidth: 32
+  },
+  {
+    prop: 'productName',
+    label: '产品名称',
+    minWidth: 32
+  },
+  {
+    prop: 'planNum',
+    label: '计划加工量',
+    minWidth: 23.6
+  },
+  {
+    prop: 'planDelivery',
+    label: '计划交货期',
+    minWidth: 28.8
+  },
+  {
+    prop: 'status',
+    label: '订单状态',
+    subcomponent: orderStatus,
+    minWidth: 19
+  }
+]
+const orderMonitiring = [
+  {
+    prop: 'customerName',
+    label: '客户名称',
+    minWidth: 35.2
+  },
+  {
+    prop: 'orderCode',
+    label: '订单编号',
+    minWidth: 33.2
+  },
+  {
+    prop: 'status',
+    label: '订单状态',
+    subcomponent: orderStatus,
+    minWidth: 27
+  },
+  {
+    prop: 'completion',
+    label: '完成率',
+    minWidth: 24.8
+  },
+  {
+    prop: 'yield',
+    label: '良品率',
+    minWidth: 24.8
+  },
+  {
+    prop: 'shiftCosts',
+    label: '班组费用',
+    minWidth: 24.8
+  },
+  {
+    prop: 'energyCosts',
+    label: '能耗费用',
+    minWidth: 29.4
+  },
+  {
+    prop: 'equipmentCost',
+    label: '设备费用',
+    minWidth: 29.4
+  },
+  {
+    prop: 'materialCost',
+    label: '材料费用',
+    minWidth: 29.4
+  },
+  {
+    prop: 'totalCost',
+    label: '总费用',
+    minWidth: 31.6
+  }
+]
+export default {
+  name: 'Cockpit',
+  components: {
+    baseContainer,
+    workOrder,
+    BaseTable
+  },
+  data() {
+    return {
+      beilv: 1,
+      isFullScreen: false,
+      orderPool,
+      orderPoolList: [],
+      orderMonitiring,
+      orderMonitiringList: [],
+      orderList: []
+    }
+  },
+  watch: {
+    isFullScreen: function(val) {
+      if (val) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    },
+    'sidebar.opened': function(val) {
+      console.log(val)
+      if (!this.isFullScreen) {
+        setTimeout(() => {
+          this.beilv = document.getElementById('container').offsetWidth / 1920
+        }, 300)
+      }
+    }
+  },
+  mounted() {
+    this.beilv = document.getElementById('container').offsetWidth / 1920
+    window.addEventListener('resize', () => {
+      if (this.isFullScreen) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    })
+    this.getMsg()
+  },
+  methods: {
+    getMsg() {
+      this.orderList = [
+        { code: 'ZGD20221024000110', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221024000110', percentage: '100%' },
+        { code: 'ZGD20221028000157', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221028000157', percentage: '85%' },
+        { code: 'ZGD20221030000142', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000142', percentage: '72%' },
+        { code: 'ZGD20221030000098', state: '激活', name: '光伏玻璃2.0', line: 'A', workCode: '20221030000098', percentage: '46%' }
+      ]
+      const compList = ['SHABO沙玻', 'KIBING旗滨', '金晶玻璃', '济南金昊', '东莞佳美特', '汇中矿产', '文盛新材料', '西点化学', '开源塑胶', '奥驰商贸', '竹中科技', '程龙玻璃']
+      const arr = []
+      const temp = []
+      for (let i = 0; i < 20; i++) {
+        const obj = {}
+        const sj = parseInt(Math.random() * 200)
+        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
+        obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.productName = '光伏玻璃2.0'
+        obj.planNum = parseInt(Math.random() * 800 + 100)
+        obj.planDelivery = moment().add(sj, 'days').format('YYYY-MM-DD')
+        obj.status = parseInt(Math.random() * 3 + 1)
+        arr.push(obj)
+      }
+      this.orderPoolList = arr
+      for (let i = 0; i < 20; i++) {
+        const obj = {}
+        const sj = parseInt(Math.random() * 200)
+        obj.customerName = compList[parseInt(Math.random() * (compList.length))]
+        obj.orderCode = moment().subtract(sj, 'days').format('YYYYMMDD') + '0000' + parseInt(Math.random() * 89 + 10)
+        obj.status = parseInt(Math.random() * 3 + 1)
+        obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
+        obj.yield = parseInt(Math.random() * 50 + 50) + '%'
+        obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
+        obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
+        temp.push(obj)
+      }
+      this.orderMonitiringList = temp
+    },
+    change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+    changeFullScreen() {
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      this.isFullScreen = !this.isFullScreen
+      screenfull.toggle(this.$refs.container)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.visual-container {
+  width: 100%;
+  min-width: 960px;
+  background: url('../../../assets/img/cockpit/cockpit-back.png') no-repeat;
+  background-size: cover;
+  .container-title {
+    width: 100%;
+    background: url('../../../assets/img/cockpit/title.png') no-repeat;
+    background-size: 100% 100%;
+    color: #fff;
+    .title-button {
+      color: #00fff0;
+      font-size: 20px;
+      position: absolute;
+    }
+  }
+  .container-main {
+    padding: 16px 8px;
+  }
+  .box-padding {
+    padding: 0 16px;
+  }
+}
+</style>
+<style lang="scss">
+.order-cockpit {
+  .specil-table1 {
+    .el-table .cell {
+      padding-left: 25px;
+      padding-right: 25px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 25px;
+    }
+  }
+  .specil-table2 {
+    .el-table .cell {
+      padding-left: 50px;
+    }
+    .el-table--border th:first-child .cell,
+    .el-table--border td:first-child .cell {
+      padding-left: 50px;
+    }
+  }
+}
+</style>

src/views/orderManage/orderManagerCockpit/components/baseContainer/index.vue

@@ -0,0 +1,145 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-19 15:58:17
+ * @LastEditors: zhp
+ * @LastEditTime: 2022-01-24 09:18:01
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
+-->
+<template>
+  <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
+    <div class="line" />
+    <div class="line line-vertical" />
+    <div class="line line-right" />
+    <div class="line line-right-vertical" />
+    <div class="line line-bottom" />
+    <div class="line line-bottom-vertical" />
+    <div class="line line-bottom-right" />
+    <div class="line line-bottom-right-vertical" />
+    <div class="bar-item">
+      <div v-if="title" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div>
+      <div class="bar-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseContainer',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    baseSize: {
+      type: Number,
+      default: 12
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      curIndex: 0
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeTab(num) {
+      this.curIndex = num
+      this.$emit('tabSelect', num)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+  color: #fff;
+  width: 100%;
+  background-color: rgba($color: #061027, $alpha: 0.15);
+  position: relative;
+  border: 2px solid;
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);
+
+  .line {
+    position: absolute;
+    border-top: 4px solid #52FFF1;
+    width: 2em;
+    top: -.25em;
+    left: -.25em;
+    &-vertical {
+      top: calc(-5em / 12);
+      left: calc(-1em / 12);
+      transform: rotate(90deg);
+      transform-origin: left;
+    }
+    &-right {
+      top: -.25em;
+      right: -.25em;
+      left: inherit;
+    }
+    &-right-vertical {
+      top: calc(-5em / 12);
+      right: calc(-1em / 12);
+      left: inherit;
+      transform: rotate(-90deg);
+      transform-origin: right;
+    }
+    &-bottom {
+      top: inherit;
+      left: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-vertical {
+      top: inherit;
+      left: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(-90deg);
+      transform-origin: left;
+    }
+    &-bottom-right {
+      top: inherit;
+      left: inherit;
+      right: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-right-vertical {
+      top: inherit;
+      left: inherit;
+      right: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(90deg);
+      transform-origin: right;
+    }
+  }
+  .bar-title {
+    width: 100%;
+    color: #52FFF1;
+    font-size: 1.5em;
+    padding: .67em;
+  }
+  // .bar-content{
+  //   padding: 1em;
+  // }
+}
+</style>

src/views/orderManage/orderManagerCockpit/components/baseTable.vue

@@ -0,0 +1,176 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-06-14 11:12:39
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="visual-base-table-container">
+    <el-table
+      v-loading="isLoading"
+      :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff',height: 28 * beilv + 'px',lineHeight: 28 * beilv + 'px',padding: 0,fontSize: 12 * beilv + 'px'}"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+    >
+      <el-table-column v-if="page && limit && showIndex" prop="_pageIndex" :label="'tableHeader.index' | i18nFilter" :width="70 * beilv" align="center" />
+      <el-table-column
+        v-for="item in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(100).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      if (this.tableData.length && !this.tableData[0]._pageIndex) {
+        this.tableData.forEach((item, index) => {
+          item._pageIndex = (this.page - 1) * this.limit + index + 1
+        })
+      }
+      return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(100).fill(true)
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    },
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(76,97,123,0.2)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26 * this.beilv + 'px',
+          lineHeight: 26 * this.beilv + 'px',
+          padding: 0,
+          fontSize: 12 * this.beilv + 'px'
+        }
+      } else {
+        return {
+          background: 'rgba(79,114,136,0.29)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26 * this.beilv + 'px',
+          lineHeight: 26 * this.beilv + 'px',
+          padding: 0,
+          fontSize: 12 * this.beilv + 'px'
+        }
+      }
+    },
+    setCellStyle(v) {
+      return {
+        lineHeight: 23 * this.beilv + 'px'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "~@/styles/index.scss";
+.visual-base-table-container {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+}
+.setting {
+  text-align: right;
+  padding: 15px;
+  .setting-box {
+    width: 100px;
+  }
+  i {
+    color: #aaa;
+    @extend .pointer;
+  }
+}
+
+</style>

src/views/orderManage/orderManagerCockpit/components/orderStatus.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :style="{ height: 15 * beilv + 'px' }">
+    <span v-if="this.injectData.status === 3">
+      <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
+      已完成
+    </span>
+    <span v-if="this.injectData.status === 1">
+      <svg-icon icon-class="yellow_dot" style="font-size: 14px; position: relative; top: .08em" />
+      在途
+    </span>
+    <span v-if="this.injectData.status === 2">
+      <svg-icon icon-class="blue_dot" style="font-size: 14px; position: relative; top: .08em" />
+      已下发
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OrderStatus',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      beilv: 1
+    }
+  },
+  mounted() {
+    this.beilv = document.getElementById('container').offsetWidth / 1920
+    window.addEventListener('resize', () => {
+      if (this.isFullScreen) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    })
+  }
+}
+</script>

src/views/orderManage/orderManagerCockpit/components/workOrder.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="order-box" :style="{ padding: '0 ' + 16 * beilv + 'px', fontSize: 14 * beilv + 'px'}">
+    <!-- 小块 -->
+    <div v-for="(item,index) in orderMsg" :key="index" :style="{ padding: 10 * beilv + 'px' + ' 20px ' + 16 * beilv + 'px' + ' 16px'}" class="box">
+      <p class="line1">
+        <span>工单编号：<span class="light-color">{{ item.code }}</span></span>
+        <span class="fr">
+          状态：
+          <span class="state">{{ item.state }}</span>
+        </span>
+      </p>
+      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span>产品名称：<span class="light-color">{{ item.name }}</span></span>
+        <span class="fr">
+          产线：
+          <span class="light-color" style="margin-right: 25px">{{ item.line }}</span>
+        </span>
+      </p>
+      <p :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span>所属订单编号：<span class="light-color">{{ item.workCode }}</span></span>
+      </p>
+      <div :style="{ paddingLeft: 15 * beilv + 'px'}">
+        <span v-if="item.percentage === '100%'" class="blue-color">√ 订单进度</span>
+        <span v-else class="light-color">订单进度</span>
+        <span class="light-color fr">{{ item.percentage }}</span>
+        <div class="progress-box">
+          <div
+            class="progress"
+            :style="{height: 8 * beilv + 'px', width: item.percentage}"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'WorkOrder',
+  props: {
+    orderMsg: {
+      type: Array,
+      default: () => []
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.order-box {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  .box {
+    width: 49.5%;
+    height: 49.5%;
+    margin-bottom: 8px;
+    background-image: url('../../../../assets/img/cockpit/module-back.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    .light-color {
+      opacity: 0.5;
+    }
+    .blue-color {
+      color: #3E6AE9;
+    }
+    .line1::before {
+      display: inline-block;
+      content: "";
+      width: 4px;
+      height: 14px;
+      border-radius: 2px;
+      margin-right: 8px;
+      vertical-align: middle;
+      background-color: #4BFFC8;
+    }
+    .state {
+      display: inline-block;
+      color: #70F97F;
+      padding: 2px 4px;
+      border-radius: 2px;
+      background: #366F5D;
+    }
+  }
+}
+.progress-box {
+  border-radius: 5px;
+  background: #1E2D45;
+  .progress {
+    text-align: right;
+    line-height: 18px;
+    border-radius: 5px;
+    padding-right: 5px;
+    margin-top: 10px;
+    background: linear-gradient(270deg, #47F8DC 0%, #4573FE 100%);
+  }
+}
+
+</style>

src/views/orderManage/orderMonitoring/components/baseContainer/index.vue

@@ -0,0 +1,143 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-01-19 15:58:17
+ * @LastEditors: zhp
+ * @LastEditTime: 2022-01-24 09:18:01
+ * @Description: file content
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
+-->
+<template>
+  <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
+    <div class="line" />
+    <div class="line line-vertical" />
+    <div class="line line-right" />
+    <div class="line line-right-vertical" />
+    <div class="line line-bottom" />
+    <div class="line line-bottom-vertical" />
+    <div class="line line-bottom-right" />
+    <div class="line line-bottom-right-vertical" />
+    <div class="bar-item">
+      <div v-if="title" class="bar-title">
+        <span>
+          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
+          {{ title }}
+        </span>
+      </div>
+      <div class="bar-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseContainer',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleIcon: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 200
+    },
+    baseSize: {
+      type: Number,
+      default: 12
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      curIndex: 0
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeTab(num) {
+      this.curIndex = num
+      this.$emit('tabSelect', num)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+  color: #fff;
+  width: 100%;
+  background-color: rgba($color: #061027, $alpha: 0.15);
+  position: relative;
+  border: 2px solid;
+  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
+  .line {
+    position: absolute;
+    border-top: 4px solid #52FFF1;
+    width: 2em;
+    top: -.25em;
+    left: -.25em;
+    &-vertical {
+      top: calc(-5em / 12);
+      left: calc(-1em / 12);
+      transform: rotate(90deg);
+      transform-origin: left;
+    }
+    &-right {
+      top: -.25em;
+      right: -.25em;
+      left: inherit;
+    }
+    &-right-vertical {
+      top: calc(-5em / 12);
+      right: calc(-1em / 12);
+      left: inherit;
+      transform: rotate(-90deg);
+      transform-origin: right;
+    }
+    &-bottom {
+      top: inherit;
+      left: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-vertical {
+      top: inherit;
+      left: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(-90deg);
+      transform-origin: left;
+    }
+    &-bottom-right {
+      top: inherit;
+      left: inherit;
+      right: -.25em;
+      bottom: -.25em;
+    }
+    &-bottom-right-vertical {
+      top: inherit;
+      left: inherit;
+      right: calc(-1em / 12);
+      bottom: calc(-5em / 12);
+      transform: rotate(90deg);
+      transform-origin: right;
+    }
+  }
+  .bar-title {
+    width: 100%;
+    color: #52FFF1;
+    font-size: 1.5em;
+    padding: .67em;
+  }
+  // .bar-content{
+  //   padding: 1em;
+  // }
+}
+</style>

src/views/orderManage/orderMonitoring/components/dataShowBox.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="dataShowBox" :style="{height: height * beilv + 'px'}">
+    <el-row>
+      <el-col :span="7" :style="{paddingTop: 24 * beilv + 'px'}">
+        <div class="numStyle" :style="{marginBottom: 8 * beilv + 'px', fontSize: 32 * beilv + 'px'}">12131</div>
+        <div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">品类1</div>
+      </el-col>
+      <el-col :span="1">
+        <span class="aa" :style="{height: 80 * beilv + 'px', marginTop: 16 * beilv + 'px'}" />
+      </el-col>
+      <el-col :span="7" :style="{paddingTop: 24 * beilv + 'px'}">
+        <div class="numStyle" :style="{marginBottom: 8 * beilv + 'px', fontSize: 32 * beilv + 'px'}">12131</div>
+        <div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">品类2</div>
+      </el-col>
+      <el-col :span="1">
+        <span class="aa" :style="{height: 80 * beilv + 'px', marginTop: 16 * beilv + 'px'}" />
+      </el-col>
+      <el-col :span="7" :style="{paddingTop: 24 * beilv + 'px'}">
+        <div class="numStyle" :style="{marginBottom: 8 * beilv + 'px', fontSize: 32 * beilv + 'px'}">12131</div>
+        <div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">品类3</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    height: {
+      type: Number,
+      default: 200
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dataShowBox {
+  text-align: center;
+  width: 100%;
+  background: rgba(0, 255, 241, 0.03);
+  box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.22);
+}
+.numStyle {
+  color: #52fff1;
+}
+.fontStyle {
+  color: #ffffff;
+}
+.aa {
+  display: block;
+  width: 1px;
+  background: linear-gradient(153deg, rgba(153, 255, 249, 0) 0%, #60fff1 46%, rgba(96, 255, 241, 0) 100%);
+  margin: auto;
+}
+</style>

src/views/orderManage/orderMonitoring/components/dataShowMain.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="dataShowMain" :style="{height: height * beilv + 'px'}">
+    <el-row>
+      <el-col :span="7" :style="{paddingTop: 64 * beilv + 'px'}">
+        <div class="numStyle" :style="{marginBottom: 16 * beilv + 'px'}">
+          <span :style="{fontSize: 24 * beilv + 'px'}">¥</span>
+          <span :style="{fontSize: 36 * beilv + 'px'}">400,000.</span>
+          <span :style="{fontSize: 24 * beilv + 'px'}">00</span>
+        </div>
+        <div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">— 年度销售目标 —</div>
+      </el-col>
+      <el-col :span="1">
+        <span class="aa" :style="{height: 160 * beilv + 'px', marginTop: 28 * beilv + 'px'}" />
+      </el-col>
+      <el-col :span="7" :style="{paddingTop: 64 * beilv + 'px'}">
+        <div class="numStyle" :style="{marginBottom: 16 * beilv + 'px'}">
+          <span :style="{fontSize: 24 * beilv + 'px'}">¥</span>
+          <span :style="{fontSize: 36 * beilv + 'px'}">417,997.</span>
+          <span :style="{fontSize: 24 * beilv + 'px'}">00</span>
+        </div>
+        <div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">— 年度完成值 —</div>
+      </el-col>
+      <el-col :span="1">
+        <span class="aa" :style="{height: 160 * beilv + 'px', marginTop: 28 * beilv + 'px'}" />
+      </el-col>
+      <el-col :span="7" :style="{paddingTop: 64 * beilv + 'px'}">
+        <div class="numStyle" :style="{marginBottom: 16 * beilv + 'px'}">
+          <span :style="{fontSize: 36 * beilv + 'px'}">104.</span>
+          <span :style="{fontSize: 24 * beilv + 'px'}">5</span>
+          <span :style="{fontSize: 36 * beilv + 'px'}">%</span>
+        </div>
+        <div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">— 目标完成率 —</div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    height: {
+      type: Number,
+      default: 200
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  }
+}
+</script>
+<style scoped>
+.dataShowMain {
+  text-align: center;
+  height: 90px;
+  background: rgba(0, 255, 241, 0.03);
+  box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.22);
+}
+.numStyle {
+  color: #fff;
+  font-weight: 600;
+}
+.fontStyle {
+  color: #52fff1;
+}
+.aa {
+  display: block;
+  width: 1px;
+  background: linear-gradient(153deg, rgba(153, 255, 249, 0) 0%, #60fff1 46%, rgba(96, 255, 241, 0) 100%);
+  margin: auto;
+}
+</style>

src/views/orderManage/orderMonitoring/components/lineChart.vue

@@ -0,0 +1,191 @@
+<template>
+  <div id="monthChart" :style="{ height: height * beilv + 'px', width:width}" />
+</template>
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+export default {
+  mixins: [resize],
+  props: {
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('monthChart'))
+      this.chart.setOption({
+        legend: {
+          itemWidth: 15, // 设置legend图标的宽度
+          itemHeight: 15, // 设置legend图标的高度
+          right: '10%',
+          data: ['求和项:金额', '求和项:数量'],
+          textStyle: {
+            color: '#ffffff80'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          axisLine: {
+            lineStyle: {
+              color: '#ffffff80'
+            },
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '金额',
+            position: 'left',
+            alignTicks: true,
+            axisLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#21325980'
+              },
+              show: true
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'solid',
+                color: '#21325980'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              // y轴文字的配置
+              textStyle: {
+                color: '#ffffff80' // Y轴内容文字颜色
+              },
+              formatter: '{value} W'
+            },
+            nameTextStyle: {
+              color: '#FFFFFF80',
+              fontSize: 12
+            }
+          },
+          {
+            type: 'value',
+            name: '数量',
+            position: 'right',
+            alignTicks: true,
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#21325980'
+              }
+            },
+            axisLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#21325980'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              // y轴文字的配置
+              textStyle: {
+                color: '#ffffff80' // Y轴内容文字颜色
+              }
+            },
+            nameTextStyle: {
+              color: '#FFFFFF80',
+              fontSize: 12
+            }
+          }
+        ],
+        series: [
+          {
+            name: '求和项:金额',
+            data: [12, 20, 15, 8, 7, 11, 13, 11, 9, 10.5, 13, 15],
+            type: 'bar',
+            barMaxWidth: 'auto',
+            barWidth: 12,
+            itemStyle: {
+              color: {
+                x: 0,
+                y: 0,
+                x2: 1,
+                y2: 0,
+                type: 'linear',
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: '#1EBEAC' // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: '#52FDEA' // 100% 处的颜色
+                  }
+                ]
+              }
+            }
+          },
+          {
+            data: [12, 20, 15, 8, 7, 11, 13, 11, 9, 10.5, 13, 15],
+            type: 'pictorialBar',
+            barMaxWidth: '20',
+            symbolPosition: 'end',
+            symbol: 'diamond',
+            itemStyle: {
+              // 设置symbol的颜色
+              normal: {
+                color: '#A4FFF5'
+              }
+            },
+            symbolOffset: [0, '-50%'],
+            symbolSize: [12, 10],
+            zlevel: 2
+          },
+          {
+            name: '求和项:数量',
+            type: 'line',
+            yAxisIndex: 1,
+            data: [90, 210, 180, 120, 60, 90, 150, 120, 40, 130, 145, 90],
+            showSymbol: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            color: '#DE9134',
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(255, 145, 52, 1)' }, // 顶端颜色
+                  { offset: 1, color: 'rgba(255, 145, 52, 0.1)' } // 底部颜色
+                ])
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/orderMonitoring/components/mixins/resize.js

@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}

src/views/orderManage/orderMonitoring/components/pieChart.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <div :id="id" :style="{ height: height * beilv + 'px', width:width}" />
+  </div>
+</template>
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+const color1 = new echarts.graphic.LinearGradient(
+  0,
+  1,
+  0,
+  0,
+  [
+    { offset: 0, color: '#E77657' },
+    { offset: 1, color: '#53222A' }
+  ],
+  false
+)
+const color2 = new echarts.graphic.LinearGradient(
+  0,
+  0,
+  1,
+  0,
+  [
+    { offset: 0, color: '#31AFF0' },
+    { offset: 1, color: '#0B3A52' }
+  ],
+  false
+)
+const color3 = new echarts.graphic.LinearGradient(
+  0,
+  0,
+  0,
+  1,
+  [
+    { offset: 0, color: '#F9A237' },
+    { offset: 1, color: '#6E4A27' }
+  ],
+  false
+)
+const color4 = new echarts.graphic.LinearGradient(
+  0,
+  0,
+  0,
+  1,
+  [
+    { offset: 0, color: '#7AEAE0' },
+    { offset: 1, color: '#18433F' }
+  ],
+  false
+)
+export default {
+  mixins: [resize],
+  props: {
+    id: {
+      type: String,
+      default: 'OverviewLine'
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    pieData: {
+      type: Array,
+      default: () => []
+    },
+    formatter: {
+      type: String,
+      default: '{firstLine|{b}} \n {secondLine|{c}}'
+    },
+    pieStyle: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById(this.id))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item'
+        },
+        color: [color1, color2, color3, color4],
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['60%', '90%'],
+            hoverAnimation: false,
+            itemStyle: {
+              borderRadius: 0,
+              borderWidth: 3,
+              borderColor: '#060F20'
+            },
+            labelLine: {
+              show: true,
+              length: 0,
+              length2: this.beilv * this.pieStyle.line_s,
+              smooth: true,
+              lineStyle: {
+                width: 1,
+                cap: 'butt'
+              }
+            },
+            label: {
+              formatter: this.pieStyle.formatter,
+              minMargin: 5,
+              rich: {
+                firstLine: {
+                  fontSize: this.beilv * 14,
+                  lineHeight: this.beilv * 30,
+                  color: '#ffffff80'
+                },
+                secondLine: {
+                  fontSize: this.beilv * this.pieStyle.num_fs,
+                  color: '#fff'
+                }
+              }
+            },
+            data: this.pieStyle.pieData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/orderMonitoring/components/progressBox.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-row class="progress-main-box">
+    <el-col :span="24">
+      <template v-for="(item,index) in productData">
+        <el-row :key="index" :style="{marginBottom: 18 * beilv + 'px'}">
+          <el-col :span="4" style="text-align: right;padding-right:5px">{{ item.name }}</el-col>
+          <el-col :span="20">
+            <div
+              class="progress"
+              :class="index%2===0?'progress1':'progress2'"
+              :style="{height: 18 * beilv + 'px', width: item.percentage}"
+            >
+              {{ item.number }}
+            </div>
+          </el-col>
+        </el-row>
+      </template>
+    </el-col>
+  </el-row>
+</template>
+<script>
+export default {
+  naem: 'progressBox',
+  props: {
+    productData: {
+      type: Array,
+      default: () => []
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+<style scoped>
+.progress-main-box {
+  padding: 0 10px;
+}
+.progress {
+  text-align: right;
+  line-height: 18px;
+  border-radius: 5px;
+  padding-right: 5px;
+}
+.progress1 {
+  background: linear-gradient(270deg, #83f7ec 0%, rgba(76, 236, 213, 0.05) 100%);
+}
+.progress2 {
+  background: linear-gradient(270deg, #3ac6fc 0%, rgba(56, 195, 255, 0.05) 100%);
+}
+</style>

src/views/orderManage/orderMonitoring/components/ringChart.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="ringChartContainer">
+    <ul v-if="orderList.length > 0" class="pieBox">
+      <li v-for="(item,index) in orderList" :key="index">
+        <div>
+          <span class="title">{{ item.name }}</span>
+        </div>
+        <div :id="item.id" style="height:250px;width:250px" />
+      </li>
+    </ul>
+    <div v-else class="imgBox">
+      <img src="./../../../../assets/img/empty.png" alt="">
+    </div>
+  </div>
+</template>
+<script>
+import echarts from 'echarts'
+import i18n from '@/lang'
+export default {
+  props: {
+    orderList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      dataS: []
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    initChart() {
+      for (const item of this.orderList) {
+        var chartDom = document.getElementById(item.id)
+        var myChart = echarts.init(chartDom)
+        var outQuantity = item.outQuantity ? item.outQuantity : 0 // 加工数量
+        var scrapQuantity = item.scrapQuantity ? item.scrapQuantity : 0 // 损坏数量
+        var planQuantity = item.planQuantity ? item.planQuantity : 0 // 计划加工量
+        var syQuantity = (planQuantity - outQuantity - scrapQuantity) > 0 ? (planQuantity - outQuantity - scrapQuantity) : 0// 剩余数量
+        var option = {
+          color: ['#2C3AAE', '#C5E951', '#DCE4F1'],
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            icon: 'circle',
+            bottom: '5%',
+            left: 'center',
+            itemWidth: 8,
+            itemHeight: 8
+          },
+          series: [
+            // 内圆1
+            {
+              type: 'pie',
+              zlevel: 2, // 层级
+              radius: ['46%', '50%'],
+              center: ['50%', '45%'],
+              itemStyle: {
+                normal: {
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(209, 204, 214, 0.64)',
+                  color: '#fff',
+                  label: {
+                    show: false
+                  },
+                  labelLine: {
+                    show: false
+                  }
+                }
+              },
+              tooltip: {
+                show: false
+              },
+              hoverAnimation: false,
+              data: [100]
+            },
+            // 外环1
+            {
+              type: 'pie',
+              radius: ['70%', '71%'],
+              center: ['50%', '45%'],
+              zlevel: 1, // 层级
+              itemStyle: {
+                normal: {
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(0,0,0,.5)',
+                  color: '#fff',
+                  label: {
+                    show: false
+                  },
+                  labelLine: {
+                    show: false
+                  }
+                }
+              },
+              tooltip: {
+                show: false
+              },
+              hoverAnimation: false,
+              data: [100]
+            },
+            // 占比环
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: ['50%', '70%'],
+              center: ['50%', '45%'],
+              clockWise: true,
+              avoidLabelOverlap: false,
+              hoverAnimation: false,
+              silent: true,
+              label: {
+                normal: {
+                  show: true,
+                  position: 'center',
+                  color: '#9A9EBA',
+                  formatter: ['{a|' + planQuantity + '}', '{b|' + i18n.t('module.orderManage.orderMonitoring.orderQuantity') + '}'].join('\n\n'),
+                  rich: {
+                    a: {
+                      color: '#2F3AA7',
+                      fontSize: 24
+                    },
+                    b: {
+                      color: '#1E2AA8',
+                      fontSize: 12
+                    }
+                  }
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                {
+                  value: outQuantity,
+                  name: i18n.t('module.orderManage.orderMonitoring.processingCapacity') + outQuantity,
+                  itemStyle: {
+                    normal: {
+                      color: '#2C3AAE'
+                    }
+                  }
+                },
+                {
+                  value: scrapQuantity,
+                  name: i18n.t('module.orderManage.orderMonitoring.damageQuantity') + scrapQuantity,
+                  itemStyle: {
+                    normal: {
+                      color: '#C5E951'
+                    }
+                  }
+                },
+                {
+                  value: syQuantity,
+                  itemStyle: {
+                    normal: {
+                      color: '#DCE4F1'
+                    }, // 默认颜色
+                    emphasis: {
+                      color: '#DCE4F1'
+                    } // hover 颜色
+                  }
+                }
+              ]
+            }
+          ]
+        }
+        myChart.setOption(option, true)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pieBox {
+  display: flex;
+  flex-flow: row wrap;
+}
+.pieBox > li {
+  background-color: rgba(247, 248, 255, 0.7);
+  margin: 0 16px 16px 0;
+  padding: 16px;
+}
+.pieBox .title {
+  font-size: 14px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.85);
+}
+.imgBox {
+  text-align: center;
+  padding-top: 20px;
+}
+</style>

src/views/orderManage/orderMonitoring/components/saleTop.vue

@@ -0,0 +1,200 @@
+<template>
+  <div id="saleTop" :style="{ height: height * beilv + 'px', width:width}" />
+</template>
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+export default {
+  mixins: [resize],
+  props: {
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    height: {
+      type: String,
+      default: '300px'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('saleTop'))
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['员工2', '员工1', '员工3'],
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#fff'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            show: false
+          }
+        ],
+        series: [
+          {
+            name: 'Direct',
+            type: 'bar',
+            barWidth: 32,
+            itemStyle: {
+              // 柱状颜色和圆角
+              barBorderRadius: [16, 16, 16, 16] // （顺时针左上，右上，右下，左下）
+            },
+            label: {
+              // 柱体上显示数值
+              show: true, // 开启显示
+              position: 'top', // 在上方显示
+              textStyle: {
+                // 数值样式
+                fontSize: this.beilv * 22,
+                color: '#FFF89F'
+              },
+              formatter: '{c}'
+            },
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                      { offset: 0, color: '#281B0E' },
+                      { offset: 1, color: '#3AC6FC' }
+                    ],
+                    false
+                  )
+                }
+              },
+              {
+                value: 205,
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                      { offset: 0, color: '#281B0E' },
+                      { offset: 1, color: '#F9A237' }
+                    ],
+                    false
+                  )
+                }
+              },
+              {
+                value: 152,
+                itemStyle: {
+                  color: new echarts.graphic.LinearGradient(
+                    0,
+                    1,
+                    0,
+                    0,
+                    [
+                      { offset: 0, color: '#281B0E' },
+                      { offset: 1, color: '#83F7EC' }
+                    ],
+                    false
+                  )
+                }
+              }
+            ]
+          },
+          {
+            type: 'pictorialBar',
+            name: 'pictorial element',
+            symbolSize: 50,
+            z: 10,
+            data: [
+              {
+                value: 100,
+                symbol:
+                  'image://data:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAKv0lEQVRoBe1aaWxU1xX+3uwz9ni8jJexjfHOahk3LSlbEE1JCoRFTVo1/VXlR2hVqVIjUgqkkqWWrUFEitQqqqI2v9qoiIYEAgKlCiQFGiiFJICBGIzX8XgZe/YZz/J67jMzc9/4jf0Gu6pQuZL1zr33rPeee+45dww8bo/2Cgi5qN9cWWmHGFuTEEVdLnRzgqsRPG2r1v79yJEj8Vz4qTawsbGxAAHPTVFEVS4C5hJXgOZPnYOul3LhqVGLrPH7V/0vjZvUU/yeWn2TeKoNTOgTd4goJ/dICpmrryiIt3LlpdpFGeMmR9l3E8ALAncGKyFU80JbN29eMdZ9exAQ+WEVsICi+QsqPj9+/CKPPACxT+oL8IhaHLzbN9zJz88E52SgErNbDofMkgUDA4heYcdENqxEmjEmQP/EH3G7slI2vtDpnJWOql1UJvUR6jw28BHaLEVVH++g4rI8QoOPdzDXzRJFuimFh1g3QQuJNleBM+A/hCYzcJzwADrbDEgK07oCgNHOcZvzqiA+fh9CfgMirnEMjhrhdhsQntAiHNFIf0x/kzEx+WeIo7h4AhUlERiLGsBo57rNqYGiRsDd06fgAhnmKs2qayCoBfsD9Oh3mfAlQcXlIZTjFBgPIZFrFpRVFGaVBjG2yVTN11iD4VVtiBQ/hHty+hndHpSevwprZ480OttUbdYG3qirFfs3PYVAjYNTc/ZgXo8TVR9+giVd92el46yIjx3atVg35rkRtVkVLSp21KB6USuKq+bDmJcPgzlPwouGgpgIBeAddmLgznUM3ruDRGJqJab3+BArsi3ZtmP/TUUBKgYf2sBjh3etQVw8IYoihb90E+iKqG1djoUrnyajrAh6RuEbHkSUDIpGQhKi3miGnoy1llbAYiuRjO354hJuX/wY0ehEmhlBgiB4oRWe2/bK/k9lEyo7D2XgB6+/VpdA9BJV+HZejn1ePdqefR4mawGGOm9gtPeuZBiPkwkzQ0vmNaCscQmi4SBunjuFnpvXZGiCgBEN9Mu3vPqbLtmEik7OBn78u/b88WD4It3KS3n+dcu+iZant8BNRjk7riI2EeanZ4R1BhMqF38NxdX1uHv5HG58eoZEcNFUEK4XWkwr1v203T8jMw4h52vCEwy9SbWszLhFq9ej6cl16PvyEka72ctG7o0tSM+1CwiMjaDhG2sl975y6igxemAkLagkG3gpF+7sMlLdjh3e2SImhLeIILXz1YuWoeVbm9F1+SzG+7N7UCwaRYSCSzgQQCwagZhIQKvTsTMmkx+iMxvyjmH+spX0QjmB0f5ubl5ofXHDqvfePX1+iBucFsxtB2PCAVrRVHpntZej7TvPo+/6v+B19SkKisdiGB8Zgt8zPmWeGWgrKYW1sEg25xnsxUDHv7Fw9bNwO3sw0nv/wTzJlnTAJhnBNJ2UstPgSFPHD+9ZLkLcyOMtXbsRHtcARro6+OEUzEK/q+e+zDgWZZONGe92OeEbcyeHUl8WpALuISxdK7eF6cB0SSHOAKSlzYAYj8df4FHsNRT56prhuvM5PyyDRwedqbCfV1CIqoYm1DQvlP7sjqqUe44Nu0D8ZbSs03/zCmwV1ahe0CKby9RFNpnRUW0gHfWtPG192woM3/8KYd9U12N47IyFfD6JxGAyw+5wQKfTS322i3kFtpRrsmg5EZ4adUMeN5i71pEsvmXqws9lwqoMPPHGa4soZjcniTVaHcpqmzE+kD2osIAisvhBQcRC9yIXl5JsoDMYUnA8Fk3BPDDWfx+FjnnQ6tO4TBdJJx4xC6wqyMRjiVaevnR+IzRaLYJjo/ywDDZRaja/eZFsLLMzEY6khvQGYwrmAe9QPzQaLSqbFqOXSwAe6KR8+DkGqgwkh5O9xuYX2xEYd5MbxjhW6kF23gLecfjpOmCNLYbRbFZkkKCdjQS8KKCILW9yneRz6Z46A0U5M1N+ASLByfOVZjUzNOLsR9DnTWUoGjqL+UVFKCzNXjsyrtFwiBZBlvLSmst1yiZd1RmkQ13BMzBZ8inHDPJDKmEK8nz6RVQJCkbiDAUuS9KNlslKJCkoIVB9rKKp2kFBEMO8XtEJemIgt8q1FVH1YCspQ4zcLuT3w09u7veMkTcEUFFbT2dNeb21FH3DfrnHaCCmD/A0iihzzCCgHZw8LA/Gw34vrWjuBrLMRU+R00y7UVxWDpt90jVZieSbJmDpTRZK8bwyrTJ1kk1yHXUGiujhaChXHIelgKVX8jySxwnSinvdbukvoXCJM9w86fqYpIqEQjw5BwswsLqSZPKNPEqmEz/Hw+pcVKu7IsbTEXOouxM6ownGfBsifrngJHN2cXtGh6WuzqCHJd+anEp/aRuSTaNVXuu84lJKyvVwfiUv6gXSKUk73VeZawaFNl9/je7rlM9HAj6MOXuRXya7PWRUJosl1fcr5Jps0u9Nv4MaqMpXaoX07BFwD9O/B6RPCdOF6aSEnzmmysDN29tZWnKaJ+7ruAZH0xLKMCbTL36OwSazBQbaZdZCFESG+nupXApJOSfbXbdrkHZ4RJpnSYOFUrfMxrKX4ppGerdhD4tcI10knbihbKAqAxkxBbh3eSZd1z6j/DGEktqF/HAapmUurapORcYQncnBni70dd6Gs/sefBRB6TKTEu6SikrKU6eelormFsQpYt/+59k0X4IydZFNZnRUG9hQYzpKxWlvkl6kUqiDnhUcpIS5qCQ5LPvqaAccdQ3Il3ZnakBiGYyjtkHxfFqK7LDXLUTnpXPg81SmA9NFJmiajuqK/vdHzsZfXL8qTHEhVaB5RwaRV1iC6iVPUOLdDZZWZTaWR7Jk20bpXV5BAcwUbApoQYrKy2G1FUJL7pnZ2LXQtPIZuPu68MVHx2XTtCO71ry89zPZ4DQd1TvIeFTZ6t8mz5Md7mtn/kbvKKOof3LymTCbLIGe5PV0Js20awaTCSxNU2rsqbFx5XrKP324/MGfyYnToZbJZjoo0WUbU5aSBfvr27dHKZr/iK6/1FaxO+7i0XcoKxlF8+oNsE4TWbOwTQ0z2uY1G8k4Py4ceRssY0o1kslkMx1SYyqAqf4xA9Ffzpx3/fCZpwZpZTcnURN0R/ZRKcPSN/Yixs4PezhS+3Roshaipm0lHAtaMXSvAxfee4ceg+UXP+34T7bsOHAyKVPtd+rJV0l57Le79opI7M5EL6QnhpZ1m+i5vhbB8RF46L70jThJ4SBikcmqnSUJBrpGrHYHbFTMWgrthDOIW/84g4HOW8Qy7ZaMP/2P2r5tv9i/J1OWmv5DG8iYHzu0czf9oLtXSRD7PWLe4jZUNCyC2Tp5xyV/wU0+PLFzNtpzF/10zzk7O6TKIpMXHdU923Yc3Jc5rrY/KwOZkPdf3/2DhBh/i8CpN/UDLdiPLnkUMc2Uv7KoGaJknWUmYak2pJ+8lZtHI2h/vPXVfbL7Vxk1++isDWSsT77ZXh2JhP5AnrUhu6gcZgScMhrNL2/8WXtfDlSKqHNiYJLz+4d2PiWKwq+oqP12ciyXL13iH1Ht+eutOw5+kgvddLhzamBS0Ik3flkfi4rfp1e1TSSgjUobeTn+AJHutQCFk6uCiA91euGvz/38wL0kj7n6/lcM5JUTxXbNycORxoSYKIuLkN7otQLGKOwPbXzF2CkI7VkPIc/nMfz/ugL/AZcFzoIKfv9hAAAAAElFTkSuQmCC',
+                xAxis: 0,
+                symbolPosition: 'end',
+                symbolOffset: [0, this.beilv * -200 + '%']
+              },
+              {
+                value: 205,
+                symbol:
+                  'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAITElEQVRoBe1a62+VRRr/zXt6WqSlpbQCLQURSotU443FEESCFnVFs9ld1iWi0ZiIRv0LJLshMd6+bfxgNproB4Opgh+MGqMU3dUVlS2K4VZYQAq1LZcChQLtubzjb97Tc87M6Xt65j3nVEO2T3jbmWfmufzm8swzU4AJurJHQARxv6m+vhYyttyVsiSIXFH6OmLg5mUrtm3evDkeRJ81wMbGxkpcHNgnJWYFMVDMvgLOW4f6TjweRKdj29kZHFz2W4JL+Cn/Yutvsp81QDfsHqRQoOWRNFKs31LIzqC6rJeoUrygbvqfXGCN0PZgPUSDbvTGBx5YerbrQB8gdbZFWaD6muaZP3744Td65x7Ibq8uMCBDeOVw96lDenuuciCAfso66+oMJM09PYjuVNvEYPuJZvAEwre+iQP19QZ/YW9vQT5aL1HD6hVUmQB4BU2Wr6sTM+g7LFcQc2IGg06WlDwpRR7jJkLwZIMazNE/D09yaIwMACVVOTr5NJdUAkq2yFT0W0H83FGIivmQZ/ohIi6cKLM7nvnC5Q+Xs6vIcSAdnt/854Y5c6WOJ6Nki03FBUinYx3voWxaDBgcUv77U9yFGMlqnUgc8iK7RX/C8JnjBK9QB82C/M0oblYfsouYLclUrWJxLa5eMxeldZPNDgFrkd5LOLXlKAY7TnuShaZqBQM8uGCOrH96IcpbqgNCGbv7xb1n0fNaJ5r+d6wgHwsSlu3rFkX6BveWTp/k723VAmD27cDUZiDMwBOqSPRTazI+CAxxSZ7YARzvAGLRUToiJ4dQOrOiRbRu2jeq0ZKRN0DZvnY5XHzECMLwp5E6Ihpagfl/ToBy+7mnetmBoOTlREdxFX+Xc7/V8ashn21nvwT2bAaGL2nKVFGch4P7RWvbVxkNVtW8AMp/P3ItItEdPLhqDSvVi4CWJ4FJXK7xvfzU1Y3Oj0kEGmrkdz2BEtzxd4GDn5sSQpxGaXiJWPH2T2ZD7lpggPKLpysQ7VeXUnqkUcMqYOFjBHWY3/dsGNIabYpc5iW3ckbnczY/Bb5/m4BHjpWE+B6Ea5aKla9xbdtT8IM+1v8q1Zvg5j+YABfjfopvZ3NQcMphysS+5vcdUH0PcNuz5Bnjfz0StlVnazI05JKSW9fdABnfxaFND8zMZYT7DM8xLquR14WseqIR4NgR7jOCqZoKzJrr39WZzdm8kwFoC7D7fa2P4AEaukms2rRbY45ZDHjQx16mtjS48gZgEffcMGdOdI9pCD93AV3ck3q0zPYA6TK6xncCM/4InD4A9O4Z0a0G1vNh9djG0q1pZ9M835Lc9tASplz3GY1NDydCveg02Ebl3BlgJ5fe4f0mOKOTTyVOUPIkoGzoRB88X3TeGGVrgEyf1hh6qluAmhs5nz8a7FGV3f9lIL2QYIdLRzWPyYh18Ki5Bpi73OyW6YvZatTsAUL+wZCcfTdwgaPsnDfYoyoqrQxxJ8xr5l5llAxCkrPvHmOywAhtUIYvRptZsQIot/71Op55TSlRJwzUcvZiFsfSDD4D/u4OHv7XcjCszKXMeAX3KFBG2bCWLdEXzyezp2/NzqIIEY1G03hKCM7KVec0ZpZi8w1AacClqatyVfAKcYCW6lzaz/DJbE3V7AAibr7GTmZ1iAHAMQ7ilNLiFpijSm6DKYzYBmX4ZLSlK5YAYQIsYyoWHUhrGfcSU7gynpsmmT6ZbamaHUCJmSkJVSir4jmVK8c0JAqrSCYGYTOnhytm2Ci1BChoQaMYbwVOmcYY7yKDWtx0gRaHbazaARQ4aygbZlU9Ev1aJCYTTkZAy/Qpiy92ACGOGfJDp7lMa8kKlMoaKuwrtCEqGNROZYhk+JTRmqzaAXQkE0ON+pnrlnBUL/MbbxLTaYHHzM87TEuZPpmtqZodwKrKXZRIr/kIl8t5Js6yLqVo3ArOHO6/E8ya+nQTw0j4pPN8y1YAxeLXL0GITw0Nvf/h2XQLWQwA40acOXXb72c+qxN98XzSeVnKVgA9WSnaDB3d7TwLB/kaTQfGi1SyIiPAvi2mhUxfzFajZg9wVjNvnoIXtRGSfLk9xPeTcpVAq4BTZBJXc/YW8i74MXPe9O7wfPB8sbNnDVC0bIxAyJcMtX1fA33b6cgKsosZcKgrvJKRsxPY/4FhUvng+WJys9YCxXnZsT6MMwMqnN2U0qiS7sV/50zWcDn9i9+FVFNeBTGFEbqV1yQmE9s3MLQZGdMuTKtawv3HBNWOrGdQqfMUl4QfY8BJG5Ax4IdXGOV66NhqdpplZ9mvl5IN309wHKSOF01wyiZtBwHn+exnJxdPbl37BO+Hrxv91INv0yO8nN5LB7sTbyoyI/swBLSKmMplzr3s8MZweRew4x8MYPq+Y18h1otVbW9oUlbFQEtU18iX7Rf4jPGczvPKlfP4hPgoUNnE5cqMR93I1cu29yekZD45iQ6XE1AdP55zgkEqzhXQxWh55FuqUc8AGjniRb5sb9A41sW8ASoL8rO1BChf8LVWRYBzGHxqeFaGeb1SlHzITf4FWC3FSwwkJwiqi++hcS73USQ2iLvbuF7zo4IAKpOy/aG1fCv9Jwedd6gspK46U5hyTeZXwsRgqJ8PUSf5qRnOcmnmf93irf0p0fpOWxatVuyCASor8ot1DYjGuSfl762s5uwkPkE4tF6s3MTNXBgVBWDSBb5X3gE3/jfOJuN8HiTQDif0vLjrnS/zkPYVKSrApAUu23lctg8yeqwm2Js5s4wofiQu8sb1A9s/5nJ8j8vxiF+vQnjjAlB3SMqNDrbtb+SfM6bz0T8RbVxeoIV7Enddd0iIjVk2oa5lovz/OwK/AEwoXdWOz5kyAAAAAElFTkSuQmCC',
+                xAxis: 1,
+                symbolPosition: 'end',
+                symbolOffset: [0, this.beilv * -200 + '%']
+              },
+              {
+                value: 152,
+                symbol:
+                  'image://data:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAJpElEQVRoBe0aa29cV3HOvbtr73rt9Tr22l47Tupnnbh5iMSlhIQv+dKmAUFbpxKhTZBaAT+hFUIItYKvfADUItKEIDWOAh9KVVEVRFOVCGio0yRu4mf8fq+z3qf3cS8zZ33X567v2veuF6FIHsm65zEzZ+acOfM4a4AdeLR3gFkRv93vrwY1dVxRVZsVuqLgSix4+Ng3/nr16tW0FX6mFWxtba2ASLBfVaHBygLFxGUgXRianfu+FZ6SWWQpHD72/1QuI6f6gll5NTzTCip2ZQCJLJmHtkixvipT71nlZdpEiXFbve87CsDzTLiDfmCN4qIHT59+anns/iyAKg6baDPw7umou/XeezdE5GlQJ3mfQVCV4RfDkwtD4vxWbUsKGjG7V1+v06RjehqSN+ma6IaNSHPGGNi/8ju47/frxh+fmdmWjKZNVLfqI9TZUfAROixDUXdO0HBbHqHBnRO0eliqipGSFbBvTAZOa3XBLfALkGQLjokggM2zBZLBtK0CgGiLDEWvCtIPHwBzt0BsMQ6TkXaYj+2BaKocYik3RNNuLr5LDoPTFgaXLQQ+5xg0lg2A09sCRFtsKKqCqiRD/6cjMFF2EhYenkRZjZOQFaUKVpJVXJfR0H74JzwNNcsAuyO3wYE8mFK8lNdYAgvbqKVqgQMnYPzUKxDzNVmg3ojqnB+HpvffhqovrvPJ7aZq21bwTkuHOvDyTyDYfmSjtNsY8Qx8Bu0Xfwpdw/e3JeO2iC/3Du6T56fuxqv1CbKmV82uUmjeUw6+6lJwltqgxJHxaasJBVYTaXj4MAFjU2GYmIpAWtmYnJcuTkPa17D/bE9bv8bT6rdgBX9/deR4Op3+swoqur91YMixvdkDh7qquFLhSBKCKwlIJBVIoGIEDlTUYZfAU+EAd5mdKzs0GoK+O4uQTOkVZcBWZFl+9nsvNH+yvor5VkEKXup98JiiJP6FolSLS9XVOOFr3T5wOW0wPRuFefSkmlIintgmZemEG+pcHPfm7UUgZUVAIRclydH9Us/eUXHcTNuygr298+6oGryhqmqXuEBHqweePFwDC0txGJ8MbzgJEdeobbcxaGp0c2X7B4Lw774FHRpj7I6LeZ7q6fGFdRNbdCwHelTul7nKHe7axZUbHQ/B8IOQZeVIRjJNoh0ZC8G+dg+c+GqtTnRak9bWDZroWDrBy73DTyQVpQ+r9ezGkBM5/mQt3BsMwnIwkXfJJN5BciyptAoOG95Bhww2PDUj8FY64HG0iL7bAbj1ZUBAYYpdkg6d7Wm5LQxu2rQU6JNq+ufILatcpccBx476YHQinFe5WDwNcwtR7mRyJalC+iqvE6QsxwzGMnrX8ckIHERHNbcUg9n52BqpKq3JcCqXV75+Dut8aAAXe0e68ZnlGRHjyMFqCKAws3OaAOIsQCyegsmZSFY5O55caYkMspQ5uQCe+MxcRE+01ptCJ7USTsLRQzo/Rk89z3BZDKk2DppWEJTU8yJ5nc/JPd/EtLGA+IbKvSjeHZBlCXb73fBYUzk0Nbh5bKysKOHsIrEUrISMTXsMLaOqsoTTiWvnyqKby+mYVlAF9i2RtrOtEnc/BnE0QSMIRRL8ztFctbcEY6KcRUOPCJQEaHeQlDSCSDTFLaSzTV+d5MpiRKuNmVLw0h8fdGJAb9eIyMT8GLcWA3FtaMN3dTUT1GmivNy+YZ4SAjsGewLKbPLBEq6xy7u+GYRHspBM+WjEcVMKphOpgyJRfa2T3yPa4XyQQI/JlcB7J1HDAMizElAMzAfkmYl8b2O5DiVXJt2k0DHlRSVJ9SvCJleUOyCEDoDuWT5oqC/LN8XHaXNSa2lZqWC+uURpDCvx1TRUevRWQDLl4hr1TZ0gKqJjRqkYLVooJFMKzC1mPC85IG95xuHk40d5LK0pQq5M4pzY1lOJM/p2ndglh7FaoIKxWBpmFiLZ06vFPFSS85sorUumTOElB/SpTs6k1jWnIFqJRkBfWpDKHytA5hwIxiGwvMpNmzxpPYYaqia2Ahk3IBrLuQ8qrG5FR/PmpGTqsvhbShTduq/aaYY/x6G7NjMfwcCfMeuSEgnqa1w8XTPDhEqrWG4oIZlMgCkFVVUaB1j3MuQg3GWmSHk2M43xMp3O0Hs9JVBdVYKecXOzFGUn8wxF9B47I5OIZdw2JaVNhpspwadMz0V5DKOFN3M2lFxPzUQBf9Pn+Wa9rwzKXKaWzEpb4bZjJsRgHCt/EUgmsZ+vbcqLVpa6+nDLszZPprYYWOUVeT7GND63EMsoh6fVWO+2rBzxqMIsiEIS/WUBZeEyZQfyN0wpePq0P4oG9ReRzcjYCuaXLrDl8YBBzC+106VTIxONRJPGf7n3a20h4k3V/hgW0CKQLCSTOJavbcFepHfxJ/pvaozuDwdhX4eXC0B3LBc0h0LjIXyXob98QDlpc5PuaYejNvrLeDi51S/WhDRFspgDUydIrFys+Ro+5E5obCmz+c8XS7AbnxmM7lWhcVLjT06MKpa7A8vZmJmZYxMZWTTMzb/mXRnyead38Ieqov5KZPn17lqgnb7z5XK27hPnC2lTWDiw3wtLeM8//HhKlxIyif3oXE/br83yNX2CxLCrufW36C/wyWId/vHZPK/nOvEdxSDbWEc02SIe+zsqeRn2t09n9Mrh2iSDSVYczZKCR46wpKzaziFl9kIp+GD70fVpCIaS8ESnFyrxrbNQINoD+7zcOX349ymeMQm8+NokgzC2ZdOSiWrcLlwZegVU5S2tT1+K20cP1QAVp1Ti0NNhFPNOM+ByyvzJ0ItvNJP4QvDxjTl8nFpPLDgPJr16/kzr22b4iTgFKUgMLlwZfAPt5zWRGbV3YZbSjYqSew9j9kG5J4UMKmqz9R/eMXrG92DZRXGOHAq9fn9+NwD0TLEBGHvz/Jm21zeMmxgoWEHiffHK4GuYpbxhtA4p2LK3AmNlWbbUofcZAi1No+cOSgZG8bTHJ0Mg1pwaTyyWX3/5TNubWt/qd1sK0mIX3h16EZj6GzxN/cOJIAmdVjmmXFQ5yPhGGIljwMc7G0ETpjTOEBgLgsp+cP7FVtMxz4jPthUkppevDTamkvAWvpU8bbSI1TH8weUDmx1ePftc26RV2lz8oiioMX3nysgJgNSP8VBOamNWvuioPsIK7mfnzjRft0K3GW5RFdQW+sO1seZEOtGD/5V4CuvIw2iEhg80uHgEf+X+XGXsfYfs6P3uc3tGNB7F+v5PFBSFQ8ciXfrTSCvDGhlDi5fPMWkZ/yl6/qVvNw+hw8mJByL1TntnB/4LvqGoVgN+hw8AAAAASUVORK5CYII=',
+                xAxis: 2,
+                symbolPosition: 'end',
+                symbolOffset: [0, this.beilv * -200 + '%']
+              }
+            ]
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.progress {
+  width: 12px;
+  border-radius: 5px;
+}
+.progress1 {
+  background: linear-gradient(180deg, #3ac6fc 0%, rgba(56, 195, 255, 0.05) 100%);
+}
+.progress2 {
+  background: linear-gradient(346deg, #281b0e 0%, #f9a237 100%);
+}
+.progress3 {
+  background: linear-gradient(180deg, #83f7ec 0%, rgba(76, 236, 213, 0.05) 100%);
+}
+</style>

src/views/orderManage/orderMonitoring/orderMonitoring.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="app-container">
+    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
+    <el-tabs v-model="activeName" @tab-click="toggleClick">
+      <el-tab-pane :label="this.$t('module.orderManage.orderMonitoring.datasheets')" name="dataList" />
+      <el-tab-pane :label="this.$t('module.orderManage.orderMonitoring.donutChart')" name="ringChart" />
+    </el-tabs>
+    <!-- 数据列表 -->
+    <div v-if="showList">
+      <base-table
+        :page="listQuery.current"
+        :limit="listQuery.size"
+        :height="tableH"
+        :table-config="tableProps"
+        :table-data="list"
+        :is-loading="listLoading"
+      >
+        <method-btn
+          v-if="tableBtn.length"
+          slot="handleBtn"
+          :width="trueWidth"
+          :method-list="tableBtn"
+          @clickBtn="handleClick"
+        />
+      </base-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.current"
+        :limit.sync="listQuery.size"
+        @pagination="getList()"
+      />
+    </div>
+    <!-- 环状图 -->
+    <ring-chart v-else ref="ringCharts" :order-list="list" />
+  </div>
+</template>
+<script>
+import HeadForm from '@/components/basicData/HeadForm'
+import i18n from '@/lang'
+import { timeFormatter, rateFormatter } from '@/filters'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { orderMonitor } from '@/api/orderManage/order/order'
+import ringChart from './components/ringChart.vue'
+import newBasicData from '@/filters/newBasicData'
+import Vue from 'vue'
+import { tableHeight } from '@/utils/index'
+// detail是跳到监控详情的，详情是假数据，目前暂时不放详情按钮
+const tableBtn = [
+  // {
+  //   type: 'detail',
+  //   btnName: 'btn.detail'
+  // }
+]
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.orderMonitoring.orderName'),
+    minWidth: 230,
+    isFixed: true
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.orderMonitoring.startProcessingTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.orderMonitoring.completeTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'pdl',
+    label: i18n.t('module.orderManage.orderMonitoring.processingLine')
+  },
+  {
+    prop: 'outRate',
+    label: i18n.t('module.orderManage.orderMonitoring.processingCompletionRate'),
+    minWidth: 160,
+    filter: rateFormatter
+  },
+  {
+    prop: 'inQuantity',
+    label: i18n.t('module.orderManage.orderMonitoring.originalFilmInput')
+  },
+  {
+    prop: 'inRate',
+    label: i18n.t('module.orderManage.orderMonitoring.originalFilmusage'),
+    filter: rateFormatter
+  },
+  {
+    prop: 'scrapRate',
+    label: i18n.t('module.orderManage.orderMonitoring.scrapRate'),
+    filter: rateFormatter
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.orderMonitoring.customer')
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.orderMonitoring.orderStatus'),
+    filter: newBasicData('1526063541841727490')
+  },
+  {
+    prop: 'unitCode',
+    label: i18n.t('module.orderManage.orderMonitoring.unit'),
+    filter: newBasicData('1')
+  },
+  {
+    prop: 'outQuantity',
+    label: i18n.t('module.orderManage.orderMonitoring.processingCapacity')
+  },
+  {
+    prop: 'specifications',
+    label: i18n.t('module.orderManage.orderMonitoring.productSpecifications')
+  },
+  {
+    prop: 'price',
+    label: i18n.t('module.orderManage.orderMonitoring.price')
+  }
+]
+export default {
+  name: 'OrderMonitoring',
+  components: { HeadForm, BaseTable, Pagination, MethodBtn, ringChart },
+  data() {
+    return {
+      showList: true,
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.orderMonitoring.orderName'),
+          placeholder: i18n.t('module.orderManage.orderMonitoring.orderName'),
+          param: 'name'
+        },
+        {
+          type: 'datePicker',
+          label: i18n.t('module.orderManage.orderMonitoring.period'),
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: this.$t('module.orderManage.orderMonitoring.startTime'),
+          endPlaceholder: this.$t('module.orderManage.orderMonitoring.endTime'),
+          param: 'searchTime'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {},
+      activeName: 'dataList',
+      listQuery: {
+        current: 1,
+        size: 20,
+        name: '',
+        startTime: '',
+        endTime: ''
+      },
+      tableProps,
+      tableBtn,
+      list: [],
+      listLoading: false,
+      trueWidth: 80,
+      tableH: tableHeight(333),
+      total: 0,
+      unitList: JSON.parse(localStorage.getItem('dictObj'))['1'],
+      unitObj: {},
+      statusList: JSON.parse(localStorage.getItem('dictObj'))['1'],
+      statusObj: {}
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(333)
+    })
+    this.unitList.map((item) => {
+      this.unitObj[item.dataCode] = item.dataName
+    })
+    Vue.set(this.tableProps[12], 'unitObj', this.unitObj)
+    this.statusList.map(item => {
+      this.statusObj[item.dataCode] = item.dataName
+    })
+    Vue.set(this.tableProps[11], 'statusObj', this.statusObj)
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.listQuery.name = this.headFormValue.name
+      this.listQuery.startTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[0] + 'T00:00:00' : ''
+      this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
+      orderMonitor(this.listQuery).then(res => {
+        if (res.data.records) {
+          this.list = res.data.records
+        } else {
+          this.list = []
+        }
+        this.total = res.data.total
+        if (!this.showList) {
+          this.$nextTick(() => {
+            this.$refs.ringCharts.initChart()
+          })
+        }
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.listQuery.current = 1
+        this.getList()
+      }
+    },
+    toggleClick() {
+      if (this.activeName === 'ringChart') {
+        this.showList = false
+        this.$nextTick(() => {
+          this.$refs.ringCharts.initChart()
+        })
+      } else if (this.activeName === 'dataList') {
+        this.showList = true
+      }
+      this.getList()
+    },
+    handleClick() {
+      this.$router.push({
+        name: 'orderMonitoringDetail'
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/orderMonitoring/orderMonitoringDetail.vue

@@ -0,0 +1,301 @@
+<template>
+  <div id="container" ref="container" class="visual-container">
+    <el-row
+      class="container-title"
+      :style="{
+        height: beilv * 88 + 'px',
+        lineHeight: beilv * 88 + 'px',
+        fontSize: beilv * 30 + 'px'
+      }"
+    >
+      <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
+      合肥新能源数智工厂订单监控查询
+      <el-button
+        type="text"
+        class="title-button"
+        :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
+        @click="changeFullScreen"
+      >
+        <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
+        <svg-icon v-else icon-class="fullScreenView" />
+      </el-button>
+    </el-row>
+    <el-row class="container-main">
+      <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
+        <el-col :span="6">
+          <el-row>
+            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24" style="position: relative;">
+              <base-container :beilv="beilv" :height="463" :title="'三大品类'" :title-icon="'productType'">
+                <pie-chart1 :id="'pie-chart1'" :beilv="beilv" :height="'256'" :pie-style="pieStyle1" />
+                <dataShowBox :beilv="beilv" :height="112" style="position: absolute;bottom: 0;" />
+              </base-container>
+            </el-col>
+            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
+              <base-container :beilv="beilv" :height="463" :title="'销售额前十产品'" :title-icon="'5_4'">
+                <progressBox :beilv="beilv" :product-data="progressData1" :style="{paddingTop: 20 * beilv + 'px'}" />
+              </base-container>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="12">
+          <el-row>
+            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
+              <dataShowMain :beilv="beilv" :height="216" />
+            </el-col>
+            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
+              <base-container :beilv="beilv" :height="711" :title="'各个季度完成情况'" :title-icon="'number'">
+                <pie-chart2 :id="'pie-chart2'" :beilv="beilv" :height="'310'" :pie-style="pieStyle2" />
+                <div>
+                  <div class="bar-title">
+                    <span>
+                      <svg-icon :icon-class="'5_2'" style="font-size: 1.5em; position: relative; top: .08em" />
+                      各月情况
+                    </span>
+                  </div>
+                  <lineChart :beilv="beilv" :height="'330'" />
+                </div>
+              </base-container>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6">
+          <el-row>
+            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
+              <base-container :beilv="beilv" :height="463" :title="'销售三甲员工'" :title-icon="'1_1'">
+                <saleTop :beilv="beilv" :height="'356'" />
+              </base-container>
+            </el-col>
+            <el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
+              <base-container :beilv="beilv" :height="463" :title="'大客户'" :title-icon="'1_4'">
+                <progressBox :beilv="beilv" :product-data="progressData2" :style="{paddingTop: 20 * beilv + 'px'}" />
+              </base-container>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-row>
+  </div>
+</template>
+<script>
+import baseContainer from './components/baseContainer'
+import pieChart1 from './components/pieChart'
+import pieChart2 from './components/pieChart'
+import screenfull from 'screenfull'
+import dataShowBox from './components/dataShowBox'
+import dataShowMain from './components/dataShowMain'
+import progressBox from './components/progressBox'
+import saleTop from './components/saleTop'
+import lineChart from './components/lineChart'
+const pieStyle1 = {
+  num_fs: 18,
+  line_s: 24,
+  pieData: [
+    { value: 330, name: '品类1' },
+    { value: 120, name: '品类2' },
+    { value: 250, name: '品类3' }
+  ],
+  formatter: '{firstLine|{b}} \n {secondLine|{d}%}'
+}
+const pieStyle2 = {
+  num_fs: 24,
+  line_s: 95,
+  pieData: [
+    { value: 329, name: '第一季度' },
+    { value: 119, name: '第二季度' },
+    { value: 251, name: '第三季度' },
+    { value: 301, name: '第四季度' }
+  ],
+  formatter: '{firstLine|{b} {d}%} \n {secondLine|{c}}'
+}
+export default {
+  name: 'OrderMonitoringDetail',
+  components: {
+    baseContainer,
+    pieChart1,
+    pieChart2,
+    dataShowBox,
+    dataShowMain,
+    progressBox,
+    saleTop,
+    lineChart
+  },
+  data() {
+    return {
+      beilv: 1,
+      isFullScreen: false,
+      pieStyle1,
+      pieStyle2,
+      progressData1: [],
+      progressData2: []
+    }
+  },
+  watch: {
+    isFullScreen: function(val) {
+      if (val) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    },
+    'sidebar.opened': function(val) {
+      console.log(val)
+      if (!this.isFullScreen) {
+        setTimeout(() => {
+          this.beilv = document.getElementById('container').offsetWidth / 1920
+        }, 300)
+      }
+    }
+  },
+  mounted() {
+    this.beilv = document.getElementById('container').offsetWidth / 1920
+    window.addEventListener('resize', () => {
+      if (this.isFullScreen) {
+        this.beilv = document.body.offsetWidth / 1920
+      } else {
+        this.beilv = document.getElementById('container').offsetWidth / 1920
+      }
+    })
+    this.getMsg()
+  },
+  methods: {
+    getMsg() {
+      this.progressData1 = [
+        { name: '产品1', number: 1000, percentage: '100%' },
+        { name: '产品2', number: 900, percentage: '90%' },
+        { name: '产品3', number: 850, percentage: '85%' },
+        { name: '产品4', number: 700, percentage: '70%' },
+        { name: '产品5', number: 620, percentage: '62%' },
+        { name: '产品6', number: 550, percentage: '55%' },
+        { name: '产品7', number: 530, percentage: '53%' },
+        { name: '产品8', number: 500, percentage: '50%' },
+        { name: '产品9', number: 430, percentage: '43%' },
+        { name: '产品10', number: 300, percentage: '30%' }
+      ]
+      this.progressData2 = [
+        { name: '客户1', number: 1000, percentage: '100%' },
+        { name: '客户2', number: 900, percentage: '90%' },
+        { name: '客户3', number: 850, percentage: '85%' },
+        { name: '客户4', number: 700, percentage: '70%' },
+        { name: '客户5', number: 620, percentage: '62%' },
+        { name: '客户6', number: 550, percentage: '55%' },
+        { name: '客户7', number: 530, percentage: '53%' },
+        { name: '客户8', number: 500, percentage: '50%' },
+        { name: '客户9', number: 430, percentage: '43%' },
+        { name: '客户10', number: 300, percentage: '30%' }
+      ]
+    },
+    change() {
+      this.isFullScreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    },
+    changeFullScreen() {
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle(this.$refs.container)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.visual-container {
+  width: 100%;
+  min-width: 960px;
+  background: url('../../../assets/img/OperationalOverview/back.png') no-repeat;
+  background-size: cover;
+  .container-title {
+    width: 100%;
+    background: url('../../../assets/img/OperationalOverview/title.png') no-repeat;
+    background-size: 100% 100%;
+    color: #00fff0;
+    text-align: center;
+    .title-button {
+      color: #00fff0;
+      font-size: 20px;
+      position: absolute;
+    }
+  }
+  .container-main {
+    padding: 16px;
+  }
+}
+.now-team-title {
+  margin: 0;
+  margin-top: -1em;
+  font-size: 1.2em;
+  line-height: 2em;
+  color: #fff;
+}
+.main-title {
+  text-align: center;
+}
+.now-secondary-title {
+  margin: 0;
+  font-size: 1em;
+  line-height: 2em;
+  color: #fff;
+}
+.now-team-content {
+  font-size: 3em;
+  line-height: 1em;
+  color: #52fff1;
+  text-align: center;
+}
+// ::v-deep .el-progress-bar__inner {
+//   background-color: unset;
+//   background-image: linear-gradient(to right, #4573fe, #47f8dc);
+// }
+</style>
+<style lang="scss">
+.visual-container {
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background: #1b2b3d;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: #1b2b3d;
+  }
+
+  ::-webkit-scrollbar-track {
+    width: 6px;
+    background: #1b2b3d;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba($color: #5bc4be, $alpha: 0.7);
+    background-clip: padding-box;
+    min-height: 28px;
+    -webkit-border-radius: 2em;
+    -moz-border-radius: 2em;
+    border-radius: 2em;
+    transition: background-color 0.3s;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba($color: #5bc4be, $alpha: 1);
+  }
+}
+</style>

src/views/orderManage/packingTags.vue

@@ -0,0 +1,183 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:39:57
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-06-22 16:25:52
+ * @Description:
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <el-button style="margin-right:50px" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+        <span><b>{{ $t('module.orderManage.order.WorkOrderCode')+'：'+stringfilter(dataForm.workOrderNo) }}</b></span>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.WorkOrderName')+'：'+stringfilter(dataForm.name) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.status')+'：' }}{{ dataForm.status|commonFilter(basicData('workOrderStatus')) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.workOrderDetail.workOrderSource')+'：' }}{{ dataForm.triggerOrigin|commonFilter(basicData('source')) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.createTime')+'：'+timefilter(dataForm.createTime) }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.order.PlannedProcessingVolume')+'：'+stringfilter(dataForm.planQuantity) }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.workOrderDetail.processingTechnology')+'：'+stringfilter(dataForm.processFlowName) }}</div></el-col>
+          <!-- <el-col :span="6"><div>{{ $t('module.orderManage.order.PlanningEndTime')+'：'+timefilter(dataForm.planFinishProduceTime) }}</div></el-col> -->
+        </el-row>
+      </div>
+    </el-card>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>
+import i18n from '@/lang'
+import { workOrderDetail, packagingList } from '@/api/orderManage/workOrder/workOrder'
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+import BaseTable from '@/components/BaseTable'
+import detailBtn from './components/detailBtn'
+import Pagination from '@/components/Pagination'
+
+const tableProps = [
+  {
+    prop: 'boxNo',
+    label: 'boxID',
+    align: 'center'
+  },
+  {
+    prop: 'power',
+    label: 'power',
+    align: 'center'
+  },
+  {
+    prop: 'grade',
+    label: i18n.t('module.orderManage.packingTags.plateGrade'),
+    align: 'center'
+  },
+  {
+    prop: 'printTime',
+    label: i18n.t('module.orderManage.packingTags.PrintingTime'),
+    align: 'center',
+    filter: timeFormatter
+  },
+  {
+    prop: 'substrateQuantity',
+    label: i18n.t('module.orderManage.packingTags.moduleQuantity'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.order.Remarks'),
+    align: 'center'
+  },
+  {
+    prop: 'opration',
+    label: i18n.t('module.orderManage.packingTags.opration'),
+    subcomponent: detailBtn
+  }
+]
+export default {
+  name: '',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  components: { BaseTable, Pagination },
+  data() {
+    return {
+      workOrderId: '',
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      },
+      dataForm: {},
+      basicData
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.init()
+  },
+  methods: {
+    init() {
+      this.dataForm = {}
+      workOrderDetail(this.workOrderId).then(res => {
+        this.dataForm = res.data
+      })
+      this.listQuery.workOrderId = this.workOrderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      packagingList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>

src/views/orderManage/powerClassification.vue

@@ -0,0 +1,213 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: juzi
+ * @LastEditTime: 2022-04-22
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <top-title />
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <base-table
+      :top-btn-config="topBtnConfig"
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @clickTopBtn="clickTopBtn"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <powerClassification-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import TopTitle from '@/components/TopTitle'
+import { powerClassificationList, powerClassificationDelete } from '@/api/orderManage/powerClassification'
+import powerClassificationAdd from './components/powerClassification-add.vue'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const topBtnConfig = [
+  {
+    type: 'add',
+    btnName: 'btn.add'
+  }
+]
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  }
+]
+const tableProps = [
+  {
+    prop: 'parentName',
+    label: i18n.t('module.orderManage.powerClassification.parentClass'),
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.powerClassification.typeName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.powerClassification.typeCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.orderManage.powerClassification.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'PowerClassification',
+  components: { TopTitle, Pagination, BaseTable, MethodBtn, HeadForm, powerClassificationAdd },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      topBtnConfig,
+      addOrUpdateVisible: false,
+      tableBtn,
+      trueWidth: 200,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10,
+        name: '',
+        code: ''
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.basicData.visual.keyword'),
+          placeholder: this.$t('module.orderManage.powerClassification.typeName'),
+          param: 'keyName'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      headFormValue: {}
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          powerClassificationDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else {
+        this.addNew(raw.data.id)
+      }
+    },
+    getList() {
+      this.listLoading = true
+      this.listQuery.name = this.headFormValue.keyName
+      this.listQuery.code = this.headFormValue.keyName
+      powerClassificationList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.getList()
+      }
+    },
+    clickTopBtn(val) {
+      if (val === 'add') {
+        this.addNew()// 新增
+      }
+    }
+  }
+}
+</script>

src/views/orderManage/substrateBatch.vue

@@ -0,0 +1,196 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-21 16:55:18
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :placeholder-name="placeholderName"
+      :key-name="keyName"
+      @getDataList="getList"
+      @add="addNew"
+    />
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    >
+      <method-btn
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </div>
+</template>
+
+<script>import i18n from '@/lang'
+import { substrateBatchList, substrateBatchDelete } from '@/api/orderManage/substrateBatch'
+import HeadForm from '@/components/basicData/HeadForm'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+
+const tableBtn = [
+  {
+    type: 'edit',
+    btnName: 'btn.edit'
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete'
+  },
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.basicData.factory.createTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.substrateBatch.batchName'),
+    align: 'center'
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.substrateBatch.batchCode'),
+    align: 'center'
+  },
+  {
+    prop: 'remark',
+    label: i18n.t('module.basicData.visual.Remarks'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: 'SubstrateBatch',
+  components: { Pagination, BaseTable, MethodBtn, HeadForm },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      keyName: i18n.t('module.basicData.visual.keyword'),
+      placeholderName: this.$t('module.orderManage.substrateBatch.batchCode'),
+      tableBtn,
+      trueWidth: 240,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      console.log(raw)
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          substrateBatchDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else {
+        this.addNew(raw.data.id, true)
+      }
+    },
+    getList(key) {
+      this.listLoading = true
+      this.listQuery.name = key
+      this.listQuery.code = key
+      substrateBatchList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id, isdetail) {
+      this.$router.push({
+        name: 'substrateBatchAttr',
+        query: {
+          id: id,
+          isdetail: isdetail
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/workOrder/components/editBatch.vue

@@ -0,0 +1,263 @@
+<template>
+  <el-drawer :visible.sync="visible" size="60%" class="drawer" @closed="cancelDialog">
+    <small-title slot="title" :no-padding="true">
+      {{ 'btn.detail' | i18nFilter }}
+    </small-title>
+    <div>
+      <ul class="detailBox">
+        <li style="width: 50%;">
+          <p class="title">{{ this.$t('module.orderManage.order.WorkOrderName') | i18nFilter }}</p>
+          <p class="text">{{ orderName }}</p>
+        </li>
+        <li style="width: 50%;">
+          <p class="title">{{ this.$t('module.orderManage.order.WorkOrderCode') | i18nFilter }}</p>
+          <p class="text">{{ orderCode }}</p>
+        </li>
+      </ul>
+    </div>
+    <div class="tableBox">
+      <small-title>
+        {{ this.$t('module.orderManage.workOrderDetail.batchInfo') | i18nFilter }}
+      </small-title>
+      <!-- table -->
+      <template>
+        <el-row>
+          <base-table
+            :top-btn-config="topBtnConfig"
+            :page="listQuery.current"
+            :limit="listQuery.size"
+            :height="tableH"
+            :table-data="diaList"
+            :table-config="tableProps"
+            @clickTopBtn="clickTopBtn"
+          >
+            <template>
+              <method-btn slot="handleBtn" :width="100" :method-list="tableBtn" @clickBtn="tablebtnClick" />
+            </template>
+          </base-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="listQuery.current"
+            :limit.sync="listQuery.size"
+            @pagination="getOrderDetail"
+          />
+        </el-row>
+      </template>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="cancelDialog">
+        {{ 'btn.cancel' | i18nFilter }}
+      </el-button>
+    </span>
+    <edit-batch-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getOrderDetail" />
+  </el-drawer>
+</template>
+<script>
+import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+import {
+  getMaterialPage,
+  workOrderDetail,
+  delBatch
+} from '@/api/orderManage/workOrder/workOrder'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination'
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import i18n from '@/lang'
+import newBasicData from '@/filters/newBasicData'
+import { timeFormatter } from '@/filters'
+import EditBatchAdd from './editBatchAdd.vue'
+import { tableHeight } from '@/utils/index'
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.workOrderDetail.createTime'),
+    filter: timeFormatter
+  },
+  {
+    prop: 'dateName',
+    label: i18n.t('module.orderManage.workOrderDetail.originalBatch')
+  },
+  {
+    prop: 'specification',
+    label: i18n.t('module.orderManage.workOrderDetail.specification'),
+    filter: newBasicData('1528564570336985090')
+  },
+  {
+    prop: 'operator',
+    label: i18n.t('module.orderManage.workOrderDetail.operator')
+  },
+  {
+    prop: 'quantity',
+    label: i18n.t('module.orderManage.workOrderDetail.quantity')
+  },
+  {
+    prop: 'unitCode',
+    label: i18n.t('module.orderManage.workOrderDetail.unit'),
+    filter: newBasicData('1')
+  }
+]
+export default {
+  components: { Pagination, BaseTable, MethodBtn, SmallTitle, EditBatchAdd },
+  props: {},
+  data() {
+    return {
+      orderName: '',
+      orderCode: '',
+      isAlready: false, // true 订单已完成
+      visible: false,
+      listQuery: {
+        current: 1,
+        size: 20,
+        id: ''
+      },
+      tableH: tableHeight(380),
+      total: 0,
+      topBtnConfig: [],
+      tableProps,
+      tableBtn: [],
+      diaList: [],
+      addOrUpdateVisible: false
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(380)
+    })
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      this.listQuery.id = id
+      // 根据orderId查订单详情
+      workOrderDetail(this.listQuery.id).then((res) => {
+        if (res.data.status === 9) {
+          this.isAlready = true
+          this.tableBtn = []
+          this.topBtnConfig = []
+        } else {
+          this.topBtnConfig = [
+            {
+              type: 'add',
+              btnName: 'btn.add'
+            }
+          ]
+          this.tableBtn = [
+            {
+              type: 'edit',
+              btnName: 'btn.edit'
+            },
+            {
+              type: 'delete',
+              btnName: 'btn.delete'
+            }
+          ]
+        }
+        this.orderName = res.data.name
+        this.orderCode = res.data.code
+      })
+      this.getOrderDetail()
+    },
+    getOrderDetail() {
+      // 查询该工单的批次明细
+      getMaterialPage({
+        current: this.listQuery.current,
+        size: this.listQuery.size,
+        workOrderId: this.listQuery.id
+      }).then((res) => {
+        this.diaList = res.data.records ? res.data.records : []
+        this.total = res.data.total ? res.data.total : 0
+      })
+    },
+    cancelDialog() {
+      this.visible = false
+      this.isAlready = false
+    },
+    tablebtnClick(raw) {
+      if (raw.type === 'edit') {
+        const param = {}
+        param.workOrderId = ''
+        param.id = raw.data.id
+        this.addNew(param)
+      } else {
+        // 删除明细
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}?`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        })
+          .then(() => {
+            // 删除费用明细
+            delBatch({ id: raw.data.id }).then((res) => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.listQuery.current = 1
+                  this.getOrderDetail()
+                }
+              })
+            })
+          })
+          .catch(() => {})
+      }
+    },
+    clickTopBtn(val) {
+      if (!this.isAlready) {
+        if (val === 'add') {
+          const param = {}
+          param.workOrderId = this.listQuery.id
+          param.id = ''
+          this.addNew(param)
+        }
+      }
+    },
+    addNew(param) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(param)
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 30px;
+}
+.detailBox {
+  list-style: none;
+  display: flex;
+  text-align: left;
+}
+.detailBox p {
+  margin: 0;
+}
+.detailBox .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0,0,0,0.65);
+  padding-bottom: 10px;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+}
+.tableBox {
+  padding: 0 32px;
+}
+</style>

src/views/orderManage/workOrder/components/editBatchAdd.vue

@@ -0,0 +1,238 @@
+<template>
+  <el-dialog
+    :title="this.$t('module.orderManage.workOrderDetail.batchInfo')"
+    :visible.sync="visible"
+    width="40%"
+    :append-to-body="true"
+    @closed="cancel"
+  >
+    <div class="tableBox">
+      <el-form
+        ref="batchData"
+        style="padding: 24px 0;"
+        :model="batchData"
+        label-width="110px"
+        :rules="batchDataRules"
+      >
+        <el-form-item :label="this.$t('module.orderManage.workOrderDetail.originalBatch')" prop="dateName">
+          <el-input
+            v-model="batchData.dateName"
+            clearable
+            :placeholder="['placeholder.input', this.$t('module.orderManage.workOrderDetail.originalBatch')] | i18nFilterForm"
+          />
+        </el-form-item>
+        <el-form-item :label="this.$t('module.orderManage.workOrderDetail.specification')" prop="specification">
+          <el-select
+            v-model="batchData.specification"
+            filterable
+            clearable
+            :placeholder="['placeholder.select', this.$t('module.orderManage.workOrderDetail.specification')] | i18nFilterForm"
+          >
+            <el-option
+              v-for="item in specificationOptions"
+              :key="item.dataCode"
+              :label="item.dataName"
+              :value="item.dataCode"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="this.$t('module.orderManage.workOrderDetail.operator')" prop="operator">
+          <!-- 操作人 -->
+          <el-input
+            v-model="batchData.operator"
+            clearable
+            :placeholder="['placeholder.input', this.$t('module.orderManage.workOrderDetail.operator')] | i18nFilterForm"
+          />
+        </el-form-item>
+        <el-form-item :label="this.$t('module.orderManage.workOrderDetail.quantity')" prop="quantity">
+          <!-- inputNumber -->
+          <el-input-number v-model="batchData.quantity" :min="0" :style="{ width: '100%' }" />
+        </el-form-item>
+        <el-form-item :label="this.$t('module.orderManage.workOrderDetail.unit')" prop="unitCode">
+          <!-- select -->
+          <el-select
+            v-model="batchData.unitCode"
+            filterable
+            clearable
+            :placeholder="['placeholder.select', this.$t('module.orderManage.workOrderDetail.unit')] | i18nFilterForm"
+          >
+            <el-option
+              v-for="item in unitOptions"
+              :key="item.dataCode"
+              :label="item.dataName"
+              :value="item.dataCode"
+            />
+          </el-select>
+        </el-form-item>
+        <div style="text-align: center;">
+          <el-button @click="cancel">
+            {{ 'btn.cancel' | i18nFilter }}
+          </el-button>
+          <el-button type="primary" @click="createOrEditController">
+            {{ 'btn.confirm' | i18nFilter }}
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {
+  getBatchById,
+  addBatch,
+  editBatch
+} from '@/api/orderManage/workOrder/workOrder'
+export default {
+  props: {},
+  data() {
+    return {
+      visible: false,
+      batchData: {
+        dateName: '',
+        specification: '',
+        operator: '',
+        quantity: '',
+        unitCode: '',
+        workOrderId: ''
+      },
+      unitOptions: JSON.parse(localStorage.getItem('dictObj'))['1'],
+      unitObj: {},
+      specificationOptions: JSON.parse(localStorage.getItem('dictObj'))['1528564570336985090'],
+      detailEdit: false, // 编辑明细
+      batchDataRules: {
+        dateName: [
+          {
+            required: true,
+            message: this.$t('module.orderManage.workOrderDetail.originalBatch'),
+            trigger: 'blue'
+          }
+        ],
+        quantity: [
+          {
+            required: true,
+            message: this.$t('module.orderManage.workOrderDetail.quantity'),
+            trigger: 'blue'
+          }
+        ],
+        unitCode: [
+          {
+            required: true,
+            message: this.$t('module.orderManage.workOrderDetail.unit'),
+            trigger: 'change'
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.unitOptions.map((item) => {
+      this.unitObj[item.dataCode] = item.dataName
+    })
+  },
+  methods: {
+    init(param) {
+      this.visible = true
+      this.batchData.workOrderId = param.workOrderId
+      if (param.id) {
+        this.batchData.id = param.id
+        this.detailEdit = true
+        getBatchById({ id: this.batchData.id }).then((res) => {
+          this.batchData = res.data
+        })
+      } else {
+        this.detailEdit = false
+        this.batchData.id = ''
+      }
+    },
+    cancel() {
+      this.visible = false
+      this.$refs['batchData'].resetFields()
+    },
+    // 判断明细当前是编辑，还是新增
+    createOrEditController() {
+      // 确定
+      if (this.detailEdit) {
+        // 编辑
+        this.submitEditStockForm()
+      } else {
+        // 新增
+        this.submitCreateStockForm()
+      }
+    },
+    submitEditStockForm() {
+      // 编辑 明细表单提交
+      this.$refs['batchData'].validate((valid) => {
+        if (valid) {
+          editBatch(this.batchData).then((res) => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.cancel()
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    },
+    submitCreateStockForm() {
+      // 新增 明细表单提交
+      this.$refs['batchData'].validate((valid) => {
+        if (valid) {
+          addBatch(this.batchData).then((res) => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.cancel()
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 30px;
+}
+.detailBox {
+  list-style: none;
+  display: flex;
+  text-align: left;
+}
+.detailBox p {
+  margin: 0;
+}
+.detailBox .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0,0,0,0.65);
+  padding-bottom: 10px;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+}
+.tableBox {
+  padding: 0 32px;
+}
+</style>

src/views/orderManage/workOrder/components/monitor-chart.vue

@@ -0,0 +1,68 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-03-03 16:39:34
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-04 10:10:45
+ * @Description:
+-->
+<template>
+  <div id="monitorChart" :style="{width: '700px', height: '500px'}" style="margin-left:10%" />
+</template>
+
+<script>
+import echarts from 'echarts'
+
+export default {
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    init() {
+      this.chart = echarts.init(document.getElementById('monitorChart'))
+
+      this.chart.setOption({
+        color: '#91cc75',
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          name: '电量消耗',
+          data: [323.234, 323.841, 755.45, 251.453, 454.786, 484.786, 154.786],
+          barWidth: '60%',
+          type: 'bar'
+        }]
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/workOrder/components/monitor-table.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 17:48:35
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'consume',
+    label: i18n.t('module.orderManage.order.PowerConsumption'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '设备1',
+          'consume': '323,234'
+        },
+        {
+          'name': '设备2',
+          'consume': '323.841'
+        },
+        {
+          'name': '设备3',
+          'consume': '755.45'
+        },
+        {
+          'name': '设备4',
+          'consume': '251.453'
+        },
+        {
+          'name': '设备5',
+          'consume': '454.786'
+        },
+        {
+          'name': '设备6',
+          'consume': '484.786'
+        },
+        {
+          'name': '设备7',
+          'consume': '154.786'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/workOrder/components/startStop.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-drawer
+    size="60%"
+    :visible.sync="visible"
+    :wrapper-closable="false"
+    class="drawer"
+    @close="cancelBtn"
+  >
+    <small-title slot="title" :no-padding="true">
+      {{ startOrStop === 'start' ? 'btn.start' : 'btn.stop' | i18nFilter }}
+    </small-title>
+    <div>
+      <ul class="detailBox">
+        <li style="width: 50%;">
+          <p class="title">{{ this.$t('module.orderManage.order.WorkOrderName') | i18nFilter }}</p>
+          <p class="text">{{ name }}</p>
+        </li>
+        <li style="width: 50%;">
+          <p class="title">{{ this.$t('module.orderManage.order.WorkOrderCode') | i18nFilter }}</p>
+          <p class="text">{{ code }}</p>
+        </li>
+      </ul>
+    </div>
+    <div class="tableBox">
+      <base-table :page="1" :limit="500" :sbox="true" :height="tableH" :table-config="tableProps" :table-data="list" :is-loading="listLoading" @selectChangeFun="selectC" />
+    </div>
+    <div style="position: absolute; bottom: 24px; right: 24px;">
+      <el-button @click="cancelBtn">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="sureBtn">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
+import BaseTable from '@/components/BaseTable'
+import { listPld, startOrder, stopOrder, workOrderDetail } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.ProductLines')
+  },
+  {
+    prop: 'workOrderName',
+    label: i18n.t('module.orderManage.order.WorkOrderName')
+  }
+]
+export default {
+  components: { BaseTable, SmallTitle },
+  data() {
+    return {
+      visible: false,
+      tableH: 300,
+      list: [],
+      listLoading: false,
+      tableProps,
+      startOrStop: 'start',
+      selectBox: [],
+      productlines: [],
+      orderId: '',
+      name: '',
+      code: ''
+    }
+  },
+  methods: {
+    init(id, val) {
+      // 查询产线
+      this.visible = true
+      this.listLoading = true
+      this.startOrStop = val
+      this.orderId = id
+      workOrderDetail(this.orderId).then(res => {
+        this.name = res.data.name
+        this.code = res.data.code
+      })
+      if (this.startOrStop === 'start') { // 开始
+        listPld({
+          id: ''
+        }).then(res => {
+          this.list = res.data
+          this.listLoading = false
+        })
+      } else { // 结束
+        listPld({
+          id: this.orderId
+        }).then(res => {
+          this.list = res.data
+          this.listLoading = false
+        })
+      }
+    },
+    selectC(val) {
+      this.selectBox = val
+    },
+    cancelBtn() { // 取消
+      this.visible = false
+      this.list = []
+      this.selectBox = []
+      this.productlines = []
+      this.listLoading = false
+      this.orderId = ''
+    },
+    sureBtn() { // 确定
+      if (this.selectBox.length === 0) {
+        this.$message({
+          message: this.$t('module.orderManage.order.selectTip'),
+          type: 'error',
+          duration: 1500
+        })
+        return false
+      }
+      this.selectBox.map(item => {
+        this.productlines.push(item.id)
+      })
+      if (this.startOrStop === 'start') {
+        startOrder({
+          id: this.orderId,
+          productlines: this.productlines
+        }).then(res => {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500
+          })
+          this.cancelBtn()
+          this.$emit('refreshDataList')
+        })
+      } else if (this.startOrStop === 'stop') {
+        stopOrder({
+          id: this.orderId,
+          productlines: this.productlines
+        }).then(res => {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500
+          })
+          this.cancelBtn()
+          this.$emit('refreshDataList')
+        })
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+.drawer >>> .el-drawer {
+  border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-form-item__label {
+  padding: 0;
+}
+
+.drawer >>> .el-drawer__header {
+  margin: 0;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid #dcdfe6;
+  margin-bottom: 30px;
+}
+.detailBox {
+  list-style: none;
+  display: flex;
+  text-align: left;
+}
+.detailBox p {
+  margin: 0;
+}
+.detailBox .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0,0,0,0.65);
+  padding-bottom: 10px;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+}
+.tableBox {
+  padding: 0 32px;
+}
+</style>

src/views/orderManage/workOrder/components/unitColumn.vue

@@ -0,0 +1,18 @@
+<template>
+  <span>
+    {{ injectData.unitCode ? injectData.unitObj[String(injectData.unitCode)] : '' }}
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  }
+}
+</script>

src/views/orderManage/workOrder/components/verify-craft.vue

@@ -0,0 +1,100 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:49:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:22:29
+ * @Description: 工单验证
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div class="text item">
+        <el-row>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData22') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData23') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData24') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData25') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData26') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData5') }}</div></el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData27') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData23') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData524') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData25') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData28') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData29') }}</div></el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: { },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+    init() {
+      this.getList()
+    },
+    getList() {
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .box-card {
+    width: 80%;
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+  .title{
+    font-size: 40px;
+    color: #1588F5;
+  }
+</style>

src/views/orderManage/workOrder/components/verify-equipment.vue

@@ -0,0 +1,138 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:17:31
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.EquipmentName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.VerifyTable.EquipmentCode'),
+    align: 'center'
+  },
+  {
+    prop: 'abbr',
+    label: i18n.t('module.orderManage.VerifyTable.equipmentAbbreviation')
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.order.status')
+  },
+  {
+    prop: 'formula',
+    label: i18n.t('module.orderManage.VerifyTable.EquipmentFormula')
+  },
+  {
+    prop: 'formula1',
+    label: i18n.t('module.orderManage.VerifyTable.ProcessFormulaRequir')
+  },
+  {
+    prop: 'same',
+    label: i18n.t('module.orderManage.VerifyTable.IsSame')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '承压机',
+          'code': 'SB001',
+          'abbr': 'CYS',
+          'status': '运行正常'
+        },
+        {
+          'name': '传输线',
+          'code': 'SB002',
+          'abbr': 'TTS',
+          'status': '报警'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/workOrder/components/verify-group.vue

@@ -0,0 +1,139 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:34:39
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.VerifyTable.teamName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'leader',
+    label: i18n.t('module.orderManage.VerifyTable.teamLeader'),
+    align: 'center'
+  },
+  {
+    prop: 'num',
+    label: i18n.t('module.orderManage.VerifyTable.number')
+  },
+  {
+    prop: 'major',
+    label: i18n.t('module.orderManage.VerifyTable.professional')
+  },
+  {
+    prop: 'wtime',
+    label: i18n.t('module.orderManage.VerifyTable.workingHours')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '班组1',
+          'leader': '张三',
+          'num': '21',
+          'major': '电工，维修工，计划员，仓管员',
+          'wtime': '2020-11-26 19:12:37'
+        },
+        {
+          'name': '班组2',
+          'leader': '卫升',
+          'num': '12',
+          'major': '电工，维修工，仓管员',
+          'wtime': '2020-11-11 06:12:57'
+        },
+        {
+          'name': '班组3',
+          'leader': '李渊',
+          'num': '32',
+          'major': '会计，审核员',
+          'wtime': '2020-11-05 12:10:17'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/workOrder/components/verify-materiel.vue

@@ -0,0 +1,115 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 19:25:55
+ * @Description:
+-->
+<template>
+  <base-table
+    :page="listQuery.current"
+    :limit="listQuery.size"
+    :table-config="tableProps"
+    :table-data="list"
+    :is-loading="listLoading"
+  />
+</template>
+
+<script>
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+// import { timeFormatter } from '@/filters'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.VerifyTable.materielName')
+    // filter: timeFormatter
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.VerifyTable.materielCode'),
+    align: 'center'
+  },
+  {
+    prop: 'spec',
+    label: i18n.t('module.orderManage.VerifyTable.Spec')
+  }
+]
+
+export default {
+  name: '',
+  components: { BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      tableProps,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  methods: {
+    init() {
+      this.listQuery = {
+        current: 1,
+        size: 10
+      }
+      this.getList()
+    },
+    getList() {
+      this.list = [
+        {
+          'name': '001油漆',
+          'code': 'YQ-110',
+          'spec': '30D * 11B'
+        }
+      ]
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/workOrder/components/verify-plate.vue

@@ -0,0 +1,99 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:49:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-03 16:28:15
+ * @Description: 工单验证
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div class="text item">
+        <el-row>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData31') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData32') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData33') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData34') }}</div></el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="12">
+            <el-row :gutter="20">
+              <el-col :span="23"><div class="title">{{ $t('module.orderManage.FalseData.FalseData38') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData35') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData33') }}</div></el-col>
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData36') }}</div></el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="23"><div>{{ $t('module.orderManage.FalseData.FalseData37') }}</div></el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: '',
+  components: { },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+    init() {
+      this.getList()
+    },
+    getList() {
+      // this.listLoading = true
+      // staffList(this.listQuery).then(response => {
+      //   if (response.data.records) {
+      //     this.list = response.data.records
+      //   } else {
+      //     this.list.splice(0, this.list.length)
+      //   }
+      //   this.listLoading = false
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .box-card {
+    width: 80%;
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+  .title{
+    font-size: 40px;
+    color: #1588F5;
+  }
+</style>

src/views/orderManage/workOrder/components/workOrder-add.vue

@@ -0,0 +1,258 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-26 15:32:13
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 11:27:49
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="!dataForm.id ? 'btn.add' : 'btn.edit' | i18nFilter"
+    :visible.sync="visible"
+    @open="onOpen"
+    @close="onClose"
+  >
+    <el-row :gutter="10">
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        size="medium"
+        label-width="105px"
+        label-position="right"
+        :rules="dataFormRules"
+      >
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.OrderName')" prop="orderName">
+            <el-input
+              v-model="dataForm.orderName"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.OrderName')])"
+              disabled
+              clearable
+              :style="{ width: '100%' }"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.WorkOrderName')" prop="name">
+            <el-input
+              v-model="dataForm.name"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.WorkOrderName')])"
+              disabled
+              clearable
+              :style="{ width: '100%' }"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.ProductName')" prop="productId">
+            <el-select
+              v-model="dataForm.productId"
+              :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.ProductName')])"
+              disabled
+              clearable
+              :style="{ width: '100%' }"
+              @change="changeProduct"
+            >
+              <el-option v-for="(item, index) in productOptions" :key="index" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.specifications')" prop="specifications">
+            <el-select
+              v-model="dataForm.productId"
+              :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.specifications')])"
+              disabled
+              clearable
+              :style="{ width: '100%' }"
+            >
+              <el-option
+                v-for="(item, index) in productOptions"
+                :key="index"
+                :label="item.specifications"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.PlannedProcessingVolume')" prop="planQuantity">
+            <el-input-number
+              v-model="dataForm.planQuantity"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.PlannedProcessingVolume')])"
+              :style="{ width: '100%' }"
+              :step="1"
+              :min="0"
+              :max="9999999999999"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.PlanningEndTime')" prop="planQuantity">
+            <el-date-picker
+              v-model="dataForm.planFinishProduceTime"
+              type="datetime"
+              :placeholder="$t('module.orderManage.order.PlanningEndTime')"
+              :style="{ width: '100%' }"
+            />
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.ProductLines')" prop="productlines">
+            <el-select
+              v-model="dataForm.productlines"
+              :placeholder="$i18nForm(['placeholder.select', $t('module.orderManage.order.ProductLines')])"
+              multiple
+              clearable
+              :style="{ width: '100%' }"
+            >
+              <el-option v-for="(item, index) in productLineOptions" :key="index" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('module.orderManage.order.workers')" prop="workers">
+            <el-input
+              v-model="dataForm.workers"
+              :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.workers')])"
+              clearable
+              :style="{ width: '100%' }"
+            />
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderDetail, workOrderUpdate, workOrderAdd, workOrderCode, getProductLineList } from '@/api/orderManage/workOrder/workOrder'
+import { list as ProductPoolList } from '@/api/basicData/ProductPool'
+import i18n from '@/lang'
+export default {
+  components: {},
+  inheritAttrs: false,
+  props: {
+    unitList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        id: 0,
+        orderName: '',
+        name: '',
+        planQuantity: '',
+        planFinishProduceTime: '',
+        productId: '',
+        workers: '',
+        productlines: null
+      },
+      dataFormRules: {
+        planQuantity: [{ required: true, message: i18n.t('module.orderManage.order.PlannedProcessingVolume'), trigger: 'blur' }],
+        planFinishProduceTime: [{ required: true, message: i18n.t('module.orderManage.order.PlanningEndTime'), trigger: 'blur' }],
+        productlines: [{ required: true, message: i18n.t('module.orderManage.order.ProductLines'), trigger: 'blur' }],
+        workers: [{ required: true, message: i18n.t('module.orderManage.order.workers'), trigger: 'blur' }]
+      },
+      productOptions: [],
+      productUnitObj: {},
+      productLineOptions: []
+    }
+  },
+  computed: {},
+  watch: {},
+  created() { },
+  mounted() { },
+  methods: {
+    init(id) {
+      const listQuery = {
+        current: 1,
+        size: 500
+      }
+      this.dataForm.id = id || ''
+      this.productOptions.splice(0, this.productOptions.length)
+      ProductPoolList(listQuery).then(response => {
+        if (response.data.records) {
+          this.productOptions = response.data.records
+          response.data.records.map(item => {
+            this.productUnitObj[item.id] = String(item.dictDataId)
+          })
+        }
+      })
+      this.productLineOptions.splice(0, this.productLineOptions.length)
+      getProductLineList(listQuery).then(response => {
+        if (response.data.records) {
+          this.productLineOptions = response.data.records
+        }
+      })
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        if (this.dataForm.id) {
+          workOrderDetail(this.dataForm.id).then(res => {
+            this.dataForm = res.data
+            if (this.dataForm.productlines && this.dataForm.productlines.length) {
+              this.dataForm.productlines = this.dataForm.productlines.map(i => {
+                return String(i.id)
+              })
+            }
+          })
+        } else {
+          workOrderCode().then(res => {
+            this.dataForm.workOrderNo = res.data
+          })
+        }
+      })
+    },
+    onOpen() { },
+    onClose() {
+      this.$refs['dataForm'].resetFields()
+    },
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.dataForm.planFinishProduceTime = this.dataForm.planFinishProduceTime ? this.dataForm.planFinishProduceTime : ''
+          const data = this.dataForm
+          if (this.dataForm.id) {
+            workOrderUpdate(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          } else {
+            workOrderAdd(data).then(res => {
+              this.$message({
+                message: this.$t('module.basicData.visual.success'),
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            })
+          }
+        }
+      })
+    },
+    changeProduct(v) {
+      this.dataForm.dictDataId = this.productUnitObj[String(v)]
+    }
+  }
+}
+
+</script>

src/views/orderManage/workOrder/components/workOrder-close.vue

@@ -0,0 +1,97 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 16:37:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-04-15 14:00:51
+ * @enName:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.workOrderManage.closeworkorder' | i18nFilter"
+    :visible.sync="visible"
+  >
+    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="110px" @keyup.enter.native="dataFormSubmit()">
+      <el-form-item :label="$t('module.orderManage.order.CompletionTime')" prop="finishProduceTime">
+        <el-date-picker
+          v-model="dataForm.finishProduceTime"
+          type="date"
+          format="yyyy-MM-dd"
+          :style="{width: '50%'}"
+          :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.CompletionTime')])"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.ActualFinishedProduct')" prop="actualQuantity">
+        <el-input-number v-model="dataForm.actualQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.ActualFinishedProduct')])" :step="1" />
+      </el-form-item>
+      <el-form-item :label="$t('module.orderManage.order.DamageQuantityPlate')" prop="scrapQuantity">
+        <el-input-number v-model="dataForm.scrapQuantity" :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.DamageQuantityPlate')])" :step="1" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ 'btn.confirm' | i18nFilter }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderUpdate } from '@/api/orderManage/workOrder/workOrder'
+export default {
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dataForm: {
+        finishProduceTime: '',
+        actualQuantity: '',
+        scrapQuantity: ''
+      },
+      closeData: {},
+      dataRule: {
+        finishProduceTime: [
+          { required: true, message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.CompletionTime')]), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init(dataForm) {
+      this.visible = true
+      this.closeData = dataForm
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.closeData.status = 9
+          this.closeData.finishProduceTime = this.dataForm.finishProduceTime
+          this.closeData.actualQuantity = this.dataForm.actualQuantity
+          this.closeData.scrapQuantity = this.dataForm.scrapQuantity
+          workOrderUpdate(this.closeData).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/orderManage/workOrder/components/workOrder-issue.vue

@@ -0,0 +1,207 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-25 16:34:30
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'routerTitle.order.workOrderManage.issueworkorder' | i18nFilter"
+    :visible.sync="visible"
+    :before-close="goback"
+    :append-to-body="true"
+    width="80%"
+  >
+    <el-form
+      ref="formData"
+      :rules="rules"
+      :model="formData"
+      :inline="true"
+      size="medium"
+      label-width="150px"
+    >
+      <el-form-item :label="$t('module.orderManage.order.destination')" prop="syncTarget">
+        <el-select v-model="formData.syncTarget" filterable :placeholder="$i18nForm(['placeholder.input', $t('module.orderManage.order.destination')])" clearable>
+          <el-option
+            v-for="item in issueDestination"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="issueworkorder()"> {{ 'routerTitle.order.workOrderManage.issueworkorder' | i18nFilter }} </el-button>
+      </el-form-item>
+    </el-form>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+    />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderIssueList, syncAdd } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import { timeFormatter } from '@/filters'
+import basicData from '@/filters/basicData'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableProps = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.initiateTime'),
+    filter: timeFormatter,
+    align: 'center'
+  },
+  {
+    prop: 'syncTarget',
+    label: i18n.t('module.orderManage.order.destination'),
+    align: 'center',
+    filter: basicData('source')
+  },
+  {
+    prop: 'syncStatus',
+    label: i18n.t('module.orderManage.order.status'),
+    align: 'center',
+    filter: basicData('workStatus')
+  },
+  {
+    prop: 'reason',
+    label: i18n.t('module.orderManage.order.reason'),
+    align: 'center'
+  }
+]
+
+export default {
+  name: '',
+  components: { Pagination, BaseTable },
+  props: {
+    workOrderId: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      tableProps,
+      list: [],
+      total: 0,
+      listLoading: false,
+      formData: {
+        syncTarget: ''
+      },
+      issueDestination: [
+        {
+          label: '00A',
+          value: 4
+        },
+        {
+          label: 'PID1',
+          value: 3
+        },
+        {
+          label: '00C',
+          value: 5
+        }
+      ],
+      listQuery: {
+        current: 1,
+        size: 10,
+        workOrderId: ''
+      },
+      rules: {
+        syncTarget: [{
+          required: true,
+          message: this.$i18nForm(['placeholder.input', this.$t('module.orderManage.order.destination')]),
+          trigger: 'change'
+        }]
+      }
+    }
+  },
+  methods: {
+    init(id) {
+      this.visible = true
+      this.listQuery.workOrderId = this.workOrderId
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      workOrderIssueList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    issueworkorder() {
+      this.$refs['formData'].validate((valid) => {
+        if (valid) {
+          const data = {
+            'wordOrderId': this.workOrderId,
+            'syncTarget': this.formData.syncTarget
+          }
+          syncAdd(data).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getList()
+              }
+            })
+          })
+        }
+      })
+    },
+    goback() {
+      this.visible = false
+      this.$emit('refreshDataList')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.edit-input {
+  padding-right: 100px;
+}
+.cancel-btn {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+}
+</style>

src/views/orderManage/workOrder/components/workOrderBtn.vue

@@ -0,0 +1,40 @@
+<!--
+ * @Date: 2021-01-07 20:09:37
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 13:24:46
+ * @FilePath: \mt-bus-fe\src\views\orderManage\workOrder\components\workOrderBtn.vue
+ * @Description:
+-->
+<template>
+  <span>
+    <el-button type="text" size="small" @click="emitClick">{{ $t('module.orderManage.order.workOrderDetail') }}</el-button>
+    <work-order-detail v-if="visible" ref="orderDetail" :unit-obj="injectData.unitObj" @refreshDataList="refreshDataList" />
+  </span>
+</template>
+
+<script>
+import workOrderDetail from './workOrderOperation.vue'
+export default {
+  components: { workOrderDetail },
+  props: {
+    injectData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    emitClick() {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.orderDetail.init(this.injectData.id)
+      })
+    },
+    refreshDataList() {}
+  }
+}
+</script>

src/views/orderManage/workOrder/components/workOrderMonitor.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-23 11:05:06
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 17:45:45
+ * @Description: 工单监控
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.order.WorkOrderProgress') }}</b></span>
+        <el-button style="float: right;" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData2') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData3') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData5') }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData6') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData8') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData9') }}</div></el-col>
+        </el-row>
+      </div>
+      <div style="width:50%">
+        <el-progress :text-inside="true" :stroke-width="26" :percentage="78" />
+      </div>
+    </el-card>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.order.energyConsumption') }}</b></span>
+      </div>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.orderManage.order.energyConsumptionChart') }}</el-menu-item>
+        <el-menu-item index="2">{{ $t('module.orderManage.order.energyConsumptionTable') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <monitor-chart v-if="chartVisible" ref="monitorChart" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <monitor-table v-if="tableVisible" ref="monitorTable" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+  </div>
+</template>
+
+<script>
+import monitorChart from './monitor-chart'
+import monitorTable from './monitor-table'
+
+export default {
+  name: '',
+  components: { monitorChart, monitorTable },
+  data() {
+    return {
+      chartVisible: false,
+      tableVisible: false,
+      workOrderId: '',
+      activeIndex: '1'
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.handleSelect('1')
+  },
+  methods: {
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    handleSelect(key, keyPath) {
+      this.chartVisible = false
+      this.tableVisible = false
+      switch (key) {
+        case '1':
+          this.chartVisible = true
+          this.$nextTick(() => {
+            this.$refs.monitorChart.init()
+          })
+          break
+        case '2':
+          this.tableVisible = true
+          this.$nextTick(() => {
+            this.$refs.monitorTable.init()
+          })
+          break
+      }
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 70%;
+    font-size: 20px;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>

src/views/orderManage/workOrder/components/workOrderOperation.vue

@@ -0,0 +1,239 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:39:57
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-04-20 13:40:30
+ * @Description:
+-->
+<template>
+  <el-dialog
+    :title="'btn.detail' | i18nFilter"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    width="1200"
+  >
+    <div class="detailBox">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.WorkOrderName') }}</p>
+          <p class="text">{{ stringfilter(dataForm.name) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.workOrderDetail.workOrderStatus') }}</p>
+          <p class="text">{{ dataForm.status|commonFilter(newBasicData('1526063541841727490')) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.source') }}</p>
+          <p class="text">{{ dataForm.triggerOrigin|commonFilter(newBasicData('1523941494259912706')) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.createTime') }}</p>
+          <p class="text">{{ timefilter(dataForm.createTime) }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.PlannedProcessingVolume') }}</p>
+          <p class="text">{{ dataForm.planQuantity }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.unit') }}</p>
+          <p class="text">{{ stringfilter(dataForm.dictDataId ? unitObj[String(dataForm.dictDataId)] : '') }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.specifications') }}</p>
+          <p class="text">{{ stringfilter(dataForm.specifications) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.ActualFinishedProduct') }}</p>
+          <p class="text">{{ dataForm.actualQuantity }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.ProductName') }}</p>
+          <p class="text">{{ stringfilter(dataForm.productName) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.priority') }}</p>
+          <p class="text">{{ dataForm.priority | commonFilter(newBasicData('1524577291887898626')) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.triggerTime') }}</p>
+          <p class="text">{{ timefilter(dataForm.triggerTime) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.StartTime') }}</p>
+          <p class="text">{{ timefilter(dataForm.startProduceTime) }}</p>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.PlanningEndTime') }}</p>
+          <p class="text">{{ timefilter(dataForm.planFinishProduceTime) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.EndTime') }}</p>
+          <p class="text">{{ timefilter(dataForm.finishProduceTime) }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.ProductLines') }}</p>
+          <p class="text">{{ (dataForm.productlines && dataForm.productlines.length ? dataForm.productlines.map(item => item.name).join(',') : '') }}</p>
+        </el-col>
+        <el-col :span="6">
+          <p class="title">{{ $t('module.orderManage.order.workers') }}</p>
+          <p class="text">{{ stringfilter(dataForm.workers) }}</p>
+        </el-col>
+      </el-row>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ 'btn.cancel' | i18nFilter }}</el-button>
+      <!-- <el-button type="primary" @click="stopWorkOrder()">{{ 'btn.end' | i18nFilter }}</el-button> -->
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { workOrderDetail, updateForStatus, workOrderComplete } from '@/api/orderManage/workOrder/workOrder'
+import { timeFormatter } from '@/filters'
+import newBasicData from '@/filters/newBasicData'
+
+export default {
+  name: '',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    unitObj: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      workOrderId: '',
+      dataForm: {},
+      newBasicData
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init(id) {
+      this.workOrderId = id
+      this.visible = true
+      this.dataForm = {}
+      this.$nextTick(() => {
+        workOrderDetail(this.workOrderId).then(res => {
+          this.dataForm = res.data
+        })
+      })
+    },
+    stopWorkOrder() {
+      this.$confirm(this.$t('module.orderManage.order.stopBefore'), this.$t('module.basicData.visual.Tips'), {
+        confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+        cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+        type: 'warning'
+      }).then(() => {
+        workOrderComplete({ id: this.workOrderId }).then(response => {
+          this.$message({
+            message: this.$t('module.basicData.visual.success'),
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        })
+      }).catch(() => {})
+    },
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    activation() {
+      const data = {}
+      data.status = '3'
+      data.id = this.workOrderId
+      updateForStatus(data).then(res => {
+        this.$message({
+          message: this.$t('module.basicData.visual.success'),
+          type: 'success',
+          duration: 1500
+        })
+      })
+    },
+    closeClick() {
+      this.closeVisible = true
+      this.$nextTick(() => {
+        this.$refs.closeWorkOrder.init(this.dataForm)
+      })
+    },
+    issueClick() {
+      this.issueVisible = true
+      this.$nextTick(() => {
+        this.$refs.issueWorkOrder.init()
+      })
+    },
+    tagsClick() {
+      this.$router.push({
+        name: 'packingTags',
+        query: {
+          id: this.workOrderId
+        }
+      })
+    },
+    verifyClick() {
+      this.$router.push({
+        name: 'workOrderVerify',
+        query: {
+          id: this.workOrderId
+        }
+      })
+    },
+    monitorClick() {
+      this.$router.push({
+        name: 'workOrderMonitor',
+        query: {
+          id: this.workOrderId
+        }
+      })
+    },
+    goback() {
+      this.$router.go(-1)
+    },
+    timefilter(obj) {
+      return timeFormatter(obj).substring(0, timeFormatter(obj).lastIndexOf(' '))
+    },
+    stringfilter(objString) {
+      return objString || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.detailBox p {
+  margin: 0;
+  padding: 0 20px;
+}
+.detailBox .title {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(0,0,0,0.65);
+  padding-bottom: 10px;
+}
+.detailBox .text {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(102,102,102,0.75);
+  padding-bottom: 20px;
+}
+</style>

src/views/orderManage/workOrder/components/workOrderVerify.vue

@@ -0,0 +1,163 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-02-27 14:49:11
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-03-06 17:58:53
+ * @Description: 工单验证
+-->
+<template>
+  <div>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.FalseData.FalseData1') }}</b></span>
+        <el-button style="float: right;" type="success" @click="goback()">{{ 'btn.back' | i18nFilter }}</el-button>
+      </div>
+      <div class="text item">
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData2') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData3') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData5') }}</div></el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData6') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData8') }}</div></el-col>
+          <el-col :span="6"><div>{{ $t('module.orderManage.FalseData.FalseData9') }}</div></el-col>
+        </el-row>
+      </div>
+    </el-card>
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span><b>{{ $t('module.orderManage.order.workOrderVerificationResult') }}</b></span>
+      </div>
+      <el-menu
+        :default-active="activeIndex"
+        mode="horizontal"
+        background-color="#545c64"
+        text-color="#fff"
+        active-text-color="#ffd04b"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">{{ $t('module.orderManage.order.deviceDetection') }}</el-menu-item>
+        <el-menu-item index="2">{{ $t('module.orderManage.order.process') }}</el-menu-item>
+        <el-menu-item index="3">{{ $t('module.orderManage.order.useMaterial') }}</el-menu-item>
+        <el-menu-item index="4">{{ $t('module.orderManage.order.basePlate') }}</el-menu-item>
+        <el-menu-item index="5">{{ $t('module.orderManage.order.team') }}</el-menu-item>
+      </el-menu>
+    </el-card>
+    <verify-equipment v-if="equipmentVisible" ref="verifyEquipment" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-craft v-if="craftVisible" ref="verifyCraft" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-group v-if="groupVisible" ref="verifyGroup" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-materiel v-if="materielVisible" ref="verifyMateriel" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+    <verify-plate v-if="plateVisible" ref="verifyPlate" :work-order-id="workOrderId" @refreshDataList="handleClick" />
+  </div>
+</template>
+
+<script>
+import verifyEquipment from './verify-equipment'
+import verifyCraft from './verify-craft'
+import verifyGroup from './verify-group'
+import verifyMateriel from './verify-materiel'
+import verifyPlate from './verify-plate'
+
+export default {
+  name: '',
+  components: { verifyEquipment, verifyCraft, verifyGroup, verifyMateriel, verifyPlate },
+  data() {
+    return {
+      equipmentVisible: false,
+      craftVisible: false,
+      groupVisible: false,
+      materielVisible: false,
+      plateVisible: false,
+      workOrderId: '',
+      activeIndex: '1'
+    }
+  },
+  created() {
+    this.workOrderId = this.$route.query.id
+    this.handleSelect('1')
+  },
+  methods: {
+    handleClick() {
+      // this.addOrUpdateVisible = true
+      // this.$nextTick(() => {
+      //   this.$refs.addOrUpdate.init(id)
+      // })
+    },
+    handleSelect(key, keyPath) {
+      this.equipmentVisible = false
+      this.craftVisible = false
+      this.groupVisible = false
+      this.materielVisible = false
+      this.plateVisible = false
+      switch (key) {
+        case '1':
+          this.equipmentVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyEquipment.init()
+          })
+          break
+        case '2':
+          this.craftVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyCraft.init()
+          })
+          break
+        case '3':
+          this.materielVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyMateriel.init()
+          })
+          break
+        case '4':
+          this.plateVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyPlate.init()
+          })
+          break
+        case '5':
+          this.groupVisible = true
+          this.$nextTick(() => {
+            this.$refs.verifyGroup.init()
+          })
+          break
+      }
+    },
+    goback() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text {
+    font-size: 18px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .box-card {
+    width: 80%;
+    font-size: 30px;
+    margin: auto;
+    margin-top: 20px;
+  }
+  .el-row {
+    margin-bottom: 20px;
+  }
+  .el-col {
+    border-radius: 4px;
+  }
+</style>

src/views/orderManage/workOrder/workOrder.vue

@@ -0,0 +1,510 @@
+<!--
+ * @Author: zwq
+ * @Date: 2020-12-29 15:41:11
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-07-25 10:35:36
+ * @Description:
+-->
+<template>
+  <div class="app-container">
+    <head-form
+      :form-config="headFormConfig"
+      @headBtnClick="btnClick"
+    />
+    <el-row>
+      <el-tabs v-model="orderStatus" @tab-click="getList">
+        <el-tab-pane name="1" :label="$t('module.orderManage.order.all')" />
+        <el-tab-pane name="2" :label="$t('module.orderManage.order.unComplete')" />
+        <el-tab-pane name="3" :label="$t('module.orderManage.order.complete')" />
+      </el-tabs>
+    </el-row>
+    <base-table
+      :page="listQuery.current"
+      :limit="listQuery.size"
+      :height="tableH"
+      :table-config="tableProps"
+      :table-data="list"
+      :is-loading="listLoading"
+      @emitFun="handleTableEvents"
+    >
+      <method-btn
+        v-if="tableBtn.length"
+        slot="handleBtn"
+        :width="trueWidth"
+        :method-list="tableBtn"
+        @clickBtn="handleClick"
+      />
+    </base-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.current"
+      :limit.sync="listQuery.size"
+      @pagination="getList()"
+    />
+    <workOrder-add v-if="addOrUpdateVisible" ref="addOrUpdate" :unit-list="unitList" @refreshDataList="getList" />
+    <work-order-detail v-if="visibleOrderDetail" ref="orderDetail" :unit-obj="unitObj" @refreshDataList="getList" />
+    <start-stop ref="startStopOrder" @refreshDataList="getList" />
+    <edit-batch v-if="updateBatch" ref="updateBatch" />
+  </div>
+</template>
+
+<script>
+import HeadForm from '@/components/basicData/HeadForm'
+import { workOrderList, workOrderDelete } from '@/api/orderManage/workOrder/workOrder'
+import i18n from '@/lang'
+import workOrderAdd from './components/workOrder-add'
+import completionSchedule from '../order/components/completionSchedule.vue'
+import mapColumn from '../components/mapColumn.vue'
+import BaseTable from '@/components/BaseTable'
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
+import { timeFormatter } from '@/filters'
+import newBasicData from '@/filters/newBasicData'
+import workOrderDetail from './components/workOrderOperation.vue'
+import commonBtn from '@/components/BaseTable/subcomponents/CommonBtn.vue'
+import startStop from './components/startStop.vue'
+import { tableHeight } from '@/utils/index'
+import editBatch from './components/editBatch.vue'
+/**
+ * 表格表头配置项 TypeScript接口注释
+ * tableConfig<ConfigItem> = []
+ *
+ * Interface ConfigItem = {
+ *  prop: string,
+ *  label: string,
+ *  width: string,
+ *  align: string,
+ *  subcomponent: function,
+ *  filter: function
+ * }
+ *
+ *
+ */
+const tableBtn1 = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  },
+  {
+    type: 'start',
+    btnName: 'btn.start',
+    showParam: {
+      type: '&',
+      data: [
+        {
+          type: 'indexof',
+          name: 'status',
+          value: [1, 2, 3, 4]
+        }
+      ]
+    }
+  },
+  {
+    type: 'stop',
+    btnName: 'btn.end',
+    showParam: {
+      type: '&',
+      data: [
+        {
+          type: 'unequal',
+          name: 'status',
+          value: 9
+        }
+      ]
+    }
+  },
+  {
+    type: 'edit',
+    btnName: 'btn.edit',
+    showParam: {
+      type: '&',
+      data: [
+        {
+          type: 'indexof',
+          name: 'status',
+          value: [1, 2]
+        }
+      ]
+    }
+  },
+  {
+    type: 'delete',
+    btnName: 'btn.delete',
+    showParam: {
+      type: '&',
+      data: [
+        {
+          type: 'indexof',
+          name: 'status',
+          value: [1, 2]
+        }
+      ]
+    }
+  }
+]
+const tableBtn2 = [
+  {
+    type: 'detail',
+    btnName: 'btn.detail'
+  }
+]
+const tablePropsAll = [
+  {
+    prop: 'createTime',
+    label: i18n.t('module.orderManage.order.createTime'),
+    filter: timeFormatter,
+    minWidth: 160,
+    isFixed: true
+  },
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    minWidth: 230,
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    width: 180
+  },
+  {
+    prop: 'triggerTime',
+    label: i18n.t('module.orderManage.order.IssueOrder'),
+    filter: timeFormatter,
+    minWidth: 160
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.WorkOrderStartTime'),
+    filter: timeFormatter,
+    minWidth: 160
+  },
+  {
+    prop: 'orderName',
+    label: i18n.t('module.orderManage.order.OrderName')
+  },
+  {
+    prop: 'priority',
+    label: i18n.t('module.orderManage.order.priority'),
+    filter: newBasicData('1524577291887898626'),
+    width: 100
+  },
+  {
+    prop: 'triggerOrigin',
+    label: i18n.t('module.orderManage.order.source'),
+    filter: newBasicData('1523941494259912706'),
+    width: 100
+  },
+  {
+    prop: 'status',
+    label: i18n.t('module.orderManage.workOrderDetail.workOrderStatus'),
+    filter: newBasicData('1526063541841727490'),
+    width: 100
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    width: 100
+  },
+  {
+    prop: 'actualQuantity',
+    label: i18n.t('module.orderManage.order.ActualFinishedProduct'),
+    width: 100
+  },
+  {
+    prop: 'scrapQuantity',
+    label: i18n.t('module.orderManage.order.NumberOfDamages'),
+    width: 100
+  },
+  {
+    prop: 'batch',
+    label: i18n.t('module.orderManage.workOrderDetail.originalBatch'),
+    subcomponent: commonBtn,
+    buttonContent: i18n.t('module.orderManage.workOrderDetail.batchDetail'),
+    emitFullData: true
+  }
+]
+const tablePropsUnComplete = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    minWidth: 230,
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    width: 180
+  },
+  {
+    prop: 'workers',
+    label: i18n.t('module.orderManage.order.workers'),
+    width: 100
+  },
+  {
+    prop: 'triggerTime',
+    label: i18n.t('module.orderManage.order.IssueOrder'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.WorkOrderStartTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'planFinishProduceTime',
+    label: i18n.t('module.orderManage.order.PlanningEndTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'customerName',
+    label: i18n.t('module.orderManage.order.customer'),
+    width: 100
+  },
+  {
+    prop: 'priority',
+    label: i18n.t('module.orderManage.order.priority'),
+    filter: newBasicData('1524577291887898626'),
+    width: 100
+  },
+  {
+    prop: 'triggerOrigin',
+    label: i18n.t('module.orderManage.order.source'),
+    filter: newBasicData('1523941494259912706'),
+    width: 100
+  },
+  {
+    prop: 'dictDataId',
+    label: i18n.t('module.orderManage.order.unit'),
+    filter: newBasicData('1'),
+    width: 100
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    width: 100
+  }
+]
+const tablePropsComplete = [
+  {
+    prop: 'name',
+    label: i18n.t('module.orderManage.order.WorkOrderName'),
+    minWidth: 230,
+    isFixed: true
+  },
+  {
+    prop: 'code',
+    label: i18n.t('module.orderManage.order.WorkOrderCode'),
+    width: 180
+  },
+  {
+    prop: 'workers',
+    label: i18n.t('module.orderManage.order.workers'),
+    width: 100
+  },
+  {
+    prop: 'triggerTime',
+    label: i18n.t('module.orderManage.order.IssueOrder'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'startProduceTime',
+    label: i18n.t('module.orderManage.order.WorkOrderStartTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'finishProduceTime',
+    label: i18n.t('module.orderManage.order.CompletionTime'),
+    minWidth: 160,
+    filter: timeFormatter
+  },
+  {
+    prop: 'dictDataId',
+    label: i18n.t('module.orderManage.order.unit'),
+    filter: newBasicData('1'),
+    width: 100
+  },
+  {
+    prop: 'planQuantity',
+    label: i18n.t('module.orderManage.order.PlannedProcessingVolume'),
+    width: 100
+  },
+  {
+    prop: 'actualQuantity',
+    label: i18n.t('module.orderManage.order.ActualFinishedProduct'),
+    width: 100
+  },
+  {
+    prop: 'completionSchedule',
+    label: i18n.t('module.orderManage.orderDetail.completionSchedule'),
+    subcomponent: completionSchedule,
+    width: 100
+  },
+  {
+    prop: 'productlines',
+    label: i18n.t('module.orderManage.order.ProductLines'),
+    subcomponent: mapColumn
+  }
+]
+
+export default {
+  name: 'ScrapInfo',
+  components: { HeadForm, Pagination, BaseTable, MethodBtn, workOrderAdd, editBatch, workOrderDetail, startStop },
+  data() {
+    return {
+      addOrUpdateVisible: false,
+      tableBtn: [],
+      tableBtn1,
+      tableBtn2,
+      trueWidth: 180,
+      tableH: tableHeight(333),
+      tablePropsAll,
+      tablePropsUnComplete,
+      tablePropsComplete,
+      tableProps: [],
+      list: [],
+      total: 0,
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 20
+      },
+      headFormConfig: [
+        {
+          type: 'input',
+          label: i18n.t('module.orderManage.order.WorkOrderName'),
+          placeholder: this.$t('module.orderManage.order.WorkOrderName'),
+          param: 'workOrderNo'
+        },
+        {
+          type: 'datePicker',
+          label: this.$t('module.orderManage.order.ActualStartTime'),
+          dateType: 'daterange',
+          format: 'yyyy-MM-dd',
+          valueFormat: 'yyyy-MM-dd',
+          rangeSeparator: '-',
+          startPlaceholder: this.$t('module.orderManage.order.StartTime'),
+          endPlaceholder: this.$t('module.orderManage.order.EndTime'),
+          param: 'timeSlot'
+        },
+        {
+          type: 'button',
+          btnName: 'btn.search',
+          name: 'search',
+          color: 'primary'
+        }
+      ],
+      visibleOrderDetail: false,
+      updateBatch: false,
+      headFormValue: {},
+      orderStatus: '1',
+      unitList: JSON.parse(localStorage.getItem('dictObj'))['1'],
+      unitObj: {}
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(333)
+    })
+    this.unitList.map(item => {
+      this.unitObj[item.dataCode] = item.dataName
+    })
+    this.getList()
+  },
+  methods: {
+    handleClick(raw) {
+      if (raw.type === 'delete') {
+        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]？`, this.$t('module.basicData.visual.Tips'), {
+          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
+          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
+          type: 'warning'
+        }).then(() => {
+          workOrderDelete(raw.data.id).then(response => {
+            this.$message({
+              message: this.$t('module.basicData.visual.success'),
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.listQuery.current = 1
+                this.getList()
+              }
+            })
+          })
+        }).catch(() => {})
+      } else if (raw.type === 'detail') {
+        this.visibleOrderDetail = true
+        this.$nextTick(() => {
+          this.$refs.orderDetail.init(raw.data.id)
+        })
+      } else if (raw.type === 'edit') {
+        this.addNew(raw.data.id)
+      } else if (raw.type === 'start') {
+        this.$refs.startStopOrder.init(raw.data.id, 'start')
+      } else if (raw.type === 'stop') {
+        this.$refs.startStopOrder.init(raw.data.id, 'stop')
+      }
+    },
+    getList() {
+      if (this.orderStatus === '1') {
+        this.listQuery.status = ''
+        this.tableBtn = this.tableBtn1
+        this.trueWidth = 180
+        this.tableProps = this.tablePropsAll
+      } else if (this.orderStatus === '3') {
+        this.listQuery.status = 9
+        this.tableBtn = this.tableBtn2
+        this.trueWidth = 60
+        this.tableProps = this.tablePropsComplete
+      } else if (this.orderStatus === '2') {
+        this.listQuery.status = 1
+        this.tableBtn = this.tableBtn1
+        this.trueWidth = 180
+        this.tableProps = this.tablePropsUnComplete
+      }
+      this.listLoading = true
+      this.listQuery.name = this.headFormValue.workOrderNo
+      this.listQuery.startTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[0] + 'T00:00:00' : ''
+      this.listQuery.endTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] + 'T23:59:59' : ''
+      workOrderList(this.listQuery).then(response => {
+        if (response.data.records) {
+          this.list = response.data.records
+        } else {
+          this.list.splice(0, this.list.length)
+        }
+        this.total = response.data.total
+        this.listLoading = false
+      })
+    },
+    // 新增 / 修改
+    addNew(id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    btnClick(val) {
+      this.headFormValue = val
+      // 如果点击的是搜索栏的其他按钮在这里继续写判断
+      if (this.headFormValue.btnName === 'search') {
+        this.listQuery.current = 1
+        this.getList()
+      }
+    },
+    handleTableEvents({ action, data }) {
+      switch (action) {
+        case 'view-detail-action':
+          this.updateBatch = true
+          this.$nextTick(() => {
+            this.$refs.updateBatch.init(data.id)
+          })
+      }
+    }
+  }
+}
+</script>