EventOperation.vue

<template>
  <div id="main">
    <el-container>
      <el-header style="text-align: left; font-size: 10px" height = "25px" width = "auto">
        <!-- 条件查询工具栏 -->
        <el-row :gutter="20">
          <el-col :span="1.5"><label style="font-size: 10px" >发生时间：</label></el-col>
          <el-col :span="4.5">
            <el-date-picker
            v-model="queryEventTime"
            style="width: 180px"
            type="datetime"
            size="mini"
            format="yyyy-MM-dd HH:mm"
            :clearable="false"
            align="center"
            :picker-options="startDatePicker"
            @change="beginDateChange"
            placeholder="选择时间">
          </el-date-picker></el-col>
          <el-col :span="1.5"><label style="font-size: 10px" >事件类型：</label></el-col>
          <el-col :span="4.5">
            <el-select size = 'mini' v-model="queryEventType" placeholder="请选择" style="width: 180px" :clearable="true">
              <el-option
                v-for="item in optionsEventType"
                :key="item.deviceKey"
                :label="item.deviceName"
                :value="item.deviceKey">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1.5"><label style="font-size: 10px; width: 100%" >事件发生原因：</label></el-col>
          <el-col :span="4.5">
            <el-select size = 'mini' v-model="queryCause" placeholder="请选择" style="width: 180px" :clearable="true">
              <el-option
                v-for="item in optionsCause"
                :key="item.code"
                :label="item.cause"
                :value="item.cause">
              </el-option>
            </el-select>
          </el-col>
          <el-button size='mini' icon="el-icon-search" type="primary" @click="queryEventOperationByCondition"
                     v-loading.fullscreen.lock="fullscreenLoading">查询
          </el-button>
        </el-row>
      </el-header>
      <!-- table数据表格 -->
      <el-main style="width: 99%">
        <el-table
          :empty-text="$t('common.noData')"
          ref="multipleTable"
          :data="eventOperationTableList"
          :row-style="rowStyleClass"
          :cell-style="cellStyleClass"
          :header-row-style="{height:'22px', padding:'0'}"
          :header-cell-style="{height:'22px', fontSize:'10px', color:'#595959', background:'#EBEEF5'}"
          :height="tableHeight"
          :max-height="tableHeight"
          style="font-size: 10px; width: 1000px; text-align:left;"
          stripe
          tooltip-effect="dark"
          :highlight-current-row="true"
          :default-sort = "{prop: 'firstTime', order: 'descending'}"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            v-if="false"
            width="28">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="eventTime"
            label="发生时间"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="eventType"
            label="事件类型"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="cause"
            label="事件发生原因"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import Vue from 'vue';
  import VueResource from 'vue-resource'
  import ElCol from 'element-ui/packages/col/src/col'

  let protocal = '';
  let ip = '';
  let project = '';
  let port= '';
  export default {
    name: 'EventOperation',
    data () {
      return {
        /*--------下拉菜单选项---------------*/
        optionsEventType: [],   //事件类型选择列表
        optionsCause: [],   //事件发生原因选择列表

        /*---------选择的内容-------------*/
        queryEventTime: '',   //发生时间
        queryEventType: '',   //事件类型
        queryCause: '',   //事件发生原因

        /*----------获取内容-----------------------*/
        eventOperationList:[],   //事件管理列表
        eventOperationTableList:[],   //事件管理表格数据
      }
    },
    beforeCreate() {
      $.ajax({
        url:'./static/ipconfig.json',//url路径
        type:'GET', //GET
        async:false, //或false,是否异步
        timeout:5000, //超时时间
        dataType:'json', //返回的数据格式：
        success:function(data,textStatus,jqXHR){
          protocal = data.protocal;
          ip = data.ip;
          project = data.project;
          port= data.port;
        },
        error:function(xhr,textStatus){
          console.log("ipconfig配置失败！");
        }
      })
    },
    created: function () {
      this.getEventManagementList();
    },
    methods:{
      /**
       * 查询按钮响应
       *
       */
      queryEventOperationByCondition:function () {
        this.eventOperationTableList = this.eventOperationList;
      },

      /**
       * 获取事件管理列表
       */
      getEventManagementList:function () {
        this.$http.get(protocal + ip + port + project + 'cxf/nms/alarm/alarmevent/').then(result => {
          if (result.body.result) {
            // 成功了！
            this.eventOperationList = result.body.returnValue
          } else {
            // 失败了
            this.$message.error('Error ' + result.body.faultCode + ':' + result.body.faultCause)
          }
        })
      },


    }
  }

</script>

<style lang="scss" scoped>
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 30px;
  }
  /deep/ .el-column-padding{
    padding-bottom: 10px!important;
    padding-top: 0!important;
  }
  /deep/ .caret-wrapper{
    height: 22px!important;
  }
  /deep/ .sort-caret.ascending{
    top: 0px!important;
  }
  /deep/ .sort-caret.descending{
    top: 12px!important;
  }


</style>