浏览代码

3.4修改警告

liuqiao 1 年之前
父节点
当前提交
03790abafe

+ 109 - 10
src/view/Dialoges.vue → src/view/InfoDialoges.vue

@@ -57,10 +57,7 @@
         style="width: 100%"
         v-loading="loading"
         element-loading-text="Loading..."
-        :element-loading-spinner="svg"
-        element-loading-svg-view-box="-10, -10, 50, 50"
         element-loading-background="rgba(0, 10, 0, 0.1)"
-        @size-change="handleSizeChange"
         :row-class-name="tableRowClassName"
         :header-cell-style="{'background':' #375A88'}"
        @select="projectsSelectionSelect"
@@ -84,7 +81,6 @@
     layout="prev, total,pager, next, jumpe,"      
     :total="parseInt(total)"
     class="mt-4"
-    @size-change="handleSizeChange2"
     @current-change="handleCurrentChange2"
   />
   </div>
@@ -153,7 +149,6 @@
         <template #title>
             <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
           火灾<el-icon class="header-icon">
-            <info-filled />
           </el-icon>
         </template>
         <div class="asides_content">
@@ -254,7 +249,6 @@
         <template #title>
             <el-icon class="iconimg Frame3" fit="contain" ></el-icon>  
           突水<el-icon class="header-icon">
-            <info-filled />
           </el-icon>
         </template>
         <div class="asides_content">
@@ -353,7 +347,14 @@ const props= defineProps({
     }
 
  });
-
+ let websock=ref(null);
+ let times=ref({
+      lockReconnect: false, //是否真正建立连接
+      timeout: 28 * 1000, //30秒一次心跳
+      timeoutObj: null, //心跳倒计时
+      serverTimeout0bj: null, //
+      timeoutnum: null, //断开重连倒计时
+  })
  let zqname=ref({});
  let shiguobj=ref({
         source:'自荐',
@@ -547,9 +548,6 @@ aid.value=val.aid;
 idobj.value.name=val.name;
 idobj.value.time=val.time;
 }
-
-function handleSizeChange2(val) {
-}
 function handleCurrentChange2(val){ 
     currentPage4.value=val;
     getdata();
@@ -692,6 +690,107 @@ const calculate=()=>{
             ElMessage.error(err.returnMsg)
           })
 }
