sis_zhfx/src/views/HealthControl/defect-elimination-tracking.vue

<template>
    <div class="defect-elimination-tracking" v-if="showMe">
        <div class="defect-elimination-tracking-close">
            <i class="el-icon el-icon-close" @click="close"></i>
        </div>
        <div class="header-tile-box">
            <div class="header-tile-h">
                <div class="header-box">
                    <img :src="header" class="header" />
                </div>
            </div>
            <div class="header-tile">
                <div class="info-form-box">
                    <div class="info-form">
                        <div class="info-form-label">检修人员：</div>
                        <div class="info-form-value">王义波</div>
                    </div>
                    <div class="info-form">
                        <div class="info-form-label">收缩血压：</div>
                        <div class="info-form-value">0</div>
                    </div>
                </div>
            </div>
            <div class="header-tile">
                <div class="info-form-box">
                    <div class="info-form">
                        <div class="info-form-label">工作时长：</div>
                        <div class="info-form-value">76.0分钟</div>
                    </div>
                    <div class="info-form">
                        <div class="info-form-label">舒张血压：</div>
                        <div class="info-form-value">0</div>
                    </div>
                </div>
            </div>
            <div class="header-tile">
                <div class="info-form-box">
                    <div class="info-form">
                        <div class="info-form-label">工作强度：</div>
                        <div class="info-form-value">高</div>
                    </div>
                    <div class="info-form">
                        <div class="info-form-label">心跳频率：</div>
                        <div class="info-form-value">0</div>
                    </div>
                </div>
            </div>
            <div class="header-tile">
                <div class="info-form-box">
                    <div class="info-form">
                        <div class="info-form-label">疲劳度：</div>
                        <div class="info-form-value">0</div>
                    </div>
                    <div class="info-form">
                        <div class="info-form-label">血压：</div>
                        <div class="info-form-value">0</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="det-chart-title">检修人员健康情况</div>
        <div class="det-chart-sub-title">工作期间检测值</div>
        <normal-line-chart class="det-chart" height="21.296vh" :showLegend="true" />
        <div class="det-chart-sub-title-big">专业技能:</div>
        <div class="det-chart-sub-title">电力类，机电类</div>
    </div>
</template>

<script>
import NormalLineChart from "@com/chart/line/normal-line-chart.vue";
export default {
    components: {
        NormalLineChart
    },
    data() {
        return {
            showMe: false,
            header: require("@assets/header.png"),
        };
    },
    // 函数
    methods: {
        show: function () {
            this.showMe = true;
        },
        close: function () {
            this.showMe = false;
        },
    },
};
</script>

<style lang="less">
.defect-elimination-tracking {
    position: absolute;
    width: 800px;
    height: 460px;
    top: calc(50% - 230px);
    left: calc(50% - 400px);
    background: rgba(18, 29, 28, 0.95);
    border: 1px solid rgba(5, 187, 76, 0.5);
    padding: 16px;

    .defect-elimination-tracking-close {
        position: absolute;
        top: 16px;
        right: 16px;
        cursor: pointer;

        i {
            font-size: 16px;
            color: #909399;
        }

        &:hover {
            i {
                color: @green;
            }
        }
    }

    .header-tile-box {
        display: flex;

        .header-tile-h {
            width: 54px;

            .header-box {
                width: 54px;
                height: 76px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #ffffff;

                .header {
                    width: 54px;
                }
            }
        }

        .header-tile {
            padding: 0 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .info-form-box {
                .info-form {
                    display: flex;

                    .info-form-label {
                        width: 80px;
                        font-size: @fontsize-s;
                        color: @gray-l;
                        text-align: right;
                    }

                    .info-form-value {
                        font-size: @fontsize-s;
                        color: @white;
                        line-height: 1.5;
                        margin-left: 8px;
                    }

                    +.info-form {
                        margin-top: 8px;
                    }
                }
            }
        }
    }
    
    .det-chart {
        width: 100%;
        height: 21.296vh;
    }

    .det-chart-title {
        text-align: center;
        font-size: @fontsize;
        color: @gray-l;
        margin-top: 16px;
    }

    .det-chart-sub-title {
        font-size: @fontsize-s;
        color: @gray-l;
        margin: 8px 0;
    }

    .det-chart-sub-title-big {
        font-size: @fontsize;
        color: @gray-l;
        margin: 16px 0 8px 0;
    }
}
</style>