screenFront/src/views/Temp/GetonAgain/right.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\electronicControlAmbient copy\right.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;flex-direction: column; align-items: center; margin-bottom: 10px; margin-right: 10px;">
            <!-- <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>
                        <pm name="Electriccontrol" title="PM2.5" ref="pm25ref"></pm>
                    </template>
                </border3>
            </div>
            <div style="margin-top: 10px;">
              <border3 ref="borderref">
                    <template v-slot>
                        <pm name="Electriccontrol" title="PM10" ref="pm10ref"></pm>
                    </template>
                </border3>
            </div>
          </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 border6 from "@/components/borderBox/border6.vue";
  import border3 from "@/components/borderBox/border3.vue";
  import pm from "./chart/pm.vue";
  import power from "./chart/power2023.vue";
  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();
  const store = useEnergyConsumeStore();
  const router = useRouter();
  
//   let powerref = ref();
  // let Productionref = ref();
  // let borderref=ref()
  let pmref=ref()
  let pm25ref=ref()
  let pm10ref=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);
    // borderref.value.resetWH()
  }
  
  const powerBox = (width: any, height: any) => {
    let a = calcWH(height, width, 2, 1, 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)
    pm25ref.value.setchartWH(a.oWidth-40,a.oHeight-40)
    pm10ref.value.setchartWH(a.oWidth-40,a.oHeight-40)
  //   yields.value.setchartWH(a.oWidth, a.oHeight - 30);
  };
  // let ProductionOption = reactive({
  //   title: "",
  //   option: {
  //     title: {
  //       text: t('messages.Production_2023'),
  //       textStyle: {
  //         color: "rgb(255,255,255,0.9)",
  //       },
  //     },
     
  //     tooltip: {
  //       trigger: "item",
  //       axisPointer: {
  //         // Use axis to trigger tooltip
  //         type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow',
  //         axis: "auto",
  //       },
  //     },
  //     legend: {
  //       type: "scroll",
  //       width:800,
  //   right:20,
  //     },
  //     grid: {
  //       top: "8%",
  //       left: "3%",
  //       right: "0%",
  //       bottom: "3%",
  //       containLabel: true,
  //     },
  //     xAxis: {
  //       type: 'category',
  //       data: [
  //       ],
        
  //     },
  //     yAxis: {
  //       type: 'value', 
  //     },
  //     series: [
  //     ],
  //   },
  // });
  //   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);
  //     }
  //   }
  function setcontentData(val){
      let monthData2=[]
      let powerMonth2=[]
      for(let key in val.rate){
          monthData2.push(key+'月')
          powerMonth2.push(Math.floor(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:'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)
      // pmref.value.setData({two:10,ten:10})      
      pm25ref.value.setData(val.dust.pm25)
      pm10ref.value.setData(val.dust.pm10)
      // pmref.value.setData({two:val.dust.pm25,ten:val.dust.pm10})
  }
  onMounted(() => {
      
  
  
  });
  defineExpose({
    setcontentData,
  });
  </script>
  
  <style scoped></style>