feat(eq4,eq40):40罐到4罐的页面跳转

refactor(index.js):路由新增

ruoyi-ui/src/router/index.js

@@ -130,21 +130,18 @@ export const constantRoutes = [
         path: 'eqHome',
         name: 'eqHome',
         component: () => import('@/views/dcs/eqHome/index.vue'),
+        redirect: { name: 'eq40' },
         children: [
-          {
-            path: '',
-            redirect: 'eq40'  // 默认重定向到 eqDataTable
-          },
           {
             path: 'eq40', // 40组设备
             name: 'eq40',
             component: () => import('@/views/dcs/eqHome/eq40.vue'),
           },
-          // {
-          //   path: 'eqDataEchart',
-          //   name: 'eqDataEchart',
-          //   component: () => import('@/views/dcs/eqEcharts/index.vue'),
-          // }
+          {
+            path: 'eq4', // 4组设备
+            name: 'eq4',
+            component: () => import('@/views/dcs/eqHome/eq4.vue'),
+          }
         ]
       },
       {
@@ -153,10 +150,15 @@ export const constantRoutes = [
         component: () => import('@/views/dcs/eqHome/eq40.vue'),
       },
       {
-        path: 'homePage', // 40组设备
+        path: 'homePage', // 大屏主页
         name: 'homePage',
         component: () => import('@/views/dcs/homePage/index.vue'),
       },
+      {
+        path: 'eq4',
+        name: 'eq4',
+        component: () => import('@/views/dcs/eqHome/eq4.vue'),
+      }
     ]
   },
 ]
@@ -278,6 +280,25 @@ export const dynamicRoutes = [
         name: 'eqHome',
         component: () => import('@/views/dcs/eqHome/index.vue'),
         permissions: ['dcs:eqHome:index'],
+        children: [
+          {
+            path: '',
+            redirect: 'eq40' ,
+            permissions: ['dcs:eqHome:index'],
+          },
+          {
+            path: 'eq40', // 40组设备
+            name: 'eq40',
+            component: () => import('@/views/dcs/eqHome/eq40.vue'),
+            permissions: ['dcs:eqHome:index'],
+          },
+          {
+            path: 'eq4', // 4组设备
+            name: 'eq4',
+            component: () => import('@/views/dcs/eqHome/eq4.vue'),
+            permissions: ['dcs:eqHome:index'],
+          }
+        ]
       }
     ]
   },

ruoyi-ui/src/views/dcs/eqHome/eq4.vue

@@ -28,14 +28,18 @@
                         class=" rotate_270 progress progress_pos6"></b-progress>
                     <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos7"></b-progress>
-                    <b-progress :value="100" striped :animated="upInWaterState"
-                        class=" rotate_90 progress progress_pos8"></b-progress>
-                    <b-progress :value="100" striped :animated="upInWaterState"
-                        class=" rotate_90 progress progress_pos9"></b-progress>
-                    <b-progress :value="100" striped :animated="upInWaterState"
-                        class=" rotate_90 progress progress_pos10"></b-progress>
-                    <b-progress :value="100" striped :animated="upInWaterState"
-                        class=" rotate_90 progress progress_pos11"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos8"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos9"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos10"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos11"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
                     <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_180 progress progress_pos12"></b-progress>
                     <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
@@ -52,7 +56,8 @@
                         class=" rotate_270 progress progress_pos15"></b-progress>
                     <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos16"></b-progress>
-                    <b-progress :value="100" striped :animated="upInGasState" class="  progress progress_pos17"></b-progress>
+                    <b-progress :value="100" striped :animated="upInGasState"
+                        class="  progress progress_pos17"></b-progress>
                     <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_270 progress progress_pos18"></b-progress>
                     <b-progress :value="100" striped :animated="downInGasState"
@@ -63,8 +68,10 @@
                         class=" rotate_90 progress progress_pos21"></b-progress>
                     <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos22"></b-progress>
-                    <b-progress :value="100" striped :animated="downInGasState" class="  progress progress_pos23"></b-progress>
-                    <b-progress :value="100" striped :animated="upInGasState || downInGasState" class=" progress progress_pos35"></b-progress>
+                    <b-progress :value="100" striped :animated="downInGasState"
+                        class="  progress progress_pos23"></b-progress>
+                    <b-progress :value="100" striped :animated="upInGasState || downInGasState"
+                        class=" progress progress_pos35"></b-progress>
 
 
                 </div>
@@ -78,7 +85,8 @@
                         class=" rotate_90 progress progress_pos26"></b-progress>
                     <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos27"></b-progress>
-                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState" class="  progress progress_pos28"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
+                        class="  progress progress_pos28"></b-progress>
 
                 </div>
                 <!-- 绿色管道（下排水） -->
