|
@@ -0,0 +1,122 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="app-container">
|
|
|
|
+ <div class="flow-container">
|
|
|
|
+ <!-- 流程模块 -->
|
|
|
|
+ <div
|
|
|
|
+ v-for="(block, index) in blocks"
|
|
|
|
+ :key="index"
|
|
|
|
+ class="process-block"
|
|
|
|
+ :style="blockStyle(block)"
|
|
|
|
+ @click="openDialog(block)"
|
|
|
|
+ >
|
|
|
|
+ {{ block.label }}
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 详情弹窗 -->
|
|
|
|
+ <el-dialog
|
|
|
|
+ :title="currentBlock.label + ' 详情'"
|
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
|
+ width="30%"
|
|
|
|
+ >
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ dialogVisible: false,
|
|
|
|
+ currentBlock: {},
|
|
|
|
+ blocks: [
|
|
|
|
+ {
|
|
|
|
+ label: '裂解',
|
|
|
|
+ color: '#4CAF50', // 绿色
|
|
|
|
+ position: { x: 50, y: 40 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '压缩',
|
|
|
|
+ color: '#FFEB3B', // 黄色
|
|
|
|
+ position: { x: 250, y: 120 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: 'PGU',
|
|
|
|
+ color: '#E91E63', // 粉色
|
|
|
|
+ position: { x: 450, y: 200 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: 'AEU',
|
|
|
|
+ color: '#FF9800', // 橙色
|
|
|
|
+ position: { x: 650, y: 280 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '分离',
|
|
|
|
+ color: '#2196F3', // 蓝色
|
|
|
|
+ position: { x: 350, y: 400 },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '压缩', // 第二个压缩模块
|
|
|
|
+ color: '#FFEB3B',
|
|
|
|
+ position: { x: 150, y: 400 },
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ blockStyle(block) {
|
|
|
|
+ return {
|
|
|
|
+ backgroundColor: block.color,
|
|
|
|
+ left: block.position.x + 'px',
|
|
|
|
+ top: block.position.y + 'px'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ openDialog(block) {
|
|
|
|
+ this.currentBlock = block
|
|
|
|
+ this.dialogVisible = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+.app-container {
|
|
|
|
+ padding: 20px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.flow-container {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 1000px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ background:
|
|
|
|
+ linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), /* 白色遮罩层 */
|
|
|
|
+ url('../../../assets/images/20250324083845.png') center/cover; /* 替换为实际背景图路径 */
|
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
|
|
+}
|
|
|
|
+.process-block {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 160px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ color: white;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ transition: transform 0.3s;
|
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.process-block:hover {
|
|
|
|
+ transform: scale(1.05);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.dialog-content {
|
|
|
|
+ padding: 20px;
|
|
|
|
+ line-height: 2em;
|
|
|
|
+}
|
|
|
|
+</style>
|