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

<template>
  <el-dialog v-model="visible" title="船舶历史记录" width="1200px" :before-close="handleClose">
    <el-tabs v-model="activeTab">
      <!-- 船舶靠泊历史记录 tab -->
      <el-tab-pane label="船舶靠泊历史记录" name="shipBerthing">
        <!-- 搜索和筛选区域 -->
        <div class="filter-container">
          <el-form :model="berthingQueryParams" label-width="80px" inline>
            <el-form-item label="关键字">
              <el-input v-model="berthingQueryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleBerthingSearch" />
            </el-form-item>
            <el-form-item label="时间范围">
              <el-date-picker v-model="berthingDateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleBerthingDateChange" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleBerthingSearch">搜索</el-button>
              <el-button @click="resetBerthingQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据表格 -->
        <el-table :data="berthingTableData" border stripe style="width: 100%" v-loading="berthingLoading">
          <el-table-column v-for="column in berthingColumns" :key="column.prop" :prop="column.prop" :label="column.label"
            :width="column.width" :formatter="column.formatter" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="berthingQueryParams.pageNo" v-model:page-size="berthingQueryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="berthingTotal" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleBerthingSizeChange" @current-change="handleBerthingCurrentChange" />
        </div>
      </el-tab-pane>

      <!-- 船舶连接岸电箱历史记录 tab -->
      <el-tab-pane label="船舶连接岸电箱历史记录" name="shorePowerConnection">
        <!-- 搜索和筛选区域 -->
        <div class="filter-container">
          <el-form :model="shorePowerConnectionQueryParams" label-width="80px" inline>
            <el-form-item label="关键字">
              <el-input v-model="shorePowerConnectionQueryParams.keyword" placeholder="请输入关键字搜索" clearable
                @keyup.enter="handleShorePowerConnectionSearch" />
            </el-form-item>
            <el-form-item label="时间范围">
              <el-date-picker v-model="shorePowerConnectionDateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
                @change="handleShorePowerConnectionDateChange" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleShorePowerConnectionSearch">搜索</el-button>
              <el-button @click="resetShorePowerConnectionQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据表格 -->
        <el-table :data="shorePowerConnectionTableData" border stripe style="width: 100%" v-loading="shorePowerConnectionLoading">
          <el-table-column v-for="column in shorePowerConnectionColumns" :key="column.prop" :prop="column.prop" :label="column.label"
            :width="column.width" :formatter="column.formatter" />
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination v-model:current-page="shorePowerConnectionQueryParams.pageNo" v-model:page-size="shorePowerConnectionQueryParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" :total="shorePowerConnectionTotal" layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleShorePowerConnectionSizeChange" @current-change="handleShorePowerConnectionCurrentChange" />
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { 
  ElDialog, 
  ElTabs, 
  ElTabPane, 
  ElForm, 
  ElFormItem, 
  ElInput, 
  ElDatePicker, 
  ElButton, 
  ElTable, 
  ElTableColumn, 
  ElPagination 
} from 'element-plus'

// 定义组件属性
interface Props {
  modelValue: boolean
  berthingData?: any[]
  shorePowerConnectionData?: any[]
}

// 定义事件
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'berthing-search', params: any): void
  (e: 'shore-power-connection-search', params: any): void
}>()

// 属性定义
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  berthingData: () => [],
  shorePowerConnectionData: () => []
})

// 响应式数据
const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const activeTab = ref('shipBerthing')

// 船舶靠泊历史记录相关数据
const berthingQueryParams = ref({
  keyword: '',
  startTime: '',
  endTime: '',
  pageNo: 1,
  pageSize: 10
})

const berthingDateRange = ref<[string, string]>(['', ''])
const berthingLoading = ref(false)
const berthingTotal = ref(0)

// 船舶靠泊历史记录表格数据
const berthingTableData = computed(() => {
  // 在实际应用中，这里应该是从服务器获取的数据
  // 当前为了演示，我们使用传入的模拟数据
  return props.berthingData?.slice(
    (berthingQueryParams.value.pageNo - 1) * berthingQueryParams.value.pageSize,
    berthingQueryParams.value.pageNo * berthingQueryParams.value.pageSize
  ) || []
})

// 船舶靠泊历史记录表格列
const berthingColumns = ref([
  { prop: 'id', label: '记录ID', width: 80 },
  { prop: 'time', label: '时间', width: 180 },
  { prop: 'operation', label: '操作类型' },
  { prop: 'berthPosition', label: '泊位位置' },
  { prop: 'duration', label: '停泊时长(小时)' },
  { prop: 'powerConsumption', label: '用电量(kWh)' }
])

