screenFront/src/views/PaintShopView/View1/bottom.vue

<!--
 * @FilePath: \screenFront\src\views\PaintShopView\View1\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;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>
          <div>
            <border3 ref="borderref">
                  <template v-slot>
                      <pm name="Electriccontrol" title="PM2.5/PM10" ref="pmref"></pm>
                  </template>
              </border3>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
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";
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 pm_timer = null
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, 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);
};
let powerOption = reactive({
  title: "",
  option: {
    title: {
      text: t('messages.PowerConsumption_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: [
    ],
  },
});
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: [
    ],
  },
});
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 });

//     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);
//     }
//   }
  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%',
    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)


    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%',
    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})
      pm_index++
      if (pm_index >= val.dust.length) {
        pm_index = 0
      }
    }, 3000)
  }
}
onMounted(() => {
});
onUnmounted(() => {
  clearInterval(pm_timer)
});
defineExpose({
  setcontentData,
});
</script>

<style scoped></style>