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

<!--
 * @FilePath: \screenFront\src\views\PaintShopView\stuffView\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 } 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 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, 2, 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: 'value',

    },
    yAxis: {
      type: 'category',
      data: [
      ],
    },
    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: 'value',

    },
    yAxis: {
      type: 'category',
      data: [
      ],
    },
    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);
//     }
//   }
function setcontentData(val) {
  let monthData = []
  let powerMonth = []
  for (let key in val.power) {
    monthData.push(key)
    powerMonth.push(val.power[key])
  }
  powerOption.option.yAxis.data = []
  powerOption.option.series = []
  powerOption.option.yAxis.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.yAxis.data = []
  ProductionOption.option.series = []
  ProductionOption.option.yAxis.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.pm25,ten:val.dust.pm10})
}
onMounted(() => {



});
defineExpose({
  setcontentData,
});
</script>

<style scoped></style>