邓洁 : 修改大屏样式

.drone.yml

@@ -16,7 +16,7 @@ steps:
       - export NODE_MODULES_PATH=`pwd`/node_modules
       - npm config set registry https://registry.npm.taobao.org
       - set NODE_OPTIONS=--openssl-legacy-provider
-      - npm install
+#      - npm install
       - npm run build
       - echo $NODE_MODULES_PATH
       - cp -r dist /app/build/$DRONE_REPO_NAME

src/assets/styles/index.scss

@@ -20,12 +20,13 @@ html, body, #app, .el-container, .el-aside, .el-main {
 .box-top {
   .manage-btn {
     display: flex;
-    z-index: 2;
+    z-index: 3;
     position: absolute;
     top: 85px;
     left: 30px;
 
     .btn-box {
+      cursor: pointer;
       margin-left: 37px;
       display: flex;
       align-items: center;
@@ -41,6 +42,9 @@ html, body, #app, .el-container, .el-aside, .el-main {
         width: 60px;
         height: 60px;
       }
+      .select-active{
+        color: #11EAF2!important;
+      }
     }
   }
 
@@ -73,6 +77,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
       }
 
       .toggle {
+        cursor: pointer;
         width: 50px;
         height: 50px;
         background-image: url('../images/topAndDown/sp_icon_zdqh.png');
@@ -90,6 +95,7 @@ html, body, #app, .el-container, .el-aside, .el-main {
       }
 
       .logout {
+        cursor: pointer;
         margin-left: 27px;
         width: 50px;
         height: 50px;

src/components/HelloWorld.vue

@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/manageBtn/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="manage-btn">
+    <div v-for="(item,index) in btnList" :key="item.name" class="btn-box" @click="select(index)">
+      <div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
+      <div :class="{'select-active':selectButton===index}">{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+})
+const emit = defineEmits(["update:modelValue", "select"]);
+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 selectButton = ref(props.modelValue);
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
+}
+const select = (index) => {
+  if (selectButton.value === index) return;
+  selectButton.value = index;
+  emit("update:modelValue", index);
+  emit("select", index);
+};
+</script>

src/utils/date.js

@@ -0,0 +1,24 @@
+export const dateFormat = (time = new Date().getTime()) => { //YYYY年MM月DD日 星期d
+  const _time = time.toString().length > 10 ? time : time * 1000
+  const weekList = ["一", "二", "三", "四", "五", "六", "日"];
+  const date = new Date(_time);
+  const Y = date.getFullYear();
+  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
+  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
+  const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
+  const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
+  const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
+  let weekDay = new Date().getDay();
+  const week= weekList[weekDay - 1]
+  // const strDate = `${Y}/${M}/${D} ${h}:${m}:${s}`
+  return `${Y}年${M}月${D}日 星期${week}`;
+}
+
+export default {
+  dateFormat
+}
+
+
+
+
+

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">
+      <manage-btn v-model="selectIndex" @select="manageSelect"/>
-        <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>
       <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>
+          <span>今天是：{{ currentDate }}</span>
-          <div class="logout"></div>
+          <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([
+const currentDate = ref(dateFormat())
-  {
-    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 getImageUrl = (name) => {
+const manageSelect = () => {
-  return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
+  // 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>