{"ast":null,"code":"import \"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  }\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"],"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  }\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,E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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}