panbaolin/SourceTermAnalysisSystem_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

回放，预览bug

Browse Source
This commit is contained in:
冯少康 2026-08-06 10:53:48 +08:00
parent 324e6302a7
commit 4b24e87192
13 changed files with 719 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/gis/ol/index.ts
View File

@ -44,7 +44,7 @@ const defaultGeosion: any = {
defau2: false,
};
// 风场是否开启
const weathFlag: any = { 0: false, 1: false, 2: false, 3: false };
const weathFlag: any = { 0: false, 1: false, 2: false, 3: true };
let weathRequesTime = '';
export function setWeathRequesTime(value: any) {
weathRequesTime = value;
@ -215,6 +215,17 @@ const palyDateEvent: any = {
addWeathLayer(map, weathOpt.imageUrl);
// 清理UI
const eventbus = EventBusTool.getEventBus();
console.log(weathOpt,gisImgOpt,"222222222222222222")
if(gisImgOpt.weatherType==0){
weathOpt.legengOpt.unit = "℃";
}else if(gisImgOpt.weatherType==1){
weathOpt.legengOpt.unit = "kPa";
}else if(gisImgOpt.weatherType==2){
weathOpt.legengOpt.unit = "%";
}
eventbus.publish('playUI', {
key: 'showWeathLength',
legengOpt: weathOpt.legengOpt,
@ -234,6 +245,8 @@ const palyDateEvent: any = {
// 设置态势图层参数
setTaishiParam(map: any, eventOpt?: any) {
gisImgOpt = { ...eventOpt };
console.log(gisImgOpt,"1")
weathRequesTime = eventOpt.startTime;
// 设置时间
@ -258,6 +271,10 @@ const palyDateEvent: any = {
setWeathLayerVisity(eventOpt.isActive);
}
},
updateTimeCurrentIndex(map: any, eventOpt?: any){
gisImgOpt.hour = eventOpt.hour;
console.log(gisImgOpt,"2")
}
};
// 初始化地图

47
src/gis/ol/olClock.ts
View File

@ -1,7 +1,7 @@
import dayjs from 'dayjs';
import dayjs from "dayjs";
// 时钟类
import Clock from '@/gis/common/clock/clock/Clock'; // 根据实际路径调整
import JulianDate from '../common/clock/JulianData/JulianDate';
import Clock from "@/gis/common/clock/clock/Clock"; // 根据实际路径调整
import JulianDate from "../common/clock/JulianData/JulianDate";
let timeLoop = false;
let olClock: any;
@ -22,39 +22,49 @@ export function initClock(params?: any) {
olClock = new Clock({ shouldAnimate: false, clockRange: 1 });
timeLoop = true;
if (olClock && params) {
console.log(params, "2222");
olClock.startTime = JulianDate.fromDate(new Date(params.startTime));
olClock.currentTime = JulianDate.fromDate(new Date(params.startTime));
olClock.stopTime = JulianDate.fromDate(new Date(params.endTime));
// olClock.multiplier = 60 * 60;
olClock.multiplier = 60 * 60;
EventBusTool.getEventBus().publish('timeSliderUi', { key: 'setTime', ...params });
EventBusTool.getEventBus().publish("timeSliderUi", {
key: "setTime",
...params,
});
}
// 触发帧回调
_timeLoop();
// 添加动画控件UI帧回调事件
olClock.onTick.addEventListener((time: any) => {
if (olClock.shouldAnimate) {
EventBusTool.getEventBus().publish('timeSliderUi', { key: 'updateUi', time: JulianDate.toDate(time.currentTime).getTime() });
EventBusTool.getEventBus().publish("timeSliderUi", {
key: "updateUi",
time: JulianDate.toDate(time.currentTime).getTime(),
});
}
});
}
// 设置是否播放
export function setShouldAnimate(falg: boolean) {
console.log(olClock,"dsudhu");
if (falg && olClock.currentTime >= olClock.stopTime) {
// 重置当前时间为开始时间
// 重置当前时间为开始时间
olClock.currentTime = JulianDate.clone(olClock.startTime);
}
olClock.shouldAnimate = falg;
EventBusTool.getEventBus().publish('timeSliderUi', { key: 'playFalg', playFalg: falg });
EventBusTool.getEventBus().publish("timeSliderUi", {
key: "playFalg",
playFalg: falg,
});
}
export function stopPlay() {
if (!olClock)
return;
// 暂停动画
if (!olClock) return;
// 暂停动画
olClock.shouldAnimate = false;
// 重置当前时间为开始时间
olClock.currentTime = JulianDate.clone(olClock.startTime);
@ -67,11 +77,16 @@ export function setMultiplier(num: number) {
// 设置动画时间
export function setAnimationTime(opt: any) {
if (olClock && opt) {
if (!opt.startTime || !opt.endTime) { return }
if (!opt.startTime || !opt.endTime) {
return;
}
olClock.startTime = JulianDate.fromDate(new Date(opt.startTime));
olClock.currentTime = JulianDate.fromDate(new Date(opt.startTime));
olClock.stopTime = JulianDate.fromDate(new Date(opt.endTime));
EventBusTool.getEventBus().publish('timeSliderUi', { key: 'setTime', ...opt });
EventBusTool.getEventBus().publish("timeSliderUi", {
key: "setTime",
...opt,
});
}
}
// 设置当前时间
@ -115,7 +130,7 @@ export function removeClockOnTickEvent(key: any) {
const originalCallback = callBackEvnets.get(key);
olClock.onTick.removeEventListener(originalCallback); // 关键：用原始回调移除
callBackEvnets.delete(key);
console.log('移除后事件列表：', callBackEvnets); // 确认已删除（Map(0)）
console.log("移除后事件列表：", callBackEvnets); // 确认已删除（Map(0)）
}
}
@ -127,8 +142,10 @@ export function getClockTimeRange() {
const startTime = JulianDate.toDate(olClock.startTime);
const endTime = JulianDate.toDate(olClock.stopTime);
const formatStartTime = dayjs(startTime.getTime()).format('YYYY-MM-DD HH:mm:ss');
const formatEndTime = dayjs(endTime.getTime()).format('YYYY-MM-DD HH:mm:ss');
const formatStartTime = dayjs(startTime.getTime()).format(
"YYYY-MM-DD HH:mm:ss",
);
const formatEndTime = dayjs(endTime.getTime()).format("YYYY-MM-DD HH:mm:ss");
return {
formatStartTime,

2
src/layout/Container/mapRightMenu.vue
View File

@ -556,7 +556,7 @@ onMounted(() => {
"
>
<div
style="width: 25%; display: flex; margin-top: 15px"
style="width: 15%; display: flex; margin-top: 15px"
>
<el-select
v-model="downTypeValue"

130
src/layout/Container/mapTimeSlider.vue
View File

@ -72,8 +72,8 @@ const tabsList = ref<TabItem[]>([
{ label: "天", value: "day", isActive: false },
]);
const labelLeft = ref(0)
const labelText = ref('')
const labelLeft = ref(0);
const labelText = ref("");
// 下拉菜单台站选中项(输运模拟业务使用)
const stationValue = ref<any>(null);
@ -103,6 +103,8 @@ const slodtooltip: any = (toolNum: number) => {
const active = ref("浓度分布");
const _isPlayFirstFrame = ref(false);
function switchActive(tab: string) {
if (playFalg.value) return;
active.value = tab;
@ -153,17 +155,17 @@ function handleChange(val: number) {
// 滑块值代表距离开始时间的小时数
const currentTime = start.value.add(val, marskType.value);
labelText.value = currentTime.format("YYYY-MM-DD HH:mm:ss");
setcurrentTime(currentTime.valueOf());
nextTick(() => {
const sliderDom = document.querySelector('.slider .el-slider__runway')
if (!sliderDom) return
const sliderDom = document.querySelector(".slider .el-slider__runway");
if (!sliderDom) return;
const width = sliderDom.offsetWidth;
// 百分比位置
const percent = val / totalHours.value
const percent = val / totalHours.value;
// 基础位置，居中偏移，微调数值控制对齐
labelLeft.value = percent * width - 60
})
labelLeft.value = percent * width - 60;
});
}
// 切换显示标签
function switchTab(tab: TabItem) {
@ -267,15 +269,16 @@ function updateTimeLabel(ctime: any) {
props.activeMenu === "输运模拟"
? currentHourDiff % 3 === 0
: currentHourDiff % 1 === 0;
// 仅当currentHourDiff是marks中的刻度值时，才更新滑块
if (
currentHourDiff >= 0 &&
(currentHourDiff >= 0 &&
currentHourDiff <= totalHours.value &&
// && markKeys.includes(currentHourDiff) // 关键判断：是否为刻度值
isDifferentValue && // 只有值不同时才更新
is6HourInterval
is6HourInterval)||!_isPlayFirstFrame.value
) {
_isPlayFirstFrame.value = true
value.value = currentHourDiff;
if (markKeys.includes(currentHourDiff)) {
// 获取当前currentHourDiff在markKeys中的索引（第几个刻度）
@ -286,6 +289,12 @@ function updateTimeLabel(ctime: any) {
`获取第${currentIndex + 1}组数据,当前时间为`,
dataRequestOpt.value[currentHourDiff]
);
EventBusTool.getEventBus().publish("playData", {
key: "updateTimeCurrentIndex",
hour: currentHourDiff,
});
setWeathRequesTime(dataRequestOpt.value[currentHourDiff]);
// 其他气象进行请求数据
const params = { ...gisImgOpt };
@ -302,18 +311,18 @@ function updateTimeLabel(ctime: any) {
});
});
// 判定风场数据
// if (weathFlag[3] === true) {
// const params = { ...gisImgOpt, weatherType: 3, startTime: dataRequestOpt.value[currentHourDiff] };
// delete params.key;
// delete params.endTime;
// playbackSearchData(params, true, (res) => {
// // 往态势传递数据
// EventBusTool.getEventBus().publish('playData', {
// key: 'addyctqjsGis',
// data: res.result,
// });
// });
// }
if (weathFlag[3] === true&&gisImgOpt.weatherType!=3) {
const params = { ...gisImgOpt, weatherType: 3, startTime: dataRequestOpt.value[currentHourDiff],hour:currentHourDiff };
delete params.key;
delete params.endTime;
playbackSearchData(params, true, (res) => {
// 往态势传递数据
EventBusTool.getEventBus().publish('playData', {
key: 'addyctqjsGis',
data: res.result,
});
});
}
}
}
}
@ -373,26 +382,30 @@ watch(
{ deep: true }
);
watch(value, (newVal, oldVal) => {
let currentTime = null;
if(ssmnOption.value.taskMode==-1){
currentTime = end.value.clone().subtract(newVal, marskType.value);
}else{
currentTime = start.value.clone().add(newVal, marskType.value);
watch(
value,
(newVal, oldVal) => {
let currentTime = null;
if (ssmnOption.value?.taskMode == -1 && props.activeMenu === "输运模拟") {
currentTime = end.value.clone().subtract(newVal, marskType.value);
} else {
currentTime = start.value.clone().add(newVal, marskType.value);
}
labelText.value = currentTime.format("YYYY-MM-DD HH:mm:ss");
nextTick(() => {
const sliderDom = document.querySelector(".slider .el-slider__runway");
if (!sliderDom) return;
const width = sliderDom.offsetWidth;
// 百分比位置
const percent = newVal / totalHours.value;
// 基础位置，居中偏移，微调数值控制对齐
labelLeft.value = percent * width - 60;
});
},
{
// immediate: true // 【可选】页面初次加载立即执行一次
}
labelText.value = currentTime.format("YYYY-MM-DD HH:mm:ss");
nextTick(() => {
const sliderDom = document.querySelector('.slider .el-slider__runway')
if (!sliderDom) return
const width = sliderDom.offsetWidth;
// 百分比位置
const percent = newVal / totalHours.value
// 基础位置，居中偏移，微调数值控制对齐
labelLeft.value = percent * width - 60
})
}, {
// immediate: true // 【可选】页面初次加载立即执行一次
})
);
onMounted(() => {
EventBusTool.getEventBus().subscribe("timeSliderUi", (opt: any) => {
@ -430,6 +443,11 @@ onMounted(() => {
break;
}
});
EventBusTool.getEventBus().subscribe("updateHfKsFlag", (opt: any) => {
_isPlayFirstFrame.value = opt;
labelText.value = ""
});
});
</script>
@ -505,9 +523,15 @@ onMounted(() => {
>
<SvgIcon name="stop" title="停止" width="34" height="34" />
</div>
<div class="slider" style="position: relative;">
<div class="slider" style="position: relative">
<!-- <div style="color: white">value:{{ start.format("YYYY-MM-DD HH:mm:ss") }} ----- totalHours:{{ end.format("YYYY-MM-DD HH:mm:ss") }}</div> -->
<div class="startTimes">{{ ssmnOption.taskMode==-1?ssmnOption.endTime:ssmnOption.startTime }}</div>
<div class="startTimes">
{{
ssmnOption?.taskMode == -1 && props.activeMenu === "输运模拟"
? end.format("YYYY-MM-DD HH:mm:ss")
: start.format("YYYY-MM-DD HH:mm:ss")
}}
</div>
<el-slider
v-model="value"
:disabled="isDisabledSlider"
@ -518,8 +542,18 @@ onMounted(() => {
:marks="marks"
@input="handleChange"
/>
<div class="endTimes">{{ ssmnOption.taskMode==-1?ssmnOption.startTime:ssmnOption.endTime }}</div>
<div class="slider-label" :style="{ left: labelLeft + 'px' }" v-if="labelText">
<div class="endTimes">
{{
ssmnOption?.taskMode == -1 && props.activeMenu === "输运模拟"
? start.format("YYYY-MM-DD HH:mm:ss")
: end.format("YYYY-MM-DD HH:mm:ss")
}}
</div>
<div
class="slider-label"
:style="{ left: labelLeft + 'px' }"
v-if="labelText"
>
{{ labelText }}
</div>
</div>
@ -542,14 +576,14 @@ onMounted(() => {
transition: left 0.08s linear;
}
.startTimes{
.startTimes {
position: absolute;
left: 0;
bottom: -10px;
color: #fff;
}
.endTimes{
.endTimes {
position: absolute;
right: 0;
bottom: -10px;

211
src/layout/Container/meteorologyMenu.vue
View File

@ -1,90 +1,66 @@
<!-- gis地图右侧侧边栏icon文件 -->
<script setup lang="ts">
// 引入单击Icon对应方法集合
import type { meteorologyItem } from '@/gis/ol/interface/common';
import { domFullscreenStatus } from '@/gis/common/domHandle';
import { gisImgOpt } from '@/gis/ol/index';
import { playbackSearchData, weatherDataLine, weatherPreview } from '@/utils/axios/tqyb/data/index';
import type { meteorologyItem } from "@/gis/ol/interface/common";
import { domFullscreenStatus } from "@/gis/common/domHandle";
import { gisImgOpt, tqycAnimationType } from "@/gis/ol/index";
import {
playbackSearchData,
weatherDataLine,
weatherPreview,
} from "@/utils/axios/tqyb/data/index";
import { ElMessage } from "element-plus";
// 图标集合
const svgList :any= ref<meteorologyItem[]>([
const svgList: any = ref<meteorologyItem[]>([
{
name: 'humidity',
name: "humidity",
isActive: false,
activeName: 'humidity_active',
tooltip: '湿度',
activeName: "humidity_active",
tooltip: "湿度",
weatherType: 2,
},
{
name: 'temperature',
name: "temperature",
isActive: false,
activeName: 'temperature_active',
tooltip: '温度',
activeName: "temperature_active",
tooltip: "温度",
weatherType: 0,
},
{
name: 'airPressure',
name: "airPressure",
isActive: false,
activeName: 'airPressure_active',
tooltip: '气压',
activeName: "airPressure_active",
tooltip: "气压",
weatherType: 1,
},
{
name: 'windField',
name: "windField",
isActive: true,
activeName: 'windField_active',
tooltip: '风场',
activeName: "windField_active",
tooltip: "风场",
weatherType: 3,
},
]);
const activeName= ref('windField');
const activeName = ref("windField");
const hgOrYlId = ref({});
// 图标点击事件处理
function handleIconClick(item: meteorologyItem) {
// 风场图标特殊处理：默认选中且不可取消
const eventbus = EventBusTool.getEventBus();
if (item.name === 'windField') {
item.isActive = !item.isActive;
eventbus.publish('playData', {
key: 'setWeathTypeParam',
weatherType: item.weatherType,
isActive: item.isActive,
if (item.name === "windField") {
ElMessage({
message: "风场不可取消",
type: "warning",
});
if(item.name ===activeName.value ){
eventbus.publish('playData', {
key: 'setWeatherLayerVisity',
weatherType: item.weatherType,
isActive: item.isActive,
});
}
// // true 添加
// if (item.isActive) {
// playbackSearchData(gisImgOpt, true, (res) => {
// console.log(res);
// // 往态势传递数据
// EventBusTool.getEventBus().publish('playData', {
// key: 'addyctqjsGis',
// data: res.result,
// });
// });
// }
// else {
// // false 删除
// eventbus.publish('playData', {
// key: 'removeWindLayer',
// });
// }
activeName.value = item.name;
return; // 点击风场不做任何操作，保持选中状态
}
// 处理湿度、温度、气压的三选一逻辑 先判定切换逻辑
const weatherGroup = ['humidity', 'temperature', 'airPressure'];
const weatherGroup = ["humidity", "temperature", "airPressure"];
const isInWeatherGroup = weatherGroup.includes(item.name);
if (isInWeatherGroup) {
@ -92,50 +68,65 @@ activeName.value = item.name;
svgList.value.forEach((icon) => {
if (weatherGroup.includes(icon.name) && icon.name !== item.name) {
icon.isActive = false;
eventbus.publish('playData', {
key: 'setWeathTypeParam',
eventbus.publish("playData", {
key: "setWeathTypeParam",
weatherType: item.weatherType,
isActive: item.isActive,
});
}
});
// 激活当前点击的图标
item.isActive = true;
eventbus.publish('playData', {
key: 'setWeathTypeParam',
item.isActive = !item.isActive;
eventbus.publish("playData", {
key: "setWeathTypeParam",
weatherType: item.weatherType,
isActive: item.isActive,
});
// const eventbus = EventBusTool.getEventBus();
// 执行对应操作
// eventbus.publish('playData', {
// key: 'removeHeatMap',
// });
// eventbus.publish('playData', {
// key: 'addHeatMap',
// });
}
// 在判定同一点击逻辑
// 在判定同一点击逻辑
// 更新数据
if (item.isActive) {
playbackSearchData(gisImgOpt, true, (res) => {
console.log(res);
// 往态势传递数据
EventBusTool.getEventBus().publish('playData', {
key: 'addyctqjsGis',
data: res.result,
if (item.isActive) {
if (tqycAnimationType == 1) {
let obj = {
weatherId: gisImgOpt.weatherId,
weatherType: gisImgOpt.weatherType,
timeBatch: gisImgOpt.timeBatch,
};
weatherPreview(obj, (res) => {
// 往态势传递数据
EventBusTool.getEventBus().publish("playData", {
key: "addyctqjsGis",
data: res.result,
animationType: 1,
});
});
});
}
else {
} else {
playbackSearchData(gisImgOpt, false, (res) => {
// 往态势传递数据
EventBusTool.getEventBus().publish("playData", {
key: "addyctqjsGis",
data: res.result,
});
});
}
} else {
// false 删除
eventbus.publish('playData', {
key: 'removeGisWindLayer',
eventbus.publish("playData", {
key: "setWeathTypeParam",
weatherType: 3,
isActive: true,
});
eventbus.publish("playData", {
key: "removeGisWindLayer",
});
eventbus.publish("playUI", {
key: "hideWeathLength",
});
}
activeName.value = item.name;
}
@ -143,44 +134,84 @@ onMounted(() => {
// 判断当前是否处于全屏状态
svgList.value[0].isActive = domFullscreenStatus();
// 注册右边菜单UI回调事件
EventBusTool.getEventBus().subscribe('mapRightMenuUIEvent', (res: any) => {
EventBusTool.getEventBus().subscribe("mapRightMenuUIEvent", (res: any) => {
// 如果进入全屏，全屏icon没有高亮的话，需要高亮
if (res.key === 'enterFullscreen' && !svgList.value[0].isActive) {
if (res.key === "enterFullscreen" && !svgList.value[0].isActive) {
svgList.value[0].isActive = true;
}
// 如果退出全屏，全屏icon是高亮的话，需要取消高亮
else if (res.key === 'exitFullscreen' && svgList.value[0].isActive) {
else if (res.key === "exitFullscreen" && svgList.value[0].isActive) {
svgList.value[0].isActive = false;
}
// 如果退出全屏，全屏icon是高亮的话，需要取消高亮
else if (res.key === 'f11KeyPressed') {
else if (res.key === "f11KeyPressed") {
if (!svgList.value[0].isActive) {
svgList.value[0].isActive = true;
}
else {
} else {
svgList.value[0].isActive = false;
}
}
// 如果退出全屏，全屏icon是高亮的话，需要取消高亮
else if (res.key === 'switchLocalLayer') {
else if (res.key === "switchLocalLayer") {
svgList.value[1].isActive = false;
svgList.value[2].isActive = true;
}
});
// 更新温度、湿度、气压的图标显影
EventBusTool.getEventBus().subscribe("upRightHfOrylIcon", (res: any) => {
svgList.value = [
{
name: "humidity",
isActive: false,
activeName: "humidity_active",
tooltip: "湿度",
weatherType: 2,
},
{
name: "temperature",
isActive: false,
activeName: "temperature_active",
tooltip: "温度",
weatherType: 0,
},
{
name: "airPressure",
isActive: false,
activeName: "airPressure_active",
tooltip: "气压",
weatherType: 1,
},
{
name: "windField",
isActive: true,
activeName: "windField_active",
tooltip: "风场",
weatherType: 3,
},
];
});
});
</script>
<template>
<div class="icon_container">
<div
v-for="(item, index) in svgList" :key="index" class="iconBox" :class="{ 'has-active': item.isActive }"
v-for="(item, index) in svgList"
:key="index"
class="iconBox"
:class="{ 'has-active': item.isActive }"
@click="handleIconClick(item)"
>
<div class="text">
{{ item.tooltip }}
</div>
<div class="icon">
<SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
<SvgIcon
:name="item.isActive ? item.activeName : item.name"
width="20"
height="20"
/>
</div>
</div>
</div>

2
src/layout/Container/weathLength.vue
View File

@ -56,7 +56,7 @@ defineExpose({ updateLegend });
class="top-label"
:style="{ left: `${index === 0 ? (stop.position * 100 + 4) : index === (legendOptions.colorStops.length - 1) ? (stop.position * 100 - 5) : stop.position * 100}%` }"
>
{{ getLabelValue(stop.position) }}
{{ getLabelValue(stop.position) }}{{ legendOptions.unit }}
</span>
</div>

1
src/locales/language/zh.json
View File

@ -245,6 +245,7 @@
"targetUserName": "目标用户名",
"selectTqybTableDataType": "请选择数据源",
"selectStartAndEndTime": "请选择起止时间",
"selectTimeBatch":"请选择批次",
"sceneType": "场景类型",
"runtime": "运行时间",
"releaseTheLowerHeight": "释放下部高度",

6
src/pages/symn/index.vue
View File

@ -1523,7 +1523,7 @@ getStations();
<Dialog
v-model="configVisible"
:title="configType === 'add' ? t('add') : t('edit')"
width="60vw"
width="61vw"
class="config-dialog"
>
<div class="config-dialog-title">
@ -1892,7 +1892,7 @@ getStations();
max-height="40vh"
class="custom-table"
>
<ElTableColumn prop="index" :label="t('deviceCode')" width="100">
<ElTableColumn prop="index" :label="t('deviceCode')" width="110">
<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;"-->
@ -1950,7 +1950,7 @@ getStations();
</template>
</ElTableColumn>
<!-- 样品ID -->
<ElTableColumn :label="t('sampleId')" width="80">
<ElTableColumn :label="t('sampleId')" width="95">
<template #default="scope">
<el-input
v-model="scope.row.sampleId"

25
src/pages/tqybjs/index.vue
View File

@ -47,30 +47,7 @@ watch(drawerVisible, (newValue) => {
// }
// 回放
function handleSendData(params: any) {
console.log('选中的回放数据,需要传至gis --->', params);
delete params.key
delete params.endTime
params.hour+=6;
playbackSearchData(params, false, (res) => {
console.log(res);
// 将请求前的传递方法放到这里：只有请求成功后才会传递
EventBusTool.getEventBus().publish('playData', {
key: 'show',
});
if (params.timeBatch) {
timeBatch.value = params.timeBatch;
}
else {
timeBatch.value = null;
}
// 往态势传递数据
EventBusTool.getEventBus().publish('playData', {
key: 'addyctqjsGis',
data: res.result,
animationType: 0,
});
dialogVisible.value = false;
});
dialogVisible.value = false;
}
// 预览
function weatherPreviewHandle(params: any) {

582
src/pages/tqybjs/tab-1/index.vue
View File

@ -1,17 +1,41 @@
<script setup lang="ts">
import {ElButton, ElOption, TableInstance, UploadInstance, UploadProps, UploadRawFile} from 'element-plus';
import dayjs from 'dayjs';
import { ElLoading, ElMessage, ElMessageBox, ElNotification, genFileId } from 'element-plus';
import SparkMD5 from 'spark-md5';
import { set } from 'vue'; // 引入 Vue 的 set 方法
import { useI18n } from 'vue-i18n';
import { add, deleteData, edit, getData, getTaskLog, resume, pinToTopOrUnpin } from '@/utils/axios/tqyb/task';
import log from '@/pages/symn/log/index.vue';
const emit = defineEmits(['playback']);
import {
ElButton,
ElOption,
TableInstance,
UploadInstance,
UploadProps,
UploadRawFile,
} from "element-plus";
import dayjs from "dayjs";
import {
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
genFileId,
} from "element-plus";
import SparkMD5 from "spark-md5";
import { set } from "vue"; // 引入 Vue 的 set 方法
import { useI18n } from "vue-i18n";
import {
add,
deleteData,
edit,
getData,
getTaskLog,
resume,
pinToTopOrUnpin,
} from "@/utils/axios/tqyb/task";
import log from "@/pages/symn/log/index.vue";
import { getHcQxData } from "@/utils/axios/fskjk";
const emit = defineEmits(["playback"]);
const { t } = useI18n();
const upload = ref<UploadInstance>();
const configVisible = ref(false);
const configType = ref('');
const configType = ref("");
/* 新增、编辑表单 */
const configForm = ref<any>({});
@ -42,16 +66,16 @@ interface OptionItem {
}
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 },
{ label: "执行失败", value: -1 },
{ label: "未开始", value: 0 },
{ label: "等待中", value: 1 },
{ label: "运行中", value: 2 },
{ label: "已完成", value: 3 },
{ label: "检查未通过", value: 4 },
]);
function search() {
console.log('搜索条件：', searchForm);
console.log("搜索条件：", searchForm);
getList();
}
function getList() {
@ -60,36 +84,39 @@ function getList() {
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;
});
getData(
{
...searchForm,
startDate,
endDate,
pageSize: pageSize.value,
pageNum: currentPage.value,
},
(res) => {
taskList.value = res.rows;
total.value = res.total;
}
);
}
// 置顶和取消置顶
const pinToTopTask = (row: any) => {
pinToTopOrUnpin({ id: row.id }, (res) => {
if (res.code === 200) {
ElMessage.success('操作成功！');
ElMessage.success("操作成功！");
getList();
}
});
};
function start(task: any) {
console.log('开始运行', task);
console.log("开始运行", task);
resume({ taskId: task.id }, () => {
ElNotification({
title: 'Tips',
message: 'Execution Successful',
type: 'success',
title: "Tips",
message: "Execution Successful",
type: "success",
duration: 1800,
});
getList();
@ -97,60 +124,60 @@ function start(task: any) {
}
function saveConfigForm() {
console.log('保存或新增');
console.log("保存或新增");
if (configForm.value.leadTime % 6 !== 0) {
return ElNotification({
title: 'Tips',
message: '预测时长需为6的倍数',
type: 'error',
title: "Tips",
message: "预测时长需为6的倍数",
type: "error",
duration: 1800,
});
}
if (!configForm.value.taskName) {
return ElNotification({
title: 'Tips',
message: '请填写任务名称',
type: 'error',
title: "Tips",
message: "请填写任务名称",
type: "error",
duration: 1800,
});
}
if (!configForm.value.predictionModel) {
return ElNotification({
title: 'Tips',
message: '请填写预测模型',
type: 'error',
title: "Tips",
message: "请填写预测模型",
type: "error",
duration: 1800,
});
}
if (!configForm.value.startDate) {
return ElNotification({
title: 'Tips',
message: '请选择预测日期',
type: 'error',
title: "Tips",
message: "请选择预测日期",
type: "error",
duration: 1800,
});
}
if (!configForm.value.startTime && configForm.value.startTime !== 0) {
return ElNotification({
title: 'Tips',
message: '请填写预测时间',
type: 'error',
title: "Tips",
message: "请填写预测时间",
type: "error",
duration: 1800,
});
}
if (!configForm.value.leadTime && configForm.value.leadTime !== 0) {
return ElNotification({
title: 'Tips',
message: '请填写预测时长',
type: 'error',
title: "Tips",
message: "请填写预测时长",
type: "error",
duration: 1800,
});
}
if (!configForm.value.dataSources) {
return ElNotification({
title: 'Tips',
message: '请选择数据来源',
type: 'error',
title: "Tips",
message: "请选择数据来源",
type: "error",
duration: 1800,
});
}
@ -161,31 +188,35 @@ function saveConfigForm() {
// target: document.querySelector('.base-layout'),
// });
if (configType.value === 'add') {
if (configType.value === "add") {
const addForm = new FormData();
console.log('???', configForm.value.dataSources, typeof configForm.value.dataSources);
console.log(
"???",
configForm.value.dataSources,
typeof configForm.value.dataSources
);
if (configForm.value.dataSources === 2 && configForm.value.file) {
addForm.append('file', configForm.value.file);
addForm.append("file", configForm.value.file);
}
addForm.append('taskName', configForm.value.taskName);
addForm.append('predictionModel', configForm.value.predictionModel);
addForm.append('startDate', configForm.value.startDate);
addForm.append('startTime', configForm.value.startTime);
addForm.append('leadTime', configForm.value.leadTime);
addForm.append('dataSources', configForm.value.dataSources);
addForm.append("taskName", configForm.value.taskName);
addForm.append("predictionModel", configForm.value.predictionModel);
addForm.append("startDate", configForm.value.startDate);
addForm.append("startTime", configForm.value.startTime);
addForm.append("leadTime", configForm.value.leadTime);
addForm.append("dataSources", configForm.value.dataSources);
add(addForm, () => {
// loading.close();
ElNotification({
title: 'Tips',
message: 'Added successfully',
type: 'success',
title: "Tips",
message: "Added successfully",
type: "success",
duration: 1800,
});
getList();
});
}
if (configType.value === 'edit') {
if (configType.value === "edit") {
// const editValue = configForm.value = {
// id: configForm.value.id,
// taskName: configForm.value.taskName,
@ -198,22 +229,22 @@ function saveConfigForm() {
//
// };
const editForm = new FormData();
editForm.append('id', configForm.value.id);
editForm.append("id", configForm.value.id);
if (configForm.value.dataSources === 2 && configForm.value.file) {
editForm.append('file', configForm.value.file);
editForm.append("file", configForm.value.file);
}
editForm.append('taskName', configForm.value.taskName);
editForm.append('predictionModel', configForm.value.predictionModel);
editForm.append('startDate', configForm.value.startDate);
editForm.append('startTime', configForm.value.startTime);
editForm.append('leadTime', configForm.value.leadTime);
editForm.append('dataSources', configForm.value.dataSources);
editForm.append("taskName", configForm.value.taskName);
editForm.append("predictionModel", configForm.value.predictionModel);
editForm.append("startDate", configForm.value.startDate);
editForm.append("startTime", configForm.value.startTime);
editForm.append("leadTime", configForm.value.leadTime);
editForm.append("dataSources", configForm.value.dataSources);
edit(editForm, () => {
// loading.close();
ElNotification({
title: 'Tips',
message: 'Saved successfully',
type: 'success',
title: "Tips",
message: "Saved successfully",
type: "success",
duration: 1800,
});
getList();
@ -224,38 +255,38 @@ function saveConfigForm() {
}
function addTask() {
console.log('新增任务');
console.log("新增任务");
configForm.value = {};
configVisible.value = true;
configType.value = 'add';
configType.value = "add";
}
function editTask(task: any, $index?: any) {
console.log('编辑任务', task, $index);
const serveType = task.serveId ? (task.serveId.includes('/') ? '服务名' : 'SID') : '';
console.log('serveType', serveType, task.serveId);
console.log("编辑任务", task, $index);
const serveType = task.serveId
? task.serveId.includes("/")
? "服务名"
: "SID"
: "";
console.log("serveType", serveType, task.serveId);
configForm.value = {
...task,
$index,
serveType,
};
console.log('编辑任务', configForm.value);
console.log("编辑任务", configForm.value);
configVisible.value = true;
configType.value = 'edit';
configType.value = "edit";
}
function deleteTask(task: any) {
console.log('删除任务', task);
ElMessageBox.confirm(
t('isSureDelete'),
'Warning',
{
confirmButtonText: t('sure'),
cancelButtonText: t('cancel'),
type: 'warning',
},
)
console.log("删除任务", task);
ElMessageBox.confirm(t("isSureDelete"), "Warning", {
confirmButtonText: t("sure"),
cancelButtonText: t("cancel"),
type: "warning",
})
.then(() => {
let arr = [];
arr.push(task.id);
@ -272,7 +303,7 @@ function deleteTask(task: any) {
}
function refresh() {
console.log('刷新任务列表');
console.log("刷新任务列表");
getList();
}
@ -284,29 +315,23 @@ function showLog(task: any) {
}
function cancle() {
console.log('取消运行', form);
ElMessageBox.confirm(
t('isSureCancelTask'),
'Warning',
{
confirmButtonText: t('sure'),
cancelButtonText: t('cancel'),
type: 'warning',
},
)
console.log("取消运行", form);
ElMessageBox.confirm(t("isSureCancelTask"), "Warning", {
confirmButtonText: t("sure"),
cancelButtonText: t("cancel"),
type: "warning",
})
.then(() => {
form.value = {
...form.value,
taskMode: '未开始',
taskMode: "未开始",
};
ElMessage({
type: 'success',
type: "success",
message: `Cancelled successfully`,
});
})
.catch(() => {
});
.catch(() => {});
}
function handleSelectionChange(selection: any[]) {
@ -319,49 +344,63 @@ function handleSelectionChange(selection: any[]) {
multipleTableRef.value?.clearSelection(); // 清空所有选择
multipleTableRef.value?.toggleRowSelection(latestSelection, true); // 选中最新项
currentSelection.value = [latestSelection];
}
else {
} else {
// 正常选择或取消选择
currentSelection.value = selection;
}
console.log('当前选中项:', currentSelection.value);
console.log("当前选中项:", currentSelection.value);
}
function playback() {
console.log('当前选中项:', currentSelection.value);
console.log("当前选中项:", currentSelection.value);
if (Object.keys(currentSelection.value).length === 0) {
ElMessage({
type: 'warning',
type: "warning",
message: t(`isSelect`),
});
}
else {
const startTime = dayjs(currentSelection.value[0].startDate).add(0, 'hour').format('YYYY-MM-DD HH:mm:ss');
} 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,
endTime: dayjs(startTime)
.add(currentSelection.value[0].leadTime, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
};
emit('playback', params);
EventBusTool.getEventBus().publish('playData', {
key: 'setTaishiParam',
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'),
endTime: dayjs(startTime)
.add(currentSelection.value[0].leadTime, "hour")
.format("YYYY-MM-DD HH:mm:ss"),
});
// 更新湿度、温度、气压的图标状态
EventBusTool.getEventBus().publish("upRightHfOrylIcon");
// 更新第一帧是否需要调用接口的状态
EventBusTool.getEventBus().publish("updateHfKsFlag", false);
getHcQxData(params, (res: any) => {
if (res.code == 200) {
EventBusTool.getEventBus().publish("playData", {
key: "show",
});
emit("playback");
}
});
}
}
function handleClick(): void {
if (fileInput.value) {
fileInput.value.value = '';
fileInput.value.value = "";
fileInput.value.click();
}
}
@ -370,7 +409,7 @@ function handleFileChange(event: Event): void {
const target = event.target as HTMLInputElement;
const file = target.files?.[0];
if (!file) {
console.warn('未选择文件');
console.warn("未选择文件");
return;
}
@ -403,32 +442,68 @@ getList();
<template>
<div class="ycrw">
<Dialog v-model="logVisible" :title="t('operationLog')" width="56vw" class="child-custom" style="top:50%;left:50%;transform: translate(-50%, -50%);">
<Dialog
v-model="logVisible"
:title="t('operationLog')"
width="56vw"
class="child-custom"
style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
>
<log :data="logData" />
</Dialog>
<!-- 增、改 -->
<Dialog v-model="configVisible" :title="configType === 'add' ? t('add') : t('edit')" width="40vw"
style="top:230px;left:30vw" class="config-dialog">
<ElForm label-position="top" label-width="120px" :model="configForm" class="config-custom-form">
<Dialog
v-model="configVisible"
:title="configType === 'add' ? t('add') : t('edit')"
width="40vw"
style="top: 230px; left: 30vw"
class="config-dialog"
>
<ElForm
label-position="top"
label-width="120px"
:model="configForm"
class="config-custom-form"
>
<ElFormItem :label="t('taskName')">
<ElInput v-model="configForm.taskName" :placeholder="t('pleaseEnter')" class="config-custom-input" />
<ElInput
v-model="configForm.taskName"
:placeholder="t('pleaseEnter')"
class="config-custom-input"
/>
</ElFormItem>
<ElFormItem :label="t('predictionModel')">
<ElSelect v-model="configForm.predictionModel" :placeholder="t('pleaseSelect')"
popper-class="custom-select-dropdown" class="config-custom-select">
<ElSelect
v-model="configForm.predictionModel"
:placeholder="t('pleaseSelect')"
popper-class="custom-select-dropdown"
class="config-custom-select"
>
<ElOption label="盘古" :value="1" />
<ElOption label="Graphcast" :value="2" />
</ElSelect>
</ElFormItem>
<ElFormItem :label="t('predictionStartDate')" class="config-custom-date">
<el-date-picker v-model="configForm.startDate" value-format="YYYY-MM-DD" width="100%" type="date"
:placeholder="t('pleaseSelect')" />
<ElFormItem
:label="t('predictionStartDate')"
class="config-custom-date"
>
<el-date-picker
v-model="configForm.startDate"
value-format="YYYY-MM-DD"
width="100%"
type="date"
:placeholder="t('pleaseSelect')"
/>
</ElFormItem>
<ElFormItem :label="t('predictionStartTime')">
<!-- <ElInput v-model="configForm.startTime" :placeholder="t('pleaseEnter')" class="config-custom-input" /> -->
<ElSelect v-model="configForm.startTime" :placeholder="t('pleaseSelect')" popper-class="custom-select-dropdown"
class="config-custom-select">
<ElSelect
v-model="configForm.startTime"
:placeholder="t('pleaseSelect')"
popper-class="custom-select-dropdown"
class="config-custom-select"
>
<ElOption :value="0" />
<ElOption :value="6" />
<ElOption :value="12" />
@ -436,24 +511,44 @@ getList();
</ElSelect>
</ElFormItem>
<ElFormItem :label="t('predictionDuration')">
<ElInput v-model="configForm.leadTime" :placeholder="t('pleaseEnter')" class="config-custom-input" />
<ElInput
v-model="configForm.leadTime"
:placeholder="t('pleaseEnter')"
class="config-custom-input"
/>
</ElFormItem>
<ElFormItem :label="t('dataSource')">
<ElSelect v-model="configForm.dataSources" :placeholder="t('pleaseSelect')"
popper-class="custom-select-dropdown" class="config-custom-select">
<ElSelect
v-model="configForm.dataSources"
:placeholder="t('pleaseSelect')"
popper-class="custom-select-dropdown"
class="config-custom-select"
>
<ElOption label="cds" :value="1" />
<ElOption label="本地文件" :value="2" />
</ElSelect>
</ElFormItem>
<ElFormItem v-if="configForm.dataSources === 2" :label="t('uploadFile')">
<ElFormItem
v-if="configForm.dataSources === 2"
:label="t('uploadFile')"
>
<!-- <el-upload -->
<!-- ref="upload" class="upload-demo" :data="configForm" action="/api/weatherTask/create" -->
<!-- :before-upload="beforeUpload" :limit="1" :auto-upload="false" -->
<!-- > -->
<!-- <template #trigger> -->
<ElInput v-model="configForm.inputFile" :placeholder="t('clickToUploadFile')" class="config-custom-input"
@click="handleClick" />
<input ref="fileInput" type="file" style="display: none" @change="handleFileChange">
<ElInput
v-model="configForm.inputFile"
:placeholder="t('clickToUploadFile')"
class="config-custom-input"
@click="handleClick"
/>
<input
ref="fileInput"
type="file"
style="display: none"
@change="handleFileChange"
/>
<!-- </template> -->
<!-- </el-upload> -->
@ -463,13 +558,13 @@ getList();
<template #footer>
<div class="config-custom-btn">
<el-button v-if="configType === 'add'" @click="saveConfigForm">
{{ t('add') }}
{{ t("add") }}
</el-button>
<el-button v-if="configType === 'edit'" @click="saveConfigForm">
{{ t('save') }}
{{ t("save") }}
</el-button>
<el-button type="warning" @click="configVisible = false">
{{ t('cancel') }}
{{ t("cancel") }}
</el-button>
</div>
</template>
@ -477,45 +572,89 @@ getList();
<!-- 主表 -->
<ElForm :inline="true" :model="searchForm" class="custom-form">
<ElFormItem label="">
<ElInput v-model="searchForm.taskName" :placeholder="`${t('keyword')}...`" class="custom-input" />
<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
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" />
<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
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">
<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:#F5222D;">执行失败</div>
<div v-if="scope.row.taskStatus === 0" style="color:#8C8C8C;">未开始</div>
<div v-if="scope.row.taskStatus === 1" style="color:#FAAD14;">等待中</div>
<div v-if="scope.row.taskStatus === 2" style="color:#1677FF;">运行中</div>
<div v-if="scope.row.taskStatus === 3" style="color:#52C41A;">已完成</div>
<div v-if="scope.row.taskStatus === 4" style="color:#F5222D;">检查未通过</div>
<div v-if="scope.row.taskStatus === -1" style="color: #f5222d">
执行失败
</div>
<div v-if="scope.row.taskStatus === 0" style="color: #8c8c8c">
未开始
</div>
<div v-if="scope.row.taskStatus === 1" style="color: #faad14">
等待中
</div>
<div v-if="scope.row.taskStatus === 2" style="color: #1677ff">
运行中
</div>
<div v-if="scope.row.taskStatus === 3" style="color: #52c41a">
已完成
</div>
<div v-if="scope.row.taskStatus === 4" style="color: #f5222d">
检查未通过
</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' }}
{{ "Graphcast" }}
</div>
</template>
</ElTableColumn>
@ -538,17 +677,13 @@ getList();
<ElTableColumn prop="leadTime" :label="t('predictionDuration')">
<!-- 预测时长 -->
<template #default="scope">
<div>
{{ scope.row.leadTime }}小时
</div>
<div>{{ scope.row.leadTime }}小时</div>
</template>
</ElTableColumn>
<ElTableColumn prop="hours" :label="t('timeConsuming')">
<!-- 耗时 -->
<template #default="scope">
<div>
{{ (scope.row.timeConsuming) }}分钟
</div>
<div>{{ scope.row.timeConsuming }}分钟</div>
</template>
</ElTableColumn>
<!--<ElTableColumn prop="creator" :label="t('creator')">
@ -559,54 +694,98 @@ getList();
<ElTableColumn prop="createTime" :label="t('creationTime')" width="220" />
<ElTableColumn :label="t('operation')" width="280">
<template #default="scope">
<ElButton v-if="scope.row.taskStatus === 1" type="text" class="table-btn" @click="pinToTopTask(scope)">
{{ true ? t('pinToTop') : t('unpin') }}
<ElButton
v-if="scope.row.taskStatus === 1"
type="text"
class="table-btn"
@click="pinToTopTask(scope)"
>
{{ true ? t("pinToTop") : t("unpin") }}
</ElButton>
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
{{ true ? t('pinToTop') : t('unpin') }}
<ElButton v-else type="text" style="color: #588589; cursor: no-drop">
{{ true ? t("pinToTop") : t("unpin") }}
</ElButton>
<!-- -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过-->
<!--任务处于等待中，运行中状态时，不能编辑和删除；处于未开始，已完成，检查未通过时可以删除；处于已完成状态时也不能编辑-->
<ElButton v-if="scope.row.taskStatus === 0 || scope.row.taskStatus === -1" type="text" class="custom-text-btn"
@click="start(scope.row, scope.$index)">
{{ t('start') }}
<ElButton
v-if="scope.row.taskStatus === 0 || scope.row.taskStatus === -1"
type="text"
class="custom-text-btn"
@click="start(scope.row, scope.$index)"
>
{{ t("start") }}
</ElButton>
<ElButton v-else type="text" style="color:#588589;cursor:no-drop">
{{ t('start') }}
<ElButton v-else type="text" style="color: #588589; cursor: no-drop">
{{ t("start") }}
</ElButton>
<ElButton type="text" class="custom-text-btn" @click="showLog(scope.row)">
{{ t('operationLog') }}
<ElButton
type="text"
class="custom-text-btn"
@click="showLog(scope.row)"
>
{{ t("operationLog") }}
</ElButton>
<ElButton v-if="scope.row.taskStatus !== 1 && scope.row.taskStatus !== 2 && scope.row.taskStatus !== 3" type="text" class="custom-text-btn" @click="editTask(scope.row, scope.$index)">
{{ t('edit') }}
<ElButton
v-if="
scope.row.taskStatus !== 1 &&
scope.row.taskStatus !== 2 &&
scope.row.taskStatus !== 3
"
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 v-else type="text" style="color: #588589; cursor: no-drop">
{{ t("edit") }}
</ElButton>
<ElButton v-if="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
v-if="
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 v-else type="text" style="color: #588589; cursor: no-drop">
{{ t("delete") }}
</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]"
size="small" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
<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 class="custom-btn" icon="VideoPlay" @click="playback">
{{ t('playback') }}
{{ t("playback") }}
</el-button>
<el-button class="custom-btn" icon="Plus" @click="addTask">
{{ t('add') }}
{{ t("add") }}
</el-button>
<el-button type="primary" class="custom-btn" icon="Refresh" @click="refresh">
{{ t('refresh') }}
<el-button
type="primary"
class="custom-btn"
icon="Refresh"
@click="refresh"
>
{{ t("refresh") }}
</el-button>
</div>
</div>
@ -661,7 +840,6 @@ getList();
}
.config-custom-date {
.el-date-editor.el-input,
.el-date-editor.el-input__wrapper {
width: calc(20vw - 80px) !important;

91
src/pages/tqybjs/tab-2/index.vue
View File

@ -24,6 +24,8 @@ import {
getPcValueBySjlx,
} from "@/utils/axios/tqyb/data";
import { getHcQxData } from "@/utils/axios/fskjk";
const propsWithDefaults = withDefaults(defineProps<Props>(), {
type: "",
});
@ -215,24 +217,52 @@ function playback() {
type: "warning",
message: t(`selectTqybTableDataType`),
});
return;
}
if (!pickerValue.value.length) {
if (propsWithDefaults.type != "gkqx" && !pickerValue.value.length) {
ElMessage({
type: "warning",
message: t(`selectStartAndEndTime`),
});
return;
}
const startTime = dayjs(pickerValue.value[0]).format("YYYY-MM-DD HH:mm:ss");
const endTime = dayjs(pickerValue.value[1]).format("YYYY-MM-DD HH:mm:ss");
const params = {
dataType: selectValue.value,
weatherType: 3,
startTime,
hour: 0,
timeBatch: timeBatch.value,
};
if (propsWithDefaults.type == "gkqx" && !timeBatch.value) {
ElMessage({
type: "warning",
message: t(`selectTimeBatch`),
});
return;
}
// 更新第一帧是否需要调用接口的状态
EventBusTool.getEventBus().publish("updateHfKsFlag", false);
let startTime = null;
let endTime = null;
if (propsWithDefaults.type == "gkqx") {
startTime = dayjs(timeBatch.value, "YYYYMMDD").format(
"YYYY-MM-DD HH:mm:ss"
);
endTime = dayjs(startTime).add(384, "hour").format("YYYY-MM-DD HH:mm:ss");
} else {
startTime = dayjs(pickerValue.value[0]).format("YYYY-MM-DD HH:mm:ss");
endTime = dayjs(pickerValue.value[1]).format("YYYY-MM-DD HH:mm:ss");
}
let params = {};
if (propsWithDefaults.type == "gkqx") {
params = {
dataType: selectValue.value,
timeBatch: timeBatch.value,
};
} else {
params = {
dataType: selectValue.value,
startTime,
endTime,
};
}
EventBusTool.getEventBus().publish("playData", {
key: "setTaishiParam",
dataType: selectValue.value,
@ -242,9 +272,18 @@ function playback() {
hour: 0,
timeBatch: timeBatch.value,
});
// 设置请求数据标识
weathFlag[gisImgOpt.weatherType] = true;
emit("playback", params);
// 更新湿度、温度、气压的图标状态
EventBusTool.getEventBus().publish("upRightHfOrylIcon");
getHcQxData(params, (res: any) => {
if (res.code == 200) {
EventBusTool.getEventBus().publish("playData", {
key: "show",
});
emit("playback");
}
});
}
function disabledHour() {
@ -348,10 +387,13 @@ function previewTask(row: any) {
key: "setTaishiParam",
dataType: row.dataSource,
weatherType: 3,
startTime: row.dataStartTime,
endTime: row.dataStartTime,
hour: 0,
weatherId: row.id,
timeBatch: row.timeBatch,
});
// 更新湿度、温度、气压的图标状态
EventBusTool.getEventBus().publish("upRightHfOrylIcon");
emit("preview", params);
}
@ -537,7 +579,7 @@ getList();
v-model="selectValue"
:options="selectOption"
placeholder="选择数据源"
style="width: 240px; margin-right: 10px"
style="width: 160px; margin-right: 10px"
/>
<!-- 时间选择 -->
@ -566,6 +608,7 @@ getList();
<ElOption v-for="v in timeBatchList" :label="v" :value="v" />
</ElSelect>
<el-date-picker
v-if="type !== 'gkqx'"
v-model="pickerValue"
unlink-panels
type="datetimerange"
@ -584,20 +627,6 @@ getList();
<el-button class="custom-btn" icon="VideoPlay" @click="playback">
{{ t("playback") }}
</el-button>
<!-- <el-upload v-if="type !== 'sjyc'" ref="upload" class="upload-file" -->
<!-- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1" :on-exceed="handleExceed" -->
<!-- :auto-upload="false"> -->
<!-- <template #trigger> -->
<!--<el-button v-if="propsWithDefaults.type === 'zfx'" type="primary" class="custom-btn" @click="handleClick">-->
<!-- <SvgIcon name="import" width="30" height="20" style="font-weight:bold;margin-right: 1px;" />-->
<!-- {{ t('import') }}-->
<!--</el-button>-->
<!--<el-select-v2 v-if="propsWithDefaults.type === 'zfx'" v-model="fileDatasource" :options="selectOption"-->
<!-- placeholder="选择数据源" style="width: 240px;margin-right: 10px;" />-->
<!--<input ref="fileInput" type="file" style="display: none" @change="handleFileChange">-->
<!-- </template> -->
<!-- </el-upload> -->
</div>
</div>
</template>

18
src/utils/axios/fskjk/index.ts
View File

@ -80,3 +80,21 @@ export async function getRwscGifFileGcrz(
callback?.(response);
}
}
/**
* 缓存数据
*/
export async function getHcQxData(
params: any,
callback?: (data: any) => void,
): Promise<any> {
const response = await request({
url: `${serverIp}${baseURL}/weatherData/cacheWeatherData`,
method: "GET",
params,
});
if (response.success && response.code === 200) {
callback?.(response);
}
}

2
src/utils/axios/tqyb/data/index.ts
View File

@ -161,7 +161,7 @@ export async function playbackSearchData(
url: `${serverIp}${baseURL}/weatherData/getWeatherData`,
method: 'GET',
params, // 包含角色信息的完整表单数据
isLoding,
isLoding
});
if (response.success && response.code === 200) {