Merge pull request 'dev' (#405) from dev into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/405

.env.development

@@ -3,5 +3,5 @@
 VITE_BASE_URL='/api'
 # VITE_BASE_URL='http://192.168.101.7:8000'
 
-#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
+#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
 VITE_BASE_WSURL='/websocket'

.env.production

@@ -4,5 +4,5 @@ VITE_TITLE='fateverse'
 
 VITE_BASE_URL='/api'
 
-#VITE_BASE_WSURL='ws://web-tunnel.feashow.com/api'
+#VITE_BASE_WSURL='ws://tunnel.feashow.com/api'
 VITE_BASE_WSURL='/websocket'

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "autofit.js": "^3.0.4",
+    "autofit.js": "^3.2.1",
     "axios": "^1.4.0",
     "csv-exportor": "^1.0.2",
     "echarts": "^5.4.2",

src/api/largeScreen.js

@@ -38,7 +38,7 @@ export const getEchartsInfo = (id,time,type,startTime,endTime) => {
 // 有害气体echarts数据
 export const getBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
   return request({
-    url: '/tunnel/large/screen/echarts/gas/sensor/',
+    url: '/tunnel/large/screen/echarts/gas/sensor',
     method: 'get',
     params: {
       id: id,
@@ -128,3 +128,59 @@ export const deleteAlarmSate = (tunnelAlarmIdList) => {
     method: 'delete'
   })
 }
+// 传感器模拟echarts数据
+export const getSimulationEchartsInfo = (id,time,type,startTime,endTime) => {
+  return request({
+    url: '/tunnel/simulation/large/screen/echarts/sensor',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
+    }
+  })
+}
+// 有害气体模拟echarts数据
+export const getSimulationBadGasEchartsInfo = (id,time,type,startTime,endTime) => {
+  return request({
+    url: '/tunnel/simulation/large/screen/echarts/gas/sensor',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type,
+      startTime:startTime,
+      endTime:endTime,
+    }
+  })
+}
+//开始 模拟
+export const startSimulation = (projectId) => {
+  return request({
+    url: `/tunnel/simulation/start/${projectId}`,
+    method: 'get'
+  })
+}
+//模拟状态
+export const simulationState = (projectId) => {
+  return request({
+    url: `/tunnel/simulation/state/${projectId}`,
+    method: 'get'
+  })
+}
+// 结束模拟
+export const endSimulation = (projectId) => {
+  return request({
+    url: `/tunnel/simulation/stop/${projectId}`,
+    method: 'get'
+  })
+}
+//模拟爆破
+export const blastingSimulation = (projectId,level) => {
+  return request({
+    url: `/tunnel/simulation/blasting/${projectId}/${level}`,
+    method: 'get'
+  })
+}

src/api/tunnelManage.js

@@ -84,3 +84,54 @@ export const getSerialNumberOnUse = (tunnelId) => {
     }
   })
 }
+
+
+//模拟隧道
+export const getSimulateTunnelList = (params) => {
+  return request({
+    url: '/tunnel/simulate',
+    method: 'get',
+    params
+  })
+}
+export const getSimulateTunnelDetail = (projectId) => {
+  return request({
+    url: `/tunnel/simulate/${projectId}`,
+    method: 'get'
+  })
+}
+export const addSimulateTunnel = (data) => {
+  return request({
+    url: '/tunnel/simulate',
+    method: 'post',
+    data
+  })
+}
+
+export const editSimulateTunnel = (data) => {
+  return request({
+    url: '/tunnel/simulate/edit',
+    method: 'post',
+    data
+  })
+}
+
+export const editSimulateEquipment = (data) => {
+  return request({
+    url: '/tunnel/simulate',
+    method: 'put',
+    data
+  })
+}
+export const deleteSimulateTunnel = (projectIdList) => {
+  return request({
+    url: `/tunnel/simulate/${projectIdList}`,
+    method: 'delete'
+  })
+}
+export const getScreenSimulateTunnel = (projectId) => {
+  return request({
+    url: `/tunnel/simulate/equipment/${projectId}`,
+    method: 'get'
+  })
+}

src/components/content/airInfo/AirInfo.vue

@@ -36,10 +36,10 @@
           <div class="export-btn" @click="handleExport">
             导出
           </div>
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-day v-if="isSimulate?selectTimeButton === 0:selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
-              :buttonList="timeList"
+              :buttonList="isSimulate?timeSimulateList:timeList"
               v-model="selectTimeButton"
               @select="timeSelect"
           />
@@ -62,7 +62,7 @@
 import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
