sis_zhfx/src/views/Agc/Agc.vue

<template>
  <div class="agc">
    <el-scrollbar>
      <div class="panel-groups">
        <AgcPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></AgcPanel>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import AgcPanel from "./components/agc-panel.vue";

import store from "@store/index.js";

export default {
  // 名称
  name: "Agc",
  // 使用组件
  components: {
    AgcPanel,
  },
  // 数据
  data() {
    return {
      timmer: null, // 计时器
      datas: [
        {
          title: "某某风电场",
          subTitle: "(调度名称)",
          icon: "fa fa-gears",
          color: "green",
        },
      ],
      btnGroups: [
        {
          icon: "fa fa-fire",
          btns: [
            {
              text: "某某风电场",
              code: "mmfdc1",
            },
            {
              text: "麻黄山风场",
              code: "mhsfc",
            },
            {
              text: "某某风电场",
              code: "mmfdc2",
            },
            {
              text: "某某风电场",
              code: "mmfdc3",
            },
            {
              text: "某某风电场",
              code: "mmfdc4",
            },
          ],
        },
        {
          icon: "fa fa-fire-extinguisher",
          btns: [
            {
              text: "某某光伏",
              code: "mmgf1",
            },
            {
              text: "某某光伏",
              code: "mmgf2",
            },
            {
              text: "某某光伏",
              code: "mmgf3",
            },
            {
              text: "某某光伏",
              code: "mmgf4",
            },
          ],
        },
      ],
    };
  },
  // 函数
  methods: {
    select: function(item) {
      // console.log(item);
    },

    // 请求服务
    requestData(showLoading) {
      let that = this;
      that.API.requestData({
        showLoading,
        method: "POST",
        subUrl: "genreset/getAgcValues",
        // timeout: 600000,
        success(res) {
          let datas = [];
          if (res.data) {
            res.data.forEach((pEle) => {
              pEle.jcxx.icon = "fa fa-gears";
              pEle.jcxx.color = pEle.jcxx.zt === 0 ? "red" : "green";

              let keys = ["llgl", "sjgl", "xdzl", "ycgl"];

              let tb = [
                {
                  title: "理论功率",
                  yAxisIndex: 0,
                  value: [],
                },
                {
                  title: "实际功率",
                  yAxisIndex: 0,
                  value: [],
                },
                {
                  title: "限电指令",
                  yAxisIndex: 0,
                  value: [],
                },
                {
                  title: "预测功率",
                  yAxisIndex: 0,
                  value: [],
                },
              ];

              keys.forEach((key, keyIndex) => {
                pEle.tb.forEach((cEle, cIndex) => {
                 // debugger;
                  tb[keyIndex].value.push({ text: new Date(cEle.time).formatDate("hh:mm"), value: cEle[keys[keyIndex]] || 0 });
                });
              });

              pEle.tb = tb;
              datas.push(pEle);
            });
            that.datas = datas;
          } else {
            that.datas = datas;
          }
        },
      });
    },
  },

  created() {
    let that = this;
    that.$nextTick(() => {
      that.requestData(false);
      that.timmer = setInterval(() => {
        that.requestData(false);
      }, 10000);
    });
  },

  mounted() {
    // 渲染后
    for (let i = 1; i < 12; i++) {
      this.datas.push(JSON.parse(JSON.stringify(this.datas[0])));
      if (i % 2 == 0) {
        this.datas[i].color = "red";
      }
    }
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>

<style lang="less" scoped>
.agc {
  height: calc(100vh - 7.222vh);
  overflow: hidden;
  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .panel-groups {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;

    .panel-item {
      width: calc(25% - 12px);
      height: 29vh;
      margin-left: 16px;
      margin-bottom: 16px;

      &:nth-child(4n + 1) {
        margin-left: 0;
      }
    }
  }
}
</style>