ECS5 / ECS5.0Web · Files

<template>
  <div class="task-compensation">
    <el-row :gutter="20">
      <!-- 左侧区域 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div style="height: calc(100vh - 40px); overflow-y: auto">
          <el-row :gutter="20">
            <!-- 执行线程 -->
            <el-col :span="24">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>执行线程</span>
                  <div style="float: right; position: relative; left: 17vw">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-refresh"
                      @click="getZxxctableData"
                      >调度程序重置</el-button
                    >
                  </div>
                </div>
                <el-table
                  :data="zxxctableData"
                  border
                  height="400"
                  style="width: 100%"
                  :cell-style="{ color: '#000' }"
                  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>
              </el-card>
            </el-col>

            <!-- 诊断 -->
            <el-col :span="24" style="margin-top: 20px">
              <el-card>
                <div slot="header" class="clearfix">
                  <span>诊断</span>
                  <div style="float: right; position: relative; left: 15.5vw">
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-refresh-left"
                      @click="zhengdauntableData"
                      >调度诊断</el-button
                    >
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-delete-solid"
                      @click="clearLog"
                      >诊断日志清除</el-button
                    >
                  </div>
                </div>
                <el-table
                  :data="eqBjtableData"
                  border
                  height="390"
                  style="width: 100%"
                  :cell-style="{ color: '#000' }"
                  stripe
                  :default-sort="{ prop: 'time', order: 'descending' }"
                >
                  <el-table-column
                    sortable
                    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>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 右侧区域 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>调度日志</span>
          </div>
          <el-table
            :data="
              dDtableData.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )
            "
            height="860"
            border
            style="width: 100%"
            :cell-style="{ color: '#000' }"
            :row-class-name="tableRowClassName"
            :default-sort="{ prop: 'time', order: 'descending' }"
          >
            <el-table-column sortable 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>
          <el-pagination
            style="margin-top: 20px"
            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-card>
      </el-col>
    </el-row>
  </div>
</template>

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

  data() {
    return {
      zxxctableData: [],
      eqBjtableData: [],
      dDtableData: [],
      timer: null,
      currentPage: 1, // 当前页码
      total: 100, // 总条数
      pageSize: 10, // 每页的数据条数
    };
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.bllResultCode === 0) {
        return "white-row";
      } else if (row.bllResultCode === 1) {
        return "red-row";
      } else if (row.bllResultCode === 2) {
        return "yellow-row";
      } else if (row.bllResultCode === 200) {
        return "green-row";
      } else if (row.bllResultCode === 201) {
        return "red-row";
      } else if (row.bllResultCode === 202) {
        return "red-row";
      }
      return "";
    },
    getZxxctableData() {
      ResetExecute().then((res) => {
        console.log("重置", res);
        if (res.code == "Success") {
          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;
          } else {
            console.error("获取执行线程数据失败:", res.message);
          }
        })
        .catch((err) => {
          console.error("API请求错误:", err);
        });
    },
    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);
        }
      });
    },

    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },

    handleCurrentChange(val) {
      this.currentPage = val;
    },
    start() {
      this.GetExecuteDetail();
      this.GetExecuteLogs();
      this.timer = setInterval(() => {
        this.GetExecuteDetail();
        this.GetExecuteLogs();
      }, 3000);
    },
    stop() {
      clearInterval(this.timer);
      this.timer = null;
      this.currentPage = 1;
      this.pageSize = 10;
    },
  },
  created() {
    this.GetExecuteDetail();
    this.GetExecuteLogs();
    this.start();
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.task-compensation {
  padding: 20px;
  height: 100vh; /* 确保容器有足够高度 */
}

.el-table {
  margin-top: 10px;
  height: calc(100vh - 100px); /* 动态调整表格高度 */
}

.el-card {
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-table {
  margin-top: 10px;
}
</style>

<style lang="scss" scoped>
//修改表头字体颜色
::v-deep.el-table thead {
  color: #101010;
  font-weight: 600;
}
</style>

<style>
.el-table .white-row {
  background: white !important;
}

.el-table .red-row {
  background: rgba(219, 46, 72, 0.8) !important; /* 红色，透明度调整为 0.8 */
}

.el-table .yellow-row {
  background: rgba(229, 231, 112, 0.8) !important; /* 黄色，透明度调整为 0.8 */
}

.el-table .green-row {
  background: rgba(240, 249, 235, 0.8) !important; /* 绿色，透明度调整为 0.8 */
}
</style>