分析设计添加新增模拟分析历史模拟分析

business-css/frontend/src/components/Hamburger/index.vue

@@ -2,7 +2,7 @@
   <div
     @click="toggleClick"
     class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] text-center fixed bottom-2 "
-    style="z-index:1005;display: flex;display: -webkit-flex; justify-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-items: center;"
+    style="z-index:10;display: flex;display: -webkit-flex; justify-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-items: center;"
     :style="appStore.sidebar.opened?'left:80px': 'left:2px'"
   >
   <img v-if="isActive" src="@/assets/MenuIcon/dh_sq.png" alt="">

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

@@ -16,7 +16,8 @@ import {
 // @ts-ignore
 import insertCss from 'insert-css'
 import { updateProjects} from "@/api/business/project";
-
+import Createscenario from '@/views/component/scenario/createscenario.vue'
+import ScenarioModel from '@/views/component/scenario/index.vue'
 import img1 from '@/assets/x6/1.png'
 import img2 from '@/assets/x6/2.png'
 import img3 from '@/assets/x6/3.png'
@@ -39,7 +40,8 @@ const props = defineProps({
     default: {}
   },
 })
-const projectInfo:any = ref(props.projectInfo)
+const projectInfo:any = ref(props.projectInfo) // 项目信息
+const isScenario = ref(false) //是否展示历史模拟场景
 const isDisplay = ref(true) // 是否显示
 // 为了协助代码演示
 let graph: Graph
