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

<template>
  <div
    class="page-wrapper"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-background="rgba(4, 12, 11, 0.8)"
  >
    <!-- 头部按钮选项 -->
    <HeaderNav @firstRender="firstRender" :isAll="true" />
    <div class="wrapper">
      <div class="chart-wrapper">
        <div
          class="chart-item"
           :data-type="$store.state.moreSty"
          v-for="(item, index) in list"
          :key="index"
          :style="{ width: isFixed ? '900px' : '935px' }"
          @dblclick="handleClick(list[index]?.name, index)"
        >
          <div class="chart-item-name">
            <p class="text" title="双击查看详情">{{ 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>
    </div>
    <el-dialog
      class="dialogs"
      width="75%"
      top="120px"
      v-model="displayDialog"
      :show-close="true"
      @close="handleClose"
      destroy-on-close
    >
      <template #title>
        <div class="dialog-title">
          <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"
                :disabled-date="disabledDate"
                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"
                :disabled-date="disabledDate2"
                popper-class="date-select"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="btns">
            <el-button round size="mini" class="buttons" @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";
import dataJson from "./dataJson.json"
export default {
  name: "PowerCurveMatrix", //全景监视
  data() {
    return {
      activeTab: -1,
      list: {},
      displayDialog: false,
      showName: "",
      beginDate: "",
      endDate: "",
      format: "YYYY-MM-DD",
      doubleChartData: [],
      singleChartData: {},
      isDouble: true,
      showWpid: "",
      isSearch: false,
      timer: null,
      loading: false,
      flag: false,
    };
  },
  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.list = dataJson.powerData
    this.loading = false;
    // this.timer = setInterval(() => {
    //   this.flag = true;
    //   this.init();
    // }, 15 * 60 * 1000);
  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    // 时间选择器第一个禁用
    disabledDate(time) {
      if (this.endDate) {
        return time.getTime() > Date.parse(this.endDate);
      } else {
        return null;
      }
    },
    // 时间选择器第二个禁用
    disabledDate2(time) {
      if (this.beginDate) {
        return time.getTime() < Date.parse(this.beginDate);
      } else {
        return null;
      }
    },
    firstRender(tab) {
      this.activeTab = tab;
      clearInterval(this.timer);
      this.timer = null;
      this.flag = false;
    //   this.init();
    //   this.timer = setInterval(() => {
    //     this.flag = true;
    //     this.init();
    //   }, 15 * 60 * 1000);
    },
    init() {
      if (this.flag) {
        this.loading = false;
      } else {
        this.loading = true;
      }

      GetAllPowerData({
        type: this.activeTab == -1 ? "F" : "G",
        beginDate: this.beginDate,
        endDate: this.endDate,
      }).then(({ code, data }) => {
        this.loading = false;
        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: "",
          ycgl: [],
          llgl: [],
          sjgl: [],
          pjfs: [],
          ycfs: [],
          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"));
        resData[index].pjfs= ele.pjfs;
        resData[index].ycfs= ele.ycfs;
        resData[index].sjgl= ele.sjgl;
        resData[index].ycgl= ele.ycgl;
        resData[index].llgl= ele.llgl;
        resData[index].xAxis = ele.xAxis
        });
      }
      return resData;
    },

    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.displayDialog = true;
    //   this.getPowerData();
        this.doubleChartData = this.dealRes(dataJson.diaData);
    },
    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);
          }
        }
      });
    },
    handleClose() {
      this.isSearch = false;
      this.showName = "";
      this.showWpid = "";
      this.singleChartData = [];
      this.doubleChartData = [];
    },
    handleSearch() {
      this.isSearch = true;
      this.getPowerData();
    },
  },
  computed: {
    isFixed() {
      return this.$store.state.isFixed;
    },
  },
};
</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;
}

.page-wrapper {
  height: 100%;
  width: 100%;
  .wrapper {
    height: calc(100% - 57px);
    width: 100%;
    padding: 0 20px 10px 20px;
    overflow-y: auto;
  }
}
.chart-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: 256px;
  grid-gap: 20px;
  padding-bottom: 10px;
  .chart-item[data-type~="greenSty"] {
    background: url("~@/assets/imgs/power-bg1.png") no-repeat;
  }
  .chart-item[data-type~="blueSty"] {
    background: url("~@/assets/imgs/power-bg2.png") no-repeat;
  }
  .chart-item {
    width: 935px;
    height: 256px;
    // border: 1px solid #fff;
    display: flex;
    align-items: center;
    background-size: 100% 100%;
    cursor: pointer;
    .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);

      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;
    }
    .buttons {
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;

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