邓洁: 隧道管理中点击预览隧道

src/components/content/usedEle/UsedEle.vue

@@ -74,7 +74,6 @@ const bgImage = computed(() =>
         : "bg.png"
 );
 watch(() => props.eleData, (now) => {
-  console.log('now.frequencyChangerList',now)
   if(now.frequencyChangerList.length===0){
     electricityConsumptionMonthly.value=0
   }else {

src/router/index.js

@@ -23,6 +23,15 @@ const routes = [
       breadcrumb: true
     },
   },
+  {
+    path: '/:tunnelId',
+    name: 'previewTunnel',
+    component: () => import('@/views/tunnel/index.vue'),
+    meta: {
+      title: '隧道预览',
+      breadcrumb: true
+    },
+  },
   {
     path: '/edit/:tunnelId(\\d+)/:type/:userId(\\d+)',
     name: 'tunneledit',

src/views/tunnel-manage/index.vue

@@ -31,7 +31,7 @@
         </div>
         <div class="box-center">
           <div>
-            <div class="left-img" @click="handlePreview"></div>
+            <div class="left-img" @click="handlePreview(item.tunnelId)"></div>
             <div>
               <div class="edit-btn" @click.stop="handleGoToEditTunnel(item.tunnelId)">
                 <div class="edit-icon"></div>
@@ -113,9 +113,10 @@ import {getSiteDetail} from "@/api/site";
 
 const router = useRouter()
 const showAddIcon = ref(true)
-const siteId = reactive(router.currentRoute.value.params.siteId)
-const userId = reactive(router.currentRoute.value.params.userId)
-const type = reactive(router.currentRoute.value.params.type)
+const params = router.currentRoute.value.params;
+const siteId = reactive(params.siteId)
+const userId = reactive(params.userId)
+const type = reactive(params.type)
 const formRules = ref({
   tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
   serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
@@ -256,8 +257,11 @@ const handleSubmit = (instance) => {
   // })
 }
 //预览隧道
-const handlePreview=()=>{
-
+const handlePreview=(id)=>{
+  console.log('预览')
+  if(id){
+    router.push('/'+id)
+  }
 }
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
@@ -589,6 +593,7 @@ const handleMoreDelete = () => {
         }
 
         .left-img {
+          cursor: pointer;
           margin-top: 110px;
           margin-right: 50px;
           width: 340px;

src/views/tunnel/index.vue

@@ -56,7 +56,7 @@
     </div>
     <div class="switch-btn">
       <div class="arrow" @click="previousBtn"></div>
-      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" @change="changeTunnel">
+      <el-carousel height="150px" type="card" ref="tunnelBtn" :autoplay="false" :initial-index="initialIndex" @change="changeTunnel" >
         <div class="btn">
           <el-carousel-item v-for="item in tunnelList" :key="item.value">
             {{ item.label }}
@@ -85,9 +85,11 @@ import {getUserInfo} from "@/api/login";
 import {initSceneData} from "@/api/tunnelScene";
 const authStore = useAuthStore();
 const router = useRouter();
+const previewId = reactive(router.currentRoute.value.params.tunnelId)
 const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
+const initialIndex = ref(0)
 const showFanLoading = ref(0)
 const showWindLoading = ref(0)
 const showBadLoading = ref(0)
@@ -152,11 +154,15 @@ const socketData = reactive({
   sensor: [],
 });
 onMounted(() => {
+  if(previewId){
+    getScreenInfo(previewId)
+
+  }
+  getUser()
+  getOtherInfo()
   nextTick(() => {
     showFan.value = true;
   });
-  getUser()
-  getOtherInfo()
 });
 const getUser = () => {
   getUserInfo().then(res => {
@@ -185,7 +191,15 @@ const getOtherInfo = () => {
       currentSite.value = res.data.siteOption[0].label
       localStorage.setItem('site', currentSite.value)
       tunnelList.value = res.data.tunnelOption
-      getTunnel(res.data.siteOption[0].value)
+      if(previewId){
+        tunnelList.value.forEach((item, index) => {
+          if(item.value == previewId){
+            initialIndex.value = index
+          }
+        })
+      }else{
+        getTunnel(res.data.siteOption[0].value)
+      }
     }
   });
 };
@@ -223,7 +237,6 @@ const getScreenInfo = (id) => {
           showBadLoading.value=1
         }
         largeScreenData.value = res.data;
-        console.log('largeScreenData.value',largeScreenData.value)
       } else {
         ElMessage.warning(res.msg)
       }
@@ -243,7 +256,6 @@ const getTunnel = (id) => {
   });
 }
 const changeTunnel = (e) => {
-  console.log('tunnelList.value',e,tunnelList.value)
   let newObj = {}
   tunnelList.value.forEach((item, index) => {
     if (index === e) {