fix : 优化隧道模拟首页

src/views/tunnel-simulate/index.vue

@@ -1,13 +1,14 @@
 <template>
   <div id="main">
+    <tunnel-title v-if="showTunnelTitle"/>
     <div class="box-top">
-      <!--            <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu&&isPreview" />-->
-      <tunnel-title v-if="showTunnelTitle"/>
+      <div class="back-tunnel" @click="router.push('/simulate/tunnel/list')">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
       <div class="top-length">
         <span>隧道总长度: {{ tunnelLength }}米</span>
-        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate"
-        >开始模拟</span
-        >
+        <span class="all-btn" @click="startSimulate" v-if="isStartSimulate">开始模拟</span>
         <div v-else>
           <span class="all-btn" @click="simulatedBlasting">模拟爆破</span>
           <span class="all-btn" @click="endSimulate">结束模拟</span>
@@ -46,9 +47,10 @@
         id="tunnel-box"
         :isedit="false"
         :device-data="largeScreenData"
-        :tunnelLength="tunnelLen"
+        :tunnelLength="tunnelLength"
         :tunnelId="tunnelId"
         :tunnelAlias="tunnelAlias"
+        :devRealtimeData="socketData"
     ></preview-scene-simulate>
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <!--    <preview-scene-->
@@ -126,148 +128,6 @@
       <div v-else class="shrink-right" @click="closeRight"></div>
     </div>
   </div>
