|
|
@@ -0,0 +1,453 @@
|
|
|
+<script setup lang="ts">
|
|
|
+import { getRouteInfo } from "@/views/flow/common/CheckTopInfos/utils";
|
|
|
+import { formOption } from "@/views/base/craftManagement/route/bindConfig";
|
|
|
+import { VueFlow, useVueFlow, Panel } from "@vue-flow/core";
|
|
|
+import DropzoneBackground from "@/views/base/craftManagement/route/components/DropzoneBackground/index.vue";
|
|
|
+import CustomConnectionLine from "@/views/base/craftManagement/route/components/CustomConnectionLine/index.vue";
|
|
|
+import CustomNode from "@/views/base/craftManagement/route/components/CustomNode/index.vue";
|
|
|
+import useDragAndDrop from "@/hooks/useDnD.js";
|
|
|
+import { MiniMap } from "@vue-flow/minimap";
|
|
|
+import { useCommonStoreHook, useDictionaryStore } from "@/store";
|
|
|
+import { useScreenshot } from "@/views/base/craftManagement/route/screenshot.ts";
|
|
|
+import { useLayout } from "@/hooks/useLayout";
|
|
|
+
|
|
|
+const infoObj = ref({});
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ row: {
|
|
|
+ type: Object,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ console.log("CheckTopInfos routeFlowComService mounted", props.row);
|
|
|
+ let res = await getRouteInfo(props.row.businessId);
|
|
|
+ infoObj.value = res.data;
|
|
|
+ await loadProcessesFlow();
|
|
|
+ flowBoxScreen();
|
|
|
+});
|
|
|
+
|
|
|
+const resetHistory = () => {
|
|
|
+ historyList.value = [];
|
|
|
+};
|
|
|
+const historyList = ref([]);
|
|
|
+const { capture } = useScreenshot();
|
|
|
+const { layout } = useLayout();
|
|
|
+const instance = useVueFlow();
|
|
|
+const { addEdges} =
|
|
|
+ instance;
|
|
|
+const { onDragOver, onDrop, onDragLeave, isDragOver, onDragStart } =
|
|
|
+ useDragAndDrop();
|
|
|
+const onConnectMethod = (edge) => {
|
|
|
+ edge.type = "custom";
|
|
|
+ addEdges(edge);
|
|
|
+};
|
|
|
+
|
|
|
+const flowData = reactive({ edges: [], nodes: [] });
|
|
|
+const flowDataCopy = ref({ edges: [], nodes: [] });
|
|
|
+const currentProcess = ref({});
|
|
|
+const selectNode = ref(null);
|
|
|
+const selectLine = ref(null);
|
|
|
+const { nodes } = toRefs(flowData); //ref(initialNodes);
|
|
|
+const { edges } = toRefs(flowData); //ref(initialEdges);
|
|
|
+//true为可编辑线路
|
|
|
+const usableStatus = ref(true);
|
|
|
+provide("selectNode", selectNode);
|
|
|
+provide("currentProcess", currentProcess);
|
|
|
+provide("selectLine", selectLine);
|
|
|
+const opComVisible = ref(false)
|
|
|
+// 自定义工序项目字段名称相关方法
|
|
|
+const avueKey = ref(false);
|
|
|
+const nodeClick = (event) => {
|
|
|
+ formOption.column.forEach(item=>{
|
|
|
+ item.disabled = true
|
|
|
+ })
|
|
|
+ editStatus.value = true
|
|
|
+ // 所有的批量报工设置为1
|
|
|
+ event.node.batchReport = 1;
|
|
|
+ selectNode.value = event.node;
|
|
|
+ currentProcess.value = {};
|
|
|
+ //让组件重新加载
|
|
|
+ avueKey.value = !avueKey.value;
|
|
|
+ currentProcess.value = event.node;
|
|
|
+};
|
|
|
+//当使用回退时清空选择的node
|
|
|
+
|
|
|
+const printStauts = ref(false);
|
|
|
+const nodeType = ref("custom");
|
|
|
+const editStatus = ref(false);
|
|
|
+provide("editStatus", editStatus);
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+// 数据字典相关
|
|
|
+const { dicts } = useDictionaryStore();
|
|
|
+//获取画布盒子具体长宽
|
|
|
+const flowBoxH = ref(null);
|
|
|
+const flowBoxW = ref(null);
|
|
|
+const flowBoxScreen = () => {
|
|
|
+ const flowBox = document.getElementById("flowBox");
|
|
|
+ flowBoxH.value = flowBox.clientHeight;
|
|
|
+ flowBoxW.value = flowBox.clientWidth;
|
|
|
+};
|
|
|
+// 顶部====================
|
|
|
+const back = () => {
|
|
|
+ router.back();
|
|
|
+};
|
|
|
+
|
|
|
+const download = () => {};
|
|
|
+
|
|
|
+const errArray = ref([]);
|
|
|
+provide("errArray", errArray);
|
|
|
+
|
|
|
+const routeOperationData = ref(null);
|
|
|
+const cancelStatus = ref(true);
|
|
|
+//通过id获取现存储信息
|
|
|
+const loadProcessesFlow = async () => {
|
|
|
+ if (infoObj.value) {
|
|
|
+ routeOperationData.value = infoObj.value;
|
|
|
+ if (infoObj.value.routeData && infoObj.value.routeData != "") {
|
|
|
+ let jsonData = JSON.parse(infoObj.value.routeData);
|
|
|
+ flowData.nodes = jsonData.nodes;
|
|
|
+ flowData.edges = jsonData.edges;
|
|
|
+ flowDataCopy.value = JSON.parse(JSON.stringify(jsonData));
|
|
|
+ cancelStatus.value = true;
|
|
|
+ if (infoObj.value.usable == 1) {
|
|
|
+ usableStatus.value = false;
|
|
|
+ }
|
|
|
+ resetHistory();
|
|
|
+ } else {
|
|
|
+ cancelStatus.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const formRef = ref(null);
|
|
|
+const reset = () => {
|
|
|
+ currentProcess.value = {};
|
|
|
+ editStatus.value = false;
|
|
|
+ routeOperationData.value = {};
|
|
|
+};
|
|
|
+const editProComponent = () => {
|
|
|
+ if(currentProcess.value && currentProcess.value.operationId){
|
|
|
+ opComVisible.value = true
|
|
|
+ }else{
|
|
|
+ ElMessage.error("请选择工序")
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="box">
|
|
|
+ <el-card>
|
|
|
+ <el-form label-width="120px">
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="工艺编号:">
|
|
|
+ <el-text class="mx-1" >{{infoObj.processRouteCode}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="工艺名称:">
|
|
|
+ <el-text class="mx-1">{{infoObj.processRouteName}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="执行文件和标准:">
|
|
|
+ <el-text class="mx-1">{{infoObj.executeFileStd}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="产品负责人:">
|
|
|
+ <el-text class="mx-1">{{infoObj.productManager}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="版本:">
|
|
|
+ <el-text class="mx-1">V{{infoObj.processRouteVersion}}</el-text>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+ <el-card>
|
|
|
+
|
|
|
+ <div class="binContainer">
|
|
|
+ <div
|
|
|
+ class="flowBox"
|
|
|
+ id="flowBox"
|
|
|
+ style="height: 100%; width: 100%; overflow: hidden"
|
|
|
+ >
|
|
|
+ <div class="dnd-flow" @drop="onDrop">
|
|
|
+ <VueFlow
|
|
|
+ v-model:nodes="nodes"
|
|
|
+ v-model:edges="edges"
|
|
|
+ :apply-default="!editStatus && usableStatus"
|
|
|
+ @connect="onConnectMethod"
|
|
|
+ @dragover="onDragOver"
|
|
|
+ @dragleave="onDragLeave"
|
|
|
+ @node-click="nodeClick($event)"
|
|
|
+ >
|
|
|
+ <MiniMap style="background-color: grey" v-show="!printStauts" />
|
|
|
+ <template #edge-custom="props">
|
|
|
+ <CustomConnectionLine v-bind="props" />
|
|
|
+ </template>
|
|
|
+ <template #connection-line="props">
|
|
|
+ <CustomConnectionLine v-bind="props" />
|
|
|
+ </template>
|
|
|
+ <template #node-custom="props">
|
|
|
+ <CustomNode v-bind="props" />
|
|
|
+ </template>
|
|
|
+ <DropzoneBackground
|
|
|
+ :style="{
|
|
|
+ backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
|
|
|
+ transition: 'background-color 0.2s ease',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <p v-if="isDragOver">拖拽中</p>
|
|
|
+ </DropzoneBackground>
|
|
|
+ </VueFlow>
|
|
|
+ <div :style="{ width: flowBoxW - 20 + 'px', height: flowBoxH - 20 + 'px', }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detailInfo">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="opBox">
|
|
|
+ <div style="display: flex">
|
|
|
+ <el-button type="success" @click="editProComponent" >工序组件</el-button >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <avue-form
|
|
|
+ v-if="editStatus"
|
|
|
+ ref="formRef"
|
|
|
+ :option="formOption"
|
|
|
+ v-model="currentProcess"
|
|
|
+ :key="avueKey"
|
|
|
+ style="padding: 10px; background-color: transparent"
|
|
|
+ >
|
|
|
+ </avue-form>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-dialog
|
|
|
+ v-model="opComVisible"
|
|
|
+ title="工序组件详情"
|
|
|
+ width="85%"
|
|
|
+ append-to-body
|
|
|
+ @close="opComVisible = false"
|
|
|
+ :destroy-on-close="true">
|
|
|
+ <op_component_view :clickObj="currentProcess"></op_component_view>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.box {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.info-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+:deep(.el-form-item__label) {
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.showStyle {
|
|
|
+ transform: translateY(10px) rotate(90deg);
|
|
|
+}
|
|
|
+.fontStyle {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+}
|
|
|
+.binContainer {
|
|
|
+ height: calc(100vh - 165px);
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ // background-color: white;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.btns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 10px 0;
|
|
|
+ div {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.btnsChange {
|
|
|
+ margin: 10px 0;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.header {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.processTree {
|
|
|
+ width: 220px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .treeChild {
|
|
|
+ background: #f2f2f2;
|
|
|
+ padding: 20px 8px 10px 8px;
|
|
|
+ .childItem {
|
|
|
+ width: 100%;
|
|
|
+ height: 28px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid rgba(35, 32, 50, 0.1);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flowBox {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ overflow-y: auto;
|
|
|
+ .flowItem:hover {
|
|
|
+ .flowDelete {
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.detailInfo {
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: white;
|
|
|
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .opBox {
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 35px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .editProcces {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.title,
|
|
|
+.processInfo {
|
|
|
+ line-height: 44px;
|
|
|
+ color: #6f7991;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.processInfo span {
|
|
|
+ margin-left: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.processInfo {
|
|
|
+ position: absolute;
|
|
|
+ left: 5%;
|
|
|
+}
|
|
|
+.title2 {
|
|
|
+ color: #232032;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 19px;
|
|
|
+}
|
|
|
+.tipContent {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #e6a23c;
|
|
|
+}
|
|
|
+
|
|
|
+.process-panel,
|
|
|
+.layout-panel {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.process-panel {
|
|
|
+ background-color: #2d3748;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.process-panel button {
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #4a5568;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: white;
|
|
|
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.process-panel button {
|
|
|
+ font-size: 16px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-panel {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.process-panel button:hover,
|
|
|
+.layout-panel button:hover {
|
|
|
+ background-color: #2563eb;
|
|
|
+ transition: background-color 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.process-panel label {
|
|
|
+ color: white;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.stop-btn svg {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.stop-btn:hover svg {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.stop-btn:hover .spinner {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.spinner {
|
|
|
+ border: 3px solid #f3f3f3;
|
|
|
+ border-top: 3px solid #2563eb;
|
|
|
+ border-radius: 50%;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes spin {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
qinhb