tunnel-cloud-web/src/components/content/usedEle/UsedEle.vue

<template>
  <div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
    <div class="content">
      <div class="item">
        <div class="container" ref="length">
          <div class="value" ref="valueA"></div>
        </div>
        <div>
          <div class="icon"></div>
          <span>当月用电量：{{ electricityConsumptionMonthly }}kwh</span>
        </div>
      </div>
      <div class="item">
        <div class="container" ref="length">
          <div class="value" ref="valueB"></div>
        </div>
        <div>
          <div class="icon"></div>
          <span>当月节省量：{{ monthlySavings }}kwh</span>
        </div>
      </div>
      <div class="ele-left-bottom-icon"></div>
      <div class="ele-right-bottom-icon"></div>
    </div>
    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="top-tag">
          <div class="allUsedEle">
            <div class="use-title">
              {{ month }}总用电量
            </div>
            <div class="value">{{ electricityConsumptionMonthly }}kwh</div>
          </div>
          <div class="allUsedEle">
            <div class="use-title">
              当月节省量
            </div>
            <div class="value">{{ monthlySavings }}kwh</div>
          </div>
        </div>
        <div class="loading-block" v-if="showLoading">
          <div class="loading"></div>
          <span>加载中...</span>
        </div>
        <div class="chat-dialog" v-else>
          <div id="containerEle"></div>
          <div style="width: 1px;"></div>
        </div>
        <div class="left-bottom-icon"></div>
        <div class="right-bottom-icon"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {dateFormat} from "@/utils/date.js";

const props = defineProps({
  list: Array,
  eleData: Array
});
let myEcharts = reactive({});
const isVisited = ref(false);
const showLoading = ref(false)
const electricityConsumptionMonthly = ref(0)
const monthlySavings = ref(40000)
const length = ref(null);
const valueA = ref();
const month = ref(dateFormat('', true));
const valueB = ref(monthlySavings.value);
const bgImage = computed(() =>
    isVisited.value
        ? "#2E5589"
        : "rgba(6,34,71,0.78)"
);
watch(() => props.eleData, (now) => {
  if (now.frequencyChangerList.length === 0) {
    electricityConsumptionMonthly.value = 0
  } else {
    getBasicData(now.frequencyChangerList)
  }
  setValueA()
}, {deep: true});
watch(() => props.list, (now) => {
  // props.eleData.forEach(item => {
  //   now.forEach(newItem => {
  //     if (item.equipmentId === newItem.equipmentId) {
  //       if (newItem.electricityConsumptionDay) {
  //         electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
  //       }
  //     }
  //   })
  // })
  setValueA()
}, {deep: true});
onMounted(() => {
  setValueA()
  setValueB()
})
const setValueA = () => {
  if (electricityConsumptionMonthly.value === 0 || length.value === null) {
    valueA.value.style.height = `0px`;
  }
  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 100000;
  valueA.value.style.height = `${width}px`;
}
const setValueB = () => {
  if (monthlySavings.value === 0 || length.value === null) {
    valueB.value.style.height = `0px`;
  }
  let width = (monthlySavings.value * length.value.offsetHeight) / 100000;
  valueB.value.style.height = `${width}px`;
}
const getBasicData = (data) => {
  electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
}
const handleOpenChart = () => {
  console.log('用电量弹窗')
  isVisited.value = true
  nextTick(() => {
    initChart()
  })
}
/**
 * 初始化echarts实例方法
 */
const initChart = () => {
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerEle'));
  //5.传入数据
  let option = {
    //图例
    legend: {
      left: 0,
      textStyle: {
        color: '#60DDDE',
        fontSize: 45
      },
      itemWidth: 30,
      itemHeight: 30,
      icon: "circle",
    },
    //离容器四侧的距离
    grid: {
      left: 0, // 左边距
      right: 20, // 右边距
      top: 80, // 顶边距
      bottom: 20, // 底边距
      containLabel: true,
    },
    //提示框组件
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: "transparent", // 设置背景颜色为透明
      borderColor: "transparent", // 设置边框颜色为透明
      padding: 0, // 设置内边距为0
      textStyle: {
        fontSize: 40
      },
      formatter: function (params) {
        let content = `
          <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
            <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}日</div>
            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">日用电量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">日节省量: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
          </div>`;
        return content;
      },
    },
    toolbox: {
      show: false,
      right: 10,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        }
      }
    },
    dataZoom: [{
      type: 'inside'
    }],
    //X轴
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
      axisLabel: {
        textStyle: {
          fontSize: 45,
          color: '#D6F1FA'
        },
      },
    },
    //Y轴
    yAxis: {
      type: 'value',
      axisLabel: {
        textStyle: {
          fontSize: 45,
          color: '#D6F1FA'
        },
      },
    },
    //配置项
    series: [
      {
        name: '日用电量',
        data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
        type: 'bar'
      },
      {
        name: '日节省量',
        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
        type: 'bar'
      },
    ]
  }
  myEcharts.setOption(option);
  //图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
  }
}
const getImageUrl = (name) => {
  return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
}
</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
  padding: 0 !important;
}

#used-ele {
  margin-top: 40px;
  cursor: pointer;
  width: 830px;
  //height: 373px;
  color: aliceblue;
  border: 2px solid #0f82af;
  background: rgba(6, 34, 71, 0.78);
  border-radius: 20px;
  padding: 21px 62px 35px 62px;
  position: relative;

  .ele-left-bottom-icon {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 41px;
    height: 41px;
    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
    transform: rotate(-90deg);
  }

  .ele-right-bottom-icon {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 41px;
    height: 41px;
    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
    transform: rotate(180deg);
  }

  .title {
    width: 96px;
    height: 42px;
    font-size: 32px;
    font-family: MicrosoftYaHei, MicrosoftYaHei;
    font-weight: bold;
    color: #38cafb;
    line-height: 42px;
  }

  .content {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .item {
      margin-top: 44px;
      font-size: 28px;
      color: #38CAFB;
      display: flex;
      flex-direction: column;
      align-items: center;

      .container {
        width: 60px;
        height: 210px;
        border-radius: 31px;
        border: 1px solid rgba(105, 231, 253, 1);
        position: relative;
        margin-bottom: 20px;

        .value {
          position: absolute;
          bottom: 0;
          width: 60px;
          height: inherit;
          background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
          border-radius: 31px;
          transition: width 0.5s linear 0s;
        }
      }

      > div:nth-child(2) {
        display: flex;

        .icon {
          margin-right: 10px;
          width: 29px;
          height: 33px;
          background-image: url(../../../assets/images/usedEle/white-ele.png);
        }
      }
    }
  }
}
</style>