{"ast":null,"code":"import \"core-js/modules/es.array.concat.js\";\nimport \"core-js/modules/es.array.filter.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.filter.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      nodes: [{\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      isMobile: false\n    };\n  },\n  methods: {\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    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    },\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    this.changeProcessType(this.processType);\n    this.$nextTick(function () {\n      _this4.initHammer();\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.nodes.filter(function (n) {\n        return n.type !== 'start' && n.type !== 'end';\n      });\n    }\n  }\n};","map":{"version":3,"names":["Hammer","name","data","processType","currentType","scale","panEnabled","lastPosX","lastPosY","processOptions","value","label","nodes","id","type","x","y","url","isMobile","methods","handleNodeClick","nodeId","_this","node","find","n","startsWith","window","open","$router","push","err","$message","message","concat","checkDevice","innerWidth","applyScale","el","$refs","processFlow","style","transform","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","filter"],"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      <svg class=\"flow-connectors\" v-if=\"currentType === 'employee'\">\n        <!-- 定义箭头标记 -->\n        <defs>\n          <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n            <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#409EFF\" />\n          </marker>\n        </defs>\n        <!-- 员工入职流程线 -->\n        <path d=\"M400,80 L400,120\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M400,190 L600,190\" class=\"flow-line\" data-label=\"通过\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M400,190 L200,190 L200,250\" class=\"flow-line\" data-label=\"不通过\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M600,190 L600,250\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M600,250 L600,350\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M600,350 L600,450\" class=\"flow-line\" data-label=\"完整\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M600,350 L550,350 L550,300 L600,300\" class=\"flow-line\" data-label=\"需补充\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M200,250 L200,350\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M600,450 L400,450 L400,550\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n        <path d=\"M200,350 L400,350 L400,550\" class=\"flow-line\" marker-end=\"url(#arrowhead)\" />\n        \n        <!-- 添加文本标签 -->\n        <text x=\"500\" y=\"180\" class=\"flow-text\">通过</text>\n        <text x=\"300\" y=\"180\" class=\"flow-text\">不通过</text>\n        <text x=\"610\" y=\"400\" class=\"flow-text\">完整</text>\n        <text x=\"550\" y=\"290\" class=\"flow-text\">需补充</text>\n      </svg>\n\n      <svg class=\"flow-connectors\" v-else-if=\"currentType === 'sales'\">\n        <!-- 定义箭头标记 -->\n        <defs>\n          <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n            <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#67C23A\" />\n          </marker>\n        </defs>\n        <!-- 销售订单流程线 -->\n        <!-- 主流程线 -->\n        <path class=\"process-line main\" d=\"M400,80 L400,120\" />\n        <path class=\"process-line main\" d=\"M400,190 L400,250\" />\n        <path class=\"process-line main\" d=\"M400,290 L400,350\" />\n        <path class=\"process-line main\" d=\"M400,390 L400,450\" />\n        <path class=\"process-line main\" d=\"M400,490 L400,550\" />\n\n        <!-- 分支线 -->\n        <path class=\"process-line main\" d=\"M400,590 L600,590\" />\n        <path class=\"process-line main\" d=\"M400,590 L200,590\" />\n        <path class=\"process-line main\" d=\"M600,590 L600,650\" />\n        <path class=\"process-line main\" d=\"M600,690 L600,750\" />\n        <path class=\"process-line main\" d=\"M600,750 L400,750\" />\n        <path class=\"process-line main\" d=\"M400,790 L400,850\" />\n        \n        <!-- 跳转连接 -->\n        <path class=\"process-line branch\" d=\"M200,590 C150,590 150,750 150,850 L250,950\" />\n        \n        <!-- 文本标签 -->\n        <text x=\"500\" y=\"580\" class=\"flow-text\">通过</text>\n        <text x=\"300\" y=\"580\" class=\"flow-text\">未通过</text>\n        <text x=\"480\" y=\"730\" class=\"flow-text\">准备生产</text>\n        <text x=\"150\" y=\"750\" class=\"flow-text\">流程终止</text>\n        \n        <!-- 销售流程效果 -->\n        <circle class=\"effect-circle\" cx=\"400\" cy=\"550\" r=\"10\" />\n        <circle class=\"effect-circle\" cx=\"400\" cy=\"750\" r=\"10\" />\n        <circle class=\"effect-circle\" cx=\"400\" cy=\"950\" r=\"10\" />\n      </svg>\n\n      <svg class=\"flow-connectors\" v-else-if=\"currentType === 'shipping'\">\n        <!-- 定义箭头标记 -->\n        <defs>\n          <marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n            <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#E6A23C\" />\n          </marker>\n        </defs>\n        <!-- 物流发货流程线 - 完全不同的布局 -->\n        <!-- 主网格布局 - 更像是一个网络而非线性流程 -->\n        <path class=\"process-line main\" d=\"M300,80 L300,150\" />\n        <path class=\"process-line main\" d=\"M300,190 L300,250\" />\n        \n        <!-- 分叉成两条平行路径 -->\n        <path class=\"process-line main\" d=\"M300,290 L200,350\" />\n        <path class=\"process-line main\" d=\"M300,290 L400,350\" />\n        \n        <!-- 左侧路径 -->\n        <path class=\"process-line main\" d=\"M200,390 L200,450\" />\n        <path class=\"process-line main\" d=\"M200,490 L200,550\" />\n        \n        <!-- 右侧路径 -->\n        <path class=\"process-line main\" d=\"M400,390 L400,450\" />\n        <path class=\"process-line main\" d=\"M400,490 L400,550\" />\n        \n        <!-- 汇合点 -->\n        <path class=\"process-line main\" d=\"M200,590 L300,650\" />\n        <path class=\"process-line main\" d=\"M400,590 L300,650\" />\n        \n        <!-- 条件分支 -->\n        <path class=\"process-line main\" d=\"M300,690 L300,750\" />\n        <path class=\"process-line branch\" d=\"M300,790 L500,850\" />\n        <path class=\"process-line main\" d=\"M300,790 L300,850\" />\n        <path class=\"process-line branch\" d=\"M300,790 L100,850\" />\n        \n        <!-- 退货路径 -->\n        <path class=\"process-line return\" d=\"M100,890 C50,950 50,450 150,350\" stroke-dasharray=\"5,5\" />\n        \n        <!-- 完成路径 -->\n        <path class=\"process-line main\" d=\"M300,890 L300,950\" />\n        \n        <!-- 特殊处理路径 -->\n        <path class=\"process-line main\" d=\"M500,890 L400,950\" />\n        <path class=\"process-line main\" d=\"M300,990 L400,990\" />\n        \n        <!-- 文本标签 -->\n        <text x=\"240\" y=\"320\" class=\"flow-text\">物流分配</text>\n        <text x=\"350\" y=\"320\" class=\"flow-text\">包装准备</text>\n        <text x=\"350\" y=\"680\" class=\"flow-text\">质检</text>\n        <text x=\"400\" y=\"790\" class=\"flow-text\">特殊处理</text>\n        <text x=\"150\" y=\"790\" class=\"flow-text\">退货</text>\n        <text x=\"300\" y=\"790\" class=\"flow-text\">合格</text>\n        \n        <!-- 物流发货效果 - 创建一个发光效果 -->\n        <circle class=\"glow-effect\" cx=\"300\" cy=\"650\" r=\"15\" />\n        <circle class=\"glow-effect\" cx=\"300\" cy=\"750\" r=\"10\" />\n        <circle class=\"glow-effect\" cx=\"300\" cy=\"950\" r=\"12\" />\n      </svg>\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      nodes: [\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      isMobile: false\n    }\n  },\n  methods: {\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    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    },\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    this.changeProcessType(this.processType);\n    this.$nextTick(() => {\n      this.initHammer();\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.nodes.filter(n => n.type !== 'start' && n.type !== 'end');\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-lines {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.flow-line {\n  stroke: #409EFF;\n  stroke-width: 3;\n  fill: none;\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  .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  }\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":[]}