邓洁 : 有害气体echarts数据,切换站点与隧道数据渲染

src/views/tunnel/index.vue

@@ -7,7 +7,14 @@
       <div class="top-right">
         <div class="current-site">
           当前站点：<span>{{ currentSite }}</span>
-          <div class="toggle"></div>
+          <el-dropdown trigger="click" @command="handleCommand">
+            <div class="toggle"></div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label }}</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
         <div class="current-user">
           上午好：<span>{{ currentUser }}</span>
@@ -32,7 +39,7 @@
                  :close-on-click-modal="false" :close-on-press-escape="false">
         <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
         <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
-        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData"/>
+        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -62,10 +69,9 @@ import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
 import ManageBtn from "@/components/manageBtn/index.vue";
 import ManageLength from "@/components/manageLength/index.vue";
 import {dateFormat} from "@/utils/date.js";
-import {onMounted} from "vue";
 import {getToken} from "@/utils/auth";
 import {useAuthStore} from "@/store/userstore.js";
-import {getLargeScreen, getLargeScreenInfo} from "@/api/largeScreen";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
 import {ElMessageBox} from "element-plus";
 import {getUserInfo} from "@/api/login";
 
@@ -75,7 +81,8 @@ const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
 const drawerRight = ref(true);
-const currentSite = ref("松江站");
+const currentSite = ref("");
+const siteList = ref([])
 const currentUser = ref("");
 const currentDate = ref(dateFormat());
 const tunnelBtn = ref();
@@ -114,8 +121,9 @@ const getOtherInfo = () => {
     if (res?.code === 1000) {
       routeList.value = res.data.routeList
       currentSite.value = res.data.siteOption[0].label
-      tunnelList.value = res.data.tunnelOption
+      siteList.value = res.data.siteOption
       tunnelId.value = res.data.tunnelOption[0].value
+      getTunnel(res.data.siteOption[0].value)
       getScreenInfo(tunnelId.value);
     }
   });
@@ -127,8 +135,17 @@ const getScreenInfo = async (id) => {
     }
   });
 };
+//根据站点id获取隧道信息
+const getTunnel = (id) => {
+  getTunnelBySiteId(id).then((res) => {
+    if (res?.code === 1000) {
+      tunnelList.value = res.data
+      getScreenInfo(res.data[0].value)
+    }
+  });
+}
 const changeTunnel = (e) => {
-  console.log('e', e,tunnelList.value)
+  tunnelId.value = e
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
     if (index === e) {
@@ -139,7 +156,6 @@ const changeTunnel = (e) => {
   nextTick(() => {
     showFan.value = true;
   });
-  console.log('newObj', newObj)
 }
 const manageSelect = (index) => {
   console.log("首页点击-", index);
@@ -149,6 +165,11 @@ const manageSelect = (index) => {
     router.push("/tunnel/1");
   }
 };
+const handleCommand=(item)=>{
+  console.log('commads',item)
+  currentSite.value=item.label
+  getTunnel(item.value)
+}
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value;
 };
@@ -216,7 +237,29 @@ const closeSocket = () => {
 };
 initWebSocket();
 </script>
+<style lang="scss">
+.el-popper{
+  border: 1px solid #0F82AF;
 
+  .el-scrollbar__wrap {
+    .el-dropdown__list {
+      .el-dropdown-menu {
+
+        background-color:#072247;
+        .el-dropdown-menu__item{
+          color: #FFFFFF;
+          border:none;
+        }
+        .el-dropdown-menu__item:hover{
+          background-color:#072247;
+          color: #08B7B8;
+        }
+      }
+    }
+  }
+}
+
+</style>
 <style lang="scss" scoped>
 #main {
   height: 100%;