4d4a02196d93705232f2c3a7336de7a3aa78fc327137da4a84d28213e12805c7.json 48 KB

1
  1. {"ast":null,"code":"import \"core-js/modules/es.array.concat.js\";\nimport \"core-js/modules/es.array.find.js\";\nimport \"core-js/modules/es.array.push.js\";\nimport \"core-js/modules/es.function.name.js\";\nimport \"core-js/modules/es.iterator.constructor.js\";\nimport \"core-js/modules/es.iterator.find.js\";\nimport \"core-js/modules/es.object.to-string.js\";\nimport \"core-js/modules/es.string.starts-with.js\";\nimport Hammer from 'hammerjs';\nexport default {\n name: 'EmployeeProcess',\n data: function data() {\n return {\n processType: 'employee',\n currentType: 'employee-process',\n scale: 1,\n panEnabled: false,\n lastPosX: 0,\n lastPosY: 0,\n processOptions: [{\n value: 'employee',\n label: '员工入职流程'\n }, {\n value: 'sales',\n label: '销售订单流程'\n }, {\n value: 'shipping',\n label: '发货业务流程'\n }],\n processNodes: {\n employee: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/process/start'\n }, {\n id: 'interview',\n type: 'condition',\n label: '面试',\n x: 400,\n y: 150,\n url: '/interview'\n }, {\n id: 'pass',\n type: 'process',\n label: '发录用通知书',\n x: 600,\n y: 150,\n url: '/offer'\n }, {\n id: 'prepare',\n type: 'process',\n label: '准备入职材料',\n x: 600,\n y: 250,\n url: '/prepare'\n }, {\n id: 'verify',\n type: 'condition',\n label: '材料核实',\n x: 600,\n y: 350,\n url: '/verify'\n }, {\n id: 'onboard',\n type: 'process',\n label: '办理入职',\n x: 600,\n y: 450,\n url: '/onboard'\n }, {\n id: 'reject',\n type: 'process',\n label: '发送拒绝通知',\n x: 200,\n y: 250,\n url: '/reject'\n }, {\n id: 'archive',\n type: 'process',\n label: '归档简历',\n x: 200,\n y: 350,\n url: '/archive'\n }, {\n id: 'end',\n type: 'end',\n label: '结束',\n x: 400,\n y: 550,\n url: '/process/end'\n }],\n sales: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/sales/start'\n }, {\n id: 'inquiry',\n type: 'process',\n label: '客户询价',\n x: 400,\n y: 150,\n url: '/sales/inquiry'\n }, {\n id: 'need-analysis',\n type: 'process',\n label: '需求分析',\n x: 400,\n y: 250,\n url: '/sales/analysis'\n }, {\n id: 'solution',\n type: 'process',\n label: '方案制定',\n x: 400,\n y: 350,\n url: '/sales/solution'\n }, {\n id: 'quotation',\n type: 'process',\n label: '报价单生成',\n x: 400,\n y: 450,\n url: '/sales/quotation'\n }, {\n id: 'negotiation',\n type: 'process',\n label: '商务谈判',\n x: 400,\n y: 550,\n url: '/sales/negotiation'\n }, {\n id: 'decision',\n type: 'condition',\n label: '客户决策',\n x: 400,\n y: 650,\n url: '/sales/decision'\n }, {\n id: 'contract',\n type: 'process',\n label: '签订合同',\n x: 600,\n y: 650,\n url: '/sales/contract'\n }, {\n id: 'reject-reason',\n type: 'process',\n label: '原因分析',\n x: 200,\n y: 650,\n url: '/sales/reject'\n }, {\n id: 'followup',\n type: 'process',\n label: '持续跟进',\n x: 200,\n y: 750,\n url: '/sales/followup'\n }, {\n id: 'production',\n type: 'process',\n label: '生产准备',\n x: 600,\n y: 750,\n url: '/sales/production'\n }, {\n id: 'end-success',\n type: 'end',\n label: '流程完成',\n x: 400,\n y: 850,\n url: '/sales/completed'\n }],\n shipping: [{\n id: 'start',\n type: 'start',\n label: '开始',\n x: 400,\n y: 50,\n url: '/shipping/start'\n }, {\n id: 'order-receive',\n type: 'process',\n label: '接收订单',\n x: 400,\n y: 150,\n url: '/shipping/receive'\n }, {\n id: 'order-review',\n type: 'condition',\n label: '订单审核',\n x: 400,\n y: 250,\n url: '/shipping/review'\n }, {\n id: 'order-problem',\n type: 'process',\n label: '问题处理',\n x: 200,\n y: 250,\n url: '/shipping/problem'\n }, {\n id: 'batch-assign',\n type: 'process',\n label: '批次分配',\n x: 400,\n y: 350,\n url: '/shipping/batch'\n }, {\n id: 'inventory-check',\n type: 'condition',\n label: '库存检查',\n x: 400,\n y: 450,\n url: '/shipping/inventory'\n }, {\n id: 'replenishment',\n type: 'process',\n label: '补货流程',\n x: 600,\n y: 450,\n url: '/shipping/replenishment'\n }, {\n id: 'pick-pack',\n type: 'process',\n label: '拣货包装',\n x: 400,\n y: 550,\n url: '/shipping/pick'\n }, {\n id: 'quality-check',\n type: 'condition',\n label: '质量检查',\n x: 400,\n y: 650,\n url: '/shipping/quality'\n }, {\n id: 'rework',\n type: 'process',\n label: '返工处理',\n x: 200,\n y: 650,\n url: '/shipping/rework'\n }, {\n id: 'shipping-arrange',\n type: 'process',\n label: '物流安排',\n x: 400,\n y: 750,\n url: '/shipping/arrange'\n }, {\n id: 'invoice',\n type: 'process',\n label: '开具发票',\n x: 600,\n y: 750,\n url: '/shipping/invoice'\n }, {\n id: 'end',\n type: 'end',\n label: '发货完成',\n x: 400,\n y: 850,\n url: '/shipping/complete'\n }]\n },\n nodes: [],\n isMobile: false\n };\n },\n methods: {\n // 绘制流程线\n drawFlowLines: function drawFlowLines() {\n var withTransform = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var canvas = this.$refs.flowCanvas;\n if (!canvas) return;\n var ctx = canvas.getContext('2d');\n if (!withTransform) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n\n // 绘制一条红色测试线\n ctx.lineWidth = 5;\n ctx.strokeStyle = 'red';\n ctx.beginPath();\n ctx.moveTo(100, 100);\n ctx.lineTo(700, 100);\n ctx.stroke();\n\n // 添加文本\n ctx.font = '16px Arial';\n ctx.fillStyle = 'red';\n ctx.textAlign = 'center';\n ctx.fillText('测试线条 - 应该可见', 400, 80);\n\n // 根据当前流程类型绘制不同的线条\n switch (this.currentType) {\n case 'employee-process':\n this.drawEmployeeFlow(ctx);\n break;\n case 'sales-process':\n this.drawSalesFlow(ctx);\n break;\n case 'shipping-process':\n this.drawShippingFlow(ctx);\n break;\n }\n },\n // 绘制员工入职流程线\n drawEmployeeFlow: function drawEmployeeFlow(ctx) {\n ctx.lineWidth = 3;\n ctx.strokeStyle = '#409EFF';\n\n // 绘制简单直线\n ctx.beginPath();\n ctx.moveTo(400, 150);\n ctx.lineTo(400, 250);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(400, 150);\n ctx.lineTo(600, 150);\n ctx.stroke();\n },\n // 绘制销售订单流程线\n drawSalesFlow: function drawSalesFlow(ctx) {\n ctx.lineWidth = 3;\n ctx.strokeStyle = '#67C23A';\n\n // 绘制简单直线\n ctx.beginPath();\n ctx.moveTo(400, 150);\n ctx.lineTo(400, 350);\n ctx.stroke();\n },\n // 绘制物流发货流程线\n drawShippingFlow: function drawShippingFlow(ctx) {\n ctx.lineWidth = 3;\n ctx.strokeStyle = '#E6A23C';\n\n // 绘制简单直线\n ctx.beginPath();\n ctx.moveTo(300, 150);\n ctx.lineTo(500, 350);\n ctx.stroke();\n },\n handleNodeClick: function handleNodeClick(nodeId) {\n var _this = this;\n var node = this.nodes.find(function (n) {\n return n.id === nodeId;\n });\n if (node && node.url) {\n if (node.url.startsWith('http')) {\n window.open(node.url, '_blank');\n } else {\n this.$router.push(node.url)[\"catch\"](function (err) {\n if (err.name !== 'NavigationDuplicated') {\n _this.$message({\n type: 'info',\n message: \"\\u6B63\\u5728\\u8DF3\\u8F6C\\u5230\".concat(node.label, \"\\u9875\\u9762...\")\n });\n }\n });\n }\n }\n },\n checkDevice: function checkDevice() {\n this.isMobile = window.innerWidth < 768;\n if (this.isMobile) {\n this.scale = 0.6; // 移动端默认缩小到60%\n } else {\n this.scale = 1;\n }\n this.applyScale();\n },\n applyScale: function applyScale() {\n var el = this.$refs.processFlow;\n el.style.transform = \"translate(\".concat(this.lastPosX, \"px, \").concat(this.lastPosY, \"px) scale(\").concat(this.scale, \")\");\n\n // Canvas不能使用CSS缩放,需要重绘\n var canvas = this.$refs.flowCanvas;\n if (canvas) {\n var ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.save();\n ctx.translate(this.lastPosX, this.lastPosY);\n ctx.scale(this.scale, this.scale);\n this.drawFlowLines(true); // 传递true表示已应用变换\n ctx.restore();\n }\n },\n handleResize: function handleResize() {\n this.checkDevice();\n },\n zoomIn: function zoomIn() {\n this.scale += 0.1;\n this.applyScale();\n },\n zoomOut: function zoomOut() {\n if (this.scale > 0.3) {\n this.scale -= 0.1;\n this.applyScale();\n }\n },\n resetZoom: function resetZoom() {\n this.scale = 1;\n this.$refs.processFlow.style.transform = 'translate(0px, 0px) scale(1)';\n this.lastPosX = 0;\n this.lastPosY = 0;\n },\n changeProcessType: function changeProcessType(type) {\n var _this2 = this;\n this.processType = type;\n switch (type) {\n case 'employee':\n this.currentType = 'employee-process';\n break;\n case 'sales':\n this.currentType = 'sales-process';\n break;\n case 'shipping':\n this.currentType = 'shipping-process';\n break;\n default:\n this.currentType = 'employee-process';\n }\n\n // 确保DOM更新后再应用缩放\n this.$nextTick(function () {\n _this2.resetZoom();\n _this2.applyScale();\n // 重绘流程线\n _this2.drawFlowLines();\n });\n },\n initHammer: function initHammer() {\n var _this3 = this;\n var el = this.$refs.processFlow;\n var hammertime = new Hammer(el);\n hammertime.get('pinch').set({\n enable: true\n });\n hammertime.get('pan').set({\n direction: Hammer.DIRECTION_ALL\n });\n hammertime.on('pinch', function (e) {\n var newScale = Math.max(0.3, Math.min(3, _this3.scale * e.scale));\n if (Math.abs(newScale - _this3.scale) > 0.01) {\n _this3.scale = newScale;\n _this3.applyScale();\n }\n });\n hammertime.on('pan', function (e) {\n if (_this3.panEnabled) {\n var deltaX = e.deltaX;\n var deltaY = e.deltaY;\n el.style.transform = \"translate(\".concat(_this3.lastPosX + deltaX, \"px, \").concat(_this3.lastPosY + deltaY, \"px) scale(\").concat(_this3.scale, \")\");\n if (e.isFinal) {\n _this3.lastPosX += deltaX;\n _this3.lastPosY += deltaY;\n }\n }\n });\n\n // 双击事件处理\n hammertime.on('doubletap', function () {\n _this3.resetZoom();\n });\n\n // 启用/禁用平移\n el.addEventListener('mousedown', function () {\n _this3.panEnabled = true;\n });\n document.addEventListener('mouseup', function () {\n _this3.panEnabled = false;\n });\n\n // 移动端触摸事件\n el.addEventListener('touchstart', function () {\n _this3.panEnabled = true;\n });\n document.addEventListener('touchend', function () {\n _this3.panEnabled = false;\n });\n }\n },\n mounted: function mounted() {\n var _this4 = this;\n // 确保初始化流程类型正确\n this.processType = 'employee';\n this.currentType = 'employee-process';\n this.$nextTick(function () {\n _this4.initHammer();\n // 绘制流程线\n _this4.drawFlowLines();\n });\n this.checkDevice();\n window.addEventListener('resize', this.handleResize);\n },\n beforeDestroy: function beforeDestroy() {\n window.removeEventListener('resize', this.handleResize);\n },\n computed: {\n displayNodes: function displayNodes() {\n return this.processNodes[this.processType];\n return this.processNodes[this.currentType];\n }\n }\n};","map":{"version":3,"names":["Hammer","name","data","processType","currentType","scale","panEnabled","lastPosX","lastPosY","processOptions","value","label","processNodes","employee","id","type","x","y","url","sales","shipping","nodes","isMobile","methods","drawFlowLines","withTransform","arguments","length","undefined","canvas","$refs","flowCanvas","ctx","getContext","clearRect","width","height","lineWidth","strokeStyle","beginPath","moveTo","lineTo","stroke","font","fillStyle","textAlign","fillText","drawEmployeeFlow","drawSalesFlow","drawShippingFlow","handleNodeClick","nodeId","_this","node","find","n","startsWith","window","open","$router","push","err","$message","message","concat","checkDevice","innerWidth","applyScale","el","processFlow","style","transform","save","translate","restore","handleResize","zoomIn","zoomOut","resetZoom","changeProcessType","_this2","$nextTick","initHammer","_this3","hammertime","get","set","enable","direction","DIRECTION_ALL","on","e","newScale","Math","max","min","abs","deltaX","deltaY","isFinal","addEventListener","document","mounted","_this4","beforeDestroy","removeEventListener","computed","displayNodes"],"sources":["src/views/EmployeeProcess.vue"],"sourcesContent":["<template>\n <div class=\"process-container\">\n <el-card class=\"process-intro\">\n <div slot=\"header\" class=\"clearfix\">\n <span>业务流程图</span>\n <el-select v-model=\"processType\" placeholder=\"请选择流程类型\" size=\"mini\" style=\"float: right; width: 140px\" @change=\"changeProcessType\">\n <el-option\n v-for=\"item in processOptions\"\n :key=\"item.value\"\n :label=\"item.label\"\n :value=\"item.value\">\n </el-option>\n </el-select>\n </div>\n <div class=\"intro-header\">\n <h2>员工入职业务流程</h2>\n <el-tag size=\"medium\" type=\"success\">正常运行</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\">7</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\" :class=\"currentType\" ref=\"processFlow\">\n <!-- 调试信息 -->\n <div class=\"debug-info\" style=\"position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.7); color: white; padding: 5px; z-index: 100; font-size: 12px;\">\n 当前流程类型: {{ currentType }}\n </div>\n \n <!-- 使用Canvas代替SVG绘制流程线 -->\n <canvas ref=\"flowCanvas\" width=\"800\" height=\"800\" style=\"position: absolute; top: 0; left: 0; z-index: 5;\"></canvas>\n\n <!-- 节点 -->\n <div \n v-for=\"(node, index) in displayNodes\"\n :key=\"index\"\n :id=\"node.id\" \n :class=\"['flow-node', node.type]\" \n :style=\"{\n left: `${node.x - 60}px`,\n top: `${node.y - 30}px`,\n width: node.width ? `${node.width}px` : '120px',\n height: node.height ? `${node.height}px` : '60px'\n }\"\n @click=\"handleNodeClick(node.id)\"\n >\n <span class=\"node-label\">{{ node.label }}</span>\n </div>\n </div>\n \n <!-- 缩放控制按钮 -->\n <div class=\"zoom-controls\">\n <div class=\"zoom-btn\" @click=\"zoomIn\"><i class=\"el-icon-plus\"></i></div>\n <div class=\"zoom-btn\" @click=\"zoomOut\"><i class=\"el-icon-minus\"></i></div>\n <div class=\"zoom-btn\" @click=\"resetZoom\"><i class=\"el-icon-refresh\"></i></div>\n </div>\n </div>\n</template>\n\n<script>\nimport Hammer from 'hammerjs';\n\nexport default {\n name: 'EmployeeProcess',\n data() {\n return {\n processType: 'employee',\n currentType: 'employee-process',\n scale: 1,\n panEnabled: false,\n lastPosX: 0,\n lastPosY: 0,\n processOptions: [\n { value: 'employee', label: '员工入职流程' },\n { value: 'sales', label: '销售订单流程' },\n { value: 'shipping', label: '发货业务流程' }\n ],\n processNodes: {\n employee: [\n { \n id: 'start', \n type: 'start', \n label: '开始', \n x: 400, \n y: 50,\n url: '/process/start'\n },\n { \n id: 'interview', \n type: 'condition', \n label: '面试', \n x: 400, \n y: 150,\n url: '/interview'\n },\n { \n id: 'pass', \n type: 'process', \n label: '发录用通知书', \n x: 600, \n y: 150,\n url: '/offer'\n },\n { \n id: 'prepare', \n type: 'process', \n label: '准备入职材料', \n x: 600, \n y: 250,\n url: '/prepare'\n },\n { \n id: 'verify', \n type: 'condition', \n label: '材料核实', \n x: 600, \n y: 350,\n url: '/verify'\n },\n { \n id: 'onboard', \n type: 'process', \n label: '办理入职', \n x: 600, \n y: 450,\n url: '/onboard'\n },\n { \n id: 'reject', \n type: 'process', \n label: '发送拒绝通知', \n x: 200, \n y: 250,\n url: '/reject'\n },\n { \n id: 'archive', \n type: 'process', \n label: '归档简历', \n x: 200, \n y: 350,\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 sales: [\n { \n id: 'start', \n type: 'start', \n label: '开始', \n x: 400, \n y: 50,\n url: '/sales/start'\n },\n { \n id: 'inquiry', \n type: 'process', \n label: '客户询价', \n x: 400, \n y: 150,\n url: '/sales/inquiry'\n },\n { \n id: 'need-analysis', \n type: 'process', \n label: '需求分析', \n x: 400, \n y: 250,\n url: '/sales/analysis'\n },\n { \n id: 'solution', \n type: 'process', \n label: '方案制定', \n x: 400, \n y: 350,\n url: '/sales/solution'\n },\n { \n id: 'quotation', \n type: 'process', \n label: '报价单生成', \n x: 400, \n y: 450,\n url: '/sales/quotation'\n },\n { \n id: 'negotiation', \n type: 'process', \n label: '商务谈判', \n x: 400, \n y: 550,\n url: '/sales/negotiation'\n },\n { \n id: 'decision', \n type: 'condition', \n label: '客户决策', \n x: 400, \n y: 650,\n url: '/sales/decision'\n },\n { \n id: 'contract', \n type: 'process', \n label: '签订合同', \n x: 600, \n y: 650,\n url: '/sales/contract'\n },\n { \n id: 'reject-reason', \n type: 'process', \n label: '原因分析', \n x: 200, \n y: 650,\n url: '/sales/reject'\n },\n { \n id: 'followup', \n type: 'process', \n label: '持续跟进', \n x: 200, \n y: 750,\n url: '/sales/followup'\n },\n { \n id: 'production', \n type: 'process', \n label: '生产准备', \n x: 600, \n y: 750,\n url: '/sales/production'\n },\n { \n id: 'end-success', \n type: 'end', \n label: '流程完成', \n x: 400, \n y: 850,\n url: '/sales/completed'\n }\n ],\n shipping: [\n { \n id: 'start', \n type: 'start', \n label: '开始', \n x: 400, \n y: 50,\n url: '/shipping/start'\n },\n { \n id: 'order-receive', \n type: 'process', \n label: '接收订单', \n x: 400, \n y: 150,\n url: '/shipping/receive'\n },\n { \n id: 'order-review', \n type: 'condition', \n label: '订单审核', \n x: 400, \n y: 250,\n url: '/shipping/review'\n },\n { \n id: 'order-problem', \n type: 'process', \n label: '问题处理', \n x: 200, \n y: 250,\n url: '/shipping/problem'\n },\n { \n id: 'batch-assign', \n type: 'process', \n label: '批次分配', \n x: 400, \n y: 350,\n url: '/shipping/batch'\n },\n { \n id: 'inventory-check', \n type: 'condition', \n label: '库存检查', \n x: 400, \n y: 450,\n url: '/shipping/inventory'\n },\n { \n id: 'replenishment', \n type: 'process', \n label: '补货流程', \n x: 600, \n y: 450,\n url: '/shipping/replenishment'\n },\n { \n id: 'pick-pack', \n type: 'process', \n label: '拣货包装', \n x: 400, \n y: 550,\n url: '/shipping/pick'\n },\n { \n id: 'quality-check', \n type: 'condition', \n label: '质量检查', \n x: 400, \n y: 650,\n url: '/shipping/quality'\n },\n { \n id: 'rework', \n type: 'process', \n label: '返工处理', \n x: 200, \n y: 650,\n url: '/shipping/rework'\n },\n { \n id: 'shipping-arrange', \n type: 'process', \n label: '物流安排', \n x: 400, \n y: 750,\n url: '/shipping/arrange'\n },\n { \n id: 'invoice', \n type: 'process', \n label: '开具发票', \n x: 600, \n y: 750,\n url: '/shipping/invoice'\n },\n { \n id: 'end', \n type: 'end', \n label: '发货完成', \n x: 400, \n y: 850,\n url: '/shipping/complete'\n }\n ]\n },\n nodes: [],\n isMobile: false\n }\n },\n methods: {\n // 绘制流程线\n drawFlowLines(withTransform = false) {\n const canvas = this.$refs.flowCanvas;\n if (!canvas) return;\n \n const ctx = canvas.getContext('2d');\n if (!withTransform) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n \n // 绘制一条红色测试线\n ctx.lineWidth = 5;\n ctx.strokeStyle = 'red';\n ctx.beginPath();\n ctx.moveTo(100, 100);\n ctx.lineTo(700, 100);\n ctx.stroke();\n \n // 添加文本\n ctx.font = '16px Arial';\n ctx.fillStyle = 'red';\n ctx.textAlign = 'center';\n ctx.fillText('测试线条 - 应该可见', 400, 80);\n \n // 根据当前流程类型绘制不同的线条\n switch(this.currentType) {\n case 'employee-process':\n this.drawEmployeeFlow(ctx);\n break;\n case 'sales-process':\n this.drawSalesFlow(ctx);\n break;\n case 'shipping-process':\n this.drawShippingFlow(ctx);\n break;\n }\n },\n \n // 绘制员工入职流程线\n drawEmployeeFlow(ctx) {\n ctx.lineWidth = 3;\n ctx.strokeStyle = '#409EFF';\n \n // 绘制简单直线\n ctx.beginPath();\n ctx.moveTo(400, 150);\n ctx.lineTo(400, 250);\n ctx.stroke();\n \n ctx.beginPath();\n ctx.moveTo(400, 150);\n ctx.lineTo(600, 150);\n ctx.stroke();\n },\n \n // 绘制销售订单流程线\n drawSalesFlow(ctx) {\n ctx.lineWidth = 3;\n ctx.strokeStyle = '#67C23A';\n \n // 绘制简单直线\n ctx.beginPath();\n ctx.moveTo(400, 150);\n ctx.lineTo(400, 350);\n ctx.stroke();\n },\n \n // 绘制物流发货流程线\n drawShippingFlow(ctx) {\n ctx.lineWidth = 3;\n ctx.strokeStyle = '#E6A23C';\n \n // 绘制简单直线\n ctx.beginPath();\n ctx.moveTo(300, 150);\n ctx.lineTo(500, 350);\n ctx.stroke();\n },\n handleNodeClick(nodeId) {\n const node = this.nodes.find(n => n.id === nodeId)\n if (node && node.url) {\n if (node.url.startsWith('http')) {\n window.open(node.url, '_blank')\n } else {\n this.$router.push(node.url).catch(err => {\n if (err.name !== 'NavigationDuplicated') {\n this.$message({\n type: 'info',\n message: `正在跳转到${node.label}页面...`\n })\n }\n })\n }\n }\n },\n checkDevice() {\n this.isMobile = window.innerWidth < 768\n if (this.isMobile) {\n this.scale = 0.6 // 移动端默认缩小到60%\n } else {\n this.scale = 1\n }\n this.applyScale()\n },\n applyScale() {\n const el = this.$refs.processFlow;\n el.style.transform = `translate(${this.lastPosX}px, ${this.lastPosY}px) scale(${this.scale})`;\n \n // Canvas不能使用CSS缩放,需要重绘\n const canvas = this.$refs.flowCanvas;\n if (canvas) {\n const ctx = canvas.getContext('2d');\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n ctx.save();\n ctx.translate(this.lastPosX, this.lastPosY);\n ctx.scale(this.scale, this.scale);\n this.drawFlowLines(true); // 传递true表示已应用变换\n ctx.restore();\n }\n },\n handleResize() {\n this.checkDevice()\n },\n zoomIn() {\n this.scale += 0.1;\n this.applyScale();\n },\n zoomOut() {\n if (this.scale > 0.3) {\n this.scale -= 0.1;\n this.applyScale();\n }\n },\n resetZoom() {\n this.scale = 1;\n this.$refs.processFlow.style.transform = 'translate(0px, 0px) scale(1)';\n this.lastPosX = 0;\n this.lastPosY = 0;\n },\n changeProcessType(type) {\n this.processType = type;\n \n switch(type) {\n case 'employee':\n this.currentType = 'employee-process';\n break;\n case 'sales':\n this.currentType = 'sales-process';\n break;\n case 'shipping':\n this.currentType = 'shipping-process';\n break;\n default:\n this.currentType = 'employee-process';\n }\n \n // 确保DOM更新后再应用缩放\n this.$nextTick(() => {\n this.resetZoom();\n this.applyScale();\n // 重绘流程线\n this.drawFlowLines();\n });\n },\n initHammer() {\n const el = this.$refs.processFlow;\n const hammertime = new Hammer(el);\n \n hammertime.get('pinch').set({ enable: true });\n hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });\n \n hammertime.on('pinch', (e) => {\n const newScale = Math.max(0.3, Math.min(3, this.scale * e.scale));\n if (Math.abs(newScale - this.scale) > 0.01) {\n this.scale = newScale;\n this.applyScale();\n }\n });\n \n hammertime.on('pan', (e) => {\n if (this.panEnabled) {\n const deltaX = e.deltaX;\n const deltaY = e.deltaY;\n \n el.style.transform = `translate(${this.lastPosX + deltaX}px, ${this.lastPosY + deltaY}px) scale(${this.scale})`;\n \n if (e.isFinal) {\n this.lastPosX += deltaX;\n this.lastPosY += deltaY;\n }\n }\n });\n \n // 双击事件处理\n hammertime.on('doubletap', () => {\n this.resetZoom();\n });\n \n // 启用/禁用平移\n el.addEventListener('mousedown', () => {\n this.panEnabled = true;\n });\n \n document.addEventListener('mouseup', () => {\n this.panEnabled = false;\n });\n \n // 移动端触摸事件\n el.addEventListener('touchstart', () => {\n this.panEnabled = true;\n });\n \n document.addEventListener('touchend', () => {\n this.panEnabled = false;\n });\n }\n },\n mounted() {\n // 确保初始化流程类型正确\n this.processType = 'employee';\n this.currentType = 'employee-process';\n \n this.$nextTick(() => {\n this.initHammer();\n // 绘制流程线\n this.drawFlowLines();\n });\n \n this.checkDevice()\n window.addEventListener('resize', this.handleResize)\n },\n beforeDestroy() {\n window.removeEventListener('resize', this.handleResize)\n },\n computed: {\n displayNodes() {\n return this.processNodes[this.processType];\n return this.processNodes[this.currentType];\n }\n }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.process-container {\n padding: 20px;\n background: #f8f9fa;\n min-height: 100vh;\n}\n\n.process-intro {\n margin-bottom: 30px;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n border: none;\n}\n\n.intro-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20px;\n padding-bottom: 15px;\n border-bottom: 1px solid #ebeef5;\n}\n\n.intro-header h2 {\n margin: 0;\n font-size: 22px;\n color: #2c3e50;\n font-weight: 600;\n}\n\n.intro-content {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.intro-description {\n flex: 1;\n padding-right: 40px;\n}\n\n.intro-description p {\n margin: 0;\n color: #5c6b77;\n line-height: 1.8;\n font-size: 15px;\n}\n\n.intro-stats {\n display: flex;\n gap: 40px;\n padding: 20px;\n background: #f8fafc;\n border-radius: 8px;\n}\n\n.stat-item {\n text-align: center;\n padding: 0 20px;\n position: relative;\n}\n\n.stat-item:not(:last-child)::after {\n content: '';\n position: absolute;\n right: -20px;\n top: 50%;\n transform: translateY(-50%);\n height: 70%;\n width: 1px;\n background: #e0e6ed;\n}\n\n.stat-value {\n font-size: 28px;\n font-weight: 600;\n color: #409EFF;\n margin-bottom: 8px;\n line-height: 1;\n}\n\n.stat-label {\n font-size: 14px;\n color: #8492a6;\n}\n\n.process-flow {\n margin: 40px 0;\n padding: 40px;\n position: relative;\n height: 800px;\n min-width: 800px;\n overflow: visible;\n transform-origin: top left;\n}\n\n.flow-connectors {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 5;\n pointer-events: none;\n}\n\n/* 确保不同流程线正确显示 */\nsvg.flow-connectors {\n overflow: visible;\n}\n\n.process-line {\n stroke: #409EFF;\n stroke-width: 3px;\n fill: none;\n}\n\n.process-line.main {\n stroke-width: 3px;\n}\n\n.process-line.branch {\n stroke-dasharray: 5, 3;\n}\n\n.flow-text {\n font-size: 12px;\n fill: #606266;\n font-weight: 500;\n text-anchor: middle;\n}\n\n/* 流程图节点样式 */\n.flow-node {\n position: absolute;\n min-width: 120px;\n padding: 15px 25px;\n text-align: center;\n background: #fff;\n border: 2px solid #409EFF;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 10;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);\n}\n\n.flow-node:hover {\n box-shadow: 0 8px 16px rgba(64, 158, 255, 0.2);\n transform: translateY(-4px);\n}\n\n.flow-node.start,\n.flow-node.end {\n background: linear-gradient(135deg, #409EFF, #3a8ee6);\n color: #fff;\n border-radius: 25px;\n min-width: 100px;\n border: none;\n font-weight: 500;\n box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);\n}\n\n.flow-node.condition {\n border-color: #E6A23C;\n background: #fff;\n color: #E6A23C;\n transform: rotate(45deg);\n width: 90px;\n height: 90px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n box-shadow: 0 4px 15px rgba(230, 162, 60, 0.2);\n}\n\n.flow-node.condition:hover {\n box-shadow: 0 8px 20px rgba(230, 162, 60, 0.3);\n transform: rotate(45deg) translateY(-4px);\n}\n\n.flow-node.condition .node-label {\n transform: rotate(-45deg);\n white-space: nowrap;\n font-weight: 500;\n font-size: 14px;\n}\n\n.flow-node.process {\n border-color: #409EFF;\n color: #2c3e50;\n background: linear-gradient(to bottom, #fff, #f8fafc);\n}\n\n.node-label {\n font-size: 14px;\n font-weight: 500;\n}\n\n/* 响应式样式 */\n@media screen and (max-width: 768px) {\n .process-flow {\n padding: 20px;\n margin: 10px 0 40px 0;\n overflow: auto;\n -webkit-overflow-scrolling: touch; /* 改善iOS滚动体验 */\n height: auto;\n min-height: 600px;\n transform-origin: top left;\n width: calc(100vw - 20px);\n max-width: 100%;\n }\n\n .process-container {\n padding: 10px;\n overflow: hidden;\n position: relative;\n }\n \n .zoom-controls {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n background: rgba(255, 255, 255, 0.9);\n border-radius: 8px;\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n padding: 8px;\n }\n \n .zoom-btn {\n width: 40px;\n height: 40px;\n margin: 4px;\n background: white;\n border: 1px solid #dcdfe6;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n cursor: pointer;\n color: #606266;\n }\n \n .zoom-btn:active {\n background: #f2f6fc;\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 .intro-stats {\n flex-wrap: wrap;\n gap: 20px;\n padding: 15px;\n }\n\n .stat-item {\n padding: 0 15px;\n }\n\n .stat-item:not(:last-child)::after {\n display: none;\n }\n\n .stat-value {\n font-size: 24px;\n }\n}\n\n// 不同流程类型的样式\n.employee-process {\n .flow-line {\n stroke: #409EFF;\n stroke-width: 3;\n fill: none;\n }\n\n .process-node {\n border-color: #409EFF;\n box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);\n \n &.condition {\n border-color: #409EFF;\n }\n \n &.start, &.end {\n background-color: #ecf5ff;\n }\n }\n \n .process-line {\n stroke: #409EFF;\n stroke-width: 3px;\n }\n \n .process-line.branch {\n stroke-dasharray: 5, 3;\n }\n \n .arrow-marker path {\n fill: #409EFF;\n }\n}\n\n.sales-process {\n .process-node {\n border-color: #67C23A;\n box-shadow: 0 2px 12px 0 rgba(103, 194, 58, 0.1);\n \n &.condition {\n border-color: #67C23A;\n background-color: #f0f9eb;\n }\n \n &.start, &.end {\n background-color: #f0f9eb;\n }\n \n // 销售流程节点的脉动效果\n animation: pulse 2s infinite;\n @keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);\n }\n 70% {\n box-shadow: 0 0 0 10px rgba(103, 194, 58, 0);\n }\n 100% {\n box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);\n }\n }\n }\n \n .process-line {\n stroke: #67C23A;\n stroke-width: 2.5px;\n stroke-dasharray: none;\n }\n \n .process-line.branch {\n stroke-dasharray: 5, 3;\n }\n \n .arrow-marker path {\n fill: #67C23A;\n }\n \n .effect-circle {\n fill: #67C23A;\n opacity: 0.3;\n }\n \n text {\n fill: #67C23A;\n font-weight: bold;\n }\n}\n\n.shipping-process {\n .process-node {\n border-color: #E6A23C;\n box-shadow: 0 2px 12px 0 rgba(230, 162, 60, 0.1);\n \n &.condition {\n border-color: #E6A23C;\n background-color: #fdf6ec;\n }\n \n &.start, &.end {\n background-color: #fdf6ec;\n }\n \n transition: transform 0.3s ease;\n &:hover {\n transform: scale(1.05);\n }\n }\n \n .process-line {\n stroke: #E6A23C;\n stroke-width: 2px;\n filter: drop-shadow(0 2px 5px rgba(230, 162, 60, 0.3));\n }\n \n .process-line.main {\n stroke-width: 3px;\n }\n \n .process-line.return {\n stroke: #F56C6C;\n stroke-width: 2px;\n }\n \n .arrow-marker path {\n fill: #E6A23C;\n }\n \n .glow-effect {\n fill: #E6A23C;\n opacity: 0.4;\n filter: blur(4px);\n animation: glow 3s infinite alternate;\n }\n \n @keyframes glow {\n 0% { opacity: 0.2; r: 8px; }\n 100% { opacity: 0.6; r: 15px; }\n }\n \n text {\n fill: #E6A23C;\n font-weight: 500;\n }\n}\n\n// 移动端样式优化\n@media screen and (max-width: 768px) {\n .zoom-controls {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 100;\n display: flex;\n flex-direction: column;\n }\n\n .zoom-btn {\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.9);\n border: 1px solid #dcdfe6;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n margin-bottom: 10px;\n cursor: pointer;\n box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n }\n \n // 更新流程图容器,支持适应不同屏幕\n .process-flow {\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n padding: 20px;\n min-height: 70vh;\n transform-origin: top left;\n }\n}\n</style> "],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}