Просмотр исходного кода

[Style 0000] 测点模块样式修改

houzekong 1 год назад
Родитель
Сommit
d095a63e78
2 измененных файлов с 21 добавлено и 17 удалено
  1. 12 6
      src/views/sys/iframe/index.vue
  2. 9 11
      src/views/vent/monitor/site/index.vue

+ 12 - 6
src/views/sys/iframe/index.vue

@@ -20,8 +20,9 @@
   import { useLayoutHeight } from '@/layouts/default/content/useContentViewHeight';
 
   const emit = defineEmits(['message']);
-  defineProps({
+  const props = defineProps({
     frameSrc: propTypes.string.def(''),
+    height: propTypes.number,
   });
 
   const loading = ref(true);
@@ -44,11 +45,16 @@
     if (!iframe) {
       return;
     }
-    const top = headerHeightRef.value;
-    topRef.value = top;
-    heightRef.value = window.innerHeight - top;
-    const clientHeight = document.documentElement.clientHeight - top;
-    iframe.style.height = `${clientHeight}px`;
+    if (props.height) {
+      heightRef.value = props.height;
+      iframe.style.height = `${props.height}px`;
+    } else {
+      const top = headerHeightRef.value;
+      topRef.value = top;
+      heightRef.value = window.innerHeight - top;
+      const clientHeight = document.documentElement.clientHeight - top;
+      iframe.style.height = `${clientHeight}px`;
+    }
   }
 
   function hideLoading() {

+ 9 - 11
src/views/vent/monitor/site/index.vue

@@ -2,23 +2,20 @@
   <!-- 监测-测点页面 -->
   <div class="monitor-site flex">
     <!-- 左侧内容 -->
-    <div class="h-full flex-basis-385px p-10px flex flex-col">
+    <div class="h-850px flex-basis-415px p-10px">
       <!-- 测点过滤器 -->
-      <SiteFilter class="flex-shrink-0 flex-grow-0" @submit="refreshTree" />
+      <SiteFilter class="w-full h-100px" @submit="refreshTree" />
       <!-- 测点树 -->
-      <SiteTree
-        class="w-full flex-grow-1 h-0 scroll-auto"
-        :tree-data="treeData"
-        @select="focusOnSite"
-      />
+      <SiteTree class="w-full h-700px" :tree-data="treeData" @select="focusOnSite" />
     </div>
     <!-- 右侧内容 主要内容 -->
-    <div class="h-full flex-grow-1 relative">
+    <div class="h-850px flex-grow-1 relative">
       <!-- 测点图 -->
       <IFrame
         ref="iframeRef"
-        class="w-full h-full"
+        class="w-full h-760px"
         :frame-src="monitorSiteOperationUrl"
+        :height="850"
         @message="handleMessage"
       />
       <!-- 操作测点的表单 -->
@@ -113,8 +110,9 @@
 </script>
 <style scoped>
   .monitor-site {
+    position: relative;
     width: 100%;
-    height: 100vh;
-    margin-top: 60px;
+    height: calc(100vh - 70px);
+    margin-top: 50px;
   }
 </style>