wms / wms4_zhongputaicang · Files

<template>
  <!-- 整个RGV区域监控系统的页面容器 -->
  <div class="factory-map">
    <!-- 顶部工具栏：显示标题、统计数据、操作按钮 -->
    <div class="toolbar">
      <!-- 左侧：标题 + 工位统计信息 -->
      <div class="toolbar-left">
        <h3>RGV区域监控系统</h3>
        <div class="stats">
          <!-- 空闲工位数量 -->
          <span class="stat-item">
            <i class="el-icon-check"></i> 空闲工位: {{ idleStations }}
          </span>
          <!-- 执行任务工位数量 -->
          <span class="stat-item">
            <i class="el-icon-loading"></i> 执行任务: {{ busyStations }}
          </span>
          <!-- 有托盘工位数量 -->
          <span class="stat-item">
            <i class="el-icon-box"></i> 有托盘: {{ palletStations }}
          </span>
        </div>
      </div>

      <!-- 右侧：操作按钮 -->
      <div class="toolbar-right">
        <!-- 执行任务按钮：必须选起点+终点才能点击 -->
        <button @click="startTask" :disabled="!selectedFrom || !selectedTo || selectedFrom === selectedTo" class="btn-primary">
          执行任务 ({{ selectedFrom }} → {{ selectedTo }})
        </button>
        <!-- 清空选择的起点终点 -->
        <button @click="resetSelection" class="btn-secondary">清空选择</button>
        <!-- 刷新工位数据 -->
        <button @click="refreshData" class="btn-secondary">刷新数据</button>
      </div>
    </div>

    <!-- 画布容器：用来画工厂地图、工位、轨道、RGV小车 -->
    <div class="graph-container">
      <div ref="graphContainer" class="graph"></div>
    </div>

    <!-- 跟随工位的详情面板，缩放拖拽始终紧贴 -->
    <!-- 悬浮详情面板 -->
    <div
      class="info-panel"
      v-if="selectedStation"
      :style="{
    top: panelTop + 'px',
    left: panelLeft + 'px'
  }"
    >
      <h4>工位详情</h4>
      <p><strong>工位编号:</strong> {{ selectedStation.id }}</p>
      <p><strong>状态:</strong>
        <span :class="getStatusClass(selectedStation.status)">
      {{ getStatusText(selectedStation.status) }}
    </span>
      </p>
      <p><strong>托盘状态:</strong> {{ selectedStation.hasPallet ? '有托盘' : '无托盘' }}</p>
      <p><strong>当前任务:</strong> {{ selectedStation.currentTask || '无' }}</p>
      <p v-if="selectedStation.nextTask"><strong>待执行任务:</strong> {{ selectedStation.nextTask }}</p>
      <button @click="clearStationSelection" class="btn-small">关闭</button>
    </div>
  </div>
</template>

<script>
// 引入蚂蚁集团的X6绘图库，用来画流程图/工厂地图
import { Graph } from '@antv/x6'

