| 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.array.filter.js\";\nimport \"core-js/modules/es.iterator.constructor.js\";\nimport \"core-js/modules/es.iterator.filter.js\";\nimport \"core-js/modules/es.math.sign.js\";\nimport \"core-js/modules/es.object.to-string.js\";\nimport \"core-js/modules/es.parse-int.js\";\nimport \"core-js/modules/web.timers.js\";\nimport { fetchUserInfo } from \"@/api/user\";\nexport default {\n name: 'ProjectAffairsBusiness',\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 nodes: [{\n id: 'start',\n type: 'start',\n label: '项目立项/变更事务',\n x: 100,\n y: 330,\n url: '/process/start'\n }, {\n id: 'interview',\n type: 'condition',\n label: '项目立项流程',\n x: 350,\n y: 330,\n url: '/interview'\n }, {\n id: 'pass',\n type: 'process',\n label: '标准项目立项',\n x: 600,\n y: 230,\n url: '/offer'\n }, {\n id: 'prepare',\n type: 'process',\n label: '非标项目立项',\n x: 600,\n y: 330,\n url: '/prepare'\n }, {\n id: 'verify',\n type: 'process',\n label: 'CBB项目立项',\n x: 600,\n y: 430,\n url: '/verify'\n }, {\n id: 'onboard',\n type: 'condition',\n label: '项目变更流程',\n x: 850,\n y: 330,\n url: '/onboard'\n }, {\n id: 'reject',\n type: 'process',\n label: 'TPM权限变更',\n x: 1100,\n y: 50,\n url: '/reject'\n }, {\n id: 'archive',\n type: 'process',\n label: '产品负责人权限变更',\n x: 1100,\n y: 130,\n url: '/archive'\n }, {\n id: 'archive1',\n type: 'process',\n label: '项目归属变更',\n x: 1100,\n y: 210,\n url: '/archive'\n }, {\n id: 'archive2',\n type: 'process',\n label: '项目预算变更',\n x: 1100,\n y: 290,\n url: '/archive'\n }, {\n id: 'archive3',\n type: 'process',\n label: '项目重启',\n x: 1100,\n y: 370,\n url: '/archive'\n }, {\n id: 'archive4',\n type: 'process',\n label: '项目关闭',\n x: 1100,\n y: 450,\n url: '/archive'\n }, {\n id: 'archive5',\n type: 'process',\n label: '项目暂停',\n x: 1100,\n y: 530,\n url: '/archive'\n }, {\n id: 'archive6',\n type: 'process',\n label: '取消暂停',\n x: 1100,\n y: 610,\n url: '/archive'\n }\n // {\n // id: 'end',\n // type: 'end',\n // label: '结束',\n // x: 400,\n // y: 550,\n // url: '/process/end'\n // }\n ]\n };\n },\n computed: {\n branchNodes: function branchNodes() {\n // 只返回项目变更流程后的分支节点\n return this.nodes.filter(function (node) {\n return node.id !== 'start' && node.id !== 'interview' && node.id !== 'pass' && node.id !== 'prepare' && node.id !== 'verify' && node.id !== 'onboard';\n });\n }\n },\n mounted: function mounted() {\n var _this = this;\n this.getUserData();\n // 5秒后隐藏滚轮提示\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 },\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 debugger;\n // 使用返回的数据\n console.log(\"userName:\" + userInfo.username);\n _this2.userName = userInfo.username;\n _this2.loading = false;\n _context.next = 16;\n break;\n case 12:\n _context.prev = 12;\n _context.t0 = _context[\"catch\"](1);\n // 错误处理\n _this2.error = _context.t0.message;\n _this2.loading = false;\n case 16:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[1, 12]]);\n }))();\n }\n }\n};","map":{"version":3,"names":["fetchUserInfo","name","data","dialogVisible","currentNode","scale","panEnabled","lastPosX","lastPosY","showWheelTip","userName","nodes","id","type","label","x","y","url","computed","branchNodes","filter","node","mounted","_this","getUserData","setTimeout","methods","handleNodeClick","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","_this2","_asyncToGenerator","_regeneratorRuntime","mark","_callee","userId","userInfo","wrap","_callee$","_context","prev","next","loading","$route","query","sent","console","log","username","t0","error","stop"],"sources":["src/views/ProjectAffairsBusiness.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=\"primary\">{{ 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\">9</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\">15天</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 employee-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\n d=\"M 150,330 L 300,330\"\n class=\"process-line main\"\n marker-end=\"url(#arrow)\" />\n\n <!-- 项目立项流程到标准项目立项（贝塞尔曲线） -->\n <path d=\"M350,330\n C450,330 500,250 600,230\"\n class=\"process-line\"\n stroke=\"black\"\n stroke-width=\"2\"\n fill=\"none\"\n marker-end=\"url(#arrow)\"/>\n\n <!-- 项目立项流程到非标项目立项（贝塞尔曲线） -->\n <path d=\"M350,330\n C450,330 500,330 600,330\"\n class=\"process-line\"\n stroke=\"black\"\n stroke-width=\"2\"\n fill=\"none\"\n marker-end=\"url(#arrow)\"/>\n\n <!-- 项目立项流程到CBB项目立项（贝塞尔曲线） -->\n <path d=\"M350,330\n C450,330 500,410 600,430\"\n class=\"process-line\"\n stroke=\"black\"\n stroke-width=\"2\"\n fill=\"none\"\n marker-end=\"url(#arrow)\"/>\n <!-- 非标项目立项连接项目变更流程 -->\n <path\n d=\"M 650,330 L 800,330\"\n class=\"process-line main\"\n marker-end=\"url(#arrow)\" />\n\n <!-- 项目变更流程到各分支节点（贝塞尔曲线） -->\n <path v-for=\"(node) in branchNodes\"\n :key=\"node.id\"\n :d=\"`M750,330 C900,330 950,${node.y} 1100,${node.y}`\"\n class=\"process-line\"\n stroke=\"black\"\n stroke-width=\"2\"\n fill=\"none\"\n marker-end=\"url(#arrow)\"/>\n\n <!-- 添加文本标签 -->\n <text x=\"550\" y=\"190\" class=\"path-label\">事业部副总及以上</text>\n <text x=\"570\" y=\"290\" class=\"path-label\">事业部商务</text>\n <text x=\"550\" y=\"390\" 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 {fetchUserInfo} from \"@/api/user\";\n\nexport default {\n name: 'ProjectAffairsBusiness',\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 nodes: [\n {\n id: 'start',\n type: 'start',\n label: '项目立项/变更事务',\n x: 100,\n y: 330,\n url: '/process/start'\n },\n {\n id: 'interview',\n type: 'condition',\n label: '项目立项流程',\n x: 350,\n y: 330,\n url: '/interview'\n },\n {\n id: 'pass',\n type: 'process',\n label: '标准项目立项',\n x: 600,\n y: 230,\n url: '/offer'\n },\n {\n id: 'prepare',\n type: 'process',\n label: '非标项目立项',\n x: 600,\n y: 330,\n url: '/prepare'\n },\n {\n id: 'verify',\n type: 'process',\n label: 'CBB项目立项',\n x: 600,\n y: 430,\n url: '/verify'\n },\n {\n id: 'onboard',\n type: 'condition',\n label: '项目变更流程',\n x: 850,\n y: 330,\n url: '/onboard'\n },\n {\n id: 'reject',\n type: 'process',\n label: 'TPM权限变更',\n x: 1100,\n y: 50,\n url: '/reject'\n },\n {\n id: 'archive',\n type: 'process',\n label: '产品负责人权限变更',\n x: 1100,\n y: 130,\n url: '/archive'\n },\n {\n id: 'archive1',\n type: 'process',\n label: '项目归属变更',\n x: 1100,\n y: 210,\n url: '/archive'\n },\n {\n id: 'archive2',\n type: 'process',\n label: '项目预算变更',\n x: 1100,\n y: 290,\n url: '/archive'\n },\n {\n id: 'archive3',\n type: 'process',\n label: '项目重启',\n x: 1100,\n y: 370,\n url: '/archive'\n },\n {\n id: 'archive4',\n type: 'process',\n label: '项目关闭',\n x: 1100,\n y: 450,\n url: '/archive'\n },\n {\n id: 'archive5',\n type: 'process',\n label: '项目暂停',\n x: 1100,\n y: 530,\n url: '/archive'\n },\n {\n id: 'archive6',\n type: 'process',\n label: '取消暂停',\n x: 1100,\n y: 610,\n url: '/archive'\n }\n // {\n // id: 'end',\n // type: 'end',\n // label: '结束',\n // x: 400,\n // y: 550,\n // url: '/process/end'\n // }\n ]\n }\n },\n computed: {\n branchNodes() {\n // 只返回项目变更流程后的分支节点\n return this.nodes.filter(node =>\n node.id !== 'start' &&\n node.id !== 'interview' &&\n node.id !== 'pass' &&\n node.id !== 'prepare' &&\n node.id !== 'verify' &&\n node.id !== 'onboard'\n );\n }\n },\n mounted() {\n this.getUserData();\n // 5秒后隐藏滚轮提示\n setTimeout(() => {\n this.showWheelTip = false;\n }, 5000);\n },\n methods: {\n handleNodeClick(node) {\n this.currentNode = node;\n this.dialogVisible = true;\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 const userInfo = await fetchUserInfo(userId);\n debugger;\n // 使用返回的数据\n console.log(\"userName:\" + userInfo.username)\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: #409EFF;\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: 900px;\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 #409EFF;\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: #ecf5ff;\n border-color: #409EFF;\n}\n\n.flow-node.end {\n background-color: #ecf5ff;\n border-color: #409EFF;\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: #DCDFE6;\n stroke-width: 2px;\n fill: none;\n}\n\n.process-line.main {\n stroke: #409EFF;\n stroke-width: 2.5px;\n}\n\n/* Employee process specific styles */\n.employee-process .flow-node {\n border-color: #409EFF;\n}\n\n.employee-process .flow-node.condition {\n border-color: #E6A23C;\n background-color: #fdf6ec;\n}\n\n.employee-process .process-line {\n stroke: #409EFF;\n}\n\n.employee-process .process-line.main {\n stroke: #409EFF;\n stroke-width: 2.5px;\n}\n\n.path-label {\n fill: #409EFF;\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: #409EFF;\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: #409EFF;\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: #409EFF;\n}\n\n/* Employee process specific zoom controls */\n.employee-process .zoom-btn i {\n color: #409EFF;\n}\n\n.employee-process .zoom-tip i {\n color: #409EFF;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n .process-flow {\n height: 700px;\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>\n"],"mappings":";;;;;;;;;AAuKA,SAAAA,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,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,EAAA;QACAC,IAAA;QACAC,KAAA;QACAC,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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
