zhgdyun/src/views/projectAdmin/fourEngin/carbon/leftBottom.vue

<template>
  <Card title="光伏发电">
   <div class="electricityBox">
    <div class="electricityTop">
     <span class="text1">今日发电</span>
    <span class="numTop" >
      <span class="numText">10</span>
      </span>
    <span class="texts">kwh</span>
   </div>
    <div class="electricityBottom">
     <span class="text">历史发电量</span>
    <span class="numTop"><span class="numText">126</span></span>
    <span class="texts">kwh</span>
   </div>
    </div>
    
  </Card>
</template>

<script>
import Card from "../components/Card.vue";

export default {
   components: { Card },
  data() {
    return {
     
    };
  },
  // mounted() {
  //   this.initMyChart();
  // },
  // methods: {
  //   getEnvironmentWarningInfoApi(){
  //     // console.log('执行');
  //     getEnvironmentWarningInfo({
  //       deviceId: this.currentDevDetail.deviceId,
  //       projectSn: this.projectSn,
  //       warningType: 1
  //     }).then(res => {
  //       console.log(res.result);
  //       this.pm10Warning = res.result.pm10Warning
  //       this.pm25Warning = res.result.pm25Warning
  //       this.noiseWarning = res.result.noiseWarning
  //       this.windSpeedWarning = res.result.windSpeed
  //       this.createdEcharts2();
  //     })
  //   },
  //   //切换  24小时数据
  //   switchingData(value) {
  //     this.checked = value;
  //     this.initMyChart();
  //   },
  //   initMyChart() {
  //     const myChart = echarts.init(this.$refs.myChart);
  //     // this.dustData_24.forEach((element) => {
  //     //   xdata.push(element.uploadDate.split(" ")[1]);
  //     //   switch (this.checked) {
  //     //     case 1:
  //     //       ydata.push(element.pm25);
  //     //       Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
  //     //       AlertNumber = this.pm25Warning
  //     //       break;
  //     //     case 2:
  //     //       ydata.push(element.pm10);
  //     //       Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
  //     //       AlertNumber = this.pm10Warning
  //     //       break;
  //     //     case 3:
  //     //       ydata.push(element.windspeed);
  //     //       Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
  //     //       AlertNumber = this.windSpeedWarning
  //     //       break;
  //     //     case 4:
  //     //       ydata.push(element.noise);
  //     //       Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
  //     //       AlertNumber = this.noiseWarning
  //     //       break;
  //     //   }
  //     // });
  //     switch (this.checked) {
  //        case 1:
  //        this.data = [90, 125, 100, 96, 100, 150, 190, 125 ]
  //        break;
  //        case 2:
  //        this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
  //        break;
  //        case 3:
  //        this.data = [100, 96, 100, 150,90, 85,  190, 125 ]
  //        break;
  //        case 4:
  //        this.data = [90,  96, 100, 85, 100,150, 190, 125 ]
  //        break;
  //     }
  //     const option = {
  //       grid: {
  //       x: "10%",//x 偏移量
  //       y: "5%", // y 偏移量
  //       width: "85%", // 宽度
  //       height: "80%"// 高度
  //     },
  //     tooltip: {
  //         trigger: "axis"
  //       },
  //       xAxis: {
  //         type: "category",
  //         boundaryGap: false,
  //         data: [
  //           "01:00",
  //           "02:00",
  //           "03:00",
  //           "04:00",
  //           "05:00",
  //           "06:00",
  //           "07:00",
  //           "08:00"
  //         ],
  //         axisLabel: {
  //           show: true,
  //           textStyle: {
  //             color: "#9ea3ab"
  //           }
  //         }
  //       },
  //       yAxis: {
  //         type: "value",
  //         max: 300,
  //         splitNumber: 4,
  //         axisLabel: {
  //           // y轴文字的配置
  //           textStyle: {
  //             color: "#92a1bc"
  //           }
  //         },
  //         splitLine: {
  //           show: true,
  //           lineStyle: {
  //             type: "dashed",
  //             color: "#777f8a"
  //           }
  //         }
  //       },
  //       series: [
  //         {
  //           itemStyle: {
  //             normal: {
  //               color: "#6ae6ef",
  //               lineStyle: {
  //                 color: "#6ae6ef"
  //               }
  //             }
  //           },
  //           data: this.data,
  //           type: "line",
  //           smooth: true,
  //           showSymbol: false,
  //           areaStyle: {
  //             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  //               { offset: 0,color: "rgb(33, 55, 76)"},
  //               { offset: 1,color: "rgb(85, 175, 186)" }
  //             ])
  //           }
  //         }
  //       ]
  //     };
  //     myChart.setOption(option);
  //   }
  // }
};
</script>

<style lang="less" scoped>
.electricityBox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top:15% ;
  .electricityTop,.electricityBottom{
    text-align: center;
  }
  span{
   color: #6EE4F0 ;
    font-size: 24px;
   // opacity: 0.7;
  }
  .numTop{
     display: inline-block;
     // padding-top: 15px;
      width: 165px;
      height: 60px;
      text-align: center;
      background-image: url(../assets/images/common/num_bg.png);
      background-repeat: no-repeat;
      background-size: 80%;
      //font-size: 40px;
      line-height: 60px;
      // color: #fff !important;
      margin-bottom: 10px;
      margin-right: -15px;
      
  }
  .numText{
    font-size: 40px;
    color: #fff !important;
    margin-right: 25px;
  }
  .text1{
    font-size: 24px;
    margin-right: 40px;
  }
  .text{
    margin-right: 20px;
  }
  .texts{
        font-size: 24px;

  }
}
</style>