feat : 新增echarts中指定日期展示及细节优化

src/views/tunnel/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="main">
     <div class="box-top">
-      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu" />
-      <div class="tunnel-title"></div>
-      <!--      <manage-length class="tunnel-length"></manage-length>-->
+      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
+      <tunnel-title v-if="showTunnelTitle"/>
       <div class="top-length">
         <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
         <span>当前施工长度: {{ constructionLength }}米</span>
@@ -16,8 +15,8 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
-                  item.label
-                }}
+                    item.label
+                  }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
@@ -32,27 +31,26 @@
     </div>
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
-
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :tunnelName="tunnelName"></preview-scene>
+                   :tunnelName="tunnelName"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
-          :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId" />
-        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" />
+                  :transducer-data="largeScreenData" :loading="showFanLoading" :tunnel-id="tunnelId"/>
+        <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
       </el-drawer>
       <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
       <div v-else class="shrink-left" @click="closeLeft"></div>
     </div>
     <div class="right">
       <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
-        :close-on-click-modal="false" :close-on-press-escape="false">
+                 :close-on-click-modal="false" :close-on-press-escape="false">
         <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
-          :loading="showWindLoading" />
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+                            :loading="showWindLoading"/>
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
         <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
-          :loading="showBadLoading" />
+                      :loading="showBadLoading"/>
       </el-drawer>
       <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
       <div v-else class="shrink-right" @click="closeRight"></div>
@@ -60,7 +58,7 @@
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
       <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex"
-        @change="changeTunnel">
+                   @change="changeTunnel">
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -80,19 +78,25 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
 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 { getToken } from "@/utils/auth";
-import { useAuthStore } from "@/store/userstore.js";
-import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { getUserInfo } from "@/api/login";
-import { initSceneData } from "@/api/tunnelScene";
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
+import {dateFormat} from "@/utils/date.js";
+import {getToken} from "@/utils/auth";
+import {useAuthStore} from "@/store/userstore.js";
+import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {getUserInfo} from "@/api/login";
+import {initSceneData} from "@/api/tunnelScene";
+import {getTunnelList} from "@/api/tunnelManage";
+
 const authStore = useAuthStore();
 const router = useRouter();
 const previewId = reactive(router.currentRoute.value.params.tunnelId)
+const siteId = reactive(router.currentRoute.value.params.siteId)
+const tunnelIdFlag = reactive(router.currentRoute.value.params.tunnelId)
 const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
+const showTunnelTitle = ref(true);
 const initialIndex = ref(0)
 const showFanLoading = ref(0)
 const showWindLoading = ref(0)
@@ -102,6 +106,7 @@ const showMenu = ref(false);
 const currentSiteId = ref(0);
 const currentSite = ref("");
 const siteList = ref([])
+const totalTunnelList = ref([])
 const currentUser = ref("");
 const currentUserId = ref(0);
 const currentDate = ref(dateFormat());
@@ -112,7 +117,9 @@ const tunnelLength = ref(0);
 const constructionLength = ref(0);
 const routeList = ref([]);
 let socket = reactive("");
+let pattern = reactive(new RegExp("[A-Za-z]+"));
 let tunnelName = reactive("")
