| 1 |
- {"ast":null,"code":"import _regeneratorRuntime from \"E:/dev/MyProject/workflow/node_modules/@babel/runtime/helpers/esm/regeneratorRuntime.js\";\nimport _asyncToGenerator from \"E:/dev/MyProject/workflow/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\";\nimport \"core-js/modules/es.math.sign.js\";\nimport \"core-js/modules/es.parse-int.js\";\nimport \"core-js/modules/web.timers.js\";\nimport axios from 'axios';\nimport { fetchUserInfo } from \"@/api/user\";\nexport default {\n name: 'ShippingProcess',\n data: function data() {\n return {\n dialogVisible: false,\n currentNode: null,\n scale: 1,\n panEnabled: false,\n lastPosX: 0,\n lastPosY: 0,\n showWheelTip: true,\n userName: '',\n loading: true,\n error: null,\n nodes: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: 'http://dlp.tztek.com:3002/OALink.html?LinkId=201&ddtab=true'\n }, {\n id: 'order_receive',\n type: 'process',\n label: '接收订单',\n x: 400,\n y: 150,\n url: 'http://dlp.tztek.com:3002/OALink.html?LinkId=202&ddtab=true'\n }, {\n id: 'order_verify',\n type: 'condition',\n label: '订单审核',\n x: 400,\n y: 250,\n url: '/shipping/verify'\n }, {\n id: 'batch_assign',\n type: 'process',\n label: '批次分配',\n x: 600,\n y: 250,\n url: '/shipping/batch'\n }, {\n id: 'order_modify',\n type: 'process',\n label: '订单修改',\n x: 200,\n y: 250,\n url: '/shipping/modify'\n }, {\n id: 'stock_check',\n type: 'condition',\n label: '库存检查',\n x: 600,\n y: 350,\n url: '/shipping/stock'\n }, {\n id: 'purchase',\n type: 'process',\n label: '紧急采购',\n x: 400,\n y: 350,\n url: '/shipping/purchase'\n }, {\n id: 'picking',\n type: 'process',\n label: '拣货作业',\n x: 600,\n y: 450,\n url: '/shipping/picking'\n }, {\n id: 'quality',\n type: 'condition',\n label: '品质检验',\n x: 600,\n y: 550,\n url: '/shipping/quality'\n }, {\n id: 'rework',\n type: 'process',\n label: '返工处理',\n x: 750,\n y: 550,\n url: '/shipping/rework'\n }, {\n id: 'packing',\n type: 'process',\n label: '包装作业',\n x: 600,\n y: 650,\n url: '/shipping/packing'\n }, {\n id: 'shipping_assign',\n type: 'process',\n label: '物流安排',\n x: 600,\n y: 750,\n url: '/shipping/logistics'\n }, {\n id: 'pickup',\n type: 'process',\n label: '物流提货',\n x: 400,\n y: 750,\n url: '/shipping/pickup'\n }, {\n id: 'tracking',\n type: 'process',\n label: '在途跟踪',\n x: 400,\n y: 850,\n url: '/shipping/tracking'\n }, {\n id: 'delivery_confirm',\n type: 'condition',\n label: '签收确认',\n x: 400,\n y: 950,\n url: '/shipping/confirm'\n }, {\n id: 'issue_handling',\n type: 'process',\n label: '问题处理',\n x: 200,\n y: 950,\n url: '/shipping/issue'\n }, {\n id: 'close',\n type: 'process',\n label: '订单关闭',\n x: 600,\n y: 950,\n url: '/shipping/close'\n }, {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 1050,\n url: '/shipping/end'\n }]\n };\n },\n mounted: function mounted() {\n var _this = this;\n // 5秒后隐藏滚轮提示\n // this.userName = this.$route.query.userName;\n // console.log(\"userName:\" + this.userName);\n // this.$username = this.$route.query.userName;\n // console.log(\"username:\" + this.$username);\n this.fetchUserInfo();\n setTimeout(function () {\n _this.showWheelTip = false;\n }, 5000);\n },\n methods: {\n handleNodeClick: function handleNodeClick(node) {\n this.currentNode = node;\n //this.dialogVisible = true;\n window.open(node.url);\n },\n getNodeTypeName: function getNodeTypeName(type) {\n var types = {\n 'start': '开始节点',\n 'end': '结束节点',\n 'process': '流程节点',\n 'condition': '条件节点'\n };\n return types[type] || type;\n },\n zoomIn: function zoomIn() {\n if (this.scale < 2) {\n this.scale += 0.1;\n }\n },\n zoomOut: function zoomOut() {\n if (this.scale > 0.5) {\n this.scale -= 0.1;\n }\n },\n resetZoom: function resetZoom() {\n this.scale = 1;\n // 重置流程图位置\n if (this.$refs.processFlow) {\n this.$refs.processFlow.style.top = '0px';\n this.$refs.processFlow.style.left = '0px';\n }\n },\n handleWheel: function handleWheel(e) {\n // 阻止默认滚动行为\n e.preventDefault();\n\n // 确定滚动方向（向上滚动为放大，向下滚动为缩小）\n var delta = Math.sign(e.deltaY) * -0.1;\n\n // 计算新的缩放值\n var newScale = Math.max(0.5, Math.min(2, this.scale + delta));\n\n // 如果缩放值在允许范围内，就应用它\n if (newScale !== this.scale) {\n // 计算鼠标位置相对于流程图容器的位置\n var flowEl = this.$refs.processFlow;\n var rect = flowEl.getBoundingClientRect();\n\n // 计算鼠标在流程图上的坐标（考虑当前偏移和缩放）\n var mouseX = (e.clientX - rect.left) / this.scale;\n var mouseY = (e.clientY - rect.top) / this.scale;\n\n // 获取当前偏移\n var currentLeft = parseInt(flowEl.style.left || '0');\n var currentTop = parseInt(flowEl.style.top || '0');\n\n // 计算新的偏移，保持鼠标所指位置不变\n var scaleChange = newScale - this.scale;\n var newLeft = currentLeft - mouseX * scaleChange;\n var newTop = currentTop - mouseY * scaleChange;\n\n // 应用新的缩放和偏移\n this.scale = newScale;\n flowEl.style.left = \"\".concat(newLeft, \"px\");\n flowEl.style.top = \"\".concat(newTop, \"px\");\n }\n },\n startPanning: function startPanning(e) {\n // 如果是点击流程节点，则不启用平移\n if (e.target.closest('.flow-node')) {\n return;\n }\n this.panEnabled = true;\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n document.body.style.cursor = 'grabbing';\n },\n pan: function pan(e) {\n if (!this.panEnabled) return;\n var flowEl = this.$refs.processFlow;\n if (!flowEl) return;\n var dx = e.clientX - this.lastPosX;\n var dy = e.clientY - this.lastPosY;\n var currentTop = parseInt(flowEl.style.top || '0');\n var currentLeft = parseInt(flowEl.style.left || '0');\n flowEl.style.top = currentTop + dy + 'px';\n flowEl.style.left = currentLeft + dx + 'px';\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n },\n stopPanning: function stopPanning() {\n this.panEnabled = false;\n document.body.style.cursor = 'default';\n },\n handleEdit: function handleEdit() {\n this.$message({\n message: \"\\u7F16\\u8F91\\u8282\\u70B9: \".concat(this.currentNode.label),\n type: 'info'\n });\n this.dialogVisible = false;\n },\n handleViewDetails: function handleViewDetails() {\n this.$message({\n message: \"\\u67E5\\u770B\\u8282\\u70B9\\u8BE6\\u60C5: \".concat(this.currentNode.label),\n type: 'success'\n });\n this.dialogVisible = false;\n },\n getUserData: function getUserData() {\n var _this2 = this;\n return _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n var userId, userInfo;\n return _regeneratorRuntime().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n _this2.loading = true;\n _context.prev = 1;\n // 假设userId来自某个输入或路由参数\n userId = _this2.$route.query.userId; // 调用公共方法\n _context.next = 5;\n return fetchUserInfo(userId);\n case 5:\n userInfo = _context.sent;\n // 使用返回的数据\n _this2.userName = userInfo.userName;\n _this2.loading = false;\n _context.next = 14;\n break;\n case 10:\n _context.prev = 10;\n _context.t0 = _context[\"catch\"](1);\n // 错误处理\n _this2.error = _context.t0.message;\n _this2.loading = false;\n case 14:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[1, 10]]);\n }))();\n }\n }\n};","map":{"version":3,"names":["axios","fetchUserInfo","name","data","dialogVisible","currentNode","scale","panEnabled","lastPosX","lastPosY","showWheelTip","userName","loading","error","nodes","id","type","label","x","y","url","mounted","_this","setTimeout","methods","handleNodeClick","node","window","open","getNodeTypeName","types","zoomIn","zoomOut","resetZoom","$refs","processFlow","style","top","left","handleWheel","e","preventDefault","delta","Math","sign","deltaY","newScale","max","min","flowEl","rect","getBoundingClientRect","mouseX","clientX","mouseY","clientY","currentLeft","parseInt","currentTop","scaleChange","newLeft","newTop","concat","startPanning","target","closest","document","body","cursor","pan","dx","dy","stopPanning","handleEdit","$message","message","handleViewDetails","getUserData","_this2","_asyncToGenerator","_regeneratorRuntime","mark","_callee","userId","userInfo","wrap","_callee$","_context","prev","next","$route","query","sent","t0","stop"],"sources":["src/views/ShippingProcess.vue"],"sourcesContent":["<template>\n <div class=\"process-container\">\n <el-card class=\"process-intro\">\n <div class=\"intro-header\">\n <h2>发货业务流程</h2>\n <el-tag size=\"medium\" type=\"warning\">{{ this.userName }}</el-tag>\n </div>\n <div class=\"intro-content\">\n <div class=\"intro-description\">\n <p>管理产品从仓库出库到送达客户的完整过程，包括库存检查、包装、物流等环节，确保准确及时交付。</p>\n </div>\n <div class=\"intro-stats\">\n <div class=\"stat-item\">\n <div class=\"stat-value\">18</div>\n <div class=\"stat-label\">总步骤</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">4</div>\n <div class=\"stat-label\">已完成</div>\n </div>\n <div class=\"stat-item\">\n <div class=\"stat-value\">2天</div>\n <div class=\"stat-label\">平均耗时</div>\n </div>\n </div>\n </div>\n </el-card>\n\n <div class=\"process-flow-container\">\n <div class=\"zoom-controls\">\n <div class=\"zoom-btn\" @click=\"zoomIn\" title=\"放大\">\n <i class=\"el-icon-zoom-in\"></i>\n </div>\n <div class=\"zoom-btn\" @click=\"zoomOut\" title=\"缩小\">\n <i class=\"el-icon-zoom-out\"></i>\n </div>\n <div class=\"zoom-btn\" @click=\"resetZoom\" title=\"重置视图\">\n <i class=\"el-icon-refresh\"></i>\n </div>\n </div>\n\n <div class=\"zoom-tip\" v-if=\"scale !== 1\">\n <i class=\"el-icon-info-circle\"></i>\n <span>当前缩放: {{ Math.round(scale * 100) }}%</span>\n </div>\n\n <div class=\"wheel-tip\" v-if=\"showWheelTip\">\n <i class=\"el-icon-mouse\"></i>\n <span>使用鼠标滚轮缩放</span>\n </div>\n\n <div class=\"process-flow shipping-process\"\n ref=\"processFlow\"\n :style=\"{ transform: `scale(${scale})` }\"\n @mousedown=\"startPanning\"\n @mousemove=\"pan\"\n @mouseup=\"stopPanning\"\n @mouseleave=\"stopPanning\"\n @wheel.prevent=\"handleWheel\">\n <!-- 流程图节点 -->\n <div\n v-for=\"node in nodes\"\n :key=\"node.id\"\n class=\"flow-node\"\n :class=\"[node.type]\"\n :style=\"{\n left: `${node.x}px`,\n top: `${node.y}px`\n }\"\n @click=\"handleNodeClick(node)\">\n <span class=\"node-label\">{{ node.label }}</span>\n </div>\n\n <!-- SVG流程线 -->\n <svg class=\"process-lines\" width=\"100%\" height=\"100%\">\n <!-- 定义箭头标记 -->\n <defs>\n <marker\n id=\"arrow\"\n viewBox=\"0 0 10 10\"\n refX=\"5\"\n refY=\"5\"\n markerWidth=\"6\"\n markerHeight=\"6\"\n orient=\"auto-start-reverse\">\n <path d=\"M 0 0 L 10 5 L 0 10 z\"/>\n </marker>\n </defs>\n\n <!-- 主线流程 -->\n <path d=\"M400,80 L400,120\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M400,190 L400,250\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n\n <!-- 订单审核分支 -->\n <path d=\"M400,290 L600,290\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M400,290 L200,290\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M200,290 C150,290 150,350 200,350 L400,350\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n\n <!-- 库存检查分支 -->\n <path d=\"M600,290 L600,350\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M600,390 L600,450\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M600,390 L400,390\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M400,390 C350,390 350,450 400,450 L600,450\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n\n <!-- 质检分支 -->\n <path d=\"M600,490 L600,550\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M600,590 L750,590\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M750,590 C800,590 800,450 700,450\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M600,590 L600,650\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n\n <!-- 包装和物流 -->\n <path d=\"M600,690 L600,750\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M600,750 L400,750\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M400,790 L400,850\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n <path d=\"M400,890 L400,950\" class=\"process-line main\" marker-end=\"url(#arrow)\"/>\n\n <!-- 签收确认分支 -->\n <path d=\"M400,990 L200,990\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M400,990 L600,990\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M200,990 C150,990 150,900 200,900 L400,900\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n <path d=\"M600,990 C650,990 650,1050 450,1050\" class=\"process-line\" marker-end=\"url(#arrow)\"/>\n\n <!-- 添加文本标签 -->\n <text x=\"500\" y=\"280\" class=\"path-label\">通过</text>\n <text x=\"300\" y=\"280\" class=\"path-label\">需修改</text>\n <text x=\"500\" y=\"380\" class=\"path-label\">充足</text>\n <text x=\"350\" y=\"380\" class=\"path-label\">不足</text>\n <text x=\"670\" y=\"580\" class=\"path-label\">不通过</text>\n <text x=\"600\" y=\"620\" class=\"path-label\">通过</text>\n <text x=\"500\" y=\"730\" class=\"path-label\">安排物流</text>\n <text x=\"500\" y=\"990\" class=\"path-label\">正常</text>\n <text x=\"300\" y=\"990\" class=\"path-label\">异常</text>\n </svg>\n </div>\n </div>\n\n <!-- 节点详情对话框 -->\n <el-dialog\n :title=\"currentNode ? currentNode.label : ''\"\n :visible.sync=\"dialogVisible\"\n width=\"30%\">\n <div v-if=\"currentNode\" class=\"node-details\">\n <p><strong>节点ID:</strong> {{ currentNode.id }}</p>\n <p><strong>类型:</strong> {{ getNodeTypeName(currentNode.type) }}</p>\n <p><strong>URL:</strong> {{ currentNode.url }}</p>\n <div class=\"node-actions\">\n <el-button type=\"primary\" size=\"small\" @click=\"handleEdit\">编辑节点</el-button>\n <el-button type=\"success\" size=\"small\" @click=\"handleViewDetails\">查看详情</el-button>\n </div>\n </div>\n <span slot=\"footer\" class=\"dialog-footer\">\n <el-button @click=\"dialogVisible = false\">关闭</el-button>\n </span>\n </el-dialog>\n </div>\n</template>\n\n<script>\nimport axios from 'axios';\nimport {fetchUserInfo} from \"@/api/user\";\n\nexport default {\n name: 'ShippingProcess',\n data() {\n return {\n dialogVisible: false,\n currentNode: null,\n scale: 1,\n panEnabled: false,\n lastPosX: 0,\n lastPosY: 0,\n showWheelTip: true,\n userName: '',\n loading: true,\n error: null,\n nodes: [\n {\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: 'http://dlp.tztek.com:3002/OALink.html?LinkId=201&ddtab=true'\n },\n {\n id: 'order_receive',\n type: 'process',\n label: '接收订单',\n x: 400,\n y: 150,\n url: 'http://dlp.tztek.com:3002/OALink.html?LinkId=202&ddtab=true'\n },\n {\n id: 'order_verify',\n type: 'condition',\n label: '订单审核',\n x: 400,\n y: 250,\n url: '/shipping/verify'\n },\n {\n id: 'batch_assign',\n type: 'process',\n label: '批次分配',\n x: 600,\n y: 250,\n url: '/shipping/batch'\n },\n {\n id: 'order_modify',\n type: 'process',\n label: '订单修改',\n x: 200,\n y: 250,\n url: '/shipping/modify'\n },\n {\n id: 'stock_check',\n type: 'condition',\n label: '库存检查',\n x: 600,\n y: 350,\n url: '/shipping/stock'\n },\n {\n id: 'purchase',\n type: 'process',\n label: '紧急采购',\n x: 400,\n y: 350,\n url: '/shipping/purchase'\n },\n {\n id: 'picking',\n type: 'process',\n label: '拣货作业',\n x: 600,\n y: 450,\n url: '/shipping/picking'\n },\n {\n id: 'quality',\n type: 'condition',\n label: '品质检验',\n x: 600,\n y: 550,\n url: '/shipping/quality'\n },\n {\n id: 'rework',\n type: 'process',\n label: '返工处理',\n x: 750,\n y: 550,\n url: '/shipping/rework'\n },\n {\n id: 'packing',\n type: 'process',\n label: '包装作业',\n x: 600,\n y: 650,\n url: '/shipping/packing'\n },\n {\n id: 'shipping_assign',\n type: 'process',\n label: '物流安排',\n x: 600,\n y: 750,\n url: '/shipping/logistics'\n },\n {\n id: 'pickup',\n type: 'process',\n label: '物流提货',\n x: 400,\n y: 750,\n url: '/shipping/pickup'\n },\n {\n id: 'tracking',\n type: 'process',\n label: '在途跟踪',\n x: 400,\n y: 850,\n url: '/shipping/tracking'\n },\n {\n id: 'delivery_confirm',\n type: 'condition',\n label: '签收确认',\n x: 400,\n y: 950,\n url: '/shipping/confirm'\n },\n {\n id: 'issue_handling',\n type: 'process',\n label: '问题处理',\n x: 200,\n y: 950,\n url: '/shipping/issue'\n },\n {\n id: 'close',\n type: 'process',\n label: '订单关闭',\n x: 600,\n y: 950,\n url: '/shipping/close'\n },\n {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 1050,\n url: '/shipping/end'\n }\n ]\n }\n },\n mounted() {\n // 5秒后隐藏滚轮提示\n // this.userName = this.$route.query.userName;\n // console.log(\"userName:\" + this.userName);\n // this.$username = this.$route.query.userName;\n // console.log(\"username:\" + this.$username);\n this.fetchUserInfo();\n setTimeout(() => {\n this.showWheelTip = false;\n }, 5000);\n },\n methods: {\n handleNodeClick(node) {\n this.currentNode = node;\n //this.dialogVisible = true;\n window.open(node.url);\n },\n getNodeTypeName(type) {\n const types = {\n 'start': '开始节点',\n 'end': '结束节点',\n 'process': '流程节点',\n 'condition': '条件节点'\n };\n return types[type] || type;\n },\n zoomIn() {\n if (this.scale < 2) {\n this.scale += 0.1;\n }\n },\n zoomOut() {\n if (this.scale > 0.5) {\n this.scale -= 0.1;\n }\n },\n resetZoom() {\n this.scale = 1;\n // 重置流程图位置\n if (this.$refs.processFlow) {\n this.$refs.processFlow.style.top = '0px';\n this.$refs.processFlow.style.left = '0px';\n }\n },\n handleWheel(e) {\n // 阻止默认滚动行为\n e.preventDefault();\n\n // 确定滚动方向（向上滚动为放大，向下滚动为缩小）\n const delta = Math.sign(e.deltaY) * -0.1;\n\n // 计算新的缩放值\n const newScale = Math.max(0.5, Math.min(2, this.scale + delta));\n\n // 如果缩放值在允许范围内，就应用它\n if (newScale !== this.scale) {\n // 计算鼠标位置相对于流程图容器的位置\n const flowEl = this.$refs.processFlow;\n const rect = flowEl.getBoundingClientRect();\n\n // 计算鼠标在流程图上的坐标（考虑当前偏移和缩放）\n const mouseX = (e.clientX - rect.left) / this.scale;\n const mouseY = (e.clientY - rect.top) / this.scale;\n\n // 获取当前偏移\n const currentLeft = parseInt(flowEl.style.left || '0');\n const currentTop = parseInt(flowEl.style.top || '0');\n\n // 计算新的偏移，保持鼠标所指位置不变\n const scaleChange = newScale - this.scale;\n const newLeft = currentLeft - mouseX * scaleChange;\n const newTop = currentTop - mouseY * scaleChange;\n\n // 应用新的缩放和偏移\n this.scale = newScale;\n flowEl.style.left = `${newLeft}px`;\n flowEl.style.top = `${newTop}px`;\n }\n },\n startPanning(e) {\n // 如果是点击流程节点，则不启用平移\n if (e.target.closest('.flow-node')) {\n return;\n }\n\n this.panEnabled = true;\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n document.body.style.cursor = 'grabbing';\n },\n pan(e) {\n if (!this.panEnabled) return;\n\n const flowEl = this.$refs.processFlow;\n if (!flowEl) return;\n\n const dx = e.clientX - this.lastPosX;\n const dy = e.clientY - this.lastPosY;\n\n const currentTop = parseInt(flowEl.style.top || '0');\n const currentLeft = parseInt(flowEl.style.left || '0');\n\n flowEl.style.top = (currentTop + dy) + 'px';\n flowEl.style.left = (currentLeft + dx) + 'px';\n\n this.lastPosX = e.clientX;\n this.lastPosY = e.clientY;\n },\n stopPanning() {\n this.panEnabled = false;\n document.body.style.cursor = 'default';\n },\n handleEdit() {\n this.$message({\n message: `编辑节点: ${this.currentNode.label}`,\n type: 'info'\n });\n this.dialogVisible = false;\n },\n handleViewDetails() {\n this.$message({\n message: `查看节点详情: ${this.currentNode.label}`,\n type: 'success'\n });\n this.dialogVisible = false;\n },\n async getUserData() {\n this.loading = true;\n try {\n // 假设userId来自某个输入或路由参数\n const userId = this.$route.query.userId;\n\n // 调用公共方法\n const userInfo = await fetchUserInfo(userId);\n\n // 使用返回的数据\n this.userName = userInfo.userName;\n this.loading = false;\n } catch (error) {\n // 错误处理\n this.error = error.message;\n this.loading = false;\n }\n }\n }\n}\n</script>\n\n<style>\n.process-container {\n padding: 20px;\n}\n\n.process-intro {\n margin-bottom: 30px;\n}\n\n.intro-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n}\n\n.intro-header h2 {\n margin: 0;\n color: #303133;\n}\n\n.intro-content {\n display: flex;\n justify-content: space-between;\n}\n\n.intro-description {\n flex: 1;\n padding-right: 30px;\n}\n\n.intro-description p {\n line-height: 1.6;\n color: #606266;\n}\n\n.intro-stats {\n display: flex;\n gap: 30px;\n}\n\n.stat-item {\n text-align: center;\n}\n\n.stat-value {\n font-size: 24px;\n font-weight: bold;\n color: #E6A23C;\n}\n\n.stat-label {\n font-size: 14px;\n color: #909399;\n margin-top: 5px;\n}\n\n.process-flow-container {\n margin-top: 20px;\n border: 1px solid #ebeef5;\n border-radius: 4px;\n background-color: #fff;\n overflow: hidden;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n}\n\n.process-flow {\n position: relative;\n height: 1100px;\n padding: 20px;\n overflow: auto;\n transform-origin: top left;\n}\n\n.flow-node {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 120px;\n height: 60px;\n border-radius: 8px;\n background-color: #fff;\n border: 2px solid #E6A23C;\n cursor: pointer;\n transform: translate(-50%, -50%);\n transition: all 0.3s;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 10;\n}\n\n.flow-node:hover {\n box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);\n transform: translate(-50%, -50%) scale(1.05);\n}\n\n.flow-node.start {\n background-color: #fdf6ec;\n border-color: #E6A23C;\n}\n\n.flow-node.end {\n background-color: #fdf6ec;\n border-color: #E6A23C;\n}\n\n.flow-node.condition {\n border-color: #E6A23C;\n background-color: #fdf6ec;\n border-radius: 50%;\n width: 80px;\n height: 80px;\n}\n\n.node-label {\n font-size: 14px;\n text-align: center;\n padding: 8px;\n}\n\n.process-lines {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 5;\n}\n\n.process-line {\n stroke: #E6A23C;\n stroke-width: 2px;\n fill: none;\n}\n\n.process-line.main {\n stroke: #E6A23C;\n stroke-width: 2.5px;\n}\n\n/* Shipping process specific styles */\n.shipping-process .flow-node {\n border-color: #E6A23C;\n}\n\n.shipping-process .flow-node.condition {\n border-color: #E6A23C;\n background-color: #fdf6ec;\n}\n\n.shipping-process .process-line {\n stroke: #E6A23C;\n}\n\n.shipping-process .process-line.main {\n stroke: #E6A23C;\n stroke-width: 2.5px;\n}\n\n.path-label {\n fill: #E6A23C;\n font-size: 12px;\n font-weight: bold;\n}\n\n.node-details p {\n margin: 8px 0;\n}\n\n.node-actions {\n margin-top: 20px;\n display: flex;\n gap: 10px;\n}\n\n/* 缩放控制样式 */\n.zoom-controls {\n position: absolute;\n top: 20px;\n right: 20px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.zoom-btn {\n width: 36px;\n height: 36px;\n background-color: white;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n transition: all 0.3s;\n}\n\n.zoom-btn:hover {\n background-color: #f2f6fc;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);\n}\n\n.zoom-btn i {\n font-size: 18px;\n color: #E6A23C;\n}\n\n.zoom-tip {\n position: absolute;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n background-color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 5px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 100;\n}\n\n.zoom-tip i {\n color: #E6A23C;\n}\n\n.wheel-tip {\n position: absolute;\n top: 20px;\n left: 20px;\n background-color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 5px;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n z-index: 100;\n opacity: 0.8;\n transition: opacity 0.3s;\n}\n\n.wheel-tip:hover {\n opacity: 1;\n}\n\n.wheel-tip i {\n color: #E6A23C;\n}\n\n/* Shipping process specific zoom controls */\n.shipping-process .zoom-btn i {\n color: #E6A23C;\n}\n\n.shipping-process .zoom-tip i {\n color: #E6A23C;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n .process-flow {\n height: 900px;\n }\n\n .intro-content {\n flex-direction: column;\n }\n\n .intro-description {\n padding-right: 0;\n margin-bottom: 20px;\n }\n\n .flow-node {\n width: 100px;\n height: 50px;\n }\n\n .flow-node.condition {\n width: 70px;\n height: 70px;\n }\n\n .node-label {\n font-size: 12px;\n }\n\n .zoom-controls {\n bottom: 20px;\n right: 20px;\n top: auto;\n }\n\n .zoom-btn {\n width: 32px;\n height: 32px;\n }\n\n .zoom-btn i {\n font-size: 16px;\n }\n\n .zoom-tip {\n bottom: 20px;\n top: auto;\n font-size: 12px;\n }\n\n .wheel-tip {\n bottom: 20px;\n left: 20px;\n top: auto;\n font-size: 12px;\n }\n}\n</style> "],"mappings":";;;;;AA8JA,OAAAA,KAAA;AACA,SAAAC,aAAA;AAEA;EACAC,IAAA;EACAC,IAAA,WAAAA,KAAA;IACA;MACAC,aAAA;MACAC,WAAA;MACAC,KAAA;MACAC,UAAA;MACAC,QAAA;MACAC,QAAA;MACAC,YAAA;MACAC,QAAA;MACAC,OAAA;MACAC,KAAA;MACAC,KAAA,GACA;QACAC,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,CAAA;QACAC,CAAA;QACAC,GAAA;MACA,GACA;QACAL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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
