灾害链影响点列表
This commit is contained in:
wzy-warehouse
Vendored
+7
@@ -14,9 +14,16 @@ declare module 'vue' {
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
export interface GlobalDirectives {
|
||||
vLoading: typeof import('element-plus/es')['ElLoadingDirective']
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,7 +42,6 @@
|
||||
|
||||
// 注册全局点击监听器
|
||||
CesiumUtilsSingleton.clickLayer((pickedObject: ClickObject) => {
|
||||
console.log('点击对象：', pickedObject);
|
||||
if (
|
||||
pickedObject &&
|
||||
pickedObject.id &&
|
||||
|
||||
@@ -0,0 +1,264 @@
|
||||
<!-- 灾害链影响点列表 -->
|
||||
<template>
|
||||
<!-- 控制按钮 -->
|
||||
<div class="control-box">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="changeStatus"
|
||||
circle
|
||||
:title="`${btnStatus ? '关闭' : '打开'}灾害链影响点列表`"
|
||||
>{{ btnStatus ? '-' : '+' }}</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="disaster-list-box" v-show="btnStatus">
|
||||
<header class="table-title">
|
||||
<span>灾害链影响点列表</span>
|
||||
</header>
|
||||
|
||||
<!-- 搜索 -->
|
||||
<div class="search-box">
|
||||
<el-input
|
||||
v-model="conditions.tableData"
|
||||
placeholder="搜索表格数据..."
|
||||
class="search-data"
|
||||
/>
|
||||
<el-select v-model="conditions.hiddenPoint" class="search-hidden-point">
|
||||
<el-option
|
||||
v-for="(opt, index) in selectOptions"
|
||||
:key="index"
|
||||
:label="`${opt.label}预警点`"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="table-box">
|
||||
<el-table
|
||||
:data="tableDataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
empty-text="暂无数据"
|
||||
>
|
||||
<el-table-column
|
||||
v-for="(row, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="row.key"
|
||||
:label="
|
||||
index == 0 ? `${conditions.hiddenPoint}${row.title}` : row.title
|
||||
"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-controls" v-if="showPagination">
|
||||
<button
|
||||
@click="prevPage"
|
||||
:disabled="isPrevDisabled"
|
||||
:class="{ disabled: pageOption.currentPage <= 1 }"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<span>{{ pageOption.currentPage }} / {{ pageOption.totalPage }}</span>
|
||||
<button
|
||||
@click="nextPage"
|
||||
:disabled="isNextDisabled"
|
||||
:class="{ disabled: isNextDisabled }"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
<span class="total-items">共 {{ pageOption.total }} 条</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { Point } from '@/types/base/Point';
|
||||
import { HiddenPointType } from '@/types/common/DisasterType';
|
||||
import type { PaginationType } from '@/types/common/PaginationType';
|
||||
import { ref, watch, computed, type Ref } from 'vue';
|
||||
|
||||
// 接收父组件的参数
|
||||
const props = defineProps<{
|
||||
selectOptions: { label: string; value: HiddenPointType }[];
|
||||
tableDataList: Point[];
|
||||
tableColumns: { title: string; key: string }[];
|
||||
pageOption: PaginationType;
|
||||
}>();
|
||||
|
||||
// 接收父组件方法
|
||||
const emits = defineEmits<{
|
||||
(
|
||||
e: 'changeConditions',
|
||||
value: { tableData: string; hiddenPoint: HiddenPointType }
|
||||
): void;
|
||||
(e: 'changeCurrentPage', value: number): void;
|
||||
}>();
|
||||
|
||||
// ==================== 状态管理 ====================
|
||||
|
||||
// 按钮状态
|
||||
const btnStatus: Ref<boolean> = ref(false);
|
||||
|
||||
// 搜索条件
|
||||
const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
|
||||
ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
|
||||
// 是否显示分页
|
||||
const showPagination = computed(() => props.pageOption.totalPage !== 0);
|
||||
|
||||
// 上一页是否禁用
|
||||
const isPrevDisabled = computed(() => props.pageOption.currentPage <= 1);
|
||||
|
||||
// 下一页是否禁用
|
||||
const isNextDisabled = computed(
|
||||
() => props.pageOption.currentPage >= props.pageOption.totalPage
|
||||
);
|
||||
|
||||
// ==================== 事件处理 ====================
|
||||
|
||||
// 切换面板显示状态
|
||||
const changeStatus = () => {
|
||||
btnStatus.value = !btnStatus.value;
|
||||
};
|
||||
|
||||
// 上一页
|
||||
const prevPage = () => {
|
||||
if (!isPrevDisabled.value) {
|
||||
emits('changeCurrentPage', props.pageOption.currentPage - 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 下一页
|
||||
const nextPage = () => {
|
||||
if (!isNextDisabled.value) {
|
||||
emits('changeCurrentPage', props.pageOption.currentPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
// ==================== 监听器 ====================
|
||||
|
||||
// 监听搜索条件变化
|
||||
watch(
|
||||
conditions,
|
||||
() => {
|
||||
emits('changeConditions', conditions.value);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.control-box {
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 30px;
|
||||
z-index: 1001;
|
||||
}
|
||||
.disaster-list-box {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 20px;
|
||||
background: rgba(14, 52, 98, 0.8);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
border-radius: 2px;
|
||||
z-index: 1000;
|
||||
width: 550px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
font-size: 14px;
|
||||
border: 1px solid rgba(0, 225, 255, 0.5);
|
||||
}
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0px;
|
||||
color: white;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
.search-data {
|
||||
width: 75%;
|
||||
}
|
||||
.search-hidden-point {
|
||||
width: 25%;
|
||||
}
|
||||
.search-data,
|
||||
.search-hidden-point {
|
||||
background: rgba(15, 61, 118, 0.6);
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgb(0, 225, 255);
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-select__wrapper) {
|
||||
background: transparent;
|
||||
}
|
||||
:deep(.el-input__inner),
|
||||
:deep(.el-select__selected-item) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
:deep(.el-table--border th) {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(86, 204, 242) 0%,
|
||||
rgb(47, 128, 237) 100%
|
||||
);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 10px 12px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
:deep(.el-table tr),
|
||||
:deep(.el-table td) {
|
||||
background-color: rgba(15, 61, 118, 0.6);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.el-table {
|
||||
--el-table-row-hover-bg-color: transparent;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
.pagination-controls button:disabled {
|
||||
background-color: #373e52;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.pagination-controls span {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
.pagination-controls button {
|
||||
background-color: #3c86ff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -2,3 +2,11 @@ export enum DisasterType {
|
||||
RAINSTORM = 'rainstorm',
|
||||
EARTHQUAKE = 'earthquake',
|
||||
}
|
||||
|
||||
// 隐患点类型
|
||||
export enum HiddenPointType {
|
||||
LANDSLIDE = '滑坡',
|
||||
DEBRIS_FLOW = '泥石流',
|
||||
WATERLOGGING = '内涝',
|
||||
FLASH_FLOOD = '山洪',
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
export interface PaginationType {
|
||||
currentPage: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
totalPage: number;
|
||||
}
|
||||
@@ -1,18 +1,113 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 基本组件 -->
|
||||
<BasicComponent
|
||||
:disaster-type="DisasterType.RAINSTORM"
|
||||
:key="route.fullPath"
|
||||
/>
|
||||
|
||||
<!-- 灾害链影像点列表 -->
|
||||
<DisasterChainPointComponent
|
||||
:select-options="selectOptions"
|
||||
:table-data-list="tableDatas"
|
||||
:table-columns="tableColumns"
|
||||
:page-option="paginationConfig"
|
||||
@change-conditions="changeConditions"
|
||||
@change-current-page="changeCurrentPage"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BasicComponent from '@/component/rain-earthquake/BasicComponent.vue';
|
||||
import { DisasterType } from '@/types/common/DisasterType';
|
||||
import DisasterChainPointComponent from '@/component/rain-earthquake/DisasterChainPointComponent.vue';
|
||||
import type { XianHiddenDangerSpots } from '@/types/base/XianHiddenDangerSpots';
|
||||
import { DisasterType, HiddenPointType } from '@/types/common/DisasterType';
|
||||
import type { PaginationType } from '@/types/common/PaginationType';
|
||||
import { ref, watch, type Ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// 灾害链影像点列表数据
|
||||
// 搜索条件
|
||||
const conditions: Ref<{ tableData: string; hiddenPoint: HiddenPointType }> =
|
||||
ref({ tableData: '', hiddenPoint: HiddenPointType.LANDSLIDE });
|
||||
|
||||
// 下拉列表
|
||||
const selectOptions = [
|
||||
{
|
||||
value: HiddenPointType.LANDSLIDE,
|
||||
label: '滑坡',
|
||||
},
|
||||
{
|
||||
value: HiddenPointType.DEBRIS_FLOW,
|
||||
label: '泥石流',
|
||||
},
|
||||
{
|
||||
value: HiddenPointType.FLASH_FLOOD,
|
||||
label: '山洪',
|
||||
},
|
||||
{
|
||||
value: HiddenPointType.WATERLOGGING,
|
||||
label: '内涝',
|
||||
},
|
||||
];
|
||||
|
||||
// 表格数据
|
||||
const tableDatas: Ref<XianHiddenDangerSpots[]> = ref([]);
|
||||
|
||||
// 表头标签
|
||||
const tableColumns = [
|
||||
{
|
||||
title: `名称`,
|
||||
key: 'disasterName',
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
key: 'position',
|
||||
},
|
||||
{
|
||||
title: '规模等级',
|
||||
key: 'scaleGrade',
|
||||
},
|
||||
{
|
||||
title: '险情等级',
|
||||
key: 'riskGrade',
|
||||
},
|
||||
];
|
||||
|
||||
// 分页配置
|
||||
const paginationConfig: Ref<PaginationType> = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 10,
|
||||
totalPage: 1,
|
||||
});
|
||||
|
||||
// 修改条件
|
||||
function changeConditions(value: {
|
||||
tableData: string;
|
||||
hiddenPoint: HiddenPointType;
|
||||
}) {
|
||||
conditions.value = value;
|
||||
}
|
||||
|
||||
// 修改当前页码
|
||||
function changeCurrentPage(value: number) {
|
||||
paginationConfig.value.currentPage = value;
|
||||
}
|
||||
|
||||
// 条件改变时候触发
|
||||
watch(
|
||||
() => conditions,
|
||||
() => {
|
||||
console.log('条件改变');
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user