修改图形化方法和功能

business-css/frontend/src/components/antvx6/changeDialogsettings.vue

@@ -0,0 +1,369 @@
+<script lang="ts">
+export default {
+  name: "变动设置-弹窗",
+};
+</script>
+
+<script setup lang="ts">
+import { onMounted, ref, nextTick } from "vue";
+import { ElForm, ElMessage, ElMessageBox } from "element-plus";
+import { topologyDevicesLsit } from '@/api/business/project';
+
+const emit = defineEmits([ 'closeChangeDialogsettings']);
+const formula = ref('')
+function getName(code:any) {
+  let tempInfo = {
+      name: '',
+      key: '',
+      type: ''
+  }
+  switch (code) {
+    case 'width':
+     return tempInfo = {
+        name: "宽度cm",
+        key: 'width',
+        type: 'device'
+      };
+      break; 
+    case 'outer_diameter':
+     return tempInfo = {
+        name: "外径cm",
+        key: 'outer_diameter',
+        type: 'device'
+      };
+      break; 
+    case 'height':
+     return tempInfo = {
+        name: "高度cm",
+        key: 'height',
+        type: 'device'
+      };
+      break; 
+    case 'length':
+     return tempInfo = {
+        name: "长度cm",
+        key: 'length',
+        type: 'device'
+      };
+      break;   
+    case 'diameter':
+     return tempInfo = {
+        name: "外径cm",
+        key: 'diameter',
+        type: 'device'
+      };
+      break;            
+    case 'volume':
+     return tempInfo = {
+        name: "体积（单位：L）",
+        key: 'volume',
+        type: 'device'
+      };
+      break; 
+    case 'flow_rate':
+     return tempInfo = {
+        name: "流量（单位：m3/h）",
+        key: 'flow_rate',
+        type: 'device'
+      };
+      break; 
+    case 'pulse_velocity':
+     return tempInfo = {
+        name: "脉冲速度（单位：Hz）",
+        key: 'pulse_velocity',
+        type: 'device'
+      };
+      break; 
+    case 'u_concentration':
+     return tempInfo = {
+        name: "铀浓度（g/L）",
+        key: 'u_concentration',
+        type: 'material'
+      };
+      break; 
+    case 'uo2_density':
+     return tempInfo = {
+        name: "氧化铀密度（g/cm3）",
+        key: 'uo2_density',
+        type: 'material'
+      };
+      break; 
+    case 'u_enrichment':
+     return tempInfo = {
+        name: "铀富集度（%）",
+        key: 'u_enrichment',
+        type: 'material'
+      };
+      break; 
+    case 'pu_concentration':
+     return tempInfo = {
+        name: "钚浓度（g/L）",
+        key: 'pu_concentration',
+        type: 'material'
+      };
+      break; 
+    case 'puo2_density':
+     return tempInfo = {
+        name: "氧化钚密度（g/cm3）",
+        key: 'puo2_density',
+        type: 'material'
+      };
+      break; 
+    case 'pu_isotope':  
+     return tempInfo = {
+        name: "钚同位素比例（PU-240占比）%",
+        key: 'pu_isotope',
+        type: 'material'
+      };
+      break; 
+    case 'hno3_acidity':
+     return tempInfo = {
+        name: "硝酸酸度（mol/L）",
+        key: 'hno3_acidity',
+        type: 'material'
+      };
+      break; 
+    case 'h2c2o4_concentration':
+     return tempInfo = {
+        name: "草酸浓度（mol/L）",
+        key: 'h2c2o4_concentration',
+        type: 'material'
+      };
+      break; 
+    case 'organic_ratio':
+     return tempInfo = {
+        name: "有机相比例%",
+        key: 'organic_ratio',
+        type: 'material'
+      };
+      break; 
+    case 'moisture_content':
+     return tempInfo = {
+        name: "含水率%",
+        key: 'moisture_content',
+        type: 'material'
+      };
+      break; 
+    default: 
+     return tempInfo = {
+        name: "",
+        key: '',
+        type: ''
+      };
+  } 
+    return tempInfo
+  }
+
+const props = defineProps({
+  projectInfo: {
+    required: false,
+    type: Object,
+    default: {}
+  },
+})
+const isAcitve = ref(-1);
+
+const attributeList:any = ref([]); // 属性列表
+
+
+const deviceList:any = ref([]);
+function gettableData() {
+  topologyDevicesLsit({
+    id: props.projectInfo.projectId
+  }).then((res:any) => {
+    if (res.code == 0) {
+      deviceList.value = res.data;
+    }
+  })
+}
+function handleClick(item:any, index:any){
+  attributeList.value = [];
+  if(item.deviceSize != "" && item.deviceSize != null){
+    let deviceSize = JSON.parse(item.deviceSize);
+    item = { ...deviceSize,...item}
+  }
+  for(let key in item){
+    if(getName(key).name != '' && item[key] != '' &&  item[key] != null){
+      attributeList.value.push({
+        name: '('+getName(key).name +')',
+        key: getName(key).key,
+        type: getName(key).type,
+        parentName : getName(key).type == 'device' ? '('+item.deviceName  +')' : '('+item.materialName +')',
+        parentId : getName(key).type == 'device' ? item.deviceId : item.materialId
+      })
+    }
+   
+  }
+
+
+  isAcitve.value = index;
+
+
+
+  // formulaInfo.value.correlation =  JSON.parse(JSON.stringify(item.deviceName))
+}
+
+function closeChangeDialogsettings(){
+  emit('closeChangeDialogsettings',{})
+}
+const formulaData:any = ref([])
+function selectedClick(item:any, index:any){
+
+  formulaData.value.push(item)
+  let tempData:any = []
+  formulaData.value.forEach((element:any) => {
+    if(element.parentName != null){
+       tempData.push(element.parentName)
+    }else{
+      tempData.push(element)
+    }
+    
+  });
+  formula.value = tempData.join('')
+    console.log(formulaData.value)
+}
+onMounted(() => {
+  
+gettableData();
+});
+;
+function selectedSymbolClick(name:any){
+  formulaData.value.push(name)
+
+  let tempData:any = []
+  formulaData.value.forEach((element:any) => {
+    if(element.parentName != null){
+       tempData.push(element.parentName)
+    }else{
+      tempData.push(element)
+    }
+    
+  });
+  formula.value = tempData.join('')
+}
+function delClick(index:any){
+  formulaData.value.pop()
+  let tempData:any = []
+  formulaData.value.forEach((element:any) => {
+    if(element.parentName != null){
+       tempData.push(element.parentName)
+    }else{
+      tempData.push(element)
+    }
+    
+  });
+  formula.value = tempData.join('')
+}
+function confirmClick(){
+   let deviceMaterialData:any = []
+   formulaData.value.forEach((element:any) => {
+      if(element.type != null){
+        deviceMaterialData.push(element)
+      }
+    
+  });
+   emit('closeChangeDialogsettings',{
+     formula: formula.value,
+     formulaData: formulaData.value,
+     deviceMaterialData: deviceMaterialData
+   })
+}
+</script>
+
+<template>
+  <div class="changeDialogsettings-box">
+     <div class="choiceMateria-left">
+        <div class="choiceMateria-left-title">设备属性列表</div>
+        <div style="height: calc(100% - 70px);overflow: auto;margin-top: 10px;">
+          <div v-for="(item, index) in deviceList" :key="index" class="choiceMateria-left-item"   :class="{'choiceMateria-item-active': index == isAcitve}"
+            @click="handleClick(item, index)">
+            {{ item.deviceName }}({{ item.materialName }}) 
+          </div>
+        </div>
+      </div>
+    <div class="choiceMateria-left">
+        <div class="choiceMateria-left-title">属性列表</div>
+        <div style="height: calc(100% - 70px);overflow: auto;margin-top: 10px;">
+          <div v-for="(item, index) in attributeList" :key="index" class="choiceMateria-left-item"
+            @click="selectedClick(item, index)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    <div>
+      <div class="calculator-box">
+        <div @click="selectedSymbolClick(7)">7</div>
+        <div @click="selectedSymbolClick(8)">8</div>
+        <div @click="selectedSymbolClick(9)">9</div>
+        <div @click="selectedSymbolClick('/')">/</div>
+      </div>
+     <div class="calculator-box">
+        <div @click="selectedSymbolClick(4)">4</div>
+        <div @click="selectedSymbolClick(5)">5</div>
+        <div @click="selectedSymbolClick(6)">6</div>
+        <div @click="selectedSymbolClick('*')">*</div>
+      </div>
+      <div class="calculator-box">
+        <div @click="selectedSymbolClick(1)">1</div>
+        <div @click="selectedSymbolClick(2)">2</div>
+        <div @click="selectedSymbolClick(3)">3</div>
+        <div @click="selectedSymbolClick(3)">-</div>
+      </div>
+      <div class="calculator-box">
+        <div style="width: 220px;" @click="selectedSymbolClick(0)">0</div>
+        <div @click="selectedSymbolClick('.')">.</div>
+        <div @click="selectedSymbolClick('+')">+</div>
+      </div>
+      <div class="formula-viewbox">
+        {{ formula }}
+      </div>
+      <el-button type="primary" @click="delClick">撤 回</el-button>
+      <el-button type="primary" @click="confirmClick">确 定</el-button> 
+       <!-- 
+     -->
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+  .changeDialogsettings-box{
+    display: flex; 
+  }
+  .choiceMateria-item-active{
+    background-color: #f5f8ff;
+    color: #266fff;
+  }
+  .calculator-box{
+    display: flex;
+    align-items: center;
+  }
+  .calculator-box div{
+    width: 100px;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px;
+    cursor: pointer;
+    font-size: 30px;
+  }
+  .calculator-box div:hover{
+    background-color: #f5f8ff;
+  }
+  .formula-viewbox{
+    width: 460px;
+    height: 80px;
+    line-height: 40px;
+    text-align: left;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 0 10px;
+    margin: 10px;
+    font-size: 14x;
+  }
+</style>
+
+
+