+let isTunnel = reactive(false)
 
 const btnList = ref([
   {
@@ -154,9 +161,7 @@ const socketData = reactive({
 let tunnelLen = computed(() => tunnelLength);
 
 onMounted(() => {
-  if (previewId) {
-    getScreenInfo(previewId)
-  }
+  getList()
   getUser()
   getOtherInfo()
   nextTick(() => {
@@ -177,7 +182,7 @@ const getOtherInfo = () => {
   getLargeScreenInfo().then((res) => {
     if (res?.code === 1000) {
       let routeArr = [];
-      res.data.routeList.forEach((item, index) => {
+      res.data.routeList.forEach((item) => {
         for (let btn of btnList.value) {
           if (item === btn.route) {
             routeArr.push(btn)
@@ -187,22 +192,25 @@ const getOtherInfo = () => {
       routeList.value = routeArr
       showMenu.value = true
       siteList.value = res.data.siteOption
-      currentSiteId.value = res.data.siteOption[0].value
-      currentSite.value = res.data.siteOption[0].label
-      localStorage.setItem('site', currentSite.value)
-      if(res.data.tunnelOption.length === 0){
-        getTunnel(res.data.siteOption[0].value)
-      }else {
+      if (!siteId) {
         tunnelList.value = res.data.tunnelOption
       }
-      if (previewId) {
-        tunnelList.value.forEach((item, index) => {
-          if (item.value == previewId) {
-            initialIndex.value = index
-          }
-        })
+
+      if (siteId) {
+        currentSiteId.value = siteId
+        currentSite.value = localStorage.getItem('site')
+        showTunnelTitle.value = false
+        nextTick(() => {
+          showTunnelTitle.value = true
+        });
+        console.log('siteId',siteId)
+        getTunnel(siteId)
       } else {
         getTunnel(res.data.siteOption[0].value)
+        currentSiteId.value = res.data.siteOption[0].value
+        currentSite.value = res.data.siteOption[0].label
+        localStorage.setItem('site', currentSite.value)
+        localStorage.setItem('currentSiteId', currentSiteId.value)
       }
     }
   });
@@ -223,14 +231,14 @@ const getScreenInfo = (id) => {
           showWindLoading.value = 1
         }
         if (res.data.sensorList.length !== 0) {
-          res.data.sensorList.forEach((item, index) => {
+          res.data.sensorList.forEach((item) => {
             if (
-              item.equipmentType === "carbonDioxide" ||
-              item.equipmentType === "carbonMonoxide" ||
-              item.equipmentType === "hydrogenSulfide" ||
-              item.equipmentType === "sulfurDioxide" ||
-              item.equipmentType === "sulfurMonoxide" ||
-              item.equipmentType === "nitrogenDioxide"
+                item.equipmentType === "carbonDioxide" ||
+                item.equipmentType === "carbonMonoxide" ||
+                item.equipmentType === "hydrogenSulfide" ||
+                item.equipmentType === "sulfurDioxide" ||
+                item.equipmentType === "sulfurMonoxide" ||
+                item.equipmentType === "nitrogenDioxide"
             ) {
               showBadLoading.value = 0
             } else {
@@ -253,17 +261,44 @@ const getScreenInfo = (id) => {
     })
   }
 };
-//根据站点id获取隧道信息
+const getList = () => {
+  getTunnelList({
+    siteId: siteId
+  }).then(res => {
+    if (res.code === 1000) {
+      if (res.data.rows.length !== 0) {
+        isTunnel = true;
+        totalTunnelList.value = res.data.rows
+      } else {
+        isTunnel = false
+      }
+    }
+  })
+}
+//根据站点id获取隧道信息option
 const getTunnel = (id) => {
   getTunnelBySiteId(id).then((res) => {
     if (res?.code === 1000) {
-      if(res.data.length === 0){
-        ElMessage.warning('该站点下无隧道, 请新增隧道后再尝试!')
+      if (res.data.length === 0) {
+        if (isTunnel) {
+          ElMessage.warning('该站点下没有隧道可展示, 请添加设备后再试!')
+        } else {
+          ElMessage.warning('该站点下没有隧道, 请新增隧道后再试!')
+        }
         tunnelList.value = []
-      }else {
-        getScreenInfo(res.data[0]?.value)
-        tunnelName = res.data[0].label
+      } else {
+        if (!pattern.test(previewId)) {
+          getScreenInfo(previewId)
+        }else {
+          getScreenInfo(res.data[0]?.value)
+          tunnelName = res.data[0].label
+        }
         tunnelList.value = res.data
+        tunnelList.value.forEach((item, index) => {
+          if (item.value == previewId) {
+            initialIndex.value = index
+          }
+        })
       }
     }
   });
@@ -285,17 +320,17 @@ const changeTunnel = (e) => {
 }
 const manageSelect = (index) => {
   console.log("首页点击-", index);
-  if (index == '站点管理') {
+  if (index === '站点管理') {
     if (currentUserId.value) {
-      router.push("/site/" + currentUserId.value);
+      router.push("/site/" + currentUserId.value + '/' + currentSiteId.value);
     }
-  } else if (index == '隧道管理') {
+  } else if (index === '隧道管理') {
     if (currentSiteId.value && currentUserId.value) {
-      router.push("/tunnel/" + currentSiteId.value + '/byHome/' + currentUserId.value);
+      router.push("/tunnel/" + localStorage.getItem('currentSiteId') + '/byHome/' + currentUserId.value);
     }
-  } else if (index == '用户管理') {
+  } else if (index === '用户管理') {
     if (currentSiteId.value) {
-      router.push("/user/" + currentSiteId.value);
+      router.push("/user/" + localStorage.getItem('currentSiteId'));
     }
   }
 };
@@ -307,6 +342,15 @@ const handleChangeSite = (item) => {
   nextTick(() => {
     showFan.value = true;
   });
+  localStorage.setItem('site', currentSite.value)
+  localStorage.setItem('currentSiteId', currentSiteId.value)
+  if (tunnelIdFlag) {
+    router.push('/' + tunnelIdFlag + '/' + currentSiteId.value)
+  }
+  showTunnelTitle.value = false
+  nextTick(() => {
+    showTunnelTitle.value = true
+  });
 }
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value;