<template>
|
<el-row class="wrap">
|
<BaseCard size="medium" direction="left">
|
<template #content>
|
<SatelliteSearchBar
|
:loading="loading"
|
@search="onSearch"
|
></SatelliteSearchBar>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleRankClick"
|
>
|
{{ rankVisible ? '隐藏排名' : '显示排名' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleDataClick"
|
>
|
{{ dataVisible ? '隐藏数据' : '显示数据' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleColorClick"
|
>
|
{{ isStandardColor ? '绘制对比色' : '绘制标准色' }}
|
</el-button>
|
<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 type="expand">
|
<template #default="props">
|
|
</template>
|
</el-table-column> -->
|
<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 rankVisible = ref(true);
|
const dataVisible = ref(true);
|
const isStandardColor = ref(true)
|
|
const emits = defineEmits(['search', 'rowClick', 'showRank', 'showData', 'changeColor']);
|
|
// 查询网格信息和遥感数据组
|
function onSearch(options) {
|
emits('search', options);
|
}
|
|
function handleRankClick() {
|
rankVisible.value = !rankVisible.value
|
emits('showRank', rankVisible.value);
|
}
|
|
function handleDataClick() {
|
dataVisible.value = !dataVisible.value
|
emits('showData', dataVisible.value);
|
}
|
|
function handleColorClick() {
|
isStandardColor.value = !isStandardColor.value
|
emits('changeColor', isStandardColor.value);
|
}
|
|
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>
|
