<template>
|
<el-row class="wrap">
|
<BaseCard size="medium" direction="left">
|
<template #content>
|
<SatelliteSearchBar
|
:loading="loading"
|
@search="onSearch"
|
></SatelliteSearchBar>
|
|
<el-table
|
:data="gridDataList"
|
table-layout="fixed"
|
size="small"
|
:show-overflow-tooltip="true"
|
border
|
height="50vh"
|
row-class-name="t-row-normal"
|
cell-class-name="t-cell"
|
header-row-class-name="t-header-row"
|
header-cell-class-name="t-header-cell"
|
:highlight-current-row="true"
|
@row-click="handleRowClick"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
align="center"
|
width="50"
|
/>
|
<el-table-column
|
prop="dataTime"
|
label="时间"
|
align="center"
|
:formatter="timeFormatter"
|
width="150"
|
/>
|
<el-table-column
|
prop="type"
|
label="数据类型"
|
align="center"
|
:formatter="dataTypeFormatter"
|
width="150"
|
/>
|
</el-table>
|
</template>
|
|
<template #footer> </template>
|
</BaseCard>
|
</el-row>
|
</template>
|
<script setup>
|
import { ref } from 'vue';
|
import moment from 'moment';
|
import SatelliteSearchBar from './SatelliteSearchBar.vue';
|
import { useFetchData } from '@/composables/fetchData';
|
import gridApi from '@/api/gridApi';
|
import SatelliteProxy from '../SatelliteProxy';
|
|
// eslint-disable-next-line no-unused-vars
|
function timeFormatter(row, col, cellValue, index) {
|
return moment(cellValue).format('YYYY-MM-DD');
|
}
|
|
// eslint-disable-next-line no-unused-vars
|
function dataTypeFormatter(row, col, cellValue, index) {
|
switch (cellValue) {
|
case 0:
|
return '原始数据';
|
case 1:
|
return '融合数据';
|
default:
|
return '-';
|
}
|
}
|
|
defineProps({
|
loading: Boolean,
|
gridDataList: {
|
type: Array,
|
default: () => []
|
}
|
});
|
|
const emits = defineEmits(['search', 'rowClick']);
|
|
// const { loading, fetchData } = useFetchData(10000);
|
// // 网格信息
|
// let gridInfo = [];
|
// // 网格数据组
|
// const gridDataList = ref([]);
|
// // 网格数据详情
|
// const gridDataDetailMap = new Map();
|
// // 地图网格相关对象
|
// let mapViews;
|
|
// 查询网格信息和遥感数据组
|
function onSearch(options) {
|
emits('search', options);
|
}
|
|
// // 获取网格信息
|
// function fetchGridCell(groupId) {
|
// return fetchData(() => {
|
// return gridApi.fetchGridCell(groupId).then((res) => {
|
// gridInfo = res.data;
|
// drawGrid(gridInfo);
|
// });
|
// });
|
// }
|
|
// // 获取遥感数据组
|
// function fetchGridData(groupId) {
|
// return gridApi.fetchGridData(groupId).then((res) => {
|
// gridDataList.value = res.data;
|
// });
|
// }
|
|
// function drawGrid(gridInfo) {
|
// SatelliteProxy.clearAll(mapViews);
|
// mapViews = SatelliteProxy.drawPolyline(gridInfo);
|
// }
|
|
// // 绘制网格遥感数据值和网格颜色
|
// function drawTextAndColor(gridData) {
|
// // SatelliteProxy.clearText(mapViews);
|
// // 文本标记
|
// mapViews.textViews = SatelliteProxy.drawDataText(
|
// mapViews.points,
|
// gridData,
|
// mapViews.textViews
|
// );
|
// SatelliteProxy.drawColor(mapViews.gridViews, gridData);
|
// }
|
|
function handleRowClick(row, col, event) {
|
emits('rowClick', row);
|
}
|
</script>
|
<style scoped>
|
:deep(.el-table) {
|
--el-table-bg-color: transparent;
|
--el-table-row-hover-bg-color: var(--select_color);
|
--el-table-current-row-bg-color: var(--select_color);
|
/* --el-table-current-row-bg-color: #7dff5d96; */
|
--el-table-text-color: var(--font-color);
|
}
|
|
:deep(.t-row-normal) {
|
cursor: pointer;
|
background-color: transparent !important;
|
}
|
|
:deep(.t-cell) {
|
/* background: red !important; */
|
/* height: 40px;
|
border: 1px solid black; */
|
}
|
|
:deep(.t-header-row) {
|
}
|
|
:deep(.t-header-cell) {
|
background-color: var(--bg-color-2) !important;
|
/* text-align: center !important; */
|
color: white !important;
|
}
|
</style>
|
