13 changed files with 3459 additions and 261 deletions
@ -0,0 +1,174 @@ |
|||
<template> |
|||
<el-dialog v-model="visible" :title="title" width="1200px" :before-close="handleClose"> |
|||
<!-- 搜索和筛选区域 --> |
|||
<div class="filter-container"> |
|||
<el-form :model="queryParams" label-width="80px" inline> |
|||
<el-form-item label="关键字"> |
|||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleSearch" /> |
|||
</el-form-item> |
|||
<el-form-item label="时间范围"> |
|||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleSearch">搜索</el-button> |
|||
<el-button @click="resetQuery">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<el-table :data="tableData" border stripe style="width: 100%" v-loading="loading"> |
|||
<el-table-column v-for="column in tableColumns" :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="queryParams.pageNo" v-model:page-size="queryParams.pageSize" |
|||
:page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
|
|||
<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, ElForm, ElFormItem, ElInput, ElDatePicker, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus' |
|||
|
|||
// 定义组件属性 |
|||
interface Props { |
|||
modelValue: boolean |
|||
title?: string |
|||
columns: Array<{ |
|||
prop: string |
|||
label: string |
|||
width?: string | number |
|||
formatter?: (row: any, column: any, cellValue: any) => string |
|||
}> |
|||
data: any[] |
|||
} |
|||
|
|||
// 定义事件 |
|||
const emit = defineEmits<{ |
|||
(e: 'update:modelValue', value: boolean): void |
|||
(e: 'search', params: any): void |
|||
}>() |
|||
|
|||
// 属性定义 |
|||
const props = withDefaults(defineProps<Props>(), { |
|||
modelValue: false, |
|||
title: '历史记录', |
|||
columns: () => [], |
|||
data: () => [] |
|||
}) |
|||
|
|||
// 响应式数据 |
|||
const visible = computed({ |
|||
get: () => props.modelValue, |
|||
set: (val) => emit('update:modelValue', val) |
|||
}) |
|||
|
|||
const queryParams = ref({ |
|||
keyword: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
pageNo: 1, |
|||
pageSize: 10 |
|||
}) |
|||
|
|||
const dateRange = ref<[string, string]>(['', '']) |
|||
const loading = ref(false) |
|||
const total = ref(0) |
|||
|
|||
// 表格数据计算属性 |
|||
const tableData = computed(() => { |
|||
// 在实际应用中，这里应该是从服务器获取的数据 |
|||
// 当前为了演示，我们使用传入的模拟数据 |
|||
return props.data.slice( |
|||
(queryParams.value.pageNo - 1) * queryParams.value.pageSize, |
|||
queryParams.value.pageNo * queryParams.value.pageSize |
|||
) |
|||
}) |
|||
|
|||
// 表格列 |
|||
const tableColumns = computed(() => props.columns) |
|||
|
|||
// 处理关闭 |
|||
const handleClose = () => { |
|||
visible.value = false |
|||
} |
|||
|
|||
// 处理搜索 |
|||
const handleSearch = () => { |
|||
// 发送搜索事件给父组件 |
|||
emit('search', { ...queryParams.value }) |
|||
} |
|||
|
|||
// 重置查询条件 |
|||
const resetQuery = () => { |
|||
queryParams.value.keyword = '' |
|||
queryParams.value.startTime = '' |
|||
queryParams.value.endTime = '' |
|||
dateRange.value = ['', ''] |
|||
queryParams.value.pageNo = 1 |
|||
handleSearch() |
|||
} |
|||
|
|||
// 处理日期变化 |
|||
const handleDateChange = (val: [string, string] | null) => { |
|||
if (val && val[0] && val[1]) { |
|||
queryParams.value.startTime = val[0] |
|||
queryParams.value.endTime = val[1] |
|||
} else { |
|||
queryParams.value.startTime = '' |
|||
queryParams.value.endTime = '' |
|||
} |
|||
} |
|||
|
|||
// 处理分页大小变化 |
|||
const handleSizeChange = (val: number) => { |
|||
queryParams.value.pageSize = val |
|||
queryParams.value.pageNo = 1 |
|||
handleSearch() |
|||
} |
|||
|
|||
// 处理当前页变化 |
|||
const handleCurrentChange = (val: number) => { |
|||
queryParams.value.pageNo = val |
|||
handleSearch() |
|||
} |
|||
|
|||
// 监听数据变化并更新总数 |
|||
watch( |
|||
() => props.data, |
|||
(newData) => { |
|||
total.value = newData.length |
|||
}, |
|||
{ 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> |
|||
@ -0,0 +1,303 @@ |
|||
<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> |
|||
File diff suppressed because it is too large
@ -0,0 +1,304 @@ |
|||
<template> |
|||
<el-dialog v-model="visible" title="岸电箱历史记录" width="1200px" :before-close="handleClose"> |
|||
<el-tabs v-model="activeTab"> |
|||
<!-- 岸电箱历史记录 tab --> |
|||
<el-tab-pane label="岸电箱历史记录" name="shorePower"> |
|||
<!-- 搜索和筛选区域 --> |
|||
<div class="filter-container"> |
|||
<el-form :model="queryParams" label-width="80px" inline> |
|||
<el-form-item label="关键字"> |
|||
<el-input v-model="queryParams.keyword" placeholder="请输入关键字搜索" clearable @keyup.enter="handleSearch" /> |
|||
</el-form-item> |
|||
<el-form-item label="时间范围"> |
|||
<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" |
|||
end-placeholder="结束日期" value-format="YYYY-MM-DD" @change="handleDateChange" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleSearch">搜索</el-button> |
|||
<el-button @click="resetQuery">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<el-table :data="tableData" border stripe style="width: 100%" v-loading="loading"> |
|||
<el-table-column v-for="column in tableColumns" :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="queryParams.pageNo" v-model:page-size="queryParams.pageSize" |
|||
:page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
</el-tab-pane> |
|||
|
|||
<!-- 岸电箱连接船舶记录 tab --> |
|||
<el-tab-pane label="岸电箱连接船舶记录" name="shipConnection"> |
|||
<!-- 搜索和筛选区域 --> |
|||
<div class="filter-container"> |
|||
<el-form :model="shipConnectionQueryParams" label-width="80px" inline> |
|||
<el-form-item label="关键字"> |
|||
<el-input v-model="shipConnectionQueryParams.keyword" placeholder="请输入关键字搜索" clearable |
|||
@keyup.enter="handleShipConnectionSearch" /> |
|||
</el-form-item> |
|||
<el-form-item label="时间范围"> |
|||
<el-date-picker v-model="shipConnectionDateRange" type="daterange" range-separator="至" |
|||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" |
|||
@change="handleShipConnectionDateChange" /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="handleShipConnectionSearch">搜索</el-button> |
|||
<el-button @click="resetShipConnectionQuery">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<el-table :data="shipConnectionTableData" border stripe style="width: 100%" v-loading="shipConnectionLoading"> |
|||
<el-table-column v-for="column in shipConnectionColumns" :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="shipConnectionQueryParams.pageNo" v-model:page-size="shipConnectionQueryParams.pageSize" |
|||
:page-sizes="[10, 20, 50, 100]" :total="shipConnectionTotal" layout="total, sizes, prev, pager, next, jumper" |
|||
@size-change="handleShipConnectionSizeChange" @current-change="handleShipConnectionCurrentChange" /> |
|||
</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 |
|||
data?: any[] |
|||
shipConnectionData?: any[] |
|||
} |
|||
|
|||
// 定义事件 |
|||
const emit = defineEmits<{ |
|||
(e: 'update:modelValue', value: boolean): void |
|||
(e: 'search', params: any): void |
|||
(e: 'ship-connection-search', params: any): void |
|||
}>() |
|||
|
|||
// 属性定义 |
|||
const props = withDefaults(defineProps<Props>(), { |
|||
modelValue: false, |
|||
data: () => [], |
|||
shipConnectionData: () => [] |
|||
}) |
|||
|
|||
// 响应式数据 |
|||
const visible = computed({ |
|||
get: () => props.modelValue, |
|||
set: (val) => emit('update:modelValue', val) |
|||
}) |
|||
|
|||
const activeTab = ref('shorePower') |
|||
|
|||
// 岸电箱历史记录相关数据 |
|||
const queryParams = ref({ |
|||
keyword: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
pageNo: 1, |
|||
pageSize: 10 |
|||
}) |
|||
|
|||
const dateRange = ref<[string, string]>(['', '']) |
|||
const loading = ref(false) |
|||
const total = ref(0) |
|||
|
|||
// 表格数据计算属性 |
|||
const tableData = computed(() => { |
|||
// 在实际应用中，这里应该是从服务器获取的数据 |
|||
// 当前为了演示，我们使用传入的模拟数据 |
|||
return props.data?.slice( |
|||
(queryParams.value.pageNo - 1) * queryParams.value.pageSize, |
|||
queryParams.value.pageNo * queryParams.value.pageSize |
|||
) || [] |
|||
}) |
|||
|
|||
// 表格列 |
|||
const tableColumns = ref([ |
|||
{ prop: 'id', label: '记录ID', width: 80 }, |
|||
{ prop: 'time', label: '时间', width: 180 }, |
|||
{ prop: 'operation', label: '操作类型' }, |
|||
{ prop: 'voltage', label: '电压(V)' }, |
|||
{ prop: 'current', label: '电流(A)' }, |
|||
{ prop: 'power', label: '功率(kW)' }, |
|||
{ prop: 'energy', label: '用电量(kWh)' } |
|||
]) |
|||
|
|||
// 岸电箱连接船舶记录相关数据 |
|||
const shipConnectionQueryParams = ref({ |
|||
keyword: '', |
|||
startTime: '', |
|||
endTime: '', |
|||
pageNo: 1, |
|||
pageSize: 10 |
|||
}) |
|||
|
|||
const shipConnectionDateRange = ref<[string, string]>(['', '']) |
|||
const shipConnectionLoading = ref(false) |
|||
const shipConnectionTotal = ref(0) |
|||
|
|||
// 岸电箱连接船舶记录表格数据 |
|||
const shipConnectionTableData = computed(() => { |
|||
// 在实际应用中，这里应该是从服务器获取的数据 |
|||
// 当前为了演示，我们使用传入的模拟数据 |
|||
return props.shipConnectionData?.slice( |
|||
(shipConnectionQueryParams.value.pageNo - 1) * shipConnectionQueryParams.value.pageSize, |
|||
shipConnectionQueryParams.value.pageNo * shipConnectionQueryParams.value.pageSize |
|||
) || [] |
|||
}) |
|||
|
|||
// 岸电箱连接船舶记录表格列 |
|||
const shipConnectionColumns = ref([ |
|||
{ prop: 'id', label: '记录ID', width: 80 }, |
|||
{ prop: 'shipName', 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 handleSearch = () => { |
|||
// 发送搜索事件给父组件 |
|||
emit('search', { ...queryParams.value }) |
|||
} |
|||
|
|||
const resetQuery = () => { |
|||
queryParams.value.keyword = '' |
|||
queryParams.value.startTime = '' |
|||
queryParams.value.endTime = '' |
|||
dateRange.value = ['', ''] |
|||
queryParams.value.pageNo = 1 |
|||
handleSearch() |
|||
} |
|||
|
|||
const handleDateChange = (val: [string, string] | null) => { |
|||
if (val && val[0] && val[1]) { |
|||
queryParams.value.startTime = val[0] |
|||
queryParams.value.endTime = val[1] |
|||
} else { |
|||
queryParams.value.startTime = '' |
|||
queryParams.value.endTime = '' |
|||
} |
|||
} |
|||
|
|||
const handleSizeChange = (val: number) => { |
|||
queryParams.value.pageSize = val |
|||
queryParams.value.pageNo = 1 |
|||
handleSearch() |
|||
} |
|||
|
|||
const handleCurrentChange = (val: number) => { |
|||
queryParams.value.pageNo = val |
|||
handleSearch() |
|||
} |
|||
|
|||
// 岸电箱连接船舶记录相关方法 |
|||
const handleShipConnectionSearch = () => { |
|||
// 发送搜索事件给父组件 |
|||
emit('ship-connection-search', { ...shipConnectionQueryParams.value }) |
|||
} |
|||
|
|||
const resetShipConnectionQuery = () => { |
|||
shipConnectionQueryParams.value.keyword = '' |
|||
shipConnectionQueryParams.value.startTime = '' |
|||
shipConnectionQueryParams.value.endTime = '' |
|||
shipConnectionDateRange.value = ['', ''] |
|||
shipConnectionQueryParams.value.pageNo = 1 |
|||
handleShipConnectionSearch() |
|||
} |
|||
|
|||
const handleShipConnectionDateChange = (val: [string, string] | null) => { |
|||
if (val && val[0] && val[1]) { |
|||
shipConnectionQueryParams.value.startTime = val[0] |
|||
shipConnectionQueryParams.value.endTime = val[1] |
|||
} else { |
|||
shipConnectionQueryParams.value.startTime = '' |
|||
shipConnectionQueryParams.value.endTime = '' |
|||
} |
|||
} |
|||
|
|||
const handleShipConnectionSizeChange = (val: number) => { |
|||
shipConnectionQueryParams.value.pageSize = val |
|||
shipConnectionQueryParams.value.pageNo = 1 |
|||
handleShipConnectionSearch() |
|||
} |
|||
|
|||
const handleShipConnectionCurrentChange = (val: number) => { |
|||
shipConnectionQueryParams.value.pageNo = val |
|||
handleShipConnectionSearch() |
|||
} |
|||
|
|||
// 监听数据变化并更新总数 |
|||
watch( |
|||
() => props.data, |
|||
(newData) => { |
|||
total.value = newData?.length || 0 |
|||
}, |
|||
{ immediate: true } |
|||
) |
|||
|
|||
watch( |
|||
() => props.shipConnectionData, |
|||
(newData) => { |
|||
shipConnectionTotal.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> |
|||
@ -0,0 +1,240 @@ |
|||
<template> |
|||
<div ref="chartContainer" class="wave-line-chart-container"></div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, onMounted, onBeforeUnmount, watch } from 'vue' |
|||
import * as echarts from 'echarts' |
|||
|
|||
// 定义组件属性 |
|||
interface Props { |
|||
chartData?: Array<{ name: string; value: number }> |
|||
title?: string |
|||
color?: string |
|||
magnifyMode?: boolean |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<Props>(), { |
|||
chartData: () => [], |
|||
title: '', |
|||
color: '#1296db', |
|||
magnifyMode: false |
|||
}) |
|||
|
|||
// 图表容器引用和实例 |
|||
const chartContainer = ref<HTMLDivElement | null>(null) |
|||
let chartInstance: echarts.ECharts | null = null |
|||
|
|||
// 初始化图表 |
|||
const initChart = () => { |
|||
if (chartContainer.value) { |
|||
chartInstance = echarts.init(chartContainer.value) |
|||
updateChart() |
|||
} |
|||
} |
|||
|
|||
// 更新图表 |
|||
const updateChart = () => { |
|||
if (!chartInstance || !props.chartData.length) return |
|||
|
|||
// 创建波浪效果的数据点 |
|||
const waveData = props.chartData.map(item => { |
|||
return { |
|||
...item, |
|||
value: item.value |
|||
} |
|||
}) |
|||
|
|||
const option = { |
|||
title: { |
|||
// text: props.title, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: props.magnifyMode ? 24 : 14 |
|||
}, |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
backgroundColor: 'rgba(0, 0, 0, 0.7)', |
|||
borderColor: 'rgba(30, 120, 255, 0.4)', |
|||
borderWidth: 1, |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: props.magnifyMode ? 20 : 12 |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: props.chartData.map(item => item.name), |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: 'rgba(255, 255, 255, 0.7)', |
|||
fontSize: props.magnifyMode ? 18 : 10, |
|||
rotate: 0, |
|||
interval: Math.ceil(props.chartData.length / 12), // 减少间隔以显示更多标签 |
|||
formatter: (value: string) => { |
|||
// 更灵活的时间格式化 |
|||
if (value.includes(':')) { |
|||
const parts = value.split(':'); |
|||
if (parts.length >= 2) { |
|||
// 如果是完整的时间格式 HH:mm:ss |
|||
if (parts[2] && parts[2] === '00') { |
|||
return parts[0] + ':' + parts[1]; |
|||
} |
|||
// 如果是 HH:mm 格式 |
|||
return parts[0] + ':' + parts[1]; |
|||
} |
|||
} |
|||
return value; |
|||
}, |
|||
margin: 10 |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
// 设置 Y 轴最小值略低于数据中的最小值，以提供更好的可视化效果 |
|||
min: (value: any) => { |
|||
if (props.chartData && props.chartData.length > 0) { |
|||
const minValue = props.chartData[0].value |
|||
// 计算一个合适的最小值，略低于实际最小值 |
|||
// const range = value.max - minValue; |
|||
return minValue; // 最小值不低于0 |
|||
} |
|||
return undefined; |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
} |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.1)' |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: 'rgba(255, 255, 255, 0.7)', |
|||
fontSize: props.magnifyMode ? 18 : 10 |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: waveData.map(item => item.value), |
|||
type: 'line', |
|||
smooth: true, |
|||
showSymbol: true, |
|||
symbol: 'circle', |
|||
symbolSize: props.magnifyMode ? 8 : 4, |
|||
lineStyle: { |
|||
color: props.color, |
|||
width: props.magnifyMode ? 4 : 2 |
|||
}, |
|||
areaStyle: { |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: props.color + '80' // 添加透明度 |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: props.color + '00' // 透明 |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
// 添加波浪效果的特殊配置 |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
// 显示数据点和数值 |
|||
label: { |
|||
show: true, |
|||
position: 'top', |
|||
color: '#fff', |
|||
fontSize: props.magnifyMode ? 16 : 10, |
|||
formatter: '{c}', |
|||
distance: props.magnifyMode ? 10 : 5 |
|||
} |
|||
}, |
|||
// 添加一个辅助系列来增强波浪视觉效果 |
|||
{ |
|||
data: props.chartData.map(item => item.value), |
|||
type: 'line', |
|||
smooth: true, |
|||
showSymbol: false, |
|||
lineStyle: { |
|||
color: props.color + '60', |
|||
width: props.magnifyMode ? 2 : 1, |
|||
type: 'dashed' |
|||
}, |
|||
// 辅助系列不显示数据标签以避免重叠 |
|||
label: { |
|||
show: false |
|||
} |
|||
} |
|||
], |
|||
grid: { |
|||
left: '1%', |
|||
right: '1%', |
|||
top: props.title ? (props.magnifyMode ? '10%' : '15%') : '5%', |
|||
bottom: '1%', |
|||
containLabel: true |
|||
} |
|||
} |
|||
|
|||
chartInstance.setOption(option) |
|||
} |
|||
|
|||
// 监听数据变化 |
|||
watch( |
|||
() => props.chartData, |
|||
() => { |
|||
updateChart() |
|||
}, |
|||
{ deep: true } |
|||
) |
|||
|
|||
// 窗口大小改变时重绘图表 |
|||
const handleResize = () => { |
|||
if (chartInstance) { |
|||
chartInstance.resize() |
|||
} |
|||
} |
|||
|
|||
// 组件挂载时初始化图表 |
|||
onMounted(() => { |
|||
// 延迟初始化，确保DOM已经完全渲染 |
|||
setTimeout(() => { |
|||
initChart() |
|||
}, 200) |
|||
window.addEventListener('resize', handleResize) |
|||
}) |
|||
|
|||
// 组件销毁前清理资源 |
|||
onBeforeUnmount(() => { |
|||
window.removeEventListener('resize', handleResize) |
|||
if (chartInstance) { |
|||
chartInstance.dispose() |
|||
chartInstance = null |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.wave-line-chart-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
min-height: 0; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue