diff --git a/business-css/frontend/src/api/business/algorithm/index.ts b/business-css/frontend/src/api/business/algorithm/index.ts index c19fe3a..f793a95 100644 --- a/business-css/frontend/src/api/business/algorithm/index.ts +++ b/business-css/frontend/src/api/business/algorithm/index.ts @@ -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 }); diff --git a/business-css/frontend/src/assets/x6/charts.png b/business-css/frontend/src/assets/x6/charts.png new file mode 100644 index 0000000..28c95a6 Binary files /dev/null and b/business-css/frontend/src/assets/x6/charts.png differ diff --git a/business-css/frontend/src/assets/x6/text.png b/business-css/frontend/src/assets/x6/text.png new file mode 100644 index 0000000..7a4f38d Binary files /dev/null and b/business-css/frontend/src/assets/x6/text.png differ diff --git a/business-css/frontend/src/components/antvx6/tableModel.vue b/business-css/frontend/src/components/antvx6/tableModel.vue new file mode 100644 index 0000000..36e4bb2 --- /dev/null +++ b/business-css/frontend/src/components/antvx6/tableModel.vue @@ -0,0 +1,129 @@ + + + + + + + + + + + + + + + + + diff --git a/business-css/frontend/src/components/antvx6/viewx6.vue b/business-css/frontend/src/components/antvx6/viewx6.vue index 4fb5783..7b668dd 100644 --- a/business-css/frontend/src/components/antvx6/viewx6.vue +++ b/business-css/frontend/src/components/antvx6/viewx6.vue @@ -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,25 +42,126 @@ 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, pageSize:999 }).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 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,19 +353,119 @@ 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) - if(!topology.designData)return - // 确保每个单元格都有 shape 属性 - // const validCells = Array.isArray(topology.designData) ? topology.designData.filter(cell => cell.shape) : [] - // 如果有有效单元格,则加载到图中 - graph.fromJSON(topology.designData); - getScenarioResults() + if (!graph || !projectInfo.value || !projectInfo.value.topology) return; + graph.clearCells(); + const topology:any = JSON.parse(projectInfo.value.topology) + customImageData.value = [] + if(!topology.designData)return + + for(let i = 0;i { // #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) + graph.on('node:click', ({ e, node }) => { + if(node?.store?.data?.type == 'charts'){ + deviceId.value = node?.store?.data?.correlationId + + return + } + if(node?.store?.data?.type == 'text'){ + deviceId.value = node?.store?.data?.correlationId + isTableModel.value = true + return + } + }) - function showContextMenu(x: number, y: number) { - left.value = x + 260 - top.value = y - 50 - isMenuShow.value = true - // 创建并显示上下文菜单 - // 包含箭头样式选项 - } - - - // 监听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 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 dialogTableModel(){ // 关闭变动设置弹窗 + isTableModel.value = false; } -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 0){ - for(let j=0;j { - if(res === true){ - ElMessage({ - type: "success", - message: "保存成功", - }); - } - }); - // 返回保存的数据 - return saveData - } catch (error) { - console.error('保存设计失败:', error) - return null - } -} @@ -720,12 +575,12 @@ function saveDesign() { // 保存设计 - + @@ -742,6 +597,9 @@ function saveDesign() { // 保存设计 + + +