// 船舶连接岸电箱历史记录相关数据
const shorePowerConnectionQueryParams = ref({
  keyword: '',
  startTime: '',
  endTime: '',
  pageNo: 1,
  pageSize: 10
})

const shorePowerConnectionDateRange = ref<[string, string]>(['', ''])
const shorePowerConnectionLoading = ref(false)
const shorePowerConnectionTotal = ref(0)

// 船舶连接岸电箱历史记录表格数据
const shorePowerConnectionTableData = computed(() => {
  // 在实际应用中，这里应该是从服务器获取的数据
  // 当前为了演示，我们使用传入的模拟数据
  return props.shorePowerConnectionData?.slice(
    (shorePowerConnectionQueryParams.value.pageNo - 1) * shorePowerConnectionQueryParams.value.pageSize,
    shorePowerConnectionQueryParams.value.pageNo * shorePowerConnectionQueryParams.value.pageSize
  ) || []
})

// 船舶连接岸电箱历史记录表格列
const shorePowerConnectionColumns = ref([
  { prop: 'id', label: '记录ID', width: 80 },
  { prop: 'shorePowerName', label: '岸电箱名称', width: 150 },
  { prop: 'time', label: '连接时间', width: 180 },
  { prop: 'duration', label: '连接时长(小时)', width: 120 },
  { prop: 'powerConsumption', label: '用电量(kWh)', width: 120 },
  { prop: 'status', label: '状态', width: 100 }
])

// 处理关闭
const handleClose = () => {
  visible.value = false
}

// 船舶靠泊历史记录相关方法
const handleBerthingSearch = () => {
  // 发送搜索事件给父组件
  emit('berthing-search', { ...berthingQueryParams.value })
}

const resetBerthingQuery = () => {
  berthingQueryParams.value.keyword = ''
  berthingQueryParams.value.startTime = ''
  berthingQueryParams.value.endTime = ''
  berthingDateRange.value = ['', '']
  berthingQueryParams.value.pageNo = 1
  handleBerthingSearch()
}

const handleBerthingDateChange = (val: [string, string] | null) => {
  if (val && val[0] && val[1]) {
    berthingQueryParams.value.startTime = val[0]
    berthingQueryParams.value.endTime = val[1]
  } else {
    berthingQueryParams.value.startTime = ''
    berthingQueryParams.value.endTime = ''
  }
}

const handleBerthingSizeChange = (val: number) => {
  berthingQueryParams.value.pageSize = val
  berthingQueryParams.value.pageNo = 1
  handleBerthingSearch()
}

const handleBerthingCurrentChange = (val: number) => {
  berthingQueryParams.value.pageNo = val
  handleBerthingSearch()
}

// 船舶连接岸电箱历史记录相关方法
const handleShorePowerConnectionSearch = () => {
  // 发送搜索事件给父组件
  emit('shore-power-connection-search', { ...shorePowerConnectionQueryParams.value })
}

const resetShorePowerConnectionQuery = () => {
  shorePowerConnectionQueryParams.value.keyword = ''
  shorePowerConnectionQueryParams.value.startTime = ''
  shorePowerConnectionQueryParams.value.endTime = ''
  shorePowerConnectionDateRange.value = ['', '']
  shorePowerConnectionQueryParams.value.pageNo = 1
  handleShorePowerConnectionSearch()
}

const handleShorePowerConnectionDateChange = (val: [string, string] | null) => {
  if (val && val[0] && val[1]) {
    shorePowerConnectionQueryParams.value.startTime = val[0]
    shorePowerConnectionQueryParams.value.endTime = val[1]
  } else {
    shorePowerConnectionQueryParams.value.startTime = ''
    shorePowerConnectionQueryParams.value.endTime = ''
  }
}

const handleShorePowerConnectionSizeChange = (val: number) => {
  shorePowerConnectionQueryParams.value.pageSize = val
  shorePowerConnectionQueryParams.value.pageNo = 1
  handleShorePowerConnectionSearch()
}

const handleShorePowerConnectionCurrentChange = (val: number) => {
  shorePowerConnectionQueryParams.value.pageNo = val
  handleShorePowerConnectionSearch()
}

// 监听数据变化并更新总数
watch(
  () => props.berthingData,
  (newData) => {
    berthingTotal.value = newData?.length || 0
  },
  { immediate: true }
)

watch(
  () => props.shorePowerConnectionData,
  (newData) => {
    shorePowerConnectionTotal.value = newData?.length || 0
  },
  { immediate: true }
)
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>