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

<template>
  <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
    <div class="content" >
      <div class="item">
        <div></div>
        <span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
      </div>
      <div class="item">
        <div></div>
        <span>当月节省量：{{ monthlySavings }}v</span>
      </div>
    </div>
    <div class="digital-tunnel">
      <el-dialog 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">
              12月总用电量
            </div>
            <div class="value">2345v</div>
          </div>
          <div class="allUsedEle">
            <div class="use-title">
              当月节省量
            </div>
            <div class="value">345v</div>
          </div>
        </div>
       <div class="chat-dialog">
         <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';

const props = defineProps({
  list: Array,
  eleData: Array
});
let myEcharts = reactive({});
const isVisited = ref(false);
const eleData = ref([])
const electricityConsumptionMonthly = ref()
const monthlySavings = ref(55555)
const bgImage = computed(() =>
    isVisited.value
        ? "bpq_active.png"
        : "bg.png"
);
watch(() => props.eleData, (now) => {
  getBasicData(now.frequencyChangerList)
}, {deep: true});
watch(() => props.list, (now) => {
  eleData.value.forEach(item => {
    now.forEach(newItem => {
      if (item.equipmentId === newItem.equipmentId) {
        if (newItem.electricityConsumptionDay) {
          electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
          // item.electricityConsumptionDay = newItem.electricityConsumptionDay
          // item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
          // item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
        }
      }
    })
  })
}, {deep: true});
const getBasicData = (data) => {
  let tranObj = {}
  let tranArr = []
  data.map(item => {
    electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
        tranObj = {
          equipmentId: item.equipmentId,
          // equipmentName: item.equipmentName,
          // electricityConsumptionDay: item.electricityConsumptionDay,
          // electricityConsumptionMonthly: item.electricityConsumptionMonthly,
          // electricityConsumptionTotal: item.electricityConsumptionTotal,
        }
    tranArr.push(tranObj)
  })
  eleData.value = tranArr
}
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',
      textStyle: {
        fontSize: 40
      }
    },
    //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 {
  cursor: pointer;
  width: 830px;
  height: 90px;
  color: aliceblue;
  position: absolute;
  //top: 1980px;
  top: 1420px;
  left: 68px;
  background-image: url(../../../assets/images/usedEle/bg.png);
  padding: 21px 62px 35px 62px;

  .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 {
      height: 37px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #38CAFB;
      line-height: 37px;
      display: flex;
      align-items: center;

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

      //ul {
      //  font-size: 14px;
      //
      //  li {
      //    display: flex;
      //    align-items: center;
      //    //width: 270px;
      //    height: 37px;
      //    font-size: 28px;
      //    color: #38CAFB;
      //    line-height: 37px;
      //    margin-bottom: 25px;
      //    padding-left: 5px;
      //
      //    &:hover {
      //      cursor: pointer;
      //      width: 280px;
      //      //height: 46px;
      //      background: #2E5589;
      //      border-radius: 7px;
      //      color: #FBF7F4;
      //
      //      > div {
      //        background-image: url(../../../assets/images/usedEle/white-ele.png);
      //      }
      //    }
      //
      //    > div {
      //      width: 29px;
      //      height: 33px;
      //      background-image: url(../../../assets/images/usedEle/white-ele.png);
      //      margin-right: 14px;
      //    }
      //
      //    &:nth-child(2) {
      //      > div {
      //        background-image: url(../../../assets/images/usedEle/icon-month.png);
      //      }
      //
      //      &:hover {
      //        > div {
      //          background-image: url(../../../assets/images/usedEle/white-ele.png);
      //        }
      //      }
      //    }
      //
      //    &:nth-child(3) {
      //      > div {
      //        background-image: url(../../../assets/images/usedEle/icon-day.png);
      //      }
      //
      //      &:hover {
      //        > div {
      //          background-image: url(../../../assets/images/usedEle/white-ele.png);
      //        }
      //      }
      //    }
      //  }
      //
      //  & > :nth-child(2) {
      //    color: #4bcb6b;
      //  }
      //
      //  & > :nth-child(3) {
      //    color: #4bcbbc;
      //  }
      //}
    }

    //& > :nth-child(2) {
    //  transform: translateX(25px);
    //}
  }
}
</style>