1778 lines
57 KiB
Vue
1778 lines
57 KiB
Vue
<script setup lang="ts">
|
||
import type { SvgMarkerOptions } from '@/gis/ol/olTarget.ts';
|
||
import dayjs from 'dayjs';
|
||
import {ElButton, ElMessage, ElMessageBox, ElNotification, ElOption} from 'element-plus';
|
||
import { useI18n } from 'vue-i18n';
|
||
import targetIconA from '@/assets/icon/targetIconA.svg';
|
||
import targetIconB from '@/assets/icon/targetIconB.svg';
|
||
|
||
import { setAnimationTime, setMultiplier } from '@/gis/ol/olClock';
|
||
import { classInstances } from '@/gis/ol/olHandleEntry';
|
||
import { sendPlaybackPostMassage } from '@/gis/worker/playbackWorkerMa';
|
||
import { add, deleteData, edit, getAllNuclearfacility, getAllStations,getReleaseDataByForwardId,saveSiteAndReleaseData,delSiteAndReleaseData, getById, getData, getTaskLog, resume, exportTemplate, importFile, pinToTop, unpin } from '@/utils/axios/symn';
|
||
import fhdfx from './compliance/index.vue';
|
||
import gxfx from './contribution/index.vue';
|
||
import log from './log/index.vue';
|
||
import sxfx from './timingAnalysis/index.vue';
|
||
import {activeMoudleInf} from "@/gis/ol";
|
||
|
||
const { t, locale } = useI18n();
|
||
const formEl = ref<FormInstance>();
|
||
const dialogVisible = ref(true);
|
||
const drawerVisible = ref(false);
|
||
const gxfxVisible = ref(false);
|
||
const fhdVisible = ref(false);
|
||
const sxfxVisible = ref(false);
|
||
const importVisible = ref(false);
|
||
const configVisible = ref(false);
|
||
const logVisible = ref(false);
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(20);
|
||
const total = ref(0);
|
||
|
||
const taskMode = ref(1);
|
||
const oldNuclear = ref('');
|
||
const nuclear = ref('');
|
||
const nuclearData = ref([]);
|
||
const nuclearOldData = ref({});
|
||
|
||
const currentPageLog = ref(1);
|
||
const pageSizeLog = ref(20);
|
||
const totalLog = ref(0);
|
||
|
||
const configType = ref('');
|
||
const logData = ref([]);
|
||
|
||
const gxfxRef = ref<InstanceType<typeof gxfx> | null>(null);
|
||
const activeTab = ref(0);
|
||
|
||
/* 任务列表搜索表单 */
|
||
const searchForm = reactive({
|
||
createTime: [] as unknown as [Date, Date],
|
||
});
|
||
|
||
/* 台站 */
|
||
const stations = reactive<any>([]);
|
||
|
||
/* 核设施列表 */
|
||
const nuclearfacility = reactive<any>([]);
|
||
const nuclearfacilityChild = reactive<any>([]);
|
||
|
||
/* 增、改表格数据 */
|
||
const childList = reactive<any>([]);
|
||
const childJson = reactive<any>({});
|
||
|
||
/* drawer侧边栏表单 */
|
||
const form = ref<any>({
|
||
taskName: '',
|
||
taskMode: '',
|
||
taskType: '',
|
||
site: '',
|
||
startTime: '',
|
||
endTime: '',
|
||
dataSource: '',
|
||
});
|
||
|
||
const rules = reactive({
|
||
taskName: [
|
||
{ required: true, message: t('pleaseEnter'), trigger: 'blur' },
|
||
],
|
||
taskMode: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
useMetType: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
z1: [
|
||
{ required: true, message: t('pleaseEnter'), trigger: 'blur' },
|
||
],
|
||
z2: [
|
||
{ required: true, message: t('pleaseEnter'), trigger: 'blur' },
|
||
],
|
||
particleCount: [
|
||
{ required: true, message: t('pleaseEnter'), trigger: 'blur' },
|
||
],
|
||
startTime: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
endTime: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
releaseDataSource: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
nuclear: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
speciesArr: [
|
||
{
|
||
required: true,
|
||
message: t('pleaseSelect'),
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
});
|
||
/* 新增、编辑表单 */
|
||
const configForm = ref<any>({});
|
||
|
||
const taskList = ref<any[]>([
|
||
|
||
]);
|
||
|
||
interface OptionItem {
|
||
label: string;
|
||
value: number;
|
||
}
|
||
const taskStatusList = ref<OptionItem[]>([
|
||
// -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过
|
||
{ label: '执行失败', value: -1 },
|
||
{ label: '未开始', value: 0 },
|
||
{ label: '等待中', value: 1 },
|
||
{ label: '运行中', value: 2 },
|
||
{ label: '已完成', value: 3 },
|
||
{ label: '检查未通过', value: 4 },
|
||
]);
|
||
|
||
function handleClose() {
|
||
dialogVisible.value = false;
|
||
}
|
||
|
||
// 查询所有核设施
|
||
function getNuclearfacility() {
|
||
getAllNuclearfacility((res: any) => {
|
||
nuclearfacility.splice(0, nuclearfacility.length, ...res);
|
||
});
|
||
}
|
||
|
||
function search() {
|
||
console.log('搜索条件：', searchForm);
|
||
getList();
|
||
}
|
||
|
||
function getList() {
|
||
let startDate, endDate;
|
||
if (searchForm.createTime && searchForm.createTime.length) {
|
||
startDate = searchForm.createTime[0];
|
||
endDate = searchForm.createTime[1];
|
||
}
|
||
getData({
|
||
...searchForm,
|
||
startDate,
|
||
endDate,
|
||
pageSize: pageSize.value,
|
||
pageNum: currentPage.value,
|
||
}, (res) => {
|
||
taskList.value = res.rows;
|
||
total.value = res.total;
|
||
});
|
||
}
|
||
|
||
function deleteTask(task: any) {
|
||
console.log('删除任务', task);
|
||
ElMessageBox.confirm(
|
||
t('isSureDelete'),
|
||
'Warning',
|
||
{
|
||
confirmButtonText: t('sure'),
|
||
cancelButtonText: t('cancel'),
|
||
type: 'warning',
|
||
},
|
||
)
|
||
.then(() => {
|
||
deleteData({ id: task.id }, () => {
|
||
getList();
|
||
});
|
||
})
|
||
.catch(() => {
|
||
});
|
||
}
|
||
function deleteChild(index: any) {
|
||
childList.splice(index, 1); // 删除索引为index的这一列
|
||
}
|
||
function deleteChild2(index: any,tableIndex: any,) {
|
||
nuclearfacilityChild[index].forwardReleaseChild.splice(tableIndex, 1); // 删除索引为index的这一列
|
||
}
|
||
function deleteChild3(tableIndex: any,) {
|
||
nuclearData.value.splice(tableIndex, 1); // 删除索引为index的这一列
|
||
}
|
||
function addChild() {
|
||
console.log('??', configForm.value.taskMode);
|
||
if (configForm.value.taskMode !== -1 && configForm.value.taskMode !== 1) {
|
||
return ElNotification({
|
||
title: 'Tips',
|
||
message: '请先选择任务模式',
|
||
type: 'warning',
|
||
duration: 1800,
|
||
});
|
||
}
|
||
childList.push({
|
||
releaseAmount: '0',
|
||
lat: '',
|
||
lon: '',
|
||
});
|
||
}
|
||
|
||
function addChild2(index:any) {
|
||
console.log('??', nuclearfacilityChild[index],index,nuclearfacilityChild);
|
||
nuclearfacilityChild[index].forwardReleaseChild.push({
|
||
releaseAmount: '0',
|
||
startTime: '',
|
||
endTime: '',
|
||
});
|
||
}
|
||
function addChild3() {
|
||
nuclearData.value.push({
|
||
releaseAmount: '0',
|
||
startTime: '',
|
||
endTime: '',
|
||
});
|
||
}
|
||
|
||
function clearChild() {
|
||
childList.splice(0);
|
||
}
|
||
// 置顶和取消置顶
|
||
const pinToTopTask = (row: any, isPin: boolean) => {
|
||
if (!isPin) {
|
||
pinToTop({ taskId: row.id }, (res) => {
|
||
if (res.code === 200) {
|
||
ElMessage.success('置顶成功！');
|
||
getList();
|
||
}
|
||
});
|
||
} else {
|
||
unpin({ taskId: row.id }, (res) => {
|
||
if (res.code === 200) {
|
||
ElMessage.success('取消置顶成功！');
|
||
getList();
|
||
}
|
||
});
|
||
}
|
||
};
|
||
function viewTask(task: any) {
|
||
debugger
|
||
console.log('查看任务：', task);
|
||
handleClose();
|
||
form.value = {
|
||
...task,
|
||
};
|
||
drawerVisible.value = true;
|
||
// if (task.taskStatus === 2) {
|
||
// 测试代码
|
||
// 任务运行完成 显示 时间轴
|
||
EventBusTool.getEventBus().publish('playData', {
|
||
key: 'show',
|
||
task,
|
||
});
|
||
EventBusTool.getEventBus().publish('timeSliderUi', {
|
||
key: 'isQueryData',
|
||
value: true,
|
||
});
|
||
if (task.taskMode === 1) {
|
||
EventBusTool.getEventBus().publish('mapRightMenuUIEvent', {
|
||
key: 'gifIcon'
|
||
});
|
||
}
|
||
|
||
// 移除所有台站
|
||
classInstances.olTarget?.clearMarkers();
|
||
|
||
// 查询所有台站
|
||
getAllStations((res: any) => {
|
||
const markerList = res.map((item: any) => {
|
||
return {
|
||
lon: item.lon,
|
||
lat: item.lat,
|
||
name: item.stationCode,
|
||
};
|
||
});
|
||
const styleOptions: SvgMarkerOptions = {
|
||
svgUrl: targetIconB, // 替换为实际的SVG URL
|
||
};
|
||
classInstances.olTarget?.addMarkers(markerList, styleOptions);
|
||
});
|
||
|
||
// 查询所有核设施
|
||
getAllNuclearfacility((res: any) => {
|
||
const markerList = res.map((item: any) => {
|
||
return {
|
||
lon: item.lonValue,
|
||
lat: item.latValue,
|
||
name: item.unitName,
|
||
};
|
||
});
|
||
const styleOptions: SvgMarkerOptions = {
|
||
svgUrl: targetIconA, // 替换为实际的SVG URL
|
||
};
|
||
classInstances.olTarget?.addMarkers(markerList, styleOptions);
|
||
});
|
||
|
||
sendPlaybackPostMassage({ code: 'clearCache' }, {});
|
||
|
||
const time = {
|
||
startTime: task.startTime,
|
||
endTime: task.endTime,
|
||
};
|
||
|
||
setMultiplier(60 * 20 * 3);
|
||
|
||
setAnimationTime(time);
|
||
// }
|
||
}
|
||
|
||
function saveConfigForm(formEl: FormInstance | undefined) {
|
||
console.log('保存或新增');
|
||
|
||
if (!formEl)
|
||
return;
|
||
|
||
formEl.validate(async (valid: any) => {
|
||
console.log('valid', valid);
|
||
if (valid) {
|
||
// if (!childList.length) {
|
||
// return ElNotification({
|
||
// title: 'Tips',
|
||
// message: '至少填写一条站点信息',
|
||
// type: 'warning',
|
||
// duration: 1800,
|
||
// });
|
||
// }
|
||
if (configType.value === 'add') {
|
||
const addValue = configForm.value = {
|
||
...configForm.value
|
||
};
|
||
if(configForm.value.taskMode === 1){
|
||
addValue.forwardChild = nuclearfacilityChild;
|
||
}else{
|
||
addValue.backwardChild = childList;
|
||
}
|
||
add(addValue, () => {
|
||
ElNotification({
|
||
title: 'Tips',
|
||
message: 'Added successfully',
|
||
type: 'success',
|
||
duration: 1800,
|
||
});
|
||
getList();
|
||
configVisible.value = false;
|
||
});
|
||
}
|
||
if (configType.value === 'edit') {
|
||
const editValue = configForm.value = {
|
||
...configForm.value
|
||
};
|
||
if(configForm.value.taskMode === 1){
|
||
if(nuclearData.value.length){
|
||
saveSite(nuclearData.value)
|
||
}
|
||
editValue.forwardChild = nuclearfacilityChild;
|
||
}else{
|
||
editValue.backwardChild = childList.map(({ id, ...rest }) => rest);
|
||
}
|
||
edit(editValue, () => {
|
||
ElNotification({
|
||
title: 'Tips',
|
||
message: 'Saved successfully',
|
||
type: 'success',
|
||
duration: 1800,
|
||
});
|
||
getList();
|
||
configVisible.value = false;
|
||
});
|
||
}
|
||
}
|
||
else {
|
||
console.log('error submit!');
|
||
}
|
||
});
|
||
}
|
||
|
||
function addTask() {
|
||
console.log('新增任务');
|
||
childList.length = 0;
|
||
configForm.value = {};
|
||
configForm.value.speciesArr = []
|
||
configForm.value.species = []
|
||
nuclearfacilityChild.splice(0);
|
||
configVisible.value = true;
|
||
configType.value = 'add';
|
||
|
||
}
|
||
|
||
function release() {
|
||
nuclearfacilityChild.map(item=>{
|
||
delete item.id
|
||
item.forwardReleaseChild = []
|
||
})
|
||
}
|
||
function editTask(task: any, $index?: any) {
|
||
console.log('编辑任务', task, $index);
|
||
childList.length = 0;
|
||
|
||
getById({ id: task.id }, (res) => {
|
||
console.log('task.taskMode', task.taskMode);
|
||
configForm.value.speciesArr = []
|
||
configForm.value.species = []
|
||
nuclearfacilityChild.splice(0);
|
||
|
||
if (res.species) {
|
||
res.species.map(item => {
|
||
configForm.value.speciesArr.push(item.speciesId)
|
||
configForm.value.species.push({speciesId:item.speciesId})
|
||
|
||
})
|
||
}
|
||
if (res.backwardChild) {
|
||
res.backwardChild.map((item: any) => {
|
||
let index = nuclearfacility.findIndex((v: any) => v.unitName === item.stationCode);
|
||
console.log('stationCode', item.stationCode);
|
||
if (task.taskMode === -1) {
|
||
index = stations.findIndex((v: any) => v.stationCode === item.stationCode);
|
||
console.log('item,stations', item, stations);
|
||
}
|
||
console.log('index', index);
|
||
|
||
delete item.createBy;
|
||
delete item.createTime;
|
||
delete item.taskId;
|
||
childList.push({
|
||
...item,
|
||
index,
|
||
});
|
||
});
|
||
}
|
||
|
||
if (res.forwardChild) {
|
||
var arr = []
|
||
res.forwardChild.map(item=>{
|
||
if(!item.forwardReleaseChild){
|
||
item.forwardReleaseChild = [];
|
||
}
|
||
})
|
||
nuclearfacilityChild.splice(0,nuclearfacilityChild.length,...res.forwardChild);
|
||
console.log('nuclearfacilityChild',nuclearfacilityChild)
|
||
res.forwardChild.map((item: any) => {
|
||
let index = nuclearfacility.findIndex((v: any) => v.unitName === item.stationCode);
|
||
arr.push(index)
|
||
});
|
||
configForm.value.nuclear = arr;
|
||
lastSelectedKeys.value = new Set(arr);
|
||
}
|
||
|
||
configForm.value.z1 = res.z1;
|
||
configForm.value.z2 = res.z2;
|
||
configForm.value.particleCount = res.particleCount;
|
||
configForm.value.startTime = res.startTime;
|
||
configForm.value.endTime = res.endTime;
|
||
configForm.value.releaseDataSource = res.releaseDataSource;
|
||
});
|
||
|
||
configForm.value = {
|
||
...task,
|
||
$index,
|
||
};
|
||
|
||
delete configForm.value.taskType;
|
||
delete configForm.value.taskPprogress;
|
||
delete configForm.value.taskStatus;
|
||
delete configForm.value.timeConsuming;
|
||
delete configForm.value.updateBy;
|
||
delete configForm.value.updateTime;
|
||
delete configForm.value.createBy;
|
||
console.log('编辑任务', configForm.value);
|
||
nuclearData.value = [];
|
||
nuclear.value = '';
|
||
configVisible.value = true;
|
||
configType.value = 'edit';
|
||
}
|
||
function getPFXX() {
|
||
// childList.length = 0;
|
||
|
||
getById({ id: configForm.value.id }, (res) => {
|
||
nuclearfacilityChild.splice(0);
|
||
|
||
if (res.forwardChild) {
|
||
var arr = []
|
||
res.forwardChild.map(item=>{
|
||
if(!item.forwardReleaseChild){
|
||
item.forwardReleaseChild = [];
|
||
}
|
||
})
|
||
nuclearfacilityChild.splice(0,nuclearfacilityChild.length,...res.forwardChild);
|
||
console.log('nuclearfacilityChild',nuclearfacilityChild)
|
||
res.forwardChild.map((item: any) => {
|
||
let index = nuclearfacility.findIndex((v: any) => v.unitName === item.stationCode);
|
||
arr.push(index)
|
||
});
|
||
configForm.value.nuclear = arr;
|
||
lastSelectedKeys.value = new Set(arr);
|
||
}
|
||
|
||
});
|
||
|
||
}
|
||
|
||
function handleSizeChange(val: number) {
|
||
console.log(`${val} items per page`);
|
||
pageSize.value = val;
|
||
getList();
|
||
}
|
||
function handleCurrentChange(val: number) {
|
||
console.log(`current page: ${val}`);
|
||
currentPageLog.value = val;
|
||
getList();
|
||
}
|
||
const logId = ref('');
|
||
|
||
function handleSizeChangeLog(val: number) {
|
||
console.log(`${val} items per page`);
|
||
pageSizeLog.value = val;
|
||
getTaskLog({
|
||
taskId: logId.value,
|
||
pageNum:currentPageLog.value,
|
||
pageSize:pageSizeLog.value,
|
||
}, (res) => {
|
||
logData.value = res.rows;
|
||
totalLog.value = res.total;
|
||
});
|
||
}
|
||
function handleCurrentChangeLog(val: number) {
|
||
console.log(`current page: ${val}`);
|
||
currentPageLog.value = val;
|
||
getTaskLog({
|
||
taskId: logId.value,
|
||
pageNum:currentPageLog.value,
|
||
pageSize:pageSizeLog.value,
|
||
}, (res) => {
|
||
logData.value = res.rows;
|
||
totalLog.value = res.total;
|
||
});
|
||
}
|
||
|
||
function refresh() {
|
||
console.log('刷新任务列表');
|
||
getList();
|
||
}
|
||
|
||
function showLog(id: any) {
|
||
console.log('显示运行日志');
|
||
logId.value = id;
|
||
getTaskLog({
|
||
taskId: id,
|
||
pageNum:currentPageLog.value,
|
||
pageSize:pageSizeLog.value,
|
||
}, (res) => {
|
||
console.log('log',res)
|
||
logData.value = res.rows;
|
||
totalLog.value = res.total;
|
||
logVisible.value = true;
|
||
|
||
|
||
});
|
||
}
|
||
|
||
function start(id: any) {
|
||
console.log('开始运行', form.value);
|
||
|
||
resume({ taskId: id }, () => {
|
||
ElNotification({
|
||
title: 'Tips',
|
||
message: 'Execution Successful',
|
||
type: 'success',
|
||
duration: 1800,
|
||
});
|
||
// form.value.taskStatus = 1;
|
||
getList();
|
||
});
|
||
}
|
||
|
||
function cancle() {
|
||
console.log('取消运行', form);
|
||
ElMessageBox.confirm(
|
||
t('isSureCancelTask'),
|
||
'Warning',
|
||
{
|
||
confirmButtonText: t('sure'),
|
||
cancelButtonText: t('cancel'),
|
||
type: 'warning',
|
||
},
|
||
)
|
||
.then(() => {
|
||
// form.value = {
|
||
// ...form.value,
|
||
// start: false,
|
||
// };
|
||
ElMessage({
|
||
type: 'success',
|
||
message: `Cancelled successfully`,
|
||
});
|
||
})
|
||
.catch(() => {
|
||
|
||
});
|
||
}
|
||
|
||
function showChart() {
|
||
console.log('贡献分析');
|
||
gxfxVisible.value = true;
|
||
}
|
||
|
||
function showFhdChart() {
|
||
console.log('符合度');
|
||
fhdVisible.value = true;
|
||
}
|
||
|
||
function showsxfxChart() {
|
||
console.log('符合度');
|
||
sxfxVisible.value = true;
|
||
}
|
||
|
||
async function exportCharts() {
|
||
console.log('子组件实例：', gxfxRef.value); // 此时能正确获取
|
||
if (gxfxRef.value) {
|
||
await gxfxRef.value.exportCharts('');
|
||
}
|
||
}
|
||
// 通过watch监听侧边栏的变化
|
||
watch(drawerVisible, (newValue) => {
|
||
console.log('抽屉状态变化:', newValue);
|
||
if (newValue === false) {
|
||
dialogVisible.value = true;
|
||
EventBusTool.getEventBus().publish('mapRightMenuUIEvent', {
|
||
key: 'baseList'
|
||
});
|
||
}
|
||
});
|
||
|
||
function setDate(val: string, index: any) {
|
||
console.log('val', nuclearfacility[val], index, val);
|
||
childList[index].lon = nuclearfacility[val].lonValue;
|
||
childList[index].lat = nuclearfacility[val].latValue;
|
||
childList[index].stationCode = nuclearfacility[val].unitName;
|
||
childList[index].releaseAmount = 0;
|
||
console.log(childList);
|
||
}
|
||
function setStationDate(val: string, index: any) {
|
||
childList[index].lon = stations[val].lon;
|
||
childList[index].lat = stations[val].lat;
|
||
childList[index].stationCode = stations[val].stationCode;
|
||
childList[index].releaseAmount = 0;
|
||
}
|
||
|
||
function setSpecies(val: any) {
|
||
configForm.value.species = []
|
||
val.map(item=>{
|
||
configForm.value.species.push({
|
||
speciesId:item
|
||
})
|
||
})
|
||
console.log('val', val,configForm.value.species);
|
||
|
||
}
|
||
|
||
// function setCode(val: any) {
|
||
// nuclearfacilityChild.splice(0);
|
||
// val.map(item=>{
|
||
// console.log('val', nuclearfacility[item]);
|
||
// nuclearfacilityChild.push({
|
||
// ...nuclearfacility[item],
|
||
// stationCode:nuclearfacility[item].unitName,
|
||
// lon:nuclearfacility[item].lonValue,
|
||
// lat:nuclearfacility[item].latValue,
|
||
// forwardReleaseChild:[]
|
||
// })
|
||
// }
|
||
// }
|
||
const lastSelectedKeys = ref(new Set()); // 响应式存储上一次选中的key
|
||
|
||
function setCode(val: any[]) {
|
||
if(configType.value === 'edit'){
|
||
|
||
// ===== 核心：对比上一次和当前选中值，提取新增/删除项 =====
|
||
const currentSelectedKeys = new Set(val);
|
||
console.log('currentSelectedKeys',currentSelectedKeys)
|
||
const prevSelectedKeys = lastSelectedKeys.value; // 上一次的选中值
|
||
|
||
// ① 新增项（当前选中但上一次未选中 → 选中操作）
|
||
const addItems = val.filter(item => !prevSelectedKeys.has(item));
|
||
// ② 删除项（上一次选中但当前未选中 → 取消操作）
|
||
const deleteItems = Array.from(prevSelectedKeys).filter(item => !currentSelectedKeys.has(item));
|
||
console.log('本次对比',prevSelectedKeys,currentSelectedKeys)
|
||
console.log('本次选中新增项：', addItems);
|
||
console.log('本次取消选中项：', deleteItems);
|
||
|
||
// ===== 把新增/删除项传给接口（按需调用）=====
|
||
// 新增项调用保存接口
|
||
if (addItems.length > 0) {
|
||
addItems.forEach(item => {
|
||
lastSelectedKeys.value = new Set(val);
|
||
console.log('nuclearfacility[item]',nuclearfacility[item],configForm.value)
|
||
saveSiteAndReleaseData({
|
||
taskId: configForm.value.id,
|
||
stationCode: nuclearfacility[item].unitName,
|
||
lon: nuclearfacility[item].lonValue,
|
||
lat: nuclearfacility[item].latValue,
|
||
forwardReleaseChild: []
|
||
}, (res: any) => {
|
||
ElMessage.success('保存成功');
|
||
getPFXX()
|
||
});
|
||
});
|
||
}
|
||
|
||
// 删除项调用删除接口
|
||
if (deleteItems.length > 0) {
|
||
deleteItems.forEach(item => {
|
||
// 先找到对应项的id（根据unitName匹配）
|
||
const deleteItem = nuclearfacilityChild.find(
|
||
child => child.stationCode === nuclearfacility[item].unitName
|
||
);
|
||
lastSelectedKeys.value = new Set(val);
|
||
console.log('deleteItem',deleteItem)
|
||
if (deleteItem?.id) {
|
||
delSite(deleteItem.id, (res: any) => {
|
||
// ElMessage.success('删除成功');
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}else{
|
||
|
||
|
||
// 1. 提取当前选中项的标识（假设item是nuclearfacility的key/索引）
|
||
const selectedKeys = new Set(val);
|
||
console.log('selectedKeys',selectedKeys)
|
||
|
||
// 2. 移除不在选中列表中的项
|
||
// 倒序遍历避免删除元素导致的索引错乱
|
||
for (let i = nuclearfacilityChild.length - 1; i >= 0; i--) {
|
||
const childItem = nuclearfacilityChild[i];
|
||
// 找到当前childItem对应的原始数据key（根据你的逻辑，这里用unitName反向匹配）
|
||
const originalKey = Object.keys(nuclearfacility).find(
|
||
key => nuclearfacility[key].unitName === childItem.stationCode
|
||
);
|
||
if (originalKey && !selectedKeys.has(originalKey)) {
|
||
nuclearfacilityChild.splice(i, 1); // 移除未选中的项
|
||
// delSite(nuclearfacilityChild[i].id)
|
||
// console.log('删除',nuclearfacilityChild[i])
|
||
}
|
||
}
|
||
|
||
// 3. 添加新选中但尚未在数组中的项
|
||
val.forEach(item => {
|
||
// 检查当前项是否已存在于nuclearfacilityChild中
|
||
const isExist = nuclearfacilityChild.some(
|
||
child => child.stationCode === nuclearfacility[item].unitName
|
||
);
|
||
// console.log('isExist',isExist,nuclearfacilityChild,nuclearfacility[item].unitName)
|
||
if (!isExist) {
|
||
// 不存在则新增，初始化forwardReleaseChild为空数组（保留原有逻辑）
|
||
nuclearfacilityChild.push({
|
||
// ...nuclearfacility[item],
|
||
stationCode: nuclearfacility[item].unitName,
|
||
lon: nuclearfacility[item].lonValue,
|
||
lat: nuclearfacility[item].latValue,
|
||
forwardReleaseChild: [] // 新项初始化空数组
|
||
});
|
||
// console.log('保存')
|
||
|
||
// saveSiteAndReleaseData({
|
||
// // ...nuclearfacility[item],
|
||
// stationCode: nuclearfacility[item].unitName,
|
||
// lon: nuclearfacility[item].lonValue,
|
||
// lat: nuclearfacility[item].latValue,
|
||
// forwardReleaseChild: [] // 新项初始化空数组
|
||
// },(res: any) => {
|
||
// ElMessage.success('保存成功');
|
||
// });
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
function setChildCode(val: any) {
|
||
if(nuclearData.value.length){
|
||
saveSite(nuclearData.value)
|
||
}
|
||
oldNuclear.value = nuclear.value;
|
||
getReleaseDataByForwardId({forwardId:nuclear.value},(res: any) => {
|
||
nuclearData.value = res;
|
||
});
|
||
}
|
||
|
||
function delSite(id:any) {
|
||
//删除单个站点排放数据
|
||
|
||
delSiteAndReleaseData({forwardId:id},(res: any) => {
|
||
ElMessage.success('删除成功');
|
||
});
|
||
}
|
||
|
||
function saveSite(data:any) {
|
||
//保存单个站点排放数据
|
||
|
||
nuclearfacilityChild.map(item=>{
|
||
if(item.id === oldNuclear.value){
|
||
console.log('item',item);
|
||
nuclearOldData.value = item;
|
||
|
||
}
|
||
})
|
||
|
||
data.map(item=>{
|
||
delete item.id
|
||
})
|
||
const param = {
|
||
...nuclearOldData.value,
|
||
forwardReleaseChild:data
|
||
}
|
||
delete param.id
|
||
saveSiteAndReleaseData(param,(res: any) => {
|
||
ElMessage.success('保存成功');
|
||
});
|
||
}
|
||
// 下载模板
|
||
const exportLoading = ref<boolean>(false);
|
||
|
||
async function exportFile() {
|
||
exportLoading.value = true;
|
||
try {
|
||
console.log('开始下载模板...',taskMode.value);
|
||
const {blob} = await exportTemplate({taskMode:taskMode.value});
|
||
const filename = '模版'
|
||
console.log('文件信息:', {
|
||
filename,
|
||
blob,
|
||
blobType: blob.type,
|
||
blobSize: `${blob.size} bytes`,
|
||
});
|
||
|
||
const excelBlob = new Blob([blob], {
|
||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // xlsx 标准类型
|
||
// 如果是 xls 格式，用：'application/vnd.ms-excel'
|
||
});
|
||
|
||
// 验证 Blob 是否有效
|
||
if (!blob || blob.size === 0) {
|
||
throw new Error('获取到的文件为空');
|
||
}
|
||
|
||
// 创建下载链接
|
||
const url = window.URL.createObjectURL(excelBlob);
|
||
const link = document.createElement('a');
|
||
link.href = url;
|
||
link.download = filename; // 使用从响应头获取的文件名
|
||
link.style.display = 'none';
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
|
||
console.log('文件下载成功:', filename);
|
||
ElMessage.success('模板下载成功');
|
||
}
|
||
catch (error) {
|
||
console.error('文件下载失败:', error);
|
||
}
|
||
finally {
|
||
exportLoading.value = false;
|
||
}
|
||
}
|
||
|
||
|
||
// 定义 ref 的类型
|
||
const fileInput: Ref<HTMLInputElement | null> = ref(null);
|
||
|
||
function handleClick(): void {
|
||
console.log('fileInput',fileInput.value)
|
||
if (fileInput.value) {
|
||
fileInput.value.value = '';
|
||
fileInput.value.click();
|
||
}
|
||
}
|
||
|
||
// 处理文件选择事件
|
||
function handleFileChange(event: Event): void {
|
||
const target = event.target as HTMLInputElement;
|
||
const file = target.files?.[0];
|
||
console.log('file',file)
|
||
if (!file) {
|
||
console.warn('未选择文件');
|
||
return;
|
||
}
|
||
|
||
form.value.file = file.name;
|
||
// 创建 FormData 对象
|
||
const formData = new FormData();
|
||
// 添加文件
|
||
formData.append('file', file);
|
||
formData.append('taskMode', taskMode.value);
|
||
|
||
// 调用接口，现在importTask只需要formData和callback
|
||
importFile(formData, (res) => {
|
||
console.log('接口响应:', res);
|
||
getList()
|
||
target.value = '';
|
||
});
|
||
}
|
||
|
||
|
||
// 查询所有台站
|
||
function getStations() {
|
||
getAllStations((res: any) => {
|
||
stations.splice(0, stations.length, ...res);
|
||
console.log('111', stations);
|
||
});
|
||
}
|
||
|
||
getList();
|
||
// 查询所有核设施
|
||
getNuclearfacility();
|
||
// 查询所有台站
|
||
getStations();
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container-wrapper ysmn">
|
||
<!-- 查看 -->
|
||
<Drawer v-model="drawerVisible">
|
||
<div class="drawer-wrapper">
|
||
<el-form class="left-form" :model="form" label-position="top" label-width="120px">
|
||
<div class="drawer-header">
|
||
{{ t('basicParameters') }}
|
||
</div>
|
||
|
||
<el-form-item :label="t('taskName')">
|
||
<el-input v-model="form.taskName" />
|
||
</el-form-item>
|
||
<el-form-item :label="t('taskMode')">
|
||
<el-input :value="form.taskMode === -1 ? '反向模拟' : '正向模拟'" />
|
||
</el-form-item>
|
||
<el-form-item :label="t('taskType')">
|
||
<el-input :value="form.taskType === 1 ? '手动创建' : '自动创建'" />
|
||
</el-form-item>
|
||
<el-form-item :label="t('taskStatus')">
|
||
<el-input v-if="form.taskStatus === -1" value="执行失败" />
|
||
<el-input v-if="form.taskStatus === 0" value="未开始" />
|
||
<el-input v-if="form.taskStatus === 1" value="等待中" />
|
||
<el-input v-if="form.taskStatus === 2" value="运行中" />
|
||
<el-input v-if="form.taskStatus === 3" value="已完成" />
|
||
<el-input v-if="form.taskStatus === 4" value="检查未通过" />
|
||
</el-form-item>
|
||
<el-form-item :label="t('dataSource')">
|
||
<el-input v-if="form.useMetType === 1" value="盘古模型" />
|
||
<el-input v-if="form.useMetType === 2" value="graphcast" />
|
||
<el-input v-if="form.useMetType === 3" value="cra40" />
|
||
<el-input v-if="form.useMetType === 4" value="ncep" />
|
||
<el-input v-if="form.useMetType === 5" value="fnl" />
|
||
<el-input v-if="form.useMetType === 6" value="t1h" />
|
||
<el-input v-if="form.useMetType === 7" value="GFS" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="t('startTime')">
|
||
<el-input v-model="form.startTime" />
|
||
</el-form-item>
|
||
|
||
<el-form-item :label="t('endTime')">
|
||
<el-input v-model="form.endTime" />
|
||
</el-form-item>
|
||
<!-- <div class="drawer-header"> -->
|
||
<!-- {{ t('operationParameters') }} -->
|
||
<!-- </div> -->
|
||
|
||
<el-form-item :label="t('creator')">
|
||
<el-input v-model="form.createBy" />
|
||
</el-form-item>
|
||
<el-form-item :label="t('creationTime')">
|
||
<el-input v-model="form.createTime" />
|
||
</el-form-item>
|
||
|
||
<el-form-item class="drawer-footer-btn">
|
||
<el-button v-if="form.progress === 100" type="success"
|
||
style="width:calc(50% - 5px); background-color: #098839;" :disabled="true">
|
||
{{ t('operationCompleted') }}
|
||
</el-button>
|
||
<!-- <el-button v-else-if="form.start" type="success" style="width:calc(50% - 5px); background-color: #406979;" -->
|
||
<!-- @click="cancle"> -->
|
||
<!-- {{ t('cancelOperation') }} -->
|
||
<!-- </el-button> -->
|
||
<!-- <el-button v-else type="success" style="width:calc(50% - 5px); background-color: #098839;" @click="start" :disabled="form.taskStatus === 2"> -->
|
||
<!-- {{ t('startOperation') }} -->
|
||
<!-- </el-button> -->
|
||
<!-- <el-button type="primary" style="width:calc(50% - 5px);margin-left: 10px;background-color: #1397a3;" -->
|
||
<!-- @click="showLog(form.id)"> -->
|
||
<!-- {{ t('operationLog') }} -->
|
||
<!-- </el-button> -->
|
||
<template v-if="form.taskMode === -1">
|
||
<el-button type="warning" style="width:calc(50% - 5px);margin:10px 0px;background-color: #406979;"
|
||
:disabled="false" @click="showChart">
|
||
{{ t('contributionAnalysis') }}
|
||
</el-button>
|
||
<el-button type="warning" style="width:calc(50% - 5px);margin:10px 0px;margin-left: 10px"
|
||
@click="showsxfxChart">
|
||
{{ t('timingAnalysis') }}
|
||
</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-button type="warning" style="margin:10px 0px;background-color: #406979;width: 100%"
|
||
:disabled="form.progress !== 100 && false" @click="showFhdChart">
|
||
{{ t('conformanceAnalysis') }}
|
||
</el-button>
|
||
</template>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</Drawer>
|
||
|
||
<!-- 贡献分析 -->
|
||
<Dialog v-model="gxfxVisible" :title="t('contributionAnalysis')" width="80vw">
|
||
<gxfx ref="gxfxRef" :data="form" />
|
||
</Dialog>
|
||
|
||
<!-- 符合度分析 -->
|
||
<Dialog v-model="fhdVisible" :title="t('conformanceAnalysis')" width="80vw">
|
||
<fhdfx ref="gxfxRef" :data="form" />
|
||
</Dialog>
|
||
|
||
<!-- 时序分析 -->
|
||
<Dialog v-model="sxfxVisible" :title="t('timingAnalysis')" width="80vw">
|
||
<sxfx :data="form" />
|
||
</Dialog>
|
||
|
||
<!-- 日志 -->
|
||
<Dialog v-model="logVisible" :title="t('operationLog')" width="56vw" class="log-custom-dialog" style="height: 700px">
|
||
<log :data="logData" />
|
||
<div class="pagination" style="display: flex;justify-content: space-around">
|
||
<el-pagination v-model:current-page="currentPageLog" v-model:page-size="pageSizeLog"
|
||
:page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500, 2000]" size="small" :background="true"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="totalLog" @size-change="handleSizeChangeLog"
|
||
@current-change="handleCurrentChangeLog" />
|
||
</div>
|
||
</Dialog>
|
||
<Dialog v-model="importVisible" :title="t('import')" width="16vw" :hide-close="false">
|
||
|
||
<div style="width: 100%;display: flex;justify-content: space-around;padding-bottom: 20px">
|
||
<el-radio-group
|
||
v-model="taskMode" text-color="#00F7E8"
|
||
fill="#00F7E8" @change="radioChange"
|
||
style="padding: 0 10px 0 20px"
|
||
>
|
||
<el-radio label="正演" :value="1" text-color="#00F7E8" fill="#00F7E8">
|
||
正演
|
||
</el-radio>
|
||
<el-radio label="反演" :value="-1" text-color="#00F7E8" fill="#00F7E8">
|
||
反演
|
||
</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
<div style="width: 100%;display: flex;justify-content: center">
|
||
<el-button class="custom-btn" @click="handleClick">
|
||
<SvgIcon name="import" width="30" height="20" style="font-weight:bold;margin-right: 1px;" />
|
||
|
||
{{ t('import') }}
|
||
<input
|
||
ref="fileInput"
|
||
type="file"
|
||
style="display: none"
|
||
@change="handleFileChange"
|
||
>
|
||
</el-button>
|
||
|
||
<el-button class="custom-btn" @click="exportFile">
|
||
<SvgIcon name="export" width="20" height="16" style="margin-right: 3px;" />
|
||
{{ t('exportTemplate') }}
|
||
</el-button>
|
||
</div>
|
||
|
||
|
||
</Dialog>
|
||
|
||
<!-- 主表 -->
|
||
<Dialog v-model="dialogVisible" :title="t('taskList')" width="86vw" :hide-close="true">
|
||
<!-- 搜索条件 -->
|
||
<ElForm :inline="true" :model="searchForm" class="custom-form">
|
||
<ElFormItem label="">
|
||
<ElInput v-model="searchForm.taskName" :placeholder="`${t('taskName')}...`" class="custom-input"
|
||
style="width: 160px" />
|
||
</ElFormItem>
|
||
<ElFormItem :label="t('taskMode')">
|
||
<ElSelect v-model="searchForm.taskMode" clearable :placeholder="t('pleaseSelect')" class="custom-select">
|
||
<ElOption label="正向模拟" :value="1" />
|
||
<ElOption label="反向模拟" :value="-1" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem :label="t('taskStatus')">
|
||
<ElSelect v-model="searchForm.taskStatus" clearable :placeholder="t('pleaseSelect')" class="custom-select">
|
||
<ElOption v-for="item in taskStatusList" :key="item.value" :label="item.label" :value="item.value" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem :label="t('dataSource')">
|
||
<ElSelect v-model="searchForm.metType" clearable :placeholder="t('pleaseSelect')" class="custom-select">
|
||
<ElOption label="盘古模型" :value="1" />
|
||
<ElOption label="graphcast" :value="2" />
|
||
<ElOption label="cra40" :value="3" />
|
||
<ElOption label="ncep" :value="4" />
|
||
<ElOption label="fnl" :value="5" />
|
||
<ElOption label="t1h" :value="6" />
|
||
<ElOption label="GFS" :value="7" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
<ElFormItem :label="t('creationTime')">
|
||
<ElDatePicker v-model="searchForm.createTime" type="daterange" value-format="YYYY-MM-DD" range-separator="--"
|
||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" class="custom-date-picker"
|
||
style="width: 246px" />
|
||
</ElFormItem>
|
||
<ElFormItem>
|
||
<ElButton type="primary" class="custom-btn" icon="Search" @click="search">
|
||
{{ t('search') }}
|
||
</ElButton>
|
||
</ElFormItem>
|
||
</ElForm>
|
||
|
||
<!-- 表格 -->
|
||
<ElTable :data="taskList" width="100%" max-height="60vh" class="custom-table">
|
||
<ElTableColumn type="index" :label="t('serialNumber')" width="100" />
|
||
<ElTableColumn prop="taskName" :label="t('taskName')" />
|
||
<ElTableColumn prop="taskMode" :label="t('taskMode')">
|
||
<template #default="scope">
|
||
{{ scope.row.taskMode === 1 ? '正向模拟' : '反向模拟' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn prop="taskType" :label="t('taskType')">
|
||
<template #default="scope">
|
||
{{ scope.row.taskType === 1 ? '手动创建' : '自动创建' }}
|
||
</template>
|
||
</ElTableColumn>
|
||
<!-- <ElTableColumn :label="t('taskProgress')"> -->
|
||
<!-- <template #default="scope"> -->
|
||
<!-- <ElProgress :percentage="scope.row.progress" class="custom-progress" /> -->
|
||
<!-- </template> -->
|
||
<!-- </ElTableColumn> -->
|
||
<ElTableColumn :label="t('taskStatus')">
|
||
<template #default="scope">
|
||
<div v-if="scope.row.taskStatus === -1" style="color:#f42a2a;">执行失败</div>
|
||
<div v-if="scope.row.taskStatus === 0" style="color:#f42a2a;">未开始</div>
|
||
<div v-if="scope.row.taskStatus === 1" style="color:#ffcb40;">等待中</div>
|
||
<div v-if="scope.row.taskStatus === 2" style="color:#ffcb40;">运行中</div>
|
||
<div v-if="scope.row.taskStatus === 3" style="color:#2af442;">已完成</div>
|
||
<div v-if="scope.row.taskStatus === 4" style="color:#f42a2a;">检查未通过</div>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn :label="t('dataSource')">
|
||
<!-- 1-盘古模型，2-graphcast，3-cra40，4-ncep,5-fnl,6-t1h，7-GFS -->
|
||
<template #default="scope">
|
||
<div v-if="scope.row.useMetType === 1">
|
||
盘古模型
|
||
</div>
|
||
<div v-if="scope.row.useMetType === 2">
|
||
graphcast
|
||
</div>
|
||
<div v-if="scope.row.useMetType === 3">
|
||
cra40
|
||
</div>
|
||
<div v-if="scope.row.useMetType === 4">
|
||
ncep
|
||
</div>
|
||
<div v-if="scope.row.useMetType === 5">
|
||
fnl
|
||
</div>
|
||
<div v-if="scope.row.useMetType === 6">
|
||
t1h
|
||
</div>
|
||
<div v-if="scope.row.useMetType === 7">
|
||
GFS
|
||
</div>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn prop="timeConsuming" :label="t('timeConsuming')" >
|
||
<template #default="scope">
|
||
<div>{{scope.row.timeConsuming}}分钟</div>
|
||
</template>
|
||
</ElTableColumn>
|
||
<!--<ElTableColumn prop="createBy" :label="t('creator')" />-->
|
||
<ElTableColumn prop="createTime" :label="t('creationTime')" />
|
||
<ElTableColumn :label="t('operation')" width="330">
|
||
<template #default="scope">
|
||
<ElButton v-if="scope.row.taskStatus === 1" type="text" class="table-btn" @click="pinToTopTask(scope, scope.topTask)">
|
||
{{ !scope.topTask ? t('pinToTop') : t('unpin') }}
|
||
</ElButton>
|
||
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
|
||
{{ !scope.topTask ? t('pinToTop') : t('unpin') }}
|
||
</ElButton>
|
||
<!-- -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过-->
|
||
<!--任务处于等待中，运行中状态时，不能编辑和删除；处于未开始，已完成，检查未通过时可以删除；处于已完成状态时也不能编辑-->
|
||
<ElButton v-if="scope.row.taskStatus === -1 || scope.row.taskStatus === 0 || scope.row.taskStatus === 4" type="text" class="custom-text-btn" @click="start(scope.row.id)">
|
||
{{ t('startOperation') }}
|
||
</ElButton>
|
||
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
|
||
{{ t('startOperation') }}
|
||
</ElButton>
|
||
<ElButton v-if="scope.row.taskStatus === 3" type="text" class="custom-text-btn" @click="viewTask(scope.row)">
|
||
{{ t('view') }}
|
||
</ElButton>
|
||
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
|
||
{{ t('view') }}
|
||
</ElButton>
|
||
<ElButton v-if="scope.row.taskStatus === -1 || scope.row.taskStatus === 0 && scope.row.taskStatus === 4" type="text" class="custom-text-btn" @click="editTask(scope.row, scope.$index)">
|
||
{{ t('edit') }}
|
||
</ElButton>
|
||
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
|
||
{{ t('edit') }}
|
||
</ElButton>
|
||
<ElButton v-if="scope.row.taskStatus == -1 || scope.row.taskStatus == 0 || scope.row.taskStatus === 3 || scope.row.taskStatus === 4" type="text" class="custom-text-btn" @click="deleteTask(scope.row)">
|
||
{{ t('delete') }}
|
||
</ElButton>
|
||
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
|
||
{{ t('delete') }}
|
||
</ElButton>
|
||
<ElButton v-if="scope.row.taskStatus === -1 || scope.row.taskStatus === 0 || scope.row.taskStatus === 1 || scope.row.taskStatus === 2 || scope.row.taskStatus === 3 || scope.row.taskStatus === 4" type="text" class="custom-text-btn" @click="showLog(scope.row.id)">
|
||
{{ t('operationLog') }}
|
||
</ElButton>
|
||
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
|
||
{{ t('operationLog') }}
|
||
</ElButton>
|
||
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
<div class="pagination">
|
||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
|
||
:page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500, 2000]" size="small" :background="true"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange" />
|
||
</div>
|
||
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
|
||
|
||
|
||
|
||
<el-button class="custom-btn" @click="importVisible = true">
|
||
<SvgIcon name="import" width="30" height="20" style="font-weight:bold;margin-right: 1px;" />
|
||
{{ t('import') }}
|
||
</el-button>
|
||
|
||
|
||
<el-button class="custom-btn" icon="Plus" @click="addTask">
|
||
{{ t('add') }}
|
||
</el-button>
|
||
|
||
<el-button type="primary" class="custom-btn" icon="Refresh" @click="refresh">
|
||
{{ t('refresh') }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
|
||
<!-- 增、改 -->
|
||
<Dialog v-model="configVisible" :title="configType === 'add' ? t('add') : t('edit')" width="60vw"
|
||
class="config-dialog">
|
||
<div class="config-dialog-title">
|
||
{{ t('basicInformation') }}
|
||
</div>
|
||
<ElForm ref="formEl" label-position="top" label-width="120px" :model="configForm" class="config-custom-form"
|
||
:rules="rules">
|
||
<ElFormItem prop="taskName" :label="t('taskName')">
|
||
<ElInput v-model="configForm.taskName" :placeholder="t('pleaseEnter')" class="config-custom-input" />
|
||
</ElFormItem>
|
||
<ElFormItem prop="taskMode" :label="t('taskMode')">
|
||
<ElSelect v-model="configForm.taskMode" :placeholder="t('pleaseSelect')" popper-class="custom-select-dropdown"
|
||
class="config-custom-select" @change="clearChild">
|
||
<ElOption label="正向模拟" :value="1" />
|
||
<ElOption label="反向模拟" :value="-1" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem prop="useMetType" :label="t('meteorologicalDataSource')">
|
||
<ElSelect v-model="configForm.useMetType" clearable :placeholder="t('pleaseSelect')"
|
||
class="config-custom-select">
|
||
<ElOption label="盘古模型" :value="1" />
|
||
<ElOption label="graphcast" :value="2" />
|
||
<ElOption label="cra40" :value="3" />
|
||
<ElOption label="ncep" :value="4" />
|
||
<ElOption label="fnl" :value="5" />
|
||
<ElOption label="t1h" :value="6" />
|
||
<ElOption label="GFS" :value="7" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem prop="z1" :label="t('releaseTheLowerHeight')">
|
||
<ElInput v-model="configForm.z1" :placeholder="t('pleaseEnter')" class="config-custom-input" />
|
||
</ElFormItem>
|
||
<ElFormItem prop="z2" :label="t('releaseTheUpperHeight')">
|
||
<ElInput v-model="configForm.z2" :placeholder="t('pleaseEnter')" class="config-custom-input" />
|
||
</ElFormItem>
|
||
<ElFormItem prop="particleCount" :label="t('particleCount')">
|
||
<ElInput v-model="configForm.particleCount" :placeholder="t('pleaseEnter')" class="config-custom-input" />
|
||
</ElFormItem>
|
||
<!-- <div style="display: flex"> -->
|
||
<ElFormItem prop="startTime" :label="t('startTime')">
|
||
<el-date-picker v-model="configForm.startTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</ElFormItem>
|
||
<ElFormItem prop="endTime" :label="t('endTime')">
|
||
<el-date-picker v-model="configForm.endTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss" />
|
||
</ElFormItem>
|
||
|
||
<ElFormItem prop="releaseDataSource" :label="t('释放数据来源')" v-if="configForm.taskMode === 1">
|
||
<ElSelect v-model="configForm.releaseDataSource" clearable :placeholder="t('pleaseSelect')"
|
||
@change="release"
|
||
class="config-custom-select">
|
||
<ElOption label="自动选择" :value="1" />
|
||
<ElOption label="手动填写" :value="2" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem prop="nuclear" :label="t('deviceCode')" v-if="configForm.taskMode === 1">
|
||
<ElSelect v-model="configForm.nuclear" filterable multiple collapse-tags
|
||
:placeholder="t('pleaseSelect')" class="config-custom-select" style="color:#fff;"
|
||
@change="setCode($event)">
|
||
<ElOption v-for="(item, index) in nuclearfacility" :key="index" :label="item.unitName" :value="index" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem prop="speciesArr" :label="t('nuclideName')" v-if="configForm.taskMode === 1">
|
||
<ElSelect multiple
|
||
collapse-tags
|
||
v-model="configForm.speciesArr"
|
||
@change="setSpecies($event)"
|
||
:placeholder="t('pleaseSelect')"
|
||
class="config-custom-select">
|
||
<ElOption label="Xe-133m" value="53" />
|
||
<ElOption label="Xe-131m" value="51" />
|
||
<ElOption label="Xe-135" value="54" />
|
||
<ElOption label="Xe-133" value="52" />
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
|
||
<div type="text" class="config-custom-input" />
|
||
</ElForm>
|
||
|
||
|
||
<!-- 正、 多条排放信息-->
|
||
<template v-if="configForm.releaseDataSource === 2 && configForm.taskMode === 1 && configType === 'add'">
|
||
<div
|
||
v-for="(v,index) in nuclearfacilityChild"
|
||
>
|
||
<div class="config-dialog-title"
|
||
|
||
style="display: flex;justify-content: space-between;margin-bottom: 20px;align-items: center">
|
||
<div>{{v.stationCode+'排放信息'}}</div>
|
||
|
||
<SvgIcon name="add" width="20" height="20" style="cursor: pointer" @click="addChild2(index)" />
|
||
</div>
|
||
|
||
<ElTable
|
||
:data="v.forwardReleaseChild" width="100%" max-height="40vh" class="custom-table" style="margin-bottom: 30px">
|
||
|
||
<ElTableColumn prop="index" label="开始时间" >
|
||
<template #default="scope">
|
||
<el-date-picker v-model="scope.row.startTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn prop="index" label="结束时间">
|
||
<template #default="scope">
|
||
<el-date-picker v-model="scope.row.endTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn :label="t('releaseAmount')">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.releaseAmount" :placeholder="t('enterContent')" />
|
||
</template>
|
||
</ElTableColumn>
|
||
|
||
<ElTableColumn :label="t('operation')" >
|
||
<template #default="scope">
|
||
<ElButton type="text" class="custom-text-btn" @click="deleteChild2(index,scope.$index)">
|
||
{{ t('delete') }}
|
||
</ElButton>
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-if="configForm.releaseDataSource === 2 && configForm.taskMode === 1 && configType === 'edit'">
|
||
|
||
|
||
|
||
|
||
<div class="config-dialog-title"
|
||
|
||
style="display: flex;justify-content: space-between;margin-bottom: 20px;align-items: center">
|
||
<div>{{'排放信息'}}
|
||
|
||
</div>
|
||
<div style="display: flex;justify-content: space-between;align-items: center">
|
||
<ElSelect v-model="nuclear" filterable
|
||
:placeholder="t('pleaseSelect')" class="config-custom-select" style="color:#fff;width: 200px"
|
||
@change="setChildCode($event)">
|
||
<ElOption v-for="(item, index) in nuclearfacilityChild" :key="index" :label="item.stationCode" :value="item.id" />
|
||
</ElSelect>
|
||
<SvgIcon name="add" width="20" height="20" style="cursor: pointer;margin-left: 20px" @click="addChild3()" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<ElTable
|
||
v-if="nuclear"
|
||
:data="nuclearData" width="100%" max-height="40vh" class="custom-table" style="margin-bottom: 30px">
|
||
|
||
<ElTableColumn prop="index" label="开始时间" >
|
||
<template #default="scope">
|
||
<el-date-picker v-model="scope.row.startTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn prop="index" label="结束时间">
|
||
<template #default="scope">
|
||
<el-date-picker v-model="scope.row.endTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn :label="t('releaseAmount')">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.releaseAmount" :placeholder="t('enterContent')" />
|
||
</template>
|
||
</ElTableColumn>
|
||
|
||
<ElTableColumn :label="t('operation')" >
|
||
<template #default="scope">
|
||
<ElButton type="text" class="custom-text-btn" @click="deleteChild3(scope.$index)">
|
||
{{ t('delete') }}
|
||
</ElButton>
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
</template>
|
||
|
||
|
||
|
||
<!-- 反-->
|
||
<div class="config-dialog-title"
|
||
v-if="configForm.releaseDataSource !== 1 && configForm.taskMode === -1"
|
||
style="display: flex;justify-content: space-between;margin-bottom: 20px;align-items: center">
|
||
<div>{{t('siteInformation') }}</div>
|
||
|
||
<SvgIcon name="add" width="20" height="20" style="cursor: pointer" @click="addChild" />
|
||
</div>
|
||
|
||
|
||
<ElTable
|
||
v-if="configForm.releaseDataSource !== 1 && configForm.taskMode === -1"
|
||
:data="childList" width="100%" max-height="40vh" class="custom-table">
|
||
|
||
|
||
<ElTableColumn prop="index" :label="t('deviceCode')" width="200">
|
||
<template #default="scope">
|
||
<!-- <ElSelect v-if="configForm.taskMode === 1" v-model="scope.row.index" filterable-->
|
||
<!-- :placeholder="t('pleaseSelect')" class="config-custom-select" style="color:#fff;"-->
|
||
<!-- @change="setDate($event, scope.$index)">-->
|
||
<!-- <ElOption v-for="(item, index) in nuclearfacility" :key="index" :label="item.unitName" :value="index" />-->
|
||
<!-- </ElSelect>-->
|
||
<ElSelect v-model="scope.row.index" filterable
|
||
:placeholder="t('pleaseSelect')" class="config-custom-select" style="color:#fff;"
|
||
@change="setStationDate($event, scope.$index)">
|
||
<ElOption v-for="(item, index) in stations" :key="index" :label="item.stationCode" :value="index" />
|
||
</ElSelect>
|
||
</template>
|
||
</ElTableColumn>
|
||
|
||
<ElTableColumn prop="lon" :label="t('longitude')" />
|
||
<ElTableColumn prop="lat" :label="t('latitude')" />
|
||
<ElTableColumn v-if="configForm.taskMode === -1" prop="index" label="测量开始时间" width="250">
|
||
<template #default="scope">
|
||
<el-date-picker v-model="scope.row.acqStartTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn v-if="configForm.taskMode === -1" prop="index" label="测量结束时间" width="250">
|
||
<template #default="scope">
|
||
<el-date-picker v-model="scope.row.acqEndTime" type="datetime" class="config-custom-input"
|
||
:placeholder="t('selectDateTime')" value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</template>
|
||
</ElTableColumn>
|
||
<ElTableColumn :label="t('releaseAmount')">
|
||
<template #default="scope">
|
||
<el-input v-model="scope.row.releaseAmount" :placeholder="t('enterContent')" />
|
||
</template>
|
||
</ElTableColumn>
|
||
|
||
|
||
<ElTableColumn :label="t('operation')" >
|
||
<template #default="scope">
|
||
<!-- <ElButton type="text" class="custom-text-btn" @click="editTask(scope.row, scope.$index)"> -->
|
||
<!-- {{ t('edit') }} -->
|
||
<!-- </ElButton> -->
|
||
<ElButton type="text" class="custom-text-btn" @click="deleteChild(scope.$index)">
|
||
{{ t('delete') }}
|
||
</ElButton>
|
||
</template>
|
||
</ElTableColumn>
|
||
</ElTable>
|
||
<!-- </ElForm> -->
|
||
|
||
<template #footer>
|
||
<div class="config-custom-btn">
|
||
<el-button v-if="configType === 'add'" @click="saveConfigForm(formEl)">
|
||
{{ t('add') }}
|
||
</el-button>
|
||
<el-button v-if="configType === 'edit'" @click="saveConfigForm(formEl)">
|
||
{{ t('save') }}
|
||
</el-button>
|
||
<el-button type="warning" @click="configVisible = false">
|
||
{{ t('cancel') }}
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</Dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang='less'>
|
||
.ysmn {
|
||
.drawer-wrapper {
|
||
width: 100%;
|
||
|
||
.left-form {
|
||
.el-form-item {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.drawer-header {
|
||
width: 100%;
|
||
height: 40px;
|
||
background-color: #03353f;
|
||
font-size: 16px;
|
||
line-height: 40px;
|
||
color: #3aecf0;
|
||
margin: 15px 0;
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
.drawer-footer-btn {
|
||
.el-button {
|
||
width: 92px;
|
||
height: 32px;
|
||
border-radius: 0;
|
||
border: 0;
|
||
color: #fff;
|
||
|
||
&:hover {
|
||
filter: brightness(1.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
.address {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.el-input {
|
||
width: calc(50% - 10px) !important;
|
||
}
|
||
}
|
||
|
||
.el-input-group__append,
|
||
.el-input-group__prepend {
|
||
border: 1px solid #09726b;
|
||
box-shadow: none;
|
||
background-color: inherit;
|
||
color: #01b6e5;
|
||
}
|
||
}
|
||
|
||
.custom-select {
|
||
width: 130px;
|
||
}
|
||
|
||
.config-dialog {
|
||
margin-top: 20vh;
|
||
|
||
.config-custom-form {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.config-custom-select,
|
||
.config-custom-input {
|
||
width: calc(20vw - 80px) !important;
|
||
}
|
||
|
||
.custom-select-dropdown {
|
||
max-width: 200px;
|
||
/* 根据实际需求调整 */
|
||
}
|
||
}
|
||
|
||
.config-custom-btn {
|
||
.el-button {
|
||
width: 92px;
|
||
height: 32px;
|
||
background-color: #08a7cf;
|
||
border-radius: 0;
|
||
border: 0;
|
||
color: #fff;
|
||
|
||
&:hover {
|
||
filter: brightness(1.3);
|
||
}
|
||
|
||
&:last-child {
|
||
background-color: #b98326;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.custom-btn {
|
||
background-color: #1397a3;
|
||
border-color: #1397a3;
|
||
color: #fff;
|
||
|
||
&:hover {
|
||
background-color: #185c5c;
|
||
border-color: #4ac1c1;
|
||
}
|
||
}
|
||
|
||
.custom-progress {
|
||
.el-progress-bar__outer {
|
||
background-color: #1a4a5a;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.el-progress-bar__inner {
|
||
background-color: #fff;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.el-progress__text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.custom-text-btn {
|
||
color: #36e7f7;
|
||
font-weight: normal !important;
|
||
|
||
&:hover {
|
||
color: #6aeaea;
|
||
}
|
||
}
|
||
|
||
.dialog-footer {
|
||
width: calc(100% - 32px);
|
||
display: flex;
|
||
justify-content: end;
|
||
padding-left: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.el-date-picker__time-header {
|
||
.el-input__wrapper {
|
||
background-color: #fff !important;
|
||
|
||
.el-input__inner {
|
||
color: #000 !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.log-custom-dialog {
|
||
.el-dialog__body {
|
||
/*background-color: #000 !important;*/
|
||
}
|
||
}
|
||
|
||
.my-loading {
|
||
/* 固定定位，脱离文档流 */
|
||
position: fixed !important;
|
||
/* 覆盖整个屏幕 */
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
/* 确保在最上层 */
|
||
z-index: 9999 !important;
|
||
/* 半透明背景 */
|
||
background-color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
.pagination {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: left;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.config-dialog-title {
|
||
width: 100%;
|
||
background: #0a4f44;
|
||
color: #fff;
|
||
padding: 10px 20px;
|
||
}
|
||
.tab-container {
|
||
display: flex;
|
||
margin: 10px 0;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
/* Tab 项：默认样式 */
|
||
.tab-item {
|
||
cursor: pointer;
|
||
border-right: none; /* 去掉右侧边框，避免重复 */
|
||
margin-right: 10px;
|
||
width: 161px;
|
||
height: 30px;
|
||
background-color: #024343;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
color: #c9f6f6;
|
||
}
|
||
|
||
/* 激活状态样式：调整背景、文字颜色等 */
|
||
.tab-active {
|
||
background-color: #034242; /* 激活时的背景色 */
|
||
color: #2affdf; /* 激活时的文字颜色 */
|
||
}
|
||
}
|
||
}
|
||
</style>
|