g-cesium-map/public/map/components/PortOverview.vue

<template>
  <div class="port-overview">
    <div class="left" style="width: 500px;">
      <div class="card digital-twin-card--deep-blue ">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <div class="card-title">
            <div class="vertical-line"></div>
            <img src="@/assets/svgs/data.svg" class="title-icon" />
            <span class="title-text">船舶状态</span>
          </div>
          <input class="search-container" type="text" placeholder="搜索船舶" v-model="searchKeyword"
            @input="handleSearch" />
        </div>

        <div class=" card-content">
          <div class="ship-table">
            <div class="ship-table-header">
              <div class="ship-table-column ship-name-header">轮船名称</div>
              <div class="ship-table-column ship-status-header">状态</div>
            </div>
            <div class="ship-table-body">
              <div v-for="ship in filteredShipStatusData" :key="ship.id" class="ship-table-row"
                @click="handleSwitch(ship)">
                <div class="ship-table-column ship-name">
                  <div class="ship-icon">🚢</div>
                  <span class="ship-name-text">{{ ship.shipBasicInfo.name }}</span>
                </div>
                <div class="ship-table-column ship-status">
                  <div class="status-tag" :class="getStatusClass('正常')">
                    正常
                  </div>
                  <div class="status-tag" :class="getStatusClass('空闲')">
                    空闲
                  </div>
                  <div class="status-tag" :class="getStatusClass('故障')">
                    故障
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right" style="width: 1000px;">
      <div v-if="selectedShip" class="right-two-row">
        <div class="card digital-twin-card--deep-blue">
          <div class="card-title">
            <div class="vertical-line"></div>
            <img src="@/assets/svgs/data.svg" class="title-icon" />
            <span class="title-text">船舶详情</span>
          </div>
          <div class="card-content">
            <div class="ship-detail">
              <div class="detail-item">
                <span class="label">船名:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.name }}</span>
              </div>
              <div class="detail-item">
                <span class="label">英文船名:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.nameEn }}</span>
              </div>
              <div class="detail-item">
                <span class="label">船舶呼号:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.callSign }}</span>
              </div>
              <div class="detail-item">
                <span class="label">船长:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.length }} 米</span>
              </div>
              <div class="detail-item">
                <span class="label">船宽:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.width }} 米</span>
              </div>
              <div class="detail-item">
                <span class="label">满载吃水深度:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.fullLoadDraft }} 米</span>
              </div>
              <div class="detail-item">
                <span class="label">吨位:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.tonnage }} 吨</span>
              </div>
              <div class="detail-item">
                <span class="label">航运单位:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.shippingCompany }}</span>
              </div>
              <div class="detail-item">
                <span class="label">岸电联系人:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContact }}</span>
              </div>
              <div class="detail-item">
                <span class="label">联系方式:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.shorePowerContactPhone }}</span>
              </div>
              <div class="detail-item">
                <span class="label">船检登记号:</span>
                <span class="value">{{ selectedShip.shipBasicInfo.inspectionNo }}</span>
              </div>
              <div class="detail-item">
                <span class="label">创建时间:</span>
                <span class="value">{{ new Date(selectedShip.shipBasicInfo.createTime).toLocaleString() }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="card digital-twin-card--deep-blue">
          <div class="card-title">
            <div class="vertical-line"></div>
            <img src="@/assets/svgs/data.svg" class="title-icon" />
            <span class="title-text">岸电信息</span>
          </div>
          <div class="card-content">
            <div class="ship-detail">
              <div class="detail-item">
                <span class="label">停泊状态:</span>
                <span class="value">{{ selectedShip.shorePowerAndShip.type === 'left' ? '左舷停泊' :
                  selectedShip.shorePowerAndShip.type === 'right' ? '右舷停泊' : selectedShip.shorePowerAndShip.type
                }}</span>
              </div>
              <div class="detail-item">
                <span class="label">靠泊状态:</span>
                <span class="value">{{ getShorePowerStatusText(selectedShip.shorePowerAndShip.status) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="card digital-twin-card--deep-blue" style="flex: 1;">
        <div class="card-title">
          <div class="vertical-line"></div>
          <img src="@/assets/svgs/data.svg" class="title-icon" />
          <span class="title-text">船舶详情</span>
        </div>
        <div class="card-content">
          <div class="no-selection">请选择一艘船舶以查看详细信息</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 定义组件属性
interface ShipItem {
  id: string;
  shipBasicInfo: {
    name: string;
  };
  shorePowerAndShip?: {
    status?: string;
    powerUsage?: number;
  };
  modelInstance?: any;
}

interface Props {
  shipStatusData: ShipItem[];
  selectedShip: ShipItem | null;
}

const props = defineProps<Props>()

// 搜索关键字
const searchKeyword = ref('')

// 过滤后的船舶数据
const filteredShipStatusData = computed(() => {
  if (!searchKeyword.value) {
    return props.shipStatusData
  }
  return props.shipStatusData.filter(ship =>
    ship.shipBasicInfo.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

// 处理搜索输入
const handleSearch = () => {
  // 输入处理逻辑（如果需要额外处理可以在这里添加）
}

// 定义事件
const emit = defineEmits<{
  (e: 'switch-ship', ship: ShipItem): void;
  (e: 'item-click', ship: ShipItem): void;
}>()

// 处理船舶选择
const handleSwitch = (ship: ShipItem) => {
  // console.log(ship)
  emit('switch-ship', ship)
  emit('item-click', ship)
}

const shorePowerStatusMap = {
  1: '待靠泊',
  2: '靠泊中',
  3: '岸电接入中',
  4: '用电中',
  5: '岸电卸载中',
  6: '岸电卸载完成',
  7: '离泊',
  9: '未使用岸电'
}

// 状态转换函数
const getShorePowerStatusText = (status: number | string) => {
  const statusNum = Number(status);
  console.log(status)
  return shorePowerStatusMap[statusNum] || status;
}

const getStatusClass = (status: string) => {
  switch (status) {
    case '正常':
      return 'status-normal'
    case '空闲':
      return 'status-idle'
    case '故障':
      return 'status-fault'
    case '异常':
      return 'status-abnormal'
    case '维修中':
      return 'status-maintenance'
    case '岸电使用中':
      return 'status-shorepower'
    // case '岸电故障':
    //   return 'status-fault'
    default:
      return 'status-default'
  }
}
</script>

<style scoped>
.port-overview {
  display: flex;
  gap: 10px;
  height: 100%;
}

.right-two-row {
  display: flex;
  gap: 10px;
  height: 100%;
}

.search-container {
  height: 100%;
  width: 200px;
  border-radius: 4px;
  border: 1px solid rgb(10, 130, 170);
  color: #FFF;
  padding: 0 10px;
  margin-bottom: 8px;
  background-color: rgba(255, 255, 255, 0.1);
}
</style>