预览模式和编辑模式大致完成

2023-12-20 12:21:42 +08:00
parent 0341e93686
commit a850d9af78
9 changed files with 894 additions and 51 deletions
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -0,0 +1,346 @@
+<template>
+    <div id="scene">
+        <div id="cvs" ref="content"></div>
+        <dev-info ref="info" :devInfo="devInfo" />
+        <pre-dialog ref="edit" @addEquipment="handleAddEqu" @removeEquipment="handleRemoveEqu" @cancel="handleCancel"
+            :hasDev="hasDevice" :pointNum="pointNum" pointGap="500" :equipmentType="equipmentType"
+            :equipmentName="equipmentName" :equipmentValue="equipmentValue" />
+        <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 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 {
+    CSS3DRenderer,
+    CSS3DObject,
+    CSS3DSprite,
+} from "three/addons/renderers/CSS3DRenderer.js";
+// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
+import {
+    CSS2DRenderer,
+    CSS2DObject,
+} from "three/addons/renderers/CSS2DRenderer.js";
+
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+// 获取html标签跟随组件dom
+const content = ref(null);
+const info = ref(null);
+const edit = ref(null);
+let demo; //定义demo全局变量
+// const loader = new OBJLoader();
+const loader = new OBJLoader();
+let hdrLoader = new RGBELoader();
+let backColorSet = three.sRGBEncoding;
+
+const params = defineProps(["isedit"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+
+alert(params.isedit)
+
+let isedit = ref(params.isedit)
+
+
+onMounted(handleMounted);
+// 挂载后回调
+async function handleMounted() {
+    const doms = [info.value.$el, edit.value.$el];
+    demo = new ThreeDScene(three, content.value);
+    //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
+    demo.isedit = params.isedit;
+    demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf");
+    demo.addOrbitControls(OrbitControls);
+    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);
+        await Promise.all([map.get("equ_fan"), map.get("equ_sensors")]);
+        demo.tunnelModeInit();
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+// 每个模型加载回调
+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;
+// 右键点击附着点后调函数
+function rClickCallback(demo) {
+    function editDev(targetPoint = null) {
+        hasDevice = targetPoint.hasDevice;
+        targetP = targetPoint;
+        //点击之后马上调用这个函数，变成回调，然后进行处理处理在传给preview表单
+        previewEquInfProcess()
+        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 handleAddEqu(formInfo) {
+    if (!formInfo.equipmentType) {
+        ElMessage({
+            message: "请选择传感器！",
+            type: "warning",
+        });
+        return;
+    }
+    //表单信息
+    //这里利用处理请求
+    demo.addEquipment(targetP, formInfo);
+    ElMessage({
+        message: "添加成功！",
+        type: "success",
+    });
+}
+
+const centerDialogVisible = ref(false);
+// 删除设备
+function handleRemoveEqu() {
+    if (!targetP.hasDevice) {
+        ElMessage({
+            message: "该点位不存在设备！",
+            type: "warning",
+        });
+        return;
+    }
+    centerDialogVisible.value = true;
+}
+// 对话框确认删除
+function handleConfirmAddEqu() {
+    demo.removeEquipment(targetP);
+    centerDialogVisible.value = false;
+    ElMessage({
+        message: "删除成功！",
+        type: "success",
+    });
+}
+// 处理取消关闭编辑框事件
+function handleCancel() {
+    if (!demo) return;
+    // 关闭标签
+    demo.isControlOrbit(true);
+    demo._resetState();
+    demo.clearTagsObj();
+}
+//我们的数据应该在哪个获取并将其传入进去呢？
+//是在demo.js中还是我们这二个PreviewScene或者editDialog呢？
+//按目前我这写的逻辑，好像是获取了二次？？，有没有办法可以把里面的导出到这呢？
+// console.log(demo.isControlOrbit());
+
+let equipmentType = ref(0)
+let equipmentName = ref(0)
+let equipmentValue = ref(0)
+
+
+function previewEquInfProcess() {
+    //3个信息都可以完全获取，之后，我们可以进行信息处理再传进去就可以了
+    // console.log(demo);
+    // console.log(targetP.name);
+    // console.log(demo.ThreeConfig.data.tunnelThreeConfig);
+    let tunnelThreeConfig = demo.ThreeConfig.data.tunnelThreeConfig
+    for (const equipment of tunnelThreeConfig) {
+        if (equipment.pointName == targetP.name) {
+            console.log(equipmentType);
+            console.log(equipmentName);
+            console.log(equipmentValue);
+            equipmentType.value = equipment.equipmentType
+            equipmentName.value = equipment.equipmentName
+            equipmentValue.value = equipment.equipmentValue
+        }
+    }
+}
+
+// let equipmentType = reactive(previewEquInfProcess().equipmentType)
+// let equipmentName = reactive(previewEquInfProcess().equipmentName)
+// let equipmentValue = reactive(previewEquInfProcess().equipmentValue)
+// console.log(equipmentType);
+
+
+
+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"
+}
+//取值方便操作
+// const tunnelConfigEquipment = ThreeConfig.data.tunnelThreeConfig
+
+// function tunnelModeInit() {
+//   for (const item of tunnelConfigEquipment) {
+//     let pointmodel = demo.scene.getobjectByName(item.pointName)
+//     console.log(pointmodel);
+//   }
+// }
+// tunnelModeInit()
+
+</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>
--- a/src/components/content/tunnelScene/TunnelScene.vue
+++ b/src/components/content/tunnelScene/TunnelScene.vue
@@ -2,6 +2,7 @@
  <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" pointGap="500" />
    <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
@@ -57,11 +58,21 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;

+const params = defineProps(["isedit"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+
+alert(params.isedit)
+
+let isedit = ref(params.isedit)
+
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
  const doms = [info.value.$el, edit.value.$el];
  demo = new ThreeDScene(three, content.value);
+  //看是不是预览模式，然后继续相关的操作(会在demo中的初始化中进行)
+  demo.isedit = params.isedit;
+
  demo.loadModel(GLTFLoader, "./assets/tunnelModel/chanel.gltf");
  demo.addOrbitControls(OrbitControls);
  demo.addTween(TWEEN);
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -39,6 +39,7 @@ import {
  defineProps,
  watch,
  nextTick,
+  ref,
 } from "vue";

 // 定义事件发射器，父组件监听
@@ -243,9 +244,16 @@ const equipment = {
    display: flex;
    justify-content: space-between;

+    button[disabled] {
+      color: grey !important;
+      opacity: 1
+    }
+
    button {
      cursor: pointer;
      transition: transform 0.1s linear 0s;
+
+
    }

    & :nth-child(1) {
--- a/src/components/content/tunnelScene/preEquComp/childComps/InputNum.vue
+++ b/src/components/content/tunnelScene/preEquComp/childComps/InputNum.vue
@@ -0,0 +1,60 @@
+<template>
+  <div id="input-num">
+    <p>{{ params.name }}</p>
+    <input type="text" :placeholder="params.placeholder" @input="handleChange" :disabled="params.disabled" />
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, onUnmounted } from "vue";
+const params = defineProps({
+  name: String,
+  placeholder: String,
+  disabled: Boolean,
+});
+const emit = defineEmits(["inputValue"]);
+let timer = null;
+function handleChange(e) {
+  if (timer) clearTimeout(timer);
+  timer = setTimeout(() => {
+    emit("inputValue", e.target.value);
+  }, 200);
+}
+onUnmounted(handleUnmounted);
+function handleUnmounted() {
+  clearInterval(timer);
+}
+</script>
+
+<style lang="scss" scoped>
+#input-num {
+  margin: 40px 30px 0px 30px;
+
+  P {
+    width: 130px;
+    height: 35px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 35px;
+  }
+
+  input {
+    width: 284px;
+    height: 51px;
+    border: 2px solid #0f82af;
+    background: transparent;
+    margin-top: 20px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 35px;
+    padding: 0px 10px;
+    overflow: hidden;
+  }
+
+  ::placeholder {
+    color: #0f82af;
+  }
+}
+</style>
--- a/src/components/content/tunnelScene/preEquComp/preDialog.vue
+++ b/src/components/content/tunnelScene/preEquComp/preDialog.vue
@@ -0,0 +1,304 @@
+<template>
+  <div id="edit-dialog">
+    <div class="distance-back">
+      <p>当前距离洞口：{{ pointDistance_str }}</p>
+      <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
+    </div>
+    <div class="equ-info">当前风压:{{ p }}Pa</div>
+    <div class="setting">
+      <div class="setting-item">
+        <p>传感器类型</p>
+        <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
+          :placeholder="equipmentTypeInf.value" disabled>
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="setting-item">
+        <p>设备选择</p>
+        <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
+          :placeholder="equipmentNameInf.value" disabled>
+          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <input-num name="阈值" :placeholder="equipmentValueInf.value" @inputValue="handelInput"
+        :disabled="isDisabledInputNum" />
+    </div>
+    <div class="btn">
+      <button @click="removeEquipment" disabled>删除</button>
+      <button @click="addEquipment" disabled>添加</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import InputNum from "./childComps/InputNum.vue";
+
+import {
+  reactive,
+  computed,
+  defineEmits,
+  defineProps,
+  watch,
+  nextTick,
+  ref,
+} from "vue";
+
+// 定义事件发射器，父组件监听
+const emit = defineEmits(["cancel", "removeEquipment", "addEquipment", "EquInf"]);
+const params = defineProps(["pointNum", "pointGap", "equipmentType", "equipmentName", "equipmentValue"]); //隧道第几个锚点
+
+// 当前风压
+let p = ref(57);
+
+function EquInf() {
+  // 发射事件给tunnel父组件
+  emit("EquInf");
+}
+
+console.log(params.equipmentType);
+console.log(params.equipmentName);
+console.log(params.equipmentValue);
+
+let equipmentTypeInf = ref(params.equipmentType)
+let equipmentNameInf = ref(params.equipmentName)
+let equipmentValueInf = ref(params.equipmentValue)
+
+
+
+//计算锚点之间距离
+const pointDistance_str = computed(
+  () =>
+    `${params.pointGap}米*${params.pointNum}=${params.pointGap * params.pointNum
+    }米`
+);
+
+// 请求数据模型
+const equipmentSetting = reactive({
+  equipmentType: "", //设备类型
+  chooseEquipment: "", //设备选择(设备名称)
+  threshold: "", //阈值
+});
+
+// 设备类型选项参数
+const options = reactive([
+  { label: "风机", value: "fan" },
+  { label: "风压传感器", value: "sensors" },
+  { label: "普通传感器", value: "sensors_2" },
+]);
+
+// 设备编号参数
+let options2 = reactive([]);
+
+let isDisabledInputNum = ref(false);
+watch(
+  () => equipmentSetting.equipmentType,
+  () => {
+    let label;
+    options2 = [];
+    equipmentSetting.chooseEquipment = "";
+    isDisabledInputNum = false;
+    if (equipmentSetting.equipmentType === "fan") {
+      label = "风机";
+      isDisabledInputNum = true;
+    }
+    if (equipmentSetting.equipmentType === "windPressure") label = "风压传感器";
+    if (equipmentSetting.equipmentType === "sensors") label = "普通传感器";
+    for (let i = 1; i < 11; i++) {
+      options2.push({ label: `${i}号${label}`, value: `${label}_${i}` });
+    }
+  }
+);
+
+// const obj = {
+//   equipmentId: String, //传感器id
+//   equipmentName: String, //设备名称
+//   pointName: String, //附着点名称（定位）
+//   equipmentType: String, //设备类型（类型可根据后端）
+//   equipmentOnline: Boolean, //是否在线
+//   isFan: Boolean, //是不是风机
+//   fanSpeed: Number, //F
+// };
+
+// const tunnel = {
+//   tunnelId: "",
+// };
+
+// 显示锚点距离
+let point_num = ref(0);
+
+function handelInput(e) {
+  equipmentSetting.threshold = e;
+}
+
+// 处理取消事件
+function handleCancel() {
+  // 发射事件给tunnel父组件
+  emit("cancel");
+}
+
+// 删除模型
+function removeEquipment() {
+  emit("removeEquipment");
+}
+
+// 添加设备
+function addEquipment() {
+  emit("addEquipment", equipmentSetting);
+  equipmentSetting.chooseEquipment = "";
+  equipmentSetting.equipmentType = "";
+  equipmentSetting.threshold = "";
+}
+const equipmentType = {
+  label: String, //传感器类型
+  typeId: String, //传感器类型ID(方便查找该类型的所有设备)
+};
+// 通过以上选项请求以下具体哪个设备
+const equipment = {
+  label: String, //传感器编号加名称
+  equId: String, // 传感器Id
+};
+</script>
+
+<style lang="scss" scoped>
+#edit-dialog {
+  width: 540px;
+  // min-height: 683px;
+  background: rgba(7, 35, 72, 0.79);
+  border-radius: 20px;
+  border: 2px solid #0f82af;
+  position: absolute;
+  z-index: 999;
+  display: block;
+  opacity: 0;
+
+  .distance-back {
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 20px 0px 30px;
+
+    p {
+      width: 388px;
+      height: 35px;
+      font-size: 24px;
+      font-family: MicrosoftYaHei;
+      color: #ffffff;
+      line-height: 35px;
+    }
+
+    img {
+      cursor: pointer;
+    }
+
+    img:active {
+      transform: scale(0.9);
+    }
+  }
+
+  .equ-info {
+    width: 190px;
+    height: 35px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #f7b500;
+    line-height: 35px;
+    margin: 20px 30px 0px 30px;
+  }
+
+  .setting {
+    .setting-item {
+      padding: 30px 30px 10px 30px;
+
+      p {
+        width: 130px;
+        height: 35px;
+        font-size: 26px;
+        font-family: MicrosoftYaHei;
+        color: #ffffff;
+        line-height: 35px;
+        margin-bottom: 20px;
+      }
+    }
+
+    :deep(.el-select) {
+      width: 284px;
+      //height: 51px;
+      border: transparent;
+    }
+
+    :deep(.el-input--suffix) {
+      width: 284px;
+      height: 51px;
+      background: rgba(7, 35, 72, 0.79);
+      border: 2px solid #0f82af;
+    }
+
+    :deep(.el-input__wrapper) {
+      background: transparent;
+      border: none !important;
+      padding: 0px 12px 0px 10px;
+      box-shadow: none !important;
+    }
+
+    :deep(.el-input__wrapper input) {
+      background: transparent;
+      height: 100%;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 37px;
+    }
+
+    :deep(.el-icon) {
+      color: #05feff;
+      font-size: 34px;
+    }
+  }
+
+  .btn {
+    margin: 100px 40px 40px 40px;
+    display: flex;
+    justify-content: space-between;
+
+    button[disabled] {
+      color: grey !important;
+      opacity: 1
+    }
+
+    button {
+      cursor: pointer;
+      transition: transform 0.1s linear 0s;
+
+
+    }
+
+    & :nth-child(1) {
+      width: 190px;
+      height: 60px;
+      border-radius: 11px;
+      border: 2px solid #0f82af;
+      background: transparent;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 60px;
+    }
+
+    & :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: 60px;
+    }
+
+    button:active {
+      transform: scale(0.9);
+    }
+  }
+}
+</style>
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -521,5 +521,16 @@ export default class Demo {
      }
      this.addEquipment(pointmodel, formInfo);
    }
+    //进行预览和编辑模式的一些操作
+    if (this.isedit == false) {
+      this.scene.traverse(function (item) {
+        if (item.name.includes('point')) {
+          if (item.hasDevice == false) {
+            item.visible = false
+            item.layers.set(-1)
+          }
+        }
+      })
+    }
  }
 }
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,16 +21,16 @@ const routes = [
    meta: {
      title: '首页',
      breadcrumb: true
-    }
+    },
  },
  {
-    path: '/preview',
-    name: 'tunnelpreview',
-    component: () => import('@/views/tunnel/preview.vue'),
+    path: '/edit',
+    name: 'tunneledit',
+    component: () => import('@/views/tunnel/edit.vue'),
    meta: {
-      title: '预览首页',
+      title: '编辑首页',
      breadcrumb: true
-    }
+    },
  },
  {
    path: '/debug',
--- a/src/views/tunnel/preview.vue
+++ b/src/views/tunnel/preview.vue
@@ -7,7 +7,15 @@
            <div class="top-right">
                <div class="current-site">
                    当前站点：<span>{{ currentSite }}</span>
-                    <div class="toggle"></div>
+                    <el-dropdown trigger="click" @command="handleCommand">
+                        <div class="toggle"></div>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
+                                }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
                </div>
                <div class="current-user">
                    上午好：<span>{{ currentUser }}</span>
