大屏首页

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240131104833"
+  "value": "20240131110857"
 }

src/styles/view/datav.scss

@@ -93,13 +93,13 @@
         }
         .el-main {
             .main-border {
-                height: calc(30% - 6px);
+                height: calc(20% - 6px);
                 margin-bottom: 12px;
                 .main-datav-progress {
                     position: relative;
                     display: flex;
                     flex-direction: column;
-                    padding: 16px 0;
+                    padding: 2px 0;
                     width: 100%;
                     height: 100%;
                     .item {
@@ -111,7 +111,7 @@
                             position: relative;
                             margin-left: 10px;
                             margin-right: 20px;
-                            font-size: 26px;
+                            font-size: 24px;
                         }
                         .content {
                             position: relative;
@@ -121,7 +121,7 @@
                 }
             }
             .main-gui {
-                height: calc(70% - 6px);
+                height: calc(80% - 6px);
                 .datav-card-content {
                     padding: 18px;
                     overflow: hidden;

src/views/home/components/border.vue

@@ -16,17 +16,14 @@
 </template>
 
 <script setup>
-import { nextTick, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 //渲染完成
 onMounted(() => {
     windowResize()
-    nextTick(() => {
+    setTimeout(() => {
         onWindowResize()
-        setTimeout(() => {
-            onWindowResize()
-        }, 400)
-    })
+    }, 500)
 })
 
 //监听浏览器窗口变化

src/views/home/components/gui.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-loading="isLoading" class="hc-datav-gui-box" element-loading-background="rgba(122, 122, 122, 0.8)">
+    <div id="hc-datav-gui" v-loading="isLoading" class="hc-datav-gui-box" element-loading-background="rgba(122, 122, 122, 0.8)">
         <div class="hc-gui-info-img">
             <el-carousel :autoplay="false" indicator-position="outside" arrow="always" trigger="click">
                 <el-carousel-item v-for="(item, index) in guiViewData" :key="index">
@@ -42,7 +42,11 @@ watch(() => [props.type, props.projectId], ([type, pid]) => {
 
 //渲染完成
 onMounted(() => {
+    windowResize()
     getGuiData()
+    setTimeout(() => {
+        onWindowResize()
+    }, 500)
 })
 
 //获取柜子数量
@@ -72,6 +76,34 @@ const guiItemInfo = ref({})
 const guiItemChange = (item) => {
     guiItemInfo.value = item
 }
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener('resize', resizeEvent)
+}
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        onWindowResize()
+    })
+}
+
+//设置尺寸
+const onWindowResize = () => {
+    const { width: mainWidth, height: mainHeight } = getDomStyle('main-gui-content')
+    const scaleX = mainWidth / 1363
+    const scaleY = mainHeight / 600
+    const scale = scaleX < scaleY ? scaleX : scaleY
+    document.getElementById('hc-datav-gui').style.transform = `scale(${scale})`
+}
+
+const getDomStyle = (id) => {
+    try {
+        const dom = document.getElementById(id)
+        return { width: dom.offsetWidth, height: dom.offsetHeight }
+    } catch (error) {
+        return { width: 0, height: 0 }
+    }
+}
 </script>
 
 <style lang="scss">

src/views/home/components/gui/book.vue

@@ -3,7 +3,7 @@
         <img :src="imageViewGui2" alt="">
         <div class="hc-gui-info-item-box">
             <div class="hc-gui-info-item">
-                <div class="info-item" style="top: 10px">
+                <div class="info-item">
                     <div class="title">
                         <span>档</span>
                         <span>号：</span>

src/views/home/components/gui/gui.scss

@@ -1,10 +1,11 @@
 .hc-datav-gui-box {
     position: relative;
-    height: 100%;
-    width: 100%;
+    height: 600px;
+    width: 1363px;
     display: flex;
-    overflow-y: hidden;
-    overflow-x: auto;
+    transform: scale(1);
+    transform-origin: 0 0;
+    overflow: hidden;
     .hc-gui-info-img {
         position: relative;
         height: 100%;
@@ -28,10 +29,10 @@
                     }
                 }
                 .el-carousel__arrow--left {
-                    left: -20px;
+                    left: -35px;
                 }
                 .el-carousel__arrow--right {
-                    right: -20px;
+                    right: -35px;
                 }
             }
             .el-carousel__item {
@@ -87,15 +88,12 @@
                         flex-direction: column;
                         justify-content: center;
                         transition: transform .2s;
-                        &.query {
-                            background: #ffddc6;
-                            color: #101010;
-                        }
                         &.cur, &:hover {
                             z-index: 22;
                             color: white;
                             background: #A16222;
                             border: 1px solid #bbbbbb;
+                            font-size: 10px;
                             transform: scale(1.2);
                         }
                     }
@@ -109,29 +107,30 @@
         flex: 1;
         display: flex;
         justify-content: center;
+        align-items: center;
         .hc-gui-data-container {
             position: relative;
-            height: calc(100% - 70px);
             img {
-                height: 550px;
+                height: 450px;
             }
             .hc-gui-info-item-box {
                 position: absolute;
-                top: 58px;
-                left: 38px;
+                top: 50px;
+                left: 36px;
                 right: 28px;
-                height: 400px;
+                height: 325px;
                 overflow: hidden;
                 .hc-gui-info-item {
                     position: relative;
                     height: 100%;
                     width: 100%;
+                    font-size: 14px;
                     .info-item {
                         position: relative;
                         display: flex;
                         color: #101010;
                         .title {
-                            margin-right: 14px;
+                            margin-right: 10px;
                             font-weight: bold;
                             span + span {
                                 margin-left: 29px;
@@ -143,7 +142,7 @@
                     }
                     .info-item-name {
                         color: #101010;
-                        margin-top: 30px;
+                        margin-top: 14px;
                         line-height: 1.8;
                     }
                     .hc-info-item-bottom {

src/views/home/components/progress.vue

@@ -59,12 +59,12 @@ getCellColors()
 .hc-datav-progress {
     position: relative;
     width: 100%;
-    height: 50px;
-    padding: 4px;
+    height: 35px;
+    padding: 3px;
     border-style: solid;
-    border-width: 5px;
+    border-width: 4px;
     border-image: linear-gradient(90deg, #75E3CC, #54B9F8) 1 1;
-    clip-path: inset(0 round 5px);
+    clip-path: inset(0 round 4px);
     .body {
         position: relative;
         width: 100%;
@@ -92,7 +92,7 @@ getCellColors()
             justify-content: center;
             align-items: center;
             font-weight: bold;
-            font-size: 22px;
+            font-size: 20px;
             text-shadow: 2px 2px 6px #616161;
         }
     }

src/views/home/datav.vue

@@ -73,7 +73,7 @@
                                 </template>
                             </div>
                         </div>
-                        <div class="main-gui-content">
+                        <div id="main-gui-content" class="main-gui-content">
                             <datavGui :type="tabKey" :project-id="projectId" />
                         </div>
                     </datavCard>
@@ -220,7 +220,6 @@ const getProjectStat = async (projectId) => {
     projectStat.value = getObjValue(data)
 }
 
-
 //档案柜类型
 const tabKey = ref('1')
 const tabs = ref([