data_governance/src/views/homecomponents/EquipmentAnalysis/ComprehensiveQuery.vue

<template>
  <div class="content-main">
    <div class="content-body-wrap">
     <div class="content-body">
       <div class="content-main-manage">
          <div class="search-list">
            <div class="search-left">
              <Form class="common-form common-form-list" ref="tableParams" :model="tableParams" inline>
                <FormItem label="" prop="applicationId">
                  <Select v-model="tableParams.applicationId" placeholder="来源应用" @on-change="selectApp">
                    <Option v-for="item in appData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="" prop="equipmentTypeId">
                  <Select v-model="tableParams.equipmentTypeId" placeholder="设备类型">
                    <Option v-for="item in equipTypeData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="" prop="lineId">
                  <Select v-model="tableParams.lineId" placeholder="线路" @on-select="selectLine">
                    <Option v-for="item in lineTypeData" :value="String(item.id)" :key="item.id">{{ item.lineName }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="" prop="stationId">
                  <Select v-model="tableParams.stationId" placeholder="站点">
                    <Option v-for="item in stationTypeData" :value="String(item.id)" :key="item.id">{{ item.stationName }}</Option>
                  </Select>
                </FormItem>
                 <FormItem label="" prop="alertRankId">
                  <Select v-model="tableParams.alertRankId" placeholder="告警等级" ref="selectRank">
                    <Option v-for="item in alarmLevelData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                 <FormItem label="" prop="processingStatus">
                  <Select v-model="tableParams.processingStatus" placeholder="处理状态">
                    <Option v-for="item in alarmStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
                  </Select>
                </FormItem>
                 <FormItem label="" prop="operationUserId">
                  <Select v-model="tableParams.operationUserId" placeholder="处理人">
                    <Option v-for="item in operateData" :value="item.value" :key="item.value">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="">
                  <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" placeholder="告警时间范围" class="common-date-picker date-picker-main" :clearable="false" :editable="false" @on-change="changePicker"></DatePicker>
                </FormItem>
                <FormItem label="">
                  <DatePicker type="datetimerange" :value="dateOperateRange" format="yyyy-MM-dd HH:mm:ss" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
                </FormItem>
                <FormItem label="" prop="keywords">
                  <Input placeholder="输入关键字查询" clearable search v-model="tableParams.keywords" />
                </FormItem>
                <FormItem label="" >
                  <Button type="primary" class="common-btn-search" @click="searchClick">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 筛选
                  </Button> 
                  <Button type="primary" class="common-btn-search" style="margin-left:10px" @click="resetClick('tableParams')">
                    <Icon type="ios-search" style="margin-right:4px;font-size: 16px"/> 重置
                  </Button>   
                </FormItem>
              </Form>
            </div>
          </div>
          <!-- <div class="btn-container">
            <span class="btn-container-download" style="opacity: 1">
              <i class="iconfont icon-xiazai" style="cursor:pointer;color:#0185EA;fontSize:20px;marginRight:6px"></i>下载列表筛选结果
            </span>
            <div>
            </div>
          </div> -->
          <div class="manage-main-center">
            <Table :columns="columns" :data="tableData" class="common-table app-table" no-data-text="" :row-class-name="rowClassName" :loading="loading" @on-selection-change="selectChange">
              <template slot="loading">
                  <Loading-animation></Loading-animation>
              </template>
              <template slot-scope="{ row }" slot="alertRankColor">
                <i class="iconfont icon-gaojing1" style="vertical-align: middle" :style="'color:' + row.alertRankColor" v-show="row.alertRankColor"></i>
              </template>
            </Table>
          </div>
          <div class="common-page">
            <div class="common-page-total">
              共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
            </div>
            <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
          </div>
        </div>
     </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ComprehensiveQuery",
  data() {
    return {
       alarmParams: {
        keywords: '',
        enabled: '',
        beginDate: '',
        endDate: '',
        pageNum: 1,
        pageSize: 10
      },
      applicationParams: {
        level: '',
        lineId: '',
        stationId: '',
        equipmentCheck: '',
        instrumentCheck: '',
        pageNum: 1,
        pageSize: 9999
      },
      appParams: {
        applicationId: '',
        equipmentTypeId: '',
        keywords: '',
        pageNum: 1,
        pageSize: 9999
      },
      loading: true,
      dateRange: [],
      dateOperateRange: [],
      tableParams: {
        processingStatus: '',
        operationUserId: '',
        keywords: '',
        applicationId:'',
        equipmentTypeId: '',
        lineId: '',
        stationId: '',
        alertRankId: '',
        beginAlertTime: '',
        endAlertTime: '',
        beginUpdateTime: '',
        endUpdateTime: '',
        alertRankEnabled: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      rowObj: {},
      lineTypeData: [],
      stationTypeData: [],
      alarmLevelData: [],
      equipTypeData: [],
      appData: [],
      alarmStatus: [],
      operateData: [],
      columns: [
           {
            title: '告警等级',
            key: 'alertRankName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '警示颜色',
            slot: 'alertRankColor',
            align: 'center',
            width: 90,
          },
          {
            title: '告警时间',
            key: 'alertTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '线路',
            key: 'lineName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
           {
            title: '站点',
            key: 'stationName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
           {
            title: '来源应用',
            key: 'appName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          }, 
          {
            title: '设备类型',
            key: 'equipmentTypeName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '设备名称',
            key: 'equipmentName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '告警内容',
            key: 'alertContent',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '处理状态',
            key: 'processingStatusDesc',
            align: 'center',
            width: 114,
            render:(h,params)=>{
              let color = params.row.processingStatusDesc == '已清除' ? '#E92E2E' : '#ffffff'
              return h('span', {style:{color: color}},params.row.processingStatusDesc)
            }
          },
          {
            title: '操作时间',
            key: 'updateTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
           {
            title: '操作人',
            key: 'operationUserName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
      ],
    };
  },
  created () {
    if (this.$route.params.alertRankId) {
      this.tableParams.alertRankId = this.$route.params.alertRankId
    } else {
      this.tableParams.alertRankId = ''
    }
  },
  mounted() {
    this.getType()
    this.getTableData()
  },
  //  // 离开当前路由之前的钩子函数 
  // beforeRouteLeave(to, form, next) {
  //   next()
  // },
  methods: {
     changePicker (date) {
      this.tableParams.beginAlertTime = date[0]
      this.tableParams.endAlertTime = date[1]
    },
    changeOperatePicker (date) {
      this.tableParams.beginUpdateTime = date[0]
      this.tableParams.endUpdateTime = date[1]
    },
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    getType  () {
       //获取所属线路
      this.$get('metroapi/lineStation/queryLine', {lineName:''}).then(res=>{
        if (res.httpCode == 1 ){
          this.lineTypeData = res.data
          this.lineTypeData.unshift({ id: '-1', lineName: '线路' })
          this.getStationData ('-1')
        } else {
          this.lineTypeData = []
        }
      })
      // 获取归属应用
      this.$get('metroapi/application/info/list', this.applicationParams).then(res=>{
        if (res.httpCode == 1 ){
          this.appData = res.data.data
          this.appData.unshift({ id: '-1', appName: '来源应用' })
        } else {
          this.appData = []
        }
      })
      // 告警等级
      this.$get('metroapi/alert/rank/list', this.alarmParams).then(res=>{
        if (res.httpCode == 1 ){
          this.alarmLevelData = res.data.data
          this.alarmLevelData.unshift({ id: '-1', name: '告警等级' })
          this.alarmLevelData.push({ id: 0, name: '无等级' })
        } else {
          this.alarmLevelData = []
        }
      })
      // 告警状态
      this.$get('metroapi/dic/queryDictionary', {name:'告警处理状态'}).then(res=>{
        if (res.httpCode == 1 ){
          this.alarmStatus = res.data
          this.alarmStatus.unshift({ id: '-1', value: '处理状态' })
        } else {
          this.alarmStatus = []
        }
      })
      // 获取处理人数据
      this.$get('metroapi/alert/processing/operationUser').then(res=>{
        if (res.httpCode == 1 ){
          this.operateData = res.data.data
          this.operateData.unshift({ value: '-1', name: '处理人' })
        } else {
          this.operateData = []
        }
      })
    },
    selectLine (val) {
      // 获取站点类型
      this.tableParams.stationId = ''
      this.tableParams.lineId = val.value
      if (this.tableParams.lineId) {
        this.getStationData(val.value)
      }
    },
    // 获取所属站点
    getStationData (lineId) {
      if(lineId == -1) {
        this.stationTypeData = [{ id: '-1', stationName: '站点' }]
      } else {
        this.$get('metroapi/lineStation/queryStationByLineId', {lineId:lineId}).then(res=>{
          if (res.httpCode == 1 ){
            this.stationTypeData = res.data
            this.stationTypeData.unshift({ id: '-1', stationName: '站点' })
          }
        })
      }
    },
    selectChange (selection) {
      this.idArr = selection.map(item => item.id)
    },
    // 获取表格数据
    getTableData (type) {
      let params = {}
      params = JSON.parse(JSON.stringify(this.tableParams))
      if (type == 'reset') { // 页面跳转重置数据 params 不会随this.tableParams里属性值变化而变化，所以采用此种方法
        params.alertRankId = ''
      }
      params.lineId = params.lineId == '-1' ? '':params.lineId
      params.stationId = params.stationId == '-1' ? '':params.stationId
      params.alertRankId = params.alertRankId == '-1' ? '':params.alertRankId
      params.applicationId = params.applicationId == '-1' ? '':params.applicationId
      params.equipmentTypeId = params.equipmentTypeId == '-1' ? '':params.equipmentTypeId 
      params.processingStatus = params.processingStatus == '-1' ? '':params.processingStatus
      params.operationUserId = params.operationUserId == '-1' ? '':params.operationUserId
      this.loading = true
      this.$get('metroapi/alert/processing/details', params).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            }
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
          }
        })
    },
    selectApp (val) {
      this.appParams.applicationId = val
      this.tableParams.equipmentTypeId = ''
      if (val) {
        this.getAddEquipType( this.appParams)
      }
    },
    // 获取设备类型 
    getAddEquipType (params) {
      if (params.applicationId == '-1') {
        this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
      } else {
        this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
          if (res.httpCode == 1 ){
            this.equipTypeData = res.data.data
            this.equipTypeData.unshift({ equipmentTypeId: '-1', equipmentName: '设备类型' })
          } else {
            this.equipTypeData = []
          }
        })
      }
    },
    searchClick () {
      this.tableParams.pageNum = 1
      this.getTableData()
      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
    },
    resetClick (name) {
     this.dateRange = []
     this.tableParams.beginAlertTime = ''
     this.tableParams.endAlertTime = ''
     this.dateOperateRange = []
     this.tableParams.beginUpdateTime = ''
     this.tableParams.endUpdateTime =  ''
     this.tableParams.alertRankId = undefined 
     this.$refs.selectRank.reset() // 默认值，清空select值
     this.stationTypeData = [{ id: '-1', stationName: '站点' }]
     this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData('reset')
    },   
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
  padding: 10px;
}

.right-main {
  height: 100%;
  padding: 10px 0 0;
}
.content-main-manage {
  position: relative;
  height: 100%;
}
.search-list {
  display: flex;
  padding: 10px 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 164px;
     padding-right: 10px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
   >>> .ivu-input {
     width: 160px;
     height: 32px;
   }
   >>> .common-date-picker .ivu-input {
    width: 332px;
   }
   >>> .ivu-input-prefix, >>> .ivu-input-suffix {
     height: 32px;
     line-height: 32px;
   }
   >>> .ivu-input-icon {
     height: 32px;
     line-height: 32px;
   }
   >>> .date-picker-main .ivu-date-picker-header {
    border-bottom: 0.0052083333rem solid #204384;
 }
}
.btn-container {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  color: #0185EA;
  font-size: 14px;
  .btn-container-download {
    cursor: pointer;
  }
  .common-corrections {
    background: #053B4A;
    border: 1px solid #0098C2;
    color: #FFFFFF;
    margin-right: 5px;
  }
  .common-eliminate {
    background: #4C2215;
    border: 1px solid #8E1919;
    color: #FFFFFF;
    margin-right: 5px;
  }
  .common-confirm {
    background: #0C3423;
    border: 1px solid #08AF68;
    color: #FFFFFF;
    margin-right: 5px;
  }
  .common-forward {
    background: #413A09;
    border: 1px solid #A69311;
    color: #FFFFFF;
  }
}
.common-form {
  display: flex;
  flex-wrap: wrap;
}
>>> .common-form-list .ivu-form-item {
  margin-bottom: 10px;
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 150px);
}
.common-table {
  max-height: 100%;
}
// >>> .common-table .ivu-table th {
//   height: 50px;
//  }
//  >>> .common-table .ivu-table td {
//   height: 50px;
//  }
//   >>> .common-table .ivu-spin-fix {
//    top: 50px;
//  }
 >>> .common-table .ivu-table th {
  height: 54px;
 }
 >>> .common-table .ivu-table td {
  height: 54px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 54px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 375px);
 }
 >>> .ivu-table-tip {
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .app-table .ivu-table-tip {
  height: calc(100vh - 375px);
 }
 >>> .common-table .ivu-table-tip table {
 display: none;
}
 >>> .modal-table {
   overflow: auto !important;
 }
 >>> .modal-table .ivu-spin-fix {
   height: 200px;
 }
  >>> .modal-table .ivu-table-tip {
   height: 200px;
 }
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px;
  span {
    color #409EFF;
  }
}
/deep/ .ivu-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
</style>