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

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

.drone.yml

@@ -1,6 +1,9 @@
 kind: pipeline
 type: docker
 name: tunnel-cloud-web
+platform:
+  os: linux
+  arch: amd64
 steps:
   - name: build-package
     image: registry.cn-chengdu.aliyuncs.com/claywang/node:16.20.0

src/api/tunnel.js

@@ -1,8 +1,17 @@
-import request from '@/utils/request.js'
+import request from "@/utils/request.js";
 
 export const getTunnelOption = (siteId) => {
   return request({
     url: `/tunnel/tunnel/option/${siteId}`,
-    method: 'get'
+    method: "get",
-  })
+  });
-}
+};
+
+// 数据3d隧道模拟接口渲染数据源
+export const getTunnelSimulateData = (siteId) => {
+  return request({
+    url: `/tunnel/tunnel/data/${siteId}`,
+    method: "get",
+    params,
+  });
+};

src/assets/styles/index.scss

@@ -119,6 +119,7 @@ body,
     width: 100%;
     display: flex;
     justify-content: center;
+    align-items: center;
     font-size: 50px;
     //font-weight: bold;
     color: #0BE9FA;

src/components/content/fanInfo/FanInfo.vue

@@ -71,20 +71,20 @@
         <div class="current" @click="handleOpenChart(item)">
           <fan-info-item :wp="transducerData[index]"/>
         </div>
-        <div class="line"></div>
+        <div class="line" v-if="index!=socketData.length-1"></div>
-      </div>
-      <div class="shunt-box">
-        <div class="shuntThreshold" v-for="(item,index) in shuntList">
-          <div class="fenliu-icon"></div>
-          {{ index + 1 }}号分流阀值
-          <span class="units"
-          ><input
-              type="number"
-              min="0"
-              v-model="item.shuntThreshold"
-          /></span>
-        </div>
       </div>
+<!--      <div class="shunt-box">-->
+<!--        <div class="shuntThreshold" v-for="(item,index) in shuntList">-->
+<!--          <div class="fenliu-icon"></div>-->
+<!--          {{ index + 1 }}号分流阀值-->
+<!--          <span class="units"-->
+<!--          ><input-->
+<!--              type="number"-->
+<!--              min="0"-->
+<!--              v-model="item.shuntThreshold"-->
+<!--          /></span>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
 
     <div class="digital-tunnel">

src/components/content/tunnelScene/PreviewScene.vue

@@ -1,35 +1,49 @@
 <template>
-    <div id="scene">
+  <div id="scene">
-        <div id="cvs" ref="content"></div>
+    <div id="cvs" ref="content"></div>
-        <dev-info ref="info" :devInfo="devInfo" />
+    <dev-info ref="info" :devInfo="devInfo" />
-        <pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
+    <pre-dialog
-            :hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType"
+      ref="edit"
-            :equipmentName="equipmentName" :equipmentValue="equipmentValue" />
+      @addEquipment="handleAddEqu"
-        <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
+      @removeEquipment="handleRemoveEqu"
+      @cancel="handleCancel"
+      :hasDev="hasDevice"
+      :pointNum="pointNum"
+      :pointGap="pointGap"
+      :equipmentType="equipmentType"
+      :equipmentName="equipmentName"
+      :equipmentValue="equipmentValue"
+      :devRealtimeDetail="crtDevDetail"
+    />
+    <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">
+      <p id="remove-title">是否确定删除该设备</p>
-                <button @click="centerDialogVisible = false">取消</button>
+      <div class="btn">
-                <button @click="handleConfirmAddEqu">确定</button>
+        <button @click="centerDialogVisible = false">取消</button>
-            </div>
+        <button @click="handleConfirmAddEqu">确定</button>
-        </el-dialog>
+      </div>
-
+    </el-dialog>
-
+  </div>
-    </div>
 </template>
 
 <script setup>
 import * as three from "three";
 import ThreeDScene from "./sceneClass/demo.js";
 import DevInfo from "./displayInfoComp/DevInfo.vue";
-import PreDialog from "./preEquComp/preDialog.vue"
+import PreDialog from "./preEquComp/preDialog.vue";
-
 
 // 导入模模型加载器
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
@@ -37,14 +51,14 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import * as TWEEN from "three/examples/jsm/libs/tween.module";
 import {
-    CSS3DRenderer,
+  CSS3DRenderer,
-    CSS3DObject,
+  CSS3DObject,
-    CSS3DSprite,
+  CSS3DSprite,
 } from "three/addons/renderers/CSS3DRenderer.js";
 // 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
 import {
-    CSS2DRenderer,
+  CSS2DRenderer,
-    CSS2DObject,
+  CSS2DObject,
 } from "three/addons/renderers/CSS2DRenderer.js";
 
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
@@ -54,6 +68,9 @@ import { ElMessage } from "element-plus";
 import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
 
 import { useModelSceneStore } from "@/store/modelSceneStore";
+
+import { getLargeScreen } from "@/api/largeScreen";
+
 // 获取html标签跟随组件dom
 const content = ref(null);
 const info = ref(null);