business-css/frontend/src/components/antvx6/changesettings.vue

@@ -9,7 +9,7 @@ import { onMounted, ref, nextTick } from "vue";
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
 import { searchDevicesPage } from "@/api/business/database/device";
 import { topologyDevicesLsit } from '@/api/business/project';
-
+import ChangeDialogsettings  from './changeDialogsettings.vue';
 const emit = defineEmits([ 'closeChangesettingsModel']);
 
 const props = defineProps({
@@ -202,8 +202,25 @@ function confirmTableClick(){ // 确认变动公式设置
   tableData.value[tableIndex.value].formula = formulaInfo.value.formula
   tableData.value[tableIndex.value].correlation = formulaInfo.value.correlation
   tableData.value[tableIndex.value].delay = formulaInfo.value.delay
+  tableData.value[tableIndex.value].formulaData = formulaInfo.value.formulaData
+  tableData.value[tableIndex.value].deviceMaterialData = formulaInfo.value.deviceMaterialData
   isDialogFormula.value = false
 }
+const isChangeDialogsettings:any = ref(false) // 变动公式设置弹窗
+
+function openChangeDialogsettings(){ // 打开变动公式值设置弹窗
+  isChangeDialogsettings.value = true
+}
+
+function dialogChangeDialogsettings(){ // 变动公式值设置弹窗
+  isChangeDialogsettings.value = false
+}
+function closeChangeDialogsettings(e:any){ // 变动公式值设置关闭
+    formulaInfo.value.formula = e.formula
+    formulaInfo.value.formulaData = e.formulaData
+    formulaInfo.value.deviceMaterialData = e.deviceMaterialData
+    isChangeDialogsettings.value = false
+}
 </script>
 
 <template>
@@ -277,7 +294,12 @@ function confirmTableClick(){ // 确认变动公式设置
               <div>变动公式</div>
             </div>
             <el-form-item label="值="  style="width: 100%;" label-width="80px">
-              <el-input v-model="formulaInfo.formula" style="width: 100%"></el-input>
+              <div  class="valuebox-input">
+                {{ formulaInfo.formula }}
+              </div>
+               <el-button type="primary" @click="openChangeDialogsettings">设置</el-button>
+              <!-- <el-input v-model="formulaInfo.formula" style="width: 100%" disabled="true" ></el-input> -->
+
             </el-form-item>
 
             <div style="display: flex;align-items: center;padding: 20px 0;">
@@ -302,6 +324,14 @@ function confirmTableClick(){ // 确认变动公式设置
 
       </div>
     </el-dialog>
+    
+ <el-dialog v-model="isChangeDialogsettings" :close-on-click-modal="false" :modal="false" draggable 
+        :before-close="dialogChangeDialogsettings" title="变动公式值设置"  append-to-body width="1280px" class="materialmodel-dialog-box">
+        <ChangeDialogsettings v-if="isChangeDialogsettings" :projectInfo="projectInfo" 
+        @closeChangeDialogsettings="closeChangeDialogsettings" />
+  </el-dialog>
+
+    
   </div>
 
 </template>
@@ -364,4 +394,16 @@ function confirmTableClick(){ // 确认变动公式设置
 .materialmodel-dialog-box.el-dialog .el-dialog__body{
   padding: 0 !important;
 }
+.valuebox-input{
+  width:calc(100% - 70px) ;
+  height: 40px;
+  line-height: 40px;
+  margin-right: 10px;
+  background: #f5f7fa;
+  /* border: 1px solid rgba(240, 240, 240, 1); */
+  background-color: #ffffff;
+  box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
+  border-radius: 4px;
+  cursor: pointer;
+}
 </style>

business-css/frontend/src/components/antvx6/echartsModel.vue

@@ -46,6 +46,9 @@ function getName(code:any) {
     case 'width':
      return name = "宽度cm";
       break; 
+    case 'outer_diameter':
+     return name = "外径cm";
+      break;   
     case 'height':
      return name = "高度cm";
       break; 
@@ -119,7 +122,7 @@ const option = ref<any>({
     feature: {
       saveAsImage: {
           title: '导出图片', // 自定义hover提示文字
-          name: '导出图片', // 自定义导出文件名
+          name: '图片', // 自定义导出文件名
           pixelRatio: 2 // 提高导出图片清晰度（可选）
         }
     }

business-css/frontend/src/components/antvx6/viewx6.vue

@@ -28,11 +28,16 @@ const route = useRoute();
 const router = useRouter()
 const emit = defineEmits([ 'closeAntvx6']);
 const props = defineProps({
-  projectInfo: {
+  projectId: {
     required: false,
-    type: Object,
+    type: String,
-    default: {}
+    default: ''
   },
+  scenarioId: {
+    required: false,
+    type: String,
+    default: ''
+  }
 })
 const deviceTypetype:any = ref('') // 设备类型
 const isAdddevice = ref(false) // 是否添加设备
@@ -173,6 +178,9 @@ function getName(code:any) {
     case 'width':
      return name = "宽度cm";
       break; 
+    case 'outer_diameter':
+     return name = "外径cm";
+      break;   
     case 'height':
      return name = "高度cm";
       break; 
@@ -291,7 +299,8 @@ function groupByDeviceId(data:any) { // 按设备id分组
 }
 
 onMounted(() => {
-  scenarioId.value = route.query.scenarioId
+
+  scenarioId.value = props.scenarioId
   // #region 初始化画布 
   graph = new Graph({
     container: document.getElementById('graph-container') as HTMLElement,
@@ -582,7 +591,7 @@ onMounted(() => {
 
 
 
-  projectsById({projectId:route.query.projectId}).then((res:any) => {
+  projectsById({projectId:props.projectId}).then((res:any) => {
     if(res.topology != null && res.topology != ''){
       projectInfo.value = res
       if (!graph || !projectInfo.value || !projectInfo.value.topology) return;
@@ -676,14 +685,14 @@ function isDisplayClick(){
 </script>
  
 <template>
-  <div class="app-layout" @click="isMenuShow = false">
+  <div class="antvx6-layout" @click="isMenuShow = false">
     <div class="antvx6-header">
       <div class="header-left-box">
        <!-- <div class="return-icon-box" @click="closeAntvx6"  title="返回工作台">
           <img src="@/assets/x6/return.png" alt="图标" style="cursor: pointer;">
         </div>
         -->
-        <div class="project-name">{{ projectInfo.name }}</div>
+        <!-- <div class="project-name">{{ projectInfo.name }}</div> -->
         <!-- <div class="return-icon-box" @click="analysisAdd"  title="新增模拟分析">
           <img src="@/assets/x6/add.png" alt="图标" style="cursor: pointer;">
         </div>
@@ -735,14 +744,14 @@ function isDisplayClick(){
   box-sizing: border-box;
 }
 
-.app-layout {
+.antvx6-layout{
-  position: fixed;
+  /* position: relative;
   z-index: 10;
   display: flex;
-  flex-direction: column;
+  flex-direction: column; */
-  width: 100vw;
+  width:100%;
-  height: 100vh;
+  height: calc(100vh - 150px);
-  font-family: 'Segoe UI', sans-serif;
+  /* font-family: 'Segoe UI', sans-serif; */
 }
 
 .toolbar {
@@ -851,13 +860,13 @@ function isDisplayClick(){
 }
 
 /* Graph Container Styles */
-.graph-container {
+#graph-container {
   flex: 1;
   position: relative;
   background-color: #fafafa;
   overflow: hidden;
-  width: 100%;
+  width: 100% !important;
-  height: 100%;
+  height: calc(100% - 60px) !important;
 }
 
 /* Drag and drop visual feedback */
@@ -927,6 +936,7 @@ function isDisplayClick(){
   font-size: 16px;
   color: #333333;
   margin-right: 10px;
+  margin-left: 10px;
 }
 
 .antvx6-header .operation-icon-box {

business-css/frontend/src/views/component/scenario/createscenario.vue

@@ -156,7 +156,7 @@ onMounted(() => {
       </div>
       <div style="text-align: center;">
         <el-button v-if="stepsActive == 0" type="primary" @click="confirmClick(infoForm)">下一步</el-button>
-        <el-button v-else type="primary" @click="submitClick">下一步</el-button> 
+        <el-button v-else type="primary" @click="submitClick">确定</el-button> 
       </div>
       
     </el-dialog>

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

@@ -18,6 +18,8 @@ import { eventsBatchSave } from '@/api/business/event';
 import { topologyDevicesLsit } from '@/api/business/project';
 import TableModels from '@/components/antvx6/tableModel.vue';
 import EchartsModels from '@/components/antvx6/echartsModel.vue';
+import Viewx6 from '@/components/antvx6/viewx6.vue';
+
 const webUrl = import.meta.env.VITE_APP_BASE_HTTP; // 基础路径
 const algorithmTypeData: any = ref([]); // 算法类型数据
 const stepsActive = ref(0); // 步骤导航栏当前激活的步骤索引
@@ -241,7 +243,8 @@ function confirmationAnalysis(row: any) {
               });
               gettableData();
               setTimeout(() => {
-                window.open(webUrl + '/#/viewanalysis?projectId='+ row.projectId +'&scenarioId='+ row.scenarioId, '_blank');
+                resultClick(row)
+                // window.open(webUrl + '/#/viewanalysis?projectId='+ row.projectId +'&scenarioId='+ row.scenarioId, '_blank');
               }, 1000);
 
             }else{
@@ -299,6 +302,7 @@ function submitConditionClick(){
 }
 
 function resultClick(row:any){
+  title.value = props.projectInfo.name + ' - ' + props.projectInfo.createdAt + ' - ' + row.name
   isAcitve.value = 0
   scenarioId.value = row.scenarioId,
   getMenuData()
@@ -332,9 +336,9 @@ function handleClick(item:any, index:any){
 function handleResultClose(){ // 关闭结果模型
   isShowResult.value = false;
 }
-const isEchartsModel = ref<boolean>(false) // 是否显示echarts模型
+const isEchartsModel = ref<any>(0) // 是否显示echarts模型
 
-function changeShowResult(isShow:boolean){ // 切换显示结果模型
+function changeShowResult(isShow:any){ // 切换显示结果模型
   isEchartsModel.value = isShow
   let tempId = deviceId.value
   deviceId.value = ''
@@ -458,7 +462,14 @@ function changeShowResult(isShow:boolean){ // 切换显示结果模型
     <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;">
+       <div style="display: flex; margin-bottom: 0px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;padding-top: 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>
+
+      <Viewx6  v-if="isShowResult && isEchartsModel == 0 " :projectId="projectInfo.projectId" :scenarioId="scenarioId"/>
+      <div style="display: flex;" v-if="isEchartsModel == 1 || isEchartsModel == 2">
         <div class="choiceMateria-left">
           <div class="choiceMateria-left-title">设备列表</div>
           <div style="height: calc(100% - 70px);overflow: auto;margin-top: 10px;">
@@ -469,16 +480,10 @@ function changeShowResult(isShow:boolean){ // 切换显示结果模型
             </div>
           </div>
         </div>
-        <div style="padding-left: 45px;padding-top: 40px;  width: calc(100% - 290px);    height: calc(100vh - 100px);">
+        <div style="padding-left: 45px;padding-top: 20px;  width: calc(100% - 290px);    height: calc(100vh - 150px);">
-          <div style="display: flex; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5;padding-bottom: 5px;">
+          <TableModels  v-if="isShowResult && isEchartsModel == 1 && deviceId !=''" :deviceId="deviceId" :scenarioId="scenarioId"/>
-            <div @click="changeShowResult(false)" class="adddevice_navigation_left" :class="{'adddevice_navigation_activeleft':!isEchartsModel}">列表</div>
+          <EchartsModels  v-if="isShowResult && isEchartsModel == 2 && deviceId !=''" :deviceId="deviceId" :scenarioId="scenarioId"/>
-            <div @click="changeShowResult(true)" class="adddevice_navigation_right" :class="{'adddevice_navigation_activeright':isEchartsModel}">图形</div>
         </div>
-
-          <TableModels  v-if="isShowResult && isEchartsModel == false && deviceId !=''" :deviceId="deviceId" :scenarioId="scenarioId"/>
-          <EchartsModels  v-if="isShowResult && isEchartsModel == true && deviceId !=''" :deviceId="deviceId" :scenarioId="scenarioId"/>
-        </div>
-
       </div>
       
     </el-dialog>
@@ -740,4 +745,8 @@ function changeShowResult(isShow:boolean){ // 切换显示结果模型
 .resultmodel-dialog-box.el-dialog .el-dialog__body{
   padding: 0 !important;
 }
+
+.resultmodel-dialog-box.el-dialog{
+    transform: translate(0) !important;
+}
 </style>