2024-4-16 日计划排产详情页面

src/api/mes/orderDayConfig/index.ts

@@ -0,0 +1,37 @@
+import request from '@/config/axios'
+export interface OrderDayQueryParamVo {
+   planNoDay:String
+   productCode:String
+   workroomCode:String
+   lineCode:String
+   processrouteCode:String
+   batchCode:String
+   processCode:String
+}
+
+
+// 查询生产配置工艺路线
+export const getConfigProcessRoute = async (params) => {
+    return await request.get({ url: `/mes/orderDayRoute/getByOrder`, params })
+}
+// 查询已经配置的工序
+export const getConfigProcessRouteNode = async (params) => {
+    return await request.get({ url: `/mes/orderDayRoutesub/getByOrder`, params })
+}
+// 查询生产配置工序BOM
+export const getOrderDayBomByOrder = async (params) => {
+    return await request.get({ url: `/mes/orderDayBom/getByOrder`, params })
+}
+
+// 查询已经配置工序工位
+export const getConfigProcessWorkstation = async (params) => {
+    return await request.get({ url: `/mes/orderDayWorkstation/getByOrder`, params })
+}
+// 查询已经配置工序人员
+export const getConfigProcessWorker = async (params) => {
+    return await request.get({ url: `/mes/orderDayWorker/getByOrder`, params })
+}
+// 查询已经的工序工位设备
+export const getConfigProcessEquipment = async (params) => {
+    return await request.get({ url: `/mes/orderDayequipment/getByOrder`, params })
+}

src/views/mes/orderDay/components/schedule.vue

@@ -19,7 +19,7 @@
     </ContentWrap>
     <ContentWrap>
       <el-container>
-        <el-aside width="400px">
+        <el-aside width="320px">
           <el-card>
             <template #header>
               <div class="card-header">
@@ -45,15 +45,13 @@
             </el-table>
           </el-card>
         </el-aside>
-        <el-main style="height: 480px;width: calc(100% - 900px);padding: 0px; margin:0px 20px">
+        <el-main style="height: 320px;width: calc(100% - 980px);padding: 0px; margin:0px 20px">
           <div ref="graphContainer" ></div
         ></el-main>
-        <el-aside width="500px">
+        <el-aside width="640px">
           <el-tabs  v-model="activeName">
             <el-tab-pane label="工序工位" name="workstation">
-              <!-- <el-button>调整人员</el-button>
+              <el-table :data="workstationData" ref="tableWorkstations" style="width: 100%; height: 80%">
-              <el-button>调整设备</el-button> -->
-              <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%">
               <el-table-column prop="name" label="工作位置">
                 <template #default="scope">
                   <el-button size="mini" text  style="width: 100%"
@@ -62,20 +60,37 @@
                 </template>
               </el-table-column>
               <el-table-column prop="code" label="工序编码" width="180" v-if="false" />
-              
+            </el-table> 
-            </el-table>
+            
             </el-tab-pane>
             <el-tab-pane label="工序物料" name="materials">
-              <el-table :data="processData" ref="tableProcess" style="width: 100%; height: 80%">
+              <el-table :data="materialsData" ref="tableMaterials" style="width: 100%; height: 80%">
-              <el-table-column prop="name" label="工作位置">
+              <el-table-column prop="repMaterialCode" label="物料编码"/>
-                <template #default="scope">
+              <el-table-column prop="repMaterialCounts" label="物料数量" />
-                  <el-button size="mini" text  style="width: 100%"
+              <el-table-column prop="repMaterialModel" label="物料单位"  />
-                    >{{ scope.row.name }}[{{ scope.row.code }}]</el-button
+              <el-table-column prop="sourceMaterialCounts" label="需求物料数" >
-                  >
+                <template #default="scope">{{ getTotalcounts(scope.row.repMaterialCounts)}}</template>
-                </template>
               </el-table-column>
-              <el-table-column prop="code" label="工序编码" width="180" v-if="false" />
+              <el-table-column prop="replaceFlag" label="是否替换" />
-              <el-table-column prop="code" label="替换物料" width="180" v-if="false" />
+              
+            </el-table>
+          </el-tab-pane>
+            <el-tab-pane label="工序人员" name="workers">
+              <el-table :data="workerData" ref="tableWorker" style="width: 100%; height: 80%">
+              <el-table-column prop="workerCode" label="人员编码"/>
+              <el-table-column prop="workerName" label="人员昵称" />
+              <el-table-column prop="workerWorkstation" label="所在工位" />
+              <el-table-column prop="workerTeam" label="所属班组"  />
+              <el-table-column prop="workerPost" label="岗位" />
+              <el-table-column prop="abilityLevel" label="能力等级" />
+            </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="工序设备" name="equipments">
+              <el-table :data="equipmentData" ref="tableEquipment" style="width: 100%; height: 80%">
+              <el-table-column prop="equipmentCode" label="设备编码"/>
+              <el-table-column prop="equipmentName" label="设备名称" />
+              <el-table-column prop="equipmentWorkstation" label="关联工位" />
+              <el-table-column prop="equipmentOper" label="操作说明"  />
             </el-table>
             </el-tab-pane>
           </el-tabs>
@@ -100,11 +115,12 @@ import {
   createGraph,
   getNewNode
 } from '@/views/mes/processroute/components/graphbase.data'