@@ -62,105 +79,142 @@ let modelList = ref(null);
 let demo; //定义demo全局变量
 // const loader = new OBJLoader();
 const form = ref({
-    tunnelName: "",
+  tunnelName: "",
-    serialNumber: "",
+  serialNumber: "",
-    totalLength: "",
+  totalLength: "",
-    referenceFrequency: '',
+  referenceFrequency: "",
-    upTime: '',
+  upTime: "",
-    upFrequency: '',
+  upFrequency: "",
-    dropTime: '',
+  dropTime: "",
-    dropFrequency: '',
+  dropFrequency: "",
-    isDefault: false,
+  isDefault: false,
-    remarks: "",
+  remarks: "",
 });
 const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps([
+  "isedit",
+  "tunnelId",
+  "tunnelLen",
+  "largeScreen",
+  "devRealtimeData",
+]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
+// 根据设备ID获取当前设备实时数据
+const crtDevDetail = ref({
+  equipmentName: "--",
+  unit: "-",
+  value: "-",
+});
+const getDevDetail = async (devId) => {
+  crtDevDetail.value = {
+    equipmentName: "--",
+    unit: "-",
+    value: "-",
+  };
+  const res = await getLargeScreen(params.tunnelId);
+  const devList = [
+    ...res.data.frequencyChangerList,
+    ...res.data.sensorList,
+    ...res.data.windPressureSensorList,
+  ];
+
+  crtDevDetail.value =
+    devList.find((sensor) => sensor.equipmentId == devId) || crtDevDetail.value;
+};
 
 // console.log(load);
-let isedit = ref(params.isedit)
+let isedit = ref(params.isedit);
 let fanData;
-let tunnelAlias = reactive('')
+let tunnelAlias = reactive("");
 
 watch(
-    () => params.largeScreen,
+  () => params.largeScreen,
-    (now) => {
+  (now) => {
+    // console.log(params.largeScreen);
+    params.largeScreen = now;
+    // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
+    // console.log(params.fanList);
+    fanData = toRaw(params.largeScreen.value).frequencyChangerList;
+    // console.log(fanData);
+    // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
+    watch(
+      () => params.fanList,
+      (now) => {
         // console.log(params.largeScreen);
-        params.largeScreen = now;
+        params.fanList = now;
-        // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
+        let fanList = toRaw(params.fanList);
-        // console.log(params.fanList);
+        //首先判断是不是存在autoMode属性
-        fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
+        if (fanList[0].autoMode !== undefined) {
-        // console.log(fanData);
+          // console.log(fanData);
-        // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
+          // console.log(fanList);
-        watch(
+          fanList.map((item) => {
-            () => params.fanList,
+            if (item.equipmentId == fanData[0].equipmentId) {
-            (now) => {
+              // console.log(item.equipmentId);
-                // console.log(params.largeScreen);
+              //第一个符合条件
-                params.fanList = now;
+              fanData[0].breakdown = item.breakdown;
-                let fanList = toRaw(params.fanList);
+              fanData[0].running = item.running;
-                //首先判断是不是存在autoMode属性
+              // console.log(demo.scene);
-                if (fanList[0].autoMode !== undefined) {
+              if (
-                    // console.log(fanData);
+                demo.scene.Fan1targetPoint.info.equipmentId ==
-                    // console.log(fanList);
+                fanData[0].equipmentId
-                    fanList.map(item => {
+              ) {
-                        if (item.equipmentId == fanData[0].equipmentId) {
+                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
-                            // console.log(item.equipmentId);
+                // console.log('111');
-                            //第一个符合条件
+              } else if (
-                            fanData[0].breakdown = item.breakdown
+                demo.scene.Fan2targetPoint.info.equipmentId ==
-                            fanData[0].running = item.running
+                fanData[0].equipmentId
-                            // console.log(demo.scene);
+              ) {
-                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
+                // console.log("222");
-                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
+                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
-                                // console.log('111');
+              }
-                            }
+              // console.log(item);
-                            else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
+              // console.log(fanData[0]);
-                                // console.log("222");
+            } else {
-                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
+              // 第二个符合条件
-                            }
+              // console.log(item.equipmentId);
-                            // console.log(item);
+              fanData[1].breakdown = item.breakdown;
-                            // console.log(fanData[0]);
+              fanData[1].running = item.running;
-                        } else {
+              // console.log(demo.scene);
-                            // 第二个符合条件
+              if (
-                            // console.log(item.equipmentId);
+                demo.scene.Fan1targetPoint.info.equipmentId ==
-                            fanData[1].breakdown = item.breakdown
+                fanData[1].equipmentId
-                            fanData[1].running = item.running
+              ) {
-                            // console.log(demo.scene);
+                // console.log('111');
-                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
+                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene);
-                                // console.log('111');
+              } else if (
-                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
+                demo.scene.Fan2targetPoint.info.equipmentId ==
-                            } else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
+                fanData[1].equipmentId
-                                // console.log("222");
+              ) {
-                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
+                // console.log("222");
-                            }
+                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene);
-                            // console.log(item);
+              }
-                            // console.log(fanData[1]);
+              // console.log(item);
-                        }
+              // console.log(fanData[1]);
-                    })
+            }
-                }
+          });
+        }
 
-                // console.log(fanData);
+        // console.log(fanData);
-            },
+      },
-            { deep: true }
+      { deep: true }
-        );
+    );
-    },
+  },
-    { deep: true }
+  { deep: true }
 );
 
-
-
 const getTunnel = () => {
-    if (params.tunnelId !== 0) {
+  if (params.tunnelId !== 0) {
-        getTunnelDetail(params.tunnelId).then((res) => {
+    getTunnelDetail(params.tunnelId).then((res) => {
-            if (res?.code === 1000) {
+      if (res?.code === 1000) {
-                form.value = res.data;
+        form.value = res.data;
-                // console.log(form.value.tunnelAlias);
+        // console.log(form.value.tunnelAlias);
-                tunnelAlias = form.value.tunnelAlias
+        tunnelAlias = form.value.tunnelAlias;
-            }
+      }
-        });
+    });
-    }
+  }
 };
 getTunnel();
 // const form = ref({
@@ -181,134 +235,132 @@ getTunnel();
 
 let pointGap = reactive(params.tunnelLen.value);
 watch(
-    () => params.tunnelLen,
+  () => params.tunnelLen,
-    (now) => {
+  (now) => {
-        params.tunnelLen = now;
+    params.tunnelLen = now;
-        // console.log(params.tunnelLen);
+    // console.log(params.tunnelLen);
-        pointGap = params.tunnelLen.value / 20;
+    pointGap = params.tunnelLen.value / 20;
-    },
+  },
-    { deep: true }
+  { deep: true }
 );
 
