ECS5 / ECS5.0Web · Files

<template>
  <div class="task-compensation">
    <div class="div-left">
      <div class="div-left-div">
        <div class="header">
          <div class="text">执行线程</div>
          <el-button
            style="height: 3vh; margin-top: 7px; margin-right: 7px"
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click="getZxxctableData"
            >调度程序重置</el-button
          >
        </div>
        <div style="height: 90%; margin-top: 3px">
          <el-table
            :data="zxxctableData"
            style="width: 100%; height: 100%"
            border
            height="450"
            stripe
            highlight-current-row
          >
            <el-table-column prop="code" label="线程标记" width="180">
            </el-table-column>
            <el-table-column prop="status" label="执行状态" width="180">
            </el-table-column>
            <el-table-column prop="time" label="耗时"> </el-table-column>
            <el-table-column prop="remark" label="备注"> </el-table-column>
            <el-table-column prop="equipmentCodes" label="关联设备">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="div-left-div">
        <div class="header">
          <div class="text">诊断</div>
          <el-button
            style="height: 3vh; margin-top: 7px; margin-right: 7px"
            type="primary"
            size="small"
            icon="el-icon-refresh-left"
            @click="zhengdauntableData"
            >调度诊断</el-button
          >
          <el-button
            style="height: 3vh; margin-top: 7px; margin-right: 7px"
            type="primary"
            size="small"
            icon="el-icon-delete-solid"
            @click="clearLog"
            >诊断日志清除</el-button
          >
        </div>
        <div style="height: 90%; margin-top: 3px">
          <el-table
            :data="eqBjtableData"
            style="width: 100%; height: 100%"
            border
            height="450"
            stripe
            highlight-current-row
          >
            <el-table-column prop="time" label="诊断时间" width="180">
            </el-table-column>
            <el-table-column prop="level" label="日志级别" width="180">
            </el-table-column>
            <el-table-column prop="content" label="日志内容"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="div-righ-div">
      <div
        style="
          text-align: left;
          padding-left: 10px;
          line-height: 3;
          height: 5%;
          background-color: #f5f5f5;
          color: #67a7e6;
        "
      >
        调度日志
      </div>

      <div style="height: 80%; margin-top: 3px">
        <el-table
          :data="
            dDtableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%; height: 100%"
          border
          height="900"
          stripe
          highlight-current-row
        >
          <el-table-column fixed prop="time" label="时间" width="180">
          </el-table-column>
          <el-table-column prop="type" label="分类" width="180">
          </el-table-column>
          <el-table-column prop="bllResultCode" label="处理结果">
          </el-table-column>
          <el-table-column prop="equipmentCode" label="设备"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
          <el-table-column prop="errorCode" label="报错代码"> </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 5px">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dDtableData.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetExecuteDetail,
  GetExecutorDiagnosisInfo,
  GetExecuteLogs,
} from "@/api/main";
export default {
  name: "TaskCompensation",

  data() {
    return {
      zxxctableData: [],
      eqBjtableData: [],
      dDtableData: [],
      timer: null,
      currentPage: 1, // 当前页码
      total: 100, // 总条数
      pageSize: 10, // 每页的数据条数
    };
  },
  methods: {
    getZxxctableData() {
      this.$message({
        message: "调度程序重置",
        type: "success",
      });
      this.zxxctableData = [];
      this.eqBjtableData = [];
      this.dDtableData = [];
      this.currentPage = 1;
      this.pageSize = 10;
    },

    GetExecuteDetail() {
      GetExecuteDetail().then((res) => {
        console.log("执行线程", res);
        if (res.code == "Success") {
          this.zxxctableData = res.data;
        }
      });
    },
    GetExecutorDiagnosisInfo() {
      GetExecutorDiagnosisInfo().then((res) => {
        console.log("诊断", res);
        if (res.code == "Success") {
          this.eqBjtableData = res.data;
        }
      });
    },
    clearLog() {
      this.eqBjtableData = [];
    },
    zhengdauntableData() {
      this.$message({
        message: "调度诊断",
        type: "success",
      });
      this.GetExecutorDiagnosisInfo();
    },
    GetExecuteLogs() {
      GetExecuteLogs().then((res) => {
        console.log("调度日志", res);
        if (res.code == "Success") {
          // 截取最新的 100 条数据
          this.dDtableData = res.data.slice(-100).reverse();
        }
      });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    start() {
      this.timer = setInterval(() => {
        this.GetExecuteDetail();
        this.GetExecuteLogs();
      }, 3000);
    },
    stop() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
  created() {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.task-compensation {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.div-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  .div-left-div {
    background-color: #f5f5f5;
    height: 47%;
    margin: 6px;
  }
}
.div-righ-div {
  width: 50%;
  //background-color: #d71e1e;
  margin: 6px;
  height: 100%;
}
.text {
  color: #67a7e6;
  height: 30px !important;
  line-height: 30px !important;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 9% !important;
  padding: 0 10px;
}
</style>
<style lang="scss" scoped>
//修改表头字体颜色
::v-deep.el-table thead {
  color: #101010;
  font-weight: 600;
}

.success-cell {
  background-color: #27cf35 !important; // 绿色
}
.warning-cell {
  background-color: #d1922d !important; // 黄色
}
.error-cell {
  background-color: #cf384e !important; // 红色
}
</style>