HHECS.Web/src/views/main/index.vue

<template>
  <div>
    <div>
      <el-card shadow="always">
        <el-button
          type="success"
          size="small"
          icon="el-icon-video-play"
          :disabled="startDeal"
          @click="resume"
          >开始处理</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-video-pause"
          :disabled="!startDeal"
          @click="pause"
          >暂停处理</el-button
        >
        <el-divider direction="vertical" />
        <el-tag :type="startDeal ? 'success' : 'info'" effect="dark">
          <i v-if="startDeal" class="el-icon-loading" />
          <i v-else class="el-icon-warning-outline" />
          {{ startDeal == true ? "运行中" : "未运行" }}</el-tag
        >
        <el-divider direction="vertical" />
        <el-switch
          v-model="autoSend"
          active-color="#13ce66"
          inactive-color="#909399"
          active-text="自动下发"
          @change="autoSendStatusChanged"
        />
      </el-card>
    </div>
    <div class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设备监控" name="deviceMonitor">
          <DeviceMonitor ref="deviceMonitor" :start-deal="startDeal" />
        </el-tab-pane>
        <el-tab-pane label="设备数据" name="deviceData">
          <DeviceData ref="deviceData" :start-deal="startDeal" />
        </el-tab-pane>
        <el-tab-pane label="站台数据" name="stationData">
          <StationData ref="stationData" />
        </el-tab-pane>
        <el-tab-pane label="执行与日志" name="taskCompensation">
          <TaskCompensation ref="taskCompensation" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  getAutoSendStatus,
  getExecuteStatus,
  pause,
  resume,
  setAutoSendStatus,
} from "@/api/main";
import { mapGetters } from "vuex";
import DeviceData from "./components/DeviceData.vue"; // 设备数据组件
import DeviceMonitor from "./components/DeviceMonitor.vue"; // 设备监控组件
import StationData from "./components/StationData.vue"; // 站台数据组件
import TaskCompensation from "./components/TaskCompensation.vue"; // 定时任务补偿组件
export default {
  name: "MainPage",
  components: {
    DeviceMonitor,
    DeviceData,
    StationData,
    TaskCompensation,
  },
  data() {
    return {
      startDeal: false, // 开始处理中
      autoSend: false, // 是否自动下发
      activeName: "deviceMonitor", // 默认显示
      interval: null,
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  mounted() {
    this.interval = setInterval(() => {
      this.refreshExecuteStatus();
      this.refreshAutoSendStatus();
    }, 5000);
    this.$refs.deviceMonitor.start();
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  methods: {
    // 开始处理
    resume() {
      resume()
        .then((response) => {
          this.refreshExecuteStatus();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 暂停处理
    pause() {
      pause()
        .then((response) => {
          this.refreshExecuteStatus();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 刷新执行状态
    refreshExecuteStatus() {
      getExecuteStatus()
        .then((response) => {
          this.startDeal = response.data.status == "Running";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 刷新自动下发状态
    refreshAutoSendStatus() {
      // 获取自动下发状态
      getAutoSendStatus()
        .then((response) => {
          this.autoSend = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 自动下发状态改变事件
    autoSendStatusChanged(e) {
      // 获取自动下发状态
      setAutoSendStatus(e)
        .then((response) => {
          this.refreshAutoSendStatus();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClick(tab, event) {
      this.$refs.deviceMonitor.stop();
      this.$refs.deviceData.stop();
      this.$refs.stationData.stop();
      this.$refs.taskCompensation.stop();
      switch (this.activeName) {
        case "deviceMonitor":
          this.$refs.deviceMonitor.start();
          break;
        case "deviceData":
          this.$refs.deviceData.start();
          break;
        case "stationData":
          this.$refs.stationData.start();
          break;
        case "taskCompensation":
          this.$refs.taskCompensation.start();
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>