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>

          <el-row :gutter="20">
            <!-- 执行线程 -->
            <el-col :span="24">
              <el-card>

                <div slot="header" class="zhx">

                  <span class="title-text">{{ $t("main.eALogging.executionThread") }}</span>

                  <div>

                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-refresh"
                      @click="getZxxctableData"

                      >{{ $t("main.eALogging.schedulingProgramReset") }}</el-button

                    >
                  </div>
                </div>
                <el-table
                  :data="zxxctableData"

                  :empty-text="$t('main.eALogging.noData')"

                  border

                  :height="leftTableHeight"

                  style="width: 100%"
                  :cell-style="{ color: '#000' }"
                  stripe
                  highlight-current-row
                >

                  <el-table-column prop="code" :label="$t('main.eALogging.threadTagging')" width="220">

                  </el-table-column>

                  <el-table-column prop="status" :label="$t('main.eALogging.executionStatus')">

                  </el-table-column>

                  <el-table-column prop="time" :label="$t('main.eALogging.timeConsuming')">

                    <template slot-scope="scope">
                      {{ scope.row.time }} ms
                    </template>
                  </el-table-column>

                  <el-table-column prop="remark" :label="$t('main.eALogging.notes')">

                  </el-table-column>

                  <el-table-column
                    prop="equipmentCodes"

                    width="2000"

                    :label="$t('main.eALogging.associatedDevices')"

                  >

                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>

            <!-- 诊断 -->

            <el-col :span="24" style="margin-top: 10px">

              <el-card>

                <div slot="header" class="zhx">

                  <span class="title-text">{{ $t("main.eALogging.diagnosis") }}</span>

                  <div>

                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-refresh-left"
                      @click="zhengdauntableData"

                      >{{ $t("main.eALogging.schedulingDiagnosis") }}</el-button

                    >
                    <el-button
                      type="primary"
                      size="small"
                      icon="el-icon-delete-solid"
                      @click="clearLog"

                      >{{ $t("main.eALogging.diagnosticLogClearing") }}</el-button

                    >
                  </div>
                </div>
                <el-table

                  :empty-text="$t('main.eALogging.noData')"

                  :data="eqBjtableData"
                  border

                  :height="leftTableHeight"

                  style="width: 100%"

                  :cell-style="{ color: '#fff' }"

                  :row-class-name="tableZDRowClassName"
                  fit

                  :default-sort="{ prop: 'time', order: 'descending' }"
                >
                  <el-table-column
                    sortable
                    prop="time"

                    :label="$t('main.eALogging.diagnosisTime')"

                    width="180"
                  >
                  </el-table-column>

                  <el-table-column prop="level" :label="$t('main.eALogging.logLevel')" width="120">

                    <template slot-scope="scope">
                      {{ levelMap[scope.row.level] || "未知" }}
                    </template>

                  </el-table-column>

                  <el-table-column
                    prop="content"

                    :label="$t('main.eALogging.logContent')"

                    min-width="1200"
                  >

                    <template slot-scope="scope">
                      <div style="white-space: nowrap">
                        {{ scope.row.content }}
                      </div>
                    </template>

                  </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 class="title-text">{{ $t("main.eALogging.dispatchingLog") }}</span>

          </div>

          <el-table

            :data="

              dDtableData

              /*.slice(

                (currentPage - 1) * pageSize,
                currentPage * pageSize

                )
              */

            "

            :empty-text="$t('main.eALogging.noData')"

            :height="rightTableHeight"

            style="width: 100%"

            :cell-style="{ color: '#fff' }"

            :row-class-name="tableRowClassName"
            :default-sort="{ prop: 'time', order: 'descending' }"

            fit

          >

            <el-table-column
              flexd
              sortable
              prop="time"

              :label="$t('main.eALogging.time')"

              width="180"
            >

            </el-table-column>

            <el-table-column
              prop="type"

              :label="$t('main.eALogging.classification')"

              width="180"
              sortable
              :sort-method="sortByType"
            >

            </el-table-column>

            <el-table-column prop="bllResultCode" :label="$t('main.eALogging.processingResults')">

              <template slot-scope="scope">
                {{ bllResultCodeMap[scope.row.bllResultCode] || "未知" }}
              </template>

            </el-table-column>

            <el-table-column prop="equipmentCode" :label="$t('main.eALogging.device')">

            </el-table-column>

            <el-table-column prop="description" :label="$t('main.eALogging.describe')" width="1200">

              <template slot-scope="scope">
                <div style="white-space: nowrap">
                  {{ scope.row.description }}
                </div>
              </template>

            </el-table-column>

            <el-table-column prop="errorCode" :label="$t('main.eALogging.errorCode')">

            </el-table-column>
          </el-table>

          <!-- <el-pagination

            style="margin-top: 15px"

            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,
  GetExecuteLogs,
  GetExecutorDiagnosisInfo,
  ResetExecute,

} from "@/api/main";

