<template>
|
<el-form
|
:inline="true"
|
:model="formObj"
|
:rules="rules"
|
ref="formRef"
|
label-position="right"
|
label-width="80px"
|
>
|
<SatelliteSearchBar
|
label-width="80px"
|
:loading="loading"
|
@search="onSearchAOD"
|
></SatelliteSearchBar>
|
<OptionAOD ref="optionAODRef" v-model="aodData"></OptionAOD>
|
<el-form-item label="产品记录">
|
<el-text :type="historyGridData ? 'warning' : 'success'">{{
|
historyGridData ? '已生成' : '未生成'
|
}}</el-text>
|
</el-form-item>
|
<el-form-item label="拟合公式">
|
<div>
|
y =
|
<el-input-number
|
v-model="a"
|
:precision="2"
|
controls-position="right"
|
:controls="false"
|
placeholder="请输入系数a"
|
size="small"
|
/>
|
x +
|
<el-input-number
|
v-model="b"
|
:precision="2"
|
controls-position="right"
|
:controls="false"
|
placeholder="请输入系数b"
|
size="small"
|
/>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleShowAODClick"
|
>
|
{{ '显示AOD数据' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handlePreviewClick"
|
>
|
{{ '拟合预览' }}
|
</el-button>
|
<el-button
|
type="primary"
|
class="el-button-custom"
|
size="small"
|
@click="handleSaveClick"
|
>
|
{{ '保存拟合结果' }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
<script setup>
|
import { ref, watch } from 'vue';
|
import gridApi from '@/api/gridApi';
|
import aodApi from '@/api/aodApi';
|
import moment from 'moment';
|
import SatelliteSearchBar from '@/views/satellitetelemetry/component/SatelliteSearchBar.vue';
|
import { SatelliteProxy } from '@/views/satellitetelemetry/SatelliteProxy';
|
|
const satelliteProxy = new SatelliteProxy();
|
|
const optionAODRef = ref(null);
|
|
const gridGroup = ref(null);
|
const aodData = ref(null);
|
const aodDataDetail = ref(null);
|
const historyGridData = ref(null);
|
const a = ref(null);
|
const b = ref(null);
|
const tempGridDataDetailList = ref(null);
|
|
function handleShowAODClick() {
|
if (aodDataDetail.value) {
|
showAOD(aodDataDetail.value);
|
} else {
|
_fetchAODDetail().then((res) => {
|
showAOD(res);
|
});
|
}
|
}
|
|
// 计算PM2.5结果，后续应该在后端实现
|
function calculatePM25(aod) {
|
return Math.round((a.value * aod + b.value) * 100) / 100;
|
}
|
|
function handlePreviewClick() {
|
if (aodDataDetail.value) {
|
showPreview(aodDataDetail.value);
|
} else {
|
_fetchAODDetail().then((res) => {
|
showPreview(res);
|
});
|
}
|
}
|
|
function showAOD(data) {
|
const _aod = data.map((v, i) => {
|
return {
|
groupId: v.groupId,
|
cellId: v.cellId,
|
pm25: v.aod,
|
rank: i + 1
|
};
|
});
|
satelliteProxy.drawGrid({
|
gridDataDetail: _aod,
|
showDataTxt: true,
|
showRankTxt: true
|
});
|
}
|
|
function showPreview(data) {
|
tempGridDataDetailList.value = data.map((v, i) => {
|
return {
|
groupId: v.groupId,
|
cellId: v.cellId,
|
pm25: calculatePM25(v.aod),
|
rank: i + 1
|
};
|
});
|
tempGridDataDetailList.value.sort((a, b) => {
|
return b.pm25 - a.pm25;
|
});
|
satelliteProxy.drawGrid({
|
gridDataDetail: tempGridDataDetailList.value,
|
showDataTxt: true,
|
showRankTxt: true
|
});
|
}
|
|
function handleSaveClick() {}
|
|
function _fetchAODDetail() {
|
return aodApi
|
.fetchAODDetail(aodData.value.id, gridGroup.value.id)
|
.then((res) => {
|
res.data.sort((a, b) => {
|
return b.aod - a.aod;
|
});
|
aodDataDetail.value = res.data;
|
return res.data;
|
});
|
}
|
|
function onSearchAOD(options) {
|
gridGroup.value = options;
|
gridApi.fetchGridCell(options.id).then((res) => {
|
satelliteProxy.gridPrepare(res.data);
|
});
|
optionAODRef.value.fetchAOD(options.id);
|
}
|
|
function checkHistoryGridData() {
|
if (aodData.value) {
|
const groupId = gridGroup.value.id;
|
const dataTime = moment(aodData.value.dataTime).format(
|
'YYYY-MM-DD HH:mm:ss'
|
);
|
// 原始卫星数据
|
const type = 0;
|
return gridApi.fetchGridData(groupId, dataTime, type).then((res) => {
|
if (res.data.length > 0) {
|
historyGridData.value = res.data[0];
|
} else {
|
historyGridData.value = null;
|
}
|
});
|
} else {
|
historyGridData.value = null;
|
}
|
}
|
|
watch(aodData, (nv, ov) => {
|
if (nv != ov) {
|
aodDataDetail.value = null;
|
checkHistoryGridData();
|
}
|
});
|
</script>
|
