邓洁 : 修改大屏样式

src/views/home/index.vue

@@ -7,6 +7,7 @@
       </div>
       <el-button type="primary" @click="initWebSocket">确认连接</el-button>
       <el-button type="primary" @click="closeSocket">关闭连接</el-button>
+      <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
       <div class="socket-box">
         <div v-for="item in data" ref="child">
           <div v-if="item.type == 3">
@@ -20,7 +21,10 @@
           </div>
         </div>
       </div>
-      <el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
+      <div style="display: flex">
+        <el-input v-model="number" placeholder="请输入" clearable></el-input>
+        <el-button type="primary" @click="handleSend" style="float: right">发送</el-button>
+      </div>
     </div>
     <div class="logout">
       <el-button @click="handleLogout">退出登录</el-button>
@@ -35,6 +39,7 @@ import {useAuthStore} from '@/store/userstore.js'
 const router = useRouter()
 const authStore = useAuthStore()
 const serialNumber = ref('')
+const number = ref('')
 let send = {
   type: "ping"
 }
@@ -54,8 +59,16 @@ watch(
     }
 );
 let socket = reactive('')
+const handleSend=()=>{
+  console.log('JSON.stringify(number.value))',JSON.stringify(number.value))
+  let data = {
+    type: 1,
+    cmd : number.value
+  }
+  socket.send(JSON.stringify(data))
+}
 const initWebSocket = () => {
-  // let wsUrl = `ws://192.168.31.175:8000/wstunnel/debug/${token}/${serialNumber.value}`
+  // let wsUrl = `ws://192.168.31.175:9000/debug/${token}/${serialNumber.value}`
   let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${token}/${serialNumber.value}`
   console.log(wsUrl)
   socket = new WebSocket(wsUrl)

src/views/tunnel/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
     <div class="box-top">
-      <div class="manage-btn">
-        <div v-for="item in btnList" :key="item.name" class="btn-box">
-          <div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
-          <div>{{ item.name }}</div>
-        </div>
-      </div>
+      <manage-btn v-model="selectIndex" @select="manageSelect"/>
       <div class="tunnel-title"></div>
       <div class="top-right">
         <div class="current-site">
@@ -15,8 +10,8 @@
         </div>
         <div class="current-user">
           上午好：<span>{{ currentUser }}</span>
-          <span>今天是: 2023年12月12日 星期三</span>
-          <div class="logout"></div>
+          <span>今天是：{{ currentDate }}</span>
+          <div class="logout" @click="handleLogout"></div>
         </div>
       </div>
     </div>
@@ -75,43 +70,32 @@ import UsedEle from "@/components/content/usedEle/UsedEle.vue";
 import WindPressureList from "@/components/content/windPressure/WindPressureList.vue";
 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 {useAuthStore} from '@/store/userstore.js'
 
+const authStore = useAuthStore()
+const router = useRouter()
+const selectIndex=ref(1)
 const drawerLeft = ref(true)
 const drawerRight = ref(true)
 const currentSite = ref('松江站')
 const currentUser = ref('admin')
-const btnList = ref([
-  {
-    icon: 'sp_icon_zdgl.png',
-    name: '站点管理'
-  },
-  {
-    icon: 'sp_icon_sdgl.png',
-    name: '隧道管理'
-  },
-  {
-    icon: 'sp_icon_yhgl.png',
-    name: '用户管理'
-  },
-  {
-    icon: 'sp_icon_xtgl.png',
-    name: '系统管理'
-  },
-  {
-    icon: 'sp_icon_mngl.png',
-    name: '模拟仿真'
-  },
-])
+const currentDate = ref(dateFormat())
 
-const getImageUrl = (name) => {
-  return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
-}
+const manageSelect = () => {
+  // getInfo();
+};
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value
 }
 const closeRight = () => {
   drawerRight.value = !drawerRight.value
 }
+const handleLogout = () => {
+  authStore.userLogout()
+  router.push('/login')
+}
 </script>
 
 <style lang="scss" scoped>