bxztApp/packages/screen/src/views/3DSituationalAwarenessRefactor/components/RightPanel/DispatchCommand.vue

<template>
  <div class="dispatch-command">
    <div class="dispatch-command__tabs">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        class="tab-item"
        :class="{ 'tab-item--active': activeTab === tab.key }"
        @click="changeTab(tab.key)"
      >
        <span class="tab-label">{{ tab.label }}({{ tab.count }})</span>
      </div>
    </div>

    <div class="dispatch-command__table">
      <div class="table-header">
        <span class="col-index">序号</span>
        <span class="col-name">{{ getColumnName('name') }}</span>
        <span class="col-dept">{{ getColumnName('dept') }}</span>
        <span class="col-location">位置信息(公里)</span>
        <span class="col-action">操作</span>
      </div>

      <div class="table-body">
        <div
          v-for="(item, index) in currentList"
          :key="item.id"
          class="table-row"
        >
          <span class="col-index">{{ index + 1 }}</span>
          <span class="col-name">{{ item.name }}</span>
          <span class="col-dept">{{ item.department || item.type || '-' }}</span>
          <span class="col-location">{{ item.distance || item.altitude || '-' }}</span>
          <button class="col-action" @click="linkToItem(item)">
            联动
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useForceDispatch } from '../../composables/useForceDispatch'

const {
  activeTab,
  tabs,
  currentList,
  changeTab,
  linkToItem
} = useForceDispatch()

const getColumnName = (type) => {
  const nameMap = {
    personnel: { name: '单兵名称', dept: '部门' },
    equipment: { name: '设备名称', dept: '设备类型' },
    drone: { name: '无人机编号', dept: '飞行高度' }
  }
  return nameMap[activeTab.value]?.[type] || '名称'
}
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;
@use '../../assets/styles/common.scss' as *;

.dispatch-command {
  padding: 0;

  &__tabs {
    display: flex;
    gap: vw(8);
    margin-bottom: vh(16);

    .tab-item {
      flex: 1;
      padding: vh(5) vw(16);
      // background: rgba(20, 53, 118, 0.3);
      background: url('../../assets/images/tab未选中.png') no-repeat center center;
      background-size: 100% 100%;
      border-radius: vw(6) vw(6) 0 0;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      .tab-label {
        color: var(--text-white);
        font-size: fs(13);
        font-family: SourceHanSansCN-Medium, sans-serif;
      }

      &--active {
        // background: var(--primary-light);
        background: url('../../assets/images/tab选中.png') no-repeat center center;
        background-size: 100% 100%;
      }

      &:hover:not(&--active) {
        // background: rgba(20, 53, 118, 0.5);
        background: url('../../assets/images/tab选中.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
  }

  &__table {
    background: rgba(20, 53, 118, 0.2);
    border-radius: vw(6);
    overflow: hidden;

    .table-header {
      display: grid;
      grid-template-columns: vw(50) 1fr 1fr 1fr vw(80);
      gap: vw(8);
      padding: vh(12) vw(16);
      background: rgba(20, 53, 118, 0.5);
      color: var(--text-white);
      font-size: fs(13);
      font-family: SourceHanSansCN-Medium, sans-serif;
      font-weight: 500;
      text-align: center;

      .col-index {
        text-align: left;
      }
    }

    .table-body {
      max-height: vh(200);
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: vw(4);
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: var(--primary-light);
        border-radius: vw(2);
      }

      .table-row {
        display: grid;
        grid-template-columns: vw(50) 1fr 1fr 1fr vw(80);
        gap: vw(8);
        padding: vh(12) vw(16);
        color: var(--text-white);
        font-size: fs(12);
        font-family: SourceHanSansCN-Regular, sans-serif;
        text-align: center;
        border-bottom: 1px solid rgba(28, 161, 255, 0.1);

        &:hover {
          background: rgba(28, 161, 255, 0.1);
        }

        .col-index {
          text-align: left;
        }

        .col-action {
          padding: vh(4) vw(12);
          background: transparent;
          border: 1px solid var(--primary-color);
          border-radius: vw(4);
          color: var(--primary-color);
          font-size: fs(12);
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background: var(--primary-color);
            color: var(--text-white);
          }
        }
      }
    }
  }
}
</style>