@@ -16,7 +24,8 @@
                </div>
            </div>
        </div>
-        <tunnel-scene id="tunnel-box" />
+        <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
+        <tunnel-scene id="tunnel-box" :isedit="true" />
    </div>
 </template>
 <script setup>
@@ -24,11 +33,11 @@ import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import ManageLength from "@/components/manageLength/index.vue";
 import { dateFormat } from "@/utils/date.js";
-import { onMounted } from "vue";
 import { getToken } from "@/utils/auth";
 import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo } from "@/api/largeScreen";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
 import { ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";

 const authStore = useAuthStore();
 const router = useRouter();
@@ -36,11 +45,13 @@ const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
 const drawerRight = ref(true);
-const currentSite = ref("松江站");
-const currentUser = ref("admin");
+const currentSite = ref("");
+const siteList = ref([])
+const currentUser = ref("");
 const currentDate = ref(dateFormat());
 const tunnelBtn = ref();
 const tunnelList = ref([]);
+const tunnelId = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
 const serialNumber = ref("SC00DY00GH00ELBT");
@@ -59,34 +70,72 @@ onMounted(() => {
    nextTick(() => {
        showFan.value = true;
    });
+    getUser()
    getOtherInfo()
-    getScreenInfo();
+
 });

-const getOtherInfo = async () => {
-    await getLargeScreenInfo().then((res) => {
+const getUser = () => {
+    getUserInfo().then(res => {
+        currentUser.value = res.data.user.userName
+    })
+}
+const getOtherInfo = () => {
+    getLargeScreenInfo().then((res) => {
        if (res?.code === 1000) {
            routeList.value = res.data.routeList
            currentSite.value = res.data.siteOption[0].label
-            tunnelList.value = res.data.tunnelOption
+            siteList.value = res.data.siteOption
+            tunnelId.value = res.data.tunnelOption[0].value
+            getTunnel(res.data.siteOption[0].value)
+            getScreenInfo(tunnelId.value);
        }
    });
 };
-const getScreenInfo = async () => {
-    await getLargeScreen(1).then((res) => {
+const getScreenInfo = async (id) => {
+    await getLargeScreen(id).then((res) => {
        if (res?.code === 1000) {
            largeScreenData.value = res.data;
        }
    });
 };
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+    getTunnelBySiteId(id).then((res) => {
+        if (res?.code === 1000) {
+            tunnelList.value = res.data
+            getScreenInfo(res.data[0].value)
+        }
+    });
+}
+const changeTunnel = (e) => {
+    tunnelId.value = e
+    let newObj = {}
+    tunnelList.value.forEach((item, index) => {
+        if (index === e) {
+            newObj = item
+        }
+    })
+    getScreenInfo(newObj.value)
+    nextTick(() => {
+        showFan.value = true;
+    });
+}
 const manageSelect = (index) => {
    console.log("首页点击-", index);
    if (index === 0) {
        router.push("/site");
    } else if (index === 1) {
        router.push("/tunnel/1");
+    } else if (index === 2) {
+        router.push("/user");
    }
 };
+const handleCommand = (item) => {
+    console.log('commads', item)
+    currentSite.value = item.label
+    getTunnel(item.value)
+}
 const closeLeft = () => {
    drawerLeft.value = !drawerLeft.value;
 };
@@ -154,7 +203,53 @@ const closeSocket = () => {
 };
 initWebSocket();
 </script>
-  
+<style lang="scss">
+.el-dropdown__popper.el-popper {
+    background: transparent;
+    //border: none;
+    border: 1px solid #0E7DAA;
+    border-radius: 10px;
+}
+
+.is-light {
+    background: rgba(7, 35, 72, 0.9);
+}
+
+.el-popper {
+    padding: 20px;
+    margin-left: 50px;
+    width: 150px;
+    background: rgba(7, 35, 72, 0.9);
+
+    .el-scrollbar__wrap {
+        .el-dropdown__list {
+            .el-dropdown-menu {
+                background-color: rgba(7, 35, 72, 0.9);
+                border-radius: 10px;
+                padding: 5px;
+
+                .el-dropdown-menu__item {
+                    color: #FFFFFF;
+                    //border:none;
+                    padding: 5px;
+
+                    border-bottom: 1px solid #05FEFF;
+
+                    &:last-child {
+                        border-bottom: none;
+                    }
+                }
+
+                .el-dropdown-menu__item.hover,
+                .el-dropdown-menu__item:hover {
+                    background-color: transparent !important;
+                    color: #F7B500;
+                }
+            }
+        }
+    }
+}
+</style>
 <style lang="scss" scoped>
 #main {
    height: 100%;
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div id="main">
    <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
      <div class="tunnel-title"></div>
      <manage-length class="tunnel-length"></manage-length>
      <div class="top-right">
@@ -11,7 +11,8 @@
            <div class="toggle"></div>
            <template #dropdown>
              <el-dropdown-menu>
-                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label }}</el-dropdown-item>
+                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
+                }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
@@ -23,23 +24,25 @@
        </div>
      </div>
    </div>
-    <tunnel-scene id="tunnel-box"/>
+    <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->\
+    <!-- 一进去的话应该是预览模式，所以引入这个组件 -->
+    <preview-scene id="tunnel-box" :isedit="false"></preview-scene>
    <div class="left">
      <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
-        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData"/>
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" />
+        <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />
+        <used-ele v-if="showFan" :list="socketData.leftData" :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">
      <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-                 :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
+        :close-on-click-modal="false" :close-on-press-escape="false">
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" />
      </el-drawer>
      <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
      <div v-else class="shrink-right" @click="closeRight"></div>
@@ -60,6 +63,7 @@

 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
+import PreviewScene from "@/components/content/tunnelScene/PreviewScene.vue"
 import FanInfo from "@/components/content/fanInfo/FanInfo.vue";
 import TransducerList from "@/components/content/transducerList/TransducerList.vue";
 import UsedEle from "@/components/content/usedEle/UsedEle.vue";
@@ -68,12 +72,12 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import ManageLength from "@/components/manageLength/index.vue";
-import {dateFormat} from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
-import {ElMessageBox} from "element-plus";
-import {getUserInfo} from "@/api/login";
+import { dateFormat } from "@/utils/date.js";
+import { getToken } from "@/utils/auth";
+import { useAuthStore } from "@/store/userstore.js";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
+import { ElMessageBox } from "element-plus";
+import { getUserInfo } from "@/api/login";

 const authStore = useAuthStore();
 const router = useRouter();
@@ -110,7 +114,6 @@ onMounted(() => {
  getOtherInfo()

 });
-
 const getUser = () => {
  getUserInfo().then(res => {
    currentUser.value = res.data.user.userName
@@ -163,13 +166,13 @@ const manageSelect = (index) => {
    router.push("/site");
  } else if (index === 1) {
    router.push("/tunnel/1");
-  }else if (index === 2) {
+  } else if (index === 2) {
    router.push("/user");
  }
 };
-const handleCommand=(item)=>{
-  console.log('commads',item)
-  currentSite.value=item.label
+const handleCommand = (item) => {
+  console.log('commads', item)
+  currentSite.value = item.label
  getTunnel(item.value)
 }
 const closeLeft = () => {
@@ -246,40 +249,45 @@ initWebSocket();
  border: 1px solid #0E7DAA;
  border-radius: 10px;
 }
-.is-light{
-  background:rgba(7,35,72,0.9);
+
+.is-light {
+  background: rgba(7, 35, 72, 0.9);
 }
-.el-popper{
+
+.el-popper {
  padding: 20px;
  margin-left: 50px;
  width: 150px;
-  background:rgba(7,35,72,0.9);
+  background: rgba(7, 35, 72, 0.9);
+
  .el-scrollbar__wrap {
    .el-dropdown__list {
      .el-dropdown-menu {
-        background-color:rgba(7,35,72,0.9);
+        background-color: rgba(7, 35, 72, 0.9);
        border-radius: 10px;
        padding: 5px;
-        .el-dropdown-menu__item{
+
+        .el-dropdown-menu__item {
          color: #FFFFFF;
          //border:none;
          padding: 5px;

          border-bottom: 1px solid #05FEFF;
-          &:last-child{
+
+          &:last-child {
            border-bottom: none;
          }
        }

-        .el-dropdown-menu__item.hover,.el-dropdown-menu__item:hover{
-          background-color:transparent!important;
+        .el-dropdown-menu__item.hover,
+        .el-dropdown-menu__item:hover {
+          background-color: transparent !important;
          color: #F7B500;
        }
      }
    }
  }
 }
-
 </style>
 <style lang="scss" scoped>
 #main {