jn_sis_zhfx/src/views/stateMonitor/Status/Status.vue

<template>
  <HeaderNav @typeFlag="typeFlag" :isAll="true" />
  <div class="status">
    <el-scrollbar>
      <el-row
        class="simp_content"
        style="box-sizing: border-box"
        v-if="datas.length"
      >
        <el-col v-for="(data, index) of datas" :key="index" :span="4.5">
          <StatusPanel :data="data"></StatusPanel>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
import StatusPanel from "@/views/stateMonitor/Status/components/status-panel.vue";
import HeaderNav from "@/components/headerNav/index.vue";
import { getStatusDatas } from "@/api/monitor/index.js";

export default {
  // 名称
  name: "Status",
  // 使用组件
  components: {
    StatusPanel,
    HeaderNav,
  },
  // 数据
  data() {
    return {
      timmer: null, // 遮罩开关
      sourceMap: {}, // 核心数据
      datas: [],
      // wpId1: "",
      wpId: "",
      dwkGzqd: "",
      plGzqd: "",
      zhGzqd: "",
      mchGzqd: "",
      hzjGzqd: "",
      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() {
      getStatusDatas({
        company:
          this.enterpriseIndex == "all" ? "0" : this.enterpriseIndex.toString(),
        type: this.tabIndex.toString(),
      }).then(({ data }) => {
        if (data) {
          this.datas = 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>
.status {
  height: calc(100vh - 7.222vh);
  overflow: hidden;
  .el-col + .el-col {
    padding-left: 0;
  }
  .simp_content {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 352px);
    height: 100;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

// .light-status {
//   .simp_content {
//     display: grid;
//     justify-content: space-evenly;
//     grid-template-columns: repeat(auto-fill, 352px);
//     height: calc(100vh - 117px);
//     overflow-y: auto;
//     overflow-x: hidden;
//   }
//   .simp_ui {
//     width: 353px;
//     height: 229px;
//     background: #fff;
//     border-radius: 8px;
//     margin-bottom: 11px;
//     padding: 0 12px;
//     li {
//       display: flex;
//       margin: 0 auto;
//     }
//   }
// }
// .dark-status {
//   .simp_content {
//     display: grid;
//     justify-content: space-evenly;
//     grid-template-columns: repeat(auto-fill, 352px);
//     height: calc(100vh - 117px);
//     overflow-y: auto;
//     overflow-x: hidden;
//   }
//   .simp_ui {
//     width: 353px;
//     height: 229px;
//     background: rgba(96, 103, 105, 0.2);
//     border-radius: 8px;
//     margin-bottom: 11px;
//     padding: 0 12px;
//     li {
//       display: flex;
//       margin: 0 auto;
//     }
//   }
// }
</style>