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"
            >调度程序重置</el-button
          >
        </div>
        <div style="height: 90%; margin-top: 3px">
          <el-table
            :data="tableData"
            style="width: 100%; height: 100%"
            border
            height="450"
            stripe
            highlight-current-row
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="address" 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"
            >调度诊断</el-button
          >
          <el-button
            style="height: 3vh; margin-top: 7px; margin-right: 7px"
            type="primary"
            size="small"
            icon="el-icon-delete-solid"
            >诊断日志清除</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
            :row-style="rowStyle"
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
      </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: 90%; margin-top: 3px">
          <el-table
            :data="dDtableData"
            style="width: 100%; height: 100%"
            border
            height="940"
            stripe
            highlight-current-row
          >
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TaskCompensation",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      eqBjtableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dDtableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
    rowStyle() {
      return { backgroundColor: "red" };
    },
  },
};
</script>

<style lang="scss" scoped>
.task-compensation {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  div {
    flex: 1;
    height: 79vh;
  }
}
.div-left {
  display: flex;
  flex-direction: column;
  .div-left-div {
    background-color: #f5f5f5;
    // height: 40vh;
    height: 50%;
    margin: 6px;
  }
}
.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;
}
.div-righ-div {
  //background-color: #d71e1e;
  margin: 6px;
  height: 100%;
}
</style>