报警列表样式等调整

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

@@ -4,17 +4,17 @@
       v-model="visible"
       title="故障警告"
       :footer="null"
-      width="60%">
+      width="46%">
       <div class="table-page-search-wrapper">
         <a-form layout="inline" @keyup.enter.native="searchQuery">
           <a-row :gutter="24">
-            <a-col :md="6" :sm="12">
+            <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.username"></j-input>
               </a-form-item>
             </a-col>
-            <a-col :md="6" :sm="8">
+            <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>
@@ -28,14 +28,14 @@
       <a-table
         ref="table"
         size="middle"
-        :scroll="{x:true}"
         bordered
         :rowKey="(record, index) => { return index }"
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
         :loading="loading"
-        class="j-table-force-nowrap">
+        class="j-table-force-nowrap alarm-list-table">
+        <!-- :scroll="{x:true}" -->
         <template>
           <div>
             
@@ -48,6 +48,7 @@
 
 <script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+ import { getAction } from '@/api/manage'
   export default {
     name: '',
     mixins: [JeecgListMixin],
@@ -69,17 +70,41 @@
           {
             title: '报警时间',
             align: "center",
-            dataIndex: 'createTime',
+            dataIndex: 'Time',
+            customRender: (text, record) => {
+              return {
+                children: text,
+                attrs: {
+                  style: 'color: #d7cc3a',
+                },
+              };
+            },
           },
           {
             title: '故障描述',
             align: "center",
-            dataIndex: 'phone',
+            dataIndex: 'Desc',
+            customRender: (text, record) => {
+              return {
+                children: text,
+                attrs: {
+                  style: 'color: #d7cc3a',
+                },
+              };
+            },
           },
           {
             title: '恢复时间',
             align: "center",
             dataIndex: 'updateTime',
+            customRender: (text, record) => {
+              return {
+                children: text,
+                attrs: {
+                  style: 'color: #2da873',
+                },
+              };
+            },
           },
         ],
         dataSource: [
@@ -125,7 +150,7 @@
           },
         ],
         url: {
-          list: "/sys/user/list",
+          list: "/datacoll/webaccess/getAlarmLog",
           // exportXlsUrl: "/sys/user/exportXls",
         },
       }
@@ -135,6 +160,36 @@
     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;
+        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;
+            }else{
+              this.ipagination.total = 0;
+            }
+            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          }else{
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
     }
   }
 </script>
@@ -145,7 +200,19 @@
 <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);
@@ -155,14 +222,97 @@
       border-image: url('~@/assets/visualization/moduleBdBg.png') 4 4 fill;
       border-image-repeat: stretch;
       position: relative;
-      background-color: rgba(15, 57, 91, .3);
+      background-color: rgba(15, 57, 91, .4);
       .ant-modal-header{
         background-color: transparent;
-        
       }
-      .ant-table-wrapper{
-        // background: #000;
+    }
+  }
+  // 表单
+  .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;
+    //   }
+    // }
   }
 </style>