export default {
  name: 'FactoryMap', // 组件名称
  data() {
    // 组件的所有数据都在这里定义
    return {
      graph: null, // 画布实例
      stations: [], // 所有工位数据
      edges: [], // 连线数据
      selectedFrom: null, // 选中的起点工位
      selectedTo: null, // 选中的终点工位
      selectedStation: null, // 当前查看详情的工位
      taskQueue: [], // 任务队列
      rgvPosition: 'A1', // RGV小车当前位置
      // ...其他不变
      panelTop: 0,
      panelLeft: 0,
      // 预设所有工位的位置、状态、坐标
      stationData: {
        row1: [
          { id: 'R1', name: '工位A1', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 100, y: 150 },
          { id: 'R2', name: '工位A2', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 220, y: 150 },
          { id: 'R3', name: '工位A3', status: 'busy', hasPallet: true, currentTask: '加工中', nextTask: '待质检', x: 340, y: 150 },
          { id: 'R4', name: '工位A4', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 460, y: 150 },
          { id: 'R5', name: '工位A5', status: 'busy', hasPallet: true, currentTask: '待转运', nextTask: null, x: 580, y: 150 },
          { id: 'R6', name: '工位A6', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 700, y: 150 },
          { id: 'R7', name: '工位A7', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 820, y: 150 },
          { id: 'R8', name: '工位A8', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 940, y: 150 },
          { id: 'R9', name: '工位A9', status: 'busy', hasPallet: true, currentTask: '加工中', nextTask: '待质检', x: 1060, y: 150 },
          { id: 'R10', name: '工位A10', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1180, y: 150 },
          { id: 'R11', name: '工位A11', status: 'busy', hasPallet: true, currentTask: '待转运', nextTask: null, x: 1300, y: 150 },
          { id: 'R12', name: '工位A12', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1420, y: 150 },
          { id: 'R13', name: '工位A13', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1540, y: 150 },
          { id: 'R14', name: '工位A14', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1660, y: 150 },
          { id: 'R15', name: '工位A15', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1780, y: 150 },
          { id: 'R16', name: '工位A16', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1900, y: 150 },
          { id: 'R17', name: '工位A17', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 2020, y: 150 },
        ],
        row2: [
          { id: 'R18', name: '工位B18', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 100, y: 350 },
          { id: 'R19', name: '工位B19', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 220, y: 350 },
          { id: 'R20', name: '工位B20', status: 'busy', hasPallet: true, currentTask: '加工中', nextTask: '待质检', x: 340, y: 350 },
          { id: 'R21', name: '工位B21', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 460, y: 350 },
          { id: 'R22', name: '工位B22', status: 'busy', hasPallet: true, currentTask: '待转运', nextTask: null, x: 580, y: 350 },
          { id: 'R23', name: '工位B23', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 700, y: 350 },
          { id: 'R24', name: '工位B24', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 820, y: 350 },
          { id: 'R25', name: '工位B25', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 940, y: 350 },
          { id: 'R26', name: '工位B26', status: 'busy', hasPallet: true, currentTask: '加工中', nextTask: '待质检', x: 1060, y: 350 },
          { id: 'R27', name: '工位B27', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1180, y: 350 },
          { id: 'R28', name: '工位B28', status: 'busy', hasPallet: true, currentTask: '待转运', nextTask: null, x: 1300, y: 350 },
          { id: 'R29', name: '工位B29', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1420, y: 350 },
          { id: 'R30', name: '工位B30', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1540, y: 350 },
          { id: 'R31', name: '工位B31', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1660, y: 350 },
          { id: 'R32', name: '工位B32', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1780, y: 350 },
          { id: 'R33', name: '工位B33', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 1900, y: 350 },
          { id: 'R34', name: '工位B34', status: 'idle', hasPallet: false, currentTask: null, nextTask: null, x: 2020, y: 350 },
        ]
      }
    }
  },
  // 计算属性：自动计算统计数据
  computed: {
    // 空闲工位数量
    idleStations() {
      return this.stations.filter(s => s.status === 'idle').length
    },
    // 繁忙工位数量
    busyStations() {
      return this.stations.filter(s => s.status === 'busy').length
    },
    // 有托盘工位数量
    palletStations() {
      return this.stations.filter(s => s.hasPallet).length
    }
  },
  // 生命周期：页面加载完成后执行
  mounted() {
    this.initStations() // 初始化工位数据
    this.initGraph()    // 初始化画布
    this.startSimulation() // 启动数据模拟
  },
  // 生命周期：页面销毁前清理画布
  beforeDestroy() {
    if (this.graph) this.graph.dispose()
  },
  // 所有方法/功能都在这里
  methods: {
    // 把两行工位数据合并成一个数组
    initStations() {
      this.stations = [...this.stationData.row1, ...this.stationData.row2]
    },
    // 初始化绘图画布
    initGraph() {
      const container = this.$refs.graphContainer
      const width = container.clientWidth
      const height = container.clientHeight

      // 创建X6画布实例
      this.graph = new Graph({
        container, width, height,
        background: { color: '#f0f2f5' }, // 背景色
        grid: { size: 20, visible: true }, // 网格
        panning: { enabled: true }, // 按住shift可拖动
        mousewheel: { enabled: true }, // 按住ctrl可缩放
        interacting: { nodeMovable: false }, // 禁止拖动工位
        connecting: { enabled: false }, // 禁止手动连线
        selecting: { enabled: true, multiple: false } // 只能选一个工位
      })

      // 依次绘制轨道、工位、连线、RGV小车
      this.drawTrack()
      this.addStationNodes()
      this.addConnections()
      this.addRGV()
      this.graph.zoomToFit({ padding: 50 }) // 自适应显示
      this.bindGraphEvents() // 绑定点击事件
    },
    // 绘制RGV运行轨道
    drawTrack() {
      const trackY1 = 250, trackY2 = 260
      const startX = 90, endX = 2150

      // 画两条主轨道
      this.graph.addEdge({
        source: { x: startX, y: trackY1 }, target: { x: endX, y: trackY1 },
        attrs: { line: { stroke: '#5a626e', strokeWidth: 4 } }, zIndex: 1
      })
      this.graph.addEdge({
        source: { x: startX, y: trackY2 }, target: { x: endX, y: trackY2 },
        attrs: { line: { stroke: '#5a626e', strokeWidth: 4 } }, zIndex: 1
      })

      // 画横向虚线连接
      // for (let x = startX + 50; x < endX; x += 100) {
      //   this.graph.addEdge({
      //     source: { x: x, y: trackY1 }, target: { x: x, y: trackY2 },
      //     attrs: { line: { stroke: '#8c9a9e', strokeWidth: 2, strokeDasharray: '5,5' } }, zIndex: 1
      //   })
      // }
    },
    // 添加所有工位节点
    addStationNodes() {
      this.stations.forEach(station => {
        const node = this.graph.addNode({
          id: station.id, shape: 'rect', // 矩形
          x: station.x, y: station.y, width: 90, height: 80,
          attrs: {
            body: {
              fill: this.getStationColor(station.status), // 颜色根据状态变
              stroke: station.hasPallet ? '#ff9800' : '#40a9ff', // 边框颜色
              strokeWidth: station.hasPallet ? 3 : 2,
              rx: 8, ry: 8 // 圆角
            },
            label: { text: `${station.name}\n${station.hasPallet ? '📦' : '○'}`, fill: '#333', fontSize: 20 }
          },
          data: station // 把工位数据存在节点上
        })
      })
    },
    // 给每个工位画连线到轨道
    addConnections() {
      this.stations.forEach(station => {
        const trackY = station.y < 250 ? 250 : 260
        this.graph.addEdge({
          source: { cell: station.id },
          target: { x: station.x + 45, y: trackY },
          attrs: { line: { stroke: '#b0bec5', strokeWidth: 2, strokeDasharray: '5,5' } }
        })
      })
    },
    // 添加RGV小车（红色圆形）
    addRGV() {
      const rgvNode = this.graph.addNode({
        id: 'rgv', shape: 'circle',
        x: 100, y: 255, width: 30, height: 30,
        attrs: {
          body: { fill: '#ff6b6b', stroke: '#c92a2a', strokeWidth: 2 },
          label: { text: 'RGV', fill: '#fff' }
        }, zIndex: 10
      })
      // 小车呼吸灯效果
      setInterval(() => {
        rgvNode.attr('body/fill', '#ff8787')
        setTimeout(() => rgvNode.attr('body/fill', '#ff6b6b'), 300)
      }, 2000)
    },
    // 绑定画布点击事件
    bindGraphEvents() {
      // 左键点击：只保留选起点/终点，不弹出详情面板
      this.graph.on('node:click', ({ node }) => {
        if (node && node.data) {
          // 只执行选择工位（起点/终点），不触发详情面板
          this.selectStationForTask(node.data.id)
        }
      })

      // 右键点击：弹出详情面板
      this.graph.on('node:contextmenu', ({ node, e }) => {
        e.preventDefault() // 阻止浏览器默认右键菜单
        if (node && node.data) {
          // 右键点击时，计算面板位置并弹出
          this.showStationInfo(node.data.id)
        }
      })

      // 点击空白处：清空所有选择 + 关闭面板
      this.graph.on('blank:click', () => {
        this.resetSelection()
      })

      // 右键空白处：关闭面板
      this.graph.on('blank:contextmenu', ({ e }) => {
        e.preventDefault()
        this.clearStationSelection()
      })
    },
    // 左键点击：只负责选起点/终点，不弹面板
    selectStationForTask(stationId) {
      const station = this.stations.find(s => s.id === stationId)
      if (!station) return

      if (!this.selectedFrom) {
        this.selectedFrom = stationId
        this.highlightStation(stationId, '#1890ff')
      } else if (!this.selectedTo && this.selectedFrom !== stationId) {
        this.selectedTo = stationId
        this.highlightStation(stationId, '#52c41a')
      } else {
        this.selectedFrom = stationId
        this.selectedTo = null
        this.clearHighlight()
        this.highlightStation(stationId, '#1890ff')
      }
      // 👇 删掉原来的 this.selectedStation = station，不弹面板
      this.$forceUpdate()
    },
    // 右键点击：弹出工位详情面板
    showStationInfo(stationId) {
      const station = this.stations.find(s => s.id === stationId)
      if (!station) return

      // 1. 设置选中的工位数据（触发面板显示）
      this.selectedStation = station

      // 2. 计算面板位置（支持缩放/拖拽，永远紧贴工位右侧）
      const node = this.graph.getCellById(stationId)
      if (node) {
        const { x, y } = node.position()
        const zoom = this.graph.zoom()
        const tx = this.graph.translate().tx
        const ty = this.graph.translate().ty

        // 真实页面位置 = (原始坐标 + 偏移) * 缩放
        const realX = (x + tx) * zoom
        const realY = (y + ty) * zoom

        // 工位宽度90，间距8，紧贴右侧
        this.panelLeft = realX + 90 * zoom + 8
        this.panelTop = realY
      }

      this.$forceUpdate()
    },
    // 高亮选中的工位
    highlightStation(stationId, color) {
      const node = this.graph.getCellById(stationId)
      if (node) {
        node.attr('body/stroke', color)
        node.attr('body/strokeWidth', 4)
      }
    },
    // 清除所有工位高亮
    clearHighlight() {
      this.stations.forEach(station => {
        const node = this.graph.getCellById(station.id)
        if (node) {
          node.attr('body/stroke', station.hasPallet ? '#ff9800' : '#40a9ff')
          node.attr('body/strokeWidth', station.hasPallet ? 3 : 2)
        }
      })
    },
    // 开始执行转运任务
    async startTask() {
      // 校验选择
      if (!this.selectedFrom || !this.selectedTo) return
      const fromStation = this.stations.find(s => s.id === this.selectedFrom)
      const toStation = this.stations.find(s => s.id === this.selectedTo)

      // 业务校验
      if (!fromStation.hasPallet) { alert('起始工位无托盘！'); return }
      if (toStation.hasPallet) { alert('目标工位有托盘！'); return }

      // 执行动画 + 任务
      this.showTaskAnimation(this.selectedFrom, this.selectedTo)
      await this.simulateTask(fromStation, toStation)
      this.resetSelection()
    },
    // 模拟转运任务流程
    async simulateTask(fromStation, toStation) {
      // 1. 小车开到起点
      await this.moveRGV(fromStation.id)
      // 起点去掉托盘、变空闲
      fromStation.hasPallet = false
      fromStation.status = 'idle'
      this.updateStationNode(fromStation.id)

      // 2. 小车开到终点
      await this.moveRGV(toStation.id)
      // 终点加上托盘、变繁忙
      toStation.hasPallet = true
      toStation.status = 'busy'
      this.updateStationNode(toStation.id)
    },
    // 移动RGV小车到目标工位（动画）
    async moveRGV(targetStationId) {
      const rgvNode = this.graph.getCellById('rgv')
      const targetStation = this.stations.find(s => s.id === targetStationId)
      const targetX = targetStation.x + 30
      const targetY = 255

      // 平滑移动动画
      return new Promise((resolve) => {
        let startX = rgvNode.position().x
        const step = 10
        const interval = setInterval(() => {
          startX += step
          if (startX >= targetX) {
            rgvNode.position(targetX, targetY)
            clearInterval(interval)
            resolve()
          } else {
            rgvNode.position(startX, targetY)
          }
        }, 20)
      })
    },
    // 任务执行高亮动画
    showTaskAnimation(fromId, toId) {
      const fromNode = this.graph.getCellById(fromId)
      const toNode = this.graph.getCellById(toId)
      fromNode.attr('body/fill', '#ffd966')
      toNode.attr('body/fill', '#ffd966')
      setTimeout(() => {
        fromNode.attr('body/fill', this.getStationColor(fromNode.data.status))
        toNode.attr('body/fill', this.getStationColor(toNode.data.status))
      }, 1000)
    },
    // 更新工位显示样式
    updateStationNode(stationId) {
      const station = this.stations.find(s => s.id === stationId)
      const node = this.graph.getCellById(stationId)

      // ✅ 加了安全判断：没有节点就直接返回，不执行！
      if (!node || !station) return

      node.attr('body/fill', this.getStationColor(station.status))
      node.attr('body/stroke', station.hasPallet ? '#ff9800' : '#40a9ff')
      node.attr('body/strokeWidth', station.hasPallet ? 3 : 2)
      node.attr('label/text', `${station.name}\n${station.hasPallet ? '📦' : '○'}`)
      node.setData(station)
    },
    // 清空所有选择
    resetSelection() {
      this.selectedFrom = null
      this.selectedTo = null
      this.selectedStation = null
      this.clearHighlight()
    },
    // 关闭工位详情
    clearStationSelection() {
      this.selectedStation = null
      // 重置面板位置，避免下次打开错位
      this.panelTop = 0
      this.panelLeft = 0
    },
    // 随机刷新工位数据
    refreshData() {
      this.resetSelection()
      this.clearStationSelection()

      this.stations.forEach(station => {
        if (Math.random() > 0.7) {
          station.status = Math.random() > 0.5 ? 'idle' : 'busy'
          station.hasPallet = station.status === 'busy'

          // ✅ 安全更新
          this.updateStationNode(station.id)
        }
      })
    },
    // 根据状态返回颜色
    getStationColor(status) {
      return status === 'idle' ? '#e6f7ff' : '#fff1f0'
    },
    // 状态文字
    getStatusText(status) {
      return status === 'idle' ? '空闲' : '繁忙'
    },
    // 状态样式
    getStatusClass(status) {
      return status === 'idle' ? 'status-idle' : 'status-busy'
    },
    // 定时自动模拟工位状态变化
    startSimulation() {
      setInterval(() => {
        if (!this.stations || this.stations.length === 0) return
        const randomStation = this.stations[Math.floor(Math.random() * this.stations.length)]
        if (randomStation && Math.random() > 0.8) {
          randomStation.hasPallet = !randomStation.hasPallet
          randomStation.status = randomStation.hasPallet ? 'busy' : 'idle'
          this.updateStationNode(randomStation.id)
        }
      }, 10000)
    },
  }
}
</script>

<!-- 样式：scoped表示只在当前组件生效 -->
<style scoped>
/* 页面整体布局 */
.factory-map {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

/* 顶部工具栏样式 */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 10;
}

/* 统计数据样式 */
.stats {
  display: flex;
  gap: 20px;
}

/* 按钮样式 */
.btn-primary, .btn-secondary, .btn-small {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
}

/* 主要按钮（蓝色） */
.btn-primary {
  background: #1890ff;
  color: white;
}

/* 次要按钮（灰色） */
.btn-secondary {
  background: #f0f2f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

/* 画布容器 */
.graph-container {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.graph {
  width: 100%;
  height: 100%;
}

/* 右侧工位详情面板 */
.info-panel {
  position: absolute;
  width: 280px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 999;
  /* 去掉动画，保证位置精准 */
}

/* 状态文字颜色：空闲绿色，繁忙红色 */
.status-idle { color: #52c41a; font-weight: bold; }
.status-busy { color: #ff4d4f; font-weight: bold; }
</style>