feat(eq40): 阀门控制管道流水动画

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

@@ -3,230 +3,278 @@
         <div class="pipeline">
             <div class="pipeline_module">
                 <div class="tanks">
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
-                    <dv-percent-pond class="vertical_pond" :config="ponds[0]" style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
+                    <dv-percent-pond class="vertical_pond" :config="{ value: pond[0], lineDash }"
+                        style="width:120px;height:60px;" />
                 </div>
                 <!-- 蓝色管道 -->
                 <div class="progress_blue">
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_180 progress progress_pos1"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_90 progress progress_pos2"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos3"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos4"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos5"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos6"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos7"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos8"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_180 progress progress_pos9"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos10"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos11"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos12"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos13"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState"
                         class=" rotate_270 progress progress_pos14"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_180 progress progress_pos15"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInWaterState"
                         class=" rotate_270 progress progress_pos16"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInWaterState"
                         class=" rotate_180 progress progress_pos17"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos18" :class="{'rotate_270': valveStateArr[9], 'progress_green': valveStateArr[9]}"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos19" :class="{'rotate_270': valveStateArr[9], 'progress_green': valveStateArr[9]}"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos20" :class="{'rotate_270': valveStateArr[9], 'progress_green': valveStateArr[9]}"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos21" :class="{'rotate_270': valveStateArr[9], 'progress_green': valveStateArr[9]}"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos22" :class="{'rotate_270': valveStateArr[9], 'progress_green': valveStateArr[9]}"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos18"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos19"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos20"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos21"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos22"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState"
                         class=" rotate_90 progress progress_pos23"></b-progress>
-                    <b-progress :value="100" striped :animated="animate" class="  progress progress_pos24"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos25"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos26"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos27"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos28"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
-                        class=" rotate_90 progress progress_pos29"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInWaterState"
+                        class="  progress progress_pos24"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos25"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos26"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos27"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos28"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="downInWaterState || outWaterState"
+                        class=" rotate_90 progress progress_pos29"
+                        :class="{ 'rotate_270': outWaterState, 'progress_green': outWaterState }"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_180 progress progress_pos91"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_180 progress progress_pos92"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_180 progress progress_pos93"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_180 progress progress_pos94"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_180 progress progress_pos95"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_270 progress progress_pos96"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class="rotate_90 progress progress_pos97"></b-progress>
 
                 </div>
                 <!-- 黄色管道（气管） -->
                 <div class="progress_yellow">
-                    <b-progress :value="100" striped :animated="animate" class=" progress progress_pos30"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
+                        class=" progress progress_pos30"></b-progress>
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos31"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos32"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos33"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos34"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos35"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos36"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_270 progress progress_pos37"></b-progress>
-                    <b-progress :value="100" striped :animated="animate" class=" progress progress_pos38"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
+                        class=" progress progress_pos38"></b-progress>
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos39"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos40"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos41"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos42"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInGasState"
                         class=" rotate_270 progress progress_pos43"></b-progress>
-                    <b-progress :value="100" striped :animated="animate" class=" progress progress_pos44"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
+                        class=" progress progress_pos44"></b-progress>
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos45"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos46"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos47"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos48"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos49"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos50"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_180 progress progress_pos51"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos52"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos53"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos54"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos55"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="downInGasState"
                         class=" rotate_90 progress progress_pos56"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[16] || valveStateArr[17]"
+                    <b-progress :value="100" striped :animated="upInGasState || downInGasState"
                         class=" progress progress_pos98"></b-progress>
                 </div>
                 <!-- 淡蓝色管道（上排水） -->
                 <div class="progress_blue_light">
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" progress rotate_90 progress_pos57"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos58"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos59"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos60"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos61"></b-progress>
-                    <b-progress :value="100" striped :animated="animate" class="  progress progress_pos62"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
+                        class="  progress progress_pos62"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_270 progress progress_pos63"></b-progress>
-                    <b-progress :value="100" striped :animated="animate" class="  progress progress_pos64"></b-progress>
-                    <b-progress :value="100" striped :animated="animate" class=" progress progress_pos65"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
+                        class="  progress progress_pos64"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
+                        class=" progress progress_pos65"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos66"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos67"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos68"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos69"></b-progress>
-                    <b-progress :value="100" striped :animated="animate"
+                    <b-progress :value="100" striped :animated="upInWaterState || downInWaterState"
                         class=" rotate_90 progress progress_pos70"></b-progress>
                 </div>
                 <!-- 绿色管道（下排水） -->
                 <div class="progress_green">
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class="rotate_270 progress progress_pos71"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos72"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos73"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos74"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos75"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos76"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos77"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos78"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" progress rotate_270 progress_pos79"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos80"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos81"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos82"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_270 progress progress_pos83"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_90 progress progress_pos84"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos85"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos86"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos87"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos88"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos89"></b-progress>
-                    <b-progress :value="100" striped :animated="valveStateArr[9]"
+                    <b-progress :value="100" striped :animated="outWaterState"
                         class=" rotate_180 progress progress_pos90"></b-progress>
 
                 </div>
                 <!-- 阀门 -->
                 <div class="valves">
                     <!-- 水阀门 -->
