newcpms/ui/src/views/training/process-diagram.vue

<template>
  <div class="process-diagram-container">
    <div class="diagram-header">
      <h2>燃烧与热回收系统工艺流程图</h2>
    </div>

    <div class="diagram-content">
      <svg
        width="1400"
        height="900"
        viewBox="0 0 1400 900"
        class="process-svg"
        @click="handleSvgClick"
      >
        <!-- 背景 -->
        <rect width="100%" height="100%" fill="#f8f9fa"/>

        <!-- 汽包 (左侧中央) -->
        <ellipse
          cx="200" cy="450"
          rx="60" ry="100"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="3"
          @click="handleComponentClick('steam-drum', $event)"
        />
        <text x="200" y="450" text-anchor="middle" class="component-label">汽包</text>

        <!-- 垂直热交换器堆栈 (右侧) -->
        <rect
          x="1000" y="100"
          width="150" height="600"
          fill="none"
          stroke="#333"
          stroke-width="3"
        />

        <!-- FPH-1 -->
        <rect
          x="1010" y="110"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('FPH-1', $event)"
        />
        <text x="1075" y="140" text-anchor="middle" class="component-label">FPH-1</text>

        <!-- FPH-2 -->
        <rect
          x="1010" y="170"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('FPH-2', $event)"
        />
        <text x="1075" y="200" text-anchor="middle" class="component-label">FPH-2</text>

        <!-- BFW -->
        <rect
          x="1010" y="230"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('BFW', $event)"
        />
        <text x="1075" y="260" text-anchor="middle" class="component-label">BFW</text>

        <!-- MSH-1 -->
        <rect
          x="1010" y="290"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('MSH-1', $event)"
        />
        <text x="1075" y="320" text-anchor="middle" class="component-label">MSH-1</text>

        <!-- HPSS-1 -->
        <rect
          x="1010" y="350"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('HPSS-1', $event)"
        />
        <text x="1075" y="380" text-anchor="middle" class="component-label">HPSS-1</text>

        <!-- HPSS-2 -->
        <rect
          x="1010" y="410"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('HPSS-2', $event)"
        />
        <text x="1075" y="440" text-anchor="middle" class="component-label">HPSS-2</text>

        <!-- MSH-2 -->
        <rect
          x="1010" y="470"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('MSH-2', $event)"
        />
        <text x="1075" y="500" text-anchor="middle" class="component-label">MSH-2</text>

        <!-- MSH-3 -->
        <rect
          x="1010" y="530"
          width="130" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('MSH-3', $event)"
        />
        <text x="1075" y="560" text-anchor="middle" class="component-label">MSH-3</text>

        <!-- 排气扇 -->
        <circle
          cx="1075" cy="80"
          r="12"
          fill="#666"
          stroke="#333"
          stroke-width="2"
          @click="handleComponentClick('exhaust-fan', $event)"
        />

        <!-- 急冷器 (右侧中央) -->
        <polygon
          points="1200,350 1300,400 1200,450 1100,400"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="3"
          @click="handleComponentClick('quench-cooler', $event)"
        />
        <text x="1150" y="400" text-anchor="middle" class="component-label">急冷器</text>

        <!-- 燃烧室1 (底部左侧) -->
        <rect
          x="150" y="650"
          width="80" height="60"
          fill="#FF6B6B"
          stroke="#D63031"
          stroke-width="2"
          @click="handleComponentClick('fire-box-1', $event)"
        />
        <text x="190" y="685" text-anchor="middle" class="component-label">Fire box</text>

        <!-- 燃烧室2 (底部右侧) -->
        <rect
          x="250" y="650"
          width="80" height="60"
          fill="#FF6B6B"
          stroke="#D63031"
          stroke-width="2"
          @click="handleComponentClick('fire-box-2', $event)"
        />
        <text x="290" y="685" text-anchor="middle" class="component-label">Fire box</text>

        <!-- SLE-1 -->
        <rect
          x="150" y="580"
          width="80" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('SLE-1', $event)"
        />
        <text x="190" y="610" text-anchor="middle" class="component-label">SLE</text>

        <!-- SLE-2 -->
        <rect
          x="250" y="580"
          width="80" height="50"
          fill="#87CEEB"
          stroke="#4682B4"
          stroke-width="2"
          @click="handleComponentClick('SLE-2', $event)"
        />
        <text x="290" y="610" text-anchor="middle" class="component-label">SLE</text>

        <!-- 风门调节器 -->
        <line x1="150" y1="720" x2="330" y2="720" stroke="#333" stroke-width="2"/>
        <text x="240" y="740" text-anchor="middle" class="system-label">风门调节器</text>

        <!-- 水/蒸汽管道 (蓝色) -->
        <!-- 汽包到SLE -->
        <line x1="200" y1="550" x2="190" y2="580" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('steam-drum-to-SLE-1', $event)"/>
        <line x1="200" y1="550" x2="290" y2="580" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('steam-drum-to-SLE-2', $event)"/>

        <!-- SLE到MSH-3 -->
        <line x1="190" y1="580" x2="1010" y2="580" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('SLE-to-MSH-3', $event)"/>
        <line x1="290" y1="580" x2="1075" y2="580" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('SLE-to-MSH-3-2', $event)"/>

        <!-- 汽包到HPSS -->
        <line x1="260" y1="400" x2="1010" y2="375" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('steam-drum-to-HPSS-1', $event)"/>
        <line x1="260" y1="400" x2="1075" y2="435" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('steam-drum-to-HPSS-2', $event)"/>

        <!-- BFW到急冷器 -->
        <line x1="1075" y1="255" x2="1150" y2="350" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('BFW-to-quench-cooler', $event)"/>

        <!-- MSH-1到急冷器 -->
        <line x1="1075" y1="315" x2="1150" y2="360" stroke="#4682B4" stroke-width="4"
              @click="handleLineClick('MSH-1-to-quench-cooler', $event)"/>

        <!-- 热气体/烟气管道 (黄色) -->
        <!-- 燃烧室到SLE -->
        <line x1="190" y1="650" x2="190" y2="630" stroke="#FFD700" stroke-width="4"
              @click="handleLineClick('fire-box-1-to-SLE-1', $event)"/>
        <line x1="290" y1="650" x2="290" y2="630" stroke="#FFD700" stroke-width="4"
              @click="handleLineClick('fire-box-2-to-SLE-2', $event)"/>

        <!-- SLE到热交换器堆栈 -->
        <line x1="190" y1="580" x2="1010" y2="650" stroke="#FFD700" stroke-width="4"
              @click="handleLineClick('SLE-1-to-heat-stack', $event)"/>
        <line x1="290" y1="580" x2="1075" y2="650" stroke="#FFD700" stroke-width="4"
              @click="handleLineClick('SLE-2-to-heat-stack', $event)"/>

        <!-- 热交换器堆栈内部流动 -->
        <line x1="1075" y1="650" x2="1075" y2="100" stroke="#FFD700" stroke-width="4"
              @click="handleLineClick('heat-stack-flow', $event)"/>

        <!-- 热交换器到急冷器 -->
        <line x1="1075" y1="315" x2="1150" y2="370" stroke="#FFD700" stroke-width="4"
              @click="handleLineClick('heat-stack-to-quench-cooler', $event)"/>

        <!-- 燃料气管道 (红色) -->
        <!-- 燃料气供应 -->
        <line x1="50" y1="680" x2="150" y2="680" stroke="#FF4444" stroke-width="4"
              @click="handleLineClick('fuel-gas-supply', $event)"/>
        <line x1="50" y1="680" x2="250" y2="680" stroke="#FF4444" stroke-width="4"
              @click="handleLineClick('fuel-gas-supply-2', $event)"/>

        <!-- 燃料气到燃烧室 -->
        <line x1="150" y1="680" x2="190" y2="650" stroke="#FF4444" stroke-width="4"
              @click="handleLineClick('fuel-to-fire-box-1', $event)"/>
        <line x1="250" y1="680" x2="290" y2="650" stroke="#FF4444" stroke-width="4"
              @click="handleLineClick('fuel-to-fire-box-2', $event)"/>

        <!-- 阀门和控制元件 -->
        <!-- 主燃料切断阀 -->
        <circle cx="100" cy="680" r="6" fill="#666" stroke="#333" stroke-width="2"
                @click="handleComponentClick('main-fuel-valve', $event)"/>

        <!-- 燃料气控制阀PCV -->
        <circle cx="120" cy="680" r="6" fill="#666" stroke="#333" stroke-width="2"
                @click="handleComponentClick('fuel-control-valve', $event)"/>

        <!-- 流量计 -->
        <circle cx="1075" cy="255" r="8" fill="#87CEEB" stroke="#4682B4" stroke-width="2"
                @click="handleComponentClick('flow-meter-1', $event)"/>
        <text x="1075" y="260" text-anchor="middle" class="flow-meter-label">8</text>

        <circle cx="1150" cy="350" r="8" fill="#87CEEB" stroke="#4682B4" stroke-width="2"
                @click="handleComponentClick('flow-meter-2', $event)"/>
        <text x="1150" y="355" text-anchor="middle" class="flow-meter-label">8</text>

        <!-- 汽包输入标签 -->
        <text x="50" y="200" class="system-label">SS放空</text>
        <text x="50" y="220" class="system-label">SS并网阀</text>
        <text x="50" y="240" class="system-label">间排</text>
        <text x="50" y="260" class="system-label">磷酸盐</text>
        <text x="50" y="280" class="system-label">N130</text>
        <text x="50" y="300" class="system-label">DS</text>
        <text x="50" y="320" class="system-label">原料扫线</text>
        <text x="50" y="340" class="system-label">原料根部阀</text>
        <text x="50" y="360" class="system-label">原料切断阀</text>
        <text x="50" y="380" class="system-label">原料控制阀</text>
        <text x="50" y="400" class="system-label">烧焦空气</text>
        <text x="50" y="420" class="system-label">DS扫线</text>
        <text x="50" y="440" class="system-label">连排</text>

        <!-- 急冷器标签 -->
        <text x="1200" y="500" class="system-label">工艺水</text>
        <text x="1200" y="520" class="system-label">急冷油</text>
        <text x="1200" y="540" class="system-label">开工放空</text>
        <text x="1200" y="560" class="system-label">减温水</text>

        <!-- 电动阀标签 -->
        <text x="1200" y="580" class="system-label">电动阀 1301</text>
        <text x="1200" y="600" class="system-label">HV1302</text>
        <text x="1200" y="620" class="system-label">电动阀 1303</text>

        <!-- 文丘里标签 -->
        <text x="100" y="700" class="system-label">文丘里</text>
        <text x="200" y="700" class="system-label">文丘里</text>

      </svg>
    </div>

    <!-- 信息面板 -->
    <div class="info-panel" v-if="selectedComponent">
      <h3>{{ selectedComponent.name }}</h3>
      <p>{{ selectedComponent.description }}</p>
      <div class="component-details">
        <h4>技术参数：</h4>
        <ul>
          <li v-for="param in selectedComponent.parameters" :key="param">
            {{ param }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProcessDiagram',
  data() {
    return {
      svgWidth: 1400,
      svgHeight: 900,
      selectedComponent: null,
      componentData: {
        'steam-drum': {
          name: '汽包',
          description: '蒸汽锅炉的核心组件，用于储存和分离蒸汽与水',
          parameters: [
            '工作压力: 1.0-2.5 MPa',
            '工作温度: 180-250°C',
            '容量: 50-200 m³',
            '材质: 碳钢/不锈钢'
          ]
        },
        'fire-box-1': {
          name: '燃烧室1',
          description: '燃料燃烧产生热量的主要设备',
          parameters: [
            '燃烧温度: 800-1200°C',
            '燃料消耗: 100-500 m³/h',
            '热效率: 85-95%',
            '燃烧方式: 强制通风'
          ]
        },
        'fire-box-2': {
          name: '燃烧室2',
          description: '燃料燃烧产生热量的主要设备',
          parameters: [
            '燃烧温度: 800-1200°C',
            '燃料消耗: 100-500 m³/h',
            '热效率: 85-95%',
            '燃烧方式: 强制通风'
          ]
        },
        'quench-cooler': {
          name: '急冷器',
          description: '用于快速冷却高温气体的设备',
          parameters: [
            '冷却能力: 1000-5000 kW',
            '冷却介质: 水/油',
            '出口温度: 50-100°C',
            '压力损失: <0.1 MPa'
          ]
        },
        'FPH-1': {
          name: 'FPH-1 热交换器',
          description: '第一级热交换器，用于预热给水',
          parameters: [
            '换热面积: 500-2000 m²',
            '传热系数: 1000-3000 W/m²·K',
            '压降: <0.05 MPa',
            '材质: 不锈钢'
          ]
        },
        'FPH-2': {
          name: 'FPH-2 热交换器',
          description: '第二级热交换器，用于预热给水',
          parameters: [
            '换热面积: 500-2000 m²',
            '传热系数: 1000-3000 W/m²·K',
            '压降: <0.05 MPa',
            '材质: 不锈钢'
          ]
        },
        'BFW': {
          name: '锅炉给水',
          description: '向锅炉系统提供处理过的给水',
          parameters: [
            '给水温度: 100-150°C',
            '给水压力: 2.0-4.0 MPa',
            '水质要求: 除氧水',
            '流量: 50-200 m³/h'
          ]
        },
        'MSH-1': {
          name: 'MSH-1 过热器',
          description: '第一级过热器，提高蒸汽温度',
          parameters: [
            '过热温度: 300-400°C',
            '过热压力: 1.5-2.5 MPa',
            '换热面积: 300-1000 m²',
            '材质: 合金钢'
          ]
        },
        'MSH-2': {
          name: 'MSH-2 过热器',
          description: '第二级过热器，进一步提高蒸汽温度',
          parameters: [
            '过热温度: 350-450°C',
            '过热压力: 1.5-2.5 MPa',
            '换热面积: 300-1000 m²',
            '材质: 合金钢'
          ]
        },
        'MSH-3': {
          name: 'MSH-3 过热器',
          description: '第三级过热器，最终蒸汽温度控制',
          parameters: [
            '过热温度: 400-500°C',
            '过热压力: 1.5-2.5 MPa',
            '换热面积: 300-1000 m²',
            '材质: 合金钢'
          ]
        },
        'HPSS-1': {
          name: 'HPSS-1 高压过热器',
          description: '第一级高压过热器',
          parameters: [
            '工作压力: 2.0-4.0 MPa',
            '工作温度: 400-500°C',
            '换热面积: 200-800 m²',
            '材质: 高温合金'
          ]
        },
        'HPSS-2': {
          name: 'HPSS-2 高压过热器',
          description: '第二级高压过热器',
          parameters: [
            '工作压力: 2.0-4.0 MPa',
            '工作温度: 450-550°C',
            '换热面积: 200-800 m²',
            '材质: 高温合金'
          ]
        },
        'SLE-1': {
          name: 'SLE-1 单元',
          description: '第一级蒸汽发生单元',
          parameters: [
            '蒸汽产量: 10-50 t/h',
            '工作压力: 1.0-2.5 MPa',
            '工作温度: 180-250°C',
            '热效率: 90-95%'
          ]
        },
        'SLE-2': {
          name: 'SLE-2 单元',
          description: '第二级蒸汽发生单元',
          parameters: [
            '蒸汽产量: 10-50 t/h',
            '工作压力: 1.0-2.5 MPa',
            '工作温度: 180-250°C',
            '热效率: 90-95%'
          ]
        },
        'exhaust-fan': {
          name: '排气扇',
          description: '排出燃烧废气的风机',
          parameters: [
            '风量: 1000-5000 m³/h',
            '风压: 1000-3000 Pa',
            '功率: 10-50 kW',
            '转速: 1000-3000 rpm'
          ]
        },
        'main-fuel-valve': {
          name: '主燃料切断阀',
          description: '控制主燃料供应的安全切断阀',
          parameters: [
            '公称压力: 1.6-4.0 MPa',
            '公称通径: DN50-DN200',
            '阀体材质: 碳钢/不锈钢',
            '密封材质: 软密封/硬密封'
          ]
        },
        'fuel-control-valve': {
          name: '燃料气控制阀 (PCV)',
          description: '压力控制阀，调节燃料气压力',
          parameters: [
            '控制压力: 0.1-1.0 MPa',
            '控制精度: ±1%',
            '响应时间: <1s',
            '材质: 不锈钢'
          ]
        },
        'flow-meter-1': {
          name: '流量计1',
          description: '测量BFW流量的仪表',
          parameters: [
            '测量范围: 0-200 m³/h',
            '精度等级: ±0.5%',
            '工作压力: 0-4.0 MPa',
            '工作温度: -20-150°C'
          ]
        },
        'flow-meter-2': {
          name: '流量计2',
          description: '测量急冷器进水流量的仪表',
          parameters: [
            '测量范围: 0-100 m³/h',
            '精度等级: ±0.5%',
            '工作压力: 0-2.0 MPa',
            '工作温度: -20-100°C'
          ]
        }
      }
    }
  },
  methods: {
    handleComponentClick(componentId, event) {
      event.stopPropagation()
      this.selectedComponent = this.componentData[componentId]
      this.$message({
        message: `已选择组件: ${this.componentData[componentId].name}`,
        type: 'info'
      })
    },

    handleLineClick(lineId, event) {
      event.stopPropagation()
      const lineNames = {
        'steam-drum-to-SLE-1': '汽包到SLE-1蒸汽管道',
        'steam-drum-to-SLE-2': '汽包到SLE-2蒸汽管道',
        'SLE-to-MSH-3': 'SLE到MSH-3给水管道',
        'SLE-to-MSH-3-2': 'SLE到MSH-3给水管道2',
        'steam-drum-to-HPSS-1': '汽包到HPSS-1蒸汽管道',
        'steam-drum-to-HPSS-2': '汽包到HPSS-2蒸汽管道',
        'BFW-to-quench-cooler': 'BFW到急冷器给水管道',
        'MSH-1-to-quench-cooler': 'MSH-1到急冷器减温水管道',
        'fire-box-1-to-SLE-1': '燃烧室1到SLE-1烟气管道',
        'fire-box-2-to-SLE-2': '燃烧室2到SLE-2烟气管道',
        'SLE-1-to-heat-stack': 'SLE-1到热交换器堆栈烟气管道',
        'SLE-2-to-heat-stack': 'SLE-2到热交换器堆栈烟气管道',
        'heat-stack-flow': '热交换器堆栈内部烟气流动',
        'heat-stack-to-quench-cooler': '热交换器堆栈到急冷器烟气管道',
        'fuel-gas-supply': '燃料气供应管道',
        'fuel-gas-supply-2': '燃料气供应管道2',
        'fuel-to-fire-box-1': '燃料气到燃烧室1管道',
        'fuel-to-fire-box-2': '燃料气到燃烧室2管道'
      }

      this.$message({
        message: `已选择管道: ${lineNames[lineId]}`,
        type: 'success'
      })
    },

    handleSvgClick() {
      this.selectedComponent = null
    }
  }
}
</script>

