From 0ec2f3ea1a371dd7008ad1f964a27b9f7fe388db Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Fri, 26 Dec 2025 17:27:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9C=BA=E6=99=AF=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/business/project/index.ts         |  14 +-
 .../src/api/business/scenario/index.ts        |  50 ++++
 .../src/views/business/project/index.vue      |  11 +-
 .../src/views/component/scenario/index.vue    | 219 ++++++++++++++----
 4 files changed, 248 insertions(+), 46 deletions(-)
 create mode 100644 business-css/frontend/src/api/business/scenario/index.ts

diff --git a/business-css/frontend/src/api/business/project/index.ts b/business-css/frontend/src/api/business/project/index.ts
index be81232..08c1f34 100644
--- a/business-css/frontend/src/api/business/project/index.ts
+++ b/business-css/frontend/src/api/business/project/index.ts
@@ -15,7 +15,7 @@ export function searchProjectsLsit(queryParams:any){
 //新增项目
 export function addProjects(data:any){
   return request({
-    url:'/projects' ,
+    url:'/projects/createAndReturn' ,
     method: 'Post',
     data: data
   });
@@ -48,3 +48,15 @@ export function deleteBatchProjects (queryParams:any){
     data: queryParams
   });
 }
+
+
+
+export function topologyDevicesLsit(queryParams:any){
+  return request({
+    url: `/projects/search/${queryParams.id}/topology/devices` ,
+    method: 'get',
+    params:queryParams
+  });
+}
+
+
diff --git a/business-css/frontend/src/api/business/scenario/index.ts b/business-css/frontend/src/api/business/scenario/index.ts
new file mode 100644
index 0000000..ceffd06
--- /dev/null
+++ b/business-css/frontend/src/api/business/scenario/index.ts
@@ -0,0 +1,50 @@
+import request from '@/utils/request';
+
+//获取所有项目列表
+export function searchScenariosLsit(queryParams:any){
+  return request({
+    url: '/scenarios/by-project' ,
+    method: 'get',
+    params:queryParams
+  });
+}
+
+
+
+
+//新增项目
+export function addScenarios(data:any){
+  return request({
+    url:'/scenarios' ,
+    method: 'Post',
+    data: data
+  });
+}
+
+
+//更新项目信息
+export function updateScenarios(queryParams:any){
+  return request({
+    url:'/scenarios' ,
+    method: 'PUT',
+    data: queryParams
+  });
+}
+
+
+//单个删除项目
+export function deleteScenarios(queryParams:any){
+  return request({
+    url:'/scenarios/'+queryParams.id ,
+    method: 'delete'
+    // params: queryParams
+  });
+}
+//多选删除项目
+export function deleteBatchScenarios(queryParams:any){
+  return request({
+    url:'/scenarios',
+    method: 'delete',
+    data: queryParams
+  });
+}
diff --git a/business-css/frontend/src/views/business/project/index.vue b/business-css/frontend/src/views/business/project/index.vue
index af0168b..7f0291e 100644
--- a/business-css/frontend/src/views/business/project/index.vue
+++ b/business-css/frontend/src/views/business/project/index.vue
@@ -9,8 +9,7 @@ import { onMounted, ref, nextTick } from "vue";
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
 import { searchProjectsLsit,addProjects,updateProjects,deleteProjects,deleteBatchProjects} from "@/api/business/project";
 import Page from '@/components/Pagination/page.vue'
-import Scenario from '@/views/component/scenario/index.vue'
-
+import ScenarioModel from '@/views/component/scenario/index.vue'
 const isScenario = ref(false) //是否展示历史模拟场景
 // 搜索框
 const queryParams = ref({
@@ -100,9 +99,10 @@ function confirmClick(formEl: any) {
   });
 }
 
-//新建角色-取消按钮
+//取消按钮
 function handleClose() {
   dialogVisible.value = false;
+  isScenario.value = false;
   if (infoForm.value != null) infoForm.value.resetFields();
 }
 //新建项目