-
 watch(
-    () => params.tunnelId,
+  () => params.tunnelId,
-    (now) => {
+  (now) => {
-        params.tunnelId = now
+    params.tunnelId = now;
-        console.log(params.tunnelId);
+    console.log(params.tunnelId);
-        // getTunnelPreview();
+    // getTunnelPreview();
-        // console.log(form.value);
+    // console.log(form.value);
-    },
+  },
-    { deep: true }
+  { deep: true }
-)
+);
 
 //这里是改变风机颜色的代码
 function changeFanColor(fanData, targetPoint, scene) {
-    if (fanData !== undefined) {
+  if (fanData !== undefined) {
-        //保证是预览模式才进行这里的操作（！=1）
+    //保证是预览模式才进行这里的操作（！=1）
-        if (fanData.length > 0) {
+    if (fanData.length > 0) {
-            //if保证存在风机（即有长度再进行遍历）
+      //if保证存在风机（即有长度再进行遍历）
-            for (let i = 0; i < fanData.length; i++) {
+      for (let i = 0; i < fanData.length; i++) {
-                //先做匹配操作
+        //先做匹配操作
-                let fanType = fanData[i].equipmentType
+        let fanType = fanData[i].equipmentType;
-                //有符合条件的风机进来了
+        //有符合条件的风机进来了
-                if (targetPoint.info.typeKey == fanType) {
+        if (targetPoint.info.typeKey == fanType) {
-                    //下面进行变色需要的逻辑判断了
+          //下面进行变色需要的逻辑判断了
-                    if (fanData[i].breakdown == true) {
+          if (fanData[i].breakdown == true) {
-                        //故障状态，变红色
+            //故障状态，变红色
-                        scene.traverse(function (child) {
+            scene.traverse(function (child) {
-                            if (child.id === targetPoint.info.id) {
+              if (child.id === targetPoint.info.id) {
-                                child.traverse(function (obj) {
+                child.traverse(function (obj) {
-                                    // console.log(obj);
+                  // console.log(obj);
-                                    // 判断子对象是否是物体，如果是，更改其颜色
+                  // 判断子对象是否是物体，如果是，更改其颜色
-                                    if (obj.isMesh) {
+                  if (obj.isMesh) {
-                                        obj.material.color.set(0xFF0000)
+                    obj.material.color.set(0xff0000);
-                                    }
+                  }
-                                })
+                });
-                            }
+              }
-                        });
+            });
-                    } else {
+          } else {
-                        // 这里再判断是否运行
+            // 这里再判断是否运行
-                        if (fanData[i].running == true) {
+            if (fanData[i].running == true) {
-                            //运行状态,绿色 0x008000
+              //运行状态,绿色 0x008000
-                            scene.traverse(function (child) {
+              scene.traverse(function (child) {
-                                if (child.id === targetPoint.info.id) {
+                if (child.id === targetPoint.info.id) {
-                                    child.traverse(function (obj) {
+                  child.traverse(function (obj) {
-                                        // console.log(obj);
+                    // console.log(obj);
-                                        // 判断子对象是否是物体，如果是，更改其颜色
+                    // 判断子对象是否是物体，如果是，更改其颜色
-                                        if (obj.isMesh) {
+                    if (obj.isMesh) {
-                                            obj.material.color.set(0x008000)
+                      obj.material.color.set(0x008000);
-                                        }
-                                    })
-                                }
-                            });
-                        } else {
-                            //停止状态，不变色
-                            break;
-                        }
                     }
+                  });
                 }
+              });
+            } else {
+              //停止状态，不变色
+              break;
             }
+          }
         }
+      }
     }
+  }
 }
 
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
-    const doms = [info.value.$el, edit.value.$el];
+  const doms = [info.value.$el, edit.value.$el];
-    demo = new ThreeDScene(three, content.value);
+  demo = new ThreeDScene(three, content.value);
-    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
+  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
-    demo.isedit = params.isedit;
+  demo.isedit = params.isedit;
-    let tunnelasync = await demo.loadModel(GLTFLoader, "/tunnelModel/chanel-have-wall-now-use.gltf");
+  let tunnelasync = await demo.loadModel(
-    demo.addOrbitControls(OrbitControls);
+    GLTFLoader,
-    demo.addTween(TWEEN);
+    "/tunnelModel/chanel-have-wall-now-use.gltf"
-    demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
+  );
-    demo.setDistance(10);
+  demo.addOrbitControls(OrbitControls);
-    lClickCallback(demo); //绑定左键回调
+  demo.addTween(TWEEN);
-    rClickCallback(demo); //绑定右键回调
+  demo.addCSS3Renderer(CSS2DRenderer, CSS2DObject, doms);
+  demo.setDistance(10);
+  lClickCallback(demo); //绑定左键回调
+  rClickCallback(demo); //绑定右键回调
 
-    //加载HDR背景图片
+  //加载HDR背景图片
-    demo.loadBackground(hdrLoader, backColorSet);
+  demo.loadBackground(hdrLoader, backColorSet);
-    //先不加试试？？？
+  //先不加试试？？？
-    // watch(
+  // watch(
-    //     () => params.tunnelId,
+  //     () => params.tunnelId,
-    //     async () => {
+  //     async () => {
-    //         const text = await initData(params.tunnelId);
+  //         const text = await initData(params.tunnelId);
-    //     }
+  //     }
-    // );
+  // );
-    // 初始化设备模型
+  // 初始化设备模型
-    try {
+  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);
+    // const equipmentList = await store.getEquipmentList();
+    modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
+    // console.log(modelList.value);
+    // console.log("init", params.tunnelId);
+    demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
+    // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
 
-        //在这加载隧道
+    demo.SignsInf(tunnelAlias, String(params.tunnelLen.value));
-        const map = new Map();
+  } catch (err) {
-        map.set("equ_fan", await loadModel("/devicesModel/model2.obj"));
+    if (err == undefined) {
-        map.set("equ_sensors", await loadModel("/devicesModel/sensors.obj"));
+      return;
-        // 给对象初加载设备模型
+    } else {
-        demo.initDevicesModel(map);
+      ElMessage({
-        // const equipmentList = await store.getEquipmentList();
+        message: "场景初始化异常！",
-        modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
+        type: "warning",
-        // console.log(modelList.value);
+      });
-        // console.log("init", params.tunnelId);
-        demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
-        // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
-
-        demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
-
-    } catch (err) {
-        if (err == undefined) {
-            return
-        } else {
-            console.log(err);
-            ElMessage({
-                message: "场景初始化异常---！",
-                type: "warning",
-            });
-        }
     }
+  }
 }
 
-
 // function checkTunnelInit(equipmentList) {
 //     equipmentList.forEach((item) => {
 //         let equipment = toRaw(item)
@@ -321,242 +373,238 @@ async function handleMounted() {
 
 // 每个模型加载回调
 function loadModel(path) {
-    return new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
-        loader.load(
+    loader.load(
-            path,
+      path,
-            (obj) => {
+      (obj) => {
-                resolve(obj);
+        resolve(obj);
-            },
+      },
-            (xhr) => {
+      (xhr) => {
-                //这里可以拿到加载的进度条！！！
+        //这里可以拿到加载的进度条！！！
-                // console.log(xhr);
+        // console.log(xhr);
-                console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+        // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
-            },
+      },
-            (err) => {
+      (err) => {
-                reject(err);
+        reject(err);
-            }
+      }
-        );
+    );
-    });
+  });
 }
 
 let hasDevice = ref(true);
 let devInfo = reactive({
-    meshId: null,
+  meshId: null,
-    name: "无",
+  name: "无",
-    state: "无",
+  state: "无",
-    position: "无",
+  position: "无",
 });
 
 // 对象建构赋值功能
 function editDevInfo(
-    value = {
+  value = {
-        meshId: null,
+    meshId: null,
-        name: "无",
+    name: "无",
-        state: "无",
+    state: "无",
-        position: "无",
+    position: "无",
-    }
+  }
 ) {
-    devInfo.meshId = value.meshId;
+  devInfo.meshId = value.meshId;
-    devInfo.name = value.name;
+  devInfo.name = value.name;
-    devInfo.state = value.state;
+  devInfo.state = value.state;
-    devInfo.position = value.position;
+  devInfo.position = value.position;
 }
 
 //左键/双击左键回调函数
 function lClickCallback(demo) {
-    //demo动态添加函数，为操作组件内部
+  //demo动态添加函数，为操作组件内部
-    function displayDevInfo(targetPoint = null) {
+  function displayDevInfo(targetPoint = null) {
-        hasDevice.value = targetPoint.hasDevice;
+    hasDevice.value = targetPoint.hasDevice;
-        if (!targetPoint.info) {
+    if (!targetPoint.info) {
-            editDevInfo();
+      editDevInfo();
-            return;
+      return;
-        }
-        editDevInfo(targetPoint.info);
     }
-    // 传给内部使用
+    editDevInfo(targetPoint.info);
-    demo.addFunction("displayDevInfo", displayDevInfo);
+  }
+  // 传给内部使用
+  demo.addFunction("displayDevInfo", displayDevInfo);
 }
 
 let pointNum = ref(0);
 let targetP = ref({});
 // 右键点击附着点后调函数
 function rClickCallback(demo) {
-    function editDev(targetPoint = null) {
+  function editDev(targetPoint = null) {
-        hasDevice.value = targetPoint.hasDevice;
+    hasDevice.value = targetPoint.hasDevice;
-        targetP.value = targetPoint;
+    targetP.value = targetPoint;
-        //这里是初始化必经之路！！！
+    //这里是初始化必经之路！！！
-        const equipmentList = modelStore.initModelDataPreview(params.tunnelId)
+    const equipmentList = modelStore.initModelDataPreview(params.tunnelId);
-        equipmentList.then((result) => {
+    equipmentList.then((result) => {
-            previewEquInfProcess(result, targetP.value)
+      previewEquInfProcess(result, targetP.value);
-        })
+    });
-        pointNum.value = Number(
+    pointNum.value = Number(
-            targetPoint.name.substring(
+      targetPoint.name.substring(
-                targetPoint.name.indexOf("_") + 1,
+        targetPoint.name.indexOf("_") + 1,
-                targetPoint.name.lastIndexOf("_")
+        targetPoint.name.lastIndexOf("_")
-            ) - 1
+      ) - 1
-        );
+    );
-        if (!targetPoint.info) return;
+    if (!targetPoint.info) return;
-        editDevInfo(targetPoint.info);
+    editDevInfo(targetPoint.info);
-    }
+  }
-    demo.addFunction("editDev", editDev);
+  demo.addFunction("editDev", editDev);
 }
 
 function throttle(fn, delay) {
-    var timer;
+  var timer;
-    return function () {
+  return function () {
-        var _this = this;
+    var _this = this;
-        var args = arguments;
+    var args = arguments;
-        if (timer) {
+    if (timer) {
-            return;
+      return;
-        }
-        timer = setTimeout(function () {
-            fn.apply(_this, args);
-            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
-        }, delay)
     }
+    timer = setTimeout(function () {
+      fn.apply(_this, args);
+      timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
+    }, delay);
+  };
 }
 
 // 添加设备
 function handleAddEqu(formInfo) {
-    demo.addEquipment(targetP.value, formInfo);
+  demo.addEquipment(targetP.value, formInfo);
-    // //将墙壁设置为可以穿透点击
+  // //将墙壁设置为可以穿透点击
-    // for (let line = 1; line <= 20; line++) {
+  // for (let line = 1; line <= 20; line++) {
-    //     if (line < 10) {
+  //     if (line < 10) {
-    //         let wall = 'wall_' + '0' + line
+  //         let wall = 'wall_' + '0' + line
-    //         this.scene.getObjectByName(wall).layers.set(0)
+  //         this.scene.getObjectByName(wall).layers.set(0)
-    //     } else if (line >= 10) {
+  //     } else if (line >= 10) {
-    //         let wall = 'wall_' + line
+  //         let wall = 'wall_' + line
-    //         this.scene.getObjectByName(wall).layers.set(0)
+  //         this.scene.getObjectByName(wall).layers.set(0)
-    //     }
+  //     }
-    // }
+  // }
 }
 
 const centerDialogVisible = ref(false);
 // 删除设备
 function handleRemoveEqu() {
-    if (!targetP.hasDevice) {
+  if (!targetP.value.hasDevice) {
-        ElMessage({
+    ElMessage({
-            message: "该点位不存在设备！",
+      message: "该点位不存在设备！",
-            type: "warning",
+      type: "warning",
-        });
+    });
-        return;
+    return;
-    }
+  }
-    centerDialogVisible.value = true;
+  centerDialogVisible.value = true;
 }
 // 对话框确认删除
 function handleConfirmAddEqu() {
-    console.log("target:", targetP.value.info);
+  console.log("target:", targetP.value.info);
-    modelStore
+  modelStore
-        .deleteEquipment(targetP.value.info.equipmentId, pointGap)
+    .deleteEquipment(targetP.value.info.equipmentId, pointGap)
-        .then((res) => {
+    .then((res) => {
-            demo.removeEquipment(targetP.value);
+      demo.removeEquipment(targetP.value);
-            centerDialogVisible.value = false;
+      centerDialogVisible.value = false;
-            ElMessage({
+      ElMessage({
-                message: "删除成功！",
+        message: "删除成功！",
-                type: "success",
+        type: "success",
-            });
+      });
-        })
+    })
-        .catch((res) => {
+    .catch((res) => {
-            ElMessage({
+      ElMessage({
-                message: "删除失败！",
+        message: "删除失败！",
-                type: "warning",
+        type: "warning",
-            });
+      });
-        });
+    });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
-    if (!demo) return;
+  if (!demo) return;
-    // 关闭标签
+  // 关闭标签
-    demo.isControlOrbit(true);
+  demo.isControlOrbit(true);
-    demo._resetState();
+  demo._resetState();
-    demo.clearTagsObj();
+  demo.clearTagsObj();
 }
 
-let equipmentType = ref(0)
+let equipmentType = ref(0);
-let equipmentName = ref(0)
+let equipmentName = ref(0);
-let equipmentValue = ref(0)
+let equipmentValue = ref(0);
 
-
+async function previewEquInfProcess(equipmentList, targetP) {
-function previewEquInfProcess(equipmentList, targetP) {
+  for (const equipment of equipmentList) {
-    for (const equipment of equipmentList) {
+    if (equipment.position == targetP.name) {
-        if (equipment.position == targetP.name) {
+      equipmentType.value = equipment.equipmentType;
-            equipmentType.value = equipment.equipmentType
+      //需要将获取到的设备列表进行序列化
-            //需要将获取到的设备列表进行序列化
+      equipmentName.value = equipment.equipmentName;
-            equipmentName.value = equipment.equipmentName
+      equipmentValue.value = equipment.threshold;
-            equipmentValue.value = equipment.threshold
+      if (equipmentType.value == "frequency") {
-            if (equipmentType.value == 'frequency') {
+        equipmentType.value = "风机";
-                equipmentType.value = '风机'
+      }
-            }
+      if (equipmentType.value == "windPressure") {
-            if (equipmentType.value == 'windPressure') {
+        equipmentType.value = "风压传感器";
-                equipmentType.value = '风压传感器'
+      }
-            }
+      if (equipmentType.value == "sensor") {
-            if (equipmentType.value == 'sensor') {
+        equipmentType.value = "其他传感器";
-                equipmentType.value = '其他传感器'
+      }
-            }
+      const { equipmentId } = targetP.info;
-            // console.log(equipmentType.value);
+      getDevDetail(equipmentId);
-            // console.log(equipmentName.value);
-            // console.log(equipmentValue.value);
-        }
     }
+  }
 }
 
-
+watch(params.devRealtimeData, () => {
-
+  // console.log("devRealtimeData：", params.devRealtimeData);
-
+});
-
-
 </script>
 
 <style lang="scss" scoped>
 #scene {
-    position: relative;
+  position: relative;
-    height: 100%;
+  height: 100%;
-    width: 100%;
+  width: 100%;
 
-    #cvs {
+  #cvs {
-        height: 100%;
+    height: 100%;
-    }
+  }
 }
 
 #remove-title {
-    height: 42px;
+  height: 42px;
-    font-size: 32px;
+  font-size: 32px;
-    font-family: MicrosoftYaHei, MicrosoftYaHei;
+  font-family: MicrosoftYaHei, MicrosoftYaHei;
-    font-weight: bold;
+  font-weight: bold;
-    color: #08b7b8;
+  color: #08b7b8;
-    line-height: 42px;
+  line-height: 42px;
-    letter-spacing: 3px;
+  letter-spacing: 3px;
-    text-align: center;
+  text-align: center;
-    margin: 65px 0px 70px 0px;
+  margin: 65px 0px 70px 0px;
 }
 
 .btn {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    gap: 80px;
+  gap: 80px;
 
-    :nth-child(1) {
+  :nth-child(1) {
-        width: 190px;
+    width: 190px;
-        height: 60px;
+    height: 60px;
-        border-radius: 11px;
+    border-radius: 11px;
-        border: 2px solid #0f82af;
+    border: 2px solid #0f82af;
-        font-size: 28px;
+    font-size: 28px;
-        font-family: MicrosoftYaHei;
+    font-family: MicrosoftYaHei;
-        color: #08b7b8;
+    color: #08b7b8;
-        line-height: 37px;
+    line-height: 37px;
-        background: transparent;
+    background: transparent;
-    }
+  }
 
-    :nth-child(2) {
+  :nth-child(2) {
-        width: 190px;
+    width: 190px;
-        height: 60px;
+    height: 60px;
-        background: #08b7b8;
+    background: #08b7b8;
-        border-radius: 11px;
+    border-radius: 11px;
-        font-size: 28px;
+    font-size: 28px;
-        font-family: MicrosoftYaHei, MicrosoftYaHei;
+    font-family: MicrosoftYaHei, MicrosoftYaHei;
-        font-weight: bold;
+    font-weight: bold;
-        color: #ffffff;
+    color: #ffffff;
-        line-height: 37px;
+    line-height: 37px;
-    }
+  }
 }
 </style>

