817 lines
29 KiB
React
817 lines
29 KiB
React
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||
import {
|
||
getLandsarLt1Capabilities,
|
||
listLandsarLt1Products,
|
||
previewLandsarLt1Production,
|
||
submitLandsarLt1Production,
|
||
} from './api/landsarLt1Production';
|
||
import { searchRadarData } from './api/radar';
|
||
import { getRegionChildren } from './api/aoi';
|
||
|
||
const PAGE_SIZE_OPTIONS = [50, 100, 200, 500];
|
||
const DEFAULT_SEARCH = {
|
||
imaging_date_from: '',
|
||
imaging_date_to: '',
|
||
imaging_mode: '',
|
||
polarization: '',
|
||
product_level: '',
|
||
orbit_direction: '',
|
||
relative_orbit: '',
|
||
product_unique_id: '',
|
||
};
|
||
|
||
const shellStyle = { display: 'grid', gap: 12 };
|
||
const sectionStyle = {
|
||
background: '#ffffff',
|
||
border: '1px solid #d8dee8',
|
||
borderRadius: 8,
|
||
padding: 14,
|
||
};
|
||
const gridStyle = {
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
|
||
gap: 12,
|
||
};
|
||
const labelStyle = {
|
||
display: 'grid',
|
||
gap: 5,
|
||
color: '#475569',
|
||
fontSize: 12,
|
||
fontWeight: 650,
|
||
};
|
||
const inputStyle = {
|
||
width: '100%',
|
||
boxSizing: 'border-box',
|
||
border: '1px solid #cbd5e1',
|
||
borderRadius: 6,
|
||
padding: '8px 9px',
|
||
color: '#0f172a',
|
||
background: '#ffffff',
|
||
fontSize: 13,
|
||
lineHeight: 1.35,
|
||
};
|
||
const mutedStyle = { color: '#64748b', fontSize: 12, lineHeight: 1.55 };
|
||
const buttonStyle = {
|
||
border: '1px solid #2563eb',
|
||
borderRadius: 6,
|
||
background: '#2563eb',
|
||
color: '#ffffff',
|
||
padding: '8px 12px',
|
||
fontSize: 13,
|
||
fontWeight: 700,
|
||
cursor: 'pointer',
|
||
};
|
||
const ghostButtonStyle = {
|
||
...buttonStyle,
|
||
border: '1px solid #cbd5e1',
|
||
background: '#ffffff',
|
||
color: '#334155',
|
||
};
|
||
const disabledButtonStyle = {
|
||
opacity: 0.5,
|
||
cursor: 'not-allowed',
|
||
};
|
||
const tableHeaderStyle = {
|
||
textAlign: 'left',
|
||
padding: 8,
|
||
borderBottom: '1px solid #e2e8f0',
|
||
};
|
||
const tableCellStyle = {
|
||
padding: 8,
|
||
borderBottom: '1px solid #e2e8f0',
|
||
};
|
||
|
||
function formatTime(value) {
|
||
if (!value) return '-';
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) return value;
|
||
return date.toLocaleString();
|
||
}
|
||
|
||
function formatYmd(value) {
|
||
const text = String(value || '').trim();
|
||
const compact = text.match(/^(\d{4})(\d{2})(\d{2})$/);
|
||
if (compact) return `${compact[1]}-${compact[2]}-${compact[3]}`;
|
||
return text || '-';
|
||
}
|
||
|
||
function StatusPill({ ok, text }) {
|
||
return (
|
||
<span
|
||
style={{
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
border: `1px solid ${ok ? '#86efac' : '#fecaca'}`,
|
||
borderRadius: 999,
|
||
padding: '3px 8px',
|
||
color: ok ? '#166534' : '#991b1b',
|
||
background: ok ? '#f0fdf4' : '#fef2f2',
|
||
fontSize: 12,
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
{text}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function sceneProduced(scene) {
|
||
return Boolean(scene.lt1_image_produced || scene.lt1_landsar_produced);
|
||
}
|
||
|
||
function getSceneTitle(scene) {
|
||
return scene.product_unique_id || scene.unique_id || scene.source_product_token || `radar:${scene.id}`;
|
||
}
|
||
|
||
function getErrorMessage(error, fallback) {
|
||
const detail = error?.response?.data?.detail;
|
||
if (typeof detail === 'string') return detail;
|
||
if (detail) return JSON.stringify(detail);
|
||
return error?.message || fallback;
|
||
}
|
||
|
||
function buildRadarSearchFormData(criteria, page, regionTreeId) {
|
||
const formData = new FormData();
|
||
formData.append('limit', String(page.limit));
|
||
formData.append('offset', String(page.offset));
|
||
formData.append('satellite_family', 'LT1');
|
||
formData.append('source_format', 'LT1_ARCHIVE');
|
||
Object.entries(criteria || {}).forEach(([key, rawValue]) => {
|
||
const value = String(rawValue ?? '').trim();
|
||
if (value) formData.append(key, value);
|
||
});
|
||
if (regionTreeId) {
|
||
formData.append('region_tree_id', regionTreeId);
|
||
}
|
||
return formData;
|
||
}
|
||
|
||
export default function LandsarLt1ProductionPanel({ readOnly, onJobQueued }) {
|
||
const [capabilities, setCapabilities] = useState(null);
|
||
const [products, setProducts] = useState([]);
|
||
const [scenes, setScenes] = useState([]);
|
||
const [scenePage, setScenePage] = useState({
|
||
limit: 100,
|
||
offset: 0,
|
||
total: 0,
|
||
hasMore: false,
|
||
});
|
||
const [searchDraft, setSearchDraft] = useState(DEFAULT_SEARCH);
|
||
const [searchApplied, setSearchApplied] = useState(DEFAULT_SEARCH);
|
||
const [regionMode, setRegionMode] = useState('none');
|
||
const [regionSelection, setRegionSelection] = useState({ province: '', city: '' });
|
||
const [regionOptions, setRegionOptions] = useState({ provinces: [], cities: [] });
|
||
const [selectedRadarIds, setSelectedRadarIds] = useState(() => new Set());
|
||
const [preview, setPreview] = useState(null);
|
||
const [message, setMessage] = useState('');
|
||
const [actionLoading, setActionLoading] = useState(false);
|
||
const [searchLoading, setSearchLoading] = useState(false);
|
||
const [regionLoading, setRegionLoading] = useState(false);
|
||
const [form, setForm] = useState({ mode: 'scene', taskName: '' });
|
||
|
||
const selectedRegionTreeId = regionSelection.city || regionSelection.province || '';
|
||
const producedRadarIds = useMemo(
|
||
() => new Set(scenes.filter(sceneProduced).map(scene => Number(scene.id))),
|
||
[scenes],
|
||
);
|
||
const selectedRadarIdList = useMemo(
|
||
() => [...selectedRadarIds].filter(id => !producedRadarIds.has(Number(id))),
|
||
[selectedRadarIds, producedRadarIds],
|
||
);
|
||
const selectableCurrentScenes = useMemo(
|
||
() => scenes.filter(scene => !sceneProduced(scene) && scene.source_product_ref_id),
|
||
[scenes],
|
||
);
|
||
const allCurrentSelectableSelected = selectableCurrentScenes.length > 0
|
||
&& selectableCurrentScenes.every(scene => selectedRadarIds.has(scene.id));
|
||
const sceneStart = scenePage.total === 0 ? 0 : scenePage.offset + 1;
|
||
const sceneEnd = Math.min(scenePage.offset + scenes.length, scenePage.total || scenePage.offset + scenes.length);
|
||
const payload = useMemo(() => ({
|
||
radar_data_ids: selectedRadarIdList,
|
||
mode: form.mode,
|
||
task_name: form.taskName.trim() || undefined,
|
||
}), [form, selectedRadarIdList]);
|
||
|
||
const refreshProducts = useCallback(async () => {
|
||
const result = await listLandsarLt1Products({ limit: 20, offset: 0 });
|
||
setProducts(Array.isArray(result?.items) ? result.items : []);
|
||
}, []);
|
||
|
||
const refreshScenes = useCallback(async () => {
|
||
setSearchLoading(true);
|
||
try {
|
||
const result = await searchRadarData(
|
||
buildRadarSearchFormData(
|
||
searchApplied,
|
||
scenePage,
|
||
regionMode === 'region' ? selectedRegionTreeId : '',
|
||
),
|
||
);
|
||
const items = Array.isArray(result?.items) ? result.items : [];
|
||
const total = Number(result?.total ?? items.length);
|
||
const offset = Number(result?.offset ?? scenePage.offset);
|
||
const limit = Number(result?.limit ?? scenePage.limit);
|
||
setScenes(items);
|
||
setScenePage(current => ({
|
||
...current,
|
||
limit,
|
||
offset,
|
||
total,
|
||
hasMore: Boolean(result?.has_more ?? (offset + items.length < total)),
|
||
}));
|
||
} finally {
|
||
setSearchLoading(false);
|
||
}
|
||
}, [regionMode, scenePage.limit, scenePage.offset, searchApplied, selectedRegionTreeId]);
|
||
|
||
const refreshCapabilities = useCallback(async () => {
|
||
const result = await getLandsarLt1Capabilities();
|
||
setCapabilities(result);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
refreshCapabilities().catch(error => setMessage(getErrorMessage(error, '读取 LT-1 生产能力失败')));
|
||
refreshProducts().catch(() => {});
|
||
}, [refreshCapabilities, refreshProducts]);
|
||
|
||
useEffect(() => {
|
||
refreshScenes().catch(error => setMessage(getErrorMessage(error, '检索 LT-1 影像失败')));
|
||
}, [refreshScenes]);
|
||
|
||
useEffect(() => {
|
||
if (!producedRadarIds.size) return;
|
||
setSelectedRadarIds(current => {
|
||
let changed = false;
|
||
const next = new Set();
|
||
current.forEach(id => {
|
||
if (producedRadarIds.has(Number(id))) changed = true;
|
||
else next.add(id);
|
||
});
|
||
return changed ? next : current;
|
||
});
|
||
}, [producedRadarIds]);
|
||
|
||
const loadProvinces = useCallback(async () => {
|
||
setRegionLoading(true);
|
||
setMessage('');
|
||
try {
|
||
const result = await getRegionChildren('1');
|
||
setRegionOptions({ provinces: Array.isArray(result?.children) ? result.children : [], cities: [] });
|
||
} catch (error) {
|
||
setMessage(getErrorMessage(error, '加载行政区失败'));
|
||
} finally {
|
||
setRegionLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadCities = useCallback(async provinceId => {
|
||
if (!provinceId) {
|
||
setRegionOptions(current => ({ ...current, cities: [] }));
|
||
return;
|
||
}
|
||
setRegionLoading(true);
|
||
setMessage('');
|
||
try {
|
||
const result = await getRegionChildren(provinceId);
|
||
setRegionOptions(current => ({ ...current, cities: Array.isArray(result?.children) ? result.children : [] }));
|
||
} catch (error) {
|
||
setMessage(getErrorMessage(error, '加载地市失败'));
|
||
} finally {
|
||
setRegionLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const updateField = (field, value) => {
|
||
setForm(current => ({ ...current, [field]: value }));
|
||
setPreview(null);
|
||
setMessage('');
|
||
};
|
||
|
||
const updateSearchDraft = (field, value) => {
|
||
setSearchDraft(current => ({ ...current, [field]: value }));
|
||
setPreview(null);
|
||
setMessage('');
|
||
};
|
||
|
||
const updateRegionMode = async value => {
|
||
setRegionMode(value);
|
||
setRegionSelection({ province: '', city: '' });
|
||
setPreview(null);
|
||
setMessage('');
|
||
if (value === 'region' && regionOptions.provinces.length === 0) {
|
||
await loadProvinces();
|
||
}
|
||
};
|
||
|
||
const updateProvince = async value => {
|
||
setRegionSelection({ province: value, city: '' });
|
||
setPreview(null);
|
||
if (value) await loadCities(value);
|
||
else setRegionOptions(current => ({ ...current, cities: [] }));
|
||
};
|
||
|
||
const updateCity = value => {
|
||
setRegionSelection(current => ({ ...current, city: value }));
|
||
setPreview(null);
|
||
};
|
||
|
||
const toggleScene = scene => {
|
||
if (sceneProduced(scene) || !scene.source_product_ref_id) return;
|
||
setPreview(null);
|
||
setMessage('');
|
||
setSelectedRadarIds(current => {
|
||
const next = new Set(current);
|
||
if (next.has(scene.id)) next.delete(scene.id);
|
||
else next.add(scene.id);
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const toggleCurrentPageSelection = () => {
|
||
setPreview(null);
|
||
setMessage('');
|
||
setSelectedRadarIds(current => {
|
||
const next = new Set(current);
|
||
if (allCurrentSelectableSelected) {
|
||
selectableCurrentScenes.forEach(scene => next.delete(scene.id));
|
||
} else {
|
||
selectableCurrentScenes.forEach(scene => next.add(scene.id));
|
||
}
|
||
return next;
|
||
});
|
||
};
|
||
|
||
const updatePageSize = value => {
|
||
const limit = Number(value);
|
||
setScenePage(current => ({ ...current, limit, offset: 0 }));
|
||
};
|
||
|
||
const goToScenePage = offset => {
|
||
setScenePage(current => ({ ...current, offset: Math.max(0, offset) }));
|
||
};
|
||
|
||
const applySearch = () => {
|
||
if (regionMode === 'region' && !selectedRegionTreeId) {
|
||
setMessage('请选择行政区。');
|
||
return;
|
||
}
|
||
setSearchApplied(searchDraft);
|
||
setScenePage(current => ({ ...current, offset: 0 }));
|
||
setPreview(null);
|
||
setMessage('');
|
||
};
|
||
|
||
const resetSearch = () => {
|
||
setSearchDraft(DEFAULT_SEARCH);
|
||
setSearchApplied(DEFAULT_SEARCH);
|
||
setRegionMode('none');
|
||
setRegionSelection({ province: '', city: '' });
|
||
setScenePage(current => ({ ...current, offset: 0 }));
|
||
setPreview(null);
|
||
setMessage('');
|
||
};
|
||
|
||
const handleRefresh = async () => {
|
||
setMessage('');
|
||
try {
|
||
await Promise.all([refreshProducts(), refreshScenes()]);
|
||
} catch (error) {
|
||
setMessage(getErrorMessage(error, '刷新失败'));
|
||
}
|
||
};
|
||
|
||
const handlePreview = async () => {
|
||
setActionLoading(true);
|
||
setMessage('');
|
||
try {
|
||
const result = await previewLandsarLt1Production(payload);
|
||
setPreview(result);
|
||
setMessage(result.allow_submit ? '预览通过' : '预览未通过');
|
||
} catch (error) {
|
||
setPreview(null);
|
||
setMessage(getErrorMessage(error, '预览失败'));
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
setActionLoading(true);
|
||
setMessage('');
|
||
try {
|
||
const result = await submitLandsarLt1Production(payload);
|
||
const queued = Array.isArray(result.queued) ? result.queued : [];
|
||
setMessage(`已提交 ${queued.length || 1} 个地理编码 GeoTIFF 生产任务`);
|
||
if (result.task_id) onJobQueued?.(result.task_id);
|
||
else queued.forEach(item => item.task_id && onJobQueued?.(item.task_id));
|
||
setPreview(null);
|
||
setSelectedRadarIds(new Set());
|
||
await Promise.all([refreshProducts(), refreshScenes()]);
|
||
} catch (error) {
|
||
setMessage(getErrorMessage(error, '提交失败'));
|
||
} finally {
|
||
setActionLoading(false);
|
||
}
|
||
};
|
||
|
||
const busy = actionLoading || searchLoading || regionLoading;
|
||
const canSubmitSelection = !readOnly && selectedRadarIdList.length > 0 && !actionLoading;
|
||
|
||
return (
|
||
<div style={shellStyle}>
|
||
<section style={sectionStyle}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<div>
|
||
<h3 style={{ margin: 0, fontSize: 16 }}>LT-1 地理编码影像生产</h3>
|
||
<div style={{ ...mutedStyle, marginTop: 5 }}>
|
||
复用影像检索筛选 LT-1 场景，再提交 Gamma 单景流水线生成 analysis_ready.tif。
|
||
</div>
|
||
</div>
|
||
<StatusPill
|
||
ok={capabilities?.engine === 'lt_gamma'}
|
||
text={capabilities?.engine === 'lt_gamma' ? 'lt_gamma 已配置' : '未配置'}
|
||
/>
|
||
</div>
|
||
{capabilities?.message && <div style={{ ...mutedStyle, marginTop: 8 }}>{capabilities.message}</div>}
|
||
</section>
|
||
|
||
<section style={sectionStyle}>
|
||
<div style={gridStyle}>
|
||
<label style={labelStyle}>
|
||
生产模式
|
||
<select
|
||
style={inputStyle}
|
||
value={form.mode}
|
||
onChange={event => updateField('mode', event.target.value)}
|
||
disabled={actionLoading || readOnly}
|
||
>
|
||
<option value="scene">单景</option>
|
||
<option value="batch">批量单景</option>
|
||
</select>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
任务名
|
||
<input
|
||
style={inputStyle}
|
||
value={form.taskName}
|
||
onChange={event => updateField('taskName', event.target.value)}
|
||
disabled={actionLoading || readOnly}
|
||
placeholder="可选"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
|
||
<button
|
||
type="button"
|
||
style={{ ...ghostButtonStyle, ...((!canSubmitSelection || actionLoading) ? disabledButtonStyle : {}) }}
|
||
onClick={handlePreview}
|
||
disabled={!canSubmitSelection}
|
||
>
|
||
预览
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style={{ ...buttonStyle, ...((!canSubmitSelection || preview?.allow_submit === false) ? disabledButtonStyle : {}) }}
|
||
onClick={handleSubmit}
|
||
disabled={!canSubmitSelection || preview?.allow_submit === false}
|
||
>
|
||
提交生产
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style={{ ...ghostButtonStyle, ...(busy ? disabledButtonStyle : {}) }}
|
||
onClick={handleRefresh}
|
||
disabled={busy}
|
||
>
|
||
刷新
|
||
</button>
|
||
</div>
|
||
{message && <div style={{ ...mutedStyle, marginTop: 10 }}>{message}</div>}
|
||
</section>
|
||
|
||
<section style={sectionStyle}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<div>
|
||
<h3 style={{ margin: 0, fontSize: 16 }}>生产候选检索</h3>
|
||
<div style={{ ...mutedStyle, marginTop: 4 }}>
|
||
调用影像检索能力，按时间、行政区、轨道、极化等条件规划要生产的 LT-1 场景。
|
||
</div>
|
||
</div>
|
||
<div style={mutedStyle}>已选 {selectedRadarIdList.length} 景</div>
|
||
</div>
|
||
|
||
<div style={{ ...gridStyle, marginTop: 12 }}>
|
||
<label style={labelStyle}>
|
||
成像时间起
|
||
<input
|
||
type="date"
|
||
style={inputStyle}
|
||
value={searchDraft.imaging_date_from}
|
||
onChange={event => updateSearchDraft('imaging_date_from', event.target.value)}
|
||
/>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
成像时间止
|
||
<input
|
||
type="date"
|
||
style={inputStyle}
|
||
value={searchDraft.imaging_date_to}
|
||
onChange={event => updateSearchDraft('imaging_date_to', event.target.value)}
|
||
/>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
成像模式
|
||
<input
|
||
style={inputStyle}
|
||
value={searchDraft.imaging_mode}
|
||
onChange={event => updateSearchDraft('imaging_mode', event.target.value)}
|
||
placeholder="如 MONO / KSC"
|
||
/>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
极化
|
||
<input
|
||
style={inputStyle}
|
||
value={searchDraft.polarization}
|
||
onChange={event => updateSearchDraft('polarization', event.target.value)}
|
||
placeholder="如 HH"
|
||
/>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
相对轨道
|
||
<input
|
||
style={inputStyle}
|
||
value={searchDraft.relative_orbit}
|
||
onChange={event => updateSearchDraft('relative_orbit', event.target.value)}
|
||
placeholder="可选"
|
||
/>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
产品名
|
||
<input
|
||
style={inputStyle}
|
||
value={searchDraft.product_unique_id}
|
||
onChange={event => updateSearchDraft('product_unique_id', event.target.value)}
|
||
placeholder="模糊匹配"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div style={{ ...gridStyle, marginTop: 12 }}>
|
||
<label style={labelStyle}>
|
||
空间范围
|
||
<select
|
||
style={inputStyle}
|
||
value={regionMode}
|
||
onChange={event => updateRegionMode(event.target.value)}
|
||
disabled={regionLoading}
|
||
>
|
||
<option value="none">不限</option>
|
||
<option value="region">行政区</option>
|
||
</select>
|
||
</label>
|
||
{regionMode === 'region' && (
|
||
<>
|
||
<label style={labelStyle}>
|
||
省份
|
||
<select
|
||
style={inputStyle}
|
||
value={regionSelection.province}
|
||
onChange={event => updateProvince(event.target.value)}
|
||
disabled={regionLoading}
|
||
>
|
||
<option value="">选择省份</option>
|
||
{regionOptions.provinces.map(item => (
|
||
<option key={item.tree_id} value={item.tree_id}>{item.name}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label style={labelStyle}>
|
||
地市
|
||
<select
|
||
style={inputStyle}
|
||
value={regionSelection.city}
|
||
onChange={event => updateCity(event.target.value)}
|
||
disabled={regionLoading || !regionSelection.province}
|
||
>
|
||
<option value="">不限地市</option>
|
||
{regionOptions.cities.map(item => (
|
||
<option key={item.tree_id} value={item.tree_id}>{item.name}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</>
|
||
)}
|
||
<label style={labelStyle}>
|
||
每页数量
|
||
<select
|
||
style={inputStyle}
|
||
value={scenePage.limit}
|
||
onChange={event => updatePageSize(event.target.value)}
|
||
disabled={searchLoading}
|
||
>
|
||
{PAGE_SIZE_OPTIONS.map(size => (
|
||
<option key={size} value={size}>{size}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', marginTop: 12, flexWrap: 'wrap' }}>
|
||
<div style={mutedStyle}>
|
||
{searchLoading ? '正在检索影像...' : `第 ${sceneStart}-${sceneEnd} 景 / 共 ${scenePage.total} 景`}
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||
<button
|
||
type="button"
|
||
style={{ ...buttonStyle, ...(busy ? disabledButtonStyle : {}) }}
|
||
onClick={applySearch}
|
||
disabled={busy}
|
||
>
|
||
检索
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style={{ ...ghostButtonStyle, ...(busy ? disabledButtonStyle : {}) }}
|
||
onClick={resetSearch}
|
||
disabled={busy}
|
||
>
|
||
重置
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style={{ ...ghostButtonStyle, ...((readOnly || searchLoading || selectableCurrentScenes.length === 0) ? disabledButtonStyle : {}) }}
|
||
onClick={toggleCurrentPageSelection}
|
||
disabled={readOnly || searchLoading || selectableCurrentScenes.length === 0}
|
||
>
|
||
{allCurrentSelectableSelected ? '取消本页选择' : '选择本页可生产'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style={{ ...ghostButtonStyle, ...((searchLoading || scenePage.offset <= 0) ? disabledButtonStyle : {}) }}
|
||
onClick={() => goToScenePage(scenePage.offset - scenePage.limit)}
|
||
disabled={searchLoading || scenePage.offset <= 0}
|
||
>
|
||
上一页
|
||
</button>
|
||
<button
|
||
type="button"
|
||
style={{ ...ghostButtonStyle, ...((searchLoading || !scenePage.hasMore) ? disabledButtonStyle : {}) }}
|
||
onClick={() => goToScenePage(scenePage.offset + scenePage.limit)}
|
||
disabled={searchLoading || !scenePage.hasMore}
|
||
>
|
||
下一页
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{ overflowX: 'auto', marginTop: 10 }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
|
||
<thead>
|
||
<tr style={{ color: '#475569', background: '#f8fafc' }}>
|
||
<th style={tableHeaderStyle}>选择</th>
|
||
<th style={tableHeaderStyle}>产品</th>
|
||
<th style={tableHeaderStyle}>日期</th>
|
||
<th style={tableHeaderStyle}>模式</th>
|
||
<th style={tableHeaderStyle}>轨道</th>
|
||
<th style={tableHeaderStyle}>极化</th>
|
||
<th style={tableHeaderStyle}>状态</th>
|
||
<th style={tableHeaderStyle}>路径</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{scenes.map(scene => {
|
||
const produced = sceneProduced(scene);
|
||
const selectable = !produced && Boolean(scene.source_product_ref_id);
|
||
const selected = selectedRadarIds.has(scene.id);
|
||
return (
|
||
<tr key={scene.id} style={{ background: selected ? '#eff6ff' : '#ffffff', opacity: produced ? 0.62 : 1 }}>
|
||
<td style={tableCellStyle}>
|
||
<input
|
||
type="checkbox"
|
||
checked={selected}
|
||
disabled={readOnly || actionLoading || !selectable}
|
||
onChange={() => toggleScene(scene)}
|
||
/>
|
||
</td>
|
||
<td style={{ ...tableCellStyle, color: '#0f172a', fontWeight: 650 }}>
|
||
{getSceneTitle(scene)}
|
||
</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{formatYmd(scene.imaging_date)}</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{scene.imaging_mode || '-'}</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{scene.relative_orbit || scene.orbit_circle || '-'}</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{scene.polarization || '-'}</td>
|
||
<td style={{ ...tableCellStyle, color: produced ? '#166534' : '#475569', fontWeight: produced ? 700 : 500 }}>
|
||
{produced ? '已生产 GeoTIFF' : (scene.source_product_ref_id ? '可生产' : '未关联源资产')}
|
||
</td>
|
||
<td
|
||
title={scene.file_path}
|
||
style={{
|
||
...tableCellStyle,
|
||
color: '#475569',
|
||
maxWidth: 360,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{scene.file_path}
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
{scenes.length === 0 && (
|
||
<tr>
|
||
<td colSpan="8" style={{ ...tableCellStyle, color: '#64748b' }}>
|
||
暂无符合条件的 LT-1 影像
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
{preview && (
|
||
<section style={sectionStyle}>
|
||
<h3 style={{ margin: 0, fontSize: 16 }}>预览结果</h3>
|
||
<div style={{ ...gridStyle, marginTop: 10 }}>
|
||
<div style={mutedStyle}>场景数: {preview.scene_count}</div>
|
||
<div style={mutedStyle}>engine: {preview.engine}</div>
|
||
<div style={mutedStyle}>profile: {preview.profile_code}</div>
|
||
</div>
|
||
{Array.isArray(preview.blockers) && preview.blockers.length > 0 && (
|
||
<div style={{ marginTop: 10, display: 'grid', gap: 6 }}>
|
||
{preview.blockers.map(item => (
|
||
<div key={item} style={{ color: '#991b1b', fontSize: 12 }}>{item}</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
{Array.isArray(preview.warnings) && preview.warnings.length > 0 && (
|
||
<div style={{ marginTop: 10, display: 'grid', gap: 6 }}>
|
||
{preview.warnings.map(item => (
|
||
<div key={item} style={{ color: '#92400e', fontSize: 12 }}>{item}</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
)}
|
||
|
||
<section style={sectionStyle}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center' }}>
|
||
<h3 style={{ margin: 0, fontSize: 16 }}>最近 LT-1 GeoTIFF 产品</h3>
|
||
<div style={mutedStyle}>{products.length} 项</div>
|
||
</div>
|
||
<div style={{ overflowX: 'auto', marginTop: 10 }}>
|
||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
|
||
<thead>
|
||
<tr style={{ color: '#475569', background: '#f8fafc' }}>
|
||
<th style={tableHeaderStyle}>产品</th>
|
||
<th style={tableHeaderStyle}>状态</th>
|
||
<th style={tableHeaderStyle}>日期</th>
|
||
<th style={tableHeaderStyle}>单位</th>
|
||
<th style={tableHeaderStyle}>时间</th>
|
||
<th style={tableHeaderStyle}>GeoTIFF</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{products.map(product => (
|
||
<tr key={product.id}>
|
||
<td style={{ ...tableCellStyle, color: '#0f172a', fontWeight: 650 }}>
|
||
{product.display_name || product.product_id}
|
||
</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{product.status}</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{formatYmd(product.summary?.imaging_date)}</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{product.summary?.backscatter_unit || '-'}</td>
|
||
<td style={{ ...tableCellStyle, color: '#475569' }}>{formatTime(product.published_at)}</td>
|
||
<td
|
||
title={product.primary_asset_path}
|
||
style={{
|
||
...tableCellStyle,
|
||
color: '#475569',
|
||
maxWidth: 360,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{product.primary_asset_path || product.publish_dir || '-'}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
{products.length === 0 && (
|
||
<tr>
|
||
<td colSpan="6" style={{ ...tableCellStyle, color: '#64748b' }}>
|
||
暂无产品
|
||
</td>
|
||
</tr>
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|