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-26 08:30:09 +08:00
parent 7896f303b4
commit 298e0ee650
3 changed files with 143 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
business-css/frontend/src/components/antvx6/index.vue
View File

@ -46,6 +46,7 @@ const props = defineProps({
default: {}
},
})
const isLock = ref(false) // 是否锁定
const deviceTypetype:any = ref('') // 设备类型
const isAdddevice = ref(false) // 是否添加设备
const isEditdevice = ref(false) // 是否编辑设备
@ -56,53 +57,12 @@ const isDisplay = ref(true) // 是否显示
const isExpansionandcontraction = ref(false) // 是否显示展开收起按钮
// 为了协助代码演示
let graph: Graph
let currentArrowStyle = 'single' // 默认单箭头
let currentLineStyle = 'solid' // 默认实线
// 设置箭头样式
// function setArrowStyle(style: 'single' | 'double' | 'none', lineStyle: 'solid' | 'dashed' = 'solid') {
// currentArrowStyle = style
// currentLineStyle = lineStyle
// // 重新配置连接线
// graph.options.connecting.createEdge = () => {
// const edge = new Shape.Edge({
// attrs: {
// line: {
// stroke: '#A2B1C3',
// strokeWidth: 2,
// strokeDasharray: lineStyle === 'dashed' ? 5 : 0,
// targetMarker: style === 'none' ? null : {
// name: 'block',
// width: 12,
// height: 8,
// },
// sourceMarker: style === 'double' ? {
// name: 'block',
// width: 12,
// height: 8,
// } : null,
// },
// },
// zIndex: 0,
// })
// return edge
// }
// }
onMounted(() => {
preWork()
if(projectInfo.value.topology != null && projectInfo.value.topology != ''){
}
// #region 初始化画布
graph = new Graph({
container: document.getElementById('graph-container') as HTMLElement,
grid: true,
background: {
color: '#ffffff' // Set a solid color background instead of an image
},
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
@ -249,18 +209,7 @@ onMounted(() => {
// 包含箭头样式选项
}
// 监听Stencil内部的Dnd事件
stencil.on('dnd:start', (args:any) => {
console.log('Stencil节点开始拖拽', args)
})
stencil.on('dnd:drag', (args:any) => {
console.log('Stencil节点拖拽中', args)
})
stencil.on('dnd:end', (args:any) => {
console.log('Stencil节点结束拖拽', args)
})
document
.getElementById('stencil')
?.appendChild(stencil.container as HTMLElement)
@ -268,6 +217,9 @@ onMounted(() => {
// 监听Graph中节点创建事件
graph.on('node:added', (args:any) => {
console.log('节点已添加到画布', args)
if(isLock.value == true){
return
}
const { node } = args
// 检查是否是管线节点
@ -312,8 +264,6 @@ onMounted(() => {
}else if(node.store.data.attrs.text.text == '锥底环形槽'){
deviceTypetype.value = 'ACFTank'
}
// 设置固定大小
node.size(160, 160)
// 去掉背景节点
@ -321,13 +271,13 @@ onMounted(() => {
// 图片居中
node.attr('image/refX', 0)
node.attr('image/refY', 0)
// node.attr('label/refX', 40)
node.attr('label/refY', 160)
node.attr('image/width', 160) // 修改宽度
node.attr('image/height', 160) // 修改高度
// 删除节点上的文字
node.attr('text/text', '')
node.attr('label/text', '')
isAdddevice.value = true
@ -848,8 +798,12 @@ function copyNode() { // 复制节点
const newNode = selectedNode.value.clone()
// 设置新位置（偏移50px）
newNode.position(position.x + 50, position.y + 50)
deviceTypetype.value = newNode.store.data.deviceInfo.type
// 添加到画布
graph.addNode(newNode)
//
// :deviceId="nodeId" :projectInfo="projectInfo"
// :deviceTypetype="deviceTypetype"
isMenuShow.value = false
} catch (error) {
console.error('节点复制失败:', error)
@ -863,13 +817,17 @@ function closeAntvx6() {
}
function revokeClick(){
if (graph.canUndo()) {
graph.undo()
}
if (graph.canUndo()) {
graph.undo()
}
}
function removeClick(){
if (graph.canRedo()) {
isLock.value = true
graph.redo()
setTimeout(() => {
isLock.value = false
}, 500);
}
}
function bigClick(){
@ -906,7 +864,9 @@ const selectedDevice = ref({})
function closeAdddevice(e:any){ // 关闭新增设备弹窗
selectedDevice.value = e
let retrievedNode:any = graph.getCellById(nodeId.value)
retrievedNode.store.data.deviceInfo = e
retrievedNode.attr('text/text', e.name)
retrievedNode.attr('label/text', e.name)
retrievedNode.store.data.deviceInfo = e
saveDesign()
isAdddevice.value = false;
}
@ -925,6 +885,9 @@ function closeEditdevice(e:any){ // 关闭编辑设备弹窗
selectedDevice.value = e
let retrievedNode:any = graph.getCellById(nodeId.value)
retrievedNode.store.data.deviceInfo = e
retrievedNode.attr('label/refY', 160)
retrievedNode.attr('text/text', e.name)
retrievedNode.attr('label/text', e.name)
isEditdevice.value = false;
saveDesign()
}
@ -1080,6 +1043,7 @@ function saveDesign() { // 保存设计
// type: getName(key).type,
// parentName : getName(key).type == 'device' ? '('+item.deviceName +')' : '('+item.materialName +')',
// parentId : getName(key).type == 'device' ? item.deviceId : item.materialId
if(cells[i].changesettings[j].deviceMaterialData[k] == null){
return
}
@ -1105,18 +1069,20 @@ function saveDesign() { // 保存设计
}
}
if(cells[i].deviceInfo != null){
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
}:{}
})
}
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
}:{}
})
}
}
console.log(devices)
@ -1160,21 +1126,7 @@ function saveDesign() { // 保存设计
</script>
<template>
<div class="app-layout x6-container-editbox" @click="isMenuShow = false">
<!-- <div class="toolbar">
<div class="style-group">
<h4>实线</h4>
<button @click="setArrowStyle('single', 'solid')">单箭头</button>
<button @click="setArrowStyle('double', 'solid')">双箭头</button>
<button @click="setArrowStyle('none', 'solid')">无箭头</button>
</div>
<div class="style-group">
<h4>虚线</h4>
<button @click="setArrowStyle('single', 'dashed')">单箭头虚线</button>
<button @click="setArrowStyle('double', 'dashed')">双箭头虚线</button>
<button @click="setArrowStyle('none', 'dashed')">无箭头虚线</button>
</div>
</div> -->
<div class="app-layout" @click="isMenuShow = false">
<div class="antvx6-header">
<div class="header-left-box">
<div class="return-icon-box" @click="closeAntvx6" title="返回工作台">

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

@ -39,6 +39,8 @@ const props = defineProps({
default: ''
}
})
const sliderIndex = ref<any>(0) // 选中时间
const sliderValues = ref<any>([]) // 时间轴
const deviceTypetype:any = ref('') // 设备类型
const isAdddevice = ref(false) // 是否添加设备
const isEditdevice = ref(false) // 是否编辑设备
@ -59,45 +61,56 @@ function getScenarioResults(){
pageNum:1,
pageSize:999
}).then((res:any) => {
console.log(res.data.records)
scenarioResults.value = groupByDeviceId(res.data.records)
for (const key in scenarioResults.value) {
if (!Object.hasOwn(scenarioResults.value, key)) continue;
let tempSliderValues = []
const element = scenarioResults.value[key];
sliderValues.value = []
for(let i = 0;i<customImageData.value.length;i++){
if(key == customImageData.value[i].id){
customImageData.value[i].scenarioResults = element
addAttrText(customImageData.value[i])
for(let j = 0;j<element.length;j++){
tempSliderValues.push(element[j].step)
sliderMarks.value[j] = element[j].step + ''
}
sliderIndex.value = customImageData.value[i].scenarioResults.length - 1
selecteTime.value = customImageData.value[i].scenarioResults[sliderIndex.value].step
sliderValues.value = tempSliderValues
addAttrText(customImageData.value[i],sliderIndex.value)
}
}
}
})
}
function addAttrText(item:any){
graph.addNode({
shape: 'rect-text',
x: item.position.x ,
y: item.position.y + 150,
width: 100,
height: 40,
attrs: {
body: {
stroke: 'transparent',
fill: 'transparent',
strokeWidth: 1,
},
label: {
textAnchor: 'left',
refX: 0,
text: item.deviceInfo.name,
fill: '#363636',
fontSize: 16,
}
},
})
function addAttrText(item:any,index:any){
// graph.addNode({
// shape: 'rect-text',
// x: item.position.x ,
// y: item.position.y + 150,
// width: 100,
// height: 40,
// attrs: {
// body: {
// stroke: 'transparent',
// fill: 'transparent',
// strokeWidth: 1,
// },
// label: {
// textAnchor: 'left',
// refX: 0,
// text: item.deviceInfo.name,
// fill: '#363636',
// fontSize: 16,
// }
// },
// })
if(item.scenarioResults[index] == null){
return
}
graph.addNode({
shape: 'rect-text',
x: item.position.x ,
@ -113,8 +126,8 @@ function addAttrText(item:any){
label: {
textAnchor: 'left',
refX: 0,
text: 'keff：' + item.scenarioResults[item.scenarioResults.length - 1].keffValue,
fill: item.scenarioResults[item.scenarioResults.length - 1].keffValue > 0.98 ? '#ff4d4f' : '#363636',
text: 'keff：' + item.scenarioResults[index].keffValue,
fill: item.scenarioResults[index].keffValue > 0.98 ? '#ff4d4f' : '#363636',
fontSize: 14,
}
},
@ -159,8 +172,8 @@ function addAttrText(item:any){
},
})
let tempData:any = []
if(item.scenarioResults[item.scenarioResults.length - 1].attrState){
let attrState = JSON.parse(item.scenarioResults[item.scenarioResults.length - 1].attrState)
if(item.scenarioResults[index].attrState){
let attrState = JSON.parse(item.scenarioResults[index].attrState)
for (const key in attrState) {
if (!Object.hasOwn(attrState, key)) continue;
const element = attrState[key];
@ -605,7 +618,6 @@ onMounted(() => {
customImageData.value.push(topology.designData[i])
}
}
console.log(topology.designData)
graph.fromJSON(topology.designData);
getScenarioResults()
}
@ -663,7 +675,6 @@ function isDisplayClick(){
isDisplay.value = false
let tempGraph:any = graph.toJSON().cells
for(let i = 0;i<tempGraph.length;i++){
console.log(tempGraph[i])
if(tempGraph[i].shape == 'rect-text' || tempGraph[i].shape == 'image-node'){
graph.removeCell(tempGraph[i].id)
}
@ -674,7 +685,7 @@ function isDisplayClick(){
if (!Object.hasOwn(scenarioResults.value, key)) continue;
for(let i = 0;i<customImageData.value.length;i++){
if(key == customImageData.value[i].id){
addAttrText(customImageData.value[i])
addAttrText(customImageData.value[i],sliderIndex.value)
}
}
}
@ -682,6 +693,49 @@ function isDisplayClick(){
}
function refreshClick(value:any){
let tempGraph:any = graph.toJSON().cells
for(let i = 0;i<tempGraph.length;i++){
if(tempGraph[i].shape == 'rect-text' || tempGraph[i].shape == 'image-node'){
graph.removeCell(tempGraph[i].id)
}
}
for (const key in scenarioResults.value) {
if (!Object.hasOwn(scenarioResults.value, key)) continue;
for(let i = 0;i<customImageData.value.length;i++){
if(key == customImageData.value[i].id){
const targetIndex = customImageData.value[i].scenarioResults.findIndex((item:any) => item.step === value);
sliderIndex.value = targetIndex
addAttrText(customImageData.value[i],targetIndex)
}
}
}
}
const selecteTime = ref<any>(0) // 选中时间
const formatTooltip = (val: number) => {
return sliderValues.value[val]
}
function handleTimeChange(value:any){ // 时间改变
console.log(selecteTime.value)
refreshClick(sliderValues.value[value])
const index = sliderValues.value.findIndex((val:any) => val === value);
if (index !== -1) {
// debugger
}
}
let sliderMarks:any =ref({
})
</script>
<template>
@ -734,6 +788,20 @@ function isDisplayClick(){
<el-dialog v-model="isEchartsModel" :close-on-click-modal="false" :modal="false" draggable :before-close="dialogEchartsModel" title="设备分析图像" append-to-body width="1430px">
<EchartsModels v-if="isEchartsModel" :deviceId="deviceId" :scenarioId="scenarioId"/>
</el-dialog>
<div
style="width: 100%;position: absolute;bottom: 20px;z-index: 10; display: flex; justify-content: center;">
<el-slider v-if="sliderValues.length>0" v-model="selecteTime" :format-tooltip="formatTooltip"
:min="0"
:max="sliderValues.length - 1"
:step="1"
:marks="sliderMarks"
show-stops size="large"
@change="handleTimeChange"
style="width: 80%;"
/>
</div>
</div>
</template>

4
business-css/frontend/src/views/component/scenario/index.vue
View File

@ -462,10 +462,10 @@ function changeShowResult(isShow:any){ // 切换显示结果模型
<el-dialog v-model="isShowResult" :close-on-click-modal="false"
:modal="false" draggable :before-close="handleResultClose" :title="title"
append-to-body width="calc(100% - 100px)" class="resultmodel-dialog-box">
<div style="display: flex; margin-bottom: 0px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;padding-top: 10px;">
<div style="display: flex; margin-bottom: 0px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;padding-top: 10px;padding-left: 10px;">
<div @click="changeShowResult(0)" class="adddevice_navigation_left" :class="{'adddevice_navigation_activeleft':isEchartsModel == 0}">图形化</div>
<div @click="changeShowResult(1)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel == 1}">列表</div>
<div @click="changeShowResult(2)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel == 1}">图形</div>
<div @click="changeShowResult(2)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel == 2}">图形</div>
</div>
<Viewx6 v-if="isShowResult && isEchartsModel == 0 " :projectId="projectInfo.projectId" :scenarioId="scenarioId"/>