-                    <i v-for="(item, index) in 16" :key="index" :class="['iconfont', index < 2 ? 'icon-waterValve rotate_270' : 'icon-waterValve',
+                    <!-- <i v-for="(item, index) in 16" :key="index" :class="['iconfont', index < 2 ? 'icon-waterValve rotate_270' : 'icon-waterValve',
                         `valve valve_pos${index + 1}`, { 'color_green': valveStateArr[index] }]"
-                        @click="handleClick(index)"></i>
+                        @click="handleClick(index)"></i> -->
+                    <!-- 上进水阀门 -->
+                    <i class="iconfont icon-waterValve rotate_270 valve valve_pos1"
+                        :class="{ 'color_green': upInWaterState }" @click="handleClickWaterValve(1)"></i>
+                    <!-- 下进水阀门 -->
+                    <i class="iconfont icon-waterValve rotate_270 valve valve_pos2"
+                        :class="{ 'color_green': downInWaterState }" @click="handleClickWaterValve(2)"></i>
+                    <!-- 出水阀门 -->
+                    <i class="iconfont icon-waterValve valve valve_pos10" :class="{ 'color_green': outWaterState }"
+                        @click="handleClickWaterValve(0)"></i>
+                    <!-- 左6个水阀门 -->
+                    <i v-for="(item, index) in 6" :key="index + 2" class="iconfont icon-waterValve valve" :class="[
+                        `valve_pos${index + 3}`, { 'color_green': valveStateArr[index + 2] }]"
+                        @click="handleClick(index + 2)"></i>
+                    <!-- 上排水阀门 -->
+                    <i class="iconfont icon-waterValve valve valve_pos9" :class="{ 'color_green': valveStateArr[8] }"
+                        @click="handleClick(8)"></i>
+                    <!-- 右6个水阀门 -->
+                    <i v-for="(item, index) in 6" :key="index + 10" :class="['iconfont', 'icon-waterValve',
+                        `valve valve_pos${index + 11}`, { 'color_green': valveStateArr[index + 10] }]"
+                        @click="handleClick(index + 10)"></i>
                     <!-- 气阀门 -->
-                    <i v-for="(item, index) in 2" :key="index + 16" :class="['iconfont', index === 0 ? 'icon-gasValve' : 'icon-gasValve rotate_90',
-                        `valve valve_pos${index + 17}`, { 'color_green': valveStateArr[index + 16] }]"
-                        @click="handleClick(index + 16)"></i>
+                    <i v-for="(item, index) in 2" :key="index + 16"
+                        :class="['iconfont', index === 0 ? 'icon-gasValve' : 'icon-gasValve rotate_90',
+                            `valve valve_pos${index + 17}`, { 'color_green': index === 0 ? upInGasState : downInGasState }]"
+                        @click="handleClickGasValve(index)"></i>
                 </div>
                 <div class="meters">
                     <!-- 流量计 -->
@@ -235,7 +283,7 @@
             </div>
         </div>
     </div>
-   
+
 </template>
 
 <script>