<style scoped>
.process-diagram-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.diagram-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 15px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.diagram-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.diagram-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: auto;
}

.process-svg {
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: crosshair;
}

.component-label {
  font-size: 12px;
  font-weight: bold;
  fill: #333;
  pointer-events: none;
}

.system-label {
  font-size: 10px;
  fill: #666;
  pointer-events: none;
}

.flow-meter-label {
  font-size: 10px;
  font-weight: bold;
  fill: #333;
  pointer-events: none;
}

/* 悬停效果 */
.process-svg rect:hover,
.process-svg ellipse:hover,
.process-svg polygon:hover,
.process-svg circle:hover {
  filter: drop-shadow(0 0 8px rgba(64, 158, 255, 0.6));
  cursor: pointer;
}

.process-svg line:hover {
  stroke-width: 6;
  cursor: pointer;
}

/* 信息面板 */
.info-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 350px;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  max-height: 80vh;
  overflow-y: auto;
}

.info-panel h3 {
  margin: 0 0 10px 0;
  color: #333;
  border-bottom: 2px solid #409eff;
  padding-bottom: 5px;
}

.info-panel p {
  margin: 0 0 15px 0;
  color: #666;
  line-height: 1.5;
}

.component-details h4 {
  margin: 15px 0 8px 0;
  color: #333;
  font-size: 14px;
}

.component-details ul {
  margin: 0;
  padding-left: 20px;
}

.component-details li {
  margin: 5px 0;
  color: #666;
  font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-panel {
    position: relative;
    width: 100%;
    margin-top: 20px;
  }

  .process-svg {
    width: 100%;
    height: auto;
  }
}
</style>