@@ -263,9 +263,8 @@ onMounted(() => {
 
     <el-dialog v-model="isScenario" :close-on-click-modal="false"
       :modal="false" draggable :before-close="handleClose" title="历史模拟分析"
-        append-to-body width="1142px" height="600px">
-      <Scenario v-if="isScenario" 
-       :project="info" ref="Scenario" @close="dialogVisible = false" />
+        append-to-body width="1142px">
+      <ScenarioModel v-if="isScenario"  :projectInfo="info" ref="Scenario" />
     </el-dialog>
 
    
diff --git a/business-css/frontend/src/views/component/scenario/index.vue b/business-css/frontend/src/views/component/scenario/index.vue
index 00eed13..1773b04 100644
--- a/business-css/frontend/src/views/component/scenario/index.vue
+++ b/business-css/frontend/src/views/component/scenario/index.vue
@@ -7,9 +7,18 @@ export default {
 <script setup lang="ts">
 import { onMounted, ref, nextTick } from "vue";
 import { ElForm, ElMessage, ElMessageBox } from "element-plus";
-import { searchProjectsLsit,addProjects,updateProjects,deleteProjects,deleteBatchProjects} from "@/api/business/project";
+import { searchScenariosLsit,addScenarios,updateScenarios,deleteScenarios,deleteBatchScenarios} from "@/api/business/scenario";
 import Page from '@/components/Pagination/page.vue'
-
+import { getDictItemById } from '@/api/dict';
+const algorithmTypeData: any = ref([]); // 算法类型数据
+const stepsActive = ref(0); // 步骤导航栏当前激活的步骤索引
+const props = defineProps({ // 接收父组件传递的项目信息
+  projectInfo: {
+    required: true,
+    type: Object,
+    default: {}
+  }
+});
 
 // 搜索框
 const queryParams = ref({
@@ -27,12 +36,13 @@ const multipleSelection = ref([]);
 const loading = ref(false)
 function gettableData() {
   let params = {
+    projectId: props.projectInfo.projectId,
     name: input.value,
     pageNum: queryParams.value.current,
     pageSize: queryParams.value.size,
   };
   loading.value = true;
-  searchProjectsLsit(params).then((result:any) => {
+  searchScenariosLsit(params).then((result:any) => {
     tableData.value = result.records;
     total.value = result.total;
     loading.value = false;
@@ -64,6 +74,7 @@ function addClick() {
     code: "",
     description: "",
   };
+  stepsActive.value = 0;
   dialogVisible.value = true;
 }
 //新建事故情景-确认按钮/修改按钮
@@ -72,23 +83,37 @@ function confirmClick(formEl: any) {
   formEl.validate((valid: any) => {
     if (valid) {
 
-      if (!info.value.projectId) {
+      if (!info.value.scenarioId) {
         const params = {
+          projectId: props.projectInfo.projectId,
           name: info.value.name,
-          code: info.value.code,
+          algorithmType: info.value.algorithmType,
           description: info.value.description,
         };
-        addProjects(params).then((res) => {
-          gettableData();
-          dialogVisible.value = false;
+        addScenarios(params).then((res:any) => {
+          if(res == true) {
+            gettableData();
+            ElMessage({
+              type: "success",
+              message: "新增成功",
+            });
+            stepsActive.value = 1;
+          } else {
+            ElMessage({
+              type: "error",
+              message: "新增失败",
+            });
+          }
         });
-      } else if (info.value.projectId) {
+      } 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,
-          projectId: info.value.projectId,          
         };
-        updateProjects(params).then((res) => {
+        updateScenarios(params).then((res) => {
           gettableData();
           dialogVisible.value = false;
         });
@@ -104,10 +129,16 @@ function handleClose() {
   dialogVisible.value = false;
   if (infoForm.value != null) infoForm.value.resetFields();
 }
+function handleScenarioClose(){
+  dialogVisible.value = false;
+  gettableData();
+  if (infoForm.value != null) infoForm.value.resetFields();
+
+}
 //新建事故情景
 const rules = ref({
   name: [{ required: true, message: "请输入事故情景名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入事故情景编码", trigger: "blur" }],
+  algorithmType: [{ required: true, message: "请选择算法类型", trigger: "change" }],
 });
 //修改事故情景
 function editClick(row: any) {
@@ -125,9 +156,9 @@ function delAloneClick(row: any) {
   })
     .then(() => {
       let params = {
-        id: row.projectId,
+        id: row.scenarioId,
       };
-      deleteProjects(params).then(() => {
+      deleteScenarios(params).then(() => {
         gettableData();
         ElMessage({
           type: "success",
@@ -147,12 +178,12 @@ function delClick() {
   }).then(() => {
     let id = [] as any[];
     multipleSelection.value.forEach((item: any) => {
-      id.push(item.projectId)
+      id.push(item.scenarioId)
     })
     let params = {
       ids: id,
     };
-    deleteBatchProjects(params.ids).then(() => {
+    deleteBatchScenarios(params.ids).then(() => {
       gettableData();
       ElMessage({
         message: "删除成功",
@@ -177,8 +208,22 @@ function dateFormat(row: any) {
     return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
   }
 }
-
+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) {
+  }
+}
 onMounted(() => {
+  getAlgorithmType()
   gettableData();
 });
 </script>
@@ -203,8 +248,8 @@ onMounted(() => {
         @selection-change="handleSelectionChange"
         :header-cell-style="{ background: 'rgb(250 250 250)', color: '#383838', height: '50px' }">
         <el-table-column type="selection" width="50" align="center"></el-table-column>
-        <el-table-column prop="name" label="事故情景名称" width="180"></el-table-column>
-        <el-table-column prop="name" label="算法模型" width="180"></el-table-column>
+        <el-table-column prop="name" label="事故情景名称" min-width="180"></el-table-column>
+        <el-table-column prop="name" label="算法模型" min-width="180"></el-table-column>
 
          <el-table-column prop="updatedAt" label="模拟时间" width="200">
           <template #default="scope">
@@ -213,9 +258,11 @@ onMounted(() => {
           </template>
         </el-table-column>
        
-        <el-table-column prop="updatedAt" label="状态" width="200">
+        <el-table-column prop="updatedAt" label="状态" width="100">
           <template #default="scope">
-            {{ dateFormat(scope.row.updatedAt) }}
+            <span v-if="scope.row.status == 0" style="color: #0099FF;">初始创建</span>
+            <span v-else-if="scope.row.status == 1" style="color: #FF9900;">进行中</span>
+            <span v-else style="color: #009933;">已完成</span>
           </template>
         </el-table-column>
         <el-table-column fixed="right" label="操作" width="190">
@@ -242,24 +289,39 @@ onMounted(() => {
     </div>
 
     <el-dialog v-model="dialogVisible" :close-on-click-modal="false"
-    :modal="false" draggable :before-close="handleClose" :title="title"
-      append-to-body width="620px" height="600px">
-      <el-form ref="infoForm" :model="info" :rules="rules" label-width="100px">
-        <el-form-item label="事故情景编号：" prop="code">
-          <el-input v-model="info.code" style="width: 100%" placeholder="输入事故情景编码"></el-input>
-        </el-form-item>
-        <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="事故情景描述：">
-          <el-input type="textarea" v-model="info.description"  :rows="6" style="width: 100%" placeholder="请输入事故情景描述"></el-input>
-        </el-form-item>
-        <span class="dialog-footer"
-          style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
-          <el-button @click="handleClose">取 消</el-button>
-          <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
-        </span>
-      </el-form>
+    :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>
+            <!-- <span class="dialog-footer"
+              style="display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end;">
+              <el-button @click="handleClose">取 消</el-button>
+              <el-button type="primary" @click="confirmClick(infoForm)">确 定</el-button>
+            </span> -->
+          </el-form>
+      </div>
+      <div style="text-align: center;">
+        <el-button type="primary" @click="confirmClick(infoForm)">下一步</el-button>
+      </div>
+      
     </el-dialog>
   </div>
 </template>
@@ -345,6 +407,10 @@ onMounted(() => {
 .el-dialog .el-input{
  --el-input-inner-height: 38px
 }
+.el-dialog .el-select__wrapper{
+ height: 40px
+}
+
 .scenario-search-box .el-button{
   height: 36px !important;
 }
@@ -352,4 +418,79 @@ onMounted(() => {
   height: 40px;
 }
 
+
+.scenario-setting-box{
+  width: 900px;
+  height: 100px;
+  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: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.scenario-setting-box .el-step__icon.is-text{
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  background-color: #c9c9c9 ;
+  border-color: #c9c9c9 ;
+  color: #fff;
+
+}
+
+.scenario-setting-box .is-finish .el-step__icon.is-text{
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  background-color: #266fff ;
+  border-color: #266fff ;
+  color: #fff;
+}
+
+.scenario-setting-box .is-process .el-step__icon.is-text{
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  background-color: #266fff ;
+  border-color: #266fff ;
+  color: #fff;
+}
+.scenario-setting-box .el-step__title{
+  font-family: 'Arial Normal', 'Arial', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  letter-spacing: normal;
+}
+.scenario-setting-box .el-step__title.is-finish{
+  color: #266fff ;
+}
+.scenario-setting-box .el-step__title.is-process{
+  color: #266fff ;
+}
+.scenario-setting-box .el-step__line{
+  height: 1px !important;
+  background-color: #ebebeb !important;
+}
+
+.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>
\ No newline at end of file