fd_dwgz_zhyw/src/views/NewPages/expert-knowledge-base.vue

<template>
    <div class="expert-knowledge-base">
        <el-row :gutter="16" class="up-box">
            <el-col :span="16">
                <!-- 故障体系 -->
                <el-row>
                    <el-col :span="24">
                        <div class="ekb-box">
                            <el-row>
                                <el-col :span="24" class="i-panel-title">
                                    <span class="svg-icon svg-icon-sm svg-icon-gray-l">
                                        <svg-icon svgid="svg-ekb-warn" />
                                    </span>
                                    <span class="gray-l font-md mg-l-16">故障体系</span>
                                    <span class="font-num font-md float-right green">3347</span>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-scrollbar class="table">
                                        <table style="width:100%;" border="0" cellspacing="0">
                                            <tbody>
                                                <tr v-for="index of 6" :key="index">
                                                    <td style="width:150px;" class="gray-l">
                                                        MG01_01
                                                    </td>
                                                    <td class="green num" style="width:350px;">
                                                        1234.56
                                                    </td>
                                                    <td style="width:600px;">
                                                        <div class="percent-item gray-l">
                                                            完成度
                                                            <div class="percent-bar" style="">
                                                                <div class="percent-value" style="width:80%"></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span class="perent-num">80%</span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </el-scrollbar>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
                <!-- 预警知识 -->
                <el-row class="mg-t-16">
                    <el-col :span="24">
                        <div class="ekb-box">
                            <el-row>
                                <el-col :span="24" class="i-panel-title">
                                    <span class="svg-icon svg-icon-sm svg-icon-gray-l">
                                        <svg-icon svgid="svg-ekb-warning" />
                                    </span>
                                    <span class="gray-l font-md mg-l-16">预警知识</span>
                                    <span class="font-num font-md float-right green">3347</span>
                                </el-col>
                            </el-row>
                            <el-row class="mg-t-16" :gutter="10">
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-generator" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">发电机</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-gear-box" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">齿轮箱</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-spindle" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">主轴</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-variable-pitch" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">变桨</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="mg-t-16" :gutter="10">
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-yaw" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">偏航</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-cabin" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">机舱</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-variable-frequency" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">变频</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="warning-item">
                                        <div class="warning-icon-box">
                                            <div class="warning-icon">
                                                <span class="svg-icon svg-icon-warning svg-icon-gray-l">
                                                    <svg-icon svgid="svg-ekb-master" />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="warning-info">
                                            <div class="warning-name gray-l">主控</div>
                                            <div class="warning-count green font-num">9527</div>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <!-- 特征参数 -->
            <el-col :span="8">
                <div class="ekb-box">
                    <el-row>
                        <el-col :span="24" class="i-panel-title">
                            <span class="svg-icon svg-icon-sm svg-icon-gray-l">
                                <svg-icon svgid="svg-ekb-terminal" />
                            </span>
                            <span class="gray-l font-md mg-l-16">特征参数</span>
                            <span class="font-num font-md float-right green">3347</span>
                        </el-col>
                    </el-row>
                    <el-row class="mg-t-16" :gutter="16">
                        <el-col :span="12">
                            <div class="characteristic-parameters-item">
                                <div class="characteristic-parameters-icon">
                                    <span class="svg-icon svg-icon-size-icon svg-icon-color-icon">
                                        <svg-icon svgid="svg-ekb-rank" />
                                    </span>
                                </div>
                                <div class="characteristic-parameters-name">基于数据统计</div>
                                <div class="characteristic-parameters-count font-num green">9</div>
                                <div class="characteristic-parameters-back">
                                    <span class="svg-icon svg-icon-size-back svg-icon-color-back">
                                        <svg-icon svgid="svg-ekb-rank" />
                                    </span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="characteristic-parameters-item">
                                <div class="characteristic-parameters-icon">
                                    <span class="svg-icon svg-icon-size-icon svg-icon-color-icon">
                                        <svg-icon svgid="svg-ekb-neural-network" />
                                    </span>
                                </div>
                                <div class="characteristic-parameters-name">神经网络整理</div>
                                <div class="characteristic-parameters-count font-num green">95</div>
                                <div class="characteristic-parameters-back">
                                    <span class="svg-icon svg-icon-size-back svg-icon-color-back">
                                        <svg-icon svgid="svg-ekb-neural-network" />
                                    </span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="mg-t-16" :gutter="16">
                        <el-col :span="12">
                            <div class="characteristic-parameters-item">
                                <div class="characteristic-parameters-icon">
                                    <span class="svg-icon svg-icon-size-icon svg-icon-color-icon">
                                        <svg-icon svgid="svg-ekb-document" />
                                    </span>
                                </div>
                                <div class="characteristic-parameters-name">文档整理</div>
                                <div class="characteristic-parameters-count font-num green">952</div>
                                <div class="characteristic-parameters-back">
                                    <span class="svg-icon svg-icon-size-back svg-icon-color-back">
                                        <svg-icon svgid="svg-ekb-document" />
                                    </span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="characteristic-parameters-item">
                                <div class="characteristic-parameters-icon">
                                    <span class="svg-icon svg-icon-size-icon svg-icon-color-icon">
                                        <svg-icon svgid="svg-ekb-experts" />
                                    </span>
                                </div>
                                <div class="characteristic-parameters-name">专家知识分析</div>
                                <div class="characteristic-parameters-count font-num green">9527</div>
                                <div class="characteristic-parameters-back">
                                    <span class="svg-icon svg-icon-size-back svg-icon-color-back">
                                        <svg-icon svgid="svg-ekb-experts" />
                                    </span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-row class="mg-t-16 down-box" :gutter="8">
            <el-col :span="8">
                <div class="ekb-box q-box-p">
                    <el-row>
                        <el-col :span="24" class="i-panel-title">
                            <span class="svg-icon svg-icon-sm svg-icon-gray-l">
                                <svg-icon svgid="svg-ekb-terminal" />
                            </span>
                            <span class="gray-l font-md mg-l-16">排查、检修方案</span>
                            <span class="font-num font-md float-right green">3347</span>
                        </el-col>
                    </el-row>
                    <el-row class="q-box">
                        <el-col :span="24">
                            <div class="circle-items">
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="ekb-box q-box-p">
                    <el-row>
                        <el-col :span="24" class="i-panel-title">
                            <span class="svg-icon svg-icon-sm svg-icon-gray-l">
                                <svg-icon svgid="svg-ekb-terminal" />
                            </span>
                            <span class="gray-l font-md mg-l-16">排查、检修方案</span>
                            <span class="font-num font-md float-right green">3347</span>
                        </el-col>
                    </el-row>
                    <el-row class="q-box">
                        <el-col :span="24">
                            <div class="circle-items">
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="ekb-box q-box-p">
                    <el-row>
                        <el-col :span="24" class="i-panel-title">
                            <span class="svg-icon svg-icon-sm svg-icon-gray-l">
                                <svg-icon svgid="svg-ekb-terminal" />
                            </span>
                            <span class="gray-l font-md mg-l-16">排查、检修方案</span>
                            <span class="font-num font-md float-right green">3347</span>
                        </el-col>
                    </el-row>
                    <el-row class="q-box">
                        <el-col :span="24">
                            <div class="circle-items">
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                                <div class="circle-item">
                                    <div class="inner">
                                        <div class="text">健康评价</div>
                                        <div class="value">29</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SvgIcon from "@com/coms/icon/svg-icon.vue";
