ims-gyee/src/views/layout/economicsOperation/analyse/cleanAnalyse/components/powerDetails.vue

<template>
  <div class="body-wrapper">
    <div class="form-wrapper">
      <div class="date-wrapper">
        开始时间
        <div class="date-timer">
          <el-date-picker
            v-model="starttime"
            type="datetime"
            size="mini"
            placeholder="选择时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="date-wrapper">
        结束时间
        <div class="date-timer">
          <el-date-picker
            v-model="endtime"
            size="mini"
            type="datetime"
            placeholder="选择时间"
            value-format="YYYY-MM-DD HH:mm:ss"
          >
          </el-date-picker>
        </div>
      </div>
      <el-button
        style="margin-left: 15px"
        round
        size="mini"
        class="searchBtn"
        @click="searchChartData"
        >查询
      </el-button>
    </div>
    <div class="chart-wrapper">
      <doubleLineChart width="100%" height="100%" :list="lineData" />
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { getApiCleanAnalyseDetails } from "@/api/monthlyPerformanceAnalysis.js";
import doubleLineChart from "@/components/chart/line/double-line-chart.vue";
export default {
  name: "powerDetails", //支路功率曲线图
  components: { doubleLineChart },
  props: {},
  data() {
    return {
      starttime: "",
      endtime: "",
      currentId: "",
      title: "",
      lineData: [],
    };
  },
  created() {},
  methods: {
    init(row) {
      this.currentId = row.nemCode;
      this.title = row.aname;
      this.searchChartData();
    },
    async searchChartData() {
      let params = {
        branch: this.currentId,
        beginDate: this.starttime,
        endDate: this.endtime,
        interval: this.numgap,
      };
      const { data } = await getApiCleanAnalyseDetails(params);
      this.lineData = [
        {
          name: "实际功率",
          type: "line",
          stack: "Total",
          data: data.map((item) => item.actualPower.toFixed(2)),
          time: data.map((item) =>
            dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
          ),
        },
        {
          name: "理论功率",
          type: "line",
          stack: "Total",
          data: data.map((item) => item.theoreticalPower.toFixed(2)),
          time: data.map((item) =>
            dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
          ),
        },
      ];
    },
  },
};
</script>
<style lang="less" scoped>
.body-wrapper ::v-deep {
  height: 100%;
  display: flex;
  flex-direction: column;
  .form-wrapper {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #b3b3b3;
    margin-left: 10px;
    margin-bottom: 10px;
    .date-wrapper {
      display: flex;
      align-items: center;
      margin-right: 15px;
      .date-timer {
        margin-left: 10px;
        .el-input .el-input__inner {
          font-size: 13px;
          color: #b3b3b3;
        }
        .el-input-number {
          .el-input-number__decrease,
          .el-input-number__increase {
            height: 28px;
            top: 0;
          }
        }
      }
    }
    .searchBtn {
      background-color: rgba(0, 70, 199, 0.2);
      border: 1px solid #3b4c6c;
      color: #b3b3b3;
      font-size: 14px;

      &:hover {
        background-color: rgba(0, 70, 199, 0.5);
        color: #ffffff;
      }
    }
  }
  .chart-wrapper {
    height: calc(100% - 40px);
  }
}
</style>