-  <div class="alarm-dialog alarm-tunnel">
-    <el-dialog
-        :close-on-click-modal="false"
-        v-model="isDetailVisited"
-        title="报警信息详情"
-        width="1500px"
-    >
-      <div class="detail">
-        <div>报警时间：</div>
-        {{ alarmDetail.alarmTime }}
-      </div>
-      <div class="detail">
-        <div>报警内容：</div>
-        {{ alarmDetail.alarmContent }}
-      </div>
-    </el-dialog>
-  </div>
-  <div class="alarm-tunnel">
-    <el-dialog
-        :close-on-click-modal="false"
-        v-model="isVisited"
-        title="报警信息"
-        width="2175px"
-        :modal="false"
-    >
-      <div class="left-top-icon"></div>
-      <div class="right-top-icon"></div>
-      <el-form
-          :model="queryParams"
-          inline
-          class="query-form"
-          ref="queryForm"
-          @submit.prevent="getAlarmList"
-          v-if="roleKey !== 'administrator'"
-      >
-        <el-form-item label="查阅状态" prop="lookupStatus">
-          <el-select
-              v-model="queryParams.lookupStatus"
-              placeholder="请选择查阅状态"
-              :fit-input-width="true"
-              :teleported="false"
-              clearable
-              filterable
-          >
-            <el-option label="已读" :value="true"/>
-            <el-option label="未读" :value="false"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getAlarmList">搜索</el-button>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-      <div
-          class="device-table"
-          :style="{ marginTop: roleKey === 'administrator' ? '40px' : '0' }"
-      >
-        <el-table
-            stripe
-            v-loading="loading"
-            :empty-text="tableEmptyText"
-            style="background-color: #011c29; --el-table-border-color: none"
-            :header-cell-style="{
-            backgroundColor: '#064B66',
-            color: '#fff',
-            fontSize: '40px',
-            borderBottom: 'none',
-          }"
-            :data="alarmList"
-        >
-          <el-table-column
-              prop="tunnelName"
-              label="隧道名称"
-              align="center"
-              width="400px"
-          />
-          <el-table-column
-              prop="alarmContent"
-              label="告警信息"
-              align="center"
-          />
-          <el-table-column
-              prop="alarmTime"
-              label="告警时间"
-              align="center"
-              width="480px"
-          />
-          <el-table-column
-              prop="lookupStatus"
-              label="查阅状态"
-              align="center"
-              width="200px"
-              v-if="roleKey !== 'administrator'"
-          >
-            <template #default="scope">
-              <el-tag :type="scope.row.lookupStatus ? 'success' : 'warning'"
-              >{{ scope.row.lookupStatus ? "已读" : "未读" }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center" width="300px">
-            <template #default="scope">
-              <el-button
-                  type="primary"
-                  size="mini"
-                  style="font-weight: bold"
-                  @click="handleView(scope.row)"
-                  link
-              >详情
-              </el-button>
-              <el-button
-                  type="danger"
-                  size="mini"
-                  v-if="roleKey !== 'administrator'"
-                  @click="handleDelete(scope.row)"
-                  link
-              >删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div
-            class="pagination"
-            :style="{ bottom: roleKey === 'administrator' ? '40px' : '0' }"
-        >
-          <el-pagination
-              background
-              v-model:current-page="pageInfo.pageNum"
-              v-model:page-size="pageInfo.pageSize"
-              :total="total"
-              prev-text="上一页"
-              next-text="下一页"
-              layout="prev, pager, next"
-              @current-change="handleCurrentChange"
-              :hide-on-single-page="true"
-          />
-        </div>
-      </div>
-      <div class="left-bottom-icon"></div>
-      <div class="right-bottom-icon"></div>
-    </el-dialog>
-  </div>
 </template>
 
 <script setup>
@@ -433,6 +293,7 @@ const simulatedBlasting = async () => {
 const endSimulate = async () => {
   isStartSimulate.value = true;
   await endSimulation(previewId);
+  ElMessage.success("结束模拟成功");
 };
 const changeName = (id) => {
   for (let item of equipmentOption.value) {
@@ -589,13 +450,6 @@ const getScreenInfo = (id) => {
           showWindLoading.value = 1;
         }
         if (res.data.sensorList.length !== 0) {
-          // res.data.sensorList.forEach((item) => {
-          //   option = {
-          //     value: item.equipmentId,
-          //     label: item.equipmentName,
-          //   }
-          //   equipmentOption.value.push(option)
-          // })
           res.data.sensorList.forEach((item) => {
             if (
                 item.equipmentType === "dust" ||
@@ -615,18 +469,12 @@ const getScreenInfo = (id) => {
           showBadLoading.value = 1;
         }
         largeScreenData.value = res.data;
-        console.log("largeScreenData.value", largeScreenData.value);
+        // console.log("largeScreenData.value", largeScreenData.value);
       } else {
         ElMessage.warning(res.msg);
       }
     });
-    // initSceneData(id).then((res) => {
-    //   tunnelLength.value = res.data.tunnelLength;
-    //   constructionLength.value = res.data.constructionLength;
-    //   // serialNumber.value = res.data.serialNumber.slice(0, -2)
-    //   serialNumber.value = res.data.serialNumberPrefix;
-    //   initWebSocket();
-    // });
+
   }
 };
 
@@ -675,8 +523,9 @@ const handleLogout = () => {
 };
 
 const initWebSocket = () => {
-  let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
-  // let wsUrl = `ws://tunnel.feashow.com/api/websocket/simulate/${token}/${serialNumber.value}`;
+  // let wsUrl = `ws://frp.toomewhy.top:38000/wstunnel/websocket/simulate/${token}/123`;
+  // let wsUrl = `ws://192.168.31.175:8000/wstunnel/websocket/simulate/${token}/123`;
+  let wsUrl = `ws://tunnel.feashow.com/api/wstunnel/websocket/simulate/${token}/${serialNumber.value}`;
   // let wsUrl = import.meta.env.VITE_BASE_WSURL+`/${token}/${serialNumber.value}`;
   // let wsUrl = `ws://clay.frp.feashow.cn/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
   // let wsUrl = `ws://frp.toomewhy.top:39000/websocket/simulate/${token}/${serialNumber.value}`;
@@ -778,21 +627,55 @@ const initWebSocket = () => {
 </style>
 
 <style lang="scss" scoped>
-.all-btn {
-  cursor: pointer;
-  padding: 10px 20px;
-  border-radius: 11px;
-  border: 2px solid #08b7b8;
-  color: #0be9fa;
-  text-align: center;
-  margin-left: 40px;
-  font-size: 38px;
 
-  &:hover {
-    color: #f7b500;
+.box-top {
+  //display: flex;
+  //justify-content: space-between;
+  position: relative;
+
+  .all-btn {
+    cursor: pointer;
+    padding: 10px 20px;
+    border-radius: 11px;
+    border: 2px solid #08b7b8;
+    color: #0be9fa;
+    text-align: center;
+    margin-left: 40px;
+    font-size: 38px;
+
+    &:hover {
+      color: #f7b500;
+    }
   }
+
+  .back-tunnel {
+    position: absolute;
+    top: 46px;
+    cursor: pointer;
+    margin: 0 0 0 70px;
+    display: flex;
+    align-items: center;
+    width: 178px;
+    height: 70px;
+    line-height: 70px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    font-size: 38px;
+    color: #FFFFFF;
+    z-index: 9999;
+
+    .back-icon {
+      margin-right: 20px;
+      margin-left: 23px;
+      width: 33px;
+      height: 33px;
+      background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+    }
+  }
+
 }
 
+
 #main {
   height: 100%;
   width: 100%;