index.vue 2.12 KB
<template>
  <div>
    <div>
      <el-card shadow="always">
        <el-button type="success" @click="resume">开始处理</el-button>
        <el-button type="danger">暂停处理</el-button>
        <el-tag style="margin-left: 10px" type="info" effect="dark"
          >未运行</el-tag
        >
        <el-tag type="success" effect="dark">运行中</el-tag>
        <el-switch
          style="margin-left: 10px"
          v-model="value1"
          active-text="按月付费"
        >
        </el-switch>
      </el-card>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="设备监控" name="first">
        <DeviceMonitor />
      </el-tab-pane>
      <el-tab-pane label="设备数据" name="second">
        <DeviceData />
      </el-tab-pane>
      <el-tab-pane label="站台数据" name="third">
        <StationData />
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">
        <TaskCompensation />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { resume } 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: "main",
  components: {
    DeviceMonitor,
    DeviceData,
    StationData,
    TaskCompensation,
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    //开始处理
    resume() {
      return new Promise((resolve, reject) => {
        resume().then(response => {
          console.log(response)
          resolve(true)
        }).catch(err => {
          console.log(err)
          reject(false)
        })
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>