fd_dwgz_zhyw_nx/src/views/stateMonitor/powerPredictMatrix/index.vue

<template>
  <div class="page-wrapper">
    <!-- 头部按钮选项 -->
    <HeaderNav @typeFlag="typeFlag" :isAll="true" />
    <div class="chart-wrapper">
      <div
        class="chart-item"
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(item.name)"
      >
        <div class="chart-item-name">
          <p class="text">{{ item.name }}</p>
        </div>
        <div class="chart-item-chart">
          <multipleLineChartVue
            ref="multipLineChart"
            height="100%"
            width="100%"
            :chartData="item"
          />
        </div>
      </div>
    </div>
    <el-dialog
      class="dialogs"
      width="90%"
      top="120px"
      v-model="displayDialog"
      :show-close="true"
      destroy-on-close
    >
      <template #title>
        <div class="dialog-title">
          <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
          <div class="title">{{ showName }}未来十天功率预测</div>
        </div>
      </template>
      <div class="dialog-body" style="height: 600px">
        <img class="dialog-img" src="@assets/imgs/dialog.png" />
        <div class="dialog-form">
          <div class="date-wrapper">
            开始时间
            <div style="margin-left: 10px">
              <el-date-picker
                v-model="beginDate"
                type="date"
                size="mini"
                placeholder="选择日期"
                popper-class="date-select"
                format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="date-wrapper">
            结束时间
            <div style="margin-left: 10px">
              <el-date-picker
                v-model="endDate"
                size="mini"
                type="date"
                popper-class="date-select"
                placeholder="选择日期"
                format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="btns">
            <el-button round size="mini" class="searchColor">查 询</el-button>
          </div>
        </div>
        <div class="dialog-chart">
          <multipleLineChartVue ref="multipLineChart" :chartData="chartData" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderNav from "@/components/headerNavSta/index.vue";
import multipleLineChartVue from "./components/multiple-line-chart.vue";
import { GetAllPowerData, GetPowerData } from "@/api/factoryMonitor/index.js";
import dayjs from "dayjs";
export default {
  name: "PowerCurveMatrix", //安全监视
  data() {
    return {
      activeTab: -1,
      list: {},
      displayDialog: false,
      showName: "",
      beginDate: "",
      endDate: "",
      format: "YYYY-MM-DD",
    };
  },
  components: {
    HeaderNav,
    multipleLineChartVue,
  },
  created() {
    this.beginDate = dayjs().startOf("day").format(this.format);
    this.endDate = dayjs().add(10, "day").format(this.format);
    this.init();
  },
  methods: {
    init() {
      GetAllPowerData({
        type: this.activeTab == -1 ? "F" : "G",
        beginDate: this.beginDate,
        endDate: this.endDate,
      }).then(({ code, data }) => {
        if (code == 200) {
          let resData = JSON.parse(JSON.stringify(data));
          for (let key in resData) {
            resData[key] = {
              name: "",
              pjfs: [],
              ycfs: [],
              sjgl: [],
              ycgl: [],
              llgl: [],
              lengend: [],
              xAxis: [],
            };
          }
          for (let index in data) {
            resData[index].name = data[index][0].name;
            data[index].forEach((ele) => {
              resData[index].pjfs.push(ele.pjfs);
              resData[index].ycfs.push(ele.ycfs);
              resData[index].sjgl.push(ele.sjgl);
              resData[index].ycgl.push(ele.ycgl);
              resData[index].llgl.push(ele.llgl);
              resData[index].xAxis.push(
                dayjs(ele.hours).format("YYYY-MM-DD HH:mm:ss")
              );
            });
          }
        //   console.log(resData);
          this.list = resData;
        }
      });
    },
    typeFlag(activeTab) {
      this.activeTab = activeTab;
    },
    handleClick(name) {
      this.displayDialog = true;
      this.showName = name;
      this.beginDate = dayjs().startOf("day").format(this.format);
      this.endDate = dayjs().add(10, "day").format(this.format);
    },
  },
};
</script>

<style scoped lang="less">
.page-wrapper {
  height: 100%;
}
.chart-wrapper {
  height: calc(100% - 57px);
  padding: 0 20px 10px 20px;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: 232px;
  //   grid-auto-columns: 935px;
  grid-gap: 20px;
  .chart-item {
    width: 935px;
    height: 232px;
    // border: 1px solid #fff;
    display: flex;
    align-items: center;
    background: url("~@/assets/imgs/power-bg.png") no-repeat;
    .chart-item-name {
      display: flex;
      width: 50px;
      height: 232px;
      border-right: 1px solid #3a3f43;
      justify-content: center;
      align-items: center;
      .text {
        writing-mode: vertical-lr;
        margin: 0;
      }
    }
    .chart-item-chart {
      //   width: calc(100% - 50px);
      flex: 1 0 auto;
      height: 100%;
    }
  }
}
.dialog-body {
  .dialog-form {
    display: flex;
    align-items: center;
    height: 38px;
    .date-wrapper {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #b3b3b3;
      margin-right: 10px;
    }
    .searchColor {
      background: rgba(0, 70, 199, 0.4);
      color: #b3b3b3;
      font-size: 14px;
      border: none;
      width: 80px;
      min-height: 25px !important;

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