screenFront/src/views/energyConsumeJixiefenchang/content/bottom.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\energyConsumeJixiefenchang\content\bottom.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 14:43:28
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div>
      <el-row>
        <el-col :span="24">
          <div style="display: flex">
            <power
              ref="yields"
              :title="t('messages.Productionto2023')"
            ></power>
            <power
              ref="power1"
              :title="t('messages.Powerto2023')"
            ></power>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted, reactive, ref, watch } from "vue";
  import { calcWH } from "@/components/ts/selfAdaption";
  // import {getPowerData} from '@/http/environment'
  import { getPowerData, getconsumeDetail } from "@/http/energyConsume";
  import power from "./chart/power2023.vue";
  import chart from "./chart/chartRatio.vue";
  import { useRoute, useRouter } from "vue-router";
  import { useEnergyConsumeStore } from "@/store/module/energyConsume";
  import { useI18n } from 'vue-i18n'
let {t} = useI18n();
  const store = useEnergyConsumeStore();
  const router = useRouter();
  
  let power1 = ref();
  let yields = ref();
  
  let props = defineProps<{
    width: number;
    height: number;
  }>();
  watch(
    () => props,
    (newVal, oldVal) => {
      //监听父组件宽高变化，随时重置本组件尺寸
      reset(newVal);
    },
    { immediate: true, deep: true, flush: "post" }
  );
  function reset(val: any) {
    //宽高为0时跳出该方法
  
    if (!val.width && !val.height) return;
  
    //重置盒子尺寸
    powerBox(val.width, val.height);
  }
  
  const powerBox = (width: any, height: any) => {
    let a = calcWH(height, width, 1, 2, 0);
    //修改高度
    power1.value.setchartWH(a.oWidth, a.oHeight - 30);
    yields.value.setchartWH(a.oWidth, a.oHeight - 30);
  };
  const clickPowerChart = () => {
    router.push({
      path: "/energyConsume/historyData",
    });
  };
  async function getpower() {
    let result: any = await getPowerData({ time: 1 });
  
    if (result.code == 200) {
      result.data.name = result.data.name.reverse();
      result.data.listData.forEach((res) => {
        for (let key in res.month) {
          res.month[key] = res.month[key].reverse();
        }
      });
      power1.value.setData(result.data);
      // yields.value.setData(result.data);
    }
  }
  
  watch(
    () => store.powerProduct,
    (newVal, oldVal) => {
      if(!newVal){
        return
      }
      let data={}
  
      let noData=[]
      newVal.name.forEach(()=>{
        noData.push(null)
      })
      for(let key=1;key<=12;key++){
        if(!newVal.listData[key]){
          newVal.listData[key]=noData
        }
        
      }
      let reverseData={}
      let reverseName=[]
      for(let ee in newVal.listData){
          reverseData[ee]=[]
        newVal.listData[ee].forEach(res=>{
          reverseData[ee].unshift(res)
        })
        // reverseData[ee]=newVal.listData[ee].reverse()
      }
      newVal.name.forEach(res=>{
        reverseName.unshift(res)
      })
      data['name']=reverseName
      data['listData']=[{},{month:reverseData,years:2023}]
      
      
      yields.value.setData(data);
      // changeGas(newVal);
    },
    { deep: true, flush: "post" }
  );
  
  onMounted(() => {
    getpower();
  });
  </script>
  
  <style scoped></style>