Merge branch 'master' of http://git.hivekion.com:3000/panbaolin/SourceTermAnalysisSystem_vue
This commit is contained in:
renxiangke
commit
8897906188
1
src/assets/icon/gif.svg
Normal file
1
src/assets/icon/gif.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg data-v-58697b5c="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#00E9FE" d="M704 768V256H128v512zm64-416 192-96v512l-192-96v128a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V224a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32zm0 71.552v176.896l128 64V359.552zM192 320h192v64H192z"></path></svg>
|
||||
|
After Width: | Height: | Size: 310 B |
343
src/pages/tqybjs/tab-3/index.vue
Normal file
343
src/pages/tqybjs/tab-3/index.vue
Normal file
|
|
@ -0,0 +1,343 @@
|
|||
<script setup lang="ts">
|
||||
import { ElButton, ElOption, TableInstance, UploadInstance } from 'element-plus';
|
||||
import dayjs from 'dayjs';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ref, reactive } from 'vue'; // 引入 Vue 的 set 方法
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { getData, getTaskLog } from '@/utils/axios/tqyb/task';
|
||||
import log from '../log/index.vue';
|
||||
|
||||
const emit = defineEmits(['playback']);
|
||||
const { t } = useI18n();
|
||||
const configVisible = ref(false);
|
||||
const configType = ref('');
|
||||
/* 新增、编辑表单 */
|
||||
const configForm = ref<any>({});
|
||||
|
||||
// 定义 ref 的类型
|
||||
const fileInput: Ref<HTMLInputElement | null> = ref(null);
|
||||
|
||||
const taskList = ref<any[]>([]);
|
||||
const logData = ref<any>([]);
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const total = ref(0);
|
||||
|
||||
// 存储当前选中项
|
||||
const currentSelection = ref<any>([]);
|
||||
const multipleTableRef = ref<TableInstance>();
|
||||
const logVisible = ref(false);
|
||||
|
||||
/* drawer侧边栏表单 */
|
||||
const form = ref<any>({});
|
||||
|
||||
/* 任务列表搜索表单 */
|
||||
const searchForm = reactive({});
|
||||
|
||||
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 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 refresh() {
|
||||
console.log('刷新任务列表');
|
||||
getList();
|
||||
}
|
||||
|
||||
function showLog(task: any) {
|
||||
console.log('显示运行日志');
|
||||
getTaskLog({ taskId: task.id }, (res) => {
|
||||
console.log('res', res);
|
||||
logData.value = res;
|
||||
logVisible.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelectionChange(selection: any[]) {
|
||||
// multipleTableRef.value!.clearSelection()
|
||||
// multipleSelection.value = val
|
||||
// 如果选中项长度大于1，说明是新选择了一项
|
||||
if (selection.length > 1) {
|
||||
// 清除之前的选择，只保留最新选中的项
|
||||
const latestSelection = selection[selection.length - 1];
|
||||
multipleTableRef.value?.clearSelection(); // 清空所有选择
|
||||
multipleTableRef.value?.toggleRowSelection(latestSelection, true); // 选中最新项
|
||||
currentSelection.value = [latestSelection];
|
||||
}
|
||||
else {
|
||||
// 正常选择或取消选择
|
||||
currentSelection.value = selection;
|
||||
}
|
||||
|
||||
console.log('当前选中项:', currentSelection.value);
|
||||
}
|
||||
function playback() {
|
||||
console.log('当前选中项:', currentSelection.value);
|
||||
if (Object.keys(currentSelection.value).length === 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: t(`isSelect`),
|
||||
});
|
||||
}
|
||||
else {
|
||||
const startTime = dayjs(currentSelection.value[0].startDate).add(0, 'hour').format('YYYY-MM-DD HH:mm:ss');
|
||||
const params = {
|
||||
dataType: currentSelection.value[0].predictionModel,
|
||||
weatherType: 3,
|
||||
startTime,
|
||||
endTime: dayjs(startTime).add(currentSelection.value[0].leadTime, 'hour').format('YYYY-MM-DD HH:mm:ss'),
|
||||
// hour: currentSelection.value[0].leadTime,
|
||||
hour: 0,
|
||||
};
|
||||
emit('playback', params);
|
||||
EventBusTool.getEventBus().publish('playData', {
|
||||
key: 'setTaishiParam',
|
||||
dataType: currentSelection.value[0].predictionModel,
|
||||
weatherType: 3,
|
||||
startTime,
|
||||
// hour: currentSelection.value[0].leadTime,
|
||||
hour: 0,
|
||||
endTime: dayjs(startTime).add(currentSelection.value[0].leadTime, 'hour').format('YYYY-MM-DD HH:mm:ss'),
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick(): void {
|
||||
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];
|
||||
if (!file) {
|
||||
console.warn('未选择文件');
|
||||
return;
|
||||
}
|
||||
|
||||
configForm.value.file = file;
|
||||
configForm.value.inputFile = file.name;
|
||||
// const formData = new FormData();
|
||||
// // 创建 FormData 对象
|
||||
// formData.append('inputFile', file.name);
|
||||
// formData.append('file', file);
|
||||
|
||||
// 调用接口，现在importTask只需要formData和callback
|
||||
// importFile(formData, (res:any) => {
|
||||
// console.log('接口响应:', res);
|
||||
// getList();
|
||||
// });
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
pageSize.value = val;
|
||||
getList();
|
||||
}
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
currentPage.value = val;
|
||||
getList();
|
||||
}
|
||||
getList();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ycrw">
|
||||
<!-- 主表 -->
|
||||
<ElForm :inline="true" :model="searchForm" class="custom-form">
|
||||
<ElFormItem label="">
|
||||
<ElInput v-model="searchForm.taskName" :placeholder="`${t('keyword')}...`" class="custom-input" />
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('taskStatus')">
|
||||
<ElSelect v-model="searchForm.taskStatus" :placeholder="t('pleaseSelect')" clearable class="custom-select">
|
||||
<ElOption v-for="item in taskStatusList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem :label="t('predictionDate')">
|
||||
<ElDatePicker v-model="searchForm.createTime" value-format="YYYY-MM-DD" type="daterange" range-separator="--"
|
||||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" class="custom-date-picker" />
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton type="primary" class="custom-btn" icon="Search" @click="search">
|
||||
{{ t('search') }}
|
||||
</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<ElTable ref="multipleTableRef" :data="taskList" width="100%" max-height="60vh" class="custom-table"
|
||||
@selection-change="handleSelectionChange">
|
||||
<ElTableColumn type="selection" width="55" />
|
||||
<ElTableColumn type="index" :label="t('serialNumber')" width="80" />
|
||||
<ElTableColumn prop="taskName" :label="t('taskName')" />
|
||||
<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 prop="model" :label="t('predictionModel')">
|
||||
<template #default="scope">
|
||||
<div v-if="scope.row.predictionModel === 1">
|
||||
{{ '盘古' }}
|
||||
</div>
|
||||
<div v-if="scope.row.predictionModel === 2">
|
||||
{{ 'Graphcast' }}
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="time" :label="t('predictionDate')">
|
||||
<!-- 预测日期 -->
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.startDate }}
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="startTime" :label="t('predictionStartTime')">
|
||||
<!-- 预测时间 -->
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.startTime }}
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="leadTime" :label="t('predictionDuration')">
|
||||
<!-- 预测时长 -->
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.leadTime }}小时
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn prop="hours" :label="t('timeConsuming')">
|
||||
<!-- 耗时 -->
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ (scope.row.timeConsuming) }}分钟
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<!--<ElTableColumn prop="creator" :label="t('creator')">
|
||||
<template #default="scope">
|
||||
{{ scope.row.createBy || '暂无信息' }}
|
||||
</template>
|
||||
</ElTableColumn>-->
|
||||
<ElTableColumn prop="createTime" :label="t('creationTime')" width="220" />
|
||||
</ElTable>
|
||||
<div class="pagination">
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100, 200]"
|
||||
size="small" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
|
||||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" class="custom-btn" icon="Refresh" @click="refresh">
|
||||
{{ t('refresh') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
.ycrw {
|
||||
.config-dialog {
|
||||
margin-top: 35vh;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header-wrapper {
|
||||
.el-checkbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.config-custom-date {
|
||||
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__wrapper {
|
||||
width: calc(20vw - 80px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user