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

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);
+    }
+
     
-    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
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
-            :title="powerOption.title"
+          <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="Productionref"
-          ></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -48,7 +40,7 @@ import chart from "@/components/assembly/chart2.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 const router = useRouter();
 
@@ -82,10 +74,10 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 2, 0);
   //修改高度
-  powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  powerref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
-  Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
   // pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
-//   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
+  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
 };
 let powerOption = reactive({
   title: "",
@@ -107,8 +99,8 @@ let powerOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -150,8 +142,8 @@ let ProductionOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -187,92 +179,92 @@ let ProductionOption = reactive({
 //       // yields.value.setData(result.data);
 //     }
 //   }
-function setcontentData(val){
+function setcontentData(val) {
-  let monthData=[]
+  let monthData = []
-    let powerMonth=[]
+  let powerMonth = []
-    for(let key in val.power){
+  for (let key in val.power) {
-        monthData.push(key)
+    monthData.push(key)
-        powerMonth.push(val.power[key])
+    powerMonth.push(val.power[key])
-    }
+  }
-    powerOption.option.xAxis.data=[]
+  powerOption.option.xAxis.data = []
-    powerOption.option.series=[]
+  powerOption.option.series = []
-    powerOption.option.xAxis.data=monthData.reverse()
+  powerOption.option.xAxis.data = monthData.reverse()
-    powerOption.option.series.push({
+  powerOption.option.series.push({
-      data: powerMonth.reverse(),
+    data: powerMonth.reverse(),
-      type: 'bar',
+    type: 'bar',
-      showBackground: true,
+    showBackground: true,
-      backgroundStyle: {
+    backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
+      color: 'rgba(180, 180, 180, 0.2)'
-      },
+    },
-      itemStyle: {
+    itemStyle: {
-            color: function(params) {
+      color: function (params) {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-                // console.log(params)
+        // console.log(params)
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-                // return colors[params.dataIndex];
+        // return colors[params.dataIndex];
-                return color[params.dataIndex];
+        return color[params.dataIndex];
-            }
+      }
-        },
+    },
-    barWidth:'50%',
+    barWidth: '30%',
     label: {
-            show: true,
+      show: true,
-            color:'#fff',
+      color: '#fff',
-            formatter: function(params){
+      formatter: function (params) {
-              return params.value.toLocaleString()
+        return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
-    
-    powerref.value.changeData(powerOption.option)
-
-
-    let monthData2=[]
-    let powerMonth2=[]
-    for(let key in val.rate){
-        monthData2.push(key)
-        powerMonth2.push(val.rate[key])
-    }
-    ProductionOption.option.xAxis.data=[]
-    ProductionOption.option.series=[]
-    ProductionOption.option.xAxis.data=monthData2.reverse()
-    ProductionOption.option.series.push({
-      data: powerMonth2.reverse(),
-      type: 'bar',
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
       },
-      itemStyle: {
+      position: "top",
-            color: function(params) {
+      textStyle: {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        color: "#fff",
-                // console.log(params)
+        fontSize: 14,
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+      },
-                // return colors[params.dataIndex];
+    },
-                return color[params.dataIndex];
+  })
-            }
-        },
-    barWidth:'30%',
-    label: {
-            show: true,
-            color:'#fff',
-            formatter: function(params){
-              return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
 
-    Productionref.value.changeData(ProductionOption.option)
+  powerref.value.changeData(powerOption.option)
-    // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+
+
+  let monthData2 = []
+  let powerMonth2 = []
+  for (let key in val.rate) {
+    monthData2.push(key)
+    powerMonth2.push(val.rate[key])
+  }
+  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.series = []
+  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.series.push({
+    data: powerMonth2.reverse(),
+    type: 'bar',
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.2)'
+    },
+    itemStyle: {
+      color: function (params) {
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // console.log(params)
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        // return colors[params.dataIndex];
+        return color[params.dataIndex];
+      }
+    },
+    barWidth: '25%',
+    label: {
+      show: true,
+      color: '#fff',
+      formatter: function (params) {
+        return params.value.toLocaleString()
+      },
+      position: "top",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+    },
+  })
+
+  Productionref.value.changeData(ProductionOption.option)
+  // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
 }
 onMounted(() => {
 

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
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
-            :title="powerOption.title"
+          <chart :title="ProductionOption.title" :option="ProductionOption.option" ref="Productionref"></chart>
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="ProductionOption.title"
-            :option="ProductionOption.option"
-            ref="Productionref"
-          ></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -48,13 +40,13 @@ import chart from "@/components/assembly/chart2.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 const router = useRouter();
 
 let powerref = ref();
 let Productionref = ref();
-let borderref=ref()
+let borderref = ref()
 // let pmref=ref()
 
 let props = defineProps<{
@@ -82,10 +74,10 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 2, 0);
   //修改高度
-  powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  powerref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
-  Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
   // pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
-//   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
+  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
 };
 let powerOption = reactive({
   title: "",
@@ -107,8 +99,8 @@ let powerOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -150,8 +142,8 @@ let ProductionOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -173,7 +165,7 @@ let ProductionOption = reactive({
     ],
   },
 });
-let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,"2月":22,"3月":11,"4月":22}}
+let Data = { power: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 }, Production: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 } }
 //   async function getpower() {
 //     let result: any = await getPowerData({ time: 1 });
 
@@ -188,92 +180,92 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
 //       // yields.value.setData(result.data);
 //     }
 //   }
-function setcontentData(val){
+function setcontentData(val) {
-  let monthData=[]
+  let monthData = []
-    let powerMonth=[]
+  let powerMonth = []
-    for(let key in val.power){
+  for (let key in val.power) {
-        monthData.push(key)
+    monthData.push(key)
-        powerMonth.push(val.power[key])
+    powerMonth.push(val.power[key])
-    }
+  }
-    powerOption.option.xAxis.data=[]
+  powerOption.option.xAxis.data = []
-    powerOption.option.series=[]
+  powerOption.option.series = []
-    powerOption.option.xAxis.data=monthData.reverse()
+  powerOption.option.xAxis.data = monthData.reverse()
-    powerOption.option.series.push({
+  powerOption.option.series.push({
-      data: powerMonth.reverse(),
+    data: powerMonth.reverse(),
-      type: 'bar',
+    type: 'bar',
-      showBackground: true,
+    showBackground: true,
-      backgroundStyle: {
+    backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
+      color: 'rgba(180, 180, 180, 0.2)'
-      },
+    },
-      itemStyle: {
+    itemStyle: {
-            color: function(params) {
+      color: function (params) {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-                // console.log(params)
+        // console.log(params)
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-                // return colors[params.dataIndex];
+        // return colors[params.dataIndex];
-                return color[params.dataIndex];
+        return color[params.dataIndex];
-            }
+      }
-        },    
+    },
-        barWidth:'50%',
+    barWidth: '30%',
     label: {
-            show: true,
+      show: true,
-            color:'#fff',
+      color: '#fff',
-            formatter: function(params){
+      formatter: function (params) {
-              return params.value.toLocaleString()
+        return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
-    
-    powerref.value.changeData(powerOption.option)
-
-
-    let monthData2=[]
-    let powerMonth2=[]
-    for(let key in val.rate){
-        monthData2.push(key)
-        powerMonth2.push(val.rate[key])
-    }
-    ProductionOption.option.xAxis.data=[]
-    ProductionOption.option.series=[]
-    ProductionOption.option.xAxis.data=monthData2.reverse()
-    ProductionOption.option.series.push({
-      data: powerMonth2.reverse(),
-      type: 'bar',
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
       },
-      itemStyle: {
+      position: "top",
-            color: function(params) {
+      textStyle: {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        color: "#fff",
-                // console.log(params)
+        fontSize: 14,
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+      },
-                // return colors[params.dataIndex];
+    },
-                return color[params.dataIndex];
+  })
-            }
-        },
-    barWidth:'30%',
-    label: {
-            show: true,
-            color:'#fff',
-            formatter: function(params){
-              return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
 
-    Productionref.value.changeData(ProductionOption.option)
+  powerref.value.changeData(powerOption.option)
-    // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+
+
+  let monthData2 = []
+  let powerMonth2 = []
+  for (let key in val.rate) {
+    monthData2.push(key)
+    powerMonth2.push(val.rate[key])
+  }
+  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.series = []
+  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.series.push({
+    data: powerMonth2.reverse(),
+    type: 'bar',
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.2)'
+    },
+    itemStyle: {
+      color: function (params) {
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // console.log(params)
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        // return colors[params.dataIndex];
+        return color[params.dataIndex];
+      }
+    },
+    barWidth: '25%',
+    label: {
+      show: true,
+      color: '#fff',
+      formatter: function (params) {
+        return params.value.toLocaleString()
+      },
+      position: "top",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+    },
+  })
+
+  Productionref.value.changeData(ProductionOption.option)
+  // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
 }
 onMounted(() => {
 

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
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
-            :title="powerOption.title"
+          <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="Productionref"
-          ></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -48,7 +40,7 @@ import chart from "@/components/assembly/chart2.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 const router = useRouter();
 
@@ -82,10 +74,10 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 2, 0);
   //修改高度
-  powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  powerref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
-  Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
   // pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
-//   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
+  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
 };
 let powerOption = reactive({
   title: "",
@@ -107,8 +99,8 @@ let powerOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -150,8 +142,8 @@ let ProductionOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -173,7 +165,7 @@ let ProductionOption = reactive({
     ],
   },
 });
-let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,"2月":22,"3月":11,"4月":22}}
+let Data = { power: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 }, Production: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 } }
 //   async function getpower() {
 //     let result: any = await getPowerData({ time: 1 });
 
@@ -188,94 +180,94 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
 //       // yields.value.setData(result.data);
 //     }
 //   }
-function setcontentData(val){
+function setcontentData(val) {
-  let monthData=[]
+  let monthData = []
-    let powerMonth=[]
+  let powerMonth = []
-    for(let key in val.power){
+  for (let key in val.power) {
-        monthData.push(key)
+    monthData.push(key)
-        powerMonth.push(val.power[key])
+    powerMonth.push(val.power[key])
-    }
+  }
-    powerOption.option.xAxis.data=[]
+  powerOption.option.xAxis.data = []
-    powerOption.option.series=[]
+  powerOption.option.series = []
-    powerOption.option.xAxis.data=monthData.reverse()
+  powerOption.option.xAxis.data = monthData.reverse()
-    powerOption.option.series.push({
+  powerOption.option.series.push({
-      data: powerMonth.reverse(),
+    data: powerMonth.reverse(),
-      type: 'bar',
+    type: 'bar',
-      showBackground: true,
+    showBackground: true,
-      backgroundStyle: {
+    backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
+      color: 'rgba(180, 180, 180, 0.2)'
-      },
+    },
-      itemStyle: {
+    itemStyle: {
-            color: function(params) {
+      color: function (params) {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-                // console.log(params)
+        // console.log(params)
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-                // return colors[params.dataIndex];
+        // return colors[params.dataIndex];
-                return color[params.dataIndex];
+        return color[params.dataIndex];
-            }
+      }
-        },
+    },
-    barWidth:'30%',
+    barWidth: '30%',
     label: {
-            show: true,
+      show: true,
-            color:'#fff',
+      color: '#fff',
-            formatter: function(params){
+      formatter: function (params) {
-              // console.log(params);
+        // console.log(params);
-              return params.value.toLocaleString()
+        return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
-    
-    powerref.value.changeData(powerOption.option)
-
-
-    let monthData2=[]
-    let powerMonth2=[]
-    for(let key in val.rate){
-        monthData2.push(key)
-        powerMonth2.push(val.rate[key])
-    }
-    ProductionOption.option.xAxis.data=[]
-    ProductionOption.option.series=[]
-    ProductionOption.option.xAxis.data=monthData2.reverse()
-    ProductionOption.option.series.push({
-      data: powerMonth2.reverse(),
-      type: 'bar',
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
       },
-      itemStyle: {
+      position: "top",
-            color: function(params) {
+      textStyle: {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        color: "#fff",
-                // console.log(params)
+        fontSize: 14,
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+      },
-                // return colors[params.dataIndex];
+    },
-                return color[params.dataIndex];
+  })
-            }
-        },
-    barWidth:'20%',
-    label: {
-            show: true,
-            color:'#fff',
-            formatter: function(params){
-              // console.log(params);
-              return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
 
-    Productionref.value.changeData(ProductionOption.option)
+  powerref.value.changeData(powerOption.option)
-    // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+
+
+  let monthData2 = []
+  let powerMonth2 = []
+  for (let key in val.rate) {
+    monthData2.push(key)
+    powerMonth2.push(val.rate[key])
+  }
+  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.series = []
+  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.series.push({
+    data: powerMonth2.reverse(),
+    type: 'bar',
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.2)'
+    },
+    itemStyle: {
+      color: function (params) {
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // console.log(params)
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        // return colors[params.dataIndex];
+        return color[params.dataIndex];
+      }
+    },
+    barWidth: '25%',
+    label: {
+      show: true,
+      color: '#fff',
+      formatter: function (params) {
+        // console.log(params);
+        return params.value.toLocaleString()
+      },
+      position: "top",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+    },
+  })
+
+  Productionref.value.changeData(ProductionOption.option)
+  // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
 }
 onMounted(() => {
 

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
+          <chart :title="powerOption.title" :option="powerOption.option" ref="powerref"></chart>
-            :title="powerOption.title"
+          <chart :title="powerOption.title" :option="powerOption.option" ref="Productionref"></chart>
-            :option="powerOption.option"
-            ref="powerref"
-          ></chart>
-          <chart
-            :title="powerOption.title"
-            :option="powerOption.option"
-            ref="Productionref"
-          ></chart>
           <!-- <div>
             <border3 ref="borderref">
                   <template v-slot>
@@ -48,7 +40,7 @@ import chart from "@/components/assembly/chart2.vue";
 import { useRoute, useRouter } from "vue-router";
 import { useEnergyConsumeStore } from "@/store/module/energyConsume";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 const store = useEnergyConsumeStore();
 const router = useRouter();
 
@@ -82,10 +74,10 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 2, 0);
   //修改高度
-  powerref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  powerref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
-  Productionref.value.setchartWH(a.oWidth-20, a.oHeight-20);
+  Productionref.value.setchartWH(a.oWidth - 20, a.oHeight - 20);
   // pmref.value.setchartWH(a.oWidth-40,a.oHeight-40)
-//   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
+  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
 };
 let powerOption = reactive({
   title: "",
@@ -107,8 +99,8 @@ let powerOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -150,8 +142,8 @@ let ProductionOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
+      width: 800,
-  right:20,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -173,7 +165,7 @@ let ProductionOption = reactive({
     ],
   },
 });
-let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,"2月":22,"3月":11,"4月":22}}
+let Data = { power: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 }, Production: { "1月": 11, "2月": 22, "3月": 11, "4月": 22 } }
 //   async function getpower() {
 //     let result: any = await getPowerData({ time: 1 });
 
@@ -188,94 +180,94 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
 //       // yields.value.setData(result.data);
 //     }
 //   }
-function setcontentData(val){
+function setcontentData(val) {
-  let monthData=[]
+  let monthData = []
-    let powerMonth=[]
+  let powerMonth = []
-    for(let key in val.power){
+  for (let key in val.power) {
-        monthData.push(key)
+    monthData.push(key)
-        powerMonth.push(val.power[key])
+    powerMonth.push(val.power[key])
-    }
+  }
-    powerOption.option.xAxis.data=[]
+  powerOption.option.xAxis.data = []
-    powerOption.option.series=[]
+  powerOption.option.series = []
-    powerOption.option.xAxis.data=monthData.reverse()
+  powerOption.option.xAxis.data = monthData.reverse()
-    powerOption.option.series.push({
+  powerOption.option.series.push({
-      data: powerMonth.reverse(),
+    data: powerMonth.reverse(),
-      type: 'bar',
+    type: 'bar',
-      showBackground: true,
+    showBackground: true,
-      backgroundStyle: {
+    backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
+      color: 'rgba(180, 180, 180, 0.2)'
-      },
+    },
-      itemStyle: {
+    itemStyle: {
-            color: function(params) {
+      color: function (params) {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
-                // console.log(params)
+        // console.log(params)
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
-                // return colors[params.dataIndex];
+        // return colors[params.dataIndex];
-                return color[params.dataIndex];
+        return color[params.dataIndex];
-            }
+      }
-        },
+    },
-    barWidth:'30%',
+    barWidth: '30%',
     label: {
-            show: true,
+      show: true,
-            color:'#fff',
+      color: '#fff',
-            formatter:function(params){
+      formatter: function (params) {
-              // console.log(params);
+        // console.log(params);
-              return params.value.toLocaleString()
+        return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
-    
-    powerref.value.changeData(powerOption.option)
-
-
-    let monthData2=[]
-    let powerMonth2=[]
-    for(let key in val.rate){
-        monthData2.push(key)
-        powerMonth2.push(val.rate[key])
-    }
-    ProductionOption.option.xAxis.data=[]
-    ProductionOption.option.series=[]
-    ProductionOption.option.xAxis.data=monthData2.reverse()
-    ProductionOption.option.series.push({
-      data: powerMonth2.reverse(),
-      type: 'bar',
-      showBackground: true,
-      backgroundStyle: {
-        color: 'rgba(180, 180, 180, 0.2)'
       },
-      itemStyle: {
+      position: "top",
-            color: function(params) {
+      textStyle: {
-                // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        color: "#fff",
-                // console.log(params)
+        fontSize: 14,
-                let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+      },
-                // return colors[params.dataIndex];
+    },
-                return color[params.dataIndex];
+  })
-            }
-        },
-    barWidth:'20%',
-    label: {
-            show: true,
-            color:'#fff',
-            formatter:function(params){
-              // console.log(params);
-              return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
 
-    Productionref.value.changeData(ProductionOption.option)
+  powerref.value.changeData(powerOption.option)
-    // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
+
+
+  let monthData2 = []
+  let powerMonth2 = []
+  for (let key in val.rate) {
+    monthData2.push(key)
+    powerMonth2.push(val.rate[key])
+  }
+  ProductionOption.option.xAxis.data = []
+  ProductionOption.option.series = []
+  ProductionOption.option.xAxis.data = monthData2.reverse()
+  ProductionOption.option.series.push({
+    data: powerMonth2.reverse(),
+    type: 'bar',
+    showBackground: true,
+    backgroundStyle: {
+      color: 'rgba(180, 180, 180, 0.2)'
+    },
+    itemStyle: {
+      color: function (params) {
+        // 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
+        // console.log(params)
+        let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+        // return colors[params.dataIndex];
+        return color[params.dataIndex];
+      }
+    },
+    barWidth: '25%',
+    label: {
+      show: true,
+      color: '#fff',
+      formatter: function (params) {
+        // console.log(params);
+        return params.value.toLocaleString()
+      },
+      position: "top",
+      textStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+    },
+  })
+
+  Productionref.value.changeData(ProductionOption.option)
+  // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
 }
 onMounted(() => {
 

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,