ThbTech/JavaProjectRepo
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

提交预览x6

Browse Source
This commit is contained in:
limengnan 2026-01-17 14:59:23 +08:00
parent b1577e324a
commit 41fb70bb78
5 changed files with 370 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
business-css/frontend/src/api/business/algorithm/index.ts
View File

@ -3,7 +3,7 @@ import request from '@/utils/request';
//获取所有项目列表
export function searchAlgorithmsPage(queryParams:any){
return request({
url: '/api/algorithms/search' ,
url: '/algorithms/search' ,
method: 'get',
params:queryParams
});
@ -15,7 +15,7 @@ export function searchAlgorithmsPage(queryParams:any){
//新增项目
export function addAlgorithms(data:any){
return request({
url:'/api/algorithms' ,
url:'/algorithms' ,
method: 'Post',
data: data
});
@ -25,7 +25,7 @@ export function addAlgorithms(data:any){
//更新项目信息
export function updateAlgorithms (queryParams:any){
return request({
url:'/api/algorithms' ,
url:'/algorithms' ,
method: 'PUT',
data: queryParams
});
@ -35,7 +35,7 @@ export function updateAlgorithms (queryParams:any){
//单个删除项目
export function deleteAlgorithms (queryParams:any){
return request({
url:'/api/algorithms/'+queryParams.id ,
url:'/algorithms/'+queryParams.id ,
method: 'delete'
// params: queryParams
});
@ -43,7 +43,7 @@ export function deleteAlgorithms (queryParams:any){
//多选删除项目
export function deleteBatchAlgorithms (queryParams:any){
return request({
url:'/api/algorithms',
url:'/algorithms',
method: 'delete',
data: queryParams
});

BIN
business-css/frontend/src/assets/x6/charts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 423 B

BIN
business-css/frontend/src/assets/x6/text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 457 B

129
business-css/frontend/src/components/antvx6/tableModel.vue Normal file
View File

@ -0,0 +1,129 @@
<script lang="ts">
export default {
name: "x6查看结果数据",
};
</script>
<script setup lang="ts">
import { onMounted, ref, nextTick } from "vue";
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { getByScenario } from "@/api/business/scenario";
const emit = defineEmits([ 'closeEditdevice']);
const props = defineProps({
deviceId: {
required: false,
type: String,
default: ''
},
scenarioId: {
required: false,
type: String,
default: ''
},
})
const scenarioResultData:any = ref([])
function getScenarioResults(){
scenarioResultData.value = []
getByScenario({
scenarioId: props.scenarioId,
deviceId: props.deviceId,
pageNum:1,
pageSize:999
}).then((res:any) => {
scenarioResultData.value = res.data.records
})
}
onMounted(() => {
getScenarioResults()
});
</script>
<template>
<div class="editdevice-box">
</div>
</template>
<style scoped>
.editdevice-box{
width: 100%;
height: calc(100vh - 200px);
}
.editdevice_navigation_left{
width: 110px;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #363636;
background-image: url('@/assets/x6/navleft.png');
}
.editdevice_navigation_left:hover{
color: #266fff ;
}
.editdevice_navigation_activeleft{
background-image: url('@/assets/x6/navleft_active.png');
color: #fff !important;
}
.editdevice_navigation_right{
width: 110px;
height: 32px;
line-height: 32px;
text-align: center;
cursor: pointer;
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #363636;
background-image: url('@/assets/x6/navright.png');
}
.editdevice_navigation_right:hover{
color: #266fff ;
}
.editdevice_navigation_activeright{
background-image: url('@/assets/x6/navright_active.png');
color: #fff !important;
}
</style>
<style>
.el-table .el-table--enable-row-hover .el-table__body tr:hover > td{
background-color: #194764 !important;
}
.editdevice-box .el-table .el-table__row.current-row td{
background-color: #f3faff !important;
border-top:1px solid #14aaff;
border-bottom:1px solid #14aaff
}
.editdevice-box .el-table .el-table__row.current-row td:last-child{
border-right:1px solid #14aaff;
}
.editdevice-box .el-table .el-table__row.current-row td:first-child{
border-left:1px solid #14aaff;
}
.editdevice-box .el-table .el-table__row.current-row:last-child td{
border-bottom:1px solid #14aaff
}
.el-table__inner-wrapper:before{
background-color: transparent !important;
border-top: 1px solid var(--el-table-border-color);
}
.el-table--border:before{
background-color: transparent !important;
border-top: 1px solid var(--el-table-border-color);
}
</style>

604
business-css/frontend/src/components/antvx6/viewx6.vue
View File

@ -18,12 +18,13 @@ import {
import { updateProjects,projectsById} from "@/api/business/project";
import { getByScenario } from "@/api/business/scenario";
import textimg from '@/assets/x6/text.png'
import chartsimg from '@/assets/x6/charts.png'
import Createscenario from '@/views/component/scenario/createscenario.vue'
import ScenarioModel from '@/views/component/scenario/index.vue'
import AdddeviceModel from './adddevice.vue';
import TableModels from './tableModel.vue';
import EditdeviceModel from './editdevice.vue';
import MaterialModels from './materialmodel.vue';
import ChangesettingsModels from './changesettings.vue';
@ -41,15 +42,18 @@ const props = defineProps({
const deviceTypetype:any = ref('') // 设备类型
const isAdddevice = ref(false) // 是否添加设备
const isEditdevice = ref(false) // 是否编辑设备
const isMaterialModel = ref(false) // 是否物料信息
const projectInfo:any = ref({}) // 项目信息
const isScenario = ref(false) //是否展示历史模拟场景
const isDisplay = ref(true) // 是否显示
const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮
const scenarioResults:any = ref({}) // 设备信息
const deviceId = ref('') // 设备id
const customImageData:any = ref([]) // 图形化设备数组
// 为了协助代码演示
let graph: Graph
const scenarioId:any = ref('') // 场景id
function getScenarioResults(){
scenarioResults.value = {}
getByScenario({
scenarioId: scenarioId.value,
pageNum:1,
@ -57,9 +61,107 @@ function getScenarioResults(){
}).then((res:any) => {
console.log(res.data.records)
res.data.records
scenarioResults.value = groupByDeviceId(res.data.records)
for (const key in scenarioResults.value) {
if (!Object.hasOwn(scenarioResults.value, key)) continue;
const element = scenarioResults.value[key];
for(let i = 0;i<customImageData.value.length;i++){
if(key == customImageData.value[i].id){
customImageData.value[i].scenarioResults = element
console.log(customImageData.value[i])
addAttrText(customImageData.value[i])
}
}
}
})
}
function addAttrText(item:any){
item.attrs.text = item.deviceName
graph.addNode({
x: item.position.x ,
y: item.position.y + 160,
width: 100,
height: 30,
label: 'keff：' + item.scenarioResults[item.scenarioResults.length - 1].keffValue,
attrs: {
body: {
stroke: 'transparent',
fill: 'transparent',
strokeWidth: 1,
},
text: {
text: '',
fill: item.scenarioResults[item.scenarioResults.length - 1].keffValue > 0.98 ? '#ff4d4f' : '#363636', // 蓝色文字
fontSize: 14,
},
},
})
graph.addNode({
shape: 'image-node',
x: item.position.x + 135 ,
y: item.position.y + 167,
width: 14,
height: 14,
correlationId: item.id,
type:'charts',
attrs: {
img: {
width: 14,
height: 14,
'xlink:href': chartsimg,
},
label: {
text: '',
},
},
})
graph.addNode({
shape: 'image-node',
x: item.position.x + 110 ,
y: item.position.y + 167,
width: 14,
height: 14,
correlationId: item.id,
type:'text',
attrs: {
img: {
width: 14,
height: 14,
'xlink:href': textimg,
},
label: {
text: '',
},
},
})
}
function groupByDeviceId(data:any) { // 按设备id分组
// 边界检查：确保输入是数组
if (!Array.isArray(data)) {
throw new Error('输入必须是数组类型');
}
return data.reduce((acc, item) => {
// 确保deviceId存在且不为空
const key = item.deviceId;
if (!key) {
console.warn('跳过无deviceId的元素:', item);
return acc;
}
// 若该deviceId分组不存在，则初始化空数组
if (!acc[key]) {
acc[key] = [];
}
// 将当前元素加入对应分组
acc[key].push(item);
return acc;
}, {}); // 初始值为空对象
}
onMounted(() => {
scenarioId.value = route.query.scenarioId
// #region 初始化画布
@ -251,16 +353,116 @@ onMounted(() => {
},
true,
)
Graph.registerNode(
'image-node',
{
inherit: 'rect',
width: 120,
height: 60,
markup: [
{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'image',
selector: 'img',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
body: {
stroke: 'transparent',
strokeWidth: 1,
fill: 'transparent',
rx: 6,
ry: 6,
},
img: {
'xlink:href': 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
width: 24,
height: 24,
x: 0,
y: 0,
},
label: {
text: 'Image Node',
fill: '#333',
fontSize: 12,
refX: 0.5,
refY: 0.5,
textAnchor: 'middle',
dy: 10,
},
},
},
true,
)
// Graph.registerNode(
// 'image-charts',
// {
// inherit: 'rect',
// width: 120,
// height: 60,
// markup: [
// {
// tagName: 'rect',
// selector: 'body',
// },
// {
// tagName: 'image',
// selector: 'img',
// },
// {
// tagName: 'text',
// selector: 'label',
// },
// ],
// attrs: {
// body: {
// stroke: 'transparent',
// strokeWidth: 1,
// fill: 'transparent',
// rx: 6,
// ry: 6,
// },
// img: {
// 'xlink:href': 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png',
// width: 24,
// height: 24,
// x: 0,
// y: 0,
// },
// label: {
// text: 'Image Node',
// fill: '#333',
// fontSize: 12,
// refX: 0.5,
// refY: 0.5,
// textAnchor: 'middle',
// dy: 10,
// },
// },
// },
// true,
// )
projectsById({projectId:route.query.projectId}).then((res:any) => {
if(res.topology != null && res.topology != ''){
projectInfo.value = res
if (!graph || !projectInfo.value || !projectInfo.value.topology) return;
graph.clearCells();
const topology:any = JSON.parse(projectInfo.value.topology)
customImageData.value = []
if(!topology.designData)return
// 确保每个单元格都有 shape 属性
// const validCells = Array.isArray(topology.designData) ? topology.designData.filter(cell => cell.shape) : []
// 如果有有效单元格，则加载到图中
for(let i = 0;i<topology.designData.length;i++){
if(topology.designData[i].shape == 'custom-image'){
customImageData.value.push(topology.designData[i])
}
}
graph.fromJSON(topology.designData);
getScenarioResults()
}
@ -294,98 +496,20 @@ onMounted(() => {
// #endregion
graph.on('node:contextmenu', ({ e, node }) => {
selectedNode.value = node
e.preventDefault()
// 显示自定义上下文菜单，包含箭头样式选项
const pos = node.position?.() || { x: 0, y: 0 }
showContextMenu(pos.x, pos.y)
})
function showContextMenu(x: number, y: number) {
left.value = x + 260
top.value = y - 50
graph.on('node:click', ({ e, node }) => {
if(node?.store?.data?.type == 'charts'){
deviceId.value = node?.store?.data?.correlationId
isMenuShow.value = true
// 创建并显示上下文菜单
// 包含箭头样式选项
return
}
if(node?.store?.data?.type == 'text'){
deviceId.value = node?.store?.data?.correlationId
isTableModel.value = true
return
}
})
// 监听Graph中节点创建事件
// graph.on('node:added', (args:any) => {
// console.log('节点已添加到画布', args)
// const { node } = args
// // 检查是否是管线节点
// if (node.data && node.data.lineStyle) {
// // 应用管线样式到连接线
// const lineStyle = node.data.lineStyle
// graph.options.connecting.createEdge = () => {
// return new Shape.Edge({
// attrs: {
// line: {
// stroke: '#A2B1C3',
// strokeWidth: 2,
// strokeDasharray: lineStyle.strokeDasharray,
// targetMarker: lineStyle.targetMarker,
// sourceMarker: lineStyle.sourceMarker
// }
// },
// zIndex: 0
// })
// }
// // 移除管线节点，因为它只是一个样式选择器
// setTimeout(() => {
// graph.removeNode(node)
// }, 100)
// } else {
// if(node.store && node.store.data && node.store.data.shape === 'rect'){
// return
// }
// nodeId.value = node.id
// if(node.store.data.attrs.text.text == '扁平槽'){
// deviceTypetype.value = 'FlatTank'
// }else if(node.store.data.attrs.text.text == '圆柱槽'){
// deviceTypetype.value = 'CylindricalTank'
// }else if(node.store.data.attrs.text.text == '环形槽'){
// deviceTypetype.value = 'AnnularTank'
// }else if(node.store.data.attrs.text.text == '管束槽'){
// deviceTypetype.value = 'TubeBundleTank'
// }else if(node.store.data.attrs.text.text == '萃取柱'){
// deviceTypetype.value = 'ExtractionColumn'
// }else if(node.store.data.attrs.text.text == '流化床'){
// deviceTypetype.value = 'FluidizedBed'
// }else if(node.store.data.attrs.text.text == '锥底环形槽'){
// deviceTypetype.value = 'ACFTank'
// }
// // 设置固定大小
// node.size(160, 160)
// // 去掉背景节点
// node.attr('body/fill', 'none')
// // 图片居中
// node.attr('image/refX', 0)
// node.attr('image/refY', 0)
// node.attr('image/width', 160) // 修改宽度
// node.attr('image/height', 160) // 修改高度
// // 删除节点上的文字
// node.attr('text/text', '')
// node.attr('label/text', '')
// isAdddevice.value = true
// }
// })
// #endregion
// #endregion
})
@ -393,39 +517,11 @@ const left = ref(0)
const top = ref(0)
const isMenuShow = ref(false)
const selectedNode:any = ref(null)
function deleteNode() { // 删除节点
graph.removeNode(selectedNode.value)
isMenuShow.value = false
}
function copyNode() { // 复制节点
if (selectedNode.value) {
try {
// 获取当前节点的位置
const position = selectedNode.value.position()
// 创建新节点，使用节点的原始数据
const newNode = selectedNode.value.clone()
// 设置新位置（偏移50px）
newNode.position(position.x + 50, position.y + 50)
// 添加到画布
graph.addNode(newNode)
isMenuShow.value = false
} catch (error) {
console.error('节点复制失败:', error)
}
}
}
function closeAntvx6() {
router.push('/business/project/index')
}
function revokeClick(){
graph.undo()
}
function removeClick(){
graph.clearCells();
}
function bigClick(){
graph.zoom(0.1)
}
@ -433,257 +529,16 @@ function smallClick(){
graph.zoom(-0.1)
}
const nodeId = ref("")
const isTableModel = ref(false)
function dialogTableModel(){ // 关闭变动设置弹窗
isTableModel.value = false;
}
function analysisAdd(){
dialogVisible.value = true;
}
const dialogVisible = ref(false)
function closeCreatescenario(){ // 关闭新增模拟分析弹窗
dialogVisible.value = false;
}
function simulationClick() { // 打开模拟分析
isScenario.value = true;
}
//取消按钮
function handleClose() {
isScenario.value = false;
}
function dialogAdddevice(){ // 打开新增设备弹窗
graph.undo()
isAdddevice.value = false;
}
const selectedDevice = ref({})
function closeAdddevice(e:any){ // 关闭新增设备弹窗
selectedDevice.value = e
let retrievedNode:any = graph.getCellById(nodeId.value)
retrievedNode.store.data.deviceInfo = e
isAdddevice.value = false;
}
const deviceInfo:any = ref({}) // 是否编辑设备
function EditdeviceClick(){ // 打开编辑设备弹窗
deviceInfo.value = selectedNode.value.store.data.deviceInfo
nodeId.value = selectedNode.value.id
if(deviceInfo.value != null){
deviceTypetype.value = deviceInfo.value.type
}
isEditdevice.value = true;
}
function closeEditdevice(e:any){ // 关闭编辑设备弹窗
selectedDevice.value = e
let retrievedNode:any = graph.getCellById(nodeId.value)
retrievedNode.store.data.deviceInfo = e
isEditdevice.value = false;
}
function dialogEditdevice(){ // 关闭设备弹窗
isEditdevice.value = false;
}
const materialInfo:any = ref({}) // 是否物料信息
const selectedMaterial:any = ref({})
function MaterialModelClick(){ // 打开物料信息弹窗
deviceInfo.value = selectedNode.value.store.data.deviceInfo
materialInfo.value = {}
if(selectedNode.value.store.data.materialInfo != null){
materialInfo.value = selectedNode.value.store.data.materialInfo
}
nodeId.value = selectedNode.value.id
if(materialInfo.value != null){
deviceTypetype.value = materialInfo.value.type
}
isMaterialModel.value = true;
}
function dialogMaterialModel(){ // 关闭物料信息弹窗
isMaterialModel.value = false;
}
function closeMaterialModel(e:any){ // 关闭物料信息弹窗
if(e == false){
isMaterialModel.value = false;
return
}
selectedMaterial.value = e
let retrievedNode:any = graph.getCellById(nodeId.value)
retrievedNode.store.data.materialInfo = e
isMaterialModel.value = false;
}
const isChangesettings = ref(false)
const changesettingsData:any = ref([]) // 是否变动设置
function dialogChangesettings(){ // 关闭变动设置弹窗
isChangesettings.value = false;
}
function ChangesettingsClick(){ // 打开变动设置弹窗
changesettingsData.value = []
if(selectedNode.value.store.data.deviceInfo == null){
ElMessage({
type: "error",
message: "请先添加设备信息",
});
return
}
if(selectedNode.value.store.data.materialInfo == null){
ElMessage({
type: "error",
message: "请先添加物料信息",
});
return
}
deviceInfo.value = selectedNode.value.store.data.deviceInfo
materialInfo.value = selectedNode.value.store.data.materialInfo
if(selectedNode.value.store.data.changesettings != null){
changesettingsData.value = selectedNode.value.store.data.changesettings
}
nodeId.value = selectedNode.value.id
if(materialInfo.value != null){
deviceTypetype.value = materialInfo.value.type
}
isChangesettings.value = true;
}
function closeChangesettingsModel(e:any){ // 关闭变动设置弹窗
if(e == false){
isChangesettings.value = false;
return
}
selectedMaterial.value = e
let retrievedNode:any = graph.getCellById(nodeId.value)
retrievedNode.store.data.changesettings = e
isChangesettings.value = false;
}
function setFormulaInit(formula:any) {
// const formula = "【(圆柱槽B)*0.2+(环形槽A)*1.0+0.5】";
// 匹配*号后、+或)前的数字（支持整数和小数）
const regex = /\*(\d+\.?\d*)/g;
const coefficients = [];
let match;
// 循环提取所有匹配项
while ((match = regex.exec(formula)) !== null) {
coefficients.push(parseFloat(match[1])); // 转为数字类型
}
console.log(coefficients); // 输出: [0.2, 1.0]
return coefficients
}
function getBias(formula:any){
// 从后往前找最后一个+的位置
// 匹配最后一个+号后面的数字（支持整数、小数）
const regex = /\+(\d+\.?\d*)$/;
const match = formula.match(regex);
const constant = parseFloat(match[1]);
return constant
}
function saveDesign() { // 保存设计
try {
// 获取画布内容并转换为JSON
const designData:any = graph.toJSON()
let cells:any = []
if(designData !=null && designData.cells.length>0){
cells = designData.cells
}
let devices = []
for(let i=0;i<cells.length;i++){
if(cells[i].shape == 'custom-image'){
let tempData:any = {}
if(cells[i].changesettings && cells[i].changesettings.length > 0){
for(let j=0;j<cells[i].changesettings.length;j++){
if(cells[i].changesettings[j].formula != '' && cells[i].changesettings[j].formula != null){
const key = cells[i].changesettings[j].name as string
const unit = cells[i].changesettings[j].unit
const name = cells[i].changesettings[j].name
const delay= cells[i].changesettings[j].delay
let tempSources = []
for(let k=0;k<setFormulaInit(cells[i].changesettings[j].formula).length;k++){
tempSources.push({
entityType: 'material', //圆柱槽B
entityId: cells[i].materialInfo.materialId , //materialId : cdeeca2e-1e0c-4bdd-b946-f347c104752c
property: name, // 铀浓度（g/L）
coefficient: setFormulaInit(cells[i].changesettings[j].formula)[k], //0.2
delay: { enabled: true, time: delay, unit: 's' } // 5
})
}
tempData[key] = {
name: tempData[key],
type:'influence',
unit:unit,
base:0,
bias: getBias(cells[i].changesettings[j].formula) || 0,
sources:tempSources,
expression:cells[i].changesettings[j].formula
}
}
}
}
devices.push({
deviceId:cells[i].id,
name:cells[i].deviceInfo.name,
type:cells[i].deviceInfo.type,
properties:{},
material: cells[i].materialInfo != null ? {
materialId:cells[i].id,
name:cells[i].materialInfo.name,
properties:tempData
}:{}
})
}
}
const topology = {
projectId: projectInfo.value.projectId,
name: projectInfo.value.name,
devices:devices,
pipelines:[],
systemboundaries:[],
globalDisplay:{
device:{
showProperties:[]
},
material:{
showProperties:[]
},
},
designData:cells
}
console.log(topology)
// 添加保存信息
const saveData = {
projectId: projectInfo.value.projectId,
topology: JSON.stringify(topology)
}
updateProjects(saveData).then((res:any) => {
if(res === true){
ElMessage({
type: "success",
message: "保存成功",
});
}
});
// 返回保存的数据
return saveData
} catch (error) {
console.error('保存设计失败:', error)
return null
}
}
</script>
<template>
@ -720,12 +575,12 @@ function saveDesign() { // 保存设计
</div>
<div id="graph-container" style="width: 100%; height: calc(100% - 60px);">
<div class="context-menu" v-if="isMenuShow" :style="{left: left +'px', top: top+'px'}">
<img src="@/assets/x6/info.png" alt="图标" title="设备信息" style="cursor: pointer;" @click="EditdeviceClick">
<!-- <img src="@/assets/x6/info.png" alt="图标" title="设备信息" style="cursor: pointer;" @click="EditdeviceClick">
<img src="@/assets/x6/material.png" alt="图标" title="物料信息" style="cursor: pointer;" @click="MaterialModelClick">
<img src="@/assets/x6/change.png" alt="图标" title="变动设置" style="cursor: pointer;" @click="ChangesettingsClick">
<img src="@/assets/x6/copy.png" alt="图标" title="复制" style="cursor: pointer;" @click="copyNode">
<img src="@/assets/x6/del.png" alt="图标" title="删除" style="cursor: pointer;"
@click="deleteNode">
@click="deleteNode"> -->
</div>
<div class="line-style-box">
<div class="expansionandcontraction-box" v-if="isExpansionandcontraction == false" @click="isExpansionandcontraction = true">
@ -742,6 +597,9 @@ function saveDesign() { // 保存设计
</div>
</div>
<el-dialog v-model="isTableModel" :close-on-click-modal="false" :modal="false" draggable :before-close="dialogTableModel" title="设备分析列表" append-to-body width="1430px">
<TableModels v-id="isTableModel" :deviceId="deviceId" :scenarioId="scenarioId"/>
</el-dialog>
</div>
</template>