src/components/content/tunnelScene/TunnelScene.vue

@@ -3,17 +3,34 @@
     <div id="cvs" ref="content"></div>
     <dev-info ref="info" :devInfo="devInfo" />
     <!-- 这里的预览模式需要做成不能修改的模式 -->
-    <edit-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
+    <edit-dialog
-      :hasDev="hasDevice" :pointNum="pointNum" :tunnelId="params.tunnelId" :position="targetP?.name"
+      ref="edit"
-      :hasEquipment="hasDevice" :pointGap="pointGap" :form="params.form" />
+      @addEquipment="handleAddEqu"
-    <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
+      @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>
@@ -61,7 +78,13 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLength", "form"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps([
+  "isedit",
+  "tunnelId",
+  "tunnelLength",
+  "form",
+  "devRealtimeData",
+]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 let isedit = ref(params.isedit);
 let tunnelId = reactive(params.tunnelId);
@@ -114,13 +137,12 @@ async function handleMounted() {
       params.form
     );
     // modelList.value = await initData(params.tunnelId, params.form);
-    console.log("test", modelList.value);
+    // console.log("test", modelList.value);
     demo.editTunnelInit(toRaw(modelList.value));
-    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength))
+    demo.SignsInf(params.form.tunnelAlias, String(params.tunnelLength));
   } catch (err) {
-    console.log(err);
     ElMessage({
-      message: "场景初始化异常---！",
+      message: "场景初始化异常！",
       type: "warning",
     });
   }
