输运模拟
This commit is contained in:
parent
c549f4e01e
commit
209f9fe151
|
|
@ -1,10 +1,16 @@
|
||||||
<!-- gis地图右侧侧边栏icon文件 -->
|
<!-- gis地图右侧侧边栏icon文件 -->
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
// 引入单击Icon对应方法集合
|
// 引入单击Icon对应方法集合
|
||||||
import type { LocateParams, MapControlItem } from '@/gis/ol/interface/common';
|
import type { LocateParams, MapControlItem } from "@/gis/ol/interface/common";
|
||||||
import { domFullscreenStatus } from '@/gis/common/domHandle';
|
import { domFullscreenStatus } from "@/gis/common/domHandle";
|
||||||
import { mapRightMenuEvent } from '@/gis/ol/olRightMenu';
|
import { mapRightMenuEvent } from "@/gis/ol/olRightMenu";
|
||||||
import { getGif } from "@/utils/axios/symn";
|
import { getGif } from "@/utils/axios/symn";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
import { getrwssGifFileData, downGifSsFile,getRwscGifFileGcrz } from "@/utils/axios/fskjk";
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
|
||||||
// 是否显示定位页面
|
// 是否显示定位页面
|
||||||
const isShowLocate = ref(false);
|
const isShowLocate = ref(false);
|
||||||
|
|
@ -15,31 +21,33 @@ const locate = ref<LocateParams>({
|
||||||
|
|
||||||
// 是否显示gif
|
// 是否显示gif
|
||||||
const isShowGif = ref(false);
|
const isShowGif = ref(false);
|
||||||
const gifSrc = ref('');
|
|
||||||
const gifParams = ref({ taskId: '', speciesId: '' });
|
const viewLogsDialog = ref(false);
|
||||||
|
const gifSrc = ref("");
|
||||||
|
const gifParams = ref({ taskId: "", speciesId: "" });
|
||||||
|
|
||||||
// 图标基础集合
|
// 图标基础集合
|
||||||
const baseList = ref<MapControlItem[]>([
|
const baseList = ref<MapControlItem[]>([
|
||||||
{
|
{
|
||||||
name: 'fullScreen',
|
name: "fullScreen",
|
||||||
isMargin: true,
|
isMargin: true,
|
||||||
tooltip: '全屏',
|
tooltip: "全屏",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'fullScreen_active',
|
activeName: "fullScreen_active",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'digitalMap',
|
name: "digitalMap",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '数字地图',
|
tooltip: "数字地图",
|
||||||
isActive: false, // 默认选中,和卫星地图是二选一的关系
|
isActive: false, // 默认选中,和卫星地图是二选一的关系
|
||||||
activeName: 'digitalMap_active',
|
activeName: "digitalMap_active",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'satelliteMap',
|
name: "satelliteMap",
|
||||||
isMargin: true,
|
isMargin: true,
|
||||||
tooltip: '卫星地图',
|
tooltip: "卫星地图",
|
||||||
isActive: true,
|
isActive: true,
|
||||||
activeName: 'satelliteMap_active',
|
activeName: "satelliteMap_active",
|
||||||
},
|
},
|
||||||
|
|
||||||
// {
|
// {
|
||||||
|
|
@ -50,18 +58,18 @@ const baseList = ref<MapControlItem[]>([
|
||||||
// activeName: 'mark_active',
|
// activeName: 'mark_active',
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
name: 'distance',
|
name: "distance",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '距离',
|
tooltip: "距离",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'distance_active',
|
activeName: "distance_active",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'area',
|
name: "area",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '面积',
|
tooltip: "面积",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'area_active',
|
activeName: "area_active",
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// name: 'space',
|
// name: 'space',
|
||||||
|
|
@ -71,32 +79,32 @@ const baseList = ref<MapControlItem[]>([
|
||||||
// activeName: 'space_active',
|
// activeName: 'space_active',
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
name: 'deleteDraw',
|
name: "deleteDraw",
|
||||||
isMargin: true,
|
isMargin: true,
|
||||||
tooltip: '删除绘制',
|
tooltip: "删除绘制",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'deleteDraw',
|
activeName: "deleteDraw",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'locate',
|
name: "locate",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '定位',
|
tooltip: "定位",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'locate_active',
|
activeName: "locate_active",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'zoomIn',
|
name: "zoomIn",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '放大',
|
tooltip: "放大",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'zoomIn',
|
activeName: "zoomIn",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'zoomOut',
|
name: "zoomOut",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '缩小',
|
tooltip: "缩小",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'zoomOut',
|
activeName: "zoomOut",
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// name: 'addTarget',
|
// name: 'addTarget',
|
||||||
|
|
@ -117,49 +125,69 @@ const baseList = ref<MapControlItem[]>([
|
||||||
// 源项重建
|
// 源项重建
|
||||||
const yxcjTool = ref<MapControlItem[]>([
|
const yxcjTool = ref<MapControlItem[]>([
|
||||||
{
|
{
|
||||||
name: 'dataExport',
|
name: "dataExport",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '数据导入',
|
tooltip: "数据导入",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'dataExport_active',
|
activeName: "dataExport_active",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'dataStatistics',
|
name: "dataStatistics",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: '数据统计',
|
tooltip: "数据统计",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'dataStatistics_active',
|
activeName: "dataStatistics_active",
|
||||||
},
|
},
|
||||||
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// 输运模拟
|
// 输运模拟
|
||||||
const symnTool = ref<MapControlItem[]>([
|
const symnTool = ref<MapControlItem[]>([
|
||||||
{
|
{
|
||||||
name: 'gif',
|
name: "gif",
|
||||||
isMargin: false,
|
isMargin: false,
|
||||||
tooltip: 'GIF',
|
tooltip: "GIF",
|
||||||
isActive: false,
|
isActive: false,
|
||||||
activeName: 'gif',
|
activeName: "gif",
|
||||||
}
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const gifFormData = reactive({
|
||||||
|
minLon: "",
|
||||||
|
maxLon: "",
|
||||||
|
minLat: "",
|
||||||
|
maxLat: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const downTypeValue = ref("");
|
||||||
|
const downTypeOptions = ref([
|
||||||
|
{
|
||||||
|
value: "global",
|
||||||
|
label: "全球",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "region",
|
||||||
|
label: "区域",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const gifRzGroupValue = ref([]);
|
||||||
|
|
||||||
// 图标集合
|
// 图标集合
|
||||||
const svgList = ref<MapControlItem[]>([...baseList.value]);
|
const svgList = ref<MapControlItem[]>([...baseList.value]);
|
||||||
// 图标点击事件处理
|
// 图标点击事件处理
|
||||||
function handleIconClick(item: MapControlItem) {
|
function handleIconClick(item: MapControlItem) {
|
||||||
if (item.name === 'locate') {
|
if (item.name === "locate") {
|
||||||
item.isActive = !item.isActive;
|
item.isActive = !item.isActive;
|
||||||
isShowLocate.value = item.isActive;
|
isShowLocate.value = item.isActive;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// 定义四选一的功能组
|
// 定义四选一的功能组
|
||||||
const exclusiveGroup = ['mark', 'distance', 'area', 'space', 'deleteDraw'];
|
const exclusiveGroup = ["mark", "distance", "area", "space", "deleteDraw"];
|
||||||
// 检查当前点击的是否属于四选一功能组
|
// 检查当前点击的是否属于四选一功能组
|
||||||
const isInExclusiveGroup = exclusiveGroup.includes(item.name);
|
const isInExclusiveGroup = exclusiveGroup.includes(item.name);
|
||||||
|
|
||||||
// 如果点击的是已激活的地图类型,不做操作
|
// 如果点击的是已激活的地图类型,不做操作
|
||||||
if (item.isActive && ['digitalMap', 'satelliteMap'].includes(item.name)) {
|
if (item.isActive && ["digitalMap", "satelliteMap"].includes(item.name)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -172,15 +200,15 @@ function handleIconClick(item: MapControlItem) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 切换当前功能的激活状态
|
// 切换当前功能的激活状态
|
||||||
if (item.name !== 'deleteDraw') {
|
if (item.name !== "deleteDraw") {
|
||||||
item.isActive = !item.isActive;
|
item.isActive = !item.isActive;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 处理地图类型(二选一)
|
// 处理地图类型(二选一)
|
||||||
else if (['digitalMap', 'satelliteMap'].includes(item.name)) {
|
else if (["digitalMap", "satelliteMap"].includes(item.name)) {
|
||||||
// 先将两个地图类型都设为未激活
|
// 先将两个地图类型都设为未激活
|
||||||
svgList.value.forEach((icon) => {
|
svgList.value.forEach((icon) => {
|
||||||
if (['digitalMap', 'satelliteMap'].includes(icon.name)) {
|
if (["digitalMap", "satelliteMap"].includes(icon.name)) {
|
||||||
icon.isActive = false;
|
icon.isActive = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -188,41 +216,49 @@ function handleIconClick(item: MapControlItem) {
|
||||||
item.isActive = true;
|
item.isActive = true;
|
||||||
}
|
}
|
||||||
// 处理源项重建的功能按钮
|
// 处理源项重建的功能按钮
|
||||||
else if (['dataExport', 'dataStatistics'].includes(item.name)) {
|
else if (["dataExport", "dataStatistics"].includes(item.name)) {
|
||||||
// 切换UI样式
|
// 切换UI样式
|
||||||
// eslint-disable-next-line prefer-const
|
// eslint-disable-next-line prefer-const
|
||||||
let falg: any = !item.isActive;
|
let falg: any = !item.isActive;
|
||||||
switchIconActive(item.name, falg);
|
switchIconActive(item.name, falg);
|
||||||
// 显示功能界面
|
// 显示功能界面
|
||||||
EventBusTool.getEventBus().publish('yxcjGisUiEvent', {
|
EventBusTool.getEventBus().publish("yxcjGisUiEvent", {
|
||||||
key: item.name,
|
key: item.name,
|
||||||
falg,
|
falg,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理gif
|
// 处理gif
|
||||||
else if (item.name === 'gif') {
|
else if (item.name === "gif") {
|
||||||
getGif(gifParams.value,(res: any) => {
|
let taskId = JSON.parse(sessionStorage.getItem("ssmnDataItem")).id;
|
||||||
gifSrc.value = window.FSXConfig.VUE_APP_SERVER_IP + res;
|
getGif(
|
||||||
isShowGif.value = true;
|
{
|
||||||
});
|
taskId,
|
||||||
|
genGifType: "global",
|
||||||
|
},
|
||||||
|
(res: any) => {
|
||||||
|
gifSrc.value = window.FSXConfig.VUE_APP_SERVER_IP + res;
|
||||||
|
isShowGif.value = true;
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
// 处理其他功能(全屏、定位等)
|
// 处理其他功能(全屏、定位等)
|
||||||
else {
|
else {
|
||||||
// 缩放按钮不激活状态切换
|
// 缩放按钮不激活状态切换
|
||||||
if (!['zoomIn', 'zoomOut'].includes(item.name)) {
|
if (!["zoomIn", "zoomOut"].includes(item.name)) {
|
||||||
item.isActive = !item.isActive;
|
item.isActive = !item.isActive;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 调用对应的地图操作方法 使用断言
|
// 调用对应的地图操作方法 使用断言
|
||||||
(mapRightMenuEvent[item.name] as any) && (mapRightMenuEvent[item.name] as any)();
|
(mapRightMenuEvent[item.name] as any) &&
|
||||||
|
(mapRightMenuEvent[item.name] as any)();
|
||||||
}
|
}
|
||||||
|
|
||||||
// dialog关闭事件
|
// dialog关闭事件
|
||||||
function dialogClose() {
|
function dialogClose() {
|
||||||
isShowLocate.value = false;
|
isShowLocate.value = false;
|
||||||
const locate = svgList.value.find((item) => {
|
const locate = svgList.value.find((item) => {
|
||||||
return item.name === 'locate';
|
return item.name === "locate";
|
||||||
});
|
});
|
||||||
|
|
||||||
// 修复方式1: 使用if判断确保locate存在
|
// 修复方式1: 使用if判断确保locate存在
|
||||||
|
|
@ -248,52 +284,113 @@ function switchIconActive(key: string, falg: boolean) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 查询任务所属GIF文件地址
|
||||||
|
const generateGif = () => {
|
||||||
|
let taskId = JSON.parse(sessionStorage.getItem("ssmnDataItem")).id;
|
||||||
|
getrwssGifFileData(
|
||||||
|
{
|
||||||
|
taskId,
|
||||||
|
lonmin: gifFormData.minLon,
|
||||||
|
latmin: gifFormData.minLat,
|
||||||
|
lonmax: gifFormData.maxLon,
|
||||||
|
latmax: gifFormData.maxLat,
|
||||||
|
speciesId: "",
|
||||||
|
},
|
||||||
|
(res: any) => {
|
||||||
|
console.log(res, "2222222222222");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载任务所属GIF文件
|
||||||
|
const downGifFile = () => {
|
||||||
|
let taskId = JSON.parse(sessionStorage.getItem("ssmnDataItem")).id;
|
||||||
|
downGifSsFile(
|
||||||
|
{
|
||||||
|
taskId,
|
||||||
|
speciesId: "",
|
||||||
|
genGifType: downTypeValue.value,
|
||||||
|
},
|
||||||
|
(res: Blob) => {
|
||||||
|
console.log(res, "2222222222222");
|
||||||
|
// res 直接是Blob,没有headers,直接写死文件名
|
||||||
|
const fileName = "JPX38_region.gif";
|
||||||
|
const url = URL.createObjectURL(res);
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = url;
|
||||||
|
a.download = fileName;
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
document.body.removeChild(a);
|
||||||
|
ElMessage.success("文件下载成功");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查看日志
|
||||||
|
const viewLogs = ()=>{
|
||||||
|
viewLogsDialog.value = true;
|
||||||
|
|
||||||
|
let taskId = JSON.parse(sessionStorage.getItem("ssmnDataItem")).id;
|
||||||
|
getRwscGifFileGcrz(
|
||||||
|
{
|
||||||
|
taskId,
|
||||||
|
speciesId: "",
|
||||||
|
},
|
||||||
|
(res: any) => {
|
||||||
|
console.log(res,222222222);
|
||||||
|
gifRzGroupValue.value = res.result;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 判断当前是否处于全屏状态
|
// 判断当前是否处于全屏状态
|
||||||
svgList.value[0].isActive = domFullscreenStatus();
|
svgList.value[0].isActive = domFullscreenStatus();
|
||||||
// 注册右边菜单UI回调事件
|
// 注册右边菜单UI回调事件
|
||||||
EventBusTool.getEventBus().subscribe('mapRightMenuUIEvent', (res: any) => {
|
EventBusTool.getEventBus().subscribe("mapRightMenuUIEvent", (res: any) => {
|
||||||
// 如果进入全屏,全屏icon没有高亮的话,需要高亮
|
// 如果进入全屏,全屏icon没有高亮的话,需要高亮
|
||||||
if (res.key === 'enterFullscreen' && !svgList.value[0].isActive) {
|
if (res.key === "enterFullscreen" && !svgList.value[0].isActive) {
|
||||||
svgList.value[0].isActive = true;
|
svgList.value[0].isActive = true;
|
||||||
}
|
}
|
||||||
// 如果退出全屏,全屏icon是高亮的话,需要取消高亮
|
// 如果退出全屏,全屏icon是高亮的话,需要取消高亮
|
||||||
else if (res.key === 'exitFullscreen' && svgList.value[0].isActive) {
|
else if (res.key === "exitFullscreen" && svgList.value[0].isActive) {
|
||||||
svgList.value[0].isActive = false;
|
svgList.value[0].isActive = false;
|
||||||
}
|
}
|
||||||
// 如果退出全屏,全屏icon是高亮的话,需要取消高亮
|
// 如果退出全屏,全屏icon是高亮的话,需要取消高亮
|
||||||
else if (res.key === 'f11KeyPressed') {
|
else if (res.key === "f11KeyPressed") {
|
||||||
if (!svgList.value[0].isActive) {
|
if (!svgList.value[0].isActive) {
|
||||||
svgList.value[0].isActive = true;
|
svgList.value[0].isActive = true;
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
svgList.value[0].isActive = false;
|
svgList.value[0].isActive = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 如果退出全屏,全屏icon是高亮的话,需要取消高亮
|
// 如果退出全屏,全屏icon是高亮的话,需要取消高亮
|
||||||
else if (res.key === 'switchLocalLayer') {
|
else if (res.key === "switchLocalLayer") {
|
||||||
svgList.value[1].isActive = false;
|
svgList.value[1].isActive = false;
|
||||||
svgList.value[2].isActive = true;
|
svgList.value[2].isActive = true;
|
||||||
}
|
}
|
||||||
// 根据菜单,进行工具栏选项的变动
|
// 根据菜单,进行工具栏选项的变动
|
||||||
if (res.key === 'baseList') {
|
if (res.key === "baseList") {
|
||||||
svgList.value = [...baseList.value];
|
svgList.value = [...baseList.value];
|
||||||
} else if (res.key === 'allList') {
|
} else if (res.key === "allList") {
|
||||||
svgList.value = [...baseList.value, ...yxcjTool.value];
|
svgList.value = [...baseList.value, ...yxcjTool.value];
|
||||||
} else if (res.key === 'gifIcon') {
|
} else if (res.key === "gifIcon") {
|
||||||
svgList.value = [...baseList.value, ...symnTool.value];
|
svgList.value = [...baseList.value, ...symnTool.value];
|
||||||
}
|
}
|
||||||
// 按钮菜单触发状态
|
// 按钮菜单触发状态
|
||||||
if (res.key === 'dataExport') { // 数据导出
|
if (res.key === "dataExport") {
|
||||||
|
// 数据导出
|
||||||
switchIconActive(res.key, res.falg);
|
switchIconActive(res.key, res.falg);
|
||||||
}
|
}
|
||||||
if (res.key === 'dataStatistics') { // 数据统计
|
if (res.key === "dataStatistics") {
|
||||||
|
// 数据统计
|
||||||
switchIconActive(res.key, res.falg);
|
switchIconActive(res.key, res.falg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
EventBusTool.getEventBus().subscribe('speciesChange', (res: any) => {
|
EventBusTool.getEventBus().subscribe("speciesChange", (res: any) => {
|
||||||
if (res.key === 'speciesId') {
|
if (res.key === "speciesId") {
|
||||||
gifParams.value = res.data;
|
gifParams.value = res.data;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -303,40 +400,143 @@ onMounted(() => {
|
||||||
<template>
|
<template>
|
||||||
<div class="icon_container">
|
<div class="icon_container">
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in svgList" :key="index" class="icon"
|
v-for="(item, index) in svgList"
|
||||||
:class="{ 'has-margin': item.isMargin, 'has-active': item.isActive }" @click.stop="handleIconClick(item)"
|
:key="index"
|
||||||
|
class="icon"
|
||||||
|
:class="{ 'has-margin': item.isMargin, 'has-active': item.isActive }"
|
||||||
|
@click.stop="handleIconClick(item)"
|
||||||
>
|
>
|
||||||
<el-tooltip class="box-item" effect="dark" :content="item.tooltip" placement="left">
|
<el-tooltip
|
||||||
<SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
:content="item.tooltip"
|
||||||
|
placement="left"
|
||||||
|
>
|
||||||
|
<SvgIcon
|
||||||
|
:name="item.isActive ? item.activeName : item.name"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Dialog v-model="isShowLocate" title="地图定位" width="400" class="config-dialog" @close="dialogClose">
|
<Dialog
|
||||||
<el-row style="display: flex;justify-content: space-between;">
|
v-model="isShowLocate"
|
||||||
|
title="地图定位"
|
||||||
|
width="400"
|
||||||
|
class="config-dialog"
|
||||||
|
@close="dialogClose"
|
||||||
|
>
|
||||||
|
<el-row style="display: flex; justify-content: space-between">
|
||||||
<el-col :span="9">
|
<el-col :span="9">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="locate.lon" style="width: auto;" placeholder="请输入经度" :min="-180" :max="180"
|
v-model="locate.lon"
|
||||||
|
style="width: auto"
|
||||||
|
placeholder="请输入经度"
|
||||||
|
:min="-180"
|
||||||
|
:max="180"
|
||||||
controls-position="right"
|
controls-position="right"
|
||||||
/>
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="9">
|
<el-col :span="9">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="locate.lat" style="width: auto;" placeholder="请输入纬度" :min="-90" :max="90"
|
v-model="locate.lat"
|
||||||
|
style="width: auto"
|
||||||
|
placeholder="请输入纬度"
|
||||||
|
:min="-90"
|
||||||
|
:max="90"
|
||||||
controls-position="right"
|
controls-position="right"
|
||||||
/>
|
/>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<el-button type="primary" @click="locateHandle">
|
<el-button type="primary" @click="locateHandle"> 定位 </el-button>
|
||||||
定位
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
<Dialog v-model="isShowGif" title="GIF" width="1340" class="config-dialog" style="min-height: 120px" @close="isShowGif=false">
|
<Dialog
|
||||||
<img v-if="isShowGif" :src="gifSrc" alt="GIF" style="width: 100%">
|
v-model="isShowGif"
|
||||||
<a v-if="gifSrc" :href="gifSrc" download="gif" class="download-icon">
|
title="GIF"
|
||||||
|
width="1340"
|
||||||
|
class="config-dialog"
|
||||||
|
style="min-height: 120px"
|
||||||
|
@close="isShowGif = false"
|
||||||
|
>
|
||||||
|
<el-form :model="form" label-width="auto" style="max-width: 100%">
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-form-item :label="t('lonmin')">
|
||||||
|
<el-input v-model="gifFormData.minLon" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-form-item :label="t('lonmax')">
|
||||||
|
<el-input v-model="gifFormData.maxLon" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-form-item :label="t('latmin')">
|
||||||
|
<el-input v-model="gifFormData.minLat" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="5">
|
||||||
|
<el-form-item :label="t('latmax')">
|
||||||
|
<el-input v-model="gifFormData.maxLat" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2"
|
||||||
|
>
|
||||||
|
<el-button @click="generateGif" type="primary" class="custom-btn" >生成GIF</el-button></el-col
|
||||||
|
>
|
||||||
|
<el-col :span="2"><el-button @click="viewLogs" type="primary" class="custom-btn" >查看日志</el-button></el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<img
|
||||||
|
v-if="isShowGif"
|
||||||
|
:src="gifSrc"
|
||||||
|
alt="GIF"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-row
|
||||||
|
:gutter="12"
|
||||||
|
style="margin-top: 10px; display: flex; justify-content: flex-end"
|
||||||
|
>
|
||||||
|
<el-col :span="16"></el-col>
|
||||||
|
<el-col :span="4" style="display: flex; align-items: center">
|
||||||
|
<span style="width: 35px; margin-right: 5px; color: #ade6ee">类型</span>
|
||||||
|
<el-select
|
||||||
|
v-model="downTypeValue"
|
||||||
|
:options="downTypeOptions"
|
||||||
|
:props="props"
|
||||||
|
placeholder="选择类型"
|
||||||
|
/>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="2">
|
||||||
|
<el-button :disabled="!downTypeValue" @click="downGifFile"
|
||||||
|
type="primary" class="custom-btn" >下载</el-button
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<!-- <a v-if="gifSrc" :href="gifSrc" download="gif" class="download-icon">
|
||||||
<el-icon size="20"><Download /></el-icon>
|
<el-icon size="20"><Download /></el-icon>
|
||||||
</a>
|
</a> -->
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
v-model="viewLogsDialog"
|
||||||
|
title="GIF日志"
|
||||||
|
width="1340"
|
||||||
|
class="config-dialog"
|
||||||
|
style="min-height: 120px"
|
||||||
|
@close="viewLogsDialog = false"
|
||||||
|
>
|
||||||
|
<div class="gif-rztext">
|
||||||
|
<li v-for="(item,index) in gifRzGroupValue" :key="index">{{item.createTime}} {{item.logContent}}</li>
|
||||||
|
<li v-for="(item,index) in gifRzGroupValue" :key="index">{{item.createTime}} {{item.logContent}}</li>
|
||||||
|
<li v-for="(item,index) in gifRzGroupValue" :key="index">{{item.createTime}} {{item.logContent}}</li>
|
||||||
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -398,14 +598,29 @@ onMounted(() => {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: rgba(0,0,0,0.2);
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: black;
|
color: black;
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(0,0,0,0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
background-color: rgba(0,0,0,0.4);
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gif-rztext{
|
||||||
|
max-height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.custom-btn {
|
||||||
|
background-color: #1397a3;
|
||||||
|
border-color: #1397a3;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #185c5c;
|
||||||
|
border-color: #4ac1c1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -378,7 +378,7 @@ onMounted(() => {
|
||||||
<SvgIcon name="stop" title="停止" width="34" height="34" />
|
<SvgIcon name="stop" title="停止" width="34" height="34" />
|
||||||
</div>
|
</div>
|
||||||
<div class="slider">
|
<div class="slider">
|
||||||
<div style="color: white">value:{{ value }} ----- totalHours:{{ totalHours }}</div>
|
<!-- <div style="color: white">value:{{ value }} ----- totalHours:{{ totalHours }}</div> -->
|
||||||
<el-slider v-model="value" :disabled="isDisabledSlider"
|
<el-slider v-model="value" :disabled="isDisabledSlider"
|
||||||
:style="{ width: isShowTabs ? (props.sliderWidth ?? '58vw') : '62vw' }" :max="totalHours"
|
:style="{ width: isShowTabs ? (props.sliderWidth ?? '58vw') : '62vw' }" :max="totalHours"
|
||||||
:format-tooltip="slodtooltip" :marks="marks" @input="handleChange" />
|
:format-tooltip="slodtooltip" :marks="marks" @input="handleChange" />
|
||||||
|
|
|
||||||
|
|
@ -276,6 +276,7 @@ const pinToTopTask = (row: any, isPin: boolean) => {
|
||||||
};
|
};
|
||||||
function viewTask(task: any) {
|
function viewTask(task: any) {
|
||||||
console.log('查看任务:', task);
|
console.log('查看任务:', task);
|
||||||
|
sessionStorage.setItem("ssmnDataItem",JSON.stringify(task))
|
||||||
handleClose();
|
handleClose();
|
||||||
form.value = {
|
form.value = {
|
||||||
...task,
|
...task,
|
||||||
|
|
|
||||||
|
|
@ -87,7 +87,6 @@ const pickerValue = ref([]);
|
||||||
|
|
||||||
const hfSelectSjy = ref<any>(null);
|
const hfSelectSjy = ref<any>(null);
|
||||||
|
|
||||||
|
|
||||||
getTimeBatchList();
|
getTimeBatchList();
|
||||||
function getTimeBatchList() {
|
function getTimeBatchList() {
|
||||||
getTimeBatch({}, (res) => {
|
getTimeBatch({}, (res) => {
|
||||||
|
|
@ -142,7 +141,7 @@ function getList() {
|
||||||
label: "GFS",
|
label: "GFS",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
selectValue.value = "6";
|
// selectValue.value = "6";
|
||||||
}
|
}
|
||||||
dataSource.value = dataS;
|
dataSource.value = dataS;
|
||||||
getData(
|
getData(
|
||||||
|
|
@ -153,7 +152,7 @@ function getList() {
|
||||||
dataSource: searchSelectValue.value || dataS,
|
dataSource: searchSelectValue.value || dataS,
|
||||||
pageSize: pageSize.value,
|
pageSize: pageSize.value,
|
||||||
pageNum: currentPage.value,
|
pageNum: currentPage.value,
|
||||||
batchTime:searchPcSelectValue.value,
|
batchTime: searchPcSelectValue.value,
|
||||||
},
|
},
|
||||||
(res) => {
|
(res) => {
|
||||||
taskList.value = res.rows;
|
taskList.value = res.rows;
|
||||||
|
|
@ -358,6 +357,8 @@ function previewTask(row: any) {
|
||||||
|
|
||||||
const changeSjyValue = (val) => {
|
const changeSjyValue = (val) => {
|
||||||
pcSelectOption.value = [];
|
pcSelectOption.value = [];
|
||||||
|
searchPcSelectValue.value = "";
|
||||||
|
|
||||||
// 业务逻辑
|
// 业务逻辑
|
||||||
if (val) {
|
if (val) {
|
||||||
// 请求接口、赋值、表单联动等
|
// 请求接口、赋值、表单联动等
|
||||||
|
|
@ -379,6 +380,7 @@ const changeSjyValue = (val) => {
|
||||||
|
|
||||||
const changeSjyValue1 = (val) => {
|
const changeSjyValue1 = (val) => {
|
||||||
timeBatchList.value = [];
|
timeBatchList.value = [];
|
||||||
|
timeBatch.value = "";
|
||||||
// 业务逻辑
|
// 业务逻辑
|
||||||
if (val) {
|
if (val) {
|
||||||
// 请求接口、赋值、表单联动等
|
// 请求接口、赋值、表单联动等
|
||||||
|
|
@ -405,7 +407,16 @@ getList();
|
||||||
class="custom-input"
|
class="custom-input"
|
||||||
/>
|
/>
|
||||||
</ElFormItem>
|
</ElFormItem>
|
||||||
<ElFormItem :label="t('tqybTableDataType')">
|
<ElFormItem :label="t('tqybTableDataType')" v-if="type != 'gkqx'">
|
||||||
|
<el-select-v2
|
||||||
|
v-model="searchSelectValue"
|
||||||
|
clearable
|
||||||
|
:options="selectOption"
|
||||||
|
placeholder="选择数据源"
|
||||||
|
style="width: 240px; margin-right: 10px"
|
||||||
|
/>
|
||||||
|
</ElFormItem>
|
||||||
|
<ElFormItem :label="t('tqybTableDataType')" v-if="type === 'gkqx'">
|
||||||
<el-select-v2
|
<el-select-v2
|
||||||
v-model="searchSelectValue"
|
v-model="searchSelectValue"
|
||||||
clearable
|
clearable
|
||||||
|
|
@ -533,7 +544,7 @@ getList();
|
||||||
<div style="display: flex; margin-right: 10px" class="bottomBox">
|
<div style="display: flex; margin-right: 10px" class="bottomBox">
|
||||||
<ElSelect
|
<ElSelect
|
||||||
v-if="type === 'gkqx'"
|
v-if="type === 'gkqx'"
|
||||||
v-model="hfSelectSjy"
|
v-model="selectValue"
|
||||||
placeholder="选择数据源"
|
placeholder="选择数据源"
|
||||||
filterable
|
filterable
|
||||||
style="width: 160px; margin-right: 10px"
|
style="width: 160px; margin-right: 10px"
|
||||||
|
|
|
||||||
62
src/utils/axios/fskjk/index.ts
Normal file
62
src/utils/axios/fskjk/index.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { baseURL, serverIp } from "@/gis/common/config";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import request from "@/utils/request"; // 复用已有的Axios请求实例
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成任务所属GIF文件
|
||||||
|
*/
|
||||||
|
export async function getrwssGifFileData(
|
||||||
|
params: any,
|
||||||
|
callback?: (data: any) => void,
|
||||||
|
): Promise<any> {
|
||||||
|
const response = await request({
|
||||||
|
url: `${serverIp}${baseURL}/transportResult/genGif`,
|
||||||
|
method: "POST",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.success && response.code === 200) {
|
||||||
|
ElMessage({
|
||||||
|
type: "success",
|
||||||
|
message: response.message,
|
||||||
|
});
|
||||||
|
callback?.(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下载任务所属GIF文件
|
||||||
|
*/
|
||||||
|
export async function downGifSsFile(
|
||||||
|
params: any,
|
||||||
|
callback?: (data: any) => void,
|
||||||
|
): Promise<any> {
|
||||||
|
const response = await request({
|
||||||
|
url: `${serverIp}${baseURL}/transportResult/downloadGif`,
|
||||||
|
method: "GET",
|
||||||
|
params,
|
||||||
|
responseType: "blob",
|
||||||
|
});
|
||||||
|
console.log(response, "22222222222222");
|
||||||
|
|
||||||
|
// HTTP 200 = 文件流正常返回,直接执行下载回调
|
||||||
|
callback?.(response);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取任务生成GIF文件过程日志
|
||||||
|
*/
|
||||||
|
export async function getRwscGifFileGcrz(
|
||||||
|
params: any,
|
||||||
|
callback?: (data: any) => void,
|
||||||
|
): Promise<any> {
|
||||||
|
const response = await request({
|
||||||
|
url: `${serverIp}${baseURL}/transportResult/getGenGiflog`,
|
||||||
|
method: "GET",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.success && response.code === 200) {
|
||||||
|
callback?.(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user