精饰车间环境 柱状图

src/views/PaintShopView/View1/bottom.vue

@@ -12,22 +12,14 @@
     <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>
             <border6 ref="borderref">
-                  <template v-slot>
+              <template v-slot>
-                      <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
+                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
-                  </template>
+              </template>
-              </border6>
+            </border6>
           </div>
         </div>
       </el-col>
@@ -36,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, watch,onUnmounted } from "vue";
+import { onMounted, reactive, ref, watch, onUnmounted } from "vue";
 import { calcWH } from "@/components/ts/selfAdaption";
 // import {getPowerData} from '@/http/environment'
 import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
@@ -48,14 +40,14 @@ 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 pmref = ref()
 let pm_timer = null
 let props = defineProps<{
   width: number;
@@ -82,10 +74,10 @@ function reset(val: any) {
 const powerBox = (width: any, height: any) => {
   let a = calcWH(height, width, 1, 3, 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)
+  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,99 +180,99 @@ let Data={power:{"1月":11,"2月":22,"3月":11,"4月":22},Production:{"1月":11,
 //       // yields.value.setData(result.data);
 //     }
 //   }
-  let pm_index = 0
+let pm_index = 0
-function setcontentData(val){  
+function setcontentData(val) {
   clearInterval(pm_timer)
-  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[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
+
+
+  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[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
   if (val.dust.length > 1) {
     pm_timer = setInterval(() => {
-      pmref.value.setData({two:val.dust[pm_index].pm25,ten:val.dust[pm_index].pm10,title:val.dust[pm_index].name})
+      pmref.value.setData({ two: val.dust[pm_index].pm25, ten: val.dust[pm_index].pm10, title: val.dust[pm_index].name })
       pm_index++
       if (pm_index >= val.dust.length) {
         pm_index = 0