wms / wms4_zhongputaicang · Files

<template>
  <a-card :bordered="false" class="agv-task-container">
    <!-- 站台选择对话框 -->
    <a-modal
      v-if="showStationModal"
      :visible="showStationModal"
      title="请选择机台"
      :footer="null"
      :closable="false"
      width="600px"
      :centered="true"
    >
      <station-select @select="handleStationSelect"/>
    </a-modal>

    <div class="flex-container">
      <!-- 左侧表单区域 -->
      <div class="left-panel">
        <a-form
          ref="formRef"
          :model="formData"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          class="task-form"
        >
          <!-- 第一行：工位和托盘类型 -->
          <a-form-item
            label="工位："
            class="inline-form-item"
            :rules="[{ required: true, message: '请选择或输入工位!' }]"
          >
            <a-select
              v-model="formData.workstation"
              placeholder="请选择工位"
              style="width: 100%"
              show-search
              allow-clear
              :filter-option="filterOption"
              @change="handleWorkstationChange"
            >
              <a-select-option v-for="item in workstationList" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="托盘类型："
            class="inline-form-item"
            :rules="[{ required: true, message: '请选择托盘类型!' }]"
          >
            <j-search-select-tag
              placeholder="请选择托盘类型"
              v-model="formData.containerType"
              dict="container_type,name,code,code='A' OR code='B' OR code='LS'"
              :pageSize="5"
              :async="true"
              style="width: 100%"
            />
          </a-form-item>

          <!-- 第二行：卷号输入 -->
          <a-form-item
            label="卷号："
            :rules="[{ required: true, message: '请输入卷号!' }]"
          >
            <div class="roll-number-input-wrapper">
              <a-input
                v-model="currentRollNumber"
                placeholder="请输入卷号，按回车确认"
                @keyup.enter="handleAddRollNumber"
                :auto-focus="true"
                style="width: 100%"
                :disabled="!formData.workstation || !formData.containerType"
              >
                <a-icon slot="prefix" type="barcode" style="color: rgba(0,0,0,.25)"/>
                <a-button
                  slot="addonAfter"
                  type="primary"
                  icon="plus"
                  @click="handleAddRollNumber"
                  :disabled="!currentRollNumber.trim()"
                  size="small"
                >
                  添加
                </a-button>
              </a-input>
            </div>
          </a-form-item>

          <!-- 第三行：卷号列表 -->
          <a-form-item label="已输入卷号：" v-if="rollNumberList.length > 0">
            <div class="roll-number-list">
              <div class="roll-number-list-header">
                <span class="list-title">卷号列表 ({{ rollNumberList.length }})</span>
                <a-button
                  type="link"
                  size="small"
                  @click="clearRollNumberList"
                  class="clear-btn"
                >
                  <a-icon type="delete"/>
                  清空
                </a-button>
              </div>

              <div class="roll-number-items">
                <div
                  v-for="(roll, index) in rollNumberList"
                  :key="index"
                  class="roll-number-item"
                  :class="{ 'last-added': index === rollNumberList.length - 1 }"
                >
                  <div class="roll-number-content">
                    <span class="roll-index" style="margin-right: 3px">{{ index + 1 }}.</span>
                    <span class="roll-value"
                          style="margin-right: 12px; font-size: 16px; font-weight: 600; color: #1890ff">{{
                        roll
                      }}</span>
                    <span class="roll-time" style="margin-right: 8px">{{ formatTime(rollTimestamp[index]) }}</span>
                    <a-icon
                      type="close-circle"
                      class="remove-icon"
                      @click="removeRollNumber(index)"
                    />
                  </div>
                </div>
              </div>

              <div class="roll-number-summary">
                <span class="summary-text">总计: {{ rollNumberList.length }} 卷</span>
                <span v-if="formData.containerType" class="pallet-type">
                  托盘类型: {{ getContainerTypeName(formData.containerType) }}
                </span>
              </div>
            </div>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 8 }">
            <div class="toolbox-buttons">
              <a-button type="primary" @click="callEmptyOut" class="btn-info">
                呼叫空托盘
              </a-button>
              <a-button type="primary" @click="stageingReceipt" class="btn-success">
                点位入库
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>

      <!-- 右侧操作区域 -->
      <div class="right-panel">
        <div class="station-info">
          <div class="station-header">
            <span class="station-title">{{ stationInfo }}</span>
            <div class="station-controls">
              <!--              <a-select-->
              <!--                v-model="selectedGoodsShelf"-->
              <!--                style="width: 120px; margin-right: 10px"-->
              <!--                placeholder="点位"-->
              <!--              >-->
              <!--                <a-select-option value="">点位号</a-select-option>-->
              <!--                <a-select-option-->
              <!--                  v-for="shelf in goodsShelfList"-->
              <!--                  :key="shelf.goodsShelfNo"-->
              <!--                  :value="shelf.goodsShelfNo"-->
              <!--                >-->
              <!--                  {{ shelf.goodsShelfNo }}-->
              <!--                </a-select-option>-->
              <!--              </a-select>-->
              <!--              <a-button type="primary" @click="handleManualCall" class="btn-info">-->
              <!--                呼叫空托盘-->
              <!--              </a-button>-->
            </div>
          </div>

          <a-divider style="margin: 10px 0; background: white"/>

          <!-- 货架网格展示 -->
          <div class="shelf-grid-container">
            <div class="grid-table">
              <div class="grid-header">
                <div class="grid-cell">点 位 监 控</div>
                <!--                <div class="grid-cell"></div>-->
              </div>

              <div class="grid-container">
                <a-tooltip
                  v-for="(cell, index) in gridRows"
                  :key="cell.id || index"
                  :title="getTooltipContent(cell)"
                  placement="top"
                >
                  <!--                    @mouseenter="handleCellHover(cell)"-->
                  <!--                    @mouseleave="handleCellLeave"-->
                  <div
                    class="grid-cell"
                    :class="getGridCellClass(cell)"
                    :style="getGridCellStyle(cell)"
                    @click="handleCellClick(cell)"
                    :data-point="cell.code"
                    :data-status="cell.status"
                  >
                    <div class="grid-content">
                      {{ getCellDisplayContent(cell) }}
                    </div>
                  </div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部表格区域 -->
    <div class="bottom-tables">
      <a-tabs default-active-key="1" @change="reloadBottom">
        <a-tab-pane key="1" tab="当前任务">
          <MachineAgvTask ref="machineAgvTask"/>
        </a-tab-pane>

        <a-tab-pane key="2" tab="生产加工单">
          <MachineProductionOrderHeader ref="machineProductionOrderHeader"/>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 详情提示框 -->
    <a-modal
      v-if="showDetailModal && hoveredCell"
      :visible="showDetailModal"
      :title="`点位详情 - ${hoveredCell.code}`"
      @cancel="handleModalClose"
      :footer="null"
      width="500px"
      :mask="false"
      :wrapClassName="'cell-detail-modal'"
      :style="{position: 'fixed',top: `${modalPosition.y}px`,left: `${modalPosition.x}px`}">
      <!-- modal内容保持不变 -->
      <div class="cell-detail-content">
        <div class="detail-item">
          <span class="detail-label">点位编码：</span>
          <span class="detail-value">{{ hoveredCell.code }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">状态：</span>
          <span class="detail-value">
            <a-tag :color="getStatusColor(hoveredCell.status)">
              {{ hoveredCell.status_dictText }}
            </a-tag>
          </span>
        </div>
        <div class="detail-item">
          <span class="detail-label">任务：</span>
          <span class="detail-value">
            <a-tag :color="'orange'">
              {{ "起始位置：P0001 -> 目标位置：A1P011001" }}
            </a-tag>
          </span>
        </div>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {mixinDevice} from '@/utils/mixin'
// import JTable from '@/components/jeecg/JTable'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import StationSelect from "./StationSelect.vue";
import MachineProductionOrderHeader from "./MachineProductionOrderHeader.vue";
import MachineAgvTask from "./MachineAgvTask.vue";

export default {
  name: 'MachineOperation1',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    // JTable,
    JDictSelectTag,
    StationSelect,
    MachineProductionOrderHeader,
    MachineAgvTask
  },
  data() {
    return {
      description: '机台操作页',
      modalPosition: {
        x: 0,
        y: 0
      },
      // 表单数据
      formData: {
        workstation: '',
        containerType: '',
      },
      // 当前输入的卷号
      currentRollNumber: '',
      // 卷号列表
      rollNumberList: [],
      // 卷号时间戳
      rollTimestamp: [],
      // 工位列表
      workstationList: [
        {value: 'A1P011001', label: '工位001 - 纵切线'},
        {value: 'A1P011002', label: '工位002 - 纵切线'},
        {value: 'A1P011003', label: '工位003 - 包装线'},
        {value: 'A1P011004', label: '工位004 - 检验线'},
        {value: 'A1P011005', label: '工位005 - 纵切线'},
      ],
      // 托盘类型映射
      containerTypeMap: {
        'A': '大托盘',
        'B': '小托盘',
        'LS': '悬臂库工装托盘'
      },
      // 站台信息
      stationInfo: '纵切机台1',
      currentStation: '1',
      showStationModal: true, // 默认关闭，直接使用1号站台
      // 网格数据
      gridRows: [],
      // 详情对话框相关
      showDetailModal: false,
      hoveredCell: null,
      hoverTimer: null,
      url: {
        list: "111",
      },
      // 对话框状态
      showCancelModal: false,
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.handleResize)
      this.handleResize()
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  computed: {
    // 是否可以提交
    canSubmit() {
      return this.formData.workstation &&
        this.formData.containerType
    }
  },
  methods: {
    // 初始化数据
    initData() {
      // 使用提供的网格数据
      this.loadGridData();
    },
    // 加载网格数据
    loadGridData() {
      const rawData = [
        {
          "status_dictText": "空闲",
          "haveContainer_dictText": "没有",
          "code": "A1P011001",
          "containerCode": "",
          "status": "empty"
        },
        {
          "status_dictText": "空闲",
          "haveContainer_dictText": "有",
          "code": "A1P011002",
          "containerCode": "S00012",
          "status": "empty"
        },
        {
          "status_dictText": "锁定",
          "haveContainer_dictText": "没有",
          "code": "A1P011003",
          "containerCode": "",
          "status": "lock"
        },
        {
          "status_dictText": "空闲",
          "haveContainer_dictText": "没有",
          "code": "A1P011004",
          "containerCode": "",
          "status": "empty"
        },
        {
          "status_dictText": "锁定",
          "haveContainer_dictText": "有",
          "code": "A1P011005",
          "containerCode": "S00013",
          "status": "lock"
        }

      ]

      // 转换为网格数据格式
      this.gridRows = rawData.map((item, index) => ({
        ...item,
        id: `grid-${index}`,
        level: parseInt(item.code.match(/\d+/g)[0]) || 1,
        side: item.code.charAt(0),
        x: index,
        y: 1
      }))
    },
    // 获取网格单元格样式
    getGridCellClass(cell) {
      return {
        'grid-selected': cell.status === 'empty' && cell.haveContainer_dictText === '有',
        'grid-lock': cell.status === 'lock',
        'grid-empty': cell.status === 'empty' && cell.haveContainer_dictText === '没有'
      }
    },
    getGridCellStyle(cell) {
      let backgroundColor = '#4F94CD' // 默认蓝色
      if (cell.status === 'lock') {
        backgroundColor = '#ff7875' // 浅红色 - lock状态
      } else if (cell.status === 'empty') {
        if (cell.haveContainer_dictText === '有') {
          backgroundColor = '#69c0ff' // 浅蓝色 - 有托盘的空闲状态
        } else {
          backgroundColor = '#95de64' // 浅绿色 - 无托盘的空闲状态
        }
      }
      return {backgroundColor}
    },
    // 获取状态颜色
    getStatusColor(status) {
      const colorMap = {
        'empty': 'green',
        'lock': 'orange',
        'occupied': 'blue'
      }
      return colorMap[status] || 'default'
    },
    // 获取单元格显示内容
    getCellDisplayContent(cell) {
      if (cell.containerCode) {
        return cell.containerCode
      }
      // // 解析点位编码，显示更简洁的信息
      // const code = cell.code
      // // 例如：A1P011001 -> 显示为 A1-001
      // const match = code.match(/([A-Z])(\d+)P\d+(\d{3})/)
      // if (match) {
      //   return `${match[1]}${match[2]}-${match[3]}`
      // }
      // return cell.code
    },
    // 获取工具提示内容
    getTooltipContent(cell) {
      const lines = [
        `点位编码: ${cell.code}`,
        `状态: ${cell.status_dictText}`,
        `托盘状态: ${cell.haveContainer_dictText}`
      ]

      if (cell.containerCode) {
        lines.push(`容器编码: ${cell.containerCode}`)
      }

      return lines.join('\n')
    },
    handleCellClick(cell){
      this.hoveredCell = cell;
      this.showDetailModal = true;
    },
    // 鼠标进入单元格
    handleCellHover(cell) {
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer);
      }
      // 记录鼠标位置
      if (event) {
        this.modalPosition = {
          x: event.clientX + 10, // 稍微偏移，避免遮挡
          y: event.clientY + 10
        };
      }
      this.hoverTimer = setTimeout(() => {
        this.hoveredCell = cell;
        this.showDetailModal = true;
      }, 500);
    },

    // 鼠标离开单元格
    handleCellLeave() {
      // 清除计时器，防止在离开后仍然触发显示
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer);
        this.hoverTimer = null;
      }
    },

    // 关闭modal时清理数据
    handleModalClose() {
      this.showDetailModal = false;
      this.hoveredCell = null;
    },
    //点位入库
    async stageingReceipt() {
      if (!this.formData.taskId) {
        this.$message.warning('没有找到对应的任务')
        return
      }
      console.log('入库:', {
        id: this.formData.id,
        taskId: this.formData.taskId,
        num: this.formData.num
      })
      //
      const mockResponse = {
        success: true,
        message: '操作成功'
      }
      if (mockResponse.success) {
        this.$message.success(mockResponse.message)
        // 模拟重新加载数据
        this.handleGoodsShelfSearch()
        this.formData.goodsNo = ''
        this.$nextTick(() => {
          // const input = this.$refs.formRef?.$el?.querySelector('input[placeholder="请输入货架号"]')
          // if (input) input.focus()
        })
      } else {
        this.$message.error(mockResponse.message || '操作失败')
      }
    },
    // 添加工位搜索过滤
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 工位选择变化
    handleWorkstationChange(value) {
      console.log('工位选择:', value)
    },
    // 添加卷号
    handleAddRollNumber() {
      const rollNumber = this.currentRollNumber.trim()

      if (!rollNumber) {
        this.$message.warning('请输入卷号')
        return
      }

      if (!this.formData.workstation) {
        this.$message.warning('请先选择工位')
        return
      }

      if (!this.formData.containerType) {
        this.$message.warning('请先选择托盘类型')
        return
      }

      // 检查是否重复
      if (this.rollNumberList.includes(rollNumber)) {
        this.$message.warning('卷号已存在，请勿重复输入')
        this.currentRollNumber = ''
        return
      }

      // 添加到列表
      this.rollNumberList.push(rollNumber)
      this.rollTimestamp.push(new Date())

      // 清空输入框并重新聚焦
      this.currentRollNumber = ''
      // this.$nextTick(() => {
      //   const input = this.$refs.formRef?.$el?.querySelector('input[placeholder="请输入卷号，按回车确认"]')
      //   if (input) input.focus()
      // })

      // 显示成功消息
      this.$message.success(`卷号 "${rollNumber}" 已添加`)
    },
    // 移除卷号
    removeRollNumber(index) {
      this.rollNumberList.splice(index, 1)
      this.rollTimestamp.splice(index, 1)
      this.$message.info('卷号已移除')
    },
    // 清空卷号列表
    clearRollNumberList() {
      if (this.rollNumberList.length === 0) return

      this.$confirm({
        title: '确认清空',
        content: '确定要清空所有卷号吗？',
        onOk: () => {
          this.rollNumberList = []
          this.rollTimestamp = []
          this.$message.info('卷号列表已清空')
        }
      })
    },
    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
    },
    // 获取托盘类型名称
    getContainerTypeName(code) {
      return this.containerTypeMap[code] || code
    },
    // 呼叫空托盘
    async callEmptyOut() {
      if (!this.canSubmit) {
        this.$message.warning('请先完成工位、托盘类型选择和卷号输入')
        return
      }

      const submitData = {
        workstation: this.formData.workstation,
        containerType: this.formData.containerType,
        rollNumbers: this.rollNumberList,
        timestamp: new Date(),
        // 可以添加其他需要的数据
      }

      console.log('提交数据:', submitData)

      try {
        // 这里调用实际的API
        // const res = await this.$http.post('/api/agv/return', submitData)

        // 模拟成功
        this.$message.success('呼叫空托指令已发送')

        // 清空表单（可选）
        // this.resetForm()
      } catch (error) {
        this.$message.error('提交失败')
      }
    },
    // 机台选择
    handleStationSelect(station) {
      this.currentStation = station
      this.stationInfo = `${station}`
      //根据machineCode查询对应的AGV任务和生产加工单
      if (station) {
        this.$refs.machineAgvTask.edit(station);
      }
      this.showStationModal = false
    },
    // 切换tabs
    reloadBottom(key) {
      if (key === "1") {
        this.$refs.machineAgvTask.edit(this.currentStation);
      } else if (key === "2") {
        console.log("reloadBottom currentStation", this.currentStation)
        this.$refs.machineProductionOrderHeader.edit(this.currentStation);
      }
    },
    handleResize() {
      // 可以在这里添加响应式布局的逻辑
      console.log('窗口大小变化，当前宽度:', window.innerWidth)
    },
  }
}
</script>