-import {getEchartsInfo} from "@/api/largeScreen";
+import {getEchartsInfo, getSimulationEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
@@ -74,13 +74,15 @@ let myEcharts = reactive({});
 const props = defineProps({
   list: Array,
   windSpeed: Array,
-  airData: Array
+  airData: Array,
+  isSimulate: Boolean,
 });
 const isFullScreen = ref(false);
 let dataZoomTop = reactive('87%')
 let chartData = reactive([])
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
+const itemInfo = ref();
 const windSpeed = ref(0)
 const windSpeedUnit = ref('m/s')
 const windDirection = ref(null)
@@ -94,11 +96,12 @@ const dialogTitle = ref('风速')
 const openDialogId = ref(0)
 const airList = ref([])
 const timeList = ref(["年", "月", "日"]);
-const selectTimeButton = ref(2);
+const timeSimulateList = ref(["日"]);
 const isWindSpeedVisited = ref(false);
 const showSpeedLoading = ref(false)
 const clickMonth = ref('')
 const clickDay = ref('')
+const selectTimeButton = ref(props.isSimulate?0:2);
 watch(() => props.windSpeed, (now) => {
   now.forEach(newItem => {
     windSpeed.value =newItem.value
@@ -107,7 +110,7 @@ watch(() => props.windSpeed, (now) => {
 watch(() => props.list, (now) => {
   airList.value?.forEach(item => {
     now.forEach(newItem => {
-      if (newItem.equipmentId === 11) {//风向传感器
+      if (newItem.equipmentType === "windDirection") {//风向传感器
         windDirection.value = newItem.value
       }
       if (item.equipmentId === newItem.equipmentId) {
@@ -248,29 +251,56 @@ const getChartInfo = (equipmentId, type = 'day', time = '', flag, startTime, end
       }
     }
   })
-  getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
+  if(props.isSimulate){
-    if (res?.code === 1000) {
+
-      showSpeedLoading.value = false
+    getSimulationEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
-      chartData = res.data
+      if (res?.code === 1000) {
-      nextTick(() => {
+        showSpeedLoading.value = false
-        if (flag) {
+        chartData = res.data
-          const fanChart = document.getElementById('containerWind')
+        nextTick(() => {
-          const erd = elementResizeDetectorMaker();
+          if (flag) {
-          erd.listenTo(document.getElementById('airDialog'), (element) => {
+            const fanChart = document.getElementById('containerWind')
-            fanChart.style.height = element.offsetHeight - 140 + 'px'
+            const erd = elementResizeDetectorMaker();
-            myEcharts.resize();
+            erd.listenTo(document.getElementById('airDialog'), (element) => {
-          });
+              fanChart.style.height = element.offsetHeight - 140 + 'px'
-          if (isFullScreen.value) {
+              myEcharts.resize();
-            initChart(res.data.dates, res.data.values, dataZoomTop)
+            });
+            if (isFullScreen.value) {
+              initChart(res.data.dates, res.data.values, dataZoomTop)
+            }
+          } else {
+            shrinkScreen()
           }
-        } else {
+        })
-          shrinkScreen()
+      } else {
-        }
+        loadingText.value = res.msg
-      })
+      }
-    } else {
+    })
-      loadingText.value = res.msg
+  }else{
-    }
+    getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
-  })
+      if (res?.code === 1000) {
+        showSpeedLoading.value = false
+        chartData = res.data
+        nextTick(() => {
+          if (flag) {
+            const fanChart = document.getElementById('containerWind')
+            const erd = elementResizeDetectorMaker();
+            erd.listenTo(document.getElementById('airDialog'), (element) => {
+              fanChart.style.height = element.offsetHeight - 140 + 'px'
+              myEcharts.resize();
+            });
+            if (isFullScreen.value) {
+              initChart(res.data.dates, res.data.values, dataZoomTop)
+            }
+          } else {
+            shrinkScreen()
+          }
+        })
+      } else {
+        loadingText.value = res.msg
+      }
+    })
+  }
   nextTick(() => {
     loadingText.value = '加载中...'
   })

src/components/content/airInfo/childComps/ItemInfo.vue

@@ -24,9 +24,9 @@ const length = ref(null);
 const value = ref(null);
 const point = ref(null);
 const isWaring = ref();
-// watch(() => params.wp.value, () => {
+watch(() => params.wp.value, () => {
-//   setValue();
+  setValue(params.wp.value);
-// });
+});
 onMounted(() => {
   if (params.wp !== undefined) {
     setValue();
@@ -36,8 +36,14 @@ onMounted(() => {
 const getImageUrl = (name) => {
   return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
 }
-const setValue = () => {
+const setValue = (realValue) => {
-  let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
+  let  newValue=''
+  if(realValue){
+    newValue=realValue
+  }else{
+    newValue=params.wp.value
+  }
+  let width = (newValue * length.value.offsetWidth) / params.wp.max;
   value.value.style.width = `${width}px`;
   let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
   point.value.style.left = `${flag}px`;
@@ -51,7 +57,7 @@ const setValue = () => {
       value.value.style.background =
           "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
     }
-    isWaring.value = params.wp.value < params.wp.point;
+    isWaring.value = newValue < params.wp.point;
   }else {
     if (width >= flag) {
       value.value.style.background =
@@ -60,14 +66,13 @@ const setValue = () => {
       value.value.style.background =
           "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
     }
-    isWaring.value = params.wp.value >= params.wp.point;
+    isWaring.value = newValue >= params.wp.point;
   }
 
 }
 // let isWaring = computed(() => {
 //   return params.wp.value >= params.wp.point;
 // });
-
 </script>
 
 <style lang="scss" scoped>

src/components/content/badGasInfo/BadGasInfo.vue

@@ -25,9 +25,9 @@
           <div class="export-btn" @click="handleExport">
             导出
           </div>
-          <choose-dates v-if="selectTimeButton === 2" ref="chooseDayRef" @select="daySelect" />
+          <choose-dates v-if="isSimulate?selectTimeButton === 0:selectTimeButton===2" ref="chooseDayRef" @select="daySelect" />
           <choose-month v-if="selectTimeButton === 1" ref="chooseMonthRef" @select="monthSelect" />
-          <time-range-btn :buttonList="timeList" v-model="selectTimeButton" @select="timeSelect" />
+          <time-range-btn :buttonList="isSimulate?timeSimulateList:timeList" v-model="selectTimeButton" @select="timeSelect" />
         </div>
         <div class="change-screen">
           <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click.stop="handleFullScreen"
@@ -47,7 +47,7 @@
 import GasInfoItem from "./childComps/GasInfoItem.vue";
 import * as echarts from "echarts";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
-import { getBadGasEchartsInfo } from "@/api/largeScreen";
+import {getBadGasEchartsInfo, getSimulationBadGasEchartsInfo} from "@/api/largeScreen";
 import ChooseDates from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
@@ -60,11 +60,13 @@ const props = defineProps({
   badGasData: Array,
   tunnelId: Number,
   loading: Number,
+  isSimulate: Boolean,
 });
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const timeList = ref(["年", "月", "日"]);
-const selectTimeButton = ref(2);
+const timeSimulateList = ref(["日"]);
+const selectTimeButton = ref(props.isSimulate?0:2);
 const isBadGasVisited = ref(false);
 const showLoading = ref(false)
 const isFullScreen = ref(false);
@@ -75,6 +77,7 @@ let myEcharts = reactive({});
 const clickMonth = ref('')
 const clickDay = ref('')
 const bgImage = computed(() => (isBadGasVisited.value ? "sp_active.png" : "bg.png"));
+
 watch(
   () => props.list,
   (now) => {
@@ -288,27 +291,52 @@ const getBadGasChartInfo = (type, time = '', flag, startTime, endTime) => {
       }
     }
   })
-  getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
+  if(props.isSimulate){
-    if (res?.code === 1000) {
+    getSimulationBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
-      showLoading.value = false
+      if (res?.code === 1000) {
-      chartData = res.data
+        showLoading.value = false
-      nextTick(() => {
+        chartData = res.data
-        if (flag) {
+        nextTick(() => {
-          const fanChart = document.getElementById('containerBad')
+          if (flag) {
-          const erd = elementResizeDetectorMaker();
+            const fanChart = document.getElementById('containerBad')
-          erd.listenTo(document.getElementById('badDialog'), (element) => {
+            const erd = elementResizeDetectorMaker();
-            fanChart.style.height = element.offsetHeight - 140 + 'px'
+            erd.listenTo(document.getElementById('badDialog'), (element) => {
-            myEcharts.resize();
+              fanChart.style.height = element.offsetHeight - 140 + 'px'
-          });
+              myEcharts.resize();
-          if (isFullScreen.value) {
+            });
-            initChart(res.data.dates, res.data, dataZoomTop)
+            if (isFullScreen.value) {
+              initChart(res.data.dates, res.data, dataZoomTop)
+            }
+          } else {
+            shrinkScreen()
           }
-        } else {
+        })
-          shrinkScreen()
+      }
-        }
+    })
-      })
+  }else{
-    }
+    getBadGasEchartsInfo(id, time, type, startTime, endTime).then(res => {
-  })
+      if (res?.code === 1000) {
+        showLoading.value = false
+        chartData = res.data
+        nextTick(() => {
+          if (flag) {
+            const fanChart = document.getElementById('containerBad')
+            const erd = elementResizeDetectorMaker();
+            erd.listenTo(document.getElementById('badDialog'), (element) => {
+              fanChart.style.height = element.offsetHeight - 140 + 'px'
+              myEcharts.resize();
+            });
+            if (isFullScreen.value) {
+              initChart(res.data.dates, res.data, dataZoomTop)
+            }
+          } else {
+            shrinkScreen()
+          }
+        })
+      }
+    })
+
+  }
 }
 const handleOpenChart = () => {
   clickMonth.value = ''

src/components/content/fanInfo/FanInfo.vue

@@ -12,7 +12,7 @@
           <div class="echart"></div>
           <div class="fan-name">{{ changeNum(item) }}号风机</div>
           <div class="option-nav">
-            <div class="state">
+            <div class="state"  v-if="!isSimulate">
               <!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
               <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}">
                 <div class="state-icon"></div>
@@ -36,7 +36,7 @@
               </div>
             </div>
             <div class="power">
-              <div class="check-box">
+              <div class="check-box" v-if="!isSimulate">
 <!--                <div style="display: flex;">-->
 <!--                  <el-radio :label="true" @click="changeModel(item)">自动</el-radio>-->
 
@@ -46,7 +46,7 @@
                   <el-radio :label="false" @click.prevent ="changeModel(item,false)">手动</el-radio>
                 </el-radio-group>
               </div>
-              <div class="edit-power" title="输入完成后, 请回车进行修改">
+              <div class="edit-power" title="输入完成后, 请回车进行修改" v-if="!isSimulate">
                 <span style="color: white">给定频率</span>
                 <!--                  <span class="units"-->
                 <!--                  ><input-->
@@ -68,7 +68,7 @@
             </div>
           </div>
         </div>
-        <div class="current" @click="handleOpenChart(item)">
+        <div class="current" @click="handleOpenChart(item)" v-if="!isSimulate">
           <fan-info-item :wp="transducerData[index]"/>
         </div>
         <div class="line" v-if="index!=socketData.length-1"></div>
@@ -152,6 +152,7 @@ const props = defineProps({
   fanData: Array,
   transducerData: Array,
   loading: Number,
+  isSimulate: Boolean,
 });
 const chooseDayRef = ref();
 const chooseMonthRef = ref();

src/components/content/tunnelScene/PreviewScene.vue

@@ -44,10 +44,8 @@ import * as three from "three";
 import ThreeDScene from "./sceneClass/demo.js";
 import DevInfo from "./displayInfoComp/DevInfo.vue";
 import PreDialog from "./preEquComp/preDialog.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 {
@@ -126,7 +124,6 @@ const getDevDetail = async (devId) => {
 };
 
 // console.log(load);
-let isedit = ref(params.isedit);
 let fanData;
 let tunnelAlias = reactive("");
 
@@ -210,7 +207,6 @@ const getTunnel = () => {
     getTunnelDetail(params.tunnelId).then((res) => {
       if (res?.code === 1000) {
         form.value = res.data;
-        // console.log(form.value.tunnelAlias);
         tunnelAlias = form.value.tunnelAlias;
       }
     });
@@ -315,7 +311,7 @@ async function handleMounted() {
   demo.isedit = params.isedit;
   let tunnelasync = await demo.loadModel(
     GLTFLoader,
-    "/tunnelModel/chanel-have-wall-now-use.gltf"
+    "/tunnelModel/chanel-have-wall-now-use.gltf",
   );
   demo.addOrbitControls(OrbitControls);
   demo.addTween(TWEEN);
@@ -346,6 +342,7 @@ async function handleMounted() {
     // console.log(modelList.value);
     // console.log("init", params.tunnelId);
     demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
+    console.log("prew",modelList.value,fanData)
     // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
 
     demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));

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

@@ -0,0 +1,481 @@
+<template>
+  <div id="scene">
+    <div id="cvs" ref="content"></div>
+    <!-- 这里的预览模式需要做成不能修改的模式 -->
+    <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"
+    />
+    <pre-dialog
+        ref="info"
+        :pointNum="50"
+        :pointGap="50"
+        :equipmentType="equipmentType"
+        :equipmentName="equipmentName"
+        :equipmentValue="50"
+        :devRealtimeDetail="devRealtimeDetail"
+    />
+  </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 PreDialog from "./preEquComp/preDialog.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 {
+  CSS2DRenderer,
+  CSS2DObject,
+} from "three/addons/renderers/CSS2DRenderer.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,
+  watch,
+  defineProps,
+  defineExpose,
+} from "vue";
+import {ElMessage} from "element-plus";
+import {getScreenSimulateTunnel} from "@/api/tunnelManage";
+// 获取html标签跟随组件dom
+const content = ref(null);
+const info = ref(null);
+const edit = ref(null);
+const realtimeData = ref([]);
+let modelList = ref(null);
+let demo; //定义demo对象
+const loader = new OBJLoader();
+let hdrLoader = new RGBELoader();
+let backColorSet = three.sRGBEncoding;
+const params = defineProps([
+  "isedit",
+  "tunnelId",
+  "tunnelLength",
+  "form",
+  "deviceData",
+  "devRealtimeData",
+  "simulateData",
+  "tunnelAlias",
+]);
+
+// hover到设备回显参数
+let equipmentName = ref("");
+let equipmentType = ref("");
+let pointValue = ref({});
+let devRealtimeDetail = ref({
+  equipmentType: "",
+  value: "",
+  unit: "",
+});
+
+watch(
+    () => params.tunnelLength,
+    (now) => {
+      params.tunnelLength = now;
+      pointGap = now / 20;
+    },
+    {deep: true}
+);
+
+let pointGap = reactive(params.tunnelLength);
+onMounted(handleMounted);
+
+// 挂载后回调
+async function handleMounted() {
+  const doms = [info.value.$el, info.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"
+  );
+  demo.addOrbitControls(OrbitControls, true);
+  demo.addTween(TWEEN);
+  demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, 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 = [
+      {
+        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);
+    demo.enableLeftBtn = false; //关闭左键
+    demo.pointsVisible(false); //隐藏附着点
+    TunnelSceneSimulateRender(data);
+    // 初始化标牌信息
+    renderRoadPlane({nickname: params.tunnelAlias, length: 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) {
+  // 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;
+    pointValue.value = targetPoint.info
+    hoverDevEquipmentCallback(targetPoint.info);
+    editDevInfo(targetPoint.info);
+  }
+
+  demo.addFunction("editDev", editDev);
+}
+
+// 场景添加设备
+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 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",
+};
+
+//=============隧模型道数据仿真====================
+/**
+ * @description: 隧道中的设备重新模拟渲染
+ * @param {Object} data 渲染数据格式 [{equipmentId,equipmentName,pointName,equipmentType,equipmentValue}]
+ */
+function TunnelSceneSimulateRender(data) {
+  if (!demo) return;
+  const modeData = randomPosition([
+    ...data.frequencyChangerList,
+    ...data.windPressureSensorList,
+    ...data.sensorList,
+  ]).map((item) => ({
+    ...item,
+    equipmentType: item.equipmentType.startsWith("frequency")
+        ? "frequency"
+        : "sensor",
+  }));
+  demo.editTunnelInit(modeData); //渲染设备数据
+}
+
+/**
+ * @description: 鼠标悬浮在设备上时回调函数
+ */
+function hoverDevEquipmentCallback(targetPointInfo) {
+  const {
+    equipmentId,
+    equipmentName: eName,
+    equipmentType: eType,
+    typeKey,
+    unit: u,
+    value
+  } = targetPointInfo;
+  //请求到的实时数据进行渲染
+  //业务代码....获取设备实时数据
+  equipmentType.value = eType;
+  equipmentName.value = eName;
+  devRealtimeDetail.value.equipmentType = typeKey;
+  devRealtimeDetail.value.unit = u;
+  devRealtimeDetail.value.value = value; //1000替换为value
+}
+
+/**
+ * @description: 渲染隧道入口提示板信息
+ * @param {Object} data 隧道信息 {nickname,length}
+ */
+function renderRoadPlane(data) {
+  if (!demo) return;
+  const {nickname, length} = data; //隧道名称，长度
+  demo.SignsInf(nickname, length + "");
+}
+
+const changePointValue = (item) => {
+  if (item.equipmentId == pointValue.value.equipmentId) {
+    pointValue.value.value = item.value
+  }
+  hoverDevEquipmentCallback(pointValue.value)
+}
+defineExpose({
+  rerender, TunnelSceneSimulateRender, changePointValue
+});
+</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/sceneClass/demo.js

@@ -10,11 +10,11 @@ import {
 import { saveState, resetState } from "./viewBack";
 import addFunction from "./addEvent";
 import { editTunnelInit } from "./editTunnelInit";
-import { addEquipment, removeEquipment } from "./editEquipment";
+import { addEquipment, removeEquipment,clearTunnelEquipments } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit";
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
-// import { fa } from "element-plus/es/locale/index.js";
+import { realTimeRenderData } from "./realTimeRerender";
-// import { ref } from "vue";
+
 export default class Demo {
   // 摄像机看向位置s
   origin = null;
@@ -35,7 +35,8 @@ export default class Demo {
     this.removeEquipment = removeEquipment;
     this.previewtunnelModeInit = previewtunnelModeInit;
     this.editTunnelInit = editTunnelInit;
-
+    this.realTimeRenderData = realTimeRenderData;
+    this.clearTunnelEquipments = clearTunnelEquipments;
     // 外部可添加函数
     this.addFunction = addFunction;
     this.THREE = three;
@@ -205,7 +206,12 @@ export default class Demo {
     // child.material.emissive = child.material.color
     // child.material.emissiveMap = child.material.map
   }
-
+  //是否显示附着点
+  pointsVisible(isEnable = true) {
+   this.points.forEach((element) => {
+    element.material.visible = isEnable;
+  });
+  }
   // 添加轨道控制器
   /**
    * @param {Object} OrbitControls 轨道控制器
@@ -253,7 +259,9 @@ export default class Demo {
       const raycaster = new this.THREE.Raycaster();
       raycaster.setFromCamera(mouse, this.camera);
       const intersects = raycaster.intersectObjects(hoverModels);
+    
       if (intersects.length > 0) {
+        if(Object.keys(intersects[0].object).includes('enableHover') && !intersects[0].object.enableHover)return;
         if (!this.preHover) {
           this.preHover = intersects[0].object;
         } else {
@@ -328,6 +336,7 @@ export default class Demo {
   // 处理点击左右键触发的事件
   __handleListenerClickRLEvent(isClickModels, e) {
     e.preventDefault();
+    if (!this.enableLeftBtn) return;
     clearTimeout(this.EventTimer);
     this.EventTimer = setTimeout(() => {
       const mouse = new this.THREE.Vector2();
@@ -354,7 +363,6 @@ export default class Demo {
     this.CSS2Renderer = new CSS2Renderer();
     this.CSS2Renderer.setSize(window.innerWidth, window.innerHeight - 100);
     this.CSS2Renderer.render(this.scene, this.camera);
-
     this.mountedElement.appendChild(this.CSS2Renderer.domElement);
 
     // 初始化html标签

src/components/content/tunnelScene/sceneClass/editEquipment/index.js

@@ -1,4 +1,4 @@
-import Demo from "../demo";
+import { eq } from "lodash";
 import EquipmentTag from "../utils/EquipmentTag";
 /**
  *
@@ -34,7 +34,7 @@ function addEquipment(targetPoint, formInfo, fanData) {
 }
 
 //判断墙是否已经存在，如果存在的话，就不管，添加则无效嘛(就是说只能添加一面墙，如果存在一面墙，则不管了)
-let hasWall = false
+let hasWall = false;
 let wallHang = 0;
 
 // function handleValveEqu(targetPoint, equipmentInfo) {
@@ -49,8 +49,15 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   equMesh.position.copy(worldP);
 
   //设备添加标签
-  const tag = EquipmentTag(equipmentInfo.equipmentName);
+  const param = `${equipmentInfo.data || "--"} ${equipmentInfo.unit || "-"}`; //渲染设备参数(data)和单位（unit）
+  const tag = EquipmentTag(equipmentInfo.equipmentName, param);
   equMesh.getObjectByName("tag").material = tag;
+  this.deviceModels.push({
+    tagSpriteId: equMesh.getObjectByName("tag").id,
+    equipmentId: equipmentInfo.equipmentId,
+    objId: equMesh.id,
+  });
+  this.realTimeRenderData(231321);
   if (/tr$/.test(targetPoint.name)) {
     equMesh.rotation.z = -Math.PI / 2;
     equMesh.rotation.y -= Math.PI / 4;
@@ -195,11 +202,10 @@ function handleFanEqu(
     if (item.isMesh) {
       item.material = item.material.clone();
     }
-  })
+  });
   // equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
   // console.log(equMesh);
 
-
   const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
   equMesh.position.copy(worldP);
   equMesh.translateY(-0.6);
@@ -213,15 +219,13 @@ function handleFanEqu(
     ...equipmentInfo,
   };
   //我们把风机的附着点挂在原型上，这样应该可以进行处理
-  if (targetPoint.info.equipmentName.slice(0, 1) == '1') {
+  if (targetPoint.info.equipmentName.slice(0, 1) == "1") {
-    this.scene.Fan1targetPoint = targetPoint
+    this.scene.Fan1targetPoint = targetPoint;
   } else {
-    this.scene.Fan2targetPoint = targetPoint
+    this.scene.Fan2targetPoint = targetPoint;
   }
   //这里感觉情况改变风机的颜色
-  changeFanColor(fanData, targetPoint, this.scene)
+  changeFanColor(fanData, targetPoint, this.scene);
-
-
 
   // 定义风机旋转
   const fanLeaf = equMesh.getObjectByName("fan_leafs");
@@ -233,6 +237,11 @@ function handleFanEqu(
     fanLeaf.rotation.z = obj.rotation;
   });
   this.fanSpinArray.push(fanSpin);
+  this.deviceModels.push({
+    tagSpriteId: "",
+    equipmentId: equipmentInfo.equipmentId,
+    objId: equMesh.id,
+  });
 }
 
 // 删除传感器
@@ -240,7 +249,6 @@ function removeEquipment(targetPoint) {
   //删除设备这里需要再进行处理，就是根据附着点（附着点一定保存了当前添加设备的信息了）判断是不是分压阀，然后继续一样的隐藏
   if (!targetPoint.hasDevice) return;
 
-
   //删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
   //如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用
 
@@ -286,8 +294,6 @@ function removeEquipment(targetPoint) {
   // }
   // deleteItem(Allhang, Number(lineIndex))
 
-
-
   console.log("测试是不是删除了");
   const mesh = this.scene.getObjectById(targetPoint.info.id);
   this.scene.remove(mesh);
@@ -298,13 +304,12 @@ function removeEquipment(targetPoint) {
 }
 export { addEquipment, removeEquipment };
 
-
 function deleteItem(array, item) {
   let index = array.indexOf(item);
   if (index !== -1) {
     array.splice(index, 1);
   }
-  return array
+  return array;
 }
 
 // 这里是改变风机颜色的代码
@@ -315,7 +320,7 @@ function changeFanColor(fanData, targetPoint, scene) {
       //if保证存在风机（即有长度再进行遍历）
       for (let i = 0; i < fanData.length; i++) {
         //先做匹配操作
-        let fanType = fanData[i].equipmentType
+        let fanType = fanData[i].equipmentType;
         //有符合条件的风机进来了
         if (targetPoint.info.typeKey == fanType) {
           //下面进行变色需要的逻辑判断了
@@ -327,9 +332,9 @@ function changeFanColor(fanData, targetPoint, scene) {
                   // console.log(obj);
                   // 判断子对象是否是物体，如果是，更改其颜色
                   if (obj.isMesh) {
-                    obj.material.color.set(0xFF0000)
+                    obj.material.color.set(0xff0000);
                   }
-                })
+                });
               }
             });
           } else {
@@ -342,9 +347,9 @@ function changeFanColor(fanData, targetPoint, scene) {
                     // console.log(obj);
                     // 判断子对象是否是物体，如果是，更改其颜色
                     if (obj.isMesh) {
-                      obj.material.color.set(0x008000)
+                      obj.material.color.set(0x008000);
                     }
-                  })
+                  });
                 }
               });
             } else {
@@ -356,4 +361,21 @@ function changeFanColor(fanData, targetPoint, scene) {
       }
     }
   }
-}
+}
+
+export function clearTunnelEquipments() {
+  if (this.group) this.scene.remove(this.group);
+  if (this.scene.getObjectByName("boxHelper")) {
+    const preModel = this.scene.getObjectByName("boxHelper");
+    this.scene.remove(preModel);
+  }
+  this.scene.traverse(function (point) {
+    if (/^point/.test(point.name)) {
+      point.hasDevice = false;
+    }
+  });
+  this.deviceModels.forEach((deviceModel) => {
+    this.scene.remove(this.scene.getObjectById(deviceModel.objId));
+  });
+  this.deviceModels = [];
+}

src/components/content/tunnelScene/sceneClass/editTunnelInit/index.js

@@ -1,6 +1,16 @@
 export function editTunnelInit(equipmentList) {
+  // 清空设备
+  this.clearTunnelEquipments();
   //初始化将墙壁隐藏起来
   equipmentList.forEach((item) => {
-    this.addEquipment(this.scene.getObjectByName(item.position), item, 1);
+    // 根据定位获取附着点信息
+    const target = this.scene.getObjectByName(item.position);
+    this.addEquipment(target, item, 1);
+  });
+  this.scene.traverse(function (point) {
+    if (/^point/.test(point.name)) {
+      point.enableHover =
+        equipmentList.findIndex((item) => item.position === point.name) >= 0;
+    }
   });
 }

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js

@@ -1,4 +1,5 @@
 export function handleLHover(targetPoint) {
+  // if(Object.keys(targetPoint).includes('enableHover') && !targetPoint.enableHover)return;
   if (this.tag3CSS2DObj.element.style.opacity != '1') {
     // 保存进入状态
     this._saveState();

src/components/content/tunnelScene/sceneClass/handleRLclick/handleRclick.js

@@ -1,6 +1,5 @@
 import toImg from "../utils/EquipmentTag";
 export function handleRClick(targetPoint) {
-  return;
   this.clearTagsObj();
   const worldPosition = new this.THREE.Vector3();
   //获取附着点的世界坐标系

src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js

@@ -11,7 +11,6 @@ export default function previewtunnelModeInit(equipmentList, fanData) {
     //     }
     // }
     // console.log(equipmentList);
-
     equipmentList.forEach((item) => {
         this.addEquipment(this.scene.getObjectByName(item.position), item, fanData);
     });

src/components/content/tunnelScene/sceneClass/realTimeRerender/index.js

@@ -0,0 +1,5 @@
+export function realTimeRenderData(realTimeData) {
+  this.deviceModels.forEach((deviceModel) => {
+    this.scene.getObjectById(deviceModel.tagSpriteId);
+  });
+}

src/components/content/usedEle/UsedEle.vue

@@ -233,20 +233,21 @@ const changeNum = (item) => {
   }
 }
 const setValueA = () => {
-  if (electricityConsumptionMonthly.value === 0 || length.value === null) {
+  if (electricityConsumptionMonthly.value === 0 || length.value === null||electricityConsumptionMonthly.value<0) {
     valueA.value.style.height = `0px`;
   }
-  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 200000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 1000000;
   valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
-  if (monthlySavings.value === 0 || length.value === null) {
+  if (monthlySavings.value === 0 || length.value === null||monthlySavings.value<0) {
     valueB.value.style.height = `0px`;
   }
-  let width = (monthlySavings.value * length.value?.offsetHeight) / 200000;
+  let width = (monthlySavings.value * length.value?.offsetHeight) / 1000000;
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
+  if(!data)return;
   electricityConsumptionMonthly.value = data.electricityConsumptionCount
   monthlySavings.value = data.conserveElectricityCount
 }

src/components/content/windPressure/WindPressureList.vue

@@ -26,10 +26,10 @@
           <div class="export-btn" @click="handleExport">
             导出
           </div>
-          <choose-day v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <choose-day v-if="isSimulate?selectTimeButton === 0:selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
           <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
-              :buttonList="timeList"
+              :buttonList="isSimulate?timeSimulateList:timeList"
               v-model="selectTimeButton"
               @select="timeSelect"
           />
@@ -52,7 +52,7 @@
 import WindPressureItem from "./childComps/WindPressureItem.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
-import {getEchartsInfo} from "@/api/largeScreen";
+import {getEchartsInfo, getSimulationEchartsInfo} from "@/api/largeScreen";
 import ChooseDay from "@/components/chooseDates/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import elementResizeDetectorMaker from "element-resize-detector";
@@ -63,6 +63,7 @@ const props = defineProps({
   list: Array,
   winData: Array,
   loading: Number,
+  isSimulate: Boolean,
 });
 const loadingText = ref('加载中...')
 const chooseDayRef = ref();
@@ -70,7 +71,7 @@ const chooseMonthRef = ref();
 const windSort = ref(1)
 const windSortId = ref(1)
 const timeList = ref(["年", "月", "日"]);
-const selectTimeButton = ref(2);
+const timeSimulateList = ref(["日"]);
 const isVisited = ref(false);
 const isFullScreen = ref(false);
 let chartData = reactive([])
@@ -80,6 +81,7 @@ let myEcharts = reactive({});
 const wpList = ref([]);
 const clickMonth = ref('')
 const clickDay = ref('')
+const selectTimeButton = ref(props.isSimulate?0:2);
 watch(() => props.list, (now) => {
   wpList.value.forEach(item => {
     now.forEach(newItem => {
@@ -201,29 +203,57 @@ const getWindInfo = (equipmentId, type = 'day', time = '', flag, startTime, endT
       }
     }
   })
-  getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
+  if(props.isSimulate) {
-    if (res?.code === 1000) {
+    getSimulationEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
-      showLoading.value = false
+      if (res?.code === 1000) {
-      chartData = res.data
+        showLoading.value = false
-      nextTick(() => {
+        chartData = res.data
-        if (flag) {
+        nextTick(() => {
-          const fanChart = document.getElementById('container')
+          if (flag) {
-          const erd = elementResizeDetectorMaker();
+            const fanChart = document.getElementById('container')
-          erd.listenTo(document.getElementById('windDialog'), (element) => {
+            const erd = elementResizeDetectorMaker();
-            fanChart.style.height = element.offsetHeight - 140 + 'px'
+            erd.listenTo(document.getElementById('windDialog'), (element) => {
-            myEcharts.resize();
+              fanChart.style.height = element.offsetHeight - 140 + 'px'
-          });
+              myEcharts.resize();
-          if (isFullScreen.value) {
+            });
-            initChart(res.data.dates, res.data.values, dataZoomTop)
+            if (isFullScreen.value) {
+              initChart(res.data.dates, res.data.values, dataZoomTop)
+            }
+          } else {
+            shrinkScreen()
           }
-        } else {
+        })
-          shrinkScreen()
+      } else {
-        }
+        loadingText.value = res.msg
-      })
+      }
-    } else {
+    })
-      loadingText.value = res.msg
+
-    }
+  }else{
-  })
+    getEchartsInfo(equipmentId, time, type, startTime, endTime).then(res => {
+      if (res?.code === 1000) {
+        showLoading.value = false
+        chartData = res.data
+        nextTick(() => {
+          if (flag) {
+            const fanChart = document.getElementById('container')
+            const erd = elementResizeDetectorMaker();
+            erd.listenTo(document.getElementById('windDialog'), (element) => {
+              fanChart.style.height = element.offsetHeight - 140 + 'px'
+              myEcharts.resize();
+            });
+            if (isFullScreen.value) {
+              initChart(res.data.dates, res.data.values, dataZoomTop)
+            }
+          } else {
+            shrinkScreen()
+          }
+        })
+      } else {
+        loadingText.value = res.msg
+      }
+    })
+
+  }
   nextTick(() => {
     loadingText.value = '加载中...'
   })

src/components/deviceManage/index.vue

@@ -0,0 +1,738 @@
+<template>
+  <div class="device-content">
+    <div class="device-box">
+      <div class="box-left">
+        <el-menu
+            default-active="1"
+            @select="handleChangeMenu"
+        >
+          <el-menu-item index="1">
+            <span>风机</span>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <span>风压</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <span>其他传感器</span>
+          </el-menu-item>
+          <!--            <el-menu-item index="4">-->
+          <!--              <span>分流器</span>-->
+          <!--            </el-menu-item>-->
+        </el-menu>
+      </div>
+      <div class="box-right" v-if="changeIndex==1">
+        <div class="device-title">
+          <span>风机设备管理</span>
+          <div class="collection-frequency">
+            <span>采集频率</span>
+            <el-input type="number" v-model="fanFrequency">
+              <template #suffix>
+                <span>秒/次</span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="device-table">
+          <el-table stripe
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    table-layout="auto"
+                    :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">-->
+            <!--              <template #default="scope">-->
+            <!--                <el-input placeholder="额定功率" v-model="scope.row.ratedPower"-->
+            <!--                ></el-input>-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
+            <!--            <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>-->
+            <!--            <el-table-column prop="acurrentValue" label="A电流阈值" align="center">-->
+            <!--              <template #default="scope">-->
+            <!--                <el-input placeholder="A电流" v-model="scope.row.acurrentValue"-->
+            <!--                ></el-input>-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
+            <!--            <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>-->
+            <!--            <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">-->
+            <!--              <template #default="scope">-->
+            <!--                <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"-->
+            <!--                ></el-input>-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
+            <!--            <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>-->
+            <!--            <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">-->
+            <!--              <template #default="scope">-->
+            <!--                <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"-->
+            <!--                ></el-input>-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
+            <el-table-column prop="state" label="状态" align="center" width="200">
+              <template #default="scope">
+                <div class="switch">
+                  <div
+                      :class="{ active: scope.row.state }"
+                      @click="scope.row.state = 1; "
+                  >
+                    启用
+                  </div>
+                  <div
+                      :class="{ active: ! scope.row.state }"
+                      @click=" scope.row.state = 0; "
+                  >
+                    停用
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="btns">
+          <div class="cancel-btn" @click="emit('cancel')">
+            取消
+          </div>
+          <div class="sure-btn" @click="editEquip">
+            开始模拟
+          </div>
+        </div>
+      </div>
+      <div class="box-right" v-if="changeIndex==2">
+        <div class="device-title">
+          <span>风压设备管理</span>
+          <div class="collection-frequency">
+            <span>采集频率</span>
+            <el-input type="number" v-model="windFrequency">
+              <template #suffix>
+                <span>秒/次</span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="device-table">
+          <el-table stripe table-layout="auto"
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    :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="unit" label="单位" align="center">
+              <template #default="scope">
+                <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="alarmValue" label="阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="miniRange" label="最小范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxRange" label="最大范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="state" label="状态" align="center" width="200">
+              <template #default="scope">
+                <div class="switch wind-switch">
+                  <div
+                      :class="{ active: scope.row.state }"
+                      @click=" scope.row.state = 1; "
+                  >
+                    启用
+                  </div>
+                  <div
+                      :class="{ active: ! scope.row.state }"
+                      @click=" scope.row.state =  0; "
+                  >
+                    停用
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="btns">
+          <div class="cancel-btn" @click="emit('cancel')">
+            取消
+          </div>
+          <div class="sure-btn" @click="editEquip">
+            开始模拟
+          </div>
+        </div>
+      </div>
+      <div class="box-right" v-if="changeIndex==3">
+        <div class="device-title">
+          <span>其他传感器设备管理</span>
+          <div class="collection-frequency">
+            <span>采集频率</span>
+            <el-input type="number" v-model="otherFrequency">
+              <template #suffix>
+                <span>秒/次</span>
+              </template>
+            </el-input>
+          </div>
+        </div>
+        <div class="device-table">
+          <el-table stripe table-layout="auto"
+                    style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
+                    :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="unit" label="单位" align="center">
+              <template #default="scope">
+                <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="alarmValue" label="阈值" align="center">
+              <template #default="scope">
+                <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="miniRange" label="最小范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxRange" label="最大范围" align="center">
+              <template #default="scope">
+                <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                ></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="state" label="状态" align="center" width="200">
+              <template #default="scope">
+                <div class="switch wind-switch">
+                  <div
+                      :class="{ active: scope.row.state }"
+                      @click=" scope.row.state = 1; "
+                  >
+                    启用
+                  </div>
+                  <div
+                      :class="{ active: ! scope.row.state }"
+                      @click=" scope.row.state =  0; "
+                  >
+                    停用
+                  </div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="btns">
+          <div class="cancel-btn" @click="emit('cancel')">
+            取消
+          </div>
+          <div class="sure-btn" @click="editEquip">
+            开始模拟
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage} from "element-plus";
+import {
+  getEquipmentList,
+  editEquipment,
+  getTunnelDetail,
+  getOtherSensorSerialNumberOptions,
+  getWindPressureSerialNumberOptions, getSimulateTunnelDetail, editSimulateEquipment
+} from "@/api/tunnelManage";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {debounce} from 'lodash'
+import {defineEmits} from "vue";
+import {startSimulation} from "@/api/largeScreen.js";
+
+const router = useRouter()
+const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
+const userId = reactive(router.currentRoute.value.params.userId)
+const type = reactive(router.currentRoute.value.params.type)
+const fanFrequency = ref(0)
+const windFrequency = ref(0)
+const otherFrequency = ref(0)
+const changeIndex = ref(1)
+const fanData = ref([])
+const winData = ref([])
+const windPressureDataSerialNumberOptions = ref([])
+const otherSensorSerialNumberOptions = ref([])
+const otherData = ref([])
+const winDataSelectedOption = ref([])
+const fenLiuData = ref([])
+const siteId = ref(0)
+const emit = defineEmits([
+  "cancel"
+]);
+
+const changeData = (item) => {
+  return {
+    equipmentId: item.equipmentId,
+    unit: item.unit,
+    alarmValue: item.alarmValue,
+    serialNumber: item.serialNumber,
+    miniRange: parseInt(item.miniRange),
+    maxRange: parseInt(item.maxRange),
+    state: item.state,
+  }
+}
+const editEquip = debounce(() => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '开始模拟中',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  let newFrequency = [{
+    acquisitionPeriod: fanFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'frequency'
+  }, {
+    acquisitionPeriod: windFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'windPressure'
+  }, {
+    acquisitionPeriod: otherFrequency.value * 1000,
+    tunnelId: parseInt(tunnelId),
+    typeKey: 'sensor'
+  }]
+  let newFan = []
+  let newWind = []
+  let newSensor = []
+  fanData.value.forEach(item => {
+    let obj = {
+      equipmentId: item.equipmentId,
+      ratedPower: parseInt(item.ratedPower),
+      acurrentValue: parseInt(item.acurrentValue),
+      bcurrentValue: parseInt(item.bcurrentValue),
+      ccurrentValue: parseInt(item.ccurrentValue),
+      serialNumber: item.serialNumber,
+      state: parseInt(item.state)
+    }
+    newFan.push(obj)
+  })
+  winData.value.forEach(item => {
+    newWind.push(changeData(item))
+  })
+  otherData.value.forEach(item => {
+    newSensor.push(changeData(item))
+  })
+  const basicData = {
+    projectId: tunnelId,
+    acquisitionList: newFrequency,
+    frequencyChangerList: newFan,
+    windPressureSensorList: newWind,
+    sensorList: newSensor,
+  }
+  editSimulateEquipment(basicData).then(async res => {
+    if (res.code === 1000) {
+      loading.close()
+      let res = await startSimulation(tunnelId)
+      // console.log('res', res)
+      if (res.code === 1000) {
+        ElMessage.success('开始模拟')
+      }else{
+        ElMessage.warning(res.msg)
+      }
+      emit('submit')
+    } else {
+      ElMessage.error(res.msg)
+      loading.close()
+    }
+  })
+}, 100)
+
+const handleChangeMenu = (e) => {
+  changeIndex.value = e
+}
+
+const getList = async () => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  await getSimulateTunnelDetail(tunnelId).then(res => {
+    if (res.code === 1000) {
+      fanData.value = res.data.equipmentList.frequencyChangerList
+      res.data.equipmentList.windPressureSensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      winData.value = res.data.equipmentList.windPressureSensorList
+      res.data.equipmentList.sensorList?.forEach(item => {
+        item.offset = item.offset + 4000
+      })
+      otherData.value = res.data.equipmentList.sensorList
+      res.data.equipmentList.acquisitionList?.map(item => {
+        item.acquisitionPeriod = item.acquisitionPeriod / 1000
+        if (item.typeKey === 'frequency') {
+          fanFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'windPressure') {
+          windFrequency.value = item.acquisitionPeriod
+        } else if (item.typeKey === 'sensor') {
+          otherFrequency.value = item.acquisitionPeriod
+        }
+      })
+    }
+    loading.close()
+  })
+}
+getList()
+</script>
+<style lang="scss">
+.serialNumber {
+  .el-input {
+    width: 570px !important;
+  }
+
+  .el-select__suffix {
+    .el-icon {
+      width: 3em !important;
+      height: 3em !important;
+      color: #fff !important;
+
+      svg {
+        width: 3em !important;
+        height: 3em !important;
+      }
+    }
+  }
+
+  .el-input__suffix-inner {
+    .el-icon {
+      width: 3em !important;
+      height: 3em !important;
+      color: #fff !important;
+
+      svg {
+        width: 3em !important;
+        height: 3em !important;
+      }
+    }
+  }
+}
+
+.el-select.serialNumber {
+  width: 580px !important;
+  border-radius: 6px !important;
+  border: 1px solid #05FEFF !important;
+  background-color: transparent !important;
+
+  .el-select__wrapper {
+    height: 54px !important;
+    color: #FFFFFF !important;
+    font-size: 40px !important;
+    //height: auto!important;
+    line-height: normal !important;
+    border-radius: 6px !important;
+    border: 1px solid #05FEFF !important;
+    background-color: transparent !important;
+  }
+
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
+  }
+}
+
+
+.serialNumber-select.el-popper {
+  background: #064B66 !important;
+  border: 2px solid #05FEFF !important;
+
+  .el-select-dropdown {
+    min-width: 130px !important;
+  }
+
+  .el-select-dropdown__item.is-hovering {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-dropdown__item {
+    color: #FFFFFF;
+    border-bottom: 1px solid #05FEFF;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .el-select-dropdown__item.is-selected {
+    color: #F7B500 !important;
+  }
+
+  .el-select-dropdown__item.selected {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: transparent !important;
+    color: #F7B500;
+  }
+
+  .el-select-dropdown__item.is-disabled {
+    background-color: transparent !important;
+    color: #fff !important;
+  }
+}
+</style>
+<style scoped lang="scss">
+
+.box-top {
+  display: flex;
+  justify-content: flex-start;
+
+  .tunnel-name {
+    margin-left: 120px;
+    height: 61px;
+    font-size: 46px;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 61px;
+  }
+
+  .back-tunnel {
+    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;
+
+    .back-icon {
+      margin-right: 20px;
+      margin-left: 23px;
+      width: 33px;
+      height: 33px;
+      background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+    }
+  }
+}
+
+.device-content {
+  display: flex;
+  justify-content: center;
+  padding-top: 300px;
+
+  .device-box {
+    z-index: 9999;
+    display: flex;
+    width: 2500px;
+    height: 1600px;
+    background: #064B66;
+    border-radius: 20px;
+    border: 2px solid #05FEFF;
+    box-sizing: border-box;
+
+    .box-left {
+      padding-left: 24px;
+      width: 300px;
+      height: 1596px;
+      background: #0D5A7A;
+      border-radius: 20px 0px 0px 20px;
+
+      :deep(.el-menu) {
+        border-right: none;
+        margin-top: 261px;
+        background-color: #0D5A7A;
+
+        .el-menu-item.is-active {
+          background-image: url(../../assets/images/device/sdgl_xz.png);
+        }
+
+        .el-menu-item {
+          color: #fff;
+          height: 90px;
+          font-size: 40px;
+
+          &:hover {
+            background-color: #0D5A7A;
+          }
+
+          &:first-child {
+            letter-spacing: 120px;
+          }
+
+          &:nth-child(2) {
+            letter-spacing: 120px;
+          }
+
+          //&:nth-child(4) {
+          //  letter-spacing: 40px;
+          //}
+        }
+      }
+    }
+
+    .box-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      .device-title {
+        margin-top: 60px;
+        line-height: 61px;
+        color: #FFFFFF;
+        display: flex;
+        justify-content: center;
+
+        > span:first-child {
+          font-size: 46px;
+          font-weight: bold;
+        }
+
+        .collection-frequency {
+          height: 60px;
+          display: flex;
+          align-items: center;
+          position: absolute;
+          right: 102px;
+
+          > span:first-child {
+            font-size: 38px !important;
+            white-space: pre;
+            margin-right: 15px;
+          }
+
+          :deep(.el-input__wrapper) {
+            width: 166px;
+            height: 56px;
+            background-color: transparent;
+            box-shadow: none;
+            border-radius: 6px;
+            border: 1px solid #05FEFF;
+            transform: none;
+            transition: none;
+
+            .el-input__inner {
+              height: 54px;
+              font-size: 30px;
+              color: #FFFFFF;
+            }
+
+            .el-input__suffix-inner {
+              font-size: 30px;
+              color: #08B7B8;
+              line-height: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    .btns {
+      width: 100%;
+      margin: 0 auto;
+      position: absolute;
+      bottom: 70px;
+    }
+
+    .device-table {
+      margin-top: 50px;
+      margin-left: 50px;
+      margin-right: 50px;
+
+      .active {
+        color: #FFFFFF;
+        background: #0f7da9;
+      }
+
+      .wind-switch {
+        //margin-left: 26px;
+      }
+
+      .switch {
+        margin-top: 22px;
+
+        display: flex;
+        width: 200px;
+        height: 50px;
+        border-radius: 6px;
+        border: 1px solid #05FEFF;
+        overflow: hidden;
+        color: #51A2B3;
+        line-height: 40px;
+        font-size: 36px;
+
+        & > div {
+          flex: 1;
+          text-align: center;
+          cursor: pointer;
+        }
+      }
+
+      :deep(.el-table--fit) {
+        //width: 1780px !important;
+        width: auto;
+      }
+
+      :deep(.cell) {
+        height: 80px;
+        line-height: 80px;
+        color: #fff;
+        font-size: 38px;
+      }
+
+      :deep(.el-table tr) {
+        background-color: #1C5971;
+      }
+
+      :deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {
+        background-color: #1C5971;
+      }
+
+      :deep(.el-table__row--striped) {
+        background-color: #13849C !important;
+      }
+
+      :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+        background-color: #13849C !important;
+      }
+
+      :deep(.el-table__cell) {
+        .el-input {
+          width: 180px;
+          height: 53px;
+        }
+
+        .el-input__wrapper {
+          border-radius: 6px;
+          border: 1px solid #05FEFF;
+          background-color: transparent;
+
+          .el-input__inner {
+            color: #FFFFFF;
+            font-size: 40px;
+            height: auto;
+            line-height: normal;
+          }
+        }
+      }
+
+      :deep(.el-table__inner-wrapper::before) {
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/components/manageBtn/index.vue

@@ -51,10 +51,11 @@ const btnList = ref([
   //   icon: 'sp_icon_xtgl.png',
   //   name: '系统管理'
   // },
-  // {
+  {
-  //   icon: 'sp_icon_mngl.png',
+    route: '/simulate',
-  //   name: '模拟仿真'
+    icon: 'sp_icon_mngl.png',
-  // },
+    name: '模拟仿真'
+  },
 ])
 const newList=ref([])
 const selectButton = ref(props.modelValue);

src/store/modelSceneStore.js

@@ -44,7 +44,7 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
       return new Promise((resolve, reject) => {
         initSceneData(tunnelId)
           .then((res) => {
-            console.info("🚀 ~method:initSceneData -----", res)
+            // console.info("🚀 ~method:initSceneData -----", res)
             serialNumber.value=res.data.serialNumber
             serialNumberPrefix.value=res.data.serialNumberPrefix
             tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList

src/views/debug/index.vue

@@ -76,7 +76,7 @@ const handleSend = () => {
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.176:9000/websocket/debug/${token}/${serialNumber.value}`
   // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
   console.log(wsUrl)
   socket = new WebSocket(wsUrl)
   //连接发生错误的回调方法

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>
@@ -15,37 +16,19 @@
         <!--        <span class="all-btn" :style="{color:!isPreview?'#f7b500':'#0BE9FA'}" @click="changeTunnelSimulateMode(false)">编辑模式</span>-->
       </div>
       <div class="top-right" v-if="isPreview">
-        <div class="current-site">
+        <!--        <div class="current-site">-->
-          当前站点：<span>{{ currentSite }}</span>
+        <!--          <el-icon-->
-          <el-dropdown
+        <!--              size="50"-->
-            trigger="click"
+        <!--              color="#0BE9FA"-->
-            @command="handleChangeSite"
+        <!--              style="margin-left: 50px; cursor: pointer"-->
-            popper-class="dropdown-style"
+        <!--              @click="-->
-          >
+        <!--              isVisited = true;-->
-            <div class="toggle"></div>
+        <!--              getAlarmList();-->
-            <template #dropdown>
+        <!--            "-->
-              <el-dropdown-menu>
+        <!--          >-->
-                <el-dropdown-item
+        <!--            <Bell/>-->
-                  v-for="item in siteList"
+        <!--          </el-icon>-->
-                  :key="item.value"
+        <!--        </div>-->
-                  :command="item"
-                  >{{ item.label }}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-          <el-icon
-            size="50"
-            color="#0BE9FA"
-            style="margin-left: 50px; cursor: pointer"
-            @click="
-              isVisited = true;
-              getAlarmList();
-            "
-          >
-            <Bell />
-          </el-icon>
-        </div>
         <div class="current-user">
           你好！<span>{{ currentUser }}</span>
           <span>今天是：{{ currentDate }}</span>
@@ -53,348 +36,148 @@
         </div>
       </div>
     </div>
-
+    <device-manage
-    <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
+        v-if="showDevice"
-    <preview-scene
+        @cancel="cancelDeviceManage"
-      id="tunnel-box"
+        @submit="submitDevice"
-      :isedit="false"
+    />
-      :tunnelId="tunnelId"
+    <!--    模拟隧道模式-->
-      :key="tunnelId"
+    <preview-scene-simulate
-      :tunnelLen="tunnelLen"
+        ref="previewRef"
-      :largeScreen="largeScreen"
+        id="tunnel-box"
-      :fanList="socketData.leftData"
+        :isedit="false"
-    ></preview-scene>
+        :device-data="largeScreenData"
+        :tunnelLength="tunnelLength"
+        :tunnelId="tunnelId"
+        :tunnelAlias="tunnelAlias"
+        :devRealtimeData="socketData"
+    ></preview-scene-simulate>
     <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"
-          :fan-data="largeScreenData"
+            :isSimulate="true"
-          :transducer-data="largeScreenData"
+            :fan-data="largeScreenData"
-          :loading="showFanLoading"
+            :transducer-data="largeScreenData"
-          :tunnel-id="tunnelId"
+            :loading="showFanLoading"
-        />
+            :tunnel-id="tunnelId"
-        <used-ele
-          v-if="showFan"
-          :list="socketData.leftData"
-          :loading="showUsedLoading"
-          :ele-data="largeScreenData"
         />
+        <!--        <used-ele-->
+        <!--            v-if="showFan"-->
+        <!--            :list="socketData.leftData"-->
+        <!--            :loading="showUsedLoading"-->
+        <!--            :ele-data="largeScreenData"-->
+        <!--        />-->
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </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"
-          :win-data="largeScreenData"
+            :isSimulate="true"
-          :loading="showWindLoading"
+            :win-data="largeScreenData"
+            :loading="showWindLoading"
         />
         <air-info
-          v-if="showFan"
+            v-if="showFan"
-          :list="socketData.sensor"
+            :list="socketData.sensor"
-          :windSpeed="socketData.windSpeed"
+            :windSpeed="socketData.windSpeed"
-          :air-data="largeScreenData"
+            :isSimulate="true"
+            :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"
-          :tunnelId="tunnelId"
+            :isSimulate="true"
-          :loading="showBadLoading"
+            :tunnelId="tunnelId"
+            :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 class="switch-btn">
-      <div class="arrow" @click="previousBtn"></div>
-      <el-carousel
-        height="150px"
-        type="card"
-        ref="tunnelBtn"
-        :autoplay="false"
-        :initial-index="initialIndex"
-        @change="changeTunnel"
-      >
-        <div class="btn">
-          <el-carousel-item v-for="item in tunnelList" :key="item.value">
-            {{ item.label }}
-          </el-carousel-item>
-        </div>
-      </el-carousel>
-      <div class="arrow right" @click="nextBtn"></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>
-import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue";
+import PreviewSceneSimulate from "@/components/content/tunnelScene/TunnelSceneSimulate.vue";
 import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
-import UsedEle from "@/components/content/usedEle/UsedEle.vue";
 import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
 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,
-  getTunnelBySiteId,
   getAlarmInfo,
   deleteAlarmSate,
   getAlarmDetail,
   updateAlarmState,
+  endSimulation,
+  blastingSimulation, simulationState,
 } from "@/api/largeScreen";
-import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
-import { getUserInfo } from "@/api/login";
+import {getUserInfo} from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import {
-import { getTunnelList } from "@/api/tunnelManage";
+  getScreenSimulateTunnel,
-import { debounce } from "lodash";
+  getSimulateTunnelDetail,
+} from "@/api/tunnelManage";
 
+let largeScreen = computed(() => largeScreenData);
 const authStore = useAuthStore();
 const router = useRouter();
 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 previewRef = ref();
-const selectIndex = ref(-1);
-const isVisited = ref(false);
-const isDetailVisited = ref(false);
 const showFan = ref(false);
+const showDevice = ref(false);
 const drawerLeft = ref(true);
 const showTunnelTitle = ref(true);
 const isPreview = ref(true);
 const loading = ref(false);
-const tableEmptyText = ref("加载中~");
-const initialIndex = ref(0);
 const showFanLoading = ref(0);
-const showUsedLoading = ref(0);
 const showWindLoading = ref(0);
 const showBadLoading = ref(0);
 const isStartSimulate = ref(true);
 const drawerRight = ref(true);
-const showMenu = ref(false);
 const currentSiteId = ref(0);
-const currentSite = ref("");
-const siteList = ref([]);
-const alarmList = ref([]);
-const alarmDetail = ref([]);
-const totalTunnelList = ref([]);
 const currentUser = ref("");
 const currentUserId = ref(0);
 const currentDate = ref(dateFormat());
-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("");
-let pattern = reactive(new RegExp("[A-Za-z]+"));
-let isTunnel = reactive(false);
-// const equipmentOption = ref([])
-const btnList = ref([
-  {
-    route: "/site",
-    icon: "sp_icon_zdgl.png",
-    name: "站点管理",
-  },
-  {
-    route: "/tunnel",
-    icon: "sp_icon_sdgl.png",
-    name: "隧道管理",
-  },
-  {
-    route: "/user",
-    icon: "sp_icon_yhgl.png",
-    name: "用户管理",
-  },
-  // {
-  //   route: '/system',
-  //   icon: 'sp_icon_xtgl.png',
-  //   name: '系统管理'
-  // },
-  // {
-  //   icon: 'sp_icon_mngl.png',
-  //   name: '模拟仿真'
-  // },
-]);
 const serialNumber = ref("");
 const roleKey = ref("");
 let token = getToken();
 let send = {
   type: "ping",
 };
-const pageInfo = reactive({
-  pageNum: 1,
-  pageSize: 10,
-});
-const queryForm = ref();
 const form = ref();
-const total = ref(10);
 const largeScreenData = ref(null);
 const socketData = reactive({
   leftData: [],
@@ -403,102 +186,43 @@ const socketData = reactive({
   windSpeed: [],
 });
 let tunnelLen = computed(() => tunnelLength);
-const queryParams = reactive({
-  equipmentId: "",
-  lookupStatus: "",
-});
 onMounted(() => {
-  getList();
   getUser();
-  getOtherInfo();
+  getScreenInfo(previewId);
+
+  getBasicData(previewId);
   nextTick(() => {
     showFan.value = true;
   });
 });
 const startSimulate = () => {
   isStartSimulate.value = false;
+  showDevice.value = true;
 };
-const endSimulate = () => {
+const cancelDeviceManage = () => {
   isStartSimulate.value = true;
+  showDevice.value = false;
 };
-const changeName = (id) => {
+const submitDevice = () => {
-  for (let item of equipmentOption.value) {
+  isStartSimulate.value = false;
-    if (item.value === id) {
+  showDevice.value = false;
-      return item.label;
+  getScreenInfo(previewId, true);
-    }
+
-  }
-  return "";
 };
-const handleReset = () => {
+const simulatedBlasting = () => {
-  queryForm.value.resetFields();
+  ElMessageBox.confirm(`是否确定模拟爆破`, '系统提示', {
-  getAlarmList();
+    confirmButtonText: '确定',
-};
+    cancelButtonText: '取消',
-//点击页码进行分页功能
+    type: 'warning',
-const handleCurrentChange = (val) => {
+    customClass: 'delBox'
-  pageInfo.pageNum = val;
-  getAlarmList();
-};
-const handleDelete = (row) => {
-  ElMessageBox.confirm(`确认删除该报警信息吗？`, "系统提示", {
-    type: "warning",
-    closeOnClickModal: false,
   }).then(() => {
-    deleteAlarmSate(row.alarmId).then((res) => {
+    blastingSimulation(previewId, 10);
-      if (res.code === 1000) {
+  })
-        ElMessage.success("删除成功");
-        getAlarmList();
-      }
-    });
-  });
 };
-//查看报警信息详情
+const endSimulate = async () => {
-const handleView = (row) => {
+  isStartSimulate.value = true;
-  getAlarmDetail(row.alarmId).then((res) => {
+  await endSimulation(previewId);
-    if (res.code === 1000) {
+  ElMessage.success("结束模拟成功");
-      isDetailVisited.value = true;
-      alarmDetail.value = res.data;
-      if (roleKey.value !== "administrator") {
-        if (!row.lookupStatus) {
-          handleChangeState(row);
-        }
-      }
-    }
-  });
-};
-const handleChangeState = (row) => {
-  updateAlarmState([
-    {
-      alarmId: row.alarmId,
-      lookupStatus: true,
-      userId: currentUserId.value,
-    },
-  ]).then((res) => {
-    if (res.code === 1000) {
-      // ElMessage.success(res.msg);
-      getAlarmList();
-    } else {
-      // ElMessage.error(res.msg);
-    }
-  });
-};
-const getAlarmList = () => {
-  loading.value = true;
-  getAlarmInfo({
-    tunnelId: tunnelId.value,
-    lookupStatus: queryParams.lookupStatus,
-    ...pageInfo,
-  }).then((res) => {
-    if (res.code === 1000) {
-      loading.value = false;
-      if (res.data.rows.length === 0) {
-        tableEmptyText.value = "暂无数据~";
-      } else {
-        tableEmptyText.value = "";
-      }
-      alarmList.value = res.data.rows;
-      total.value = res.data.total;
-    }
-  });
 };
 const getUser = () => {
   getUserInfo().then((res) => {
@@ -509,74 +233,60 @@ const getUser = () => {
     localStorage.setItem("userId", currentUserId.value);
   });
 };
-
+const getSimulationState = () => {
-const getOtherInfo = () => {
+  simulationState(previewId).then((res) => {
-  getLargeScreenInfo().then((res) => {
+    if (res.code === 1000) {
-    if (res?.code === 1000) {
+      if (res.data) {
-      let routeArr = [];
+        if (res.data.state) {
-      res.data.routeList.forEach((item) => {
+          isStartSimulate.value = false
-        for (let btn of btnList.value) {
-          if (item === btn.route) {
-            routeArr.push(btn);
-          }
         }
-      });
-      routeList.value = routeArr;
-      showMenu.value = true;
-      siteList.value = res.data.siteOption;
-      tunnelList.value = res.data.tunnelOption;
-
-      if (siteId) {
-        currentSiteId.value = siteId;
-        currentSite.value = localStorage.getItem("site");
-        showTunnelTitle.value = false;
-        nextTick(() => {
-          showTunnelTitle.value = true;
-        });
-        getTunnel(siteId);
       } else {
-        getTunnel(res.data.siteOption[0].value);
+        isStartSimulate.value = true
-        currentSiteId.value = res.data.siteOption[0].value;
-        currentSite.value = res.data.siteOption[0].label;
-        localStorage.setItem("site", currentSite.value);
-        localStorage.setItem("currentSiteId", currentSiteId.value);
       }
     }
   });
 };
-const getScreenInfo = (id) => {
+getSimulationState()
+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()
+    } else {
+      ElMessage.warning(res.msg);
+    }
+  });
+};
+
+const getScreenInfo = (id, flag) => {
   if (id) {
     tunnelId.value = id;
     // equipmentOption.value = []
-    getLargeScreen(id).then((res) => {
+    getScreenSimulateTunnel(id).then((res) => {
       if (res?.code === 1000) {
         if (res.data.frequencyChangerList.length !== 0) {
-          showFanLoading.value = 0;
+          showFanLoading.value = 1;
         } else {
           showFanLoading.value = 1;
         }
         if (res.data.windPressureSensorList.length !== 0) {
-          showWindLoading.value = 0;
+          showWindLoading.value = 1;
         } else {
           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 {
@@ -587,127 +297,22 @@ const getScreenInfo = (id) => {
           showBadLoading.value = 1;
         }
         largeScreenData.value = res.data;
+
+        getSimulationState()
+        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();
-    });
   }
 };
-//这里可以获取隧道简称
-const getList = () => {
-  getTunnelList({
-    siteId: siteId,
-  }).then((res) => {
-    if (res.code === 1000) {
-      if (res.data.rows.length !== 0) {
-        isTunnel = true;
-        totalTunnelList.value = res.data.rows;
-      } else {
-        isTunnel = false;
-      }
-    }
-  });
-};
 
-let largeScreen = computed(() => largeScreenData);
-const getTunnel = (id) => {
-  getTunnelBySiteId(id).then((res) => {
-    if (res?.code === 1000) {
-      if (res.data.length === 0) {
-        if (isTunnel) {
-          ElMessage.warning("该站点下没有隧道可展示, 请添加设备后再试!");
-        } else {
-          ElMessage.warning("该站点下没有隧道, 请新增隧道后再试!");
-        }
-      } else {
-        if (!pattern.test(previewId)) {
-          getScreenInfo(previewId);
-          tunnelList.value.forEach((item, index) => {
-            if (item.value == previewId) {
-              initialIndex.value = index;
-              tunnelBtn.value.setActiveItem(index);
-            }
-          });
-        } else {
-          tunnelList.value = res.data;
-          getScreenInfo(res.data[0]?.value);
-        }
-      }
-    }
-  });
-};
-const changeTunnel = (e) => {
-  if (socket) {
-    socket.close();
-  }
-  let newObj = {};
-  tunnelList.value.forEach((item, index) => {
-    if (index === e) {
-      newObj = item;
-    }
-  });
-  showFan.value = false;
-  showBadLoading.value = 0;
-  showWindLoading.value = 0;
-  showFanLoading.value = 0;
-  // showUsedLoading.value = 0
-  pageInfo.pageNum = 1;
-  getScreenInfo(newObj.value);
-  nextTick(() => {
-    showFan.value = true;
-  });
-};
-const manageSelect = (index) => {
-  if (index === "站点管理") {
-    if (currentUserId.value) {
-      router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
-    }
-  } else if (index === "隧道管理") {
-    if (currentSiteId.value && currentUserId.value) {
-      router.push(
-        "/tunnel/" +
-          localStorage.getItem("currentSiteId") +
-          "/byHome/" +
-          currentUserId.value
-      );
-    }
-  } else if (index === "用户管理") {
-    if (currentSiteId.value) {
-      router.push("/user/" + localStorage.getItem("currentSiteId"));
-    }
-  }
-  if (socket) {
-    socket.close();
-  }
-};
-const handleChangeSite = debounce((item) => {
-  if (socket) {
-    socket.close();
-  }
-  currentSite.value = item.label;
-  currentSiteId.value = item.value;
-  getTunnel(item.value);
-  showFan.value = false;
-  nextTick(() => {
-    showFan.value = true;
-  });
-  localStorage.setItem("site", currentSite.value);
-  localStorage.setItem("currentSiteId", currentSiteId.value);
-  if (tunnelIdFlag) {
-    router.push("/" + tunnelIdFlag + "/" + currentSiteId.value);
-  }
-  showTunnelTitle.value = false;
-  nextTick(() => {
-    showTunnelTitle.value = true;
-  });
-}, 100);
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value;
 };
@@ -724,18 +329,14 @@ const handleLogout = () => {
     router.push("/login");
   });
 };
-const previousBtn = () => {
-  tunnelBtn.value.prev();
-};
-const nextBtn = () => {
-  tunnelBtn.value.next();
-};
 
 const initWebSocket = () => {
-  // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  // let wsUrl = `ws://192.168.31.175:9000/websocket/simulate/${token}/${serialNumber.value}`;
-  // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
+  // 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}`;
   socket = new WebSocket(wsUrl);
   //连接发生错误的回调方法
   socket.onerror = function () {
@@ -750,11 +351,10 @@ const initWebSocket = () => {
     // console.log("服务器返回的信息: ", JSON.parse(event.data));
     const type = JSON.parse(event.data).type;
     const data = JSON.parse(event.data).data;
-    if (type === "equipment") {
+    if (type === "simulate") {
       data.forEach((item) => {
         if (item.typeKey === "frequency") {
           socketData.leftData = data;
-          // console.log(socketData.leftData);
         } else if (item.typeKey === "windPressure") {
           socketData.windPressure = data;
         } else if (item.typeKey === "sensor") {
@@ -762,6 +362,9 @@ const initWebSocket = () => {
         } else if (item.typeKey === "windSpeed") {
           socketData.windSpeed = data;
         }
+        nextTick(() => {
+          previewRef.value.changePointValue(item)
+        })
       });
     }
   };
@@ -834,20 +437,55 @@ const initWebSocket = () => {
 </style>
 
 <style lang="scss" scoped>
-.all-btn {
+
-  cursor: pointer;
+.box-top {
-  padding: 10px 20px;
+  //display: flex;
-  border-radius: 11px;
+  //justify-content: space-between;
-  border: 2px solid #08b7b8;
+  position: relative;
-  color: #0be9fa;
+
-  text-align: center;
+  .all-btn {
-  margin-left: 40px;
+    cursor: pointer;
-  font-size: 38px;
+    padding: 10px 20px;
-  &:hover {
+    border-radius: 11px;
-    color: #f7b500;
+    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,8 +18,8 @@
         </div>
       </div>
     </div>
-    <div class="box-content" >
+    <div class="box-content">
-      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
+      <div class="site-box" v-for="item in tunnelList" :key="item.projectId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
           <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
@@ -31,10 +28,13 @@
         </div>
         <div class="box-center">
           <div>
-            <!--            @click="handlePreview(item.tunnelId)"-->
             <div class="left-img"></div>
-            <div style="display: flex;justify-content: center">
+            <div style="display: flex;justify-content: space-around">
-              <div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.tunnelId)">
+              <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.projectId)">
+                <div class="edit-icon"></div>
+                <div>编辑</div>
+              </div>
+              <div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.projectId)">
                 <div class="edit-icon"></div>
                 <div>去模拟</div>
               </div>
@@ -44,7 +44,7 @@
             <div class="icons-block">
               <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 }}：{{ item.tunnelEquipmentAmountInfo[equItem.type] }}</span>
+                <span>{{ equItem.name }}：0</span>
               </div>
             </div>
           </div>
@@ -52,7 +52,7 @@
       </div>
       <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
         <div class="add-icon"></div>
-        <div style="cursor: pointer">添加隧道</div>
+        <div style="cursor: pointer">添加模拟隧道</div>
       </div>
     </div>
     <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
@@ -72,17 +72,8 @@
         <el-form-item label="施工长度" prop="constructionLength">
           <el-input type="number" v-model="form.constructionLength" placeholder="请输入施工长度"/>
         </el-form-item>
-        <el-form-item label="风机初始频率" prop="fanInitialFrequency">
+        <el-form-item label="序列号" prop="serialNumber">
-          <el-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>
+          <el-input v-model="form.serialNumber" 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="请输入隧道备注"/>
@@ -109,19 +100,15 @@
 
 <script setup>
 import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
-import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {
-import {getSiteDrawing, getSiteDetail} from "@/api/site";
+  deleteSimulateTunnel,
+  addSimulateTunnel,
+  getSimulateTunnelList,
+   getSimulateTunnelDetail, editSimulateTunnel
+} from "@/api/tunnelManage";
 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);
@@ -130,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)
@@ -141,6 +127,7 @@ const formRules = ref({
   tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
   totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
   constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+  serialNumber: [{required: true, message: '请输入序列号', trigger: ['blur', 'change']}],
 })
 const showFirst = ref(false)
 const showOperation = ref(true)
@@ -196,28 +183,16 @@ const iconsList = ref([
     num: 0
   },
 ])
-const title = ref('新增隧道')
+const title = ref('新增模拟隧道')
-const showNull = ref(false);
 const isVisited = ref(false);
-const tunnelIds = ref([])
+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
@@ -226,67 +201,9 @@ const total = ref(0);
 onMounted(() => {
   showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
-const handleGoToSimulateTunnel = (tunnelId) => {
+const handleGoToSimulateTunnel = (projectId) => {
-  router.push('/simulate/' + tunnelId)
+  router.push('/simulate/' + projectId)
 }
-const addSerialNumber = () => {
-  serialNumberList.value.push({
-    serialNumber: '',
-    serialNumberType: '',
-  })
-}
-const delSerialNumber = (index) => {
-  serialNumberList.value.splice(index, 1)
-}
-const getSiteImg = () => {
-  showNull.value = false
-  getSiteDrawing(siteId).then((res) => {
-    if (res.code === 1000) {
-      if (res.data.drawingData === null) {
-        // ElMessageBox.confirm('暂无图纸, 是否前往站点管理上传图纸?', '系统提示', {
-        //   confirmButtonText: '确定',
-        //   cancelButtonText: '取消',
-        //   type: 'warning'
-        // }).then(() => {
-        //   router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
-        // }).catch(()=>{
-        showNull.value = true
-        // })
-      } else {
-        showNull.value = false
-        siteImage.value = res.data.drawingData
-      }
-    }
-  });
-}
-const clickHot = (id) => {
-  console.log('点击热区===============')
-  router.push('/' + id + '/' + siteId)
-}
-// const testArr=[]
-const clickHandler = (id) => {
-  // let obj=e.offsetX+','+e.offsetY
-  // testArr.push(obj)
-  // console.log('正确数值',testArr.map(item=>item).join())
-  // console.log('点击',e.offsetX+','+e.offsetY+',')
-  // console.log('图纸', document.getElementById('imgModel').getBoundingClientRect().x,document.getElementById('imgModel').getBoundingClientRect().y)
-}
-const handleGoSiteOrIndex = () => {
-  if (type === 'bySite') {
-    router.push('/site/' + userId + '/' + localStorage.getItem('currentSiteId'))
-  } else if (type === 'byHome') {
-    router.push('/' + 'siteToHome/' + siteId)
-  }
-}
-//根据站点id获取隧道信息
-const getTunnel = (id) => {
-  getSiteDetail(id).then((res) => {
-    if (res?.code === 1000) {
-      siteName.value = res.data.siteName
-    }
-  });
-}
-getTunnel(1)
 const getList = () => {
   const loading = ElLoading.service({
     lock: true,
@@ -294,8 +211,7 @@ const getList = () => {
     background: 'rgba(0, 0, 0, 0.7)',
     customClass: 'allLoading'
   })
-  getTunnelList({
+  getSimulateTunnelList({
-    siteId: 1,
     ...pageInfo
   }).then(res => {
     if (res.code === 1000) {
@@ -303,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)
     }
@@ -325,97 +240,76 @@ 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
-      siteId: siteId,
+    if (title.value === '新增模拟隧道') {
-      ...form.value,
+      res = await addSimulateTunnel(form.value)
-      tunnelGatewayDtoList: serialNumberList.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)
-    addTunnel(data).then(res => {
-      if (res.code === 1000) {
-        ElMessage.success('新增成功')
-        getList()
-        isVisited.value = false
-      } else {
-        ElMessage.warning(res.msg)
-      }
-    })
   })
 }, 100)
-//预览隧道
+
-const handlePreview = (id) => {
-  if (id) {
-    getTunnelBySiteId(siteId).then((res) => {
-      if (res?.code === 1000) {
-        if (res.data.filter((item) => item.value == id).length === 0) {
-          ElMessage.warning('当前预览的隧道未准备好, 不予展示, 请添加设备后再试!')
-        } else {
-          router.push('/' + id + '/' + siteId)
-        }
-      }
-    });
-  }
-}
-const handleGoToEditTunnel = (tunnelId) => {
-  isEdit.value = true
-  if (type === 'bySite') {
-    router.push('/edit/' + tunnelId + '/bySite/' + userId)
-  } else if (type === 'byHome') {
-    router.push('/edit/' + tunnelId + '/byHome/' + userId)
-  }
-}
 const handleChooseAll = debounce(() => {
   tunnelList.value.map(item => {
     item.checked = !item.checked
     if (item.checked && !item.isDefault) {
-      tunnelIds.value.push(item.tunnelId)
+      projectIds.value.push(item.projectId)
     } else if (!item.checked && !item.isDefault) {
-      tunnelIds.value.map((newItem, index) => {
+      projectIds.value.map((newItem, index) => {
-        if (newItem === item.tunnelId) {
+        if (newItem === item.projectId) {
-          tunnelIds.value.splice(index, 1)
+          projectIds.value.splice(index, 1)
         }
       })
     }
   })
 }, 100)
-const handleEditDevice = (tunnelId) => {
-  if (type === 'bySite') {
-    router.push('/device/' + tunnelId + '/bySite/' + userId)
-  } else if (type === 'byHome') {
-    router.push('/device/' + tunnelId + '/byHome/' + userId)
-  }
-}
 const restFrom = () => {
   form.value = {
     tunnelName: '',
     tunnelAlias: '',
     serialNumber: '',
     totalLength: '',
-    referenceFrequency: '',
-    upTime: 0,
-    upFrequency: '',
-    dropTime: 0,
-    dropFrequency: '',
     remarks: '',
-    isDefault: false
   }
 }
+const getTunnelDetail = async (projectId) => {
+  const loading = ElLoading.service({
+    lock: true,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  await getSimulateTunnelDetail(projectId).then((res) => {
+    if (res?.code === 1000) {
+      form.value = res.data;
+    }
+    loading.close()
+  });
+};
+const handleGoToEditTunnel = (projectId) => {
+  restFrom()
+  title.value = '编辑模拟隧道'
+  getTunnelDetail(projectId)
+  isVisited.value = true
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
+}
 const handleAdd = () => {
   restFrom()
-  title.value = '新增隧道'
+  title.value = '新增模拟隧道'
   isVisited.value = true
-  serialNumberList.value = [
-    // {
-    //   serialNumber: '',
-    //   serialNumberType:''
-    // }
-  ]
   nextTick(() => {
     // 清空校验
     formInstance.value.clearValidate()
@@ -426,23 +320,18 @@ const getImageUrl = (name) => {
 }
 const handleClickSite = (type) => {
   if (type.checked) {
-    tunnelIds.value.push(type.tunnelId)
+    projectIds.value.push(type.projectId)
-    tunnelNameList.value.push(type.tunnelName)
   } else {
-    tunnelIds.value.map((item, index) => {
+    projectIds.value.map((item, index) => {
-      if (item === type.tunnelId) {
+      if (item === type.projectId) {
-        tunnelIds.value.splice(index, 1)
+        projectIds.value.splice(index, 1)
-      }
-    })
-    tunnelNameList.value.map((item, index) => {
-      if (item === type.tunnelName) {
-        tunnelNameList.value.splice(index, 1)
       }
     })
+
   }
 }
 const handleMoreDelete = debounce(() => {
-  if (tunnelIds.value.length === 0) {
+  if (projectIds.value.length === 0) {
     ElMessage.warning('请先选择隧道进行删除')
   } else {
     ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
@@ -451,12 +340,11 @@ const handleMoreDelete = debounce(() => {
       type: 'warning',
       customClass: 'delBox'
     }).then(() => {
-      deleteTunnel(tunnelIds.value).then(res => {
+      deleteSimulateTunnel(projectIds.value).then(res => {
         if (res.code === 1000) {
           ElMessage.success(res.msg)
           getList()
-          tunnelIds.value = []
+          projectIds.value = []
-          tunnelNameList.value = []
         } else {
           ElMessage.error(res.msg)
         }

src/views/tunnel/index.vue

@@ -336,10 +336,11 @@ const btnList = ref([
   //   icon: 'sp_icon_xtgl.png',
   //   name: '系统管理'
   // },
-  // {
+  {
-  //   icon: 'sp_icon_mngl.png',
+    route: '/simulate',
-  //   name: '模拟仿真'
+    icon: 'sp_icon_mngl.png',
-  // },
+    name: '模拟仿真'
+  },
 ]);
 const serialNumber = ref("");
 const roleKey = ref("");
@@ -466,6 +467,7 @@ const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       let routeArr = [];
+      res.data.routeList.push('/simulate')
       res.data.routeList.forEach((item) => {
         for (let btn of btnList.value) {
           if (item === btn.route) {
@@ -620,12 +622,12 @@ const changeTunnel = (e) => {
     showFan.value = true;
   });
 };
-const manageSelect = (index) => {
+const manageSelect = (name) => {
-  if (index === "站点管理") {
+  if (name === "站点管理") {
     if (currentUserId.value) {
       router.push("/site/" + currentUserId.value + "/" + currentSiteId.value);
     }
-  } else if (index === "隧道管理") {
+  } else if (name === "隧道管理") {
     if (currentSiteId.value && currentUserId.value) {
       router.push(
         "/tunnel/" +
@@ -634,10 +636,14 @@ const manageSelect = (index) => {
           currentUserId.value
       );
     }
-  } else if (index === "用户管理") {
+  } else if (name === "用户管理") {
     if (currentSiteId.value) {
       router.push("/user/" + localStorage.getItem("currentSiteId"));
     }
+  } else if (name === "模拟仿真") {
+    if (tunnelId.value) {
+      router.push("/simulate/tunnel/list");
+    }
   }
   if(socket){
     socket.close()
@@ -689,7 +695,7 @@ const nextBtn = () => {
 
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.176:9000/websocket/equipment/${token}/${serialNumber.value}`
-  let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/equipment/${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}`;
   socket = new WebSocket(wsUrl);

vite.config.js

@@ -74,7 +74,7 @@ export default defineConfig({
       //   rewrite: (path) => path.replace(/^\/api/, ''),
       // },
       '/api': {
-        target: 'http://web-tunnel.feashow.com/api',
+        target: 'http://tunnel.feashow.com/api',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ''),
       },