Procházet zdrojové kódy

主控台样式修改

zhudie před 1 rokem
rodič
revize
31c7200af4

+ 9 - 4
src/views/dashboard/home/components/AlgoDataPanel.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref } from 'vue';
+  import { computed, ref,onMounted } from 'vue';
   import CensusTabs from './AlgoCensusTabs.vue';
   import ViolationStatItem from './ViolationStatItem.vue';
   import { TimeTabEnum, violationHandleCounts } from '../types';
@@ -165,9 +165,13 @@
   //   };
   // });
 
-  //动态获取title的left比例
-  const screenWidth = window.innerWidth;
-  const titleLeft = computed(() => ((screenWidth * 0.3 - 350 * 0.2) * 100) / screenWidth + '%');
+
+  const titleLeft=ref('')
+  onMounted(()=>{
+    const contentChart = document.querySelector('.chart') as HTMLDivElement;
+    titleLeft.value = contentChart?.offsetWidth * 0.3 - 43 +'px'
+
+  })
 
   const option = computed(() => {
     return {
@@ -267,6 +271,7 @@
 
   .chart {
     width: 100%;
+    min-width: 550px;
     flex-grow: 1;
     height: 340px;
   }

+ 16 - 2
src/views/dashboard/home/components/Score.vue

@@ -56,6 +56,17 @@
   onMounted(() => {
     openTopWs();
     console.log('workshopList', workshopList.value);
+
+    const contentDom = document.querySelector('.content') as HTMLDivElement;
+    if (contentDom) {
+      updateChartHeight.value = contentDom.offsetHeight - 454 + 'px';
+      updateLineHeight.value = contentDom.offsetHeight - 404 + 'px';
+    } else {
+      console.error('@@@@');
+    }
+
+   
+
   });
 
   const useHomeScore = useScore();
@@ -78,8 +89,10 @@
   const timeSelect = ref<TimeEnum>(TimeEnum.DAY);
   //const workspaceList = ['车间1', '车间2', '车间3'];
 
-  const updateChartHeight = computed(() => window.innerHeight - 670 + 'px');
-  const updateLineHeight = computed(() => window.innerHeight - 618 + 'px');
+  // const updateChartHeight = computed(() => window.innerHeight - 670 + 'px');
+  // const updateLineHeight = computed(() => window.innerHeight - 618 + 'px');
+  const updateChartHeight = ref('');
+  const updateLineHeight = ref('');
 
   const dataZoomConfig = computed(() => [
     {
@@ -210,6 +223,7 @@
   .score-show {
     flex-grow: 1;
     width: calc(100% - 660px);
+    min-width: 500px;
     overflow-x: auto;
   }