<template>
  <!-- 数据监控 -->
  <div class="payHistories">
    <el-row>
      <el-col>
        <h3>{{ $t(`menu.dataMonitoring`) }}</h3>
        <!--  :cell-style="{ 'text-align': 'right' }" -->
        <el-table
          :data="tableData2"
          class="table"
          max-height="850"
          :header-cell-style="{ 'text-align': 'center' }"         
          :cell-style="cellStyle"
          :empty-text="$t(`home.loadingData`)"
        
        >          <!-- <el-table-column prop="date" label="序号" width="180">
          </el-table-column> -->
          <el-table-column prop="name"  :label="$t(`formula.name`)" align="center">
          </el-table-column>
          <el-table-column prop="tableTime" :label="$t(`formula.updateTime`)" align="center"> </el-table-column>
          <el-table-column prop="update_interval" :label="$t(`formula.updateInterval`)" align="center" > </el-table-column>
          <el-table-column prop="time" :label="$t(`formula.queryTime`)" align="center"> </el-table-column>
          <el-table-column prop="state" :label="$t(`formula.state`)" align="center">  </el-table-column>        
        </el-table>

        <!-- 确认弹窗 -->
        <el-dialog
          :title="$t(`pay.Reminder`)"
          :visible.sync="dialogVisible"
          width="30%"         
        >
          <span>{{ msg }}</span>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="dialogVisible = false">{{ $t(`pay.cancel`) }}</el-button>
            <el-button size="small" type="primary" @click="dialogVisible = false"
              >{{ $t(`pay.confirm`) }}</el-button
            >
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],

  
};
</script>

<style lang="scss" scoped>
.payHistories {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  // height: 100vh;
  width: 100%;
  min-height:calc(100vh - 60px);
}

/* 设置滚动条宽度和高度 */
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//     width: 8px; /* 横向滚动条 */
//     height: 8px; /* 纵向滚动条 必写 */
// }
// /* 设置滚动条样式 */
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//     background-color: #dde;
//     border-radius: 3px;
// }

// .chart {
//   outline: 1px solid rgba(0, 0, 0, 0.5);

//   text-align: center;
// }
.table {
  margin-top: 10px;
  outline: 1px solid rgba(0, 0, 0, 0.5);
  // border: 1px solid red;
}
// //留言数量
// .information {
//   //  outline: 1px solid rgba(0,0,0,0.5);
//   padding: 5px 10px;
//   // outline: 1px solid red;
//   width: 100%;
//   font-size: 15px;
//   display: flex;
//   margin-top: 5px;
//   font-weight: 600;
//   // span{

//   //   display: inline-block;
//   //   width: 100px;
//   //   //  outline: 1px solid red;
//   //    text-align: right;

//   // }
//   span:nth-of-type(1) {
//     display: inline-block;
//     //  outline: 1px solid red;
//     width: 150px;
//   }
//   .num {
//     color: #21a0ff;
//     display: inline-block;
//     width: 100px;
//     text-align: left;
//     //  outline: 1px solid red;
//     font-weight: 600;
//   }
// }

// .replyDialog {
//   // border: 1px solid red;
//   width: 60%;
//   margin: 0 auto;
// }
.abnormal{//异常
  color: red;
}
.normal{
  color: #000;
  
}
</style>
<style >
</style>
