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

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

.drone.yml

@@ -74,7 +74,7 @@ volumes:
       path: /home/build/tunnel-cloud-web
   - name: cache
     host:
-      path: /home/npm/cache
+      path: /home/npm/tunnel-cloud-web
   - name: config # k8s对接的配置文件
     host:
       path: /home/kubect

src/api/largeScreen.js

@@ -42,3 +42,27 @@ export const getFanEchartsInfo = (equipmentId) => {
     method: 'get'
   })
 }
+//风机频率修改
+export const editFrequency = (data) => {
+  return request({
+    url: '/tunnel/large/screen/frequency',
+    method: 'put',
+    data
+  })
+}
+//风机运行模式切换
+export const editFrequencyModelSwitch = (data) => {
+  return request({
+    url: '/tunnel/large/screen/model/switch',
+    method: 'post',
+    data
+  })
+}
+//风机开关切换
+export const editFrequencyOperationSwitch = (data) => {
+  return request({
+    url: '/tunnel/large/screen/operation/switch',
+    method: 'post',
+    data
+  })
+}

src/api/tunnelManage.js

@@ -43,14 +43,6 @@ export const editTunnel = (data) => {
     data
   })
 }
-//设备管理-风机设备信息修改
-export const editFan = (data) => {
-  return request({
-    url: '/tunnel/equipment/frequency/equipments',
-    method: 'put',
-    data
-  })
-}
 export const editEquipment = (data) => {
   return request({
     url: '/tunnel/equipment/equipments',
@@ -58,10 +50,3 @@ export const editEquipment = (data) => {
     data
   })
 }
-export const editAcquisitions = (data) => {
-  return request({
-    url: '/tunnel/equipment/frequency/acquisitions',
-    method: 'put',
-    data
-  })
-}

src/assets/styles/index.scss

@@ -129,7 +129,7 @@ body,
     }
 
     .current-user {
-      margin-top: 26px;
+      margin-top: 13px;
       display: flex;
       align-items: center;
 

src/components/content/airInfo/AirInfo.vue

@@ -238,8 +238,7 @@ const initChart = (type, values) => {
         let content = `
           <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
             <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
-            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
-            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
           </div>`;
         return content;
       },
@@ -403,10 +402,13 @@ const initAirChart = (type, values) => {
   //position: absolute;
   z-index: 100;
   width: 824px;
+  border: 2px solid #0f82af;
+  background: rgba(6, 34, 71, 0.78);
+  border-radius: 20px;
   //height: 400px;
   //top: 1003px;
   //right: 72px;
-  background-image: url(@/assets/images/airInfo/bg.png);
+  //background-image: url(@/assets/images/airInfo/bg.png);
   //padding: 25px 20px 1px 21px;
 
   .fan-speed {

src/components/content/badGasInfo/BadGasInfo.vue

@@ -197,7 +197,7 @@ const initChart = (type, values) => {
         fontSize: 40,
       },
       formatter: (params) => {
-        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px">${params[0].name}</div>` + '<br/>'
+        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px;margin-left: 20px">${params[0].name}</div>` + '<br/>'
         for (let i = 0; i < params.length; i++) {
           res += `
               <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>

src/components/content/fanInfo/FanInfo.vue

@@ -3,7 +3,7 @@
     <div class="title">风机</div>
     <div v-if="socketData==null||socketData.length===0" class="showNull ">
       <div class="loading" v-if="loading===0"></div>
-      {{loading===0?'加载中...':'暂无数据~'}}
+      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
     </div>
     <div v-else class="fans">
       <div class="fan-item" v-for="(item,index) in socketData" :key="item.equipmentId">
@@ -15,23 +15,23 @@
           <!-- 功能 -->
           <div class="option-nav">
             <div>
-              <div class="state " :class="{ 'blue-state': !item.breakdown }">
+              <div class="state">
-                <div :class="{ stopColor: item.breakdown }">
+                <div class="blue-state" :class="{ stopColor: item.breakdown }">
                   <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
-                  状态：{{ item.breakdown ? '故障' : '运行' }}
+                  状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
                 </div>
                 <div class="switch">
                   <div
                       id="auto"
                       :class="{ active: item.running }"
-                      @click="item.running = true"
+                      @click="item.running = true;editOperate(item)"
                   >
                     启动
                   </div>
                   <div
                       id="stop"
                       :class="{ active: !item.running }"
-                      @click="item.running = false"
+                      @click="item.running = false;editOperate(item)"
                   >
                     停止
                   </div>
@@ -39,61 +39,72 @@
               </div>
               <div class="power">
                 <div class="check-box">
-                  <el-radio-group v-model="item.autoMode" class="radio-group">
+                  <el-radio-group v-model="item.autoMode" @change="changeModel(item)">
                     <el-radio :label="true">自动</el-radio>
                     <el-radio :label="false">手动</el-radio>
                   </el-radio-group>
                 </div>
                 <div class="edit-power">
-                  <span style="color: white">当前功率</span>
+                  <span style="color: white">给定频率</span>
-                  <span class="units"
+                  <!--                  <span class="units"-->
-                  ><input
+                  <!--                  ><input-->
-                      type="number"
+                  <!--                      type="number"-->
-                      min="0"
+                  <!--                      min="0"-->
-                      v-model="item.frequencySetting"
+                  <!--                      v-model="item.frequencySetting"-->
-                      :disabled="item.autoMode"
+                  <!--                      onchange="changeFrequency(item)"-->
-                  /></span>
+                  <!--                      :disabled="item.autoMode"-->
+                  <!--                  /></span>-->
+                  <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
+                            @change="changeFrequency(item)">
+                    <template #suffix>
+                      <span>Hz</span>
+                    </template>
+                  </el-input>
                 </div>
               </div>
             </div>
-            <div class="shuntThreshold">
-              <div class="fenliu-icon"></div>
-              分流阀值
-              <span class="units"
-              ><input
-                  type="number"
-                  min="0"
-                  v-model="shuntThreshold"
-              /></span>
-            </div>
           </div>
         </div>
-        <div class="current"  @click="handleOpenChart(item,index)">
+        <div class="current" @click="handleOpenChart(item,index)">
-          <fan-info-item :wp="transducerData[index]" />
+          <fan-info-item :wp="transducerData[index]"/>
+        </div>
+        <div class="line"></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">
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
+      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'"
+                 width="2175px"
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="loading-block" v-if="showLoading">
-          <div class="loading" ></div>
+          <div class="loading"></div>
           <span>加载中...</span>
         </div>
         <div class="chat-dialog" v-else>
           <div id="containerFan"></div>
           <div style="width: 1px;"></div>
         </div>
-<!--        <div class="time-select">-->
+        <!--        <div class="time-select">-->
-<!--          <time-range-btn-->
+        <!--          <time-range-btn-->
-<!--              :buttonList="timeList"-->
+        <!--              :buttonList="timeList"-->
-<!--              v-model="selectTimeButton"-->
+        <!--              v-model="selectTimeButton"-->
-<!--              @select="timeSelect"-->
+        <!--              @select="timeSelect"-->
-<!--          />-->
+        <!--          />-->
-<!--        </div>-->
+        <!--        </div>-->
         <div class="left-bottom-icon"></div>
         <div class="right-bottom-icon"></div>
       </el-dialog>
@@ -104,10 +115,16 @@
 <script setup>
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
-import {getFanEchartsInfo} from "../../../api/largeScreen";
+import {
+  editFrequency,
+  editFrequencyModelSwitch,
+  editFrequencyOperationSwitch,
+  getFanEchartsInfo
+} from "@/api/largeScreen";
 
 const props = defineProps({
   list: Array,
+  tunnelId: Number,
   fanData: Array,
   transducerData: Array,
   loading: Number,
@@ -117,6 +134,20 @@ let Echarts_info1 = null;
 let fan01_option = reactive();
 const shuntThreshold = ref(23)
 const transducerData = ref([])
+const shuntList = ref([
+  {
+    shuntThreshold: 23
+  },
+  {
+    shuntThreshold: 14
+  },
+  {
+    shuntThreshold: 22
+  },
+  {
+    shuntThreshold: 46
+  },
+])
 const stateA = ref(false)
 const stateB = ref(false)
 const stateC = ref(false)
@@ -125,7 +156,10 @@ const showLoading = ref(false)
 const fanIndex = ref(0)
 let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
-  props.loading=now
+  props.loading = now
+}, {deep: true});
+watch(() => props.tunnelId, (now) => {
+  props.tunnelId = now
 }, {deep: true});
 watch(() => props.transducerData, (now) => {
   getTransData(now.frequencyChangerList)
@@ -134,7 +168,7 @@ watch(() => props.fanData, (now) => {
   getBasicData(now.frequencyChangerList)
 }, {deep: true});
 watch(() => props.list, (now) => {
-  socketData.value.forEach(item => {
+  socketData.value?.forEach(item => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
         if (newItem.frequencyFeedback) {
@@ -160,22 +194,62 @@ watch(() => props.list, (now) => {
   })
   handleOnMounted()
 }, {deep: true});
+const packageData = (item, type, flag) => {
+  let number = 0
+  if (item.equipmentType === "frequency1") {
+    number = 1
+  } else if (item.equipmentType === "frequency2") {
+    number = 2
+  }
+  if (flag) {
+    return {
+      number: number,
+      value: type,//浮点数
+      tunnelId: props.tunnelId,
+    }
+  } else {
+    return {
+      number: number,
+      state: type === true ? 0 : 1,
+      tunnelId: props.tunnelId,
+    }
+  }
+}
+//启动/停止
+const editOperate = (item) => {
+  const data = packageData(item, item.running)
+  // editFrequencyOperationSwitch(data).then(res => {
+  //   console.log('修改风机启动', res)
+  // })
+}
+const changeFrequency = (item) => {
+  const data = packageData(item, item.frequencySetting, true)
+  // editFrequency(data).then(res => {
+  //   console.log('修改风机频率', res)
+  // })
+}
+const changeModel = (item) => {
+  const data = packageData(item, item.autoMode)
+  // editFrequencyModelSwitch(data).then(res => {
+  //   console.log('修改自动模式', res)
+  // })
+}
 const getFanInfo = (equipmentId) => {
   isVisited.value = true
-  showLoading.value=true
+  showLoading.value = true
   getFanEchartsInfo(equipmentId).then(res => {
     if (res?.code === 1000) {
-      showLoading.value=false
+      showLoading.value = false
       nextTick(() => {
-        initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
+        initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
       })
     }
   })
 }
-const handleOpenChart = (item,index) => {
+const handleOpenChart = (item, index) => {
 
   getFanInfo(item.equipmentId)
-  fanIndex.value=index+1
+  fanIndex.value = index + 1
 }
 const getTransData = (data) => {
   let tranObj = {}
@@ -224,11 +298,12 @@ const getBasicData = (data) => {
   data?.map(item => {
     tranObj = {
       equipmentId: item.equipmentId,
+      equipmentType: item.equipmentType,
       autoMode: item.autoMode,//自动模式
       breakdown: item.breakdown,//故障
       running: item.running,//启动,
-      frequencyFeedback: item.frequencyFeedback,//当前功率
+      frequencyFeedback: item.frequencyFeedback,
-      frequencySetting: item.frequencySetting//当前功率
+      frequencySetting: item.frequencySetting
     }
     tranArr.push(tranObj)
   })
@@ -313,7 +388,7 @@ const handleOnMounted = () => {
               }
             },
           },
-          max: 1000,
+          max: 50,
           splitLine: {
             show: false,
           },
@@ -364,7 +439,7 @@ const getImageUrl = (name) => {
 /**
  * 初始化echarts实例方法
  */
-const initChart = (type, valueA,valueB,valueC) => {
+const initChart = (type, valueA, valueB, valueC) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerFan'));
   //5.传入数据
@@ -392,25 +467,37 @@ const initChart = (type, valueA,valueB,valueC) => {
     tooltip: {
       show: true,
       trigger: 'axis',
-      backgroundColor: "transparent", // 设置背景颜色为透明
+      backgroundColor: "rgba(20,36,51,0.7)", // 设置背景颜色为透明
-      borderColor: "transparent", // 设置边框颜色为透明
+      borderColor: "#6087BA", // 设置边框颜色为透明
       padding: 0, // 设置内边距为0
+      borderWidth: 2,
       textStyle: {
         fontSize: 40
       },
-      formatter: function (params) {
+      formatter: (params) => {
-        let content = `
+        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px;margin-left: 20px">${params[0].name}</div>` + '<br/>'
-          <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
+        for (let i = 0; i < params.length; i++) {
-            <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
+          res += `
-            <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+              <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
-           <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[1].name}</div>
+             `;
-            <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
+        }
-           <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[2].name}</div>
+        return res
-            <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[2].value}</span></div>
 
-          </div>`;
+        // return content;
-        return content;
       },
+      // formatter: function (params) {
+      //   let content = `
+      //     <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
+      //       <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
+      //       <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+      //      <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[1].name}</div>
+      //       <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
+      //      <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[2].name}</div>
+      //       <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[2].value}</span></div>
+      //
+      //     </div>`;
+      //   return content;
+      // },
     },
     toolbox: {
       show: false,
@@ -450,7 +537,7 @@ const initChart = (type, valueA,valueB,valueC) => {
     series: [
       {
         // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
-       name:'A相电流',
+        name: 'A相电流',
         data: valueA,
         type: 'line',
         smooth: true,
@@ -460,7 +547,7 @@ const initChart = (type, valueA,valueB,valueC) => {
         },
       },
       {
-        name:'B相电流',
+        name: 'B相电流',
         data: valueB,
         type: 'line',
         smooth: true,
@@ -470,7 +557,7 @@ const initChart = (type, valueA,valueB,valueC) => {
         },
       },
       {
-        name:'C相电流',
+        name: 'C相电流',
         data: valueC,
         type: 'line',
         smooth: true,
@@ -519,9 +606,17 @@ input[type="number"] {
   -moz-appearance: textfield;
 }
 
+:deep(.el-radio-group) {
+  .el-radio {
+    display: flex;
+    align-items: center;
+  }
+
+}
+
 :deep( .el-radio__input) {
-  width: 24px;
+  width: 28px;
-  height: 24px;
+  height: 28px;
   border: 2px solid #38cafb;
   border-radius: 50%;
   display: flex;
@@ -532,7 +627,7 @@ input[type="number"] {
 :deep( .el-radio__label) {
   font-size: 28px;
   color: #38cafb;
-  line-height: 37px;
+  margin-top: -5px;
 }
 
 #fan_info {
@@ -562,10 +657,76 @@ input[type="number"] {
   .fans {
     height: calc(100% - 30px);
 
+    .shunt-box {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-left: 15px;
+      margin-top: 15px;
+
+      .shuntThreshold {
+        display: flex;
+        align-items: center;
+        padding-bottom: 20px;
+        padding-right: 45px;
+        font-size: 28px;
+        color: #FFFFFF;
+        border-right: 2px solid #38CAFB;
+        margin-right: 45px;
+
+        &:nth-child(2n) {
+          border-right: none;
+          margin-right: 0;
+          padding-right: 0;
+        }
+
+        &:nth-child(3), &:nth-child(4) {
+          padding-bottom: 0;
+        }
+
+        .fenliu-icon {
+          margin-right: 9px;
+          width: 31px;
+          height: 28px;
+          background-image: url('../../../assets/images/fanInfo/fsp_icon_flf.png');
+        }
+
+        .units {
+          z-index: 22;
+          position: relative;
+        }
+
+        input {
+          width: 130px;
+          height: 44px;
+          border: 2px solid #0f82af;
+          background: transparent;
+          margin-left: 14px;
+          outline: none;
+          font-size: 28px;
+          font-weight: bold;
+          color: #38cafb;
+          line-height: 37px;
+        }
+
+        .units::after {
+          content: "%";
+          position: absolute;
+          right: 6px;
+          top: 40%;
+          bottom: 0;
+          transform: translateY(-50%);
+          font-size: 28px;
+          color: #38cafb;
+          line-height: 37px;
+        }
+      }
+    }
+
     .fan-item {
       //height: 33.5%;
       height: 50%;
-      padding-bottom:10px;
+      padding-bottom: 10px;
       display: flex;
       flex-direction: column;
       font-size: 14px;
@@ -575,7 +736,7 @@ input[type="number"] {
         display: flex;
 
         .echart {
-          height: 270px;
+          height: 245px;
           width: 34%;
           margin: 0px 0px 0px 10px;
           position: relative;
@@ -619,55 +780,49 @@ input[type="number"] {
               display: flex;
               flex-direction: column;
               justify-content: center;
-              font-size: 26px;
+              font-size: 28px;
               color: #38cafb;
               line-height: 35px;
               gap: 40px;
 
-              .blue-state {
+              .stopColor {
-                > div:first-child:hover {
+                background-color: red !important;
-                  color: #fff;
-                  background-color: #127399;
-                  width: 180px;
-                  padding-left: 5px;
-                  border-radius: 8px;
-
-                  > div:first-child {
-                    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
-                  }
-                }
               }
 
-              > div:first-child {
+              .blue-state {
                 display: flex;
                 align-items: center;
-                padding-left: 5px;
+                height: 45px;
+                margin-right: 15px;
+                color: #fff;
+                background-color: #127399;
+                padding-left: 10px;
+                border-radius: 8px;
+                margin-left: -5px;
 
-                > div {
+                .state-icon {
+                  width: 28px;
+                  height: 28px;
+                  background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
                   margin-right: 10px;
                 }
+
+                .fan-state {
+                  color: #FFFFFF;
+                }
               }
 
-              img {
-                margin-right: 4px;
-                transform: translateY(15%);
-              }
-
-              .state-icon {
-                width: 26px;
-                height: 26px;
-              }
 
               .switch {
                 display: flex;
-                width: 160px;
+                width: 165px;
-                height: 40px;
+                height: 45px;
                 border-radius: 22px;
                 border: 2px solid #0f82af;
                 overflow: hidden;
                 font-weight: bold;
                 color: #127399;
-                line-height: 35px;
+                line-height: 40px;
 
                 & > div {
                   flex: 1;
@@ -688,104 +843,108 @@ input[type="number"] {
               line-height: 37px;
               gap: 33px;
 
+              .check-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                //margin-left: 20px;
+              }
+
               .edit-power {
                 margin-top: 10px;
+                display: flex;
 
-                .units {
+                > span:first-child {
-                  position: relative;
+                  white-space: pre;
+                  margin-right: 14px;
                 }
-
+                //:deep(.is-disabled) {
-                .units::after {
+                //  .el-input__inner{
-                  content: "Hz";
+                //    color: #FFFFFF!important;
-                  position: absolute;
+                //  }
-                  right: 6px;
+                //}
-                  top: 50%;
+                :deep(.el-input__wrapper) {
-                  transform: translateY(-50%);
-                  font-size: 28px;
-                  color: #38cafb;
-                  line-height: 37px;
-                }
-
-                input {
                   width: 130px;
                   height: 44px;
-                  border: 2px solid #0f82af;
+                  background-color: transparent;
-                  background: transparent;
+                  box-shadow: none;
-                  margin-left: 14px;
+                  border: 1px solid #38CAFB;
-                  outline: none;
+                  transform: none;
-                  font-size: 28px;
+                  transition: none;
-                  font-weight: bold;
+                  margin-right: 10px;
-                  color: #38cafb;
+
-                  line-height: 37px;
+                  .el-input__inner {
+                    height: 44px;
+                    font-size: 30px;
+                    font-weight: bold;
+                    color: #38CAFB;
+                  }
+
+
+                  .el-input__suffix-inner {
+                    font-size: 30px;
+                    color: #38CAFB;
+                    line-height: 40px;
+                    font-weight: bold;
+                  }
                 }
+
+                //.units {
+                //  position: relative;
+                //}
+                //
+                //.units::after {
+                //  content: "Hz";
+                //  position: absolute;
+                //  right: 6px;
+                //  top: 50%;
+                //  transform: translateY(-50%);
+                //  font-size: 28px;
+                //  color: #38cafb;
+                //  line-height: 37px;
+                //}
+                //
+                //input {
+                //  width: 130px;
+                //  height: 44px;
+                //  border: 2px solid #0f82af;
+                //  background: transparent;
+                //  margin-left: 14px;
+                //  outline: none;
+                //  font-size: 28px;
+                //  font-weight: bold;
+                //  color: #38cafb;
+                //  line-height: 37px;
+                //}
               }
             }
           }
-
-          .shuntThreshold {
-            display: flex;
-            align-items: center;
-            justify-content: flex-end;
-            //align-items: center;
-            //width: 112px;
-            padding-top: 30px;
-            padding-right: 25px;
-            font-size: 28px;
-            color: #FFFFFF;
-
-            .fenliu-icon {
-              margin-right: 9px;
-              width: 31px;
-              height: 28px;
-              background-image: url('../../../assets/images/fanInfo/fsp_icon_flf.png');
-            }
-
-            .units {
-              z-index: 22;
-              position: relative;
-            }
-
-            input {
-              width: 130px;
-              height: 44px;
-              border: 2px solid #0f82af;
-              background: transparent;
-              margin-left: 14px;
-              outline: none;
-              font-size: 28px;
-              font-weight: bold;
-              color: #38cafb;
-              line-height: 37px;
-            }
-
-            .units::after {
-              content: "%";
-              position: absolute;
-              right: 6px;
-              top: 40%;
-              bottom: 0;
-              transform: translateY(-50%);
-              font-size: 28px;
-              color: #38cafb;
-              line-height: 37px;
-            }
-          }
         }
       }
 
       .current {
-        margin-top: 30px;
+        //margin-top: 30px;
         margin-right: 20px;
         margin-left: 26px;
         //height: 37px;
         font-size: 28px;
         color: #FFFFFF;
         cursor: pointer;
-        &:hover{
+
-          background-color:  #2E5589;
+        &:hover {
+          background-color: #2E5589;
           border-radius: 6px;
         }
       }
+
+      .line {
+        margin-top: 20px;
+        margin-left: 15px;
+        width: 776px;
+        height: 2px;
+        background: rgba(107, 163, 237, 0.4);
+        border-radius: 10px;
+      }
     }
   }
 }
@@ -796,18 +955,15 @@ input[type="number"] {
   background: #0f7da9;
 }
 
-.stopColor {
-  color: red;
-}
 
-.stopColor:hover {
+//.stopColor:hover {
-  color: #fff;
+//  color: #fff;
-  width: 180px;
+//  width: 180px;
-  background: #9B2222;
+//  background: #9B2222;
-  border-radius: 8px;
+//  border-radius: 8px;
-
+//
-  > div:first-child {
+//  > div:first-child {
-    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+//    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
-  }
+//  }
-}
+//}
 </style>

src/components/content/tunnelScene/PreviewScene.vue

@@ -3,7 +3,7 @@
         <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"
+            :hasDev="hasDevice" :pointNum="pointNum" :pointGap="pointGap" :equipmentType="equipmentType"
             :equipmentName="equipmentName" :equipmentValue="equipmentValue" />
         <el-dialog v-model="centerDialogVisible" width="30%" destroy-on-close center :show-close="false" style="
         margin: 20% auto;
@@ -63,7 +63,7 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLen", "tunnelName"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
 
 
 
@@ -84,6 +84,16 @@ let isedit = ref(params.isedit)
 //     });
 // };
 
+let pointGap = reactive(params.tunnelLen.value);
+watch(
+    () => params.tunnelLen,
+    (now) => {
+        params.tunnelLen = now;
+        // console.log(params.tunnelLen);
+        pointGap = params.tunnelLen.value / 20;
+    },
+    { deep: true }
+);
 
 
 watch(
@@ -133,6 +143,7 @@ async function handleMounted() {
         modelList.value = await modelStore.initModelDataPreview(params.tunnelId);
         // console.log("init", params.tunnelId);
         demo.previewtunnelModeInit(toRaw(modelList.value));
+        demo.SignsInf(params.tunnelName, String(params.tunnelLen.value))
         // watch(
         //     () => params.tunnelId,
         //     (now) => {
@@ -250,6 +261,16 @@ function rClickCallback(demo) {
 // 添加设备
 function handleAddEqu(formInfo) {
     demo.addEquipment(targetP.value, formInfo);
+    // //将墙壁设置为可以穿透点击
+    // for (let line = 1; line <= 20; line++) {
+    //     if (line < 10) {
+    //         let wall = 'wall_' + '0' + line
+    //         this.scene.getObjectByName(wall).layers.set(0)
+    //     } else if (line >= 10) {
+    //         let wall = 'wall_' + line
+    //         this.scene.getObjectByName(wall).layers.set(0)
+    //     }
+    // }
 }
 
 const centerDialogVisible = ref(false);

src/components/content/tunnelScene/TunnelScene.vue

@@ -49,7 +49,6 @@ import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import { onMounted, reactive, ref, toRaw, watch } from "vue";
 import { ElMessage } from "element-plus";
-
 import { useModelSceneStore } from "@/store/modelSceneStore";
 // 获取html标签跟随组件dom
 const content = ref(null);
@@ -72,6 +71,7 @@ watch(
     params.tunnelLength = now;
     console.log(params.tunnelLength);
     pointGap = now / 20;
+    console.log(params.form.tunnelName);
   },
   { deep: true }
 );
@@ -114,6 +114,7 @@ async function handleMounted() {
     // modelList.value = await initData(params.tunnelId, params.form);
     console.log("test", modelList.value);
     demo.editTunnelInit(toRaw(modelList.value));
+    demo.SignsInf(params.form.tunnelName, String(params.tunnelLength))
   } catch (err) {
     console.log(err);
     ElMessage({
@@ -197,9 +198,23 @@ function rClickCallback(demo) {
   demo.addFunction("editDev", editDev);
 }
 
+// function streetSigns(){
+
+// }
+
 // 场景添加设备
 function handleAddEqu(formInfo) {
   demo.addEquipment(targetP.value, formInfo);
+  // //将墙壁设置为可以穿透点击
+  // for (let line = 1; line <= 20; line++) {
+  //   if (line < 10) {
+  //     let wall = 'wall_' + '0' + line
+  //     this.scene.getObjectByName(wall).layers.set(0)
+  //   } else if (line >= 10) {
+  //     let wall = 'wall_' + line
+  //     this.scene.getObjectByName(wall).layers.set(0)
+  //   }
+  // }
 }
 
 const centerDialogVisible = ref(false);

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

@@ -1,31 +1,40 @@
 <template>
   <div id="edit-dialog">
     <div class="distance-back">
-      <p>当前距离洞口：{{ pointDistance_str }}</p>
+      <p>当前距离洞口：
+        <span>
+          {{ pointDistance_str }}
+        </span>
+      </p>
       <img src="/images/htmlEditDialog/back-icon.png" alt="" @click="handleCancel" />
     </div>
-    <div class="equ-info">当前风压:{{ p }}Pa</div>
+    <div class="equ-info">当前风压:
+      <span>{{ p }}Pa</span>
+    </div>
     <div class="setting">
       <div class="setting-item">
         <p>传感器类型</p>
-        <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
+        <!-- <el-select v-model="equipmentSetting.equipmentType" :fit-input-width="true" filterable clearable
           :placeholder="params.equipmentType" disabled>
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
+        </el-select> -->
+        <p>{{ params.equipmentType }}</p>
       </div>
       <div class="setting-item">
         <p>设备选择</p>
-        <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
+        <!-- <el-select v-model="equipmentSetting.chooseEquipment" :fit-input-width="true" filterable clearable
           :placeholder="params.equipmentName" disabled>
           <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
+        </el-select> -->
+        <p>{{ params.equipmentName }}</p>
       </div>
-      <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
+      <!-- <input-num name="阈值" :placeholder="params.equipmentValue" @inputValue="handelInput"
         :disabled="isDisabledInputNum" />
+      <p>{{ params.equipmentValue }}</p> -->
     </div>
     <div class="btn">
-      <button @click="removeEquipment" disabled>删除</button>
+      <!-- <button @click="removeEquipment" disabled>删除</button> -->
-      <button @click="addEquipment" disabled>添加</button>
+      <!-- <button @click="addEquipment" disabled>添加</button> -->
     </div>
   </div>
 </template>
@@ -55,9 +64,9 @@ let p = ref(57);
 //   emit("EquInf");
 // }
 
-console.log(params.equipmentType);
+// console.log(params.equipmentType);
-console.log(params.equipmentName);
+// console.log(params.equipmentName);
-console.log(params.equipmentValue);
+// console.log(params.equipmentValue);
 
 
 
@@ -184,10 +193,14 @@ const equipment = {
       height: 35px;
       font-size: 24px;
       font-family: MicrosoftYaHei;
-      color: #ffffff;
+      color: white;
       line-height: 35px;
     }
 
+    span {
+      color: #f7b500;
+    }
+
     img {
       cursor: pointer;
     }
@@ -202,9 +215,15 @@ const equipment = {
     height: 35px;
     font-size: 26px;
     font-family: MicrosoftYaHei;
-    color: #f7b500;
+    color: white;
     line-height: 35px;
     margin: 20px 30px 0px 30px;
+
+
+  }
+
+  .equ-info span {
+    color: #f7b500;
   }
 
   .setting {
@@ -212,7 +231,7 @@ const equipment = {
       padding: 30px 30px 10px 30px;
 
       p {
-        width: 130px;
+        width: 190px;
         height: 35px;
         font-size: 26px;
         font-family: MicrosoftYaHei;
@@ -220,6 +239,10 @@ const equipment = {
         line-height: 35px;
         margin-bottom: 20px;
       }
+
+      p:nth-child(2) {
+        color: #f7b500
+      }
     }
 
     :deep(.el-select) {

src/components/content/tunnelScene/sceneClass/demo.js

@@ -11,14 +11,16 @@ import addFunction from "./addEvent";
 import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
+import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
 export default class Demo {
-  // 摄像机看向位置
+  // 摄像机看向位置s
   origin = null;
-  //附着点的模型
+  //附着点的模型122
   points = [];
   //设备模型数组
   deviceModels = [];
   constructor(three, mountedElement) {
+    this._StreetSignTag = StreetSignTag
     this._handleLClick = handleLClick;
     this._handleRClick = handleRClick;
     this._handleDBLClick = handleDBLClick;
@@ -36,6 +38,8 @@ export default class Demo {
     this.mountedElement = mountedElement;
     //初始化场景
     this.scene = new this.THREE.Scene();
+    //初始化光影
+    this.ambientLight = new this.THREE.AmbientLight(0xffffff, 2); //设置环境光
     // 初始化摄像机
     this.camera = new this.THREE.PerspectiveCamera(
       75,
@@ -66,6 +70,7 @@ export default class Demo {
     this.render();
     this.canvasResize();
     this.addXYZ();
+    this.addLight();
   }
   //渲染函数作用域(这里主要写渲染帧内操作)
   __renderScope() {
@@ -116,6 +121,9 @@ export default class Demo {
     // const axesHelper = new this.THREE.AxesHelper(100);
     // this.scene.add(axesHelper);
   }
+  addLight() {
+    this.scene.add(this.ambientLight); //将环境光添加到场景中
+  }
 
   // 屏幕自适应
   canvasResize() {
@@ -136,7 +144,7 @@ export default class Demo {
     return new Promise((resolve, reject) => {
       this.gltfloader = new GLTFLoader();
       this.gltfloader.load(
-        "/tunnelModel/chanel-have-wall.gltf",
+        "/tunnelModel/chanel-have-wall优化版.gltf",
         (gltf) => {
           gltf.scene.traverse((child) => {
             this._forModels(child);
@@ -166,6 +174,8 @@ export default class Demo {
     this._ClickModel(this.points);
     //将墙壁进行隐藏
     this.WallInit()
+    //对路牌进行相关操作
+    // this.SignsInf()
   }
 
   // 在此方法中对模型批量操作，这里遍历附着点
@@ -180,6 +190,8 @@ export default class Demo {
       // 遍历一个属性是否存在设备
       child.hasDevice = false; //初始化
     }
+    // child.material.emissive = child.material.color
+    // child.material.emissiveMap = child.material.map
   }
 
   // 添加轨道控制器
@@ -227,7 +239,6 @@ export default class Demo {
           this.preHover.material.color.set("white");
           this.preHover = intersects[0].object;
         }
-
         intersects[0].object.material.color.set("red");
         const tagP = intersects[0].object.getWorldPosition(
           new this.THREE.Vector3()
@@ -402,7 +413,7 @@ export default class Demo {
     this.equMap.get("equ_sensors").scale.set(0.2, 0.2, 0.2);
     this.equMap.get("equ_sensors").traverse((v) => {
       v.material = new this.THREE.MeshBasicMaterial();
-      v.material.color = new this.THREE.Color("white");
+      v.material.color = new this.THREE.Color(0xababab);
     });
     // 初始标签面板
     const tag = new this.THREE.Mesh(
@@ -499,4 +510,24 @@ export default class Demo {
       }
     }
   }
+  SignsInf(tunnelName, tunnelLength) {
+    let Signs = this.scene.getObjectByName('streetSigns');
+    console.log(Signs);
+    const tag = new this.THREE.Mesh(
+      new this.THREE.PlaneGeometry(100, 76),
+      new this.THREE.MeshBasicMaterial({ color: "white" })
+    );
+    Signs.add(tag);
+    tag.name = "tag";
+    tag.rotation.x = Math.PI / 2;
+    tag.rotation.z = Math.PI / 2; //旋转这里改变文字顺序
+    tag.rotation.y = Math.PI;
+    tag.rotation.z -= Math.PI / 2;
+    tag.translateZ(3);
+    tag.translateY(40);
+
+
+    let EquipmentTag = this._StreetSignTag(tunnelName, tunnelLength);
+    Signs.getObjectByName("tag").material = EquipmentTag;
+  }
 }

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

@@ -73,75 +73,75 @@ function handleOtherEqu(targetPoint, equipmentInfo) {
   this.scene.add(equMesh);
   targetPoint.visible = false;
   // targetPoint.hasWall = true;
-  allline.push(targetPoint.name)
+  // allline.push(targetPoint.name)
-  if (hasWall == false) {
+  // if (hasWall == false) {
-    let findWallHang = new Array;
+  //   let findWallHang = new Array;
-    // console.log(targetPoint.name);
+  //   // console.log(targetPoint.name);
-    console.log(allline);
+  //   console.log(allline);
-    Allhang = allline.map(function (str) {
+  //   Allhang = allline.map(function (str) {
-      return parseInt(str.match(/\d+/)[0], 10);
+  //     return parseInt(str.match(/\d+/)[0], 10);
-    })
+  //   })
-    console.log(Allhang);
+  //   console.log(Allhang);
-    //将取出来的所有行数字符串用一个新数组来保存，之后判断是不是存在同一行的（即相同的行数）
+  //   //将取出来的所有行数字符串用一个新数组来保存，之后判断是不是存在同一行的（即相同的行数）
-    for (let i = 0; i < Allhang.length; i++) {
+  //   for (let i = 0; i < Allhang.length; i++) {
-      //判断是不是存在相同的行数，如果存在，则继续判断是不是存在左右的传感器
+  //     //判断是不是存在相同的行数，如果存在，则继续判断是不是存在左右的传感器
-      findWallHang.push(Allhang[i - 1])
+  //     findWallHang.push(Allhang[i - 1])
-      if (findWallHang.includes(Allhang[i])) {
+  //     if (findWallHang.includes(Allhang[i])) {
-        console.log(allline[i - 1].slice(-1));
+  //       console.log(allline[i - 1].slice(-1));
-        console.log(allline[i].slice(-1));
+  //       console.log(allline[i].slice(-1));
-        wallHang = Allhang[i];
+  //       wallHang = Allhang[i];
-        let sameHang = findWallHang.indexOf(Allhang[i])
+  //       let sameHang = findWallHang.indexOf(Allhang[i])
-        if ((allline[sameHang - 1].slice(-1) == 'r' && allline[i].slice(-1) == 'l') || allline[sameHang - 1].slice(-1) == 'l' && allline[i].slice(-1) == 'r') {
+  //       if ((allline[sameHang - 1].slice(-1) == 'r' && allline[i].slice(-1) == 'l') || allline[sameHang - 1].slice(-1) == 'l' && allline[i].slice(-1) == 'r') {
-          console.log('进行添加操作');
+  //         console.log('进行添加操作');
-          // 将这二个符合添加规则的锚点给设一个属性，这样方便之后我们进行删除操作
+  //         // 将这二个符合添加规则的锚点给设一个属性，这样方便之后我们进行删除操作
-          // this.scene.getObjectByName(allline[i - 1]).hasWall = true
+  //         // this.scene.getObjectByName(allline[i - 1]).hasWall = true
-          // this.scene.getObjectByName(allline[i]).hasWall = true
+  //         // this.scene.getObjectByName(allline[i]).hasWall = true
-          console.log(this.scene.getObjectByName(allline[i - 1]));
+  //         console.log(this.scene.getObjectByName(allline[i - 1]));
-          console.log(this.scene.getObjectByName(allline[i]));
+  //         console.log(this.scene.getObjectByName(allline[i]));
-          //出现满足条件的风压阀了，这时候就设定为已经有墙了，不需要再添加了
+  //         //出现满足条件的风压阀了，这时候就设定为已经有墙了，不需要再添加了
-          hasWall = true
+  //         hasWall = true
-          findWallHang = []
+  //         findWallHang = []
-          //进行添加操作，因为数值问题，所以我们分开进行添加操作
+  //         //进行添加操作，因为数值问题，所以我们分开进行添加操作
-          for (let line = Allhang[i]; line <= 20; line++) {
+  //         for (let line = Allhang[i]; line <= 20; line++) {
-            if (line < 10) {
+  //           if (line < 10) {
-              let wall = 'wall_' + '0' + line
+  //             let wall = 'wall_' + '0' + line
-              console.log(wall);
+  //             console.log(wall);
-              //把墙设为可见
+  //             //把墙设为可见
-              this.scene.getObjectByName(wall).visible = true
+  //             this.scene.getObjectByName(wall).visible = true
-              let point = 'point_' + '00' + line + '_tc'
+  //             let point = 'point_' + '00' + line + '_tc'
-              // console.log(this.scene.getObjectByName(point));
+  //             // console.log(this.scene.getObjectByName(point));
-              //把顶部的附着点设为隐藏！！！，然后设为不可选中
+  //             //把顶部的附着点设为隐藏！！！，然后设为不可选中
-              this.scene.getObjectByName(point).visible = false
+  //             this.scene.getObjectByName(point).visible = false
-              this.scene.getObjectByName(point).layers.set(-2)
+  //             this.scene.getObjectByName(point).layers.set(-2)
-              //如果最中间一行有设备，我们则需要将设备进行隐藏！！！
+  //             //如果最中间一行有设备，我们则需要将设备进行隐藏！！！
-              if (this.scene.getObjectByName(point).hasDevice == true) {
+  //             if (this.scene.getObjectByName(point).hasDevice == true) {
-                let EquID = this.scene.getObjectByName(point).info.id
+  //               let EquID = this.scene.getObjectByName(point).info.id
-                this.scene.getObjectById(EquID).visible = false
+  //               this.scene.getObjectById(EquID).visible = false
-              }
+  //             }
-            } else if (line >= 10) {
+  //           } else if (line >= 10) {
-              let wall = 'wall_' + line
+  //             let wall = 'wall_' + line
-              this.scene.getObjectByName(wall).visible = true
+  //             this.scene.getObjectByName(wall).visible = true
-              let point = 'point_' + '0' + line + '_tc'
+  //             let point = 'point_' + '0' + line + '_tc'
-              this.scene.getObjectByName(point).visible = false
+  //             this.scene.getObjectByName(point).visible = false
-              this.scene.getObjectByName(point).layers.set(-2)
+  //             this.scene.getObjectByName(point).layers.set(-2)
-              if (this.scene.getObjectByName(point).hasDevice == true) {
+  //             if (this.scene.getObjectByName(point).hasDevice == true) {
-                let EquID = this.scene.getObjectByName(point).info.id
+  //               let EquID = this.scene.getObjectByName(point).info.id
-                this.scene.getObjectById(EquID).visible = false
+  //               this.scene.getObjectById(EquID).visible = false
-              }
+  //             }
-            }
+  //           }
-            //处理21行的设备和附着点
+  //           //处理21行的设备和附着点
-            let point = 'point_' + '0' + 21 + '_tc'
+  //           let point = 'point_' + '0' + 21 + '_tc'
-            this.scene.getObjectByName(point).visible = false
+  //           this.scene.getObjectByName(point).visible = false
-            this.scene.getObjectByName(point).layers.set(-2)
+  //           this.scene.getObjectByName(point).layers.set(-2)
-            if (this.scene.getObjectByName(point).hasDevice == true) {
+  //           if (this.scene.getObjectByName(point).hasDevice == true) {
-              let EquID = this.scene.getObjectByName(point).info.id
+  //             let EquID = this.scene.getObjectByName(point).info.id
-              this.scene.getObjectById(EquID).visible = false
+  //             this.scene.getObjectById(EquID).visible = false
-            }
+  //           }
-          }
+  //         }
-        }
+  //       }
-      }
+  //     }
-    }
+  //   }
-  }
+  // }
   //处理风压阀的代码片段
   // let lineIndex = targetPoint.name.slice(7, 9);
   // if (allline.includes(Number(lineIndex))) {
@@ -218,47 +218,47 @@ function removeEquipment(targetPoint) {
   //删除我们这里使用行数来判断，即是不是删除到了我们的那一行呢？
   //如果删除到了我们那行的话，我们必须将行的数组从中去掉已存在的数据，然后将附着点列表中也去除这个点，然后将墙设置为false来让下次使用
 
-  let lineIndex = targetPoint.name.slice(7, 9)
+  // let lineIndex = targetPoint.name.slice(7, 9)
-  deleteItem(allline, targetPoint.name)
+  // deleteItem(allline, targetPoint.name)
-  if (Number(lineIndex) == wallHang) {
+  // if (Number(lineIndex) == wallHang) {
-    wallHang = 0;
+  //   wallHang = 0;
-    hasWall = false
+  //   hasWall = false
-    for (let line = Number(lineIndex); line <= 20; line++) {
+  //   for (let line = Number(lineIndex); line <= 20; line++) {
-      if (line < 10) {
+  //     if (line < 10) {
-        let wall = 'wall_' + '0' + line
+  //       let wall = 'wall_' + '0' + line
-        this.scene.getObjectByName(wall).visible = false
+  //       this.scene.getObjectByName(wall).visible = false
-        let point = 'point_' + '00' + line + '_tc'
+  //       let point = 'point_' + '00' + line + '_tc'
-        console.log(this.scene.getObjectByName(point));
+  //       console.log(this.scene.getObjectByName(point));
-        this.scene.getObjectByName(point).visible = true
+  //       this.scene.getObjectByName(point).visible = true
-        this.scene.getObjectByName(point).layers.set(0)
+  //       this.scene.getObjectByName(point).layers.set(0)
-        if (this.scene.getObjectByName(point).hasDevice == true) {
+  //       if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false
+  //         this.scene.getObjectByName(point).visible = false
-          let EquID = this.scene.getObjectByName(point).info.id
+  //         let EquID = this.scene.getObjectByName(point).info.id
-          this.scene.getObjectById(EquID).visible = true
+  //         this.scene.getObjectById(EquID).visible = true
-        }
+  //       }
-      } else if (line >= 10) {
+  //     } else if (line >= 10) {
-        let wall = 'wall_' + line
+  //       let wall = 'wall_' + line
-        this.scene.getObjectByName(wall).visible = false
+  //       this.scene.getObjectByName(wall).visible = false
-        let point = 'point_' + '0' + line + '_tc'
+  //       let point = 'point_' + '0' + line + '_tc'
-        this.scene.getObjectByName(point).visible = true
+  //       this.scene.getObjectByName(point).visible = true
-        this.scene.getObjectByName(point).layers.set(0)
+  //       this.scene.getObjectByName(point).layers.set(0)
-        if (this.scene.getObjectByName(point).hasDevice == true) {
+  //       if (this.scene.getObjectByName(point).hasDevice == true) {
-          this.scene.getObjectByName(point).visible = false
+  //         this.scene.getObjectByName(point).visible = false
-          let EquID = this.scene.getObjectByName(point).info.id
+  //         let EquID = this.scene.getObjectByName(point).info.id
-          this.scene.getObjectById(EquID).visible = true
+  //         this.scene.getObjectById(EquID).visible = true
-        }
+  //       }
-      }
+  //     }
-      //处理21行的设备和附着点
+  //     //处理21行的设备和附着点
-      let point = 'point_' + '0' + 21 + '_tc'
+  //     let point = 'point_' + '0' + 21 + '_tc'
-      this.scene.getObjectByName(point).visible = true
+  //     this.scene.getObjectByName(point).visible = true
-      this.scene.getObjectByName(point).layers.set(0)
+  //     this.scene.getObjectByName(point).layers.set(0)
-      if (this.scene.getObjectByName(point).hasDevice == true) {
+  //     if (this.scene.getObjectByName(point).hasDevice == true) {
-        let EquID = this.scene.getObjectByName(point).info.id
+  //       let EquID = this.scene.getObjectByName(point).info.id
-        this.scene.getObjectById(EquID).visible = true
+  //       this.scene.getObjectById(EquID).visible = true
-      }
+  //     }
-    }
+  //   }
-  }
+  // }
-  deleteItem(Allhang, Number(lineIndex))
+  // deleteItem(Allhang, Number(lineIndex))
 
 
 

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

@@ -21,12 +21,12 @@ export function handleLClick(targetPoint) {
     this.tag3CSS2DObj.translateX(3);
     this.tag3CSS2DObj.translateZ(10);
     this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this, 4.31, -2.55, -11);
+    intoAnimation.call(this, 1.31, -2.55, -11);
   } else if (/tl$/.test(targetPoint.name)) {
     this.tag3CSS2DObj.translateX(-3);
     this.tag3CSS2DObj.translateZ(10);
     this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this, -4.31, -2.55, -11);
+    intoAnimation.call(this, -1.31, -2.55, -11);
   } else if (/tc$/.test(targetPoint.name)) {
     this.tag3CSS2DObj.translateX(0);
     this.tag3CSS2DObj.translateZ(10);
@@ -49,6 +49,7 @@ export function handleLClick(targetPoint) {
 }
 
 function intoAnimation(x = -10, y = 3, z = -12) {
+  //获取当前附着点的世界坐标
   const worldP = this.targetPoint.getWorldPosition(new this.THREE.Vector3());
   const positionOBj = this.camera.position;
   const start = this.orbitControls.target;

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

@@ -10,7 +10,7 @@ export default function previewtunnelModeInit(equipmentList) {
     //         this.scene.getObjectByName(wall).visible = false
     //     }
     // }
-    console.log(equipmentList);
+    // console.log(equipmentList);
 
     equipmentList.forEach((item) => {
         this.addEquipment(this.scene.getObjectByName(item.position), item);
@@ -26,4 +26,4 @@ export default function previewtunnelModeInit(equipmentList) {
             }
         })
     }
-}
+}

src/components/content/tunnelScene/sceneClass/utils/StreetSignTag/StreetSignTag.js

@@ -0,0 +1,26 @@
+import * as THREE from "three";/**
+* 返回一个带有文字的的#3D材质
+* 把输入的文字转化为base64的img图片
+* @param {String} text
+* @param {String} param 传感器实时检测参数
+*/
+export function StreetSignTag(text = "", param = "", width = 250, height = 150) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    ctx.fillStyle = "#003BA8";
+    ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = "white";
+    ctx.font = "20px serif";
+    ctx.fillText('   ' + text, (100 - text.length * 1) / 50, 40);
+    ctx.fillText('   隧道长度:' + param + 'm', (100 - param.length * 1) / 50, 115);
+    ctx.strokeStyle = "white";
+    ctx.moveTo(0, 75);
+    ctx.lineTo(30000, 120);
+    ctx.stroke();
+    const base64 = canvas.toDataURL();
+    return new THREE.MeshBasicMaterial({
+        map: new THREE.TextureLoader().load(base64),
+    });
+}

src/components/content/usedEle/UsedEle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
+  <div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
     <div class="content">
       <div class="item">
         <div class="container" ref="length">
@@ -19,6 +19,8 @@
           <span>当月节省量：{{ monthlySavings }}kwh</span>
         </div>
       </div>
+      <div class="ele-left-bottom-icon"></div>
+      <div class="ele-right-bottom-icon"></div>
     </div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
@@ -39,7 +41,7 @@
           </div>
         </div>
         <div class="loading-block" v-if="showLoading">
-          <div class="loading" ></div>
+          <div class="loading"></div>
           <span>加载中...</span>
         </div>
         <div class="chat-dialog" v-else>
@@ -56,6 +58,7 @@
 <script setup>
 import * as echarts from 'echarts';
 import {dateFormat} from "@/utils/date.js";
+
 const props = defineProps({
   list: Array,
   eleData: Array
@@ -64,20 +67,20 @@ let myEcharts = reactive({});
 const isVisited = ref(false);
 const showLoading = ref(false)
 const electricityConsumptionMonthly = ref(0)
-const monthlySavings = ref(4000)
+const monthlySavings = ref(40000)
 const length = ref(null);
 const valueA = ref();
-const month = ref(dateFormat('',true));
+const month = ref(dateFormat('', true));
 const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
     isVisited.value
-        ? "bpq_active.png"
+        ? "#2E5589"
-        : "bg.png"
+        : "rgba(6,34,71,0.78)"
 );
 watch(() => props.eleData, (now) => {
-  if(now.frequencyChangerList.length===0){
+  if (now.frequencyChangerList.length === 0) {
-    electricityConsumptionMonthly.value=0
+    electricityConsumptionMonthly.value = 0
-  }else {
+  } else {
     getBasicData(now.frequencyChangerList)
   }
   setValueA()
@@ -102,18 +105,18 @@ const setValueA = () => {
   if (electricityConsumptionMonthly.value === 0 || length.value === null) {
     valueA.value.style.height = `0px`;
   }
-  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
+  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 100000;
   valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
   if (monthlySavings.value === 0 || length.value === null) {
     valueB.value.style.height = `0px`;
   }
-  let width = (monthlySavings.value * length.value.offsetHeight) / 10000;
+  let width = (monthlySavings.value * length.value.offsetHeight) / 100000;
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
-    electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
+  electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
 }
 const handleOpenChart = () => {
   console.log('用电量弹窗')
@@ -238,12 +241,31 @@ const getImageUrl = (name) => {
   width: 830px;
   //height: 373px;
   color: aliceblue;
-  //position: absolute;
+  border: 2px solid #0f82af;
-  //top: 1220px;
+  background: rgba(6, 34, 71, 0.78);
-  //top: 1680px;
+  border-radius: 20px;
-  //left: 68px;
-  background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
+  position: relative;
+
+  .ele-left-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(-90deg);
+  }
+
+  .ele-right-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(180deg);
+  }
 
   .title {
     width: 96px;
@@ -274,7 +296,7 @@ const getImageUrl = (name) => {
         width: 60px;
         height: 210px;
         border-radius: 31px;
-        border: 1px solid #0f82af;
+        border: 1px solid rgba(105, 231, 253, 1);
         position: relative;
         margin-bottom: 20px;
 
@@ -283,7 +305,7 @@ const getImageUrl = (name) => {
           bottom: 0;
           width: 60px;
           height: inherit;
-          background: #60ddde;
+          background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
           border-radius: 31px;
           transition: width 0.5s linear 0s;
         }

src/components/content/windPressure/WindPressureList.vue

@@ -218,7 +218,7 @@ const initChart = (type, values) => {
   width: 830px;
   //height: 779px;
   //position: absolute;
-  min-height: 350px;
+  //min-height: 350px;
   //top: 185px;
   //right: 68px;
   background-image: url(../../../assets/images/windPressure/bg.png);

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -76,13 +76,13 @@ let isWaring = computed(() => {
     border-radius: 6px;
   }
 
-  &:last-child {
+  //&:last-child {
-    .label {
+  //  .label {
-      span {
+  //    span {
-        margin: 0 5px 0 14px;
+  //      margin: 0 5px 0 14px;
-      }
+  //    }
-    }
+  //  }
-  }
+  //}
 
   .label {
     display: flex;

src/router/index.js

@@ -94,7 +94,6 @@ const router = createRouter({
 });
 router.beforeEach((to, form, next) => {
   NProgress.start()
-  console.log('token-----',getToken())
   if (!getToken()) {
     if (to.path === '/login') {
       next()
@@ -103,7 +102,6 @@ router.beforeEach((to, form, next) => {
       next({ path: '/login' })
     }
   } else {
-    console.log('有token')
     // if (to.path === '/login') {
     //   next('/')
     //   NProgress.done()

src/views/debug/index.vue

@@ -74,7 +74,7 @@ const handleSend = () => {
   dataList.value.push(data)
 }
 const initWebSocket = () => {
-  // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://192.168.31.175:9000/websocket/debug/${token}/${serialNumber.value}`
   let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/debug/${token}/${serialNumber.value}`
   console.log(wsUrl)
   socket = new WebSocket(wsUrl)

src/views/device-manage/index.vue

@@ -36,13 +36,11 @@
             <span>风机设备管理</span>
             <div class="collection-frequency">
               <span>采集频率</span>
-              <span class="units">
+              <el-input type="number" v-model="fanFrequency" @change="changeFan">
-              <input
+                <template #suffix>
-                  type="number"
+                  <span>秒/次</span>
-                  min="0"
+                </template>
-                  v-model="fanFrequency"
+              </el-input>
-              />
-              </span>
             </div>
           </div>
           <div class="device-table">
@@ -54,19 +52,19 @@
               <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
               <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"></el-input>
+                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue" @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
               <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"></el-input>
+                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"  @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
               <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"></el-input>
+                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"  @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -74,13 +72,13 @@
                   <div class="switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click="scope.row.state = 1"
+                        @click="scope.row.state = 1;changeFanData(scope.row)"
                     >
                       启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state = 0"
+                        @click=" scope.row.state = 0;changeFanData(scope.row)"
                     >
                       停用
                     </div>
@@ -93,7 +91,7 @@
             <div class="cancel-btn" @click="router.back(-1)">
               取消
             </div>
-            <div class="sure-btn" @click="handleEditFan">
+            <div class="sure-btn" @click="editEquip">
               确定
             </div>
           </div>
@@ -103,13 +101,11 @@
             <span>风压设备管理</span>
             <div class="collection-frequency">
               <span>采集频率</span>
-              <span class="units">
+              <el-input type="number" v-model="windFrequency" @change="changeWind">
-              <input
+                <template #suffix>
-                  type="number"
+                  <span>秒/次</span>
-                  min="0"
+                </template>
-                  v-model="windFrequency"
+              </el-input>
-              />
-              </span>
             </div>
           </div>
           <div class="device-table">
@@ -121,12 +117,12 @@
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="unit" label="单位" align="center">
                 <template #default="scope">
-                  <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
+                  <el-input placeholder="单位" v-model="scope.row.unit"  @change="changeWindData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue" @change="changeWindData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -134,13 +130,13 @@
                   <div class="switch wind-switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click=" scope.row.state = 1;"
+                        @click=" scope.row.state = 1;changeWindData(scope.row)"
                     >
                       启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state =  0;"
+                        @click=" scope.row.state =  0;changeWindData(scope.row)"
                     >
                       停用
                     </div>
@@ -153,7 +149,7 @@
             <div class="cancel-btn" @click="router.back(-1)">
               取消
             </div>
-            <div class="sure-btn" @click="handleEditWind">
+            <div class="sure-btn" @click="editEquip">
               确定
             </div>
           </div>
@@ -163,13 +159,11 @@
             <span>其他传感器设备管理</span>
             <div class="collection-frequency">
               <span>采集频率</span>
-              <span class="units">
+              <el-input type="number" v-model="otherFrequency"  @change="changeOther">
-              <input
+                <template #suffix>
-                  type="number"
+                  <span>秒/次</span>
-                  min="0"
+                </template>
-                  v-model="otherFrequency"
+              </el-input>
-              />
-              </span>
             </div>
           </div>
           <div class="device-table">
@@ -181,12 +175,12 @@
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="unit" label="单位" align="center">
                 <template #default="scope">
-                  <el-input placeholder="单位" v-model="scope.row.unit"></el-input>
+                  <el-input placeholder="单位" v-model="scope.row.unit" @change="changeOtherData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue" @change="changeOtherData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -194,13 +188,13 @@
                   <div class="switch wind-switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click=" scope.row.state = 1;"
+                        @click=" scope.row.state = 1;changeOtherData(scope.row)"
                     >
                       启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state =  0;"
+                        @click=" scope.row.state =  0;changeOtherData(scope.row)"
                     >
                       停用
                     </div>
@@ -213,7 +207,7 @@
             <div class="cancel-btn" @click="router.back(-1)">
               取消
             </div>
-            <div class="sure-btn" @click="handleEditOther">
+            <div class="sure-btn" @click="editEquip">
               确定
             </div>
           </div>
@@ -223,25 +217,23 @@
             <span>分流器设备管理</span>
             <div class="collection-frequency">
               <span>采集频率</span>
-              <span class="units">
+              <el-input type="number" v-model="fenFrequency">
-              <input
+                <template #suffix>
-                  type="number"
+                  <span>秒/次</span>
-                  min="0"
+                </template>
-                  v-model="fenFrequency"
+              </el-input>
-              />
-              </span>
             </div>
           </div>
           <div class="device-table">
             <el-table stripe
                       style="border-bottom: 1px #06e5e5 solid;background-color: #011c29;--el-table-border-color: none;"
                       :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
-                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenliuData">
+                      :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fenLiuData">
               <el-table-column prop="name" label="设备名称" align="center"/>
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="thresholdValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"  @change="changeFenData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -249,13 +241,13 @@
                   <div class="switch">
                     <div
                         :class="{ active: scope.row.state }"
-                        @click=" scope.row.state = true"
+                        @click=" scope.row.state = 1;changeFenData(scope.row)"
                     >
                       启用
                     </div>
                     <div
                         :class="{ active: ! scope.row.state }"
-                        @click=" scope.row.state = false"
+                        @click=" scope.row.state = 0;changeFenData(scope.row)"
                     >
                       停用
                     </div>
@@ -279,10 +271,8 @@
 </template>
 
 <script setup>
-import {getEquipmentList, editFan} from "@/api/tunnelManage";
 import {ElMessage} from "element-plus";
-import {editEquipment, getTunnelDetail} from "@/api/tunnelManage";
+import {getEquipmentList, editEquipment, getTunnelDetail} from "@/api/tunnelManage";
-import {editAcquisitions} from "../../api/tunnelManage";
 
 const router = useRouter()
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
@@ -292,237 +282,69 @@ const fanFrequency = ref(0)
 const windFrequency = ref(0)
 const otherFrequency = ref(0)
 const changeIndex = ref(1)
-const fanData = ref([
+const fanData = ref([])
-  // {
+const editFanData = ref([])
-  //   name: '一号风机',
+const winData = ref([])
-  //   currentA: '2342',
+const editWinData = ref([])
-  //   currentB: '2342',
+const otherData = ref([])
-  //   currentC: '2342',
+const editOtherData = ref([])
-  //   state: false,
+const fenLiuData = ref([])
-  // },
+const editFenLiuData = ref([])
-  // {
+const frequencyData = ref([])
-  //   name: '二号风机',
-  //   currentA: '2342',
-  //   currentB: '2342',
-  //   currentC: '2342',
-  //   state: true,
-  // },
-  // {
-  //   name: '三号风机',
-  //   currentA: '2342',
-  //   currentB: '2342',
-  //   currentC: '2342',
-  //   state: false,
-  // }
-])
-const winData = ref([
-  // {
-  //   name: '1号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '2号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '3号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '4号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '5号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '6号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '7号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '8号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '9号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-  // {
-  //   name: '10号风压',
-  //   offset: '2342',
-  //   unit: 'Pa',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // },
-])
-const otherData = ref([
-  // {
-  //   name: '风速',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '氧      气',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '温      度',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '湿      度',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '粉 尘',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '二氧化碳',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '一氧化碳',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '二氧化氮',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '一氧化氮',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '二氧化硫',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '硫 化 氢',
-  //   offset: '2342',
-  //   unit: 'm/s',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }
-])
-const fenliuData = ref([
-  // {
-  //   name: '1号分流器',
-  //   offset: '2342',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '2号分流器',
-  //   offset: '2342',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }, {
-  //   name: '3号分流器',
-  //   offset: '2342',
-  //   thresholdValue: '2342',
-  //   state: false,
-  // }
-])
 const siteId = ref(0)
 const tunnelName = ref('')
-const changeFrequency = (acquisition, typeKey) => {
+const changeFan=(e)=>{
-  const data = {
+  const fanObj={
-    acquisitionPeriod: acquisition,
+    acquisitionPeriod: e*1000,
     tunnelId: tunnelId,
-    typeKey: typeKey
+    typeKey: 'frequency'
   }
-  editAcquisitions([data]).then(res => {
+  frequencyData.value.push(fanObj)
+}
+const changeFanData=(row)=>{
+  editFanData.value.push(row)
+}
+const changeWind=(e)=>{
+  const windObj={
+    acquisitionPeriod: e*1000,
+    tunnelId: tunnelId,
+    typeKey: 'windPressure'
+  }
+  frequencyData.value.push(windObj)
+}
+const changeWindData=(row)=>{
+  editWinData.value.push(row)
+}
+const changeOther=(e)=>{
+  const otherObj={
+    acquisitionPeriod: e*1000,
+    tunnelId: tunnelId,
+    typeKey: 'sensor'
+  }
+  frequencyData.value.push(otherObj)
+}
+const changeOtherData=(row)=>{
+  editOtherData.value.push(row)
+}
+const editEquip = () => {
+  const basicData={
+    tunnelId:tunnelId,
+    acquisitionList:frequencyData.value,
+    frequencyChangerList: editFanData.value,
+    windPressureSensorList: editWinData.value,
+    sensorList: editOtherData.value,
+    // shuntList: editFenLiuData.value,
+  }
+  editEquipment(basicData).then(res => {
     if (res.code === 1000) {
+      ElMessage.success('修改成功')
+      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
+    } else {
+      ElMessage.error(res.msg)
+    }
+  })
+}
 
-    } else {
-      ElMessage.error(res.msg)
-    }
-  })
-}
-const handleEditFan = () => {
-  editFan(fanData.value).then(res => {
-    if (res.code === 1000) {
-      ElMessage.success('修改成功')
-      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
-    } else {
-      ElMessage.error(res.msg)
-    }
-  })
-  changeFrequency(fanFrequency.value, 'frequency')
-}
-const handleEditWind = () => {
-  editEquipment(winData.value).then(res => {
-    if (res.code === 1000) {
-      ElMessage.success('修改成功')
-      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
-    } else {
-      ElMessage.error(res.msg)
-    }
-  })
-  changeFrequency(windFrequency.value, 'windPressure')
-}
-const handleEditOther = () => {
-  editEquipment(otherData.value).then(res => {
-    if (res.code === 1000) {
-      ElMessage.success('修改成功')
-      router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
-    } else {
-      ElMessage.error(res.msg)
-    }
-  })
-  changeFrequency(otherFrequency.value, 'sensor')
-}
 const handleChangeMenu = (e) => {
   changeIndex.value = e
 }
@@ -540,11 +362,12 @@ const getList = () => {
       })
       otherData.value = res.data.sensorList
       res.data.acquisitionList.map(item => {
-        if(item.typeKey === 'frequency'){
+        item.acquisitionPeriod = item.acquisitionPeriod / 1000
+        if (item.typeKey === 'frequency') {
           fanFrequency.value = item.acquisitionPeriod
-        }else if(item.typeKey === 'windPressure'){
+        } else if (item.typeKey === 'windPressure') {
           windFrequency.value = item.acquisitionPeriod
-        }else if(item.typeKey ==='sensor'){
+        } else if (item.typeKey === 'sensor') {
           otherFrequency.value = item.acquisitionPeriod
         }
       })
@@ -556,14 +379,10 @@ const getTunnel = () => {
     if (res?.code === 1000) {
       siteId.value = res.data.siteId
       tunnelName.value = res.data.tunnelName
-      console.log('设备详情', res.data)
     }
   });
 }
 getTunnel()
-const handleGoTunnelMgr = () => {
-  router.push('/tunnel/' + siteId.value + '/' + type + '/' + userId)
-}
 getList()
 </script>
 
@@ -613,12 +432,12 @@ getList()
   .device-content {
     display: flex;
     justify-content: center;
-    padding-top: 220px;
+    padding-top: 190px;
 
     .device-box {
       display: flex;
       width: 2194px;
-      height: 1500px;
+      height: 1600px;
       background: #064B66;
       border-radius: 20px;
       border: 2px solid #05FEFF;
@@ -627,7 +446,7 @@ getList()
       .box-left {
         padding-left: 24px;
         width: 300px;
-        height: 1498px;
+        height: 1596px;
         background: #0D5A7A;
         border-radius: 20px 0px 0px 20px;
 
@@ -683,36 +502,39 @@ getList()
           }
 
           .collection-frequency {
+            height: 60px;
+            display: flex;
+            align-items: center;
             position: absolute;
             right: 102px;
 
             > span:first-child {
               font-size: 38px !important;
+              white-space: pre;
+              margin-right: 15px;
             }
 
-            .units {
+            :deep(.el-input__wrapper) {
-              position: relative;
+              width: 166px;
+              height: 56px;
+              background-color: transparent;
+              box-shadow: none;
+              border-radius: 6px;
+              border: 1px solid #05FEFF;
+              transform: none;
+              transition: none;
 
-              input {
+              .el-input__inner {
-                width: 220px;
+                height: 54px;
-                height: 50px;
+                font-size: 30px;
-                border: 1px solid #05FEFF;
-                background: transparent;
-                margin-left: 14px;
-                font-size: 35px;
                 color: #FFFFFF;
-                outline: none;
               }
-            }
 
-            .units::after {
+              .el-input__suffix-inner {
-              content: "秒/次";
+                font-size: 30px;
-              position: absolute;
+                color: #08B7B8;
-              right: 6px;
+                line-height: 40px;
-              top: 26%;
+              }
-              transform: translateY(-50%);
-              font-size: 35px;
-              color: #08B7B8;
             }
           }
         }

src/views/edit/edit.vue

@@ -14,13 +14,16 @@
     <div class="edit-box">
       <el-form :model="form" :label-position="right" label-width="188px">
         <el-form-item label="隧道名称">
-          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称" />
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
+        </el-form-item>
+        <el-form-item label="隧道简称">
+          <el-input v-model="form.tunnelAlias" placeholder="请输入隧道简称"/>
         </el-form-item>
         <el-form-item label="序列号">
-          <el-input v-model="form.serialNumber" placeholder="请输入序列号" />
+          <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
         <el-form-item label="隧道长度">
-          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度" />
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
         </el-form-item>
         <el-form-item label="是否默认">
           <el-radio-group v-model="form.isDefault">
@@ -29,22 +32,22 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="隧道备注">
-          <el-input v-model="form.remarks" placeholder="请输入隧道备注" />
+          <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
         </el-form-item>
       </el-form>
     </div>
 
     <!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
     <tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" :form="form" ref="tunnelScene"
-      :tunnelLength="tunnelLength" />
+                  :tunnelLength="tunnelLength"/>
   </div>
 </template>
 <script setup>
 import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
-import { editTunnel, getTunnelDetail } from "@/api/tunnelManage";
+import {editTunnel, getTunnelDetail} from "@/api/tunnelManage";
-import { computed, provide } from "vue";
+import {computed, provide, toRaw} from "vue";
-import { useModelSceneStore } from "@/store/modelSceneStore";
+import {useModelSceneStore} from "@/store/modelSceneStore";
-import { ElMessage } from "element-plus";
+import {ElMessage} from "element-plus";
 import {initSceneData} from "../../api/tunnelScene";
 
 const router = useRouter();
@@ -52,6 +55,8 @@ const tunnelId = reactive(router.currentRoute.value.params.tunnelId);
 const userId = reactive(router.currentRoute.value.params.userId);
 const type = reactive(router.currentRoute.value.params.type);
 const modelStore = useModelSceneStore();
+const constructionLength = ref(0)
+const modelEquipmentList = ref(null)
 const form = ref({
   tunnelName: "",
   serialNumber: "",
@@ -59,49 +64,61 @@ const form = ref({
   isDefault: false,
   remarks: "",
 });
-const getTunnel = () => {
+const getTunnel = (type) => {
   getTunnelDetail(tunnelId).then((res) => {
     if (res?.code === 1000) {
       form.value = res.data;
-      console.log('form.value ',form.value )
+      if (type == 1) {
+        constructionLength.value = res.data.constructionLength
+      }
     }
   });
 };
 getTunnel();
 const tunnelLength = computed(() => form.value.totalLength);
 const handleGotoDevice = () => {
-  if (type === 's') {
+  if (type === 'bySite') {
-    router.push('/device/' + tunnelId + '/s/' + userId)
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
-  } else if (type === 'i') {
+  } else if (type === 'byHome') {
-    router.push('/device/' + tunnelId + '/i/' + userId)
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
   }
 };
 const handleGoTunnelMgr = () => {
   router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
 };
-const handleSave = async () => {
+const getTunnelInfo = () => {
-  if(form.value.constructionLength==null){
+  initSceneData(tunnelId).then((res) => {
-    form.value.constructionLength=0
+    constructionLength.value = res.data.constructionLength
-  }
+    modelEquipmentList.value = JSON.parse(res.data.tunnelThreeConfig)
-  const data = {
+    if(constructionLength.value===null){
-    tunnelId: tunnelId,
+      constructionLength.value=0
-    tunnelName: form.value.tunnelName,
-    serialNumber: form.value.serialNumber,
-    remarks: form.value.remarks,
-    constructionLength: form.value.constructionLength,
-    // constructionLength: 500,
-    tunnelLength: form.value.totalLength,
-    isDefault: form.value.isDefault,
-    modelEquipmentList: await modelStore.initModelDataPreview(tunnelId),
-  };
-  editTunnel(data).then((res) => {
-    if (res?.code === 1000) {
-      ElMessage.success(res.msg);
-      router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
-    } else {
-      ElMessage.error(res.msg);
     }
-  });
+    if(modelEquipmentList.value===null){
+      modelEquipmentList.value=[]
+    }
+    const data = {
+      tunnelId: tunnelId,
+      tunnelName: form.value.tunnelName,
+      tunnelAlias: form.value.tunnelAlias,
+      serialNumber: form.value.serialNumber,
+      remarks: form.value.remarks,
+      constructionLength: constructionLength.value,
+      tunnelLength: form.value.totalLength,
+      isDefault: form.value.isDefault,
+      modelEquipmentList: modelEquipmentList.value,
+    };
+     editTunnel(data).then((res) => {
+       if (res?.code === 1000) {
+         ElMessage.success(res.msg);
+         router.push("/tunnel/" + form.value.siteId + "/" + type + "/" + userId);
+       } else {
+         ElMessage.error(res.msg);
+       }
+     });
+  })
+}
+const handleSave =  () => {
+  getTunnelInfo()
 };
 </script>
 <style lang="scss" scoped>

src/views/login/index.vue

@@ -115,7 +115,7 @@ onBeforeUnmount(() => {
 
 .login-box {
   height: 100%;
-  background-color: #4158d0;
+  background-color: #063247;
   //background-image: linear-gradient(
   //        43deg,
   //        #4158d0 0%,

src/views/site/index.vue

@@ -177,8 +177,9 @@ const handleClickSite = (type) => {
     })
   }
 }
+
 const goToAddTunnel = (siteId) => {
-  router.push('/tunnel/' + siteId+'/s'+'/'+userId)
+  router.push('/tunnel/' + siteId+'/bySite'+'/'+userId)
 }
 
 //重置from表单

src/views/tunnel-manage/index.vue

@@ -45,8 +45,8 @@
           </div>
           <div class="tunnel-right">
             <div>
-              <div class="fan-icon"></div>
+<!--              <div class="fan-icon"></div>-->
-              <span>风机异常</span>
+<!--              <span>风机异常</span>-->
             </div>
             <div class="icons-block">
               <div v-for="equItem in iconsList" :key="item.icon" class="icon-text">
@@ -70,6 +70,9 @@
         <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="serialNumber">
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
@@ -123,6 +126,7 @@ const validateNumber = (rule, value) => {
 }
 const formRules = ref({
   tunnelName: [{required: true, message: '请输入隧道名称', trigger: ['blur', 'change']}],
+  tunnelAlias: [{required: true, message: '请输入隧道简称', trigger: ['blur', 'change']}],
   serialNumber: [
     {required: true, message: '请输入序列号', trigger: ['blur', 'change']},
     {validator: validateNumber, message: '请输入英文、数字、英文数字组合的用户名', trigger: ['blur', 'change']}
@@ -190,6 +194,7 @@ const tunnelNameList = ref([])
 const siteName = ref(localStorage.getItem('site'))
 const form = ref({
   tunnelName: '',
+  tunnelAlias: '',
   serialNumber: '',
   totalLength: '',
   remarks: '',
@@ -205,9 +210,9 @@ onMounted(() => {
   showOperation.value = localStorage.getItem('roleKey') !== 'tunnel_admin';
 })
 const handleGoSiteOrIndex = () => {
-  if (type === 's') {
+  if (type === 'bySite') {
     router.push('/site/' + userId)
-  } else if (type === 'i') {
+  } else if (type === 'byHome') {
     router.push('/')
   }
 }
@@ -267,10 +272,10 @@ const handlePreview = (id) => {
 }
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
-  if (type === 's') {
+  if (type === 'bySite') {
-    router.push('/edit/' + tunnelId + '/s/' + userId)
+    router.push('/edit/' + tunnelId + '/bySite/' + userId)
-  } else if (type === 'i') {
+  } else if (type === 'byHome') {
-    router.push('/edit/' + tunnelId + '/i/' + userId)
+    router.push('/edit/' + tunnelId + '/byHome/' + userId)
   }
 }
 const handleChooseAll = () => {
@@ -288,15 +293,16 @@ const handleChooseAll = () => {
   })
 }
 const handleEditDevice = (tunnelId) => {
-  if (type === 's') {
+  if (type === 'bySite') {
-    router.push('/device/' + tunnelId + '/s/' + userId)
+    router.push('/device/' + tunnelId + '/bySite/' + userId)
-  } else if (type === 'i') {
+  } else if (type === 'byHome') {
-    router.push('/device/' + tunnelId + '/i/' + userId)
+    router.push('/device/' + tunnelId + '/byHome/' + userId)
   }
 }
 const restFrom = () => {
   form.value = {
     tunnelName: '',
+    tunnelAlias: '',
     serialNumber: '',
     totalLength: '',
     remarks: '',
@@ -650,7 +656,7 @@ const handleMoreDelete = () => {
           }
 
           .icons-block {
-            margin-top: 30px;
+            margin-top: 50px;
             display: flex;
             flex-wrap: wrap;
 

src/views/tunnel/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
       <div class="tunnel-title"></div>
       <!--      <manage-length class="tunnel-length"></manage-length>-->
       <div class="top-length">
-        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
         <span>当前施工长度: {{ constructionLength }}米</span>
       </div>
       <div class="top-right">
@@ -16,15 +16,15 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                    item.label
+                  item.label
-                  }}
+                }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
         </div>
         <div class="current-user">
-          上午好：<span>{{ currentUser }}</span>
+          你好！<span>{{ currentUser }}</span>
           <span>今天是：{{ currentDate }}</span>
           <div class="logout" @click="handleLogout"></div>
         </div>
@@ -33,30 +33,34 @@
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
 
-    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
+    <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
+      :tunnelName="tunnelName"></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">
+        :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-                  :transducer-data="largeScreenData" :loading="showFanLoading"/>
+          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-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">
+        :close-on-click-modal="false" :close-on-press-escape="false">
-        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" :loading="showWindLoading"/>
+        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
+          :loading="showWindLoading" />
         <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" :loading="showBadLoading"/>
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
+          :loading="showBadLoading" />
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
-      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex" @change="changeTunnel" >
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
+        @change="changeTunnel">
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -76,13 +80,14 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 import AirInfo from "@/components/content/airInfo/AirInfo.vue";
 import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
-import {dateFormat} from "@/utils/date.js";
+import { dateFormat } from "@/utils/date.js";
-import {getToken} from "@/utils/auth";
+import { getToken } from "@/utils/auth";
-import {useAuthStore} from "@/store/userstore.js";
+import { useAuthStore } from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
+import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import {ElMessage, ElMessageBox} from "element-plus";
+import { ElMessage, ElMessageBox } from "element-plus";
-import {getUserInfo} from "@/api/login";
+import { getUserInfo } from "@/api/login";
-import {initSceneData} from "@/api/tunnelScene";
+import { initSceneData } from "@/api/tunnelScene";
+import { reactive } from "vue";
 const authStore = useAuthStore();
 const router = useRouter();
 const previewId = reactive(router.currentRoute.value.params.tunnelId)
@@ -107,14 +112,8 @@ const tunnelId = ref(0);
 const tunnelLength = ref(0);
 const constructionLength = ref(0);
 const routeList = ref([]);
-// const form = ref({
-//   tunnelName: "",
-//   serialNumber: "",
-//   totalLength: "",
-//   isDefault: false,
-//   remarks: "",
-// });
 let socket = reactive("");
+let tunnelName = reactive("")
 
 const btnList = ref([
   {
@@ -142,7 +141,7 @@ const btnList = ref([
   //   name: '模拟仿真'
   // },
 ])
-const serialNumber = ref("SC00DY00GH00ELBT");
+const serialNumber = ref("");
 let token = getToken();
 let send = {
   type: "ping",
@@ -153,10 +152,11 @@ const socketData = reactive({
   windPressure: [],
   sensor: [],
 });
-onMounted(() => {
+let tunnelLen = computed(() => tunnelLength);
-  if(previewId){
-    getScreenInfo(previewId)
 
+onMounted(() => {
+  if (previewId) {
+    getScreenInfo(previewId)
   }
   getUser()
   getOtherInfo()
@@ -164,6 +164,7 @@ onMounted(() => {
     showFan.value = true;
   });
 });
+
 const getUser = () => {
   getUserInfo().then(res => {
     currentUser.value = res.data.user.userName
@@ -191,13 +192,13 @@ const getOtherInfo = () => {
       currentSite.value = res.data.siteOption[0].label
       localStorage.setItem('site', currentSite.value)
       tunnelList.value = res.data.tunnelOption
-      if(previewId){
+      if (previewId) {
         tunnelList.value.forEach((item, index) => {
-          if(item.value == previewId){
+          if (item.value == previewId) {
             initialIndex.value = index
           }
         })
-      }else{
+      } else {
         getTunnel(res.data.siteOption[0].value)
       }
     }
@@ -208,33 +209,33 @@ const getScreenInfo = (id) => {
     tunnelId.value = id
     getLargeScreen(id).then((res) => {
       if (res?.code === 1000) {
-        if(res.data.frequencyChangerList.length!==0){
+        if (res.data.frequencyChangerList.length !== 0) {
-          showFanLoading.value=0
+          showFanLoading.value = 0
-        }else {
+        } else {
-          showFanLoading.value=1
+          showFanLoading.value = 1
         }
-        if(res.data.windPressureSensorList.length!==0){
+        if (res.data.windPressureSensorList.length !== 0) {
-          showWindLoading.value=0
+          showWindLoading.value = 0
-        }else {
+        } else {
-          showWindLoading.value=1
+          showWindLoading.value = 1
         }
-        if(res.data.sensorList.length!==0){
+        if (res.data.sensorList.length !== 0) {
-          res.data.sensorList.forEach((item,index)=>{
+          res.data.sensorList.forEach((item, index) => {
             if (
-                item.equipmentType === "carbonDioxide" ||
+              item.equipmentType === "carbonDioxide" ||
-                item.equipmentType === "carbonMonoxide" ||
+              item.equipmentType === "carbonMonoxide" ||
-                item.equipmentType === "hydrogenSulfide" ||
+              item.equipmentType === "hydrogenSulfide" ||
-                item.equipmentType === "sulfurDioxide" ||
+              item.equipmentType === "sulfurDioxide" ||
-                item.equipmentType === "sulfurMonoxide" ||
+              item.equipmentType === "sulfurMonoxide" ||
-                item.equipmentType === "nitrogenDioxide"
+              item.equipmentType === "nitrogenDioxide"
             ) {
-              showBadLoading.value=0
+              showBadLoading.value = 0
-            }else {
+            } else {
-              showBadLoading.value=1
+              showBadLoading.value = 1
             }
           })
-        }else {
+        } else {
-          showBadLoading.value=1
+          showBadLoading.value = 1
         }
         largeScreenData.value = res.data;
       } else {
@@ -244,6 +245,8 @@ const getScreenInfo = (id) => {
     initSceneData(id).then((res) => {
       tunnelLength.value = res.data.tunnelLength
       constructionLength.value = res.data.constructionLength
+      serialNumber.value = res.data.serialNumber
+      initWebSocket();
     })
   }
 };
@@ -252,6 +255,8 @@ const getTunnel = (id) => {
   getTunnelBySiteId(id).then((res) => {
     if (res?.code === 1000) {
       getScreenInfo(res.data[0]?.value)
+      tunnelName = res.data[0].label
+      console.log(res.data[0].label);
     }
   });
 }
@@ -262,9 +267,9 @@ const changeTunnel = (e) => {
       newObj = item
     }
   })
-  showBadLoading.value=0
+  showBadLoading.value = 0
-  showWindLoading.value=0
+  showWindLoading.value = 0
-  showFanLoading.value=0
+  showFanLoading.value = 0
   getScreenInfo(newObj.value)
   nextTick(() => {
     showFan.value = true;
@@ -278,7 +283,7 @@ const manageSelect = (index) => {
     }
   } else if (index == '隧道管理') {
     if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + currentSiteId.value + '/i' + '/' + currentUserId.value);
+      router.push("/tunnel/" + currentSiteId.value + '/byHome/' + currentUserId.value);
     }
   } else if (index == '用户管理') {
     if (currentSiteId.value) {
@@ -321,7 +326,6 @@ const nextBtn = () => {
 const initWebSocket = () => {
   // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
   let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
-  console.log(wsUrl);
   socket = new WebSocket(wsUrl);
   //连接发生错误的回调方法
   socket.onerror = function () {
@@ -333,7 +337,7 @@ const initWebSocket = () => {
   };
   //接收到消息的回调方法
   socket.onmessage = function (event) {
-    console.log("服务器返回的信息: ", JSON.parse(event.data));
+    // console.log("服务器返回的信息: ", JSON.parse(event.data));
     const type = JSON.parse(event.data).type;
     const data = JSON.parse(event.data).data;
     if (type === "equipment") {
@@ -346,7 +350,9 @@ const initWebSocket = () => {
           socketData.sensor = data;
         }
       });
+      console.log(socketData);
     }
+
   };
   //连接关闭的回调方法
   socket.onclose = function () {
@@ -357,7 +363,6 @@ const initWebSocket = () => {
     socket.send(JSON.stringify(send));
   }, 30000);
 };
-initWebSocket();
 </script>
 <style lang="scss">
 .el-drawer__header {

src/views/user/index.vue

@@ -343,11 +343,49 @@ const handleSelect = async (selection, row) => {
 </script>
 <style lang="scss">
 .user-select {
+  .el-select__wrapper{
+    min-height: 75px;
+    height: auto !important;
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+    font-size: 35px;
+    width: 476px;
+  }
+  .el-select__placeholder.is-transparent {
+    height: 54px;
+    line-height: 54px;
+  }
+  .el-select__selected-item {
+    //height: 54px;
+    //line-height: 54px;
+    .el-tag {
+      max-width: none!important;
+      height: 55px;
+      font-size: 43px;
+        .el-icon {
+          font-size: 51px;
+          width: auto;
+          height: auto;
+      }
+    }
+  }
+  .el-select__caret{
+    font-size: 35px !important;
+  }
+  .el-select-dropdown__item.is-hovering {
+    background-color: #064B66 !important;
+  }
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
+    width: 42px;
+    height: 42px;
+  }
   .el-input {
     min-height: 75px;
     height: auto !important;
   }
-
+  .el-form-item.is-error .el-input__wrapper {
+   box-shadow: none;
+  }
   .el-select__popper {
     margin-top: -12px !important;
     background: #072247 !important;