From 6b6a9ce33453a5ec9ca8346df39a7a610042424c Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期二, 12 三月 2024 21:38:52 +0800
Subject: [PATCH] 更新地图
---
src/container/workshop/device.vue | 54 +++++++++++++++++++++++++++++++++++-------------------
1 files changed, 35 insertions(+), 19 deletions(-)
diff --git a/src/container/workshop/device.vue b/src/container/workshop/device.vue
index a5b9ee2..9177b7b 100644
--- a/src/container/workshop/device.vue
+++ b/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;
}
--
Gitblit v1.9.3