You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
463 lines
16 KiB
Vue
463 lines
16 KiB
Vue
1 month ago
|
<template>
|
||
|
|
<el-container class="container">
|
||
|
|
<el-aside class="leftSide">
|
||
|
|
<div class="img-file-data">
|
||
|
|
<div class="img-file-title">地质图件</div>
|
||
|
|
<div class="button-container">
|
||
|
|
<el-dropdown @command="uploadData">
|
||
|
|
<el-button type="primary" :icon="Upload" size="small">导入
|
||
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
||
|
|
</el-button>
|
||
|
|
<template v-slot:dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item command="geology">导入地质图件</el-dropdown-item>
|
||
|
|
<el-dropdown-item command="geologyParam">导入地质参数图件</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown>
|
||
|
|
|
||
|
|
<el-button type="primary" :icon="Select" size="small"
|
||
|
|
@click="chooseDataVisible = true">选择图件</el-button>
|
||
|
|
<!-- <el-dropdown @command="handleCalc">
|
||
|
|
<el-button type="primary" :icon="SetUp" size="small" :disabled="calcBtnDisabled">计算
|
||
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
||
|
|
</el-button>
|
||
|
|
<template v-slot:dropdown>
|
||
|
|
<el-dropdown-menu>
|
||
|
|
<el-dropdown-item command="calc">设置计算参数</el-dropdown-item>
|
||
|
|
<el-dropdown-item command="setbaseimg">设置底图</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</template>
|
||
|
|
</el-dropdown> -->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<el-table ref="imgFileRef" :data="imgFileData" @selection-change="handleSelectionChange"
|
||
|
|
style="width: 100%;margin: 0;padding: 0;overflow-y: auto;overflow-x: hidden;" row-key="MapID"
|
||
|
|
@row-click="handleRowClick" stripe>
|
||
|
|
<el-table-column type="selection" width="35"></el-table-column>
|
||
|
|
<el-table-column label="图件名称" prop="MapName" width="*" show-overflow-tooltip>
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-link @click="handleOpenFile(row)">
|
||
|
|
{{ row.MapName }}
|
||
|
|
</el-link>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="85">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tooltip content="计算" placement="top">
|
||
|
|
<el-button :icon="DocumentAdd" circle type="primary" style="cursor: pointer;"
|
||
|
|
size="small" @click="setParamsVisible = true" />
|
||
|
|
</el-tooltip>
|
||
|
|
<el-tooltip content="移除" placement="top">
|
||
|
|
<el-button :icon="Delete" type="danger" circle size="small" style="cursor: pointer;"
|
||
|
|
@click="handleDelete(scope.row)" />
|
||
|
|
</el-tooltip>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div class="img-file-data">
|
||
|
|
<div class="img-file-title">绘制成果</div>
|
||
|
|
<div class="button-container">
|
||
|
|
<el-button type="danger" size="small" :icon="Delete" @click="handleDeleteResults">删除</el-button>
|
||
|
|
</div>
|
||
|
|
<el-table ref="drawResultRef" :data="drawResultData" @selection-change="handleDrawResultSelectionChange"
|
||
|
|
style="width: 100%;margin: 0;padding: 0;overflow-y: auto;overflow-x: hidden;" row-key="MapID"
|
||
|
|
@row-click="handleDrawResultRowClick">
|
||
|
|
<el-table-column type="selection" width="40"></el-table-column>
|
||
|
|
<el-table-column label="图件名称" prop="MapName" width="*" show-overflow-tooltip>
|
||
|
|
<template #default="{ row }">
|
||
|
|
<el-link @click="handleOpenResultFile(row)">{{ row.MapName }}</el-link>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" width="85">
|
||
|
|
<template #default="scope">
|
||
|
|
<el-tooltip content="设置底图" placement="top">
|
||
|
|
<el-button :icon="SetUp" type="primary" circle size="small" style="cursor: pointer;"
|
||
|
|
@click="handleSetBaseImg(scope.row)" />
|
||
|
|
</el-tooltip>
|
||
|
|
<el-popconfirm title="确认删除吗？" confirm-button-text="确认删除" cancel-button-text="取消"
|
||
|
|
:popper-style="{ width: '200px' }" @confirm="handleDeleteResult(scope.row)">
|
||
|
|
<template #reference>
|
||
|
|
<el-button :icon="Delete" size="small" circle type="danger"
|
||
|
|
style="cursor: pointer;" />
|
||
|
|
</template>
|
||
|
|
</el-popconfirm>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-aside>
|
||
|
|
<el-main class="main">
|
||
|
|
<WellRecommend :tokenKey="currentTokenKey" :showRight="false" />
|
||
|
|
</el-main>
|
||
|
|
|
||
|
|
<ImportDataDialog :data-id="dataId" :is-visible="importDialogVisible" @update:changeShowDialog="handleShowIDD"
|
||
|
|
v-model="importDialogVisible" />
|
||
|
|
<BaseDataTable :is-visible="chooseDataVisible" v-model="chooseDataVisible"
|
||
|
|
@update:changeShowDialog="handleShowBDT" @updateSelected="handleSelectedFile" />
|
||
|
|
<FavorableAreaCalcParam :is-visible="setParamsVisible" v-model="setParamsVisible"
|
||
|
|
@update:changeShowDialog="handleShowFACP" @setParams="handleSetParams" />
|
||
|
|
<LoadingDialog v-model="loading" ref="loadingRef" :timeout="20000" :message="loadingMsg" @timeout="onTimeout" />
|
||
|
|
</el-container>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
definePageMeta({
|
||
|
|
requiresAuth: true
|
||
|
|
});
|
||
|
|
|
||
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||
|
|
import { Delete, Select, Upload, SetUp, DocumentAdd } from "@element-plus/icons-vue";
|
||
|
|
import { getResults, calcFavorableArea, deleteByMapIds, deleteByRelateId, mergeFavorableArea } from '~/services/favorableAreaResultService';
|
||
|
|
import { emitter } from "~/utils/eventBus";
|
||
|
|
const { $toastMessage } = useNuxtApp();
|
||
|
|
import { generateGUID } from "~/utils/common";
|
||
|
|
import { STORAGE_KEYS } from "~/utils/storageKeys"
|
||
|
|
import { ElMessageBox } from 'element-plus';
|
||
|
|
import { COMMAND, EMIT_COMMAND } from '~/utils/commandTypes'
|
||
|
|
import { useWebSocket } from '@/composables/useWebSocket'
|
||
|
|
const config = useRuntimeConfig();
|
||
|
|
const { messages, onMessage, status, send } = useWebSocket();
|
||
|
|
// 当前页图件token的 key
|
||
|
|
const currentTokenKey = STORAGE_KEYS.FAVORABLE_AREA_TOKEN;
|
||
|
|
|
||
|
|
// 图件表格引用
|
||
|
|
const imgFileRef = ref(null);
|
||
|
|
// 图件表格数据
|
||
|
|
const imgFileData = ref([]);
|
||
|
|
// 导入数据时的数据类型
|
||
|
|
// 9: 地质图件
|
||
|
|
// 11: 地质参数图件
|
||
|
|
const dataId = ref(0);
|
||
|
|
// 导入图件弹出框显隐属性
|
||
|
|
const importDialogVisible = ref(false);
|
||
|
|
// 选择图件对话框显隐属性
|
||
|
|
const chooseDataVisible = ref(false);
|
||
|
|
// 设置值域对话框显隐属性
|
||
|
|
const setParamsVisible = ref(false);
|
||
|
|
|
||
|
|
// 进度条对象
|
||
|
|
const loadingRef = ref(null);
|
||
|
|
// 进度条显示
|
||
|
|
const loading = ref(false);
|
||
|
|
const loadingMsg = ref('正在计算有利区……');
|
||
|
|
|
||
|
|
|
||
|
|
// 当前选中的地质图件数组
|
||
|
|
const selectedImageFile = ref([]);
|
||
|
|
|
||
|
|
const drawResultRef = ref(null);
|
||
|
|
const drawResultData = ref([]);
|
||
|
|
const selectedResultRows = ref([]);
|
||
|
|
|
||
|
|
const dataDir = config.public.dataDir;
|
||
|
|
|
||
|
|
// 选择导入图件类型
|
||
|
|
const uploadData = (val) => {
|
||
|
|
switch (val) {
|
||
|
|
case "geology":
|
||
|
|
dataId.value = 9;
|
||
|
|
break;
|
||
|
|
case "geologyParam":
|
||
|
|
dataId.value = 11;
|
||
|
|
break;
|
||
|
|
};
|
||
|
|
importDialogVisible.value = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 导入图件对话框显隐事件
|
||
|
|
const handleShowIDD = (val) => {
|
||
|
|
importDialogVisible.value = val;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 选择图件对话框显隐事件
|
||
|
|
const handleShowBDT = (val) => {
|
||
|
|
chooseDataVisible.value = val;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置计算参数对话框显隐事件
|
||
|
|
const handleShowFACP = (val) => {
|
||
|
|
setParamsVisible.value = val;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 设置计算参数事件
|
||
|
|
const handleSetParams = async (par) => {
|
||
|
|
try {
|
||
|
|
loading.value = true;
|
||
|
|
loadingMsg.value = "正在计算有利区……";
|
||
|
|
const drawerToken = localStorage.getItem(currentTokenKey);
|
||
|
|
const mapId = selectedImageFile.value[selectedImageFile.value.length - 1].MapID;
|
||
|
|
const response = await calcFavorableArea({ SourceIds: mapId, GenParams: JSON.stringify(par), DrawerToken: drawerToken });
|
||
|
|
if (response > 0) {
|
||
|
|
await getFavorableResults(mapId);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("执行错误：", error);
|
||
|
|
$toastMessage.error("执行计算时发生错误！");
|
||
|
|
return;
|
||
|
|
} finally {
|
||
|
|
loadingRef.value.close();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 加载窗口超时
|
||
|
|
const onTimeout = () => {
|
||
|
|
$toastMessage.error("执行计算超时，请稍后重试！");
|
||
|
|
}
|
||
|
|
|
||
|
|
// 接收选择图件对话框选中的图件
|
||
|
|
const handleSelectedFile = (data) => {
|
||
|
|
if (data) {
|
||
|
|
data.forEach(item => {
|
||
|
|
const exists = imgFileData.value.find(w => w.MapID === item.MapID);
|
||
|
|
if (!exists) {
|
||
|
|
imgFileData.value.push(item);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
localStorage.setItem(STORAGE_KEYS.FAVORABLE_AREA_SELECTED_FILE, JSON.stringify(imgFileData.value));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 设置底图事件
|
||
|
|
const handleSetBaseImg = (row) => {
|
||
|
|
if (!selectedImageFile.value) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const selectedImg = selectedImageFile.value[selectedImageFile.value.length - 1];
|
||
|
|
const mapName = selectedImg.MapName;
|
||
|
|
const fileName = `${dataDir}/${mapName}`;
|
||
|
|
const drawerToken = localStorage.getItem(currentTokenKey);
|
||
|
|
loading.value = true;
|
||
|
|
loadingMsg.value = "正在合并底图……";
|
||
|
|
|
||
|
|
send(COMMAND.MERGE_FILE, { fileName: fileName }, drawerToken);
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
// 移除底图事件
|
||
|
|
const handleDelete = (row) => {
|
||
|
|
imgFileData.value = imgFileData.value.filter(w => w !== row);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 批量删除结果
|
||
|
|
const handleDeleteResults = async () => {
|
||
|
|
if (selectedResultRows.value) {
|
||
|
|
|
||
|
|
let sourceIds = [];
|
||
|
|
selectedResultRows.value.forEach((item) => {
|
||
|
|
sourceIds.push(item.MapID);
|
||
|
|
});
|
||
|
|
|
||
|
|
if (sourceIds.length === 0) {
|
||
|
|
$toastMessage.warning("请选择要删除的绘制成果！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
ElMessageBox.confirm(`您确定要删除选中的数据吗?`, "删除确认", {
|
||
|
|
confirmButtonText: "确认删除",
|
||
|
|
cancelButtonText: "取消",
|
||
|
|
type: "warning"
|
||
|
|
})
|
||
|
|
.then(async () => {
|
||
|
|
var response = await deleteByMapIds(sourceIds);
|
||
|
|
if (response) {
|
||
|
|
$toastMessage.success("删除成功!");
|
||
|
|
const mapId = selectedImageFile.value[selectedImageFile.value.length - 1].MapID;
|
||
|
|
await getFavorableResults(mapId);
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
$toastMessage.error("删除失败!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}).catch(() => {
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$toastMessage.warning("请先选择要删除的文件!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const unsubscribe = onMessage((data) => {
|
||
|
|
try {
|
||
|
|
if (!data) return; // 如果没有新消息，直接返回
|
||
|
|
const json = JSON.parse(data);
|
||
|
|
const evtType = json.type;
|
||
|
|
if (evtType === COMMAND.MERGE_FILE) {
|
||
|
|
// emitter.emit(EMIT_COMMAND.EVT_TYPE, { type: evtType, data: data });
|
||
|
|
loadingRef.value.close();
|
||
|
|
$toastMessage.success("合并底图完成……");
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("异常：", error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 删除结果文件
|
||
|
|
const handleDeleteResult = async (row) => {
|
||
|
|
if (row) {
|
||
|
|
|
||
|
|
let sourceIds = [];
|
||
|
|
sourceIds.push(row.MapID);
|
||
|
|
|
||
|
|
if (sourceIds.length === 0) {
|
||
|
|
$toastMessage.warning("请选择要删除的绘制成果！");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var response = await deleteByMapIds(sourceIds);
|
||
|
|
if (response) {
|
||
|
|
$toastMessage.success("删除成功!");
|
||
|
|
const mapId = selectedImageFile.value[selectedImageFile.value.length - 1].MapID;
|
||
|
|
await getFavorableResults(mapId);
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
$toastMessage.error("删除失败!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$toastMessage.warning("请先选择要删除的文件!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 获取有利区结果
|
||
|
|
const getFavorableResults = async (mapId) => {
|
||
|
|
try {
|
||
|
|
const response = await getResults(mapId);
|
||
|
|
drawResultData.value = response;
|
||
|
|
} catch (error) {
|
||
|
|
console.error("获取数据失败:", error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 图件表格行点击事件
|
||
|
|
const handleRowClick = async (row) => {
|
||
|
|
if (selectedImageFile.value) {
|
||
|
|
selectedImageFile.value.forEach((item) => {
|
||
|
|
imgFileRef.value.toggleRowSelection(item);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
imgFileRef.value.toggleRowSelection(row);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleOpenFile = async (row) => {
|
||
|
|
if (row) {
|
||
|
|
let token = generateGUID();
|
||
|
|
localStorage.setItem(currentTokenKey, token);
|
||
|
|
emitter.emit(EMIT_COMMAND.SOURCE_CHANGED);
|
||
|
|
emitter.emit(EMIT_COMMAND.EVT_TYPE, { type: EMIT_COMMAND.OPEN_FILE, cmdID: currentTokenKey, data: JSON.stringify({ fileName: row.MapName, drawerToken: token }) });
|
||
|
|
|
||
|
|
await getFavorableResults(row.MapID);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleOpenResultFile = async (row) => {
|
||
|
|
if (row) {
|
||
|
|
let token = generateGUID();
|
||
|
|
localStorage.setItem(currentTokenKey, token);
|
||
|
|
emitter.emit(EMIT_COMMAND.SOURCE_CHANGED);
|
||
|
|
emitter.emit(EMIT_COMMAND.EVT_TYPE, { type: EMIT_COMMAND.OPEN_FILE, cmdID: currentTokenKey, data: JSON.stringify({ fileName: row.MapName, drawerToken: token }) });
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 图件表格选中事件
|
||
|
|
const handleSelectionChange = (selection) => {
|
||
|
|
selectedImageFile.value = selection;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 结果图表选择
|
||
|
|
const handleDrawResultSelectionChange = (selection) => {
|
||
|
|
selectedResultRows.value = selection;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 结果图表行点击事件
|
||
|
|
const handleDrawResultRowClick = (row) => {
|
||
|
|
if (selectedResultRows.value) {
|
||
|
|
selectedResultRows.value.forEach((item) => {
|
||
|
|
drawResultRef.value.toggleRowSelection(item, false);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
drawResultRef.value.toggleRowSelection(row);
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
imgFileData.value = JSON.parse(localStorage.getItem(STORAGE_KEYS.FAVORABLE_AREA_SELECTED_FILE) || '[]');
|
||
|
|
});
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
unsubscribe();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.scrollable-container {
|
||
|
|
height: calc(100vh - 100px);
|
||
|
|
overflow-y: auto;
|
||
|
|
/* border: 1px solid #ddd; */
|
||
|
|
width: 100%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftSide {
|
||
|
|
width: 275px;
|
||
|
|
height: calc(100vh - 55px);
|
||
|
|
border: none;
|
||
|
|
background-color: #333;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-file-data {
|
||
|
|
width: 100%;
|
||
|
|
height: 50%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
background-color: #fff;
|
||
|
|
border: solid 1px #ccc;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-file-title {
|
||
|
|
color: #5399ff;
|
||
|
|
justify-content: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: rgb(245, 245, 245);
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-container {
|
||
|
|
display: flex;
|
||
|
|
margin: 0;
|
||
|
|
gap: 10px;
|
||
|
|
padding-top: 5px;
|
||
|
|
padding-left: 5px;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
border-bottom: solid 1px #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main {
|
||
|
|
width: 100%;
|
||
|
|
/* height: calc(100vh - 40px); */
|
||
|
|
overflow: auto;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oper {
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
margin: 0;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
</style>
|