trp:合并分支

src/api/largeScreen.js

@@ -160,20 +160,20 @@ export const getSimulationBadGasEchartsInfo = (id,time,type,startTime,endTime) =
 export const startSimulation = (projectId) => {
   return request({
     url: `/tunnel/simulation/start/${projectId}`,
-    method: 'post'
+    method: 'get'
   })
 }
 // 结束模拟
 export const endSimulation = (projectId) => {
   return request({
     url: `/tunnel/simulation/stop/${projectId}`,
-    method: 'post'
+    method: 'get'
   })
 }
 //模拟爆破
 export const blastingSimulation = (projectId,level) => {
   return request({
     url: `/tunnel/simulation/blasting/${projectId}/${level}`,
-    method: 'post'
+    method: 'get'
   })
 }

src/api/tunnelManage.js

@@ -108,6 +108,14 @@ export const addSimulateTunnel = (data) => {
   })
 }
 
+export const editSimulateTunnel = (data) => {
+  return request({
+    url: '/tunnel/simulate/edit',
+    method: 'post',
+    data
+  })
+}
+
 export const editSimulateEquipment = (data) => {
   return request({
     url: '/tunnel/simulate',

src/components/content/tunnelScene/TunnelSceneSimulate-back.vue

@@ -0,0 +1,477 @@
+<template>
+  <div id="scene">
+    <div id="cvs" ref="content"></div>
+    <dev-info ref="info" :devInfo="devInfo" />
+    <!-- 这里的预览模式需要做成不能修改的模式 -->
+<!--    <edit-dialog-->
+<!--      ref="edit"-->
+<!--      @addEquipment="handleAddEqu"-->
+<!--      @removeEquipment="handleRemoveEqu"-->
+<!--      @cancel="handleCancel"-->
+<!--      :hasDev="hasDevice"-->
+<!--      :pointNum="pointNum"-->
+<!--      :tunnelId="params.tunnelId"-->
+<!--      :position="targetP?.name"-->
+<!--      :hasEquipment="hasDevice"-->
+<!--      :pointGap="pointGap"-->
+<!--      :form="params.form"-->
+<!--    />-->
+<!--    <el-dialog-->
+<!--      v-model="centerDialogVisible"-->
+<!--      width="30%"-->
+<!--      destroy-on-close-->
+<!--      center-->
+<!--      :show-close="false"-->
+<!--      style="-->
+<!--        margin: 20% auto;-->
+<!--        width: 569px;-->
+<!--        height: 330px;-->
+<!--        background: rgba(7, 35, 72, 0.79);-->
+<!--        border-radius: 20px;-->
+<!--        border: 2px solid #0f82af;-->
+<!--      "-->
+<!--    >-->
+<!--      <p id="remove-title">是否确定删除该设备</p>-->
+<!--      <div class="btn">-->
+<!--        <button @click="centerDialogVisible = false">取消</button>-->
+<!--        <button @click="handleConfirmAddEqu">确定</button>-->
+<!--      </div>-->
+<!--    </el-dialog>-->
+  </div>
+</template>
+
+<script setup>
+import * as three from "three";
+import ThreeDScene from "./sceneClass/demo.js";
+import DevInfo from "./displayInfoComp/DevInfo.vue";
+import EditDialog from "./editEquComp/editDialog.vue";
+
+// 导入模模型加载器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+// import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import * as TWEEN from "three/examples/jsm/libs/tween.module";
+import {
+  CSS3DRenderer,
+  CSS3DSprite,
+} from "three/addons/renderers/CSS3DRenderer.js";
+// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
+
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import {
+  onMounted,
+  reactive,
+  ref,
+  toRaw,
+  watch,
+  defineProps,
+  defineExpose,
+} from "vue";
+import { ElMessage } from "element-plus";
+import { useModelSceneStore } from "@/store/modelSceneStore";
+import { getScreenSimulateTunnel } from "@/api/tunnelManage";
+// 获取html标签跟随组件dom
+const content = ref(null);
+const info = ref(null);
+const edit = ref(null);
+let modelList = ref(null);
+let demo; //定义demo对象
+const loader = new OBJLoader();
+let hdrLoader = new RGBELoader();
+let backColorSet = three.sRGBEncoding;
+const modelStore = useModelSceneStore();
+const params = defineProps([
+  "isedit",
+  "tunnelId",
+  "tunnelLength",
+  "form",
+  "deviceData",
+  "devRealtimeData",
+  "simulateData",
+  "tunnelAlias",
+]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+
+let isedit = ref(params.isedit);
+let tunnelId = reactive(params.tunnelId);
+
+watch(
+  () => params.tunnelLength,
+  (now) => {
+    params.tunnelLength = now;
+    // console.log(params.tunnelLength);
+    pointGap = now / 20;
+    // console.log(params.form.tunnelName);
+  },
+  { deep: true }
+);
+
+let pointGap = reactive(params.tunnelLength);
+
+onMounted(handleMounted);
+
+// 挂载后回调
+async function handleMounted() {
+  const doms = [info.value.$el];//edit.value.$el
+  demo = new ThreeDScene(three, content.value);
+  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
+  // "../../../../public/tunnelModel/chanel-have-wall-now-use.gltf"
+  demo.isedit =false;
+  const loaded = await demo.loadModel(
+    GLTFLoader,
+    "/tunnelModel/chanel-have-wall-now-use.gltf",
+    true,
+  );
+  demo.addOrbitControls(OrbitControls, true);
+  demo.addTween(TWEEN);
+  demo.addCSS3Renderer(CSS3DRenderer, CSS3DSprite, doms);
+  demo.setDistance(10);
+  // lClickCallback(demo); //绑定左键回调
+  // rClickCallback(demo); //绑定右键回调
+
+  //加载HDR背景图片
+  demo.loadBackground(hdrLoader, backColorSet);
+
+  // 初始化设备模型
+  try {
+    const map = new Map();
+    map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
+    map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
+    demo.initDevicesModel(map);
+    // 初始化渲染设备
+    // modelList.value = await modelStore.initModelData(
+    //   params.tunnelId,
+    //   params.form
+    // );
+    modelList.value = [
+      {
+        typeKey: "frequency",
+        position: "point_001_tr",
+        threshold: "",
+        equipmentId: 3048,
+        equipmentName: "温度传感器",
+        equipmentType: "sensor",
+        data: 100, //实时数据
+        unit: "℃", //单位
+      },
+      {
+        typeKey: "temperature",
+        position: "point_020_tr",
+        threshold: "",
+        equipmentId: 10,
+        equipmentName: "1度传感器",
+        equipmentType: "sensor",
+        data: 10, //实时参数
+        unit: "%", //单位
+      },
+    ];
+
+    // 初始化仿真參數
+    const { data } = await getScreenSimulateTunnel(params.tunnelId);
+    const modeData = randomPosition([
+      ...data.frequencyChangerList,
+      ...data.windPressureSensorList,
+      ...data.sensorList,
+    ]).map((item) => ({
+      ...item,
+      data:'10',
+      equipmentType: item.equipmentType.startsWith("frequency")
+        ? "frequency"
+        : "sensor",
+    }));
+    console.log('modeData',modeData)
+    demo.editTunnelInit(modeData);
+    // 初始化标牌信息
+    demo.SignsInf(params.tunnelAlias, String(params.tunnelLength));
+  } catch (err) {}
+}
+
+// 从新渲染数据
+async function rerender() {
+  try {
+    // 初始化仿真參數
+    const { data } = await getScreenSimulateTunnel(params.tunnelId);
+    console.log(data);
+    const modeData = randomPosition([
+      ...data.frequencyChangerList,
+      ...data.windPressureSensorList,
+      ...data.sensorList,
+    ]).map((item) => ({
+      ...item,
+      equipmentType: item.equipmentType.startsWith("frequency")
+        ? "frequency"
+        : "sensor",
+    }));
+    demo.editTunnelInit(modeData);
+    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
+  } catch (error) {
+    ElMessage({
+      message: "获取仿真数据异常！",
+      type: "warning",
+    });
+  }
+}
+// 随机生成1-20的随机数
+function randomNum(max = 20) {
+  const nums = new Set();
+  while (nums.size < max) {
+    nums.add(Math.floor(Math.random() * max + 1).toString());
+  }
+  return [...nums];
+}
+//随机定位
+function randomPosition(simulateData) {
+  const mid = Math.floor(simulateData.length / 2);
+  const lrIndex = Math.floor(Math.random() * 2);
+  const lr_position = ["tl", "tr"];
+  const leftPosition = randomNum();
+  const rightPosition = randomNum();
+  const leftData = simulateData.slice(0, mid).map((item, index) => ({
+    ...item,
+    position: `point_0${leftPosition[index].padStart(2, 0)}_${
+      lr_position[lrIndex]
+    }`,
+  }));
+  const rightData = simulateData
+    .slice(mid, simulateData.length)
+    .map((item, index) => ({
+      ...item,
+      position: `point_0${rightPosition[index].padStart(2, 0)}_${
+        lr_position[1 - lrIndex]
+      }`,
+    }));
+  return [...leftData, ...rightData];
+}
+
+// 每个模型加载回调
+function loadModel(path) {
+  return new Promise((resolve, reject) => {
+    loader.load(
+      path,
+      (obj) => {
+        resolve(obj);
+      },
+      (xhr) => {},
+      (err) => {
+        reject(err);
+      }
+    );
+  });
+}
+
+let hasDevice = ref(true);
+let devInfo = reactive({
+  meshId: null,
+  name: "无",
+  state: "无",
+  position: "无",
+});
+
+// 对象建构赋值功能
+function editDevInfo(
+  value = {
+    meshId: null,
+    name: "无",
+    state: "无",
+    position: "无",
+  }
+) {
+  devInfo.meshId = value.meshId;
+  devInfo.name = value.name;
+  devInfo.state = value.state;
+  devInfo.position = value.position;
+}
+
+//左键/双击左键回调函数
+function lClickCallback(demo) {
+  // console.log('左键点击查看信息');
+
+  //demo动态添加函数，为操作组件内部
+  function displayDevInfo(targetPoint = null) {
+    hasDevice.value = targetPoint.hasDevice;
+    if (!targetPoint.info) {
+      editDevInfo();
+      return;
+    }
+    editDevInfo(targetPoint.info);
+  }
+
+  // 传给内部使用
+  demo.addFunction("displayDevInfo", displayDevInfo);
+}
+
+let pointNum = ref(0);
+let targetP = ref({});
+
+// 右键点击附着点后调函数
+function rClickCallback(demo) {
+  function editDev(targetPoint = null) {
+    hasDevice.value = targetPoint.hasDevice;
+    targetP.value = targetPoint;
+    pointNum.value = Number(
+      targetPoint.name.substring(
+        targetPoint.name.indexOf("_") + 1,
+        targetPoint.name.lastIndexOf("_")
+      ) - 1
+    );
+    if (!targetPoint.info) return;
+    editDevInfo(targetPoint.info);
+  }
+
+  demo.addFunction("editDev", editDev);
+}
+
+// function streetSigns(){
+
+// }
+
+// 场景添加设备
+function handleAddEqu(formInfo) {
+  demo.addEquipment(targetP.value, formInfo);
+  // //将墙壁设置为可以穿透点击
+  // for (let line = 1; line <= 20; line++) {
+  //   if (line < 10) {
+  //     let wall = 'wall_' + '0' + line
+  //     this.scene.getObjectByName(wall).layers.set(0)
+  //   } else if (line >= 10) {
+  //     let wall = 'wall_' + line
+  //     this.scene.getObjectByName(wall).layers.set(0)
+  //   }
+  // }
+}
+
+const centerDialogVisible = ref(false);
+
+// 删除设备
+function handleRemoveEqu() {
+  if (!targetP.value.hasDevice) {
+    ElMessage({
+      message: "该点位不存在设备！",
+      type: "warning",
+    });
+    return;
+  }
+  centerDialogVisible.value = true;
+}
+
+// 对话框确认删除
+function handleConfirmAddEqu() {
+  console.log("target:", targetP.value.info);
+  modelStore
+    .deleteEquipment(targetP.value.info.equipmentId, pointGap)
+    .then((res) => {
+      demo.removeEquipment(targetP.value);
+      centerDialogVisible.value = false;
+      handleCancel();
+      ElMessage({
+        message: "删除成功！",
+        type: "success",
+      });
+    })
+    .catch((res) => {
+      console.log(res);
+      ElMessage({
+        message: "删除失败！",
+        type: "warning",
+      });
+    });
+}
+
+// 处理取消关闭编辑框事件
+function handleCancel() {
+  if (!demo) return;
+  // 关闭标签
+  demo.isControlOrbit(true);
+  demo._resetState();
+  demo.clearTagsObj();
+}
+
+//现在首先有二种方案，是写在TunnelScene.vue中还是demo.js中呢？
+//我认为可能看数据在哪获取？到时候看在哪里导入，首先我们放在TunnelScene里面吧
+//因为没获取到接口，我们先写死！！！
+//需要参考接口的数据结构！！！，主要是传入函数的参数应该是什么结构？？？
+const ThreeConfig = {
+  code: 0,
+  data: {
+    tunnelThreeConfig: [
+      {
+        equipmentId: "fan_01", //传感器id
+        equipmentName: "01", //设备名称
+        pointName: "point_005_tl", //附着点名称(定位)
+        equipmentType: "fan", //设备类型(类型可根据后端
+        equipmentValue: 23, //设备存的值
+      },
+      {
+        equipmentId: "sensors_01", //传感器id
+        equipmentName: "01", //设备名称
+        pointName: "point_009_bl", //附着点名称(定位)
+        equipmentType: "sensors", //设备类型(类型可根据后端
+        equipmentValue: 67, //设备存的值
+      },
+    ],
+  },
+  msg: "dda",
+};
+
+//=================实时更新数据
+watch(params.devRealtimeData, () => {
+  // console.log("devRealtimeData：", params.devRealtimeData);
+});
+defineExpose({
+  rerender,
+});
+</script>
+
+<style lang="scss" scoped>
+#scene {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  #cvs {
+    height: 100%;
+  }
+}
+
+#remove-title {
+  height: 42px;
+  font-size: 32px;
+  font-family: MicrosoftYaHei, MicrosoftYaHei;
+  font-weight: bold;
+  color: #08b7b8;
+  line-height: 42px;
+  letter-spacing: 3px;
+  text-align: center;
+  margin: 65px 0px 70px 0px;
+}
+
+.btn {
+  display: flex;
+  justify-content: center;
+  gap: 80px;
+
+  :nth-child(1) {
+    width: 190px;
+    height: 60px;
+    border-radius: 11px;
+    border: 2px solid #0f82af;
+    font-size: 28px;
+    font-family: MicrosoftYaHei;
+    color: #08b7b8;
+    line-height: 37px;
+    background: transparent;
+  }
+
+  :nth-child(2) {
+    width: 190px;
+    height: 60px;
+    background: #08b7b8;
+    border-radius: 11px;
+    font-size: 28px;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-weight: bold;
+    color: #ffffff;
+    line-height: 37px;
+  }
+}
+</style>

src/components/content/tunnelScene/TunnelSceneSimulate.vue

@@ -360,6 +360,7 @@ const ThreeConfig = {
  * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
  */
 function TunnelSceneSimulateRender(data) {
+  console.log('TunnelSceneSimulateRender',data)
   if (!demo) return;
   const modeData = randomPosition([
     ...data.frequencyChangerList,
@@ -404,7 +405,7 @@ function renderRoadPlane(data) {
 }
 
 defineExpose({
-  rerender,
+  rerender,TunnelSceneSimulateRender
 });
 </script>
 

src/components/deviceManage/index.vue

@@ -39,33 +39,33 @@
                     :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                     :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
             <el-table-column prop="equipmentName" label="设备名称" align="center"/>
-<!--            <el-table-column prop="ratedPower" label="额定功率" align="center">-->
+            <!--            <el-table-column prop="ratedPower" label="额定功率" align="center">-->
-<!--              <template #default="scope">-->
+            <!--              <template #default="scope">-->
-<!--                <el-input placeholder="额定功率" v-model="scope.row.ratedPower"-->
+            <!--                <el-input placeholder="额定功率" v-model="scope.row.ratedPower"-->
-<!--                ></el-input>-->
+            <!--                ></el-input>-->
-<!--              </template>-->
+            <!--              </template>-->
-<!--            </el-table-column>-->
+            <!--            </el-table-column>-->
-<!--            <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>-->
+            <!--            <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>-->
-<!--            <el-table-column prop="acurrentValue" label="A电流阈值" align="center">-->
+            <!--            <el-table-column prop="acurrentValue" label="A电流阈值" align="center">-->
-<!--              <template #default="scope">-->
+            <!--              <template #default="scope">-->
-<!--                <el-input placeholder="A电流" v-model="scope.row.acurrentValue"-->
+            <!--                <el-input placeholder="A电流" v-model="scope.row.acurrentValue"-->
-<!--                ></el-input>-->
+            <!--                ></el-input>-->
-<!--              </template>-->
+            <!--              </template>-->
-<!--            </el-table-column>-->
+            <!--            </el-table-column>-->
-<!--            <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>-->
+            <!--            <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>-->
-<!--            <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">-->
+            <!--            <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">-->
-<!--              <template #default="scope">-->
+            <!--              <template #default="scope">-->
-<!--                <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"-->
+            <!--                <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"-->
-<!--                ></el-input>-->
+            <!--                ></el-input>-->
-<!--              </template>-->
+            <!--              </template>-->
-<!--            </el-table-column>-->
+            <!--            </el-table-column>-->
-<!--            <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>-->
+            <!--            <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>-->
-<!--            <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">-->
+            <!--            <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">-->
-<!--              <template #default="scope">-->
+            <!--              <template #default="scope">-->
-<!--                <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"-->
+            <!--                <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"-->
-<!--                ></el-input>-->
+            <!--                ></el-input>-->
-<!--              </template>-->
+            <!--              </template>-->
-<!--            </el-table-column>-->
+            <!--            </el-table-column>-->
             <el-table-column prop="state" label="状态" align="center" width="200">
               <template #default="scope">
                 <div class="switch">
@@ -113,7 +113,7 @@
                     :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                     :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="winData">
             <el-table-column prop="equipmentName" label="设备名称" align="center"/>
-<!--            <el-table-column prop="offset" label="偏移量" align="center"/>-->
+            <!--            <el-table-column prop="offset" label="偏移量" align="center"/>-->
             <el-table-column prop="unit" label="单位" align="center">
               <template #default="scope">
                 <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
@@ -184,7 +184,7 @@
                     :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                     :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="otherData">
             <el-table-column prop="equipmentName" label="设备名称" align="center"/>
-<!--            <el-table-column prop="offset" label="偏移量" align="center"/>-->
+            <!--            <el-table-column prop="offset" label="偏移量" align="center"/>-->
             <el-table-column prop="unit" label="单位" align="center">
               <template #default="scope">
                 <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
@@ -334,13 +334,16 @@ const editEquip = debounce(() => {
     windPressureSensorList: newWind,
     sensorList: newSensor,
   }
-  console.info("🚀 ~ file:index method: line:478 -----",basicData)
   editSimulateEquipment(basicData).then(async res => {
     if (res.code === 1000) {
       loading.close()
-      // ElMessage.success('开始模拟')
+      let res = await startSimulation(tunnelId)
-      let res= await startSimulation(tunnelId)
+      // console.log('res', res)
-      console.log('res',res)
+      if (res.code === 1000) {
+        ElMessage.success('开始模拟')
+      }else{
+        ElMessage.warning(res.msg)
+      }
       emit('submit')
     } else {
       ElMessage.error(res.msg)

src/views/tunnel-simulate/index.vue

@@ -1,13 +1,14 @@
 <template>
   <div id="main">
+    <tunnel-title v-if="showTunnelTitle"/>
     <div class="box-top">
-      <!--            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
+      <div class="back-tunnel" @click="router.push('/simulate/tunnel/list')">
-      <tunnel-title v-if="showTunnelTitle" />
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
       <div class="top-length">
         <span>隧道总长度: {{ tunnelLength }}米</span>
-        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
+        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate">开始模拟</span>
-          >开始模拟</span
-        >
         <div v-else>
           <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
           <span class="all-btn" @click="endSimulate">结束模拟</span>
@@ -36,17 +37,20 @@
       </div>
     </div>
     <device-manage
-      v-if="showDevice"
+        v-if="showDevice"
-      @cancel="cancelDeviceManage"
+        @cancel="cancelDeviceManage"
-      @submit="submitDevice"
+        @submit="submitDevice"
     />
     <!--    模拟隧道模式-->
     <preview-scene-simulate
-      id="tunnel-box"
+        ref="previewRef"
-      :isedit="false"
+        id="tunnel-box"
-      :device-data="largeScreenData"
+        :isedit="false"
-      :tunnelLength="100"
+        :device-data="largeScreenData"
-      :tunnelId="tunnelId"
+        :tunnelLength="tunnelLength"
+        :tunnelId="tunnelId"
+        :tunnelAlias="tunnelAlias"
+        :devRealtimeData="socketData"
     ></preview-scene-simulate>
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <!--    <preview-scene-->
@@ -60,22 +64,22 @@
     <!--    ></preview-scene>-->
     <div class="left" v-if="isPreview">
       <el-drawer
-        v-model="drawerLeft"
+          v-model="drawerLeft"
-        direction="ltr"
+          direction="ltr"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <fan-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.leftData"
+            :list="socketData.leftData"
-          :isSimulate="true"
+            :isSimulate="true"
-          :fan-data="largeScreenData"
+            :fan-data="largeScreenData"
-          :transducer-data="largeScreenData"
+            :transducer-data="largeScreenData"
-          :loading="showFanLoading"
+            :loading="showFanLoading"
-          :tunnel-id="tunnelId"
+            :tunnel-id="tunnelId"
         />
         <!--        <used-ele-->
         <!--            v-if="showFan"-->
@@ -89,183 +93,41 @@
     </div>
     <div class="right" v-if="isPreview">
       <el-drawer
-        v-model="drawerRight"
+          v-model="drawerRight"
-        direction="rtl"
+          direction="rtl"
-        modal-class="modal-box"
+          modal-class="modal-box"
-        :modal="false"
+          :modal="false"
-        :show-close="false"
+          :show-close="false"
-        :close-on-click-modal="false"
+          :close-on-click-modal="false"
-        :close-on-press-escape="false"
+          :close-on-press-escape="false"
       >
         <wind-pressure-list
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.windPressure"
+            :list="socketData.windPressure"
-          :isSimulate="true"
+            :isSimulate="true"
-          :win-data="largeScreenData"
+            :win-data="largeScreenData"
-          :loading="showWindLoading"
+            :loading="showWindLoading"
         />
         <air-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :windSpeed="socketData.windSpeed"
+            :windSpeed="socketData.windSpeed"
-          :isSimulate="true"
+            :isSimulate="true"
-          :air-data="largeScreenData"
+            :air-data="largeScreenData"
         />
         <bad-gas-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :bad-gas-data="largeScreenData"
+            :bad-gas-data="largeScreenData"
-          :isSimulate="true"
+            :isSimulate="true"
-          :tunnelId="tunnelId"
+            :tunnelId="tunnelId"
-          :loading="showBadLoading"
+            :loading="showBadLoading"
         />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
   </div>
-  <div class="alarm-dialog alarm-tunnel">
-    <el-dialog
-      :close-on-click-modal="false"
-      v-model="isDetailVisited"
-      title="报警信息详情"
-      width="1500px"
-    >
-      <div class="detail">
-        <div>报警时间：</div>
-        {{ alarmDetail.alarmTime }}
-      </div>
-      <div class="detail">
-        <div>报警内容：</div>
-        {{ alarmDetail.alarmContent }}
-      </div>
-    </el-dialog>
-  </div>
-  <div class="alarm-tunnel">
-    <el-dialog
-      :close-on-click-modal="false"
-      v-model="isVisited"
-      title="报警信息"
-      width="2175px"
-      :modal="false"
-    >
-      <div class="left-top-icon"></div>
-      <div class="right-top-icon"></div>
-      <el-form
-        :model="queryParams"
-        inline
-        class="query-form"
-        ref="queryForm"
-        @submit.prevent="getAlarmList"
-        v-if="roleKey !== 'administrator'"
-      >
-        <el-form-item label="查阅状态" prop="lookupStatus">
-          <el-select
-            v-model="queryParams.lookupStatus"
-            placeholder="请选择查阅状态"
-            :fit-input-width="true"
-            :teleported="false"
-            clearable
-            filterable
-          >
-            <el-option label="已读" :value="true" />
-            <el-option label="未读" :value="false" />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getAlarmList">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div
-        class="device-table"
-        :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
-      >
-        <el-table
-          stripe
-          v-loading="loading"
-          :empty-text="tableEmptyText"
-          style="background-color: #011c29; --el-table-border-color: none"
-          :header-cell-style="{
-            backgroundColor: '#064B66',
-            color: '#fff',
-            fontSize: '40px',
-            borderBottom: 'none',
-          }"
-          :data="alarmList"
-        >
-          <el-table-column
-            prop="tunnelName"
-            label="隧道名称"
-            align="center"
-            width="400px"
-          />
-          <el-table-column
-            prop="alarmContent"
-            label="告警信息"
-            align="center"
-          />
-          <el-table-column
-            prop="alarmTime"
-            label="告警时间"
-            align="center"
-            width="480px"
-          />
-          <el-table-column
-            prop="lookupStatus"
-            label="查阅状态"
-            align="center"
-            width="200px"
-            v-if="roleKey !== 'administrator'"
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
-                >{{ scope.row.lookupStatus ? "已读" : "未读" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center" width="300px">
-            <template #default="scope">
-              <el-button
-                type="primary"
-                size="mini"
-                style="font-weight: bold"
-                @click="handleView(scope.row)"
-                link
-                >详情
-              </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                v-if="roleKey !== 'administrator'"
-                @click="handleDelete(scope.row)"
-                link
-                >删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div
-          class="pagination"
-          :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
-        >
-          <el-pagination
-            background
-            v-model:current-page="pageInfo.pageNum"
-            v-model:page-size="pageInfo.pageSize"
-            :total="total"
-            prev-text="上一页"
-            next-text="下一页"
-            layout="prev, pager, next"
-            @current-change="handleCurrentChange"
-            :hide-on-single-page="true"
-          />
-        </div>
-      </div>
-      <div class="left-bottom-icon"></div>
-      <div class="right-bottom-icon"></div>
-    </el-dialog>
-  </div>
 </template>
 
 <script setup>
@@ -278,9 +140,9 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import { dateFormat } from "@/utils/date.js";
+import {dateFormat} from "@/utils/date.js";
-import { getToken } from "@/utils/auth";
+import {getToken} from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
+import {useAuthStore} from "@/store/userstore.js";
 import {
   getLargeScreen,
   getLargeScreenInfo,
@@ -292,15 +154,15 @@ import {
   endSimulation,
   blastingSimulation,
 } from "@/api/largeScreen";
-import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
-import { getUserInfo } from "@/api/login";
+import {getUserInfo} from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import {initSceneData} from "@/api/tunnelScene";
 import {
   getScreenSimulateTunnel,
   getSimulateTunnelDetail,
   getTunnelList,
 } from "@/api/tunnelManage";
-import { debounce } from "lodash";
+import {debounce} from "lodash";
 
 const authStore = useAuthStore();
 const router = useRouter();
@@ -308,6 +170,7 @@ const previewId = reactive(router.currentRoute.value.params.tunnelId);
 const siteId = reactive(router.currentRoute.value.params.siteId);
 const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId);
 const selectIndex = ref(-1);
+const previewRef = ref();
 const isVisited = ref(false);
 const isDetailVisited = ref(false);
 const showFan = ref(false);
@@ -338,6 +201,7 @@ const tunnelBtn = ref();
 const tunnelList = ref([]);
 const tunnelId = ref(0);
 const tunnelLength = ref(0);
+const tunnelAlias = ref('');
 const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
@@ -417,8 +281,9 @@ const cancelDeviceManage = () => {
 const submitDevice = () => {
   isStartSimulate.value = false;
   showDevice.value = false;
-  getScreenInfo(previewId);
+  getScreenInfo(previewId,true);
   // initWebSocket()
+
 };
 const simulatedBlasting = async () => {
   await blastingSimulation(previewId, 10);
@@ -426,6 +291,7 @@ const simulatedBlasting = async () => {
 const endSimulate = async () => {
   isStartSimulate.value = true;
   await endSimulation(previewId);
+  ElMessage.success("结束模拟成功");
 };
 const changeName = (id) => {
   for (let item of equipmentOption.value) {
@@ -555,6 +421,7 @@ const getBasicData = (id) => {
   getSimulateTunnelDetail(id).then((res) => {
     if (res?.code === 1000) {
       tunnelLength.value = res.data.totalLength;
+      tunnelAlias.value = res.data.tunnelAlias;
       serialNumber.value = res.data.serialNumber;
       constructionLength.value = res.data.constructionLength;
       initWebSocket();
@@ -564,7 +431,7 @@ const getBasicData = (id) => {
   });
 };
 
-const getScreenInfo = (id) => {
+const getScreenInfo = (id,flag) => {
   if (id) {
     tunnelId.value = id;
     // equipmentOption.value = []
@@ -581,22 +448,15 @@ const getScreenInfo = (id) => {
           showWindLoading.value = 1;
         }
         if (res.data.sensorList.length !== 0) {
-          // res.data.sensorList.forEach((item) => {
-          //   option = {
-          //     value: item.equipmentId,
-          //     label: item.equipmentName,
-          //   }
-          //   equipmentOption.value.push(option)
-          // })
           res.data.sensorList.forEach((item) => {
             if (
-              item.equipmentType === "dust" ||
+                item.equipmentType === "dust" ||
-              item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0;
             } else {
@@ -607,18 +467,17 @@ const getScreenInfo = (id) => {
           showBadLoading.value = 1;
         }
         largeScreenData.value = res.data;
-        console.log("largeScreenData.value", largeScreenData.value);
+        if(flag) {
+          nextTick(() => {
+            previewRef.value.TunnelSceneSimulateRender(res.data)
+          })
+        }
+        // console.log("largeScreenData.value", largeScreenData.value);
       } else {
         ElMessage.warning(res.msg);
       }
     });
-    // initSceneData(id).then((res) => {
+
-    //   tunnelLength.value = res.data.tunnelLength;
-    //   constructionLength.value = res.data.constructionLength;
-    //   // serialNumber.value = res.data.serialNumber.slice(0, -2)
-    //   serialNumber.value = res.data.serialNumberPrefix;
-    //   initWebSocket();
-    // });
   }
 };
 
@@ -667,8 +526,9 @@ const handleLogout = () => {
 };
 
 const initWebSocket = () => {
-  let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
+  // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
-  // let wsUrl = `ws://tunnel.feashow.com/api/websocket/simulate/${token}/${serialNumber.value}`;
+  // let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
   // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
   // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   // let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
@@ -770,21 +630,55 @@ const initWebSocket = () => {
 </style>
 
 <style lang="scss" scoped>
-.all-btn {
-  cursor: pointer;
-  padding: 10px 20px;
-  border-radius: 11px;
-  border: 2px solid #08b7b8;
-  color: #0be9fa;
-  text-align: center;
-  margin-left: 40px;
-  font-size: 38px;
 
-  &:hover {
+.box-top {
-    color: #f7b500;
+  //display: flex;
+  //justify-content: space-between;
+  position: relative;
+
+  .all-btn {
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 11px;
+    border: 2px solid #08b7b8;
+    color: #0be9fa;
+    text-align: center;
+    margin-left: 40px;
+    font-size: 38px;
+
+    &:hover {
+      color: #f7b500;
+    }
   }
+
+  .back-tunnel {
+    position: absolute;
+    top: 46px;
+    cursor: pointer;
+    margin: 0 0 0 70px;
+    display: flex;
+    align-items: center;
+    width: 178px;
+    height: 70px;
+    line-height: 70px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    font-size: 38px;
+    color: #FFFFFF;
+    z-index: 9999;
+
+    .back-icon {
+      margin-right: 20px;
+      margin-left: 23px;
+      width: 33px;
+      height: 33px;
+      background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+    }
+  }
+
 }
 
+
 #main {
   height: 100%;
   width: 100%;

src/views/tunnel-simulate/tunnel-list.vue

@@ -1,13 +1,10 @@
 <template>
   <div class="tunnel-bgc">
     <div class="box-top">
-      <div class="back-tunnel" @click="handleGoSiteOrIndex">
+      <div class="back-tunnel" @click="router.push('/')">
         <div class="back-icon"></div>
         <span>返回</span>
       </div>
-<!--      <div class="site-name">-->
-<!--        {{ siteName }}-->
-<!--      </div>-->
       <tunnel-title/>
       <div class="all-del-btn" v-if="showOperation">
         <div class="all-btn" style=" margin-right: 40px;" v-if="showAddIcon" @click="handleAdd">
@@ -21,7 +18,7 @@
         </div>
       </div>
     </div>
-    <div class="box-content" >
+    <div class="box-content">
       <div class="site-box" v-for="item in tunnelList" :key="item.projectId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
@@ -33,10 +30,10 @@
           <div>
             <div class="left-img"></div>
             <div style="display: flex;justify-content: space-around">
-<!--              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">-->
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">
-<!--                <div class="edit-icon"></div>-->
+                <div class="edit-icon"></div>
-<!--                <div>编辑</div>-->
+                <div>编辑</div>
-<!--              </div>-->
+              </div>
               <div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.projectId)">
                 <div class="edit-icon"></div>
                 <div>去模拟</div>
@@ -48,7 +45,6 @@
               <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
                 <div :style="{ backgroundImage: 'url(' +getImageUrl(equItem.icon)+')' }" class="icon"></div>
                 <span>{{ equItem.name }}：0</span>
-<!--                {{ item.tunnelEquipmentAmountInfo[equItem.type] }}-->
               </div>
             </div>
           </div>
@@ -79,18 +75,6 @@
         <el-form-item label="序列号" prop="serialNumber">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-<!--        <el-form-item label="风机初始频率" prop="fanInitialFrequency">-->
-<!--          <el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="爆破量级" prop="burstLevel">-->
-<!--          <el-input type="number" v-model="form.burstLevel" placeholder="请输入爆破量级"/>-->
-<!--        </el-form-item>-->
-<!--        <el-form-item label="是否默认">-->
-<!--          <el-radio-group v-model="form.isDefault">-->
-<!--            <el-radio :label="true">是</el-radio>-->
-<!--            <el-radio :label="false">否</el-radio>-->
-<!--          </el-radio-group>-->
-<!--        </el-form-item>-->
         <el-form-item label="隧道备注">
           <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
         </el-form-item>
@@ -117,24 +101,14 @@
 <script setup>
 import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
 import {
-  getTunnelList,
   deleteSimulateTunnel,
   addSimulateTunnel,
   getSimulateTunnelList,
-  getTunnelDetail, getSimulateTunnelDetail
+   getSimulateTunnelDetail, editSimulateTunnel
 } from "@/api/tunnelManage";
-import {getSiteDrawing, getSiteDetail} from "@/api/site";
 import TunnelTitle from "@/components/tunnelTitle/index.vue";
-import {getTunnelBySiteId} from "@/api/largeScreen";
 import {debounce} from 'lodash'
 
-const serialNumberList = ref([
-  {
-    serialNumber: '',
-    serialNumberType: ''
-  }
-])
-
 const validateNumber = (rule, value) => {
   const reg = /^[A-Za-z0-9]+$/;
   return reg.test(value);
@@ -143,7 +117,6 @@ const validateSerialNumberPrefix = (rule, value) => {
   return value.length > 13 && value.slice(0, -2) == form.value.serialNumberPrefix;
 }
 const router = useRouter()
-const siteImage = ref()
 const showAddIcon = ref(false)
 const params = router.currentRoute.value.params;
 const siteId = reactive(params.siteId)
@@ -211,27 +184,15 @@ const iconsList = ref([
   },
 ])
 const title = ref('新增模拟隧道')
-const showNull = ref(false);
 const isVisited = ref(false);
 const projectIds = ref([])
-const tunnelNameList = ref([])
-const siteName = ref(localStorage.getItem('site'))
 const form = ref({
   tunnelName: '',
   tunnelAlias: '',
-  serialNumberPrefix: '',
   serialNumber: '',
-  // serialNumberOne: '',
   totalLength: '',
-  referenceFrequency: '',
-  upTime: 0,
-  upFrequency: '',
-  dropTime: 0,
-  dropFrequency: 0,
   remarks: '',
-  isDefault: false
 });
-const isEdit = ref(false)
 const pageInfo = reactive({
   pageNum: 1,
   pageSize: 12
@@ -243,9 +204,6 @@ onMounted(() => {
 const handleGoToSimulateTunnel = (projectId) => {
   router.push('/simulate/' + projectId)
 }
-const handleGoSiteOrIndex = () => {
-router.push('/')
-}
 const getList = () => {
   const loading = ElLoading.service({
     lock: true,
@@ -261,7 +219,6 @@ const getList = () => {
       tunnelList.value = res.data.rows
       showFirst.value = (total.value / pageInfo.pageSize) > 1;
       showAddIcon.value = (total.value / pageInfo.pageSize) == 1;
-      // siteName.value = res.data.siteName
     } else {
       ElMessage.warning(res.msg)
     }
@@ -283,26 +240,22 @@ const handleCurrentChange = (val) => {
   getList()
 }
 const handleSubmit = debounce((instance) => {
-  if (serialNumberList.value?.length > 0 && !serialNumberList.value[0].serialNumber && !serialNumberList.value[0].serialNumberType) {
-    serialNumberList.value = []
-  }
   if (!instance) return
   instance.validate(async (valid) => {
     if (!valid) return
-    const data = {
+    let res = null
-      ...form.value,
+    if (title.value === '新增模拟隧道') {
-      // tunnelGatewayDtoList: serialNumberList.value
+      res = await addSimulateTunnel(form.value)
+    } else {
+      res = await editSimulateTunnel(form.value)
+    }
+    if (res.code === 1000) {
+      ElMessage.success(res.msg)
+      getList()
+      isVisited.value = false
+    } else {
+      ElMessage.warning(res.msg)
     }
-    console.info("🚀 ~method:data -----", data)
-    addSimulateTunnel(data).then(res => {
-      if (res.code === 1000) {
-        ElMessage.success('新增模拟隧道成功')
-        getList()
-        isVisited.value = false
-      } else {
-        ElMessage.warning(res.msg)
-      }
-    })
   })
 }, 100)
 
@@ -326,16 +279,10 @@ const restFrom = () => {
     tunnelAlias: '',
     serialNumber: '',
     totalLength: '',
-    referenceFrequency: '',
-    upTime: 0,
-    upFrequency: '',
-    dropTime: 0,
-    dropFrequency: '',
     remarks: '',
-    isDefault: false
   }
 }
-const getTunnel = async (projectId) => {
+const getTunnelDetail = async (projectId) => {
   const loading = ElLoading.service({
     lock: true,
     text: '正在加载系统资源...',
@@ -352,14 +299,8 @@ const getTunnel = async (projectId) => {
 const handleGoToEditTunnel = (projectId) => {
   restFrom()
   title.value = '编辑模拟隧道'
-  getTunnel(projectId)
+  getTunnelDetail(projectId)
   isVisited.value = true
-  serialNumberList.value = [
-    // {
-    //   serialNumber: '',
-    //   serialNumberType:''
-    // }
-  ]
   nextTick(() => {
     // 清空校验
     formInstance.value.clearValidate()
@@ -369,12 +310,6 @@ const handleAdd = () => {
   restFrom()
   title.value = '新增模拟隧道'
   isVisited.value = true
-  serialNumberList.value = [
-    // {
-    //   serialNumber: '',
-    //   serialNumberType:''
-    // }
-  ]
   nextTick(() => {
     // 清空校验
     formInstance.value.clearValidate()
@@ -386,18 +321,13 @@ const getImageUrl = (name) => {
 const handleClickSite = (type) => {
   if (type.checked) {
     projectIds.value.push(type.projectId)
-    tunnelNameList.value.push(type.tunnelName)
   } else {
     projectIds.value.map((item, index) => {
       if (item === type.projectId) {
         projectIds.value.splice(index, 1)
       }
     })
-    tunnelNameList.value.map((item, index) => {
+
-      if (item === type.tunnelName) {
-        tunnelNameList.value.splice(index, 1)
-      }
-    })
   }
 }
 const handleMoreDelete = debounce(() => {
@@ -415,7 +345,6 @@ const handleMoreDelete = debounce(() => {
           ElMessage.success(res.msg)
           getList()
           projectIds.value = []
-          tunnelNameList.value = []
         } else {
           ElMessage.error(res.msg)
         }

src/views/tunnel/index.vue

@@ -642,7 +642,7 @@ const manageSelect = (name) => {
     }
   } else if (name === "模拟仿真") {
     if (tunnelId.value) {
-      router.push("/simulate/" + tunnelId.value);
+      router.push("/simulate/tunnel/list");
     }
   }
   if(socket){