车间图片

gaosp

2024-01-21 f307da0cf193416eb8c7a13630942e50b912e848

车间图片

 src/container/mapPreview/Map.vue

@@ -1,24 +1,22 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-20 21:04:26
 * @LastEditTime: 2024-01-21 22:36:40
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/mapPreview/Map.vue
-->
<template>
    <div class="map">
        <div class="map-container">
            <div class="table" :class="$route.name ==='preview' ? 'active' : ''" >
                <div @mouseenter="mouseenter" @mouseleave="mouseleave" :style="{width: (cols * height + 'px'),height: rows * height + 'px',marginLeft: -marginLeft + 'px'}">
                <div @mouseenter="mouseenter" @mouseleave="mouseleave"
                    :style="{ width: (cols * height + 'px'), height: rows * height + 'px', marginLeft: -marginLeft + 'px' }">
                    <table >
                        <tr v-for="(item, index) in map" :key="index">
                            <td v-if="v.rowspan !==0 && v.colspan!==0"
                            :class="{aisle: v.type === 1 }"
                            :width="v.colspan* height + 'px'"
                            :height="v.rowspan* height + 'px'"
                            v-for="v in item"
                            <td v-if="v.rowspan !== 0 && v.colspan !== 0" :class="{ aisle: v.type === 1 }"
                                :width="v.colspan * height + 'px'" :height="v.rowspan * height + 'px'" v-for="v in item"
                                :rowspan="v.rowspan" :colspan="v.colspan" :key="v.rowIndex + '-' + v.colIndex">
                                <Device @click.native="toDetail(v)" v-if="v.id" :id="v.id" style="width: 100%;height: 100%;" :deviceList="deviceList"
:plantDeviceList="plantDeviceList" ::info="info"></Device>
                                <Device @click.native="toDetail(v)" v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"
                                    :deviceList="deviceList" :plantDeviceList="plantDeviceList" ::info="info"></Device>
                            </td>
                        </tr>
                    </table>
@@ -26,7 +24,6 @@
            </div>
        </div>
    </div>
    
</template>
<script>
let timer;
@@ -144,6 +141,7 @@
            clearTimeout(timer)
        },
        mouseleave () {
            if (this.move){
            let {width} = document.querySelector('.table div').getBoundingClientRect()
            let {width: tableW} = document.querySelector('.table').getBoundingClientRect()
            if (width > tableW) {
@@ -152,6 +150,7 @@
                this.moveFn()
            } else {
                this.leftMax = 0
                }
            }
        },
        toDetail (v) {
@@ -162,33 +161,37 @@
                }
            })
        },
    },
    }
}
</script>
<style lang="scss" scoped>

@keyframes move {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(-100%,0);
    }
}

.preview-container {
    .table {
        overflow: hidden;
        overflow-y: auto;
        // margin-left: 100%;
    }

    .table div {
        // animation: move 12s infinite alternate;
    }
}

.map {
    width: 100%;
    height: 100%;
    position: relative;

    .map-container {
        width: 100%;
        height: 100%;
@@ -209,6 +212,7 @@
        width: 80px;
        margin-inline: 10px;
    }

    .plant-name {
        width: 120px;
        margin-left: auto;
@@ -230,6 +234,7 @@
    // left: 100%;
    // animation: move 6s infinite alternate;
}

.table {
    // margin-top: 10px;
    // display: flex;
@@ -238,18 +243,20 @@
    height: 100%;
    position: relative;
    overflow-x: scroll;
    & > div {
        
    }
    &>div {}

    .table-action {
        position: fixed;
        z-index: 999;
        color: #fff;
        width: 100px;

        div {
            margin-top: 4px;
            cursor: pointer;
        }

        div:hover {
            color: #68D9FF;
        }
@@ -262,6 +269,7 @@
        // word-wrap: break-word;
        overflow: hidden;
        border-radius: 10px;

        // box-sizing: border-box;
        td {
            // width: 50px;
@@ -270,16 +278,19 @@
            border: 1px solid #1662DB;
            vertical-align: middle;
            text-align: center;

            & > img {
                width: 20px;
                height: 20px;
                cursor: pointer;
            }

            .machine {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;

                & > p {
                    margin-top: 20px;
                    color: #E9FFFF;
@@ -289,6 +300,7 @@
                    -webkit-text-fill-color: transparent;
                    text-align: center;
                }

                & > div {
                    flex: 1 1 auto;
                    margin-top: 20px;
@@ -297,6 +309,7 @@
                    margin-bottom: 20px;
                    
                    overflow: hidden;

                    .img {
                        width: 50%;
                        height: 100%;
@@ -304,6 +317,7 @@
                        border: 1px solid #444C55;
                        border-radius: 10px;
                        position: relative;

                        img {
                            position: absolute;
                            top: 50%;
@@ -312,6 +326,7 @@
                            width: 80%;
                        }
                    }

                    ul {
                        flex: 1 1 auto;
                        height: 100%;
@@ -321,18 +336,23 @@
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-around;

                        li {
                            width: 100%;
                            display: flex;
                            font-size: 12px;
                            align-items: center;

                            & > div {
                                margin-left: 20px;;
                                margin-left: 20px;
                                ;
                            }

                            p {
                                color: #E9FFFF;
                                text-shadow: 0px 1px 11px #549BD4;
                            }

                            img {
                                width: 40px;
                                height: 40px;
@@ -343,33 +363,39 @@
                
            }
        }

        td.active {
            background: #68D9FF!important;
        }

        td.aisle {
            // width: 20px;
            // height: 20px;
            background: #1662DB;

            div {
                // width: 20px;
                // height: 20px;
            }
        }

        td.device {
            // width: 400px;
            // height: 400px;
            overflow: hidden;

            div {
                // width: 400px;
            }
        }
    }
}

.grid {
    width: 100%;
    height: 100%;

    div {
        border: 1px solid red;
    }
}
</style>
}</style>

 src/container/workshop/device.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-13 20:46:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-21 21:46:33
 * @LastEditTime: 2024-01-21 22:33:42
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
-->
<template>
@@ -14,7 +14,7 @@
                <span class="img-status run" v-if="item.status === 'RUN'">运行</span>
                <span class="img-status standby" v-if="item.status === 'IDLE'">待机</span>
                <span class="img-status alerm" v-if="item.status === 'ALARM'">报警</span>
                <img src="./img/machine.png" alt="">
                <img :src="pic || devicePng" alt="">
            </div>
            <ul>
                <li>
@@ -44,6 +44,7 @@
</template>
<script>
import { getRequest, getUrl } from '@/api/Api'
import devicePng from './img/machine.png'
export default {
    props: {
        id: {
@@ -70,6 +71,7 @@
    },
    data() {
        return {
            devicePng,
            care: false,
            item: {}
        }
@@ -104,6 +106,26 @@

            if (machineName) {
                return machineName
            }
            return ''
        },
        pic() {
            let pic = ''
            if (this.info.pic) return this.info.pic
            if (this.deviceList.length > 0) {
                try {
                    pic = this.deviceList.find(item => item.machineId === this.id).pic
                } catch (error) {
                }
            }
            if (this.plantDeviceList.length > 0) {
                try {
                    pic = this.plantDeviceList.find(item => item.machineId === this.id).pic
                } catch (error) {
                }
            }
            if (pic) {
                return pic
            }
            return ''
        }
@@ -254,4 +276,5 @@
            }
        }
    }
}</style>
}
</style>