更新地图

gaosp

2024-03-12 6b6a9ce33453a5ec9ca8346df39a7a610042424c

 src/container/workshop/device.vue

@@ -1,13 +1,13 @@
<!--
 * @Date: 2024-01-13 20:46:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-03-11 19:20:55
 * @LastEditTime: 2024-03-12 21:38:38
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
-->
<template>
    <div class="device-item">
    <div class="device-item" >
        <el-checkbox v-show="canconcern" class="care" v-model="concern" @change="change"></el-checkbox>
        <p>{{ machineName }}</p>
        <p class="device-item-title">{{ machineName }}</p>
        <div class="device-item-box" @click="toDetail">
            <div class="img">
                <span class="img-status" v-if="item.status === 'STOP'">停机</span>
@@ -45,6 +45,7 @@
<script>
import { getRequest, getUrl } from '@/api/Api'
import devicePng from './img/machine.png'
// import { transform } from 'babel-core'
export default {
    props: {
        canconcern: {
@@ -76,7 +77,7 @@
    data() {
        return {
            devicePng,
            scale: 1,
            scale: 'scale(1)',
            concern: false,
            item: {}
        }
@@ -139,11 +140,14 @@
    },
    mounted () {
        this.concern = !!this.info.concern
        console.log(this.$el.getBoundingClientRect().width,'/////',this.$el.getBoundingClientRect().width / 200)
        // console.log(this.$el.getBoundingClientRect(),'>>>>>>>')
        // this.scale = `scale(${Math.min(this.$el.getBoundingClientRect().width,this.$el.getBoundingClientRect().height) / 394})`
        // console.log(this.$el.parent().getBoundingClientRect().width,this.$el.parent().getBoundingClientRect().heightm,'/////',`transform:scale(${Math.min(this.$el.getBoundingClientRect().width,this.$el.getBoundingClientRect().height) / 394})`)
        this.$nextTick(() => {
            //if (this.$el.getBoundingClientRect().width <  400) {
                //this.$el.querySelector('.device-item-box').style = `transform:scale(${this.$el.getBoundingClientRect().width / 360})`
            //}
            if (this.$el) {
                
                // console.log('????',this.scale)
            }
        })
        
        
@@ -169,15 +173,20 @@
.device-item {
    width: 100%;
    height: 100%;
    max-width: 394px;
    max-height: 394px;
    // max-width: 394px;
    // max-height: 394px;
    border-radius: 10px;
    border: 1px solid #3C4249;
    padding: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    p {
    p  {
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    &-title {
        font-size: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
@@ -222,17 +231,19 @@
    }

    &>div.device-item-box {
        min-width: 100px;
        width: 100%;
        // min-width: 100px;
        flex: 1 1 auto;
        margin-top: 20px;
        // margin-top: 20px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        // margin-bottom: 20px;
        overflow: hidden;
        .img {
            // min-width: 100px;
            width: 60%;
            width: 50%;
            height: 150px;
            border: 1px solid #444C55;
            // border: 1px solid #444C55;
            border-radius: 10px;
            position: relative;
            flex: 0 0 auto;
@@ -283,6 +294,7 @@
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            overflow: hidden;

            li {
                width: 100%;
@@ -291,11 +303,15 @@
                align-items: center;

                &>div {
                    margin-left: 10px;
                    ;
                    padding-left: 10px;
                    flex:  1 1 auto;
                }

                p {
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #E9FFFF;
                    text-shadow: 0px 1px 11px #549BD4;
                }