@@ -244,49 +292,136 @@
 export default {
     data() {
         return {
-            ponds: [{ value: 20 }, { value: 30 }, { value: 50 }, { value: 0 }],
+            //水库容量
+            pond: [20, 30, 50, 0, 0, 0, 0, 0, 0, 0, 0],
+            lineDash: [100, 0],//罐内水位线条样式
+            interval: null,//定时器
             animate: true,//是否动画
-            valveState: false,
             //阀门状态数组
-            valveStateArr: [false, false, false, false, false, false, false, false, true, false,
-                false, false, false, false, false, false, false, false],
+            valveStateArr: Array(18).fill(false),
+            upInWaterState: false,//上进水阀门状态
+            downInWaterState: false,//下进水阀门状态
+            outWaterState: false,//出水阀门状态
+            upInGasState: false,//上进气阀门状态
+            downInGasState: false,//下进气阀门状态
         };
     },
     mounted() {
-        this.addWater(0);
+        // this.addWater(0);
     },
     methods: {
         //水量增加
         addWater(index) {
-            //定时器用setTimeout
-            setTimeout(() => {
-                if (this.ponds[index].value < 100) {
-                    this.$set(this.ponds, index, { value: this.ponds[index].value + 1 });
-                    this.addWater(index);
+            this.clearWaterInterval();
+            this.interval = setInterval(() => {
+                if (this.pond[index] < 100) {
+                    this.$set(this.pond, index, this.pond[index] + 1);
                 } else {
-                    this.$set(this.ponds, index, { value: 0 });
-                    this.addWater(index);
+                    this.pond[index] = 0;
                 }
             }, 100);
         },
         //水量减少
         reduceWater(index) {
-            //定时器用setTimeout
-            setTimeout(() => {
-                if (this.ponds[index].value > 0) {
-                    this.$set(this.ponds, index, { value: this.ponds[index].value - 1 });
-                    this.reduceWater(index);
+            this.clearWaterInterval();
+            this.interval = setInterval(() => {
+                if (this.pond[index] > 0) {
+                    this.$set(this.pond, index, this.pond[index] - 1);
+                } else {
+                    this.pond[index] = 100;
                 }
             }, 100);
         },
-        //阀门状态切换
-        toggleValveState() {
-            this.valveState = !this.valveState;
+        //清除定时器
+        clearWaterInterval() {
+            clearInterval(this.interval);
+            this.interval = null;
         },
-        //阀门点击事件
+        //阀门点击事件（暂时无用）
         handleClick(index) {
-            this.valveStateArr[index] = !this.valveStateArr[index];
-        }
+            this.$set(this.valveStateArr, index, !this.valveStateArr[index]);
+            // console.log(index);
+            // switch (index) {
+            //     //上进水，下进水和出水阀门
+            //     case 0:
+            //     case 1:
+            //     case 9:
+            //         if (!this.valveStateArr[index]) {//开阀门
+            //             // 关闭所有上进水、下进水和出水阀门，然后开启当前选择的阀门
+            //             [0, 1, 9].forEach(i => this.valveStateArr[i] = i === index);
+            //             break;
+            //         }
+            //     //上进气，下进气阀门
+            //     case 16:
+            //     case 17:
+            //         if (!this.valveStateArr[index]) {
+            //             [16, 17].forEach(i => this.valveStateArr[i] = i === index);
+            //             console.log(this.valveStateArr[index]);
+            //             break;
+            //         }
+            //     default:
+            //         console.log(index);
+            //         this.valveStateArr[index] = !this.valveStateArr[index];
+            //         console.log(this.valveStateArr[index]);
+            //         break;
+            // }
+            // if (this.valveStateArr[0] || this.valveStateArr[1]) {
+            //     this.addWater(0);
+            // }
+            // if (this.valveStateArr[9]) {
+            //     this.reduceWater(0);
+            // }
+
+        },
+        //水阀门点击事件
+        handleClickWaterValve(index) {
+            switch (index) {
+                case 0://出水阀门
+                    if (!this.outWaterState && (this.upInWaterState || this.downInWaterState)) {
+                        break
+                    }
+                    this.outWaterState = !this.outWaterState;
+                    this.reduceWater(0);
+                    break;
+                case 1://上进水阀门
+                    if (!this.upInWaterState && (this.downInWaterState || this.outWaterState)) {
+                        break
+                    }
+                    this.upInWaterState = !this.upInWaterState;
+                    this.addWater(0);
+                    break;
+                case 2://下进水阀门
+                    if (!this.downInWaterState && (this.upInWaterState || this.outWaterState)) {
+                        break
+                    }
+                    this.addWater(0);
+                    this.downInWaterState = !this.downInWaterState;
+                    break;
+            }
+            if(!this.outWaterState && !this.upInWaterState && !this.downInWaterState){
+                this.clearWaterInterval();
+            }
+
+        },
+        //气阀门点击事件
+        handleClickGasValve(index) {
+            switch (index) {
+                case 0://上进气阀门
+                    if (!this.upInGasState && this.downInGasState) {
+                        return
+                    }
+                    this.upInGasState = !this.upInGasState;
+                    break;
+                case 1://下进气阀门
+                    if (!this.downInGasState && this.upInGasState) {
+                        return
+                    }
+                    this.downInGasState = !this.downInGasState;
+                    break;
+            }
+        },
+
+
     },
 };
 </script>
@@ -738,38 +873,38 @@ export default {
 
             .progress_pos18 {
                 position: absolute;
-                top: 500px;
-                left: 55px;
-                width: 28px;
+                top: 502px;
+                left: 53px;
+                width: 32px;
             }
 
             .progress_pos19 {
                 position: absolute;
-                top: 500px;
-                left: 186px;
-                width: 28px;
+                top: 502px;
+                left: 184px;
+                width: 32px;
             }
 
             .progress_pos20 {
                 position: absolute;
-                top: 500px;
-                left: 314px;
-                width: 28px;
+                top: 502px;
+                left: 312px;
+                width: 32px;
 
             }
 
             .progress_pos21 {
                 position: absolute;
-                top: 500px;
-                left: 442px;
-                width: 28px;
+                top: 502px;
+                left: 440px;
+                width: 32px;
             }
 
             .progress_pos22 {
                 position: absolute;
-                top: 500px;
-                left: 569px;
-                width: 28px;
+                top: 502px;
+                left: 567px;
+                width: 32px;
             }
 
             .progress_pos23 {
@@ -1184,7 +1319,6 @@ export default {
         }
 
         .progress_green {
-            z-index: 40 !important; //管道层级
             .progress {
                 z-index: 40; //管道层级
             }