export default {
    setup() {},
    components: { SvgIcon },
    data() {
        return {};
    },
    created() {},
};
</script>

<style lang="less">
.expert-knowledge-base {
    .svg-icon-sm {
        width: 20px;
        height: 16px;
        line-height: 1;

        svg {
            width: 20px;
            height: 16px;
        }
    }

    .svg-icon-size-icon {
        width: 26px;
        height: 26px;
        line-height: 1;

        svg {
            width: 26px;
            height: 26px;
        }
    }

    .svg-icon-color-icon {
        svg {
            use {
                fill: #b9bfc17f;
            }
        }
    }

    .svg-icon-size-back {
        width: 110px;
        height: 110px;
        line-height: 1;

        svg {
            width: 110px;
            height: 110px;
        }
    }

    .svg-icon-color-back {
        svg {
            use {
                fill: #60676933;
            }
        }
    }

    .svg-icon-warning {
        width: 24px;
        height: 24px;
        line-height: 1;

        svg {
            width: 24px;
            height: 24px;
        }
    }

    .font-md {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
    }

    .float-right {
        float: right;
        margin-left: auto;
    }

    .el-col {
        padding: 0;
    }

    .up-box {
        height: 650px;
        overflow: hidden;
    }

    .down-box {
        height: calc(100vh - 735px);
        overflow: hidden;
    }

    .i-panel-title {
        height: 33px;
        background: #53626833;
        padding: 8px 26px;
        display: flex;
        align-items: center;
    }

    .ekb-box {
        border: 1px solid #53626866;
    }

    .warning-item {
        background: #53626833;
        padding: 11px 0;
        display: flex;

        .warning-icon-box {
            width: 116px;
            height: 148px;
            border-right: 2px dotted #b9bfc133;
            display: flex;
            align-items: center;
            justify-content: center;

            .warning-icon {
                width: 56px;
                height: 56px;
                border-radius: 50%;
                border: 1px solid #b9bfc17f;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .warning-info {
            padding: 43px 0 0 30px;

            .warning-name {
                font-size: 20px;
                font-weight: 400;
                line-height: 1;
            }

            .warning-count {
                font-size: 30px;
                font-weight: 400;
                line-height: 1;
                margin-top: 22px;
            }
        }
    }

    .characteristic-parameters-item {
        background: #53626833;
        padding: 36px 0 0 36px;
        position: relative;
        height: 294px;

        .characteristic-parameters-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 1px solid #b9bfc17f;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .characteristic-parameters-name {
            margin-top: 30px;
            font-size: 20px;
            font-weight: 400;
            color: #b9bfc1;
            line-height: 1;
        }

        .characteristic-parameters-count {
            margin-top: 20px;
            font-weight: 400;
            line-height: 1;
            font-size: 30px;
        }

        .characteristic-parameters-back {
            width: 110px;
            height: 110px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }

    .table {
        height: 198px;

        tbody {
            tr:nth-child(2n) td {
                background-color: fade(@gray, 20%);

                &.item {
                    background-color: transparent;
                }
            }
        }

        td {
            color: @gray;
            text-align: center;
            height: 26px;
            line-height: 26px;
            font-size: 12px;

            &.gray-l {
                color: @gray-l;
            }

            &.green {
                color: @green;
            }

            &.num {
                font-family: @font-family-num;
            }
        }

        .percent-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 31px;

            .percent-bar {
                height: 12px;
                width: 430px;
                background: transparent;
                border: 1px solid @gray;
                margin-left: 16px;

                .percent-value {
                    height: calc(100% - 4px);
                    background: @green;
                    margin: 2px;
                }
            }
        }

        .perent-num {
            color: @green;
            margin-left: 16px;
            font-family: @font-family-num;
        }
    }

    .q-box-p {
        height: 100%;

        .q-box {
            height: calc(100% - 33px);
        }
    }

    .circle-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;

        .circle-item {
            display: flex;
            flex: 0 0 146px;
            width: 146px;
            height: 146px;
            background: fade(@green, 10);
            border-radius: 50%;
            justify-content: center;
            align-items: center;

            .inner {
                width: 124px;
                height: 124px;
                border: 1px solid #05bb4c;
                border-radius: 50%;

                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                box-shadow: inset -15px 20px 30px -30px #05bb4c;

                .text {
                    color: @green;
                    font-size: 12px;
                    margin-bottom: 8px;
                }

                .value {
                    color: @white;
                    font-size: 34px;
                }
            }
        }
    }
}
</style>