<template>
    <div class="dcs">
        <!-- <div class="blur-background" /> -->
        <div class="eqData_title">
            <div class="eqData_title_center"> P2流程 </div>
        </div>
        <div class="flows_body">
            <!-- 左侧选择器 -->
            <div class="flows_body_left">
                <div class="left_selector">
                    <h5 class="mb-2">流程选择</h5>
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="1" text-color="#fff" @open="handleOpen" @close="handleClose">
                        <el-menu-item index="1">
                            <el-icon><icon-menu /></el-icon>
                            <span>P2工艺流程</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <el-icon><icon-menu /></el-icon>
                            <span>F工艺流程</span>
                        </el-menu-item>
                    </el-menu>
                </div>
            </div>
            <!-- 右侧流程图 -->
            <div class="flows_body_right">
                <div class="flow_arrow">
                    <el-progress :percentage="100" :stroke-width="15" striped :striped-flow="value1" :duration="10"
                        :show-text="false" class="flow_progress1" />
                </div>
                <div class="right_flow_top">
                    <!-- 单组设备框 -->
                    <div class="flow_single">
                        <div class="flow_single_title"> {{ flowData[0].name }} </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[0].devices[0].name }}
                            </div>
                            <div class="body_show">
                                <!-- <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i> -->
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>

                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[0].devices[1].name }}
                            </div>
                            <div class="body_show">
                                <!-- <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i> -->
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[0].devices[2].name }}
                            </div>
                            <div class="body_show">
                                <div class="body_show_value">
                                    {{ flowData[0].devices[2].value }}
                                </div>
                                <div class="body_show_unit"> {{ flowData[0].devices[2].unit }} </div>
                            </div>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> {{ flowData[1].name }} </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[1].devices[0].name }}
                            </div>
                            <div class="body_show">
                                <!-- <el-switch v-model="value1" /> -->
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[1].devices[1].name }}
                            </div>
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[1].devices[2].name }}
                            </div>
                            <div class="body_show">
                                <div class="body_show_value">
                                    {{ flowData[1].devices[2].value }}
                                </div>
                                <div class="body_show_unit"> {{ flowData[1].devices[2].unit }} </div>
                            </div>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> {{ flowData[2].name }} </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[2].devices[0].name }}
                            </div>
                            <div class="body_show">
                                <!-- <el-switch v-model="value1" /> -->
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[2].devices[1].name }}
                            </div>
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[2].devices[2].name }}
                            </div>
                            <div class="body_show">
                                <div class="body_show_value">
                                    {{ flowData[2].devices[2].value }}
                                </div>
                                <div class="body_show_unit"> {{ flowData[2].devices[2].unit }} </div>
                            </div>
                        </div>
                    </div>

                    <div class="flow_single">
                        <div class="flow_single_title"> {{ flowData[3].name }} </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[3].devices[0].name }}
                            </div>
                            <div class="body_show">
                                <!-- <el-switch v-model="value1" /> -->
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[3].devices[1].name }}
                            </div>
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[3].devices[2].name }}
                            </div>
                            <div class="body_show">
                                <div class="body_show_value">
                                    {{ flowData[3].devices[2].value }}
                                </div>
                                <div class="body_show_unit"> {{ flowData[3].devices[2].unit }} </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right_flow_middle">
                    <div class="flow_single">
                        <div class="flow_single_title"> {{ flowData[4].name }} </div>
                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[4].devices[0].name }}
                            </div>
                            <div class="body_show">
                                <!-- <el-switch v-model="value1" /> -->
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>

                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[4].devices[2].name }}
                            </div>
                            <div class="body_show">
                                <i class="icon iconfont icon-waterValve valve">
                                    <i class="icon iconfont icon-fengshan fan" :class="{ 'icon_fengshan_run': value1 }"
                                        @click="value1 = !value1"> </i>
                                </i>
                            </div>
                        </div>

                        <div class="flow_single_body">
                            <div class="body_name">
                                {{ flowData[4].devices[1].name }}
                            </div>
                            <div class="body_show">
                                <div class="body_show_value">
                                    {{ flowData[4].devices[1].value }}
                                </div>
                                <div class="body_show_unit"> {{ flowData[4].devices[1].unit }} </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue';
function handleOpen(key, keyPath) {
    console.log(key, keyPath);
};

function handleClose(key, keyPath) {
    console.log(key, keyPath);
};

const value1 = ref(false)
//数据初始化
const flowData = ref([
    {
        name: 'Y2',
        devices: [
            { name: '搅拌机', status: false },
            { name: '送料机', status: false },
            { name: '重量计', value: 50, unit: 'KG' },
        ],
    },
    {
        name: 'Y1',
        devices: [
            { name: '搅拌机', status: false },
            { name: '送料机', status: false },
            { name: '重量计', value: 50, unit: 'KG' },
        ],
    },
    {
        name: 'Y4',
        devices: [
            { name: '搅拌机', status: false },
            { name: '送料机', status: false },
            { name: '重量计', value: 50, unit: 'KG' },
        ],
    },
    {
        name: 'Y3',
        devices: [
            { name: '搅拌机', status: false },
            { name: '送料机', status: false },
            { name: '重量计', value: 50, unit: 'KG' },
        ],
    },
    {
        name: 'P2',
        devices: [
            { name: '搅拌机', status: false },
            { name: '重量计', value: 50, unit: 'KG' },
            { name: '输送泵', status: false },
        ],
    },
])

</script>