-import * as ProcessrouteApi from '@/api/mes/processroute'
+import * as orderDayconfigApi from '@/api/mes/orderDayconfig'
 import  {ProcessSearch} from '../../publicUtil/processSearch.data'
 import * as ProcessApi from '@/api/wms/process'
 import { SearchTable } from '@/components/SearchTable'
-import { Graph } from '@antv/x6'
+import {  Graph } from '@antv/x6'
+//import {TableForm} from '@/components/TableForm/src/TableForm.vue' // 引入TableForm.vue组件
 const graphContainer = ref<HTMLElement | null>(null)
 const graph = ref<Graph>()
 const message = useMessage() // 消息弹窗
@@ -112,6 +128,7 @@ const { t } = useI18n() // 国际化
 const activeName = ref('process')
 const loading = ref(true)
 const processData = ref([])
+const queryParams:orderDayconfigApi.OrderDayQueryParamVo=ref()
 const props = defineProps({
   // 查询弹窗是否显示筛选按钮
   isSearchFilterButtonHide: {
@@ -133,28 +150,31 @@ const props = defineProps({
 const detailData = ref(props.allSchemas)
 const route = useRoute() // 路由信息
 const routeName = ref()
-
 routeName.value = route.name
 routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
 //const updateKey = ref(0)
 const dialogWidth = ref()
-// if (props.basicFormWidth) {
+const materialsData = ref()
-//   dialogWidth.value = props.basicFormWidth + '%'
+const workerData=ref()
-// } else {
+const equipmentData=ref()
-//   dialogWidth.value = props.isBusiness ? '60%' : '40%'
+const workstationData=ref()
-// }
-
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
-let graphJson = {
+
-}
+const  graphJson =ref() 
 /** 打开弹窗 */
 const open = async (type: string, row?: any, titleName?: any) => {
   dialogVisible.value = true
   detailData.value = row
   dialogWidth.value = props.basicFormWidth + '%'
+  queryParams.planNoDay=row.planNoDay
+  queryParams.productCode=row.productCode
+  queryParams.workroomCode=row.workroomCode
+  queryParams.lineCode=row.lineCode
+  queryParams.processrouteCode=row.processrouteCode
+  queryParams.batchCode=row.batchCode
   //获取配置的
-  await ProcessrouteApi.getProcessroute(row.processrouteCode)
+  
   if (titleName) {
     dialogTitle.value = t('action.' + titleName)
   } else {
@@ -162,13 +182,18 @@ const open = async (type: string, row?: any, titleName?: any) => {
   }
   nextTick(() => {
     graph.value = createGraph(graphContainer.value as HTMLElement, true, 240, 320)
-    // graph.value.on('node:click', ({ e, x, y, node, view }) => {
+    graph.value.on('node:click', ({ e, x, y, node, view }) => {
-    //   nodeClick(e, x, y, node, view)
+      nodeClick(e, x, y, node, view)
-    // })
+    })
-    graph.value?.fromJSON(graphJson.cells)
+    getProcessroute()
+    getConfigProcessRouteNode()
+    
+    
   })
 }
-
+const getTotalcounts=(a:any)=>{
+  return detailData.value.planCount*a
+}
 //添加节点
 const userAddNode = (row) => {
   if (graph && graph.value != undefined) {
@@ -192,14 +217,52 @@ const userAddNode = (row) => {
     }
   }
 }
+//获取工序的BOM
+const getProcessBom=async (code:any) => {
+  queryParams.processCode=code
+  let res = await orderDayconfigApi.getOrderDayBomByOrder(queryParams)
+  materialsData.value=res
+  
+}
 //获取配置的工艺路线信息
-const getProcessroute = async (code: String) => {
+const getProcessroute = async () => {
-  let res = await ProcessrouteApi.getProcesInfo(code)
+  let res = await orderDayconfigApi.getConfigProcessRoute(queryParams)
-  if (res.code == 200) {
+  //console.log('ddddd',res)
-    processData.value = res.data
+  graphJson.value=JSON.parse(res.newGraphData)
-  }
+
+  graph.value?.fromJSON(graphJson.value.cells)
+}
+//获取配置的工序信息
+const getConfigProcessRouteNode= async () => {
+  let res = await orderDayconfigApi.getConfigProcessRouteNode(queryParams)
+  processData.value=res
 }
+//获取配置的工序工位
+const getConfigProcessWorkstation= async (code:any) => {
+  queryParams.processCode=code
+  workstationData.value = await orderDayconfigApi.getConfigProcessWorkstation(queryParams)
  
+}
+//获取配置的工序人员
+const getConfigProcessWorker= async (code:any) => {
+  queryParams.processCode=code
+  workerData.value = await orderDayconfigApi.getConfigProcessWorker(queryParams)
+  
+}
+//获取配置的工序设备
+const getConfigProcessEquipment= async (code:any) => {
+  queryParams.processCode=code
+  equipmentData.value = await orderDayconfigApi.getConfigProcessEquipment(queryParams)
+  
+}
+const nodeClick = (e, x, y, node, view) => {
+  getProcessBom(node.id)
+  getConfigProcessWorkstation(node.id)
+  getConfigProcessWorker(node.id)
+  getConfigProcessEquipment(node.id)
+  console.log('nodeClick',detailData.value)
+}
+
 const searchTableRef = ref()
  
 const opensearchTable = (