You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
3.1 KiB
126 lines
3.1 KiB
<template>
|
|
<div class="ship-shore-power">
|
|
<div class="left" style="width: 50%;">
|
|
<div 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="overview-grid">
|
|
<div class="overview-item">
|
|
<div class="overview-value">{{ berthingShips }}</div>
|
|
<div class="overview-label">在泊船舶数量</div>
|
|
</div>
|
|
<div class="overview-item">
|
|
<div class="overview-value">{{ shorePowerShips }}</div>
|
|
<div class="overview-label">使用岸电船舶数量</div>
|
|
</div>
|
|
<div class="overview-item">
|
|
<div class="overview-value">{{ noShorePowerShips }}</div>
|
|
<div class="overview-label">未使用岸电船舶数量</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card digital-twin-card--deep-blue " style="flex: 3;">
|
|
<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-data-table-container">
|
|
<div class="ship-data-table">
|
|
<div v-for="(ship, index) in shipData" :key="index" class="ship-data-row">
|
|
<div class="ship-data-cell ship-name">{{ ship.name }}</div>
|
|
<div class="ship-data-cell wharf-name">{{ ship.wharf }}</div>
|
|
<div class="ship-data-cell berth-number">{{ ship.berth }}</div>
|
|
<div class="ship-data-cell content shore-power-status" :class="ship.statusClass">{{ ship.status }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
|
|
|
// 定义组件属性
|
|
interface ShipDataItem {
|
|
name: string;
|
|
wharf: string;
|
|
berth: string;
|
|
status: string;
|
|
statusClass: string;
|
|
}
|
|
|
|
interface Props {
|
|
berthingShips: number;
|
|
shorePowerShips: number;
|
|
noShorePowerShips: number;
|
|
shipData: ShipDataItem[];
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ship-shore-power {
|
|
display: flex;
|
|
height: 100%;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ship-data-table-container {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ship-data-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.ship-data-row {
|
|
display: flex;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.ship-data-cell {
|
|
flex: 1;
|
|
padding: 1px;
|
|
font-size: 16px;
|
|
/* color: #fff; */
|
|
}
|
|
|
|
.ship-data-cell.content {
|
|
flex: 2;
|
|
}
|
|
|
|
.shore-power-status {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.shore-power-status.status-on {
|
|
color: #4CAF50;
|
|
}
|
|
|
|
.shore-power-status.status-off {
|
|
color: #F44336;
|
|
}
|
|
|
|
.overview-value {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.overview-label {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
|
|
}
|
|
</style>
|