<style lang="scss" scoped>
#app {
    width: 1920px;
    height: 1080px;

    .dcs {
        width: 1920px;
        height: 1080px;
        background-color: #141414;
    }

    .eqData_title {
        background-image: url('@/assets/dcs/header.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 1919.5px;
        height: 74.5px;
        flex-shrink: 0;
        position: relative;

        .eqData_title_center {
            font-family: PangMenZhengDao;
            font-size: 36px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 7.2px;
            background: linear-gradient(180deg, #FFF 32.33%, #00ABFF 130.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            margin-top: 10px;
        }

        .eqData_title_right {
            position: absolute;
            right: 220px;
            top: 10px;
            display: inline-flex;
            padding: 4px 8px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            border-radius: 5px;
            background: #446094;

            .eqData_title_right_icon {
                width: 16px;
                height: 16px;
            }

            .eqData_title_right_input {
                width: 196px;
                border: none;
                background-color: transparent;
                color: #B4C7D9 !important;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            input:focus {
                outline: none;
            }

        }
    }

    .flows_body {
        display: flex;

        .flows_body_left {
            margin-left: 45px;
            width: 270px;
            height: 755px;
            flex-shrink: 0;
            border-radius: 4px;
            border: 1px solid rgba(37, 147, 228, 0.50);
            opacity: 0.9;
            background: rgba(9, 23, 50, 0.90);
            box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.20) inset;

            .left_selector {
                h5 {
                    color: cyan;
                    text-align: center;
                    font-size: larger;
                }

                :deep(.el-menu) {
                    border-right: none !important;
                    background-color: none !important;
                }
            }
        }

        .flows_body_right {
            // margin-left: 50px;
            width: 1350PX;
            border: 1px solid rgba(37, 147, 228, 0.5);
            box-shadow: 0px 0px 8.8px 3px rgba(126, 230, 246, 0.2) inset;
            margin: 10px 30px;
            padding: 15px;
            background-color: #0b172c;

            :deep(.flow_arrow) {

                .el-progress-bar__outer {
                    background-color: transparent !important;
                    /* 设置背景透明 */
                }

                .el-progress-bar__inner--striped {
                    background-image:
                        linear-gradient(45deg, transparent 50%, #141414 50%),
                        linear-gradient(135deg, transparent 50%, #141414 50%) !important;
                    background-size: 15px;
                }
            }

            .flow_arrow {
                position: relative;

                .flow_progress1 {
                    width: 100px !important;
                    position: absolute;
                    //顺时针旋转90度
                    transform: rotate(90deg);
                    top: 553px;
                    left: 577px;
                }
            }

            .right_flow_top {
                margin: auto;
                width: 1000px;
                border: solid 1px #72E0FF;
            }

            .right_flow_top,
            .right_flow_middle {
                display: flex;
                flex-wrap: wrap;

                .flow_single {
                    width: 245px;
                    height: 235px;
                    display: flex;
                    padding: 4px;
                    flex-direction: column;
                    align-items: center;
                    gap: 10px;
                    border-radius: 5px;
                    border: 1px solid #72E0FF;
                    margin: 10px 119px;
                    .flow_single_title {
                    display: flex;
                    padding: 4px 8px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    align-self: stretch;
                    // color: aliceblue;
                    color: #76E1FF;
                    font-size: 36px;
                    font-weight: bold;
                    // text-align: center;
                    border-radius: 0px 0px 5px 5px;
                    background: #192846;
                }

                .flow_single_body {
                    display: flex;
                    color: aliceblue;
                    align-items: center;
                    // justify-content: space-between;
                    width: -webkit-fill-available;

                    .body_name {
                        min-width: 90px;
                        color: #008BB1;
                        ;
                        font-family: OPPOSans;
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 600;
                        line-height: normal;
                        margin-left: 20px;
                    }

                    .body_show {
                        display: flex;
                        align-items: center;
                        margin-right: 45px;
                        gap: 5px;

                        .valve {
                            //银色
                            color: #C7D2E0;
                            font-size: 50px !important;
                            position: relative;
                            margin-left: 18px;

                            //风扇旋转
                            @keyframes rotate {
                                from {
                                    transform: rotate(0deg);
                                }

                                to {
                                    transform: rotate(360deg);
                                }
                            }

                            .fan {
                                color: #bdbb3b;
                                position: absolute;
                                // left: 32%;
                                // top: 45%;
                                // font-size: 20px !important;
                                left: 14%;
                                top: 31%;
                                font-size: 36px !important;
                            }

                            //运行
                            .icon_fengshan_run {
                                display: inline-block;
                                /* 让 transform 生效 */
                                animation: rotate 1s linear infinite;
                                color: #2fb31e;
                            }
                        }




                        :deep(.el-switch) {
                            .el-switch__label {
                                color: #FFF;
                            }

                            .el-switch__label.is-active {
                                color: var(--el-color-primary);
                            }

                            .el-switch__core {
                                height: 25px;
                                min-width: 50px;
                            }
                        }

                        .body_show_value {
                            display: flex;
                            width: 82px;
                            padding: 6px 0px;
                            justify-content: center;
                            align-items: flex-start;
                            gap: 10px;
                            border-radius: 3px;
                            border: 1px solid #B8CEE5;
                            // background: #EDF7FF;
                            color: #66ccff;
                        }

                        .body_show_unit {
                            margin-left: 10px;
                        }
                    }
                }
                }

                
            }

            .right_flow_middle {
                .flow_single {
                    margin: 100px auto 0;
                }
            }
        }
    }
}
</style>