<style scoped lang="less">
.agv-task-container {
  .flex-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    /* 左侧面板容器 */

    .left-panel {
      flex: 2;
      margin-right: 10px; /* 减少右边距，让左右更靠近 */

      .task-form {
        padding: 24px; /* 稍微减少内边距 */
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), /* 减少阴影强度 */ 0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        height: 100%; /* 确保高度充满 */
        box-sizing: border-box;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
          0 2px 6px rgba(0, 0, 0, 0.08);
        }

        /deep/ .ant-form-item {
          margin-bottom: 18px; /* 适当减少间距 */

          &:last-child {
            margin-bottom: 0;
          }
        }

        /deep/ .ant-form-item-label {
          label {
            font-size: 15px; /* 稍小一点 */
            font-weight: 600;
            color: #1a1a1a;
            display: flex;
            align-items: center;
            height: 36px; /* 固定高度对齐 */

            &::before {
              content: "▸"; /* 使用箭头符号，更简洁 */
              color: #1890ff;
              margin-right: 6px;
              font-size: 14px;
              transform: translateY(-1px);
            }
          }
        }

        /deep/ .ant-form-item-control-input {
          input {
            font-size: 15px;
            height: 36px; /* 降低高度 */
            border-radius: 6px;
            border: 1px solid #e8e8e8;
            transition: all 0.2s;

            &:hover {
              border-color: #40a9ff;
            }

            &:focus {
              border-color: #1890ff;
              box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
            }

            &.ant-input[readonly] {
              background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
              border-color: #f0f0f0;
              color: #595959;
              cursor: default;
            }
          }

          /* 数量输入框特殊样式 */

          .ant-input-group-wrapper {
            display: flex;
            align-items: center;

            .ant-input {
              flex: 1;
            }

            .ant-input-group-addon {
              background: transparent;
              border: none;
              padding: 0 10px;
              color: #666;
              font-size: 14px;
            }
          }
        }

        /* 按钮区域样式 */

        /deep/ .ant-form-item:last-child {
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px solid #f0f0f0;

          .toolbox-buttons {
            display: flex;
            gap: 8px; /* 减少按钮间距 */
            justify-content: space-between;
            flex-wrap: wrap;

            .ant-btn {
              flex: 1;
              min-width: 90px; /* 最小宽度 */
              height: 36px;
              border-radius: 6px;
              font-size: 14px;
              font-weight: 500;
              transition: all 0.2s;

              &.btn-success {
                background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
                border: none;
                color: white;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 3px 8px rgba(82, 196, 26, 0.3);
                }
              }

              &.btn-info {
                background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
                border: none;
                color: white;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 3px 8px rgba(24, 144, 255, 0.3);
                }
              }

              &.btn-danger {
                background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
                border: none;
                color: white;

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 3px 8px rgba(255, 77, 79, 0.3);
                }
              }
            }
          }
        }
      }
    }

    /* 右侧面板容器 */

    .right-panel {
      flex: 1;
      margin-left: 10px; /* 与左侧保持一致的间距 */

      .station-info {
        background: #fff;
        border-radius: 12px; /* 圆角与左侧一致 */
        padding: 20px;
        height: 100%; /* 使用100%高度，让父容器控制 */
        box-sizing: border-box;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12),
          0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .station-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
          padding-bottom: 12px;
          border-bottom: 1px solid #f0f0f0; /* 添加分割线 */

          .station-title {
            font-size: 18px; /* 稍小一点 */
            line-height: 1.4;
            color: #1890ff; /* 使用主题色 */
            font-weight: 700;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif; /* 现代字体 */
            display: flex;
            align-items: center;

            &::before {
              content: "📍"; /* 添加图标 */
              margin-right: 8px;
              font-size: 16px;
            }
          }

          .station-controls {
            display: flex;
            align-items: center;
            gap: 10px; /* 使用gap间距 */

            .ant-select {
              width: 130px; /* 固定宽度 */
              height: 36px;

              .ant-select-selector {
                border-radius: 6px;
                border: 1px solid #e8e8e8;
                transition: all 0.2s;

                &:hover {
                  border-color: #40a9ff;
                }
              }
            }

            .ant-btn {
              height: 36px;
              border-radius: 6px;
              font-size: 14px;
              font-weight: 500;
              background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
              border: none;
              color: white;
              padding: 0 16px;
              transition: all 0.2s;

              &:hover {
                transform: translateY(-1px);
                box-shadow: 0 3px 8px rgba(82, 196, 26, 0.3);
              }

              &:active {
                transform: translateY(0);
              }
            }
          }
        }

        /* 分割线样式 */

        .ant-divider {
          margin: 12px 0;
          background: #f0f0f0;
        }

        .shelf-grid-container {
          margin-top: 30px; /* 减少上边距 */

          .grid-table {
            display: inline-block;
            width: 100%;

            /* 添加容器阴影和背景 */
            padding: 15px;
            background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
            border-radius: 10px;
            border: 1px solid #f0f0f0;

            .grid-header {
              display: flex;
              gap: 15px; /* 减少间隙 */
              margin-bottom: 10px;
              padding: 0 5px;

              .grid-cell {
                flex: 1;
                min-width: 0; /* 允许缩小 */
                text-align: center;
                font-size: 16px;
                color: #1890ff;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                font-weight: 600;
                padding: 8px 0;
                background: rgba(24, 144, 255, 0.1);
                border-radius: 6px;
                letter-spacing: 1px;
              }
            }

            .grid-container {
              display: grid;
              gap: 15px; /* 减少间隙 */
              grid-template-columns: repeat(3, 1fr); /* 关键：每行3列 */
              margin-bottom: 8px;

              &:last-child {
                margin-bottom: 0;
              }

              .grid-cell {
                flex: 1;
                min-width: 0; /* 允许缩小 */
                height: 60px;
                //background: linear-gradient(135deg, #4F94CD 0%, rgb(255,255,0) 100%);
                border-radius: 8px; /* 更大的圆角 */
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                position: relative;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
                border: 2px solid transparent;

                /* 添加3D效果 */
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);

                &:hover {
                  transform: translateY(-2px);
                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2);
                  border-color: rgba(24, 144, 255, 0.5);
                }

                &:active {
                  transform: translateY(0);
                }

                ///* 选中状态 */
                //
                //&.grid-selected {
                //  //background: linear-gradient(135deg, rgb(236, 71, 88) 0%, rgb(255, 120, 117) 100%);
                //  border-color: #ff4d4f;
                //  animation: pulse 2s infinite;
                //
                //  &::before {
                //    content: "✓";
                //    position: absolute;
                //    top: 4px;
                //    right: 4px;
                //    color: white;
                //    font-size: 12px;
                //    font-weight: bold;
                //    background: rgba(255, 255, 255, 0.3);
                //    width: 16px;
                //    height: 16px;
                //    border-radius: 50%;
                //    display: flex;
                //    align-items: center;
                //    justify-content: center;
                //  }
                //}
                //
                ///* 占用状态 */
                //
                //&.grid-lock {
                //  //background: linear-gradient(135deg, rgb(255, 255, 0) 0%, rgb(255, 255, 150) 100%);
                //  border-color: #ffc53d;
                //
                //  &::before {
                //    content: "●";
                //    position: absolute;
                //    top: 4px;
                //    right: 4px;
                //    color: #faad14;
                //    font-size: 12px;
                //  }
                //}
                //
                ///* 空闲状态hover效果 */
                //
                //&:not(.grid-selected):not(.grid-lock):hover {
                //  //background: linear-gradient(135deg, #6ba8e0 0%, #8bc1f7 100%);
                //}

                .grid-content {
                  font-size: 14px; /* 使用固定px，避免vh单位问题 */
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  width: 90%;
                  color: white;
                  font-weight: 500;
                  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                  padding: 0 8px;

                  /* 为空时显示占位符 */

                  &:empty::before {
                    content: "空闲";
                    color: rgba(255, 255, 255, 0.7);
                    font-size: 12px;
                  }
                }

                /* 添加网格坐标提示 */

                &::after {
                  content: attr(data-point); /* 改为显示点位号 */
                  position: absolute;
                  bottom: 4px;
                  left: 8px;
                  font-size: 10px;
                  color: rgba(255, 255, 255, 0.6);
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }

    /* 脉冲动画 */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(236, 71, 88, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.1);
      }
      70% {
        box-shadow: 0 0 0 6px rgba(236, 71, 88, 0),
        0 2px 4px rgba(0, 0, 0, 0.1);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(236, 71, 88, 0),
        0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
      .right-panel {
        .station-info {
          .shelf-grid-container {
            .grid-table {
              .grid-header,
              .grid-row {
                gap: 10px;
              }

              .grid-cell {
                height: 55px;

                .grid-content {
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }

  .bottom-tables {
    background: #fff;
    border-radius: 4px;
    padding: 20px;

    /deep/ .ant-tabs-bar {
      margin-bottom: 16px;
    }
  }
}

/* 详情弹窗内容样式 */
.cell-detail-content {
  padding: 20px 0;
}
.detail-item {
  display: flex;
  align-items: flex-start; /* 顶部对齐，适合多行内容 */
  margin-bottom: 5px; /* 更大的间距 */
  line-height: 2; /* 更大的行高 */
  padding: 5px 0; /* 每项内部也有间距 */
}
.detail-label {
  font-weight: 600;
  color: #595959; /* 稍微深一点的颜色 */
  min-width: 110px; /* 更宽的标签区域 */
  flex-shrink: 0;
  font-size: 15px;
  letter-spacing: 0.5px; /* 字间距 */
}
.detail-value {
  color: #262626; /* 更深的文字颜色 */
  flex: 1;
  word-break: break-all;
  font-size: 15px;
  padding-left: 4px;
}
.detail-item .ant-tag {
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 4px;
  margin: 2px 0;
}
.detail-value .ant-tag {
  display: inline-block;
  max-width: 100%;
  white-space: normal; /* 允许标签内文字换行 */
  word-break: break-word;
}
</style>