详情页

gaosp

2024-01-21 3ac87c86469fbd7277b5cf3befa9b99cb886c3e7

详情页

 src/components/nav.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,33 @@
<!--
 * @Date: 2024-01-21 15:41:42
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-21 15:48:30
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/components/nav.vue
-->
<template>
    <div class="nav">
        <span>
            è½¦é—´åˆ—表 / 2厂 / YYYYYYYYss
        </span>
        <slot></slot>
    </div>
</template>
<script>
    export default {

    }
</script>
<style lang="scss" scoped>
    .nav {
        display: flex;
        padding: 0 20px;
        span {
            font-size: 16px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            padding: 5px 0;
            line-height: 22px;
        }
    }
</style>

 src/container/mapPreviewDetail/img/circle.png

 src/container/mapPreviewDetail/img/jq.png

 src/container/mapPreviewDetail/img/left_1.png

 src/container/mapPreviewDetail/img/left_2.png

 src/container/mapPreviewDetail/img/right_1.png

 src/container/mapPreviewDetail/img/right_2.png

 src/container/mapPreviewDetail/img/right_3.png

 src/container/mapPreviewDetail/img/sd.png

 src/container/mapPreviewDetail/img/yq.png

 src/container/mapPreviewDetail/index.vue

@@ -1,28 +1,162 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 19:36:45
 * @LastEditTime: 2024-01-21 16:44:56
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreviewDetail/index.vue
-->
<template>
    <div class="workshop">
        <div class="nav">
            è½¦é—´åˆ—表 / 2厂 / YYYYYYYYss
            <span @click="back">返回车间地图</span>
        </div>
        <Nav :name="name">
            <template>
                <span class="back" @click="back">
                    è¿”回车间地图
                </span>
            </template>
        </Nav>
        <div class="workshop-box">
            <div class="left">1</div>
            <div class="center">2</div>
            <div class="right">3</div>
            <div class="left">
                <div class="left_1">
                    <div>
                        <span>65%</span>
                        <span>开机运行率</span>
                    </div>
                    <div>
                        <span>55%</span>
                        <span>能力利用率</span>
                    </div>
                </div>
                <div class="left_2 table">
                    <el-table stripe :data="tableData" v-loading="loading" style="width: 100%;margin-top: 20px;">
                        <el-table-column prop="date" label="è½´" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="坐标" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="扭矩">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="left_2 table">
                    <el-table stripe :data="tableData" v-loading="loading" style="width: 100%;margin-top: 20px;">
                        <el-table-column prop="date" label="è½´" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="坐标" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="扭矩">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="center">
                <div class="center-top">
                    <div>
                        <span class="zz"></span>
                        <span class="name">主轴负载</span>
                    </div>
                    <div>
                        <span class="zz"></span>
                        <span class="name">主轴倍率</span>
                    </div>
                    <div>
                        <span class="zz"></span>
                        <span class="name">进给倍率</span>
                    </div>
                </div>
                <div class="center-bottom">
                    <img src="./img/jq.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="right_1">
                    <p>工段: 204</p>
                    <p>名称: YKXXXXX</p>
                    <ul>
                        <li>
                            <img src="./img/sd.png" alt="">
                            <div>
                                <p>1223秒</p>
                                <p>运行时间</p>
                            </div>
                        </li>
                        <li>
                            <img src="./img/sd.png" alt="">
                            <div>
                                <p>1223秒</p>
                                <p>运行时间</p>
                            </div>
                        </li>
                        <li>
                            <img src="./img/sd.png" alt="">
                            <div>
                                <p>1223秒</p>
                                <p>运行时间</p>
                            </div>
                        </li>
                        <li>
                            <img src="./img/sd.png" alt="">
                            <div>
                                <p>1223秒</p>
                                <p>运行时间</p>
                            </div>
                        </li>
                        <li>
                            <img src="./img/sd.png" alt="">
                            <div>
                                <p>1223秒</p>
                                <p>运行时间</p>
                            </div>
                        </li>
                    </ul>
                    <p>机床状态</p>
                    <p>待机原因</p>
                </div>
                <div class="right_2">
                    <p>加工数据</p>
                    <ul>
                        <li>
                            <span>程序名称</span>
                            <span>程序名称</span>
                        </li>
                        <li>
                            <span>程序名称</span>
                            <span>程序名称</span>
                        </li>
                        <li>
                            <span>程序名称</span>
                            <span>程序名称</span>
                        </li>
                        <li>
                            <span>程序名称</span>
                            <span>程序名称</span>
                        </li>
                        <li>
                            <span>程序名称</span>
                            <span>程序名称</span>
                        </li>
                        <li>
                            <span>程序名称</span>
                            <span>程序名称</span>
                        </li>
                    </ul>
                </div>
                <div class="right_3 table">
                    <el-table stripe :data="tableData" v-loading="loading" style="width: 100%;margin-top: 20px;">
                        <el-table-column prop="date" label="报警号" width="180">
                        </el-table-column>
                        <el-table-column prop="name" label="报警内容" width="180">
                        </el-table-column>
                        <el-table-column prop="address" label="报警时间">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