@@ -810,6 +812,20 @@ function bigClick(){
 function smallClick(){
   graph.zoom(-0.1)
 }
+function analysisAdd(){
+   dialogVisible.value = true;
+}
+const dialogVisible = ref(false)
+function closeCreatescenario(){ // 关闭新增模拟分析弹窗
+  dialogVisible.value = false;
+}
+function simulationClick() { // 打开模拟分析
+  isScenario.value = true;
+}
+//取消按钮
+function handleClose() {
+  isScenario.value = false;
+}
 </script>
  
 <template>
@@ -834,10 +850,10 @@ function smallClick(){
           <img src="@/assets/x6/return.png" alt="图标" title="返回工作台" style="cursor: pointer;">
         </div>
         <div class="project-name">{{ projectInfo.name }}</div>
-        <div class="return-icon-box">
+        <div class="return-icon-box" @click="analysisAdd">
           <img src="@/assets/x6/add.png" alt="图标" title="新增模拟分析" style="cursor: pointer;">
         </div>
-        <div class="return-icon-box">
+        <div class="return-icon-box" @click="simulationClick">
           <img src="@/assets/x6/history.png" alt="图标" title="历史模拟分析" style="cursor: pointer;">
         </div>
       </div>
@@ -871,8 +887,7 @@ function smallClick(){
       <div class="header-left-box"></div>
     </div>
     <div id="container" style="position: relative;">
-        <div class="context-menu" v-if="isMenuShow"
+      <div class="context-menu" v-if="isMenuShow" :style="{left: left +'px', top: top+'px'}">
-    :style="{left: left +'px', top: top+'px'}">
           <img src="@/assets/x6/info.png" alt="图标" title="设备信息" style="cursor: pointer;">
           <img src="@/assets/x6/material.png" alt="图标" title="物料信息"  style="cursor: pointer;">
           <img src="@/assets/x6/change.png" alt="图标" title="变动设置"  style="cursor: pointer;">
@@ -881,7 +896,12 @@ function smallClick(){
           @click="deleteNode">
       </div>
     </div>
-  
+    <Createscenario v-if="dialogVisible" :projectInfo="projectInfo" @closeCreatescenario ="closeCreatescenario"/>
+    <el-dialog v-model="isScenario" :close-on-click-modal="false"
+      :modal="false" draggable :before-close="handleClose" title="历史模拟分析"
+        append-to-body width="1142px">
+      <ScenarioModel v-if="isScenario"  :projectInfo="projectInfo" ref="Scenario" />
+    </el-dialog>
   </div>
 </template>
  
@@ -1025,7 +1045,7 @@ function smallClick(){
 
 .context-menu {
   position: absolute;
-  z-index: 9999;
+  z-index: 100;
   background-color: #fff;
   border: 1px solid #dfe3e8;
   border-radius: 4px;

business-css/frontend/src/styles/sidebar.scss

@@ -21,7 +21,7 @@ svg {
     top: 60px;
     bottom: 0;
     left: 0;
-    z-index: 98;
+    z-index: 10;
     overflow: hidden;
 
     // reset element-ui css

business-css/frontend/src/views/business/project/index.vue

@@ -277,7 +277,7 @@ function closeAntvx6() {
       <ScenarioModel v-if="isScenario"  :projectInfo="info" ref="Scenario" />
     </el-dialog>
 
-    <div v-if="isShowAntvx6" style="position: fixed;top: 0px;left: 10px; width: 100vw;height: 100vh;background-color: #fff;z-index: 9999;">
+    <div v-if="isShowAntvx6" style="position: fixed;top: 0px;left: 10px; width: 100vw;height: 100vh;background-color: #fff;z-index: 100;">
       <Antvx6 ref="antvx6" v-if="isShowAntvx6" :projectInfo="info"   @closeAntvx6="closeAntvx6"/>
     </div>
   </div>

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

@@ -0,0 +1,187 @@
+<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 { getDictItemById } from '@/api/dict';
+import { eventsBatchSave } from '@/api/business/event';
+import ConditionModel from '@/views/component/scenario/condition.vue'
+import { addScenarios,updateScenarios} from "@/api/business/scenario";
+
+const emit = defineEmits([ 'closeCreatescenario']);
+const props = defineProps({ // 接收父组件传递的项目信息
+  projectInfo: {
+    required: true,
+    type: Object,
+    default: {}
+  }
+});
+const isSwitch = ref(false); // 事故情景id
+const infoForm = ref();
+const scenarioId = ref(""); // 事故情景id
+const algorithmTypeData: any = ref([]); // 算法类型数据
+const dialogVisible = ref(true);
+const stepsActive = ref(0); // 步骤导航栏当前激活的步骤索引
+const info: any = ref({
+  name: "",
+  code: "",
+  description: "",
+});
+const rules = ref({ // 
+  name: [{ required: true, message: "请输入事故情景名称", trigger: "blur" }],
+  algorithmType: [{ required: true, message: "请选择算法类型", trigger: "change" }],
+});
+function handleScenarioClose(){
+  emit("closeCreatescenario",false)
+
+}
+const getAlgorithmType = async () => {
+  try {
+    let params = {
+      dictId: '595502b91e7741b5033b53622d8731a3',
+      size:99,
+      current:1
+    }
+    const result:any = await getDictItemById(params);
+    if (result.code == '0') {
+      algorithmTypeData.value = result.data.records
+    }
+  } catch (error) {
+  }
+}
+//新建事故情景-确认按钮/修改按钮
+function confirmClick(formEl: any) {
+  console.log(info.value)
+  formEl.validate((valid: any) => {
+    if (valid) {
+
+      if (!info.value.scenarioId) {
+        const params = {
+          projectId: props.projectInfo.projectId,
+          name: info.value.name,
+          algorithmType: info.value.algorithmType,
+          description: info.value.description,
+        };
+        if(isSwitch.value == true){
+          return ;
+        }
+        isSwitch.value = true
+        addScenarios(params).then((res:any) => {
+          isSwitch.value = false;
+          if(res && res.code == 0) {
+            scenarioId.value = res.scenarioId;
+            ElMessage({
+              type: "success",
+              message: "新增成功",
+            });
+            stepsActive.value = 1;
+          } else {
+            ElMessage({
+              type: "error",
+              message: "新增失败",
+            });
+          }
+        }).catch(() => {
+          isSwitch.value = false;
+        })
+      } else if (info.value.scenarioId) {
+        const params = {
+          scenarioId: info.value.scenarioId,
+          projectId: info.value.projectId,
+          name: info.value.name,
+          algorithmType: info.value.algorithmType,
+          description: info.value.description,
+        };
+        updateScenarios(params).then((res) => {
+
+        });
+      } else {
+        return false;
+      }
+    }
+  });
+}
+const conditionModel = ref()
+function submitClick(){
+  const tempData = conditionModel.value?.submitClick()
+  let data:any = []
+  tempData.forEach((item: any) => {
+    data.push({
+      triggerTime:'0',
+      attrChanges:JSON.stringify(item) ,
+      scenarioId: scenarioId.value
+    })
+  })
+
+  eventsBatchSave(data).then((res:any) => {
+    if (res.code == '0') {
+      emit("closeCreatescenario",false)
+      ElMessage({
+        type: "success", 
+        message: "新增失败",
+      });
+    }
+  })
+
+  
+}
+onMounted(() => {
+  getAlgorithmType()
+});
+</script>
+<template>
+  <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
+    :modal="false" draggable :before-close="handleScenarioClose" title="新增事故情景"
+      append-to-body width="1000px">
+      <div class="scenario-setting-box">
+        <el-steps style="width: 500px;margin:0 auto " :active="stepsActive" align-center>
+          <el-step title="事故情景设置"/>
+          <el-step title="初始条件设置" />
+          <!-- <el-step title="确认模拟" /> -->
+        </el-steps>
+      </div>
+      <div class="scenario-setting-bottombox">
+        <el-form ref="infoForm" :model="info" :rules="rules" label-width="140px" style="width:600px" 
+        v-if="stepsActive == 0">
+            <el-form-item label="事故情景名称：" prop="name">
+              <el-input v-model="info.name" style="width: 100%" placeholder="输入事故情景名称" ></el-input>
+            </el-form-item>
+            <el-form-item label="算法类型：" prop="algorithmType">
+              <el-select v-model="info.algorithmType" placeholder="请选择" style="width:100%;" clearable>
+                <el-option v-for="item in algorithmTypeData" :key="item.id" :label="item.dictName" :value="item.itemCode"  />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="事故情景描述：">
+              <el-input type="textarea" v-model="info.description"  :rows="6" style="width: 100%" placeholder="请输入事故情景描述"></el-input>
+            </el-form-item>
+          </el-form>
+          <ConditionModel v-if="stepsActive == 1" ref="conditionModel" :projectInfo="projectInfo" :scenarioId="scenarioId" />
+      </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> 
+      </div>
+      
+    </el-dialog>
+</template>
+<style>
+.scenario-setting-bottombox{
+  width: 900px;
+  height: calc(100vh - 300px);
+  background: inherit;
+  background-color: rgba(255, 255, 255, 1);
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+</style>

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

@@ -10,7 +10,8 @@ import { ElForm, ElMessage, ElMessageBox } from "element-plus";
 import { searchScenariosLsit,addScenarios,updateScenarios,deleteScenarios,deleteBatchScenarios} from "@/api/business/scenario";
 import Page from '@/components/Pagination/page.vue'
 import { getDictItemById } from '@/api/dict';
-import ConditionModel from '@/views/component/scenario/condition.vue'
+// import ConditionModel from '@/views/component/scenario/condition.vue'
+import Createscenario from '@/views/component/scenario/createscenario.vue'
 import { eventsBatchSave } from '@/api/business/event';
 const algorithmTypeData: any = ref([]); // 算法类型数据
 const stepsActive = ref(0); // 步骤导航栏当前激活的步骤索引
@@ -263,6 +264,10 @@ onMounted(() => {
   getAlgorithmType()
   gettableData();
 });
+function closeCreatescenario(){
+  dialogVisible.value = false;
+  gettableData();
+}
 </script>
 
 <template>
@@ -324,15 +329,14 @@ onMounted(() => {
       <Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="gettableData()" ></Page>
 
     </div>
-
+    <Createscenario v-if="dialogVisible" :projectInfo="projectInfo" @closeCreatescenario ="closeCreatescenario"/>
-    <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
+    <!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
     :modal="false" draggable :before-close="handleScenarioClose" title="新增事故情景"
       append-to-body width="1000px">
       <div class="scenario-setting-box">
         <el-steps style="width: 500px;margin:0 auto " :active="stepsActive" align-center>
           <el-step title="事故情景设置"/>
           <el-step title="初始条件设置" />
-          <!-- <el-step title="确认模拟" /> -->
         </el-steps>
       </div>
       <div class="scenario-setting-bottombox">
@@ -354,10 +358,10 @@ 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">下一步2</el-button> 
+        <el-button v-else type="primary" @click="submitClick">下一步</el-button> 
       </div>
       
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 

framework/frontend/src/components/Hamburger/index.vue

@@ -2,7 +2,7 @@
   <div
     @click="toggleClick"
     class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px] text-center fixed bottom-2 "
-    style="z-index:1005;display: flex;display: -webkit-flex; justify-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-items: center;"
+    style="z-index:10;display: flex;display: -webkit-flex; justify-content: center; align-items: center; -webkit-justify-content: center; -webkit-align-items: center;"
     :style="appStore.sidebar.opened?'left:80px': 'left:2px'"
   >
   <img v-if="isActive" src="@/assets/MenuIcon/dh_sq.png" alt="">

framework/frontend/src/styles/sidebar.scss

@@ -21,7 +21,7 @@ svg {
     top: 60px;
     bottom: 0;
     left: 0;
-    z-index: 98;
+    z-index: 10;
     overflow: hidden;
 
     // reset element-ui css