feat(eq4):吸附塔四罐页面

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

@@ -0,0 +1,615 @@
+<template>
+    <div class="page">
+        <div class="pipeline">
+            <div class="pipeline_module">
+                <div class="tanks">
+                    <dv-percent-pond class="vertical_pond pond_pos1" :config="{ value: pondValue, lineDash }"
+                        style="width:270px;height:100px;" />
+                    <dv-percent-pond class="vertical_pond pond_pos2" :config="{ value: pondValue, lineDash }"
+                        style="width:270px;height:100px;" />
+                    <dv-percent-pond class="vertical_pond pond_pos3" :config="{ value: pondValue, lineDash }"
+                        style="width:270px;height:100px;" />
+                    <dv-percent-pond class="vertical_pond pond_pos4" :config="{ value: pondValue, lineDash }"
+                        style="width:270px;height:100px;" />
+                </div>
+                <!-- 蓝色管道 -->
+                <div class="progress_blue">
+                    <b-progress :value="100" striped :animated="upInWaterState"
+                        class=" rotate_270 progress progress_pos1"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState"
+                        class=" rotate_270 progress progress_pos2"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState"
+                        class=" rotate_270 progress progress_pos3"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState"
+                        class=" rotate_270 progress progress_pos4"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState"
+                        class=" rotate_180 progress progress_pos5"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState"
+                        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"
+                        class=" rotate_180 progress progress_pos12"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState"
+                        class=" rotate_180 progress progress_pos34"></b-progress>
+
+                </div>
+                <!-- 黄色管道（气管） -->
+                <div class="progress_yellow">
+                    <b-progress :value="100" striped :animated="upInGasState"
+                        class=" rotate_270 progress progress_pos13"></b-progress>
+                    <b-progress :value="100" striped :animated="upInGasState"
+                        class=" rotate_270 progress progress_pos14"></b-progress>
+                    <b-progress :value="100" striped :animated="upInGasState"
+                        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="downInGasState"
+                        class=" rotate_270 progress progress_pos18"></b-progress>
+                    <b-progress :value="100" striped :animated="downInGasState"
+                        class=" rotate_90 progress progress_pos19"></b-progress>
+                    <b-progress :value="100" striped :animated="downInGasState"
+                        class=" rotate_90 progress progress_pos20"></b-progress>
+                    <b-progress :value="100" striped :animated="downInGasState"
+                        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>
+
+
+                </div>
+                <!-- 淡蓝色管道（上排水） -->
+                <div class="progress_blue_light">
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState"
+                        class=" rotate_90 progress progress_pos24"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState"
+                        class=" rotate_90 progress progress_pos25"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState"
+                        class=" rotate_90 progress progress_pos26"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState"
+                        class=" rotate_90 progress progress_pos27"></b-progress>
+                    <b-progress :value="100" striped :animated="upInWaterState || downWaterState" class="  progress progress_pos28"></b-progress>
+
+                </div>
+                <!-- 绿色管道（下排水） -->
+                <div class="progress_green">
+                    <b-progress :value="100" striped :animated="outWaterState"
+                        class=" rotate_270 progress progress_pos29"></b-progress>
+                    <b-progress :value="100" striped :animated="outWaterState"
+                        class=" rotate_270 progress progress_pos30"></b-progress>
+                    <b-progress :value="100" striped :animated="outWaterState"
+                        class=" rotate_270 progress progress_pos31"></b-progress>
+                    <b-progress :value="100" striped :animated="outWaterState"
+                        class=" rotate_270 progress progress_pos32"></b-progress>
+                    <b-progress :value="100" striped :animated="outWaterState"
+                        class=" rotate_180 progress progress_pos33"></b-progress>
+
+                </div>
+                <!-- 阀门 -->
+                <div class="valves">
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+
+
+export default {
+    data() {
+        return {
+            //水库容量
+            pondValue: 20,
+            lineDash: [100, 0],//罐内水位线条样式
+            interval: null,//定时器
+            // animate: true,//是否动画
+            //阀门状态数组
+            upInWaterState: false,//上进水阀门状态
+            downInWaterState: false,//下进水阀门状态
+            outWaterState: false,//出水阀门状态
+            upInGasState: false,//上进气阀门状态
+            downInGasState: false,//下进气阀门状态
+        };
+    },
+    mounted() {
+        // this.addWater(0);
+    },
+    methods: {
+        //水量增加
+        addWater() {
+            this.clearWaterInterval();
+            this.interval = setInterval(() => {
+                if(this.pondValue < 100){
+                    this.pondValue += 1;
+                }else{
+                    this.pondValue = 0;
+                }
+            }, 100);
+        },
+        //水量减少
+        reduceWater() {
+            this.clearWaterInterval();
+            this.interval = setInterval(() => {
+                if(this.pondValue > 0){
+                    this.pondValue -= 1;
+                }else{
+                    this.pondValue = 100;
+                }
+            }, 100);
+        },
+        //清除定时器
+        clearWaterInterval() {
+            clearInterval(this.interval);
+            this.interval = null;
+        },
+        
+    },
+};
+</script>
+
+<style scoped lang="scss">
+.page {
+    width: 1920px;
+    height: 1080px;
+}
+
+.pipeline {
+    width: 1000px;
+    height: 571px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+
+    .pipeline_module {
+        margin-top: 100px;
+        width: 700px;
+        height: 400px;
+        position: relative;
+
+        .tanks {
+
+            .vertical_pond {
+                z-index: 110;
+                transform: rotate(-90deg);
+                /* 逆时针旋转90度 */
+                transform-origin: 50% 50%;
+                /* 设置旋转中心点 */
+            }
+
+            ::v-deep .dv-percent-pond text {
+                display: none; //隐藏文字
+            }
+
+            .pond_pos1 {
+                left: -50px;
+                top: 155px;
+            }
+
+            .pond_pos2 {
+                left: 120px;
+                top: 55px;
+            }
+
+            .pond_pos3 {
+                left: 290px;
+                top: -45px;
+            }
+
+            .pond_pos4 {
+                left: 460px;
+                top: -145px;
+            }
+
+
+        }
+
+        //进度条（管道）
+        .progress {
+            height: 8px;
+            z-index: 10;
+        }
+
+        //旋转角度
+        .rotate_90 {
+            transform: rotate(90deg); //顺时针旋转90度
+            transform-origin: 50% 50%;
+        }
+
+        .rotate_180 {
+            transform: rotate(180deg); //顺时针旋转180度
+            transform-origin: 50% 50%;
+        }
+
+        .rotate_270 {
+            transform: rotate(-90deg); //顺时针旋转270度
+            transform-origin: 50% 50%;
+        }
+
+        // 蓝色管道
+        ::v-deep .progress_blue {
+            .progress-bar-striped {
+                background-image: linear-gradient(-45deg, transparent 50%, #0088ff 50%),
+                    linear-gradient(-135deg, transparent 50%, #0088ff 50%);
+                background-size: 15px;
+                // background-position: 0 0, 0.5rem 0.5rem;
+            }
+
+            .progress-bar {
+                background-color: #edeef0;
+            }
+        }
+
+
+        // 黄色管道
+        ::v-deep .progress_yellow {
+            .progress-bar-striped {
+                background-image: linear-gradient(-45deg, transparent 50%, #FFA500 50%),
+                    linear-gradient(-135deg, transparent 50%, #FFA500 50%);
+                background-size: 15px;
+                // background-position: 0 0, 0.5rem 0.5rem;
+            }
+
+            .progress-bar {
+                background-color: #edeef0 !important;
+            }
+        }
+
+        //淡蓝色管道
+        ::v-deep .progress_blue_light {
+            .progress-bar-striped {
+                background-image: linear-gradient(45deg,
+                        rgba(254, 254, 248, 1) 25%,
+                        transparent 25%,
+                        transparent 50%,
+                        rgba(254, 254, 248, 1) 50%,
+                        rgba(254, 254, 248, 1) 75%,
+                        transparent 75%,
+                        transparent) !important;
+                background-size: 1rem 1rem !important;
+            }
+
+            .progress-bar {
+                background-color: #60ccf0 !important;
+                /* 蓝色 */
+            }
+        }
+
+
+        // 绿色管道
+        ::v-deep .progress_green {
+            .progress-bar-striped {
+                background-image: linear-gradient(-45deg, transparent 50%, #3ea934 50%),
+                    linear-gradient(-135deg, transparent 50%, #3ea934 50%) !important;
+                background-size: 8px;
+                // background-position: 0 0, 0.5rem 0.5rem;
+            }
+
+            .progress-bar {
+                background-color: #edeef0 !important;
+            }
+
+        }
+
+        .valves {
+            .color_green {
+                color: greenyellow !important;
+            }
+
+            .valve {
+                color: #c4c6cc;
+                z-index: 110;
+            }
+
+            // 阀门定位
+
+        }
+
+
+        //管道定位
+        // 蓝色管道定位
+        .progress_blue {
+            .progress {
+                z-index: 20; //管道层级
+            }
+
+            .rotate_90 {
+                z-index: 21 !important; //管道层级
+            }
+
+            .progress_pos1 {
+                position: absolute;
+                left: 63px;
+                top: 42px;
+                width: 50px;
+            }
+
+            .progress_pos2 {
+                position: absolute;
+                left: 234px;
+                top: 42px;
+                width: 50px;
+            }
+
+            .progress_pos3 {
+                position: absolute;
+                left: 402px;
+                top: 42px;
+                width: 50px;
+            }
+
+            .progress_pos4 {
+                position: absolute;
+                left: 572px;
+                top: 42px;
+                width: 50px;
+            }
+
+            .progress_pos5 {
+                position: absolute;
+                left: 10px;
+                top: 20px;
+                width: 591px;
+            }
+
+            .progress_pos6 {
+                position: absolute;
+                left: -61px;
+                top: -1px;
+                width: 50px;
+            }
+
+            .progress_pos7 {
+                position: absolute;
+                left: -170px;
+                top: 200px;
+                width: 368px;
+            }
+
+            .progress_pos8 {
+                position: absolute;
+                left: 62px;
+                top: 360px;
+                width: 50px;
+            }
+
+            .progress_pos9 {
+                position: absolute;
+                left: 232px;
+                top: 360px;
+                width: 50px;
+            }
+
+            .progress_pos10 {
+                position: absolute;
+                left: 402px;
+                top: 360px;
+                width: 50px;
+            }
+
+            .progress_pos11 {
+                position: absolute;
+                left: 572px;
+                top: 360px;
+                width: 50px;
+            }
+
+            .progress_pos12 {
+                position: absolute;
+                left: 10px;
+                top: 383px;
+                width: 591px;
+            }
+
+            .progress_pos34 {
+                position: absolute;
+                left: -40px;
+                top: 20px;
+                width: 60px;
+            }
+
+
+
+
+
+        }
+
+        // 黄色管道定位
+        .progress_yellow {
+            .progress {
+                z-index: 10; //管道层级
+            }
+
+            .progress_pos13 {
+                position: absolute;
+                left: 82px;
+                top: 33px;
+                width: 70px;
+            }
+
+            .progress_pos14 {
+                position: absolute;
+                left: 252px;
+                top: 33px;
+                width: 70px;
+            }
+
+            .progress_pos15 {
+                position: absolute;
+                left: 422px;
+                top: 33px;
+                width: 70px;
+            }
+
+            .progress_pos16 {
+                position: absolute;
+                left: 592px;
+                top: 33px;
+                width: 70px;
+            }
+
+            .progress_pos17 {
+                position: absolute;
+                left: 113px;
+                top: 1px;
+                width: 565px;
+            }
+
+            .progress_pos18 {
+                position: absolute;
+                left: 468px;
+                top: 204px;
+                width: 410px;
+            }
+
+            .progress_pos19 {
+                position: absolute;
+                left: 529px;
+                top: 371px;
+                width: 74px;
+            }
+
+            .progress_pos20 {
+                position: absolute;
+                left: 363px;
+                top: 371px;
+                width: 74px;
+            }
+
+            .progress_pos21 {
+                position: absolute;
+                left: 192px;
+                top: 371px;
+                width: 74px;
+            }
+
+            .progress_pos22 {
+                position: absolute;
+                left: 24px;
+                top: 371px;
+                width: 74px;
+            }
+
+            .progress_pos23 {
+                position: absolute;
+                left: 58px;
+                top: 405px;
+                width: 618px;
+            }
+
+            .progress_pos35 {
+                position: absolute;
+                left: 670px;
+                top: 1px;
+                width: 100px;
+            }
+
+
+
+        }
+
+        //淡蓝色管道定位
+        .progress_blue_light {
+            .progress {
+                z-index: 30; //管道层级
+            }
+
+            .progress_pos24 {
+                position: absolute;
+                left: 13px;
+                top: 23px;
+                width: 90px;
+            }
+
+            .progress_pos25 {
+                position: absolute;
+                left: 184px;
+                top: 23px;
+                width: 90px;
+            }
+
+            .progress_pos26 {
+                position: absolute;
+                left: 354px;
+                top: 23px;
+                width: 90px;
+            }
+
+            .progress_pos27 {
+                position: absolute;
+                left: 524px;
+                top: 23px;
+                width: 90px;
+            }
+
+            .progress_pos28 {
+                position: absolute;
+                left: -3px;
+                top: -18px;
+                width: 576px;
+            }
+
+
+
+        }
+
+        .progress_green {
+            .progress {
+                z-index: 40; //管道层级
+            }
+
+            .progress_pos29 {
+                position: absolute;
+                left: 62px;
+                top: 411px;
+                width: 50px;
+            }
+
+            .progress_pos30 {
+                position: absolute;
+                left: 232px;
+                top: 411px;
+                width: 50px;
+            }
+
+            .progress_pos31 {
+                position: absolute;
+                left: 402px;
+                top: 411px;
+                width: 50px;
+            }
+
+            .progress_pos32 {
+                position: absolute;
+                left: 572px;
+                top: 411px;
+                width: 50px;
+            }
+
+            .progress_pos33 {
+                position: absolute;
+                left: 84px;
+                top: 433px;
+                width: 688px;
+            }
+
+
+        }
+
+    }
+
+}
+</style>