large-vue/src/views/pad/building/energyRate.vue

<template>
  <div class="main-data energy-rate-operation">
<!--    <div class="title-area">能源占比</div>-->
    <div class="content-area">
      <div class="content-title">
        <span class="title">楼宇本周用电量</span>
      </div>
      <div class="rightList1">
                <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>光伏用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[0].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="margin-left: 15px;;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>楼外设备用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[1].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="margin-left: -12px;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>充电桩用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[2].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="padding-right: 10px;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>地下室用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[3].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
              </div>
              <div class="rightList1">
                <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>制冷机组用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[4].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="margin-left: -4px;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>消防用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[5].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="margin-left: 22px;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>电梯用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[6].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="padding-right: 20px;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>办公用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[7].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
              </div>

              <div class="rightList1">
                <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>公共照明用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[8].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>供热设备用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[9].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>厨房用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[10].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list" style="padding-right: 5px;">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>机房总用电量</div>
                      <div class="arrow"></div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[11].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
              </div>

              <div class="rightList1">
                <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>生活水泵用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[12].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>冷源泵用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[13].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>热源泵用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[14].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
                 <div class="left-list">
                    <div class="left-info">
                    <div class="name">
                      <div> <img src="@/assets/images/service_new/quantity.png"></div>
                      <div>通信辅助设备用电量</div>
                    </div>
                    <div class="num">{{ thisWeekElectricityList.total[15].num }}<span class="unit">kWh</span></div>
                  </div>
                 </div>
              </div>

              <div class="dialog-list">
          <div class="dialog-item wid100">
            <div class="content-title">
              <span class="title">楼宇本周发电量</span>
            </div>
            <div class="content">
              <div style="display: flex;">
                <div style="width: 50%;">
                  <div class="cFox">
                    <div>
                      <div class="num" style="justify-content: center;">112<span class="unit">kWh</span></div>
                      <div><img src="@/assets/images/service_new/cicleFox.png"></div>
                      <div style="color: #fff;display: flex;justify-content: center;margin-top: 5px;">光伏发电量</div>
                    </div>
                    <div class="left-inf">
                      <div class="name">
                        <div> <img src="@/assets/images/service_new/quantity.png"></div>
                        <div style="padding-left: 5px;">薄膜发电量</div>
                      </div>
                      <div class="num">29<span class="unit">kWh</span></div>
                      <div class="name">
                        <div> <img src="@/assets/images/service_new/quantity.png"></div>
                        <div style="padding-left: 5px;">光伏板发电量</div>
                      </div>
                      <div class="num">29<span class="unit">kWh</span></div>
                    </div>

                  </div>
                  <div></div>
                </div>
                <div style="width: 50%;">
                  <div class="cFox">
                    <div>
                      <div class="num" style="justify-content: center;">56<span class="unit">kWh</span></div>
                      <div><img src="@/assets/images/service_new/cicleFox.png"></div>
                      <div style="color: #fff;display: flex;justify-content: center;margin-top: 5px;">电梯能量回收</div>
                    </div>
                 

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

              <div class="content-title">
                  <span class="title">楼宇今日总用电量</span>
              </div>
              <div class="data-chart">
                 <line-chart
                  :chart-data="buildLineData"
                  :x-axis="buildLineAxis"
                  :yAxis="buildLineYAxis"
                 :legend="lineLegend"
                  y-color="#FFF"
                  l-color="#FFF"
                  width="515px"
                  height="240px"
                  />
              </div>

             <div class="content-title">
               <span class="title">楼宇每月用电量</span>
              </div>
              <div class="data-chart">
                   <line-chart
                  :chart-data="yearLineData"
                  :x-axis="yearLineAxis"
                  :yAxis="yearLineYAxis"
                  :legend="lineLegend"
                  y-color="#FFF"
                  l-color="#FFF"
                  width="515px"
                  height="240px"
                />
               </div>

    </div>
  </div>
</template>


<script>
import LineChart from "@/components/Echarts/LineChart.vue";
import PieChart from "@/components/Echarts/PieChart.vue";
import BarChart from "@/components/Echarts/BarChart.vue";
import echarts from "echarts";
import {

thisWeekElectricity,todayElectricity,monthElectricity,roomLoad,warnDevice,warnEvent,waterState
} from "@/api/screen/service";