export default {
  name: "TaskCompensation",

  data() {

    return {

      zxxctableData: [],
      eqBjtableData: [],
      dDtableData: [],
      timer: null,

      currentPage: 1,
      total: 100,
      pageSize: 10,

      bllResultCodeMap: {

        0: this.$t("main.msg.interactive"),
        1: this.$t("main.msg.error"),
        2: this.$t("main.msg.callThePolice"),
        200: this.$t("main.msg.success"),
        201: this.$t("main.msg.abnormal"),
        202: this.$t("main.msg.fail"),

      },
      levelMap: {

        0: this.$t("main.msg.interactive"),
        1: this.$t("main.msg.error"),
        2: this.$t("main.msg.callThePolice"),
        200: this.$t("main.msg.success"),
        201: this.$t("main.msg.abnormal"),
        202: this.$t("main.msg.fail"),
        401: this.$t("main.msg.unauthorized"),
        403: this.$t("main.msg.prohibitAccess"),

      },

    };
  },
  methods: {

    sortByType(a, b) {
      // 定义分类优先级
      const typePriority = {
        失败: 1,
        异常: 1,
        报警: 2,
        成功: 3,
      };

      // 获取分类的优先级，如果没有定义则默认为4（排在最后）
      const priorityA = typePriority[a.type] || 4;
      const priorityB = typePriority[b.type] || 4;

      // 先按分类优先级排序
      if (priorityA !== priorityB) {
        return priorityA - priorityB;
      }

      // 如果优先级相同，则按时间降序排序
      return new Date(b.time) - new Date(a.time);
    },

    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 "";
    },

    tableZDRowClassName({ row, rowIndex }) {
      if (row.level === 0) {
        return "white-row";
      } else if (row.level === 1) {
        return "red-row";
      } else if (row.level === 2) {
        return "yellow-row";
      } else if (row.level === 200) {
        return "green-row";
      } else if (row.level === 201) {
        return "red-row";
      } else if (row.level === 202) {
        return "red-row";

      } else if (row.level === 401) {
        return "white-row";
      } else if (row.level === 403) {
        return "red-row";

      }
      return "";
    },

    getZxxctableData() {

      ResetExecute().then((res) => {

        console.log(this.$t("main.msg.reset"), res);

        if (res.code == "Success") {
          this.$message({

            message: this.$t("main.msg.schedulerReset"),

            type: "success",
          });
          this.zxxctableData = [];
          this.eqBjtableData = [];
          this.dDtableData = [];
          this.currentPage = 1;
          this.pageSize = 10;
        }

      });
    },

    GetExecuteDetail() {

      GetExecuteDetail().then((res) => {

        console.log(this.$t("main.msg.executionThread"), res); // 确保这里能打印出数据

        if (res.code == "Success") {
          this.zxxctableData = res.data;
        }
      });

    },
    GetExecutorDiagnosisInfo() {
      GetExecutorDiagnosisInfo().then((res) => {

        console.log(this.$t("main.msg.diagnosis"), res);

        if (res.code == "Success") {
          this.eqBjtableData = res.data;
        }
      });
    },
    clearLog() {
      this.eqBjtableData = [];
    },
    zhengdauntableData() {
      this.$message({

        message: this.$t("main.msg.scheDiagnosis"),

        type: "success",
      });
      this.GetExecutorDiagnosisInfo();
    },
    GetExecuteLogs() {
      GetExecuteLogs().then((res) => {

        console.log(this.$t("main.msg.dispatLog"), 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);

  },

  computed: {
    leftTableHeight() {
      return `calc((100vh - 410px) / 2)`;
    },
    rightTableHeight() {
      return `calc(100vh - 325px )`;
    },
  },

};
</script>

<style lang="scss" scoped>
.task-compensation {

  box-sizing: border-box !important;

}

.title-text {
  color: rgb(64, 133, 212);

}

.el-card {

  height: 100%;

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-table {
    // flex: 1;

    ::v-deep .el-table__body-wrapper {
      overflow-y: auto !important;
    }
  }

}

.zhx,

.clearfix {

  height: 30px;

  display: flex;
  justify-content: space-between;
  align-items: center;

}

.title-text {

  margin-top: 10px;

}

</style>

<style lang="scss" scoped>

// 禁用表格行悬停效果
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: inherit !important;
}

// 自定义滚动条样式
::v-deep .el-table__body-wrapper {
  overflow: hidden;
}

::v-deep .el-table__body-wrapper:hover {
  overflow: auto;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #777f87;
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>

<style lang="scss" scoped>

::v-deep.el-table thead {
  color: #101010;
  font-weight: 600;
}

</style>
<style>
.el-table .white-row {

  background: rgb(164, 167, 171) !important;

}

.el-table .red-row {

  background: rgb(245, 108, 108) !important;

}

.el-table .yellow-row {

  background: rgb(233, 173, 82) !important;

}

.el-table .green-row {

  background: rgb(103, 194, 58) !important;

}
</style>