feature/大屏动态字体

src/App.vue

@@ -18,7 +18,10 @@
 import { useAppStore, useSettingsStore } from "@/store";
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
+import { bigScreenObj } from "@/utils/setBigScreen";
 
+const bigScreenData = ref({ ...bigScreenObj });
+provide("bigScreenData", bigScreenData);
 const appStore = useAppStore();
 const settingsStore = useSettingsStore();
 

src/utils/setBigScreen.ts

@@ -0,0 +1,13 @@
+const bigScreenObj = {
+  scale: 0,
+  proportion: 0,
+  fontSize: 0,
+};
+//比例控制边框
+const height = 811;
+function getBorder() {
+  bigScreenObj.fontSize = window.innerHeight / 100;
+ 
+}
+getBorder();
+export { bigScreenObj };

src/views/screens/configs/screenComHeader.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="screen-common-component-header" @dblclick="selectComponents">
+  <div
+    class="screen-common-component-header"
+    :style="{ fontSize: bigScreenData.fontSize * 2.4 + 'px' }"
+    @dblclick="selectComponents"
+  >
     {{ title }}
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useCommonStore } from "@/store";
-
+const bigScreenData: any = inject("bigScreenData");
 const commonS = useCommonStore();
 
 const props = defineProps({

src/views/screens/deviceScreen.vue

@@ -29,7 +29,7 @@ import WorkshopList from "@/views/screens/screen-components/WorkshopList.vue";
 import { deviceMonitor } from "@/api/screens";
 
 const data = ref<any>(null);
-
+const bigScreenData = inject("bigScreenData");
 onMounted(async () => {
   let result: any = await deviceMonitor();
   data.value = result.data;

src/views/screens/headers/screenHeader.vue

@@ -3,7 +3,12 @@
     <Back class="header-back" color="#fff" @click="back" />
     <dv-decoration-8 style="width: 300px; height: 30px" />
     <div class="screen-header-item">
-      <div class="header-title">{{ title }}</div>
+      <div
+        class="header-title"
+        :style="{ fontSize: bigScreenData.fontSize * 4 + 'px' }"
+      >
+        {{ title }}
+      </div>
       <dv-decoration-5 style="width: 500px; height: 30px" />
     </div>
     <dv-decoration-8 :reverse="true" style="width: 300px; height: 30px" />
@@ -13,7 +18,7 @@
 <script lang="ts" setup>
 import { Back } from "@element-plus/icons-vue";
 import { useFullscreen } from "@vueuse/core";
-
+const bigScreenData: any = inject("bigScreenData");
 const el = ref<HTMLElement>();
 const { isFullscreen, toggle, enter, exit } = useFullscreen(el);
 

src/views/screens/screen-components/BadTop10.vue

@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import { top10UnqualifiedProduct } from "@/api/screens";
-
+const bigScreenData: any = inject("bigScreenData");
 const config = ref({});
 
 const props = defineProps({
@@ -24,7 +24,8 @@ const props = defineProps({
 onMounted(async () => {
   let res: any = await top10UnqualifiedProduct();
   config.value = {
-    rowNum: 10,
+    rowNum: 2,
+    fontSize: bigScreenData.value.fontSize * 2,
     data: res?.data ?? [],
   };
 });

src/views/screens/screen-components/ChanLiangTongJi.vue

@@ -15,10 +15,12 @@ import {
 import { productionStatisticsDetail } from "@/api/screens";
 
 const chartRef = ref(null);
-
+const bigScreenData: any = inject("bigScreenData");
 const option = {
   backgroundColor: "transparent",
-
+  textStyle: {
+    fontSize: bigScreenData.value.fontSize * 2,
+  },
   tooltip: {
     trigger: "axis",
     axisPointer: {
@@ -113,6 +115,9 @@ onMounted(async () => {
   let option = {
     color: allChartColors,
     backgroundColor: "transparent",
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 2,
+    },
     tooltip: {
       trigger: "axis",
       axisPointer: {
@@ -132,6 +137,9 @@ onMounted(async () => {
         axisPointer: {
           type: "shadow",
         },
+        axisLabel: {
+          fontSize: bigScreenData.value.fontSize * 2,
+        },
       },
     ],
     yAxis: [
@@ -145,6 +153,9 @@ onMounted(async () => {
         axisLabel: {
           formatter: "{value} ",
         },
+        axisLabel: {
+          fontSize: bigScreenData.value.fontSize * 2,
+        },
       },
     ],
     series: seriesData,

src/views/screens/screen-components/CompletionProductionPlan.vue

@@ -16,7 +16,7 @@
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import { productionPlan } from "@/api/screens";
 import { useDictionaryStore } from "@/store";
-
+const bigScreenData: any = inject("bigScreenData");
 const config = ref({});
 const dictS = useDictionaryStore();
 
@@ -31,21 +31,21 @@ onMounted(async () => {
   let res = await productionPlan();
   if (res.data.length > 0) {
     let dicts = {
-      orderName: "订单名称",
-      orderNum: "订单数量",
-      orderState: "订单状态",
-      materialName: "物料名称",
-      projectCode: "项目编号",
+      orderName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>订单名称</span>`,
+      orderNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>订单数量</span>`,
+      orderState: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>订单状态</span>`,
+      materialName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>物料名称</span>`,
+      projectCode: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>项目编号</span>`,
     };
 
     let bigData: any[] = [];
     res.data.forEach((item: any) => {
       let row = [
-        item.orderName,
-        item.orderNum,
-        dictS.getLableByValue("plan_order_state", item.orderState),
-        item.materialName,
-        item.projectCode,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.orderName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.orderNum}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${dictS.getLableByValue("plan_order_state", item.orderState)}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.materialName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.projectCode}</span>`,
       ];
       bigData.push(row);
     });
@@ -61,3 +61,11 @@ onMounted(async () => {
   }
 });
 </script>
+
+<style lang="scss" scoped>
+:deep(.ceil) {
+  .index {
+    background-color: red;
+  }
+}
+</style>

src/views/screens/screen-components/CurrentProductionOrderProgress.vue

@@ -6,12 +6,14 @@
         :cell-style="{
           textAlign: 'center',
           background: '#2d3748',
+          fontSize: '1.8vh',
         }"
         :data="tableData"
         :header-cell-style="{
           textAlign: 'center',
           background: '#2d3748',
           color: '#fff8',
+          fontSize: '2vh',
         }"
         size="large"
         style="width: 100%; height: 100%"

src/views/screens/screen-components/DefectDistributionDiagram.vue

@@ -10,7 +10,7 @@ import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 import { defectDistribution } from "@/api/screens";
 import { allChartColors } from "@/views/screens/configs/chartsConfig";
-
+const bigScreenData: any = inject("bigScreenData");
 const chartRef = ref(null);
 
 onMounted(async () => {
@@ -36,6 +36,9 @@ onMounted(async () => {
   let option = {
     color: allChartColors,
     backgroundColor: "transparent",
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 2,
+    },
     tooltip: {
       trigger: "axis",
       axisPointer: {
@@ -44,6 +47,9 @@ onMounted(async () => {
         //   color: "#999",
         // },
       },
+      textStyle: {
+        fontSize: bigScreenData.value.fontSize * 2,
+      },
     },
     legend: {
       data: res?.data?.bugName ?? [],
@@ -55,6 +61,9 @@ onMounted(async () => {
         axisPointer: {
           type: "shadow",
         },
+        axisLabel: {
+          fontSize: bigScreenData.value.fontSize * 2,
+        },
       },
     ],
     yAxis: [
@@ -66,7 +75,9 @@ onMounted(async () => {
         // interval: 50,
         axisLabel: {
           formatter: "{value} ",
+          fontSize: bigScreenData.value.fontSize * 2,
         },
+       
       },
     ],
     series: seriesData,

src/views/screens/screen-components/DeviceStatus.vue

@@ -31,7 +31,7 @@
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 
 import * as echarts from "echarts";
-
+const bigScreenData: any = inject("bigScreenData");
 const chartRef = ref(null);
 
 const props = defineProps({
@@ -85,12 +85,17 @@ watchEffect(() => {
     backgroundColor: "transparent",
     tooltip: {
       trigger: "item",
+      textStyle: {
+        fontSize: bigScreenData.value.fontSize * 2,
+      },
     },
     legend: {
       bottom: "5%",
       left: "center",
     },
-
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 2,
+    },
     series: [
       {
         name: "设备状态",
@@ -144,14 +149,14 @@ onMounted(async () => {
   }
 
   .type {
-    font-size: 16px;
+    font-size: 2.2vh;
     font-weight: bold;
     color: #333;
     line-height: 1.5;
   }
 
   .count {
-    font-size: 14px;
+    font-size: 2.2vh;
     color: #666;
     line-height: 1.5;
     margin-left: 10px;

src/views/screens/screen-components/DistributionOfUnqualifiedProducts.vue

@@ -10,7 +10,7 @@ import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 import { allChartColors } from "@/views/screens/configs/chartsConfig";
 import { unqualifiedProduct } from "@/api/screens";
-
+const bigScreenData: any = inject("bigScreenData");
 const chartRef = ref(null);
 
 const gernerateOptionsWithData = (
@@ -24,9 +24,15 @@ const gernerateOptionsWithData = (
     title: {
       show: false,
     },
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 1.8,
+    },
     tooltip: {
       trigger: "item",
       formatter: "{a} <br/>{b} : {c} ({d}%)",
+      textStyle: {
+        fontSize: bigScreenData.value.fontSize * 1.8,
+      },
     },
     legend: {
       type: "scroll",
@@ -55,7 +61,7 @@ const gernerateOptionsWithData = (
             formatter: centerText + "\n" + unitText, // 显示数据标签，格式化为：名称\n百分比
             position: "center", // 标签的位置在饼图的中心
             textStyle: {
-              fontSize: "16", // 标签字体大小
+              fontSize: bigScreenData.value.fontSize * 2.5, // 标签字体大小
               color: "#00BCD4", // 标签字体颜色
             },
           },

src/views/screens/screen-components/EquipmentMonitoring.vue

@@ -27,7 +27,7 @@ const props = defineProps({
 });
 
 const chartRef = ref(null);
-
+const bigScreenData: any = inject("bigScreenData");
 onMounted(async () => {
   const chart = echarts.init(chartRef.value);
 
@@ -37,6 +37,12 @@ onMounted(async () => {
     color: ["#4caf50", "#ffc107", "#b61945", "#607d8b"],
     tooltip: {
       trigger: "item",
+      textStyle: {
+        fontSize: bigScreenData.value.fontSize * 1.8,
+      },
+    },
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 2,
     },
     legend: chartLegend,
     series: [
@@ -49,6 +55,7 @@ onMounted(async () => {
           show: true,
           position: "center",
           color: "#fff",
+          fontSize: bigScreenData.value.fontSize * 3,
           formatter: function () {
             return `设备总数：${result.data.total}`;
           },

src/views/screens/screen-components/MaterialsCondition.vue

@@ -13,7 +13,7 @@
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import { materialSituation } from "@/api/screens";
 import { allChartColors } from "@/views/screens/configs/chartsConfig";
-
+const bigScreenData: any = inject("bigScreenData");
 const config = ref({});
 
 const props = defineProps({
@@ -37,6 +37,16 @@ onMounted(async () => {
     colors: allChartColors,
     data: bigData,
     showValue: true,
+    fontSize: bigScreenData.value.fontSize * 2,
   };
 });
 </script>
+<style lang="scss" scoped>
+:deep(.capsule-item-column) {
+  height: 2.2vh !important;
+}
+:deep(.capsule-item) {
+  height: 2.2vh !important;
+  margin-top: -0.1vh !important;
+}
+</style>

src/views/screens/screen-components/OrderInformation.vue

@@ -21,24 +21,22 @@ const props = defineProps({
     required: true,
   },
 });
-
+const bigScreenData: any = inject("bigScreenData");
 onMounted(async () => {
   let res = await productionPlan();
   if (res.data.length > 0) {
     let dicts = {
-      orderName: "名称",
-      // orderCode: "编码",
-      orderNum: "数量",
-      deliverTime: "交期",
+      orderName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>名称</span>`,
+      orderNum: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>数量</span>`,
+      deliverTime: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>交期</span>`,
     };
 
     let bigData: any[] = [];
     res.data.forEach((item: any) => {
       let row = [
-        item.orderName,
-        // item.orderCode,
-        item.orderNum,
-        item.deliverTime,
+        `<span style='font-size:${bigScreenData.value.fontSize* 2}px'>${item.orderName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize* 2}px'>${item.orderNum}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize* 2}px'>${item.deliverTime}</span>`,
       ];
       bigData.push(row);
     });

src/views/screens/screen-components/ProductionCapacitySituation.vue

@@ -5,19 +5,48 @@
       <div ref="chartRef" class="charts-container"></div>
       <div class="describe-container">
         <div>
-          <span class="typeText">生产目标</span>
-          <span class="valueText">{{ progressOption.orderNum }}</span>
-          <span class="unitText">件</span>
+          <span
+            class="typeText"
+            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
+            >生产目标</span
+          >
+          <span
+            class="valueText"
+            :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"
+            >{{ progressOption.orderNum }}</span
+          >
+          <span
+            class="unitText"
+            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
+            >件</span
+          >
         </div>
         <div>
-          <span class="typeText">实际生产量</span>
-          <span class="valueText">{{ progressOption.comNum }}</span>
-          <span class="unitText">件</span>
+          <span
+            class="typeText"
+            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
+            >实际生产量</span
+          >
+          <span
+            class="valueText"
+            :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"
+            >{{ progressOption.comNum }}</span
+          >
+          <span
+            class="unitText"
+            :style="{ fontSize: bigScreenData.fontSize * 1.7 + 'px' }"
+            >件</span
+          >
         </div>
       </div>
     </div>
     <div class="bottom-progress">
-      <div class="titleText">月进度</div>
+      <div
+        class="titleText"
+        :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"
+      >
+        月进度
+      </div>
       <dv-percent-pond
         :config="progressOption"
         style="width: 100%; height: 20px"
@@ -30,7 +59,7 @@
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 import { productionQuantity } from "@/api/screens";
-
+const bigScreenData: any = inject("bigScreenData");
 const chartRef = ref(null);
 
 const generateOption = (c: string, o: string) => {
@@ -61,7 +90,7 @@ const generateOption = (c: string, o: string) => {
         axisLabel: {
           distance: 12,
           color: "#999",
-          fontSize: 14,
+          fontSize: bigScreenData.value.fontSize * 1.5,
         },
         anchor: {
           show: true,
@@ -76,7 +105,7 @@ const generateOption = (c: string, o: string) => {
         },
         detail: {
           valueAnimation: true,
-          fontSize: 16,
+          fontSize: bigScreenData.value.fontSize * 2,
           offsetCenter: [0, "70%"],
           formatter: "{value}%",
           textStyle: {
@@ -142,7 +171,7 @@ const props = defineProps({
 
   .titleText {
     color: white;
-    font-size: 14px;
+
     width: 60px;
     margin-right: 10px;
   }

src/views/screens/screen-components/ProductionPassThroughRate.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
-
+const bigScreenData: any = inject("bigScreenData");
 const props = defineProps({
   moduleId: {
     type: String,
@@ -50,10 +50,12 @@ const gernerateOptionsWithData = (
       left: "center",
       top: "10%",
       textStyle: {
-        fontSize: 14,
+        fontSize: bigScreenData.value.fontSize * 1.8,
       },
     },
-
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 1.8,
+    },
     legend: {
       show: false,
     },
@@ -79,7 +81,7 @@ const gernerateOptionsWithData = (
           text: centerText + unitText,
           textAlign: "center",
           fill: "#00BCD4", // 数值颜色
-          fontSize: 20, // 数值大小
+          fontSize: bigScreenData.value.fontSize * 1.8, // 数值大小
         },
       },
     ],

src/views/screens/screen-components/ProductionSituation.vue

@@ -10,21 +10,33 @@ import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 import { dailyProduction } from "@/api/screens";
 import { allChartColors } from "@/views/screens/configs/chartsConfig";
-
+const bigScreenData: any = inject("bigScreenData");
 const chartRef = ref(null);
 
 onMounted(async () => {
   const chart = echarts.init(chartRef.value, "dark");
   let res: any = await dailyProduction(7);
   const option = {
+    grid: {
+      left: "10%",
+      right: "10%",
+      top: "10%",
+      bottom: "15%",
+    },
     color: allChartColors,
     backgroundColor: "transparent",
     xAxis: {
       type: "category",
       data: res?.data?.map((item: any) => item.dateStr),
+      axisLabel: {
+        fontSize: bigScreenData.value.fontSize * 2,
+      },
     },
     yAxis: {
       type: "value",
+      axisLabel: {
+        fontSize: bigScreenData.value.fontSize * 2,
+      },
     },
     series: [
       {

src/views/screens/screen-components/ProductionTaskStatistics.vue

@@ -15,7 +15,7 @@
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 import { productionStatistics } from "@/api/screens";
-
+const bigScreenData: any = inject("bigScreenData");
 const props = defineProps({
   moduleId: {
     type: String,
@@ -69,11 +69,7 @@ const gernerateOptionsWithData = (
       text: titleText,
       left: "center",
       bottom: "20",
-      textStyle: {
-        fontSize: 14,
-      },
     },
-
     legend: {
       show: false,
     },
@@ -99,7 +95,7 @@ const gernerateOptionsWithData = (
           text: centerText,
           textAlign: "center",
           fill: "#00BCD4", // 数值颜色
-          fontSize: 20, // 数值大小
+          fontSize: bigScreenData.value.fontSize * 2.5,
         },
       },
       {
@@ -110,7 +106,7 @@ const gernerateOptionsWithData = (
           text: unitText,
           textAlign: "center",
           fill: "#607D8B", // 单位颜色
-          fontSize: 14, // 单位大小
+          fontSize: bigScreenData.value.fontSize * 2.5, // 单位大小
         },
       },
     ],

src/views/screens/screen-components/QualityAnomaly.vue

@@ -13,7 +13,7 @@ import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import { qualityException } from "@/api/screens";
 
 const config = ref({});
-
+const bigScreenData: any = inject("bigScreenData");
 const props = defineProps({
   moduleId: {
     type: String,
@@ -25,19 +25,18 @@ onMounted(async () => {
   let res = await qualityException();
   if (res.data.length > 0) {
     let dicts = {
-      materlName: "物料名称",
+      materlName: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>物料名称</span>`,
       // orderCode: "编码",
-      materialCode: "物料编码",
-      workOrderCode: "工单编号",
+      materialCode: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>物料编码</span>`,
+      workOrderCode: `<span style='font-size:${bigScreenData.value.fontSize * 2.3}px'>工单编号</span>`,
     };
 
     let bigData: any[] = [];
     res.data.forEach((item: any) => {
       let row = [
-        item.materlName,
-        // item.orderCode,
-        item.materialCode,
-        item.workOrderCode,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.materlName}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.materialCode}</span>`,
+        `<span style='font-size:${bigScreenData.value.fontSize * 2}px'>${item.workOrderCode}</span>`,
       ];
       bigData.push(row);
     });

src/views/screens/screen-components/WeeklyFulfillmentOfProductionOrders.vue

@@ -10,7 +10,7 @@
 import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
 import * as echarts from "echarts";
 import { weekProductionSchedule } from "@/api/screens";
-
+const bigScreenData: any = inject("bigScreenData");
 const chartRef = ref(null);
 
 onMounted(async () => {
@@ -23,9 +23,15 @@ onMounted(async () => {
 
   const option = {
     backgroundColor: "transparent",
+    textStyle: {
+      fontSize: bigScreenData.value.fontSize * 2,
+    },
     title: {
       text: "百分比柱子",
       show: false,
+      textStyle: {
+        fontSize: bigScreenData.value.fontSize * 2,
+      },
     },
     xAxis: {
       show: false,
@@ -36,7 +42,10 @@ onMounted(async () => {
         show: false,
       },
       axisLabel: {
-        textStyle: { fontSize: "40%", color: "#02afff" },
+        textStyle: {
+          fontSize: bigScreenData.value.fontSize * 2,
+          color: "#02afff",
+        },
       },
       axisLine: {
         show: false,
@@ -68,7 +77,7 @@ onMounted(async () => {
             return percent;
           },
           color: "#fff",
-          fontSize: 12,
+          fontSize: bigScreenData.value.fontSize * 2,
         },
         itemStyle: {
           borderRadius: 10,
@@ -98,7 +107,7 @@ onMounted(async () => {
             return params.data.completeNum + "/" + params.data.value + " 件";
           },
           color: "#02afff",
-          fontSize: 18,
+          fontSize: bigScreenData.value.fontSize * 2,
         },
         itemStyle: {
           borderRadius: 10,

src/views/screens/screen-components/WorkshopList.vue

@@ -11,7 +11,7 @@
             <svg-icon
               :color="getColorByStauts(device.state + '')"
               icon-class="shebei"
-              size="120"
+              :size="bigScreenData.fontSize * 15"
             />
             <div
               :style="{ color: getColorByStauts(device.state + '') }"
@@ -29,7 +29,7 @@
 
 <script lang="ts" setup>
 const colors = ["#4caf50", "#ffc107", "#b61945", "#607d8b"];
-
+const bigScreenData: any = inject("bigScreenData");
 const props = defineProps({
   deviceData: {
     type: Object || null,
@@ -66,7 +66,7 @@ const getColorByStauts = (state: string) => {
 }
 
 .ws-title {
-  font-size: 18px;
+  font-size: 2.2vh;
   color: #fff;
   margin-top: 5px;
 }
@@ -82,7 +82,7 @@ const getColorByStauts = (state: string) => {
     width: 100%;
     text-align: center;
     margin-bottom: 10px;
-    font-size: 16px;
+    font-size: 2.2vh;
   }
 }
 </style>