jn_sis_zhfx/src/views/stateMonitor/Agc/Agc.vue

<template>
  <HeaderNav @typeFlag="typeFlag" :isAll="true" />
  <div class="agc">
    <el-scrollbar>
      <el-row
        v-if="datas.length"
        class="panel-groups"
        style="box-sizing: border-box"
      >
        <el-col :span="5.6" v-for="data of datas" :key="data.id">
          <AgcPanel :obj="data"></AgcPanel>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
import AgcPanel from "./components/agc-panel.vue";
import { getAgcDatas } from "@/api/monitor/index.js";
import HeaderNav from "@/components/headerNav/index.vue";
export default {
  // 名称
  name: "Agc", //agc监视
  // 使用组件
  components: {
    AgcPanel,
    HeaderNav,
  },
  // 数据
  data() {
    return {
      timmer: null, // 计时器
      datas: [],
      activeTab: "all",
      tabIndex: 0,
      enterpriseIndex: "all",
    };
  },
  // 函数
  methods: {
    // 头部tab选择
    typeFlag(activeTab, enterpriseIndex) {
      this.activeTab = activeTab;
      this.tabIndex = activeTab == "all" ? 0 : activeTab == "fc" ? -1 : -2;
      this.enterpriseIndex = enterpriseIndex;
      this.$nextTick(() => {
        this.requestData();
      });
    },
    // 请求服务
    requestData() {
      getAgcDatas({
        company:
          this.enterpriseIndex == "all" ? "0" : this.enterpriseIndex.toString(),
        type: this.tabIndex.toString(),
      }).then((res) => {
        if (res.data) {
          this.datas = res.data.data;
        } else {
          this.datas = [];
        }
      });
    },
  },
  watch: {},
  created() {
    let that = this;
    that.$nextTick(() => {
      that.requestData();
    });
  },
  mounted() {
    this.timmer = setInterval(() => {
      this.requestData();
    }, 5000);
  },
  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: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 442px);
    overflow-y: auto;
    overflow-x: hidden;
    .el-col + .el-col {
      padding-left: 0;
    }
  }
}
</style>