修改大屏首页图片 机械分厂车间环境柱状图显示

src/views/InPlantProducts/content/bottom.vue

@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
 import { calcWH } from "@/components/ts/selfAdaption";
 import installtable from "./chart/installtable.vue";
 import devList from "./chart/deviceslist.vue";
@@ -65,6 +65,7 @@ import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
 import { useI18n } from 'vue-i18n'
 let {t} = useI18n();
 const store = useInPlantProductsStore();
+let timer = null;
 let props = defineProps<{
   width: number;
   height: number;
@@ -136,8 +137,18 @@ async function getDeviceInPlantfun() {
       res["index"] = index + 1;
         return res
     });
-
+    //显示优化 防止刚进页面时候数据过多
+    if (newdata.length > 20) {
+      let newdatatemp = newdata.slice(0, 20);
+      store.setDevList(newdatatemp);
+      timer = setTimeout(() => {
         store.setDevList(newdata);
+      }, 1000);
+    } else {
+      store.setDevList(newdata);
+    }
+
+    
   }
 }
 
@@ -180,6 +191,9 @@ onMounted(() => {
   getprogressOfCorpsfun();
   // setdata();
 });
+onUnmounted(() => {
+  clearTimeout(timer);
+});
 </script>
 
 <style scope>

src/views/PaintShopView/finishView/bottom.vue

@@ -12,16 +12,8 @@
     <el-row>
       <el-col :span="24">
         <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="Productionref"
-          ></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -213,7 +205,7 @@ function setcontentData(val){
         return color[params.dataIndex];
       }
     },
-    barWidth:'50%',
+    barWidth: '30%',
     label: {
       show: true,
       color: '#fff',
@@ -256,7 +248,7 @@ function setcontentData(val){
         return color[params.dataIndex];
       }
     },
-    barWidth:'30%',
+    barWidth: '25%',
     label: {
       show: true,
       color: '#fff',

src/views/PaintShopView/machiningView/bottom.vue

@@ -12,16 +12,8 @@
     <el-row>
       <el-col :span="24">
         <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="ProductionOption.title"
-            :option="ProductionOption.option"
-            ref="Productionref"
-          ></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
+          <chart :title="ProductionOption.title" :option="ProductionOption.option" ref="Productionref"></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -214,7 +206,7 @@ function setcontentData(val){
         return color[params.dataIndex];
       }
     },
-        barWidth:'50%',
+    barWidth: '30%',
     label: {
       show: true,
       color: '#fff',
@@ -257,7 +249,7 @@ function setcontentData(val){
         return color[params.dataIndex];
       }
     },
-    barWidth:'30%',
+    barWidth: '25%',
     label: {
       show: true,
       color: '#fff',

src/views/PaintShopView/stuffView/bottom.vue

@@ -12,16 +12,8 @@
     <el-row>
       <el-col :span="24">
         <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="Productionref"
-          ></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -258,7 +250,7 @@ function setcontentData(val){
         return color[params.dataIndex];
       }
     },
-    barWidth:'20%',
+    barWidth: '25%',
     label: {
       show: true,
       color: '#fff',

src/views/PaintShopView/weldView/bottom.vue

@@ -12,16 +12,8 @@
     <el-row>
       <el-col :span="24">
         <div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="Productionref"
-          ></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
+          <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -258,7 +250,7 @@ function setcontentData(val){
         return color[params.dataIndex];
       }
     },
-    barWidth:'20%',
+    barWidth: '25%',
     label: {
       show: true,
       color: '#fff',

src/views/index.vue

@@ -202,7 +202,7 @@ let routerList = [
     isLink: false,
     path: "/realtimeSecurityJixie",
     title: t("messages.realtimeSecurityJixie"),
-    url: require("../assets/indexImg/realtimeSecurity.png"),
+    url: require("../assets/indexImg/realtimeSecurityJixie.png"),
   },
   {
     id: 22,