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

<template>
  <div class="page-wrapper">
    <!-- 头部按钮选项 -->
    <HeaderNav @firstRender="firstRender" :isAll="true" />
    <div class="chart-wrapper">
      <div
        class="chart-item"
        v-for="(item, index) in list"
        :key="index"
        @dblclick="handleClick(list[index]?.name, index)"
      >
        <div class="chart-item-name">
          <p class="text">{{ list[index]?.name }}</p>
        </div>
        <div class="chart-item-chart">
          <multipleLineChartVue
            ref="multipLineChart"
            height="100%"
            width="100%"
            :type="activeTab"
            :chartData="list[index]"
          />
        </div>
      </div>
    </div>
    <el-dialog
      class="dialogs"
      width="75%"
      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"
                value-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="选择日期"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="btns">
            <el-button
              round
              size="mini"
              class="searchColor"
              @click="handleSearch"
              >查 询</el-button
            >
          </div>
        </div>
        <div class="dialog-chart" v-if="!isDouble">
          <multipleLineChartVue
            ref="multipLineChart"
            :type="activeTab"
            :chartData="singleChartData"
          />
        </div>
        <div class="dialog-chart" v-if="isDouble">
          <div class="carousel-wrapper">
            <el-carousel trigger="click" height="100%" :autoplay="false">
              <el-carousel-item
                v-for="(chart, key) in doubleChartData"
                :key="key"
                :name="doubleChartData[key]?.name"
              >
                <multipleLineChartVue
                  ref="multipLineChart"
                  :chartData="doubleChartData[key]"
                  width="1392px"
                  :type="activeTab"
                  height="580px"
                  :isDouble="isDouble"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </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",
      doubleChartData: [],
      singleChartData: {},
      isDouble: false,
      showWpid: "",
      isSearch: false,
      timer: null,
    };
  },
  components: {
    HeaderNav,
    multipleLineChartVue,
  },
  created() {
    this.beginDate = dayjs().startOf("day").format(this.format);
    this.endDate = dayjs().add(3, "day").format(this.format);
    this.init();
  },
  mounted() {
    this.timer = setInterval(() => {
      this.init();
    }, 15 * 60 * 1000);
  },
  methods: {
    firstRender(tab) {
      this.activeTab = tab;
      this.init();
    },
    init() {
      GetAllPowerData({
        type: this.activeTab == -1 ? "F" : "G",
        beginDate: this.beginDate,
        endDate: this.endDate,
      }).then(({ code, data }) => {
        if (code == 200) {
          this.list = this.dealRes(data);
        }
      });
    },
    dealRes(res) {
      let resData = JSON.parse(JSON.stringify(res));
      for (let key in resData) {
        resData[key] = {
          name: "",
          pjfs: [],
          ycfs: [],
          sjgl: [],
          ycgl: [],
          llgl: [],
          xAxis: [],
        };
      }
      for (let index in res) {
        resData[index].name = res[index][0].name;
        res[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("MM-DD HH:mm:ss"));
        });
      }
      return resData;
    },
    typeFlag(activeTab) {
      this.activeTab = activeTab;
    },
    handleClick(name, id) {
      this.showName = name;
      this.showWpid = id;
      this.beginDate = dayjs().startOf("day").format(this.format);
      this.endDate = dayjs().add(10, "day").format(this.format);
      this.getPowerData();
    },
    getPowerData() {
      GetPowerData({
        wpId: this.showWpid,
        beginDate: this.beginDate,
        endDate: this.endDate,
      }).then((res) => {
        if (res && res.code == 200) {
          if (!this.isSearch) {
            this.displayDialog = true;
          }
          if (Object.keys(res.data).length < 2) {
            this.isDouble = false;
            this.singleChartData = this.dealRes(res.data)[this.showWpid];
          } else if (Object.keys(res.data).length >= 2) {
            this.isDouble = true;
            this.doubleChartData = this.dealRes(res.data);
            console.log(this.doubleChartData);
          }
        }
      });
    },
    handleSearch() {
      this.isSearch = true;
      this.getPowerData();
    },
  },
};
</script>

<style scoped lang="less">
.carousel-wrapper {
  height: 100%;
  width: 100%;
  .el-carousel {
    height: 100%;
    width: 100%;
    .el-carousel__container {
      height: 100%;
      width: 100%;
      .el-carousel__item {
        height: 100%;
        width: 100%;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  //   background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  //   background-color: #d3dce6;
}
.page-wrapper {
  height: 100%;
}
.chart-wrapper {
  height: calc(100% - 57px);
  overflow: auto;
  padding: 0 20px 10px 20px;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: 256px;
  grid-gap: 20px;
  .chart-item {
    width: 935px;
    height: 256px;
    // border: 1px solid #fff;
    display: flex;
    align-items: center;
    background: url("~@/assets/imgs/power-bg1.png") no-repeat;

    .chart-item-name {
      display: flex;
      width: 50px;
      height: 256px;
      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>