import Nav from '@/components/nav'
export default {
    components: {
       
        Nav
    },
    computed: {
        
@@ -32,7 +166,7 @@
    },
    data() {
        return {
            
            name: '车间列表 / 2厂 / YYYYYYYYss'
        }
    },
    methods: {
@@ -46,11 +180,72 @@
}
</script>
<style lang="scss">
.left-select {
    .el-input__inner {
        background: #435F9E;
        color: #C6DCE0;
.table {
    .el-table::before {
        background-color: transparent;
    }

    .el-table th {
        color: #E6E5E5;
        background-color: #182D54;
        border-bottom: none;
    }

    .el-table {
        color: #E6E5E5;
        background: transparent;
        background-color: transparent;
        border-bottom: none;
        padding: 0;
    }

    .el-table__fixed-right::before,
    .el-table__fixed::before {
        background: transparent;
    }

    .el-table td,
    .el-table--striped .el-table__body tr.el-table__row--striped td,
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        color: #E6E5E5;
        border-bottom: none;
        background: transparent;
        background-color: transparent;
        // padding: 0;
    }

    .el-table tr {
        color: #E6E5E5;
        border-bottom: none;
        background: transparent;
        background-color: transparent;
        border-bottom: none;
        padding: 0;
    }

    .el-table tr.el-table__row--striped {
        background-color: #182D54 !important;

    }

    // .el-table__header {
    //     color: #E6E5E5;
    //     background: transparent;
    //     background-color: transparent;
    //     border-bottom: none;
    //     padding: 0;
    // }
    // .el-table__body-wrapper {
    //     color: #E6E5E5;
    //     background: transparent;
    //     background-color: transparent;
    //     border-bottom: none;
    //     padding: 0;
    // }
    .el-table__header-wrapper {
        border: none;
        border-bottom: none;
        padding: 0;
    }
}
</style>
@@ -59,24 +254,174 @@
    width: 100%;
    height: 100%;
    color: #FFF;
    .preview {

    .back {
        margin-left: auto;
        text-align: center;
        width: 92px;
        height: 28px;
        background: rgba(23, 38, 67, 0.6);
        border-radius: 50px;
        border: 1px solid #ddd;
        border-image: linear-gradient(130deg, rgba(255, 51, 51, 1), rgba(242, 191, 36, 1)) 1 1;
        ;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #F7F8FA;
        line-height: 22px;
        background: linear-gradient(130deg, #FF3333 0%, #F2BF24 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

    }

    .workshop-box {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        display: flex;

        .left {
            width: 462px;

            .left_1 {
                width: 100%;
                height: 251px;
                background: url('./img/left_1.png');
                display: flex;
                justify-content: space-around;
                align-items: center;

                &>div {
                    width: 189px;
                    height: 197px;
                    background: url('./img/circle.png');
                    position: relative;

                    span:first-child {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 46px;
                        font-weight: bold;
                        color: #C3E1E1;
                    }

                    span:last-child {
                        position: absolute;
                        left: 50%;
                        bottom: 20%;
                        transform: translate(-50%, -50%);
                        font-size: 18px;
                        color: #C3E1E1;
                    }
                }
            }

            .left_2 {
                margin-top: 16px;
                width: 100%;
                height: 324px;
                background: url('./img/left_2.png');
            }
        }

        .center {
            flex: 1 1 auto;

            .center-top {
                display: flex;
                justify-content: space-around;

                &>div {
                    position: relative;
                    width: 180px;
                    height: 180px;
                    background: url('./img/yq.png');

                    span.zz {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        width: 40%;
                        height: 2px;
                        margin-top: -2px;
                        transform: rotate(-220deg);
                        transform-origin: left center;
                        color: #fff;
                        background: #FFF;
                    }

                    span.name {
                        font-size: 18px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #C3E1E1;
                        position: absolute;
                        bottom: 0;
                        width: 100%;
                        text-align: center;
                    }
                }

                &>div:last-child {
                    span.zz {
                        transform: rotate(40deg);
                    }
                }
            }

            .center-bottom {
                margin-top: 50px;
                display: flex;
                justify-content: center;

                img {
                    width: 629px;
                    height: 648px;
                }
            }
        }

        .right {
            width: calc(100% - 194px);
            padding-top: 30px;
            flex: 0 1 auto;
            display: flex;
            flex-direction: column;
            width: 463px;

            .preview-map {
                margin-top: 20px;
                flex: 1 1 auto;
                overflow: hidden;
            .right_1 {
                width: 100%;
                height: 418px;
                background: url('./img/right_1.png');
                ul {
                    list-style: none;
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        display: flex;
            }
        }
    }

            .right_2 {
                margin-top: 16px;
                width: 100%;
                height: 208px;
                background: url('./img/right_2.png');
}
</style>

            .right_2 {
                margin-top: 16px;
                width: 100%;
                height: 208px;
                background: url('./img/right_2.png');
            }

            .right_3 {
                margin-top: 16px;
                width: 100%;
                height: 265px;
                background: url('./img/right_3.png');
            }
        }
    }
}</style>