@@ -126,16 +134,30 @@ export default {
         };
     },
     mounted() {
-        // this.addWater(0);
+        this.getValveState();
     },
     methods: {
+        //获取阀门状态
+        getValveState() {
+            this.upInWaterState = this.$route.query.upInWaterState;
+            this.downInWaterState = this.$route.query.downInWaterState;
+            this.outWaterState = this.$route.query.outWaterState;
+            this.upInGasState = this.$route.query.upInGasState;
+            this.downInGasState = this.$route.query.downInGasState;
+            if (this.upInWaterState || this.downInWaterState) {
+                this.addWater();
+            }
+            if (this.outWaterState) {
+                this.reduceWater();
+            }
+        },
         //水量增加
         addWater() {
             this.clearWaterInterval();
             this.interval = setInterval(() => {
-                if(this.pondValue < 100){
+                if (this.pondValue < 100) {
                     this.pondValue += 1;
-                }else{
+                } else {
                     this.pondValue = 0;
                 }
             }, 100);
@@ -144,9 +166,9 @@ export default {
         reduceWater() {
             this.clearWaterInterval();
             this.interval = setInterval(() => {
-                if(this.pondValue > 0){
+                if (this.pondValue > 0) {
                     this.pondValue -= 1;
-                }else{
+                } else {
                     this.pondValue = 100;
                 }
             }, 100);
@@ -156,16 +178,16 @@ export default {
             clearInterval(this.interval);
             this.interval = null;
         },
-        
+
     },
 };
 </script>
 
 <style scoped lang="scss">
-.page {
-    width: 1920px;
-    height: 1080px;
-}
+// .page {
+//     width: 1920px;
+//     height: 1080px;
+// }
 
 .pipeline {
     width: 1000px;
@@ -381,30 +403,30 @@ export default {
 
             .progress_pos8 {
                 position: absolute;
-                left: 62px;
-                top: 360px;
-                width: 50px;
+                left: 61px;
+                top: 362px;
+                width: 52px;
             }
 
             .progress_pos9 {
                 position: absolute;
-                left: 232px;
-                top: 360px;
-                width: 50px;
+                left: 231px;
+                top: 362px;
+                width: 52px;
             }
 
             .progress_pos10 {
                 position: absolute;
-                left: 402px;
-                top: 360px;
-                width: 50px;
+                left: 401px;
+                top: 362px;
+                width: 52px;
             }
 
             .progress_pos11 {
                 position: absolute;
-                left: 572px;
-                top: 360px;
-                width: 50px;
+                left: 571px;
+                top: 362px;
+                width: 52px;
             }
 
             .progress_pos12 {

ruoyi-ui/src/views/dcs/eqHome/eq40.vue

@@ -4,8 +4,11 @@
             <div class="pipeline_module">
                 <div class="tanks">
                     <!-- 罐体 -->
-                    <dv-percent-pond v-for="(index) in 10" :key="index" class="vertical_pond"
-                        :config="{ value: pondValue, lineDash }" style="width:120px;height:60px;" />
+                     <div v-for="(index) in 10" :key="index"  @click="handleClickTank" > 
+                        <dv-percent-pond  class="vertical_pond"
+                        :config="{ value: pondValue, lineDash }" style="width:120px;height:60px;"
+                        ></dv-percent-pond>
+                     </div>
                 </div>
                 <!-- 蓝色管道 -->
                 <div class="progress_blue">
@@ -293,13 +296,19 @@ export default {
         // this.addWater();
     },
     methods: {
+        //点击罐体事件
+        handleClickTank() {
+            // console.log('点击罐体');
+            //跳转到四罐体页面，携带当前页面的阀门状态
+            this.$router.push({ name: 'eq4', query: { upInWaterState: this.upInWaterState, downInWaterState: this.downInWaterState, outWaterState: this.outWaterState, upInGasState: this.upInGasState, downInGasState: this.downInGasState } });
+        },
         //水量增加
         addWater() {
             this.clearWaterInterval();
             this.interval = setInterval(() => {
-                if(this.pondValue < 100){
+                if (this.pondValue < 100) {
                     this.pondValue += 1;
-                }else{
+                } else {
                     this.pondValue = 0;
                 }
             }, 100);
@@ -308,9 +317,9 @@ export default {
         reduceWater() {
             this.clearWaterInterval();
             this.interval = setInterval(() => {
-                if(this.pondValue > 0){
+                if (this.pondValue > 0) {
                     this.pondValue -= 1;
-                }else{
+                } else {
                     this.pondValue = 100;
                 }
             }, 100);
@@ -410,10 +419,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.page {
-    width: 1920px;
-    height: 1080px;
-}
+// .page {
+//     width: 1920px;
+//     height: 1080px;
+// }
 
 .pipeline {
     width: 1000px;

ruoyi-ui/src/views/dcs/eqHome/index.vue

@@ -52,7 +52,15 @@
             </div>
           </div>
           <div v-if="selectedNumIndex == 0" class="selectedNum0">
-            <EqInfoComponent />
+            <!-- 顶部按钮 -->
+            <div class="flex-row self-start section_4 ml-11">
+              <el-button v-for="(btnName, index) in buttonArr1" :key="index"
+                :class="selectedBtnIndex === index ? 'btn2_selected' : 'btn2_default'" @click="selectBtn(index)">
+                {{ btnName }}
+              </el-button>
+            </div>
+            <!-- <EqInfoComponent /> -->
+            <router-view/>
           </div>
           <div v-if="selectedNumIndex == 3" class="flex-col">
             <!-- 顶部按钮 -->
@@ -1386,9 +1394,12 @@ export default {
   width: 1000px;
   /* padding: 5.43rem 6.56rem 6.5rem; */
   background-color: #082a4e;
-  /* height: 46.25rem; */
-  padding: 55px;
+  margin-top: 10px;
   border: solid 0.063rem #28b9ff;
+  .section_4{
+    margin-left: 70px;
+    width: 900px;
+  }
 }
 
 .border_2 {