+const projectsSelectionSelect=()=>{
+}
+// 日志
+
+function initWebSocket() {
+      //初始化weosocket
+
+      // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
+      const wsurl =
+        "ws://" +
+        process.env.VUE_APP_BASE_websokt +
+        "/diswebsocket?projectId=" +'5'
+        // aid.value;
+        websock = new WebSocket(wsurl);
+        websock.onopen = websocketonopen;
+        websock.onmessage = websocketonmessage;
+        websock.onerror = websocketonerror;
+        websock.onclose = websocketclose;
+    }
+
+ 	// Websoket连接成功事件
+   const websocketonopen = (res) => {
+      console.log("WebSocket连接成功", res);
+      start();
+      beginprocess();
+    };
+    // Websoket接收消息事件
+    const websocketonmessage = (res) => {
+     // console.log("数据", res);
+      logs.value=res.data;
+      emit('getthislog',logs.value);
+      if(res.data.includes("Simulating")){
+        let  data=res.data.replace(/\s/g, "");
+      console.log(data);
+        let num=data.match(/hour(\S*)minute/)[1];///hour(\S*)minut/
+        console.log(num)
+      }
+      
+      reset();
+    };
+    // Websoket连接错误事件
+    const websocketonerror = (res) => {
+      console.log("连接错误", res);
+      socket.close();
+      reconnect();
+    };
+    // Websoket断开事件
+    const websocketclose = (res) => {
+      console.log("断开连接", res);
+    };
+      // 创建 websocket 的实例
+
+     // 心跳包
+     const reconnect = () => {
+      if (times.value.lockReconnect) return;
+      times.value.lockReconnect = true;
+      //没连接上会一直重连,设置延迟避免请求过多
+      times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
+      times.value.timeoutnum = setTimeout(function () {
+        //新连接
+     initWebSocket();
+        times.value.lockReconnect = false;
+      }, 10000);
+    }
+    const  reset = () => {
+      //重置心跳
+      clearTimeout(times.value.timeoutObj);
+      clearTimeout(times.value.serverTimeoutObj);
+    start();
+    }
+    const start = () => {
+      //开启心跳
+      times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
+      times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
+      times.value.timeoutObj = setTimeout(function () {
+        //这里发送一个心跳,后端收到后,返回一个心跳消息
+        if (websock.readyState == 1) {
+          //如果连接正常
+         websock.send("heartCheck");
+        } else {
+          //否则重连
+          reconnect();
+        }
+        times.value.serverTimeoutObj = setTimeout(function () {
+          // 超时关闭
+          websock.close(); //如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+        }, times.value.timeout);
+      }, times.value.timeout);
+    }
+   onMounted(()=>{
+    init();
+   //getdata();
+   })
+       // 组件被销毁之前,清空 sock 对象
+   onBeforeUnmount(() => {
+      // 关闭连接
+      websocketclose;
+      // 销毁 websocket 实例对象
+      websock.value = null;
+    });
+
 onMounted(() => {
 });
 

+ 7 - 7
src/view/appmian.vue

@@ -54,9 +54,8 @@
             <el-main>
                 <Dialoges ref="lliudialog"  :addselect="addselect" :headerobj="headerobj" @headerclick="headerclick" @childfun="childfun" ></Dialoges>
                 <source-disaster ref="sourcedis" :classradio="classradio" :aid="aid"/>
-                <my-boundary  ref="boundary" :classradio="classradio" :aid="aid" />
-                <trananimation ref="tanimation" :classradio="classradio" :aid="aid"/>
-                <!-- <myIndex></myIndex> -->
+                <info-boundary  ref="boundary" :classradio="classradio" :aid="aid" />
+                <info-animation ref="tanimation" :classradio="classradio" :aid="aid"/>
               
             </el-main>
         </el-container>
@@ -66,12 +65,12 @@
   <script setup>
 import { ref, onMounted, reactive,nextTick } from "vue";
 // import NavigateBar from "@/components/layout/NavigateBar.vue";
-import Dialoges  from "./Dialoges.vue"
+import Dialoges  from "./InfoDialoges.vue"
 import logo from "@/assets/logo.png";
 // import myIndex  from "./index"
-import SourceDisaster  from "./components/Sourcedisaster.vue"
-import myBoundary  from "./components/MyBoundary.vue"
-import trananimation  from "./components/tanimation.vue"
+import SourceDisaster  from "./components/InfoDisaster.vue"
+import InfoBoundary  from "./components/InfoBoundary.vue"
+import InfoAnimation  from "./components/InfoAnimation.vue"
 import Vector from "@/assets/img/Vector.png";
 import {timestampToTime} from '@/js/lindex.js'
 import mitts from "@/utils/Bus"
@@ -108,6 +107,7 @@ const childfun=()=>{
      sourcedis.value.accident3();
 }
 const headerclick=(data)=>{
+    console.log(data);
     headerobj.value.name=data.name;
     headerobj.value.time=data.time;
     aid.value=data.aid

+ 20 - 5
src/view/components/tanimation.vue → src/view/components/InfoAnimation.vue

@@ -59,8 +59,11 @@
     </el-aside>
     <!-- 监测点 -->
     <!-- 监测点 -->
-    <div class="jiancedian asideg1" v-show="monitor">
-      <div class="jc_header he_pading color1">
+   <div class="demo-collapse jiancedian asideg1 collapseeion" v-show="monitor">
+    <el-collapse accordion v-model="activeNames">
+      <el-collapse-item name="1">
+        <template #title>
+          <div class="jc_header he_pading color1">
         <el-form-item label="污染物选择:">
           <el-select
             v-model="formInline.region"
@@ -76,7 +79,8 @@
           </el-select>
         </el-form-item>
       </div>
-      <div class="jc_content tablecolor">
+        </template>
+        <div class="jc_content tablecolor">
         <div class="jc_padding">
           <div class="xian">
             <el-table
@@ -96,7 +100,9 @@
         </div>
         <div style="height: 200px"></div>
       </div>
-    </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
   </div>
 </template>
 
@@ -167,7 +173,7 @@ mapper.setLookupTable(ctf);
 const lut = mapper.getLookupTable();
 scalarBarActor.setScalarsToColors(lut);
 renderer.addActor(scalarBarActor);
-
+const activeNames = ref(['1'])
 let emit = defineEmits([]);
 const props = defineProps({
   classradio: {
@@ -537,7 +543,9 @@ function generateTicks(numberOfTicks) {
     helper.setTickStrings(tickStrings);
   };
 }
+const handleClick=()=>{
 
+}
 defineExpose({ monitor, accident5 });
 </script>
 <style lang="scss" scoped>
@@ -1287,4 +1295,11 @@ defineExpose({ monitor, accident5 });
   font-weight: bold;
   color: #fff;
 }
+.collapseeion .el-collapse-item__arrow{
+display: none;
+}
+.collapseeion  .el-select .el-input__inner{
+  color: #fff;
+}
+
 </style>

+ 6 - 4
src/view/components/MyBoundary.vue → src/view/components/InfoBoundary.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 所有弹出框 -->
-    <div class="l_Dialog">
+    <div class="l_Dialog bou">
         <!--火灾左侧栏-->
         <div class="common-layout " style="margin: 0;">
             <el-aside width="591px" class="L_aside L_aside1 asideg asidegbg leftbgimg2"  v-show="boun.collfire">
@@ -10,7 +10,6 @@
                             <template #title>
                                 <el-icon class="iconimg Frame2" fit="contain"></el-icon>
                                 火灾<el-icon class="header-icon">
-                                    <info-filled />
                                 </el-icon>
                             </template>
                             <div class="asides_content">
@@ -69,7 +68,6 @@
                             <template #title>
                                 <el-icon class="iconimg Frame3" fit="contain"></el-icon>
                                突水<el-icon class="header-icon">
-                                    <info-filled />
                                 </el-icon>
                             </template>
                             <div class="asides_content">
@@ -217,7 +215,7 @@
                     </div>
                     >
                     <el-table :row-class-name="tableRowClassName" :max-height="tableHeight" ref="multipleTableRef"
-                        :data="tableData2" style="width: 100%" @selection-change="handleSelectionChange"
+                        :data="tableData2" style="width: 100%" 
                         @select="projectsSelectionSelect" :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0.96) ' }">
                         <el-table-column type="selection" width="55" />
                         <el-table-column property="id" label='节点编号' />
@@ -271,6 +269,7 @@ import { request, uploadFile } from "@/utils/request";
 import icon from "@/assets/img/icon.png";
 import closeimg from "@/assets/img/colse.png";
 import { ElMessage, ElButton, ElDialog } from 'element-plus'
+import { Calendar, Search } from '@element-plus/icons-vue'
 const props = defineProps({
     classradio: String,
    
@@ -979,4 +978,7 @@ defineExpose({ boun, accident4,addboundary });
 .guand_1   .asdis_btn{
         margin-top: -9px !important;
     }
+    .bou .el-table__header{
+        margin: 0 !important;
+    }
 </style>

+ 1 - 3
src/view/components/Sourcedisaster.vue → src/view/components/InfoDisaster.vue

@@ -10,7 +10,6 @@
           <template #title>
               <el-icon class="iconimg Frame2" fit="contain" ></el-icon>  
             火灾<el-icon class="header-icon">
-              <info-filled />
             </el-icon>
           </template>
           <div class="asides_content">
@@ -97,7 +96,6 @@
           <template #title>
               <el-icon class="iconimg Frame3" fit="contain" ></el-icon>  
             突水<el-icon class="header-icon">
-              <info-filled />
             </el-icon>
           </template>
           <div class="asides_content">
@@ -244,7 +242,6 @@
      ref="multipleTableRef"
      :data="tableData2"
      style="width: 100%"
-     @selection-change="handleSelectionChange"
      @select="projectsSelectionSelect"
      :header-cell-style="{'background':'rgba(13, 22, 57, 0.96) '}"
    >
@@ -367,6 +364,7 @@
       import icon from "@/assets/img/icon.png";
       import closeimg from "@/assets/img/colse.png";
       import { ElMessage,ElButton, ElDialog,ElSelect } from 'element-plus'
+      import { Calendar, Search } from '@element-plus/icons-vue'
   import { c } from "@kitware/vtk.js/macros2";
       const props= defineProps({
           classradio: {