export default {
  name: "EnergyRate",
  components: { BarChart, PieChart, LineChart },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  data() {
    return {
      thisWeekElectricityList:{},
      //楼宇每月用电量
     yearLineData: [],
        //楼宇今日总用电量
        buildLineData: [],
       //配电室重要抽屉负荷情况
      lineLegend: {
        top: 0,
        orient: "horizontal",
        right: 0,
        itemWidth: 17, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      yearAllChangeData: {
        energyNum: "",
        reduceName: "",
        reduceNum: "",
      },
    };
  },
  created() {
    //楼宇本周用电量
    this.thisWeekElectricity()
         //楼宇今日总用电量
    this.todayElectricity()
         //楼宇每月用电量
    this.monthElectricity()




  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
     //资产存量
     thisWeekElectricity() {
        thisWeekElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.thisWeekElectricityList=res.data;
        }
      });
    },


    //楼宇今日总用电量
    todayElectricity() {
      todayElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        const buildLineDataList = res.data.map(item => item.Kwh);
        const buildLineDataTime = res.data.map(item => item.time);
      this.buildLineData = [
        {
          name: "当前楼宇",
          type: "line",
          // areaStyle: {
          //   opacity: 0.8,
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //     {
          //       offset: 0.03,
          //       color: "rgba(30, 240, 215, 0.4196)",
          //     },
          //     {
          //       offset: 0.68,
          //       color: "rgba(23, 240, 240, 0)",
          //     },
          //   ]),
          // },
          lineStyle: {
            width: 3, // 设置线宽
            color: "#00EBFC", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '#00EBFC', // 节点颜色
              borderColor: '#00EBFC', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataList,
        },



      ];
      this.buildLineAxis = {
        type: "category",
        data:buildLineDataTime,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        splitArea: false,
        boundaryGap: false,
      };
      this.buildLineYAxis = {
        name: 'Kwh',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },

        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1D2F38', // 背景线颜色
            width: 1// 背景线宽度
          }
        },
        axisTick: {
          show: false,
        },
        splitArea: false
      }
    }
    });
    },

      //楼宇每月用电量
    monthElectricity() {
      monthElectricity(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
        const buildLineDataFirstList= res.data.first.map(item => item.Kwh);
        const buildLineDataSecondList= res.data.second.map(item => item.Kwh);
        const buildLineDataThirdList= res.data.third.map(item => item.Kwh);
        const buildLineDataTime = res.data.first.map(item => item.time);
      this.yearLineData = [
        {
          name: "配电室一",
          type: "line",
          lineStyle: {
            width: 3, // 设置线宽
            color: "#00EBFC", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '#00EBFC', // 节点颜色
              borderColor: '#00EBFC', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataFirstList,
        },
        {
          name: "配电室二",
          type: "line",

          lineStyle: {
            width: 3, // 设置线宽
            color: "#00D390", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#00D390', // 节点颜色
              borderColor: '#00D390', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataSecondList,

        },
        {
          name: "配电室三",
          type: "line",
          lineStyle: {
            width: 3, // 设置线宽
            color: "#FFED00", // 设置线的颜色
            type: 'solid' // 设置直线样式
          },
          smooth: false,
          itemStyle: {
            normal: {
              color: '"#FFED00', // 节点颜色
              borderColor: '#FFED00', // 节点边框颜色
              borderWidth: 4 // 节点边框宽度
            }
          },
          data: buildLineDataThirdList,
        },

      ];
      this.yearLineAxis = {
        type: "category",
        data: [
          "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",
        ],
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#FFF",
          },
        },
        splitArea: false,
        boundaryGap: false,
      };
      this.yearLineYAxis = {
        name: 'Kwh',
        nameTextStyle: {
          color: '#fff',
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "white", // 设置横坐标轴字体颜色为红色
        },

        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#1D2F38', // 背景线颜色
            width: 1// 背景线宽度
          }
        },
        axisTick: {
          show: false,
        },
        splitArea: false
      }
    }
  });
},





  },
};
</script>

<style lang="scss">
.energy-rate-operation {
  .content-area {
    display: flex;
    flex-direction: column;
    padding: 15px 20px 0 15px;
  }

  .content-title {
    width: 100%;
    height: 26px;
    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 16px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 25px;
    .title {
      display: block;
      position: relative;
      top:-5px;
    }
  }

  .data-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 17px;
    .data-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      border-right: 1px solid rgba(25, 252, 222, 0.2);
      .data-detail {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        color: #00ffff;
        margin-top: 11px;
        font-size: 12px;
        .data {
          font-family: "electronicFont";
          font-size: 30px;
        }
      }
    }
    .data-item:last-child {
      border-right: none;
    }

    .rate-area {
      position: relative;
      flex: 1;
      img {
        width: 198px;
        height: 114px;
      }
      .rate {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        .rate-data {
          display: flex;
          flex-direction: row;
          align-items: baseline;
          color: #ffba44;
          .data {
            font-size: 30px;
            font-family: "electronicFont";
          }
          .unit {
            font-size: 12px;
          }
        }
        .desc {
          font-size: 12px;
          width: 58px;
          text-align: center;
        }
      }
    }
  }

  .data-chart {
    margin-top: 12px !important;
    margin-bottom: 20px !important;
  }

  .title-format {
    display: flex;
    flex-direction: row;
    align-items: center;
    img {
      width: 6px;
      height: 24px;
      margin-right: 6px;
    }
    .title-info {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: #ffffff;
      .title-en {
        font-size: 8px;
        color: #ffffff;
        opacity: 0.4;
      }
    }
  }

  .label-cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;

    .unit {
      font-size: 12px;
      color: #ffffff;
    }
    .label-info {
      display: flex;
      align-items: center;

      .label-list {
        display: flex;
        align-items: center;

        .label {
          width: 17px;
          height: 10px;
          background: #43dcdb;
          border-radius: 1px;
        }
        .title {
          font-size: 12px;
          color: #ffffff;
          font-weight: 500;
          padding-left: 4px;
        }
      }
      .label-list:last-child {
        margin-left: 15px;
      }
      .label-list:last-child .label {
        background: #ffd296;
      }
    }
  }
  .worker-list {
    width: 100%;
    margin-top: 25px;

    .worker-top {
      display: flex;

      .icon {
        display: block;
        width: 70px;
        height: auto;
      }
      .worker-top-info {
        padding-left: 10px;

        .desc {
          font-size: 12px;
          color: #ffffff;
          font-weight: bold;
        }
        .num-info {
          width: 100%;
          padding-top: 2px;
          display: flex;
          align-items: center;

          .num {
            font-size: 30px;
            color: #00ffff;
            font-weight: bold;
            font-family: "electronicFont";
          }
          .unit {
            font-size: 12px;
            color: #00ffff;
            font-weight: 500;
            position: relative;
            top: 4px;
          }
          .mar {
            margin-left: 20px;
          }
        }
      }
    }
    .worker-bot {
      width: 100%;
    }
  }
  .cFox{
       display: flex;
       justify-content: space-around;
       margin: 15px 0 15px 0;
    .num {
            font-size: 30px;
            color: #00FFFF;
            font-family: "electronicFont";
            display: flex;
            flex-direction: row;
            align-items: baseline;
    }
            .unit {
              font-size: 12px;
              font-family: 'element-icons';
            }
            .left-inf {
        // padding-left:12px;

        .num {
          font-size: 30px;
          color: #00FFFF;
          font-family: "electronicFont";
          display: flex;
          flex-direction: row;
          align-items: center;


          .unit {
            font-size: 12px;
            font-family: 'PingFangSC';
            font-weight: bold;
            padding-top: 5px;
          }
        }

        .name {
          display: flex;
          font-size: 14px;
          color: #FFFFFF;
          font-family: 'fashionZh';
          padding-top: 4px;
        }


      }
  }
  //左边菜单
  .rightList1{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0px 10px 0px;
    justify-content: space-between;
    .left-list{
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        img{
          display: block;
          width:25px;
          height:25px;
          margin-right: 2px;
        }
        .left-info{
          padding-left:0px;

          .num{
            font-size: 30px;
            color:#00FFFF;
            font-family: "electronicFont";
            display: flex;
            flex-direction: row;
            align-items: baseline;
            .unit{
              font-size: 12px;
              font-family: 'PingFangSC';
            }
          }
          .name{
            display: flex;
            font-size: 14px;
            color:#FFFFFF;
            font-family: 'fashionZh';
            padding-top:4px;
          }
          .arrow {
          width: 0;
          height: 0;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-top: 7px solid #00f0ff;
          margin-top: 6px;
          margin-left: 2px;
        }
        }
      }
  }
  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }

  .unit-label {
    color: rgba(255, 255, 255, 0) !important;
  }
}
</style>