From 581028aca65711182e7e68bd0879e9ffe8087803 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Wed, 24 May 2023 17:48:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B2=BE=E9=A5=B0=E8=BD=A6=E9=97=B4=E7=8E=AF?=
 =?UTF-8?q?=E5=A2=83=20=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PaintShopView/View1/bottom.vue | 230 +++++++++++------------
 1 file changed, 111 insertions(+), 119 deletions(-)

diff --git a/src/views/PaintShopView/View1/bottom.vue b/src/views/PaintShopView/View1/bottom.vue
index f4abff1..e001fb5 100644
--- a/src/views/PaintShopView/View1/bottom.vue
+++ b/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
-            :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>
             <border6 ref="borderref">
-                  <template v-slot>
-                      <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
-                  </template>
-              </border6>
+              <template v-slot>
+                <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
+              </template>
+            </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 pmref=ref()
+let borderref = 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);
-  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);
+  powerref.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);
 };
 let powerOption = reactive({
   title: "",
@@ -96,7 +88,7 @@ let powerOption = reactive({
         color: "rgb(255,255,255,0.9)",
       },
     },
-   
+
     tooltip: {
       trigger: "item",
       axisPointer: {
@@ -107,8 +99,8 @@ let powerOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
-  right:20,
+      width: 800,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -121,10 +113,10 @@ let powerOption = reactive({
       type: 'category',
       data: [
       ],
-      
+
     },
     yAxis: {
-      type: 'value', 
+      type: 'value',
     },
     series: [
     ],
@@ -139,7 +131,7 @@ let ProductionOption = reactive({
         color: "rgb(255,255,255,0.9)",
       },
     },
-   
+
     tooltip: {
       trigger: "item",
       axisPointer: {
@@ -150,8 +142,8 @@ let ProductionOption = reactive({
     },
     legend: {
       type: "scroll",
-      width:800,
-  right:20,
+      width: 800,
+      right: 20,
     },
     grid: {
       top: "8%",
@@ -164,16 +156,16 @@ let ProductionOption = reactive({
       type: 'category',
       data: [
       ],
-      
+
     },
     yAxis: {
-      type: 'value', 
+      type: 'value',
     },
     series: [
     ],
   },
 });
-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
-function setcontentData(val){  
+let pm_index = 0
+function setcontentData(val) {
   clearInterval(pm_timer)
-  let monthData=[]
-    let powerMonth=[]
-    for(let key in val.power){
-        monthData.push(key)
-        powerMonth.push(val.power[key])
-    }
-    powerOption.option.xAxis.data=[]
-    powerOption.option.series=[]
-    powerOption.option.xAxis.data=monthData.reverse()
-    powerOption.option.series.push({
-      data: powerMonth.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:'30%',
+  let monthData = []
+  let powerMonth = []
+  for (let key in val.power) {
+    monthData.push(key)
+    powerMonth.push(val.power[key])
+  }
+  powerOption.option.xAxis.data = []
+  powerOption.option.series = []
+  powerOption.option.xAxis.data = monthData.reverse()
+  powerOption.option.series.push({
+    data: powerMonth.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: '30%',
     label: {
-            show: true,
-            color:'#fff',
-            formatter: function(params){
-              // console.log(params);
-              return params.value.toLocaleString()
-            },
-            position: "top",
-            textStyle: {
-              color: "#fff",
-              fontSize: 14,
-            },
-        },
-    })
-    
-    powerref.value.changeData(powerOption.option)
+      show: true,
+      color: '#fff',
+      formatter: function (params) {
+        // console.log(params);
+        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: {
-            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:'20%',
+  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})
+      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