guan_client/src/views/modules_guAn/visualization/modules/AlarmModalList.vue

<template>
  <div class="alarm-list">
    <a-modal
      v-model="visible"
      title="故障警告"
      :footer="null"
      width="46%">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :lg="18" :md="12">
              <a-form-item label="报警时间">
                <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
                <!-- <j-input placeholder="输入账号模糊查询" v-model="queryParam.Time"></j-input> -->
                <j-date placeholder="请选择报警时间"  v-model="queryParam.Time" :show-time="true" date-format="YY/MM/DD HH:mm:ss" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="12">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>

          </a-row>
        </a-form>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(record, index) => { return index }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="tableChange"
        class="j-table-force-nowrap alarm-list-table">
        <!-- :scroll="{x:true}" -->
        <template>
          <div>
            
          </div>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
 import {JeecgListMixin} from '@/mixins/JeecgListMixin'
 import { getAction } from '@/api/manage'
  export default {
    name: '',
    mixins: [JeecgListMixin],
    data () {
      return {
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: false,
          showSizeChanger: true,
          total: 0,

        },
        visible: false,
        queryParam: {},
        columns: [
          {
            title: '',
            dataIndex: '',
            key: 'rowIndex',
            width: 40,
            align: "center",
            customRender: function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '报警时间',
            align: "center",
            dataIndex: 'Time',
            customRender: (text, record) => {
              return {
                children: text,
                attrs: {
                  style: 'color: #D4DC8C',
                },
              };
            },
          },
          {
            title: '故障描述',
            align: "center",
            dataIndex: 'Desc',
            customRender: (text, record) => {
              return {
                children: text,
                attrs: {
                  style: 'color: #D4DC8C',
                },
              };
            },
          },
          {
            title: '恢复时间',
            align: "center",
            dataIndex: 'updateTime',
            customRender: (text, record) => {
              return {
                children: text,
                attrs: {
                  style: 'color: #2da873',
                },
              };
            },
          },
        ],
        dataSource: [
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
          {
            createTime1: '2023-12-28 13:25:22',
            createTime2: '2023-12-28 13:25:22',
            createTime3: '2023-12-28 13:25:22',
          },
        ],
        url: {
          list: "/datacoll/webaccess/getAlarmLog",
          // exportXlsUrl: "/sys/user/exportXls",
        },
      }
    },
    created () {
    },
    mounted () {
    },
    methods: {
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        console.log(9999,params)
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            // this.dataSource = [];
            this.dataSource = res.result.AlarmTagList;
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
              this.ipagination.current = res.result.current;
              this.ipagination.pageSize = res.result.size;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      tableChange(pagination){
        this.ipagination.current = pagination.current
        this.ipagination.pageSize = pagination.pageSize
        this.loadData()
      },
    }
  }
</script>

<style scoped>
  @import '~@/assets/less/uStyle.less';
</style>
<style lang="less" scoped>
  .alarm-list{
  }
  // 弹窗样式
  .ant-modal-root{
    /deep/ .ant-modal-title{
      color: #fff !important;
    }
    /deep/ .ant-modal-header {
      border-bottom-color: #295085;
    }
    /deep/ .ant-modal-close{
      i{
        color: #fff !important;
      }
    }
    /deep/ .ant-modal-content{
      width: 100%;
      height: calc(100% - 26px);
      border: 1px solid #000;
      border-width: 8px 0 0 6px;
      /* 变相设置边距 */
      border-image: url('~@/assets/visualization/moduleBdBg.png') 4 4 fill;
      border-image-repeat: stretch;
      position: relative;
      background-color: rgba(15, 57, 91, .4);
      .ant-modal-header{
        background-color: transparent;
      }
    }
  }
  // 表单
  .ant-form{
    /deep/ .ant-form-item-label{
      label{
        color: #fff !important;
      }
    }
    /deep/ .ant-input{
      background: rgba(6,23,48,.5);
      color: #fff;
    }
    /deep/ .ant-btn-primary{
      background: transparent;
      // background: #0b2243d9;
      // border-color: #fff;
    }
  }
  // 表格样式
  .alarm-list-table{
    /deep/ .ant-table-placeholder{
      background-color: transparent;
      border: none;
      // border-color: #044b90 !important;
    }
    /deep/ .ant-table-bordered .ant-table-thead > tr > th{
      border-color: #044b90 !important;
    }
    /deep/.ant-table-bordered .ant-table-tbody > tr > td{
      border-color: #044b90 !important;
      padding: 6px !important;
    } 
    /deep/ .ant-table-bordered .ant-table-body > table{
      border-color: #044b90 !important;
    }
    /deep/ .ant-table-content{
      background: rgba(2,8,20, .5);
      // background: rgba(15, 57, 91, .5);
      color: #fff;
    }
    /deep/ .ant-table-thead > tr > th{
      background: transparent;
      color: #fff;
    }
  }
  // 分页样式
  /deep/ .ant-pagination{
    color: #fff !important;
    // 箭头
    .ant-pagination-prev a, .ant-pagination-next a{
      color: #fff;
    }
    /deep/ .ant-pagination-disabled a{
      color: #fff;
    }
    // 页数
    .ant-pagination-item{
      a{
        color: #fff;
      }
    }
    .ant-pagination-item-active{
      background: #05162f;
      border-color: transparent;
      a{
        color: #fff;
      }
    }
    /deep/ .ant-pagination-options-quick-jumper{
      input{
        background: #05162f !important;
        color: #fff !important;
      }
    }
    // 每页选择
    .ant-select-selection{
      background: #05162f;
      color: #fff;
      border-color: transparent;
    }
    // .ant-select-dropdown{
    //   background: #05162f;
    //   border-color: transparent;
    //   .ant-select-dropdown-menu-item{
    //     color: #fff;
    //   }
    // }
  }
  // a-table暂无数据
  ::v-deep .ant-empty-normal{
    color: #fff;
  }
</style>