@@ -134,7 +156,7 @@ function loadModel(path) {
       (obj) => {
         resolve(obj);
       },
-      (xhr) => { },
+      (xhr) => {},
       (err) => {
         reject(err);
       }
@@ -247,14 +269,13 @@ function handleConfirmAddEqu() {
         type: "success",
       });
     })
-    .catch(
+    .catch((res) => {
-      (res) => {
+      console.log(res);
-        console.log(res);
+      ElMessage({
-        ElMessage({
+        message: "删除失败！",
-          message: "删除失败！",
+        type: "warning",
-          type: "warning",
-        });
       });
+    });
 }
 // 处理取消关闭编辑框事件
 function handleCancel() {
@@ -291,6 +312,11 @@ const ThreeConfig = {
   },
   msg: "dda",
 };
+
+//=================实时更新数据
+watch(params.devRealtimeData, () => {
+  // console.log("devRealtimeData：", params.devRealtimeData);
+});
 </script>
 
 <style lang="scss" scoped>

src/components/content/tunnelScene/preEquComp/preDialog.vue

@@ -29,32 +29,29 @@
         <p>{{ params.equipmentName }}</p>
       </div>
       <div class="setting-item">
-        <p>参数:</p>
+        <p>{{ getDevParam + ":" }}</p>
-        <p>31.3%</p>
+        <p>
+          {{
+            params.devRealtimeDetail.value + params.devRealtimeDetail.unit ||
+            "--"
+          }}
+        </p>
       </div>
       <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
         :disabled="isDisabledInputNum" />
       <p>{{ params.equipmentValue }}</p> -->
     </div>
-    <div class="btn">
+    <!-- <div class="btn">
-      <!-- <button @click="removeEquipment" disabled>删除</button> -->
+      <button @click="removeEquipment">删除</button>
-      <!-- <button @click="addEquipment" disabled>添加</button> -->
+      <button @click="addEquipment" disabled>添加</button>
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
 import InputNum from "./childComps/InputNum.vue";
 
-import {
+import { reactive, computed, defineEmits, defineProps, watch, ref } from "vue";
-  reactive,
-  computed,
-  defineEmits,
-  defineProps,
-  watch,
-  nextTick,
-  ref,
-} from "vue";
 
 // 定义事件发射器，父组件监听
 const emit = defineEmits([
@@ -69,11 +66,30 @@ const params = defineProps([
   "equipmentType",
   "equipmentName",
   "equipmentValue",
+  "devRealtimeDetail",
 ]); //隧道第几个锚点
 
 // 当前风压
 let p = ref(57);
-
+const getDevParam = computed(() => {
+  if (/^windPressure+/.test(params.devRealtimeDetail.equipmentType)) {
+    return "风压";
+  } else if (/^frequency+/.test(params.devRealtimeDetail.equipmentType)) {
+    return "频率";
+  }
+  switch (params.devRealtimeDetail.equipmentType) {
+    case "windDirection":
+      return "风向";
+    case "temperature":
+      return "温度";
+    case "windSpeed":
+      return "风速";
+    case "humidness":
+      return "湿度";
+    default:
+      return "浓度";
+  }
+});
 // function EquInf() {
 //   // 发射事件给tunnel父组件
 //   emit("EquInf");
@@ -171,22 +187,21 @@ function addEquipment() {
   equipmentSetting.equipmentType = "";
   equipmentSetting.threshold = "";
 }
-const equipmentType = {
+// const equipmentType = {
-  label: String, //传感器类型
+//   label: String, //传感器类型
-  typeId: String, //传感器类型ID(方便查找该类型的所有设备)
+//   typeId: String, //传感器类型ID(方便查找该类型的所有设备)
-};
+// };
-// 通过以上选项请求以下具体哪个设备
+// // 通过以上选项请求以下具体哪个设备
-const equipment = {
+// const equipment = {
-  label: String, //传感器编号加名称
+//   label: String, //传感器编号加名称
-  equId: String, // 传感器Id
+//   equId: String, // 传感器Id
-};
+// };
 </script>
 
 <style lang="scss" scoped>
 #edit-dialog {
-  // width: 540px;
+  width: 240px;
-  width: 230px;
+  // height: 120px;
-  height: 120px;
   // min-height: 683px;
   background: rgba(7, 35, 72, 0.79);
   border-radius: 20px;
@@ -203,7 +218,7 @@ const equipment = {
     margin: 20px 20px 0px 30px;
 
     p {
-      width: 388px;
+      width: 400px;
       height: 35px;
       font-size: 24px;
       font-family: MicrosoftYaHei;
@@ -243,19 +258,21 @@ const equipment = {
       padding: 15px 15px 5px 15px;
       display: flex;
       gap: 10px;
-      p {
+      line-height: 35px;
-        width: 190px;
+      font-size: 18px;
+      font-family: MicrosoftYaHei;
+      p:nth-child(1) {
+        width: 80px;
         height: 35px;
-        line-height: 35px;
-        font-size: 18px;
-        font-family: MicrosoftYaHei;
         color: #ffffff;
         text-align: right;
       }
 
       p:nth-child(2) {
         color: #f7b500;
+        height: 35px;
         text-align: left;
+        flex: 2;
       }
     }
 
@@ -295,7 +312,25 @@ const equipment = {
   }
 
   .btn {
-    margin: 100px 40px 40px 40px;
+    display: flex;
+    justify-content: flex-end;
+    button {
+      cursor: pointer;
+      transition: transform 0.1s linear 0s;
+    }
+    & :nth-child(1) {
+      width: 95px;
+      height: 39px;
+      border-radius: 11px;
+      border: 2px solid #0f82af;
+      background: transparent;
+      font-size: 20px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 39px;
+      margin: 15px;
+    }
+    /* margin: 100px 40px 40px 40px;
     display: flex;
     justify-content: space-between;
 
@@ -331,10 +366,10 @@ const equipment = {
       font-weight: bold;
       color: #ffffff;
       line-height: 60px;
-    }
+    }*/
 
     button:active {
-      transform: scale(0.9);
+      transform: scale(0.98);
     }
   }
 }

src/router/index.js

@@ -41,6 +41,24 @@ const routes = [
       breadcrumb: true
     },
   },
+  {
+    path: '/simulate/:tunnelId',
+    name: 'simulateTunnel',
+    component: () => import('@/views/tunnel-simulate/index.vue'),
+    meta: {
+      title: '隧道模拟',
+      breadcrumb: true
+    },
+  },
+  {
+    path: '/simulate/tunnel/list',
+    name: 'tunnelList',
+    component: () => import('@/views/tunnel-simulate/tunnel-list.vue'),
+    meta: {
+      title: '隧道列表',
+      breadcrumb: true
+    },
+  },
   {
     path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'tunneledit',

src/store/modelSceneStore.js

@@ -4,13 +4,23 @@ import { apiSaveEquipment, initSceneData } from "../api/tunnelScene";
 
 export const useModelSceneStore = defineStore("modelSceneData", () => {
   let equipmentList = ref([]);
+  let tunnelGatewayDtoList = ref([]);
+  let serialNumber = ref("");
+  let tunnelAlias = ref("");
+  let serialNumberPrefix = ref("");
   let requestOtherConfig = ref({});
 
   function initModelData(tunnelId, otherConfig) {
     return new Promise((resolve, reject) => {
+      console.info("🚀 ~method:otherConfig -----", otherConfig)
+      tunnelAlias.value=otherConfig.tunnelAlias
       handleSettingOtherConfig(otherConfig, requestOtherConfig);
       initSceneData(tunnelId)
         .then((res) => {
+          console.info("🚀 ~method:res -----", res)
+          serialNumber.value=res.data.serialNumber
+          serialNumberPrefix.value=res.data.serialNumberPrefix
+          tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList
           if (res.data.tunnelThreeConfig) {
             equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
           } else {
@@ -34,6 +44,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
       return new Promise((resolve, reject) => {
         initSceneData(tunnelId)
           .then((res) => {
+            console.info("🚀 ~method:initSceneData -----", res)
+            serialNumber.value=res.data.serialNumber
+            serialNumberPrefix.value=res.data.serialNumberPrefix
+            tunnelGatewayDtoList.value=res.data.tunnelGatewayVoList
             if (res.data.tunnelThreeConfig) {
               equipmentList.value = JSON.parse(res.data.tunnelThreeConfig);
             } else {
@@ -61,6 +75,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
           pointGap
         ),
         modelEquipmentList: toRaw(equipmentList.value),
+        serialNumber:serialNumber.value,
+        tunnelAlias:tunnelAlias.value,
+        serialNumberPrefix:serialNumberPrefix.value,
+        tunnelGatewayDtoList:tunnelGatewayDtoList.value,
         ...requestOtherConfig,
       })
         .then((res) => {
@@ -91,6 +109,10 @@ export const useModelSceneStore = defineStore("modelSceneData", () => {
           pointGap
         ),
         modelEquipmentList: toRaw(equipmentList.value),
+        serialNumber:serialNumber.value,
+        tunnelAlias:tunnelAlias.value,
+        serialNumberPrefix:serialNumberPrefix.value,
+        tunnelGatewayDtoList:tunnelGatewayDtoList.value,
         ...requestOtherConfig,
       })
         .then((res) => {

src/views/debug/index.vue

@@ -85,12 +85,12 @@ const initWebSocket = () => {
   };
   //连接成功建立的回调方法
   socket.onopen = function () {
-    console.log("ws连接成功");
+    // console.log("ws连接成功");
   }
   //接收到消息的回调方法
   socket.onmessage = function (event) {
     dataList.value.push(JSON.parse(event.data))
-    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    // console.log("服务器返回的信息: ", JSON.parse(event.data));
   }
   //连接关闭的回调方法
   socket.onclose = function () {

src/views/device-manage/index.vue

@@ -76,7 +76,7 @@
                   ></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="serialNumber" label="序列号" align="center" width="500">
+              <el-table-column prop="serialNumber" label="序列号" align="center" >
                 <template #default="scope">
                   <!--                  {{scope.row.serialNumberOption.filter(item => item.value == scope.row.serialNumber).map(item => item.label)[0]}}?-->
                   <!--                  <el-select placeholder="请选择" v-model="scope.row.serialNumber" popper-class="serialNumber-select"-->
@@ -394,10 +394,10 @@ const clearWinDataSelectedOption=()=>{
   winDataSelectedOption.value=[]
 }
 const changeWindDataSerialNumber = (value,options) => {
-  console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
+  // console.info("🚀 ~method:changeWindDataSerialNumber -----", value,options)
   options?.forEach(item=>{
     if(item.value==value){
-      console.info("🚀 ~method:item.label -----", item.label)
+      // console.info("🚀 ~method:item.label -----", item.label)
       if(item.label.indexOf('PLC')>=0){
         winDataSelectedOption.value=[]
       }else{
@@ -469,7 +469,7 @@ const editEquip = debounce(() => {
     sensorList: newSensor,
     // shuntList: editFenLiuData.value,
   }
-  console.info("🚀 ~ file:index method: line:478 -----",basicData)
+  // console.info("🚀 ~ file:index method: line:478 -----",basicData)
   editEquipment(basicData).then(res => {
     if (res.code === 1000) {
       loading.close()
@@ -541,7 +541,7 @@ getList()
 <style lang="scss">
 .serialNumber{
   .el-input{
-    width: 580px!important;
+    width: 570px!important;
   }
   .el-input__suffix-inner{
     .el-icon{
@@ -556,6 +556,7 @@ getList()
   }
 }
 .el-select.serialNumber {
+  width: 580px!important;
   border-radius: 6px!important;
   border: 1px solid #05FEFF!important;
   background-color: transparent!important;

src/views/tunnel-manage/index.vue

@@ -476,7 +476,7 @@ const handleSubmit = debounce((instance) => {
       ...form.value,
       tunnelGatewayDtoList: serialNumberList.value
     }
-    console.info("🚀 ~method:data -----", data)
+    // console.info("🚀 ~method:data -----", data)
     addTunnel(data).then(res => {
       if (res.code === 1000) {
         ElMessage.success('新增成功')

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

@@ -0,0 +1,968 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="handleGoSiteOrIndex">
+        <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">
+          添加
+        </div>
+        <div class="all-btn" @click="handleChooseAll">
+          全选
+        </div>
+        <div class="all-btn del-btn" @click="handleMoreDelete">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content" >
+      <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
+        <div class="top">
+          <span>{{ item.tunnelName }}</span>
+          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
+          <el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
+          <span v-else>默认</span>
+        </div>
+        <div class="box-center">
+          <div>
+            <!--            @click="handlePreview(item.tunnelId)"-->
+            <div class="left-img"></div>
+            <div style="display: flex;justify-content: center">
+              <div class="edit-btn" @click.stop="handleGoToSimulateTunnel(item.tunnelId)">
+                <div class="edit-icon"></div>
+                <div>去模拟</div>
+              </div>
+            </div>
+          </div>
+          <div class="tunnel-right">
+            <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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="handleAdd" v-if="showOperation">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加隧道</div>
+      </div>
+    </div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="230px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" prop="tunnelName">
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称" prop="tunnelAlias">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
+        </el-form-item>
+        <el-form-item label="隧道长度" prop="totalLength">
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
+        </el-form-item>
+        <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-input type="number" v-model="form.fanInitialFrequency" placeholder="请输入风机初始频率"/>
+        </el-form-item>
+        <el-form-item label="爆破量级" prop="burstLevel">
+          <el-input type="number" v-model="form.burstLevel" placeholder="请输入爆破量级"/>
+        </el-form-item>
+        <el-form-item label="是否默认">
+          <el-radio-group v-model="form.isDefault">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="隧道备注">
+          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
+        </el-form-item>
+      </el-form>
+      <div class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span @click="firstPage" v-if="showFirst">首页</span>
+      <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"/>
+      <span @click="lastPage" v-if="showFirst">尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
+import {getTunnelList, addTunnel, deleteTunnel} from "@/api/tunnelManage";
+import {getSiteDrawing, getSiteDetail} from "@/api/site";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {getTunnelBySiteId} from "@/api/largeScreen";
+import {debounce} from 'lodash'
+
+const serialNumberList = ref([
+  {
+    serialNumber: '',
+    serialNumberType: ''
+  }
+])
+
+const validateNumber = (rule, value) => {
+  const reg = /^[A-Za-z0-9]+$/;
+  return reg.test(value);
+}
+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)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
+  totalLength: [{required: true, message: '请输入隧道长度', trigger: ['blur', 'change']}],
+  constructionLength: [{required: true, message: '请输入施工长度', trigger: ['blur', 'change']}],
+})
+const showFirst = ref(false)
+const showOperation = ref(true)
+const formInstance = ref()
+const tunnelList = ref([])
+const iconsList = ref([
+  {
+    icon: 'sd_icon_fj.png',
+    name: '风机',
+    type: 'frequency',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_sd.png',
+    name: '湿度',
+    type: 'humidness',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fy.png',
+    name: '风压',
+    type: 'windPressure',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_yq.png',
+    name: '氧气',
+    type: 'oxygen',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fs.png',
+    name: '风速',
+    type: 'windSpeed',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_fc.png',
+    name: '粉尘',
+    type: 'dust',
+    num: 1
+  },
+  {
+    icon: 'sd_icon_wd.png',
+    name: '温度',
+    type: 'temperature',
+    num: 0
+  },
+  {
+    icon: 'sd_icon_qt.png',
+    name: '有害气体',
+    type: 'harmfulGas',
+    num: 0
+  },
+])
+const title = ref('新增隧道')
+const showNull = ref(false);
+const isVisited = ref(false);
+const tunnelIds = 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
+});
+const total = ref(0);
+onMounted(() => {
+  showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
+})
+const handleGoToSimulateTunnel = (tunnelId) => {
+  router.push('/simulate/' + tunnelId)
+}
+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,
+    text: '正在加载系统资源...',
+    background: 'rgba(0, 0, 0, 0.7)',
+    customClass: 'allLoading'
+  })
+  getTunnelList({
+    siteId: 1,
+    ...pageInfo
+  }).then(res => {
+    if (res.code === 1000) {
+      total.value = res.data.total
+      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)
+    }
+    loading.close()
+  })
+}
+getList()
+const firstPage = () => {
+  pageInfo.pageNum = 1
+  getList()
+}
+const lastPage = () => {
+  pageInfo.pageNum = total.value / pageInfo.pageSize
+  getList()
+}
+//点击页码进行分页功能
+const handleCurrentChange = (val) => {
+  pageInfo.pageNum = 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 = {
+      siteId: siteId,
+      ...form.value,
+      tunnelGatewayDtoList: serialNumberList.value
+    }
+    // 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)
+    } else if (!item.checked && !item.isDefault) {
+      tunnelIds.value.map((newItem, index) => {
+        if (newItem === item.tunnelId) {
+          tunnelIds.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 handleAdd = () => {
+  restFrom()
+  title.value = '新增隧道'
+  isVisited.value = true
+  serialNumberList.value = [
+    // {
+    //   serialNumber: '',
+    //   serialNumberType:''
+    // }
+  ]
+  nextTick(() => {
+    // 清空校验
+    formInstance.value.clearValidate()
+  })
+}
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
+}
+const handleClickSite = (type) => {
+  if (type.checked) {
+    tunnelIds.value.push(type.tunnelId)
+    tunnelNameList.value.push(type.tunnelName)
+  } else {
+    tunnelIds.value.map((item, index) => {
+      if (item === type.tunnelId) {
+        tunnelIds.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) {
+    ElMessage.warning('请先选择隧道进行删除')
+  } else {
+    ElMessageBox.confirm(`是否确定删除该隧道`, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      customClass: 'delBox'
+    }).then(() => {
+      deleteTunnel(tunnelIds.value).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success(res.msg)
+          getList()
+          tunnelIds.value = []
+          tunnelNameList.value = []
+        } else {
+          ElMessage.error(res.msg)
+        }
+      })
+    })
+  }
+}, 100)
+
+</script>
+
+<style scoped lang="scss">
+.serialNumber-name-overflow-hidden {
+
+}
+
+.showNull {
+  margin-top: 150px;
+  font-size: 60px;
+  color: #05FEFF;
+}
+
+:deep(.el-form-item__error) {
+  font-size: 35px;
+}
+
+:deep(.el-form-item__content) {
+  .el-input-number {
+    width: 237px;
+
+    .el-input-number__decrease, .el-input-number__increase {
+      background-color: #08B7B8;
+      width: 50px;
+
+      .el-icon {
+        font-size: 40px;
+        color: #FFFFFF;
+        font-weight: bold;
+      }
+    }
+  }
+}
+
+.site-name {
+  position: absolute;
+  left: 250px;
+  z-index: 2;
+  margin-left: 120px;
+  height: 61px;
+  font-size: 46px;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: 61px;
+}
+
+.model-change {
+  z-index: 55;
+  position: absolute;
+  left: 700px;
+  font-size: 46px;
+  color: #05FEFF;
+  display: flex;
+  //flex-direction: column;
+  .model {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:last-child {
+      margin-left: 30px
+    }
+
+    > span:hover {
+      text-decoration: underline;
+    }
+  }
+
+
+  .card-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_tzdh.png');
+    margin-right: 16px;
+  }
+
+  .img-bg {
+    width: 42px;
+    height: 44px;
+    background-image: url('@/assets/images/tunnel/sd_icon_dtdh.png');
+    margin-right: 16px;
+  }
+}
+
+:deep(.el-radio-group) {
+  margin-top: 10px;
+}
+
+:deep(.el-radio__label) {
+  color: #FFFFFF;
+  font-size: 38px;
+}
+
+:deep(.el-radio__inner) {
+  width: 40px;
+  height: 40px;
+  border-radius: 25px;
+  border: 4px solid #05FEFF;
+  background-color: transparent;
+}
+
+:deep(.el-radio__input.is-checked+.el-radio__label) {
+  color: #FFFFFF;
+}
+
+:deep(.el-radio__input.is-checked .el-radio__inner ) {
+  background: #064B66;
+  border-color: #05FEFF !important;
+}
+
+:deep(.el-radio__inner::after) {
+  width: 18px;
+  height: 18px;
+  background: #05FEFF;
+}
+
+:deep(.el-dialog) {
+  border: 2px solid #05FEFF;
+  background: #0D6578;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  //margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 38px;
+  font-family: MicrosoftYaHei;
+  color: #FFFFFF;
+  margin-right: 12px;
+  line-height: 50px;
+}
+
+:deep(.el-input) {
+  height: 75px;
+
+  .el-input__wrapper {
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+
+    .el-input__inner {
+      height: auto;
+      color: #fff;
+      font-size: 38px;
+    }
+
+    .el-input__suffix-inner {
+      font-size: 30px;
+      color: #08B7B8;
+      line-height: 40px;
+      font-weight: bold;
+    }
+  }
+}
+
+.siteId {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
+  color: #FFFFFF;
+}
+
+.tunnel-bgc {
+  background-color: #072348;
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .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');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .img-box {
+    margin: 100px;
+  }
+
+  .box-content::after {
+    content: '';
+    flex: 0.65;
+    justify-content: flex-end;
+  }
+
+  .box-content {
+    height: 1850px;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 67px;
+    //padding-right: 70px;
+    align-content: flex-start;
+    justify-content: space-between;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 110px;
+        margin-bottom: 87px;
+        width: 220px;
+        height: 220px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      //cursor: pointer;
+      margin-top: 50px;
+      margin-right: 1.5%;
+      padding: 40px 30px;
+      width: 925px;
+      height: 550px;
+      background-image: url('@/assets/images/tunnel/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      //&:hover {
+      //  background-image: url('@/assets/images/tunnel/sdgl_bjtq.png');
+      //}
+      //
+      //&:nth-child(4n) {
+      //  margin-right: 0;
+      //}
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 45px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 50px;
+
+        > span {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        > span:nth-child(2) {
+          font-size: 38px;
+          color: #5CE4F2;
+        }
+
+
+        > span:last-child {
+          margin-left: 5px;
+          width: 95px;
+          padding: 1px 8px;
+          font-size: 32px;
+          border: 2px solid #05FEFF;
+          border-radius: 10px;
+          position: relative;
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        //flex-direction: column;
+        > div:first-child {
+
+          > div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-right: 30px;
+          }
+        }
+
+        .left-img {
+          //cursor: pointer;
+          margin-top: 110px;
+          margin-right: 50px;
+          width: 340px;
+          height: 148px;
+          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
+        }
+
+        .edit-btn {
+          cursor: pointer;
+          margin-top: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 30px;
+          color: #60DDDE;
+          //margin-left: 175px;
+
+          .edit-icon {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+
+          .edit-icon-two {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+        }
+
+        .tunnel-right {
+          padding-top: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            font-size: 36px;
+            color: #FB3838;
+
+            .fan-icon {
+              margin-right: 10px;
+              width: 32px;
+              height: 32px;
+              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
+            }
+          }
+
+          .icons-block {
+            margin-top: 50px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .icon-text {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              color: #FFFFFF;
+              font-size: 34px;
+              margin-right: 17px;
+              margin-bottom: 30px;
+
+              &:first-child {
+                margin-right: 37px;
+              }
+
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+
+              .icon {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    bottom: 50px;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    :deep(.el-pagination.is-background ) {
+      .btn-next, .btn-prev {
+        background-color: transparent;
+      }
+
+      .el-pager {
+        li {
+          margin: 0 0 0 40px;
+        }
+
+        li.is-active {
+          background-color: #60DDDE;
+        }
+      }
+    }
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+}
+</style>