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

<template>
  <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="alertRankId">
            <Select v-model="tableParams.alertRankId" placeholder="告警等级">
              <Option v-for="item in alarmLevelData" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <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="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="">
            <Tooltip :content="alertTimeContent" :max-width="300" transfer placement="top-start">
              <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="告警时间范围" @on-change="changePicker"></DatePicker>
            </Tooltip>
          </FormItem>
           <FormItem label="">
            <Tooltip :content="updateTimeContent" :max-width="300" transfer placement="top-start">
              <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :value="dateOperateRange" :clearable="false" :editable="false" class="common-date-picker date-picker-main" placeholder="操作时间范围" @on-change="changeOperatePicker"></DatePicker>
            </Tooltip>
          </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: 0">
        <i class="iconfont icon-xiazai" style="cursor:pointer;color:#0185EA;fontSize:20px;marginRight:6px"></i>下载列表筛选结果
      </span>
      <div>
        <Button class="common-operate-btn common-corrections" @click="correctClick"> 
          <i class="iconfont icon-gengzhenggonggao" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
          批量手动修正
        </Button>
         <Button class="common-operate-btn common-eliminate" @click="delClick"> 
          <i class="iconfont icon-shanchu" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
          批量清除告警
        </Button>
         <Button class="common-operate-btn common-confirm" @click="queenClick"> 
          <i class="iconfont icon-queren" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
          批量确认告警
        </Button>
        <!-- <Button class="common-add-btn common-forward">
          <i class="iconfont icon-zhuanfafenxiang" style="cursor:pointer;color:#ffffff;fontSize:20px;marginRight:6px"></i>
          批量转发通知
        </Button> -->
      </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"></i>
        </template>
         <template slot-scope="{ row }" slot="action">
           <Tooltip content="详情" placement="top">
              <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
           </Tooltip>
           <Tooltip content="修正" placement="top">
              <i class="iconfont icon-gengzhenggonggao" style="cursor:pointer;color:#0BB0DE;fontSize:20px;marginRight:6px" @click="correctClick(row)"></i>
           </Tooltip>
           <Tooltip content="清除" placement="top">
              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
           </Tooltip>
            <Tooltip content="确认" placement="top">
              <i class="iconfont icon-queren" style="cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" @click="queenClick(row)"></i>
           </Tooltip>
           <!-- <Tooltip content="转发" placement="top">
              <i class="iconfont icon-zhuanfafenxiang" style="cursor:pointer;color:#BCA507;fontSize:20px;marginRight:6px" @click="forwardClick(row)"></i>
           </Tooltip> -->
        </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>
    <Modal
      v-model="showModal"
      :title="title"
      width="25"
      ref="modalGrag"
      draggable
      reset-drag-position
      @on-visible-change="modalChange"
      :mask-closable="false"
      class-name="common-modal">
      <Form class="common-form" ref="formOption" :model="formOption" :label-width="0">
        <div class="common-form-item-text">
          将选中的告警信息等级，修正为
        </div>
        <FormItem label="" prop="alertRankId" style="width:100%">
          <Select v-model="formOption.alertRankId" placeholder="告警等级">
            <Option v-for="item in alarmLevelModalData" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select> 
        </FormItem>
        <FormItem label="" prop="alertRankId" style="width:100%">
          <Select v-model="formOption.processingStatus" placeholder="告警状态">
            <Option v-for="item in alarmModalStatus" :value="item.id" :key="item.id">{{ item.value }}</Option>
          </Select> 
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      :title="commonTitle"
      width="30"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <div class="common-modal-select" :style="{ color: activeColor}">已选择：{{alertIdNum}}条数据</div>
      <i class="iconfont icon-queren" style="vertical-align: middle;cursor:pointer;color:#08AF68;fontSize:20px;marginRight:6px" v-show="commonTitle=='告警确认'"></i>
      <i class="iconfont icon-shanchu" style="vertical-align: middle;cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" v-show="commonTitle=='确认清除'"></i>
      <span class="modal-text">{{modalTitle}}</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="detailStatus"
      title="告警详情"
      width="45"
      ref="modalGrag"
      draggable
      reset-drag-position
      footer-hide
      @on-visible-change="modalDetailChange"
      :mask-closable="false"
      class-name="common-modal common-modal-detail">
      <template v-if="detailLabel && detailLabel.length>0">
        <div v-for="(item,index) in detailLabel" :key="index" >
            <div class="common-modal-top" :class="{'common-modal-top-especial': index==2}">
            <span class="common-modal-top-text">{{item.name}}</span>
            </div>
            <div class="common-modal-content" v-if="index<2">
              <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}" @click="go(val)">
                  <div class="modal-content-item-name">{{val.name}}</div>
                  <div class="modal-content-item-value" :class="{'item-especial-value': val.name == '设备今日告警'}">
                    <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
                      <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
                      <span v-else-if="val.name == '同比'">
                        <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
                        <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
                        {{val.value+'%'}}
                      </span>
                      <span v-else>{{val.value}}</span>
                      <div slot="content">
                        <span v-if="val.name == '设备今日告警'">{{val.value+'次'}}</span>
                        <span v-else-if="val.name == '同比'">
                          <Icon type="md-arrow-down" style="color: #F32F2F;font-size:20px" v-if="val.value>0"/>
                          <Icon type="md-arrow-up" style="color: #09CB09;font-size:20px" v-if="val.value<0" />
                          {{val.value+'%'}}
                        </span>
                        <span v-else>{{val.value}}</span>
                      </div>
                  </Tooltip>
                  </div>
              </div>
            </div>
        </div>
        </template>
        <rolling-detail-table :columns1="columnsModal" :apiUrl="apiUrl" dataIndex="2" ref="detailTable" class="rolling-detail-table"></rolling-detail-table>
    </Modal>
  </div>
</template>
<script>
import utils from "@/libs/utils"
const defaultFrom = {alertRankId: null,processingStatus: null}
export default {
  name: "ComprehensiveInfor",
  components:{
  },
  data() {
    return {
       alarmParams: {
        keywords: '',
        enabled: 1,
        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: [],
      alertTimeContent: '告警时间范围',
      updateTimeContent: '操作时间范围',
      dateOperateRange: [],
      tableParams: {
        processingStatus: '',
        keywords: '',
        applicationId:'',
        equipmentTypeId: '',
        oneKeywords: '',
        alertRankId: '',
        beginAlertTime: '',
        endAlertTime: '',
        beginUpdateTime: '',
        endUpdateTime: '',
        alertRankEnabled: 1,
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      rowObj: {},
      lineTypeData: [],
      stationTypeData: [],
      alarmLevelData: [],
      alarmLevelModalData: [],
      equipTypeData: [],
      appData: [],
      alarmStatus: [],
      alarmModalStatus: [],
      columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '告警等级',
            key: 'alertRankName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '警示颜色',
            slot: 'alertRankColor',
            align: 'center',
            width: 90,
          },
          {
            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: 'appName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          }, 
          {
            title: '告警时间',
            key: 'alertTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '操作时间',
            key: 'updateTime',
            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: '操作',
          align: 'center',
          slot: 'action',
          width: 160,
        }
      ],
      showModal: false,
      modalStatus: false,
      title: '告警信息修正',
      commonTitle: "确认清除",
      activeColor: '#E92E2E',
      activeClass: '',
      modalTitle: '',
      dateModalRange: [],
      formOption: {alertRankId: null,processingStatus: null},
      idArr: [],
      alertIds: null,
      alertIdNum: 1,
      operationContent: '修正',
       detailStatus: false,
      detailParams: {
        alertId: null,
        pageNum: 1,
        pageSize: 5
			},
      apiUrl: '',
      detailLabel: [],
      columnsModal: [
        {
            title: '操作内容',
            key: 'operationContent',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '操作人',
            key: 'operationUserName',
            align: 'center',
            ellipsis: true,
            tooltip: true
          }, 
          {
            title: '操作时间',
            key: 'operationTime',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
          {
            title: '备注',
            key: 'operationNote',
            align: 'center',
            ellipsis: true,
            tooltip: true
          },
      ]
    };
  },
  mounted() {
    this.getType()
  },
  methods: {
      // 跳转到实时告警列表-设备视图
    go (val) {
      if (val.name == '设备今日告警') {
        let menuNameArr = []
        menuNameArr = ['设备分析','告警分析','告警监测']
        sessionStorage.setItem('routname', '/MainPage/AlarmMonitor')
        sessionStorage.setItem('menuNameArr',JSON.stringify(menuNameArr))
        this.$router.push({ name: 'AlarmMonitor', params: { equipmentId:this.rowObj.equipmentId }})
      }
    },
    changePicker (date) {
      this.tableParams.beginAlertTime = date[0]
      this.tableParams.endAlertTime = date[1]
      if (!date[0] && !date[1]) {
        this.alertTimeContent = '告警时间范围'
      } else {
        this.alertTimeContent = date[0] + ' - ' + date[1]
      }
    },
    changeOperatePicker (date) {
      this.tableParams.beginUpdateTime = date[0]
      this.tableParams.endUpdateTime = date[1]
      if (!date[0] && !date[1]) {
        this.updateTimeContent = '操作时间范围'
      } else {
        this.updateTimeContent = date[0] + ' - ' + 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/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.alarmLevelModalData = JSON.parse(JSON.stringify(res.data.data))
          this.alarmLevelData = res.data.data
          this.alarmLevelData.unshift({ id: '-1', name: '告警等级' })
        } else {
          this.alarmLevelData = []
          this.alarmLevelModalData = []
        }
      })
      // 告警状态
      this.$get('metroapi/dic/queryDictionary', {name:'告警处理状态'}).then(res=>{
        if (res.httpCode == 1 ){
          this.alarmModalStatus = JSON.parse(JSON.stringify(res.data))
          this.alarmStatus = res.data
          this.alarmStatus.unshift({ id: '-1', value: '处理状态' })
        } else {
          this.alarmModalStatus = []
          this.alarmStatus = []
        }
      })
    },
    selectChange (selection) {
      this.idArr = selection.map(item => item.id)
    },
    // 获取表格数据
    getTableData (keywords,arr,level) {
       if (level) {
        this.tableParams.keywords = ''
        if (level == 2) {
          this.tableParams.lineId = arr[arr.length-1]
          this.tableParams.stationId = ''
        } else if (level == 3) {
          this.tableParams.lineId = arr[arr.length-2]
          this.tableParams.stationId = arr[arr.length-1]
        } else {
          this.tableParams.lineId = ''
          this.tableParams.stationId = ''
        }
      } else {
        this.tableParams.lineId = ''
        this.tableParams.stationId = ''
        if (keywords == '合肥轨道交通' || keywords == '' || !keywords) {
          this.tableParams.oneKeywords = ''
        } else {
          this.tableParams.oneKeywords = keywords
        }
      }
      let params = JSON.parse(JSON.stringify(this.tableParams))
      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
      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.alertTimeContent = '告警时间范围'
     this.dateOperateRange = []
     this.tableParams.beginUpdateTime = ''
     this.tableParams.endUpdateTime =  ''
     this.updateTimeContent = '操作时间范围'
     this.equipTypeData = [{ equipmentTypeId: '-1', equipmentName: '设备类型' }]
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    },
    correctClick (row) {
      this.rowObj = row
      if (row.id || this.idArr.length>0) {
        this.formOption = JSON.parse(JSON.stringify(defaultFrom))
        this.title = '告警信息修正'
        this.operationContent = '修正'
        this.alertIds = row.id ? row.id : this.idArr.join()
        this.alertIdNum = row.id ? 1 : this.idArr.length
        this.showModal = true
      } else {
        this.$Message.info('请至少选择一条数据')
      }
    },
    changeStateData (params) {
      this.$post('metroapi/alert/processing/update/status',params).then(res=>{
        if (res.httpCode == 1 ){
          if (this.showModal) {
           this.showModal = false
          } else if(this.modalStatus){
            this.modalStatus = false
          } 
          this.$Message.info(res.msg)
          this.getTableData()
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    queenClick (row) {
      this.rowObj = row
      this.commonTitle = '告警确认'
      this.activeColor = '#08AF68'
      this.activeClass = ''
      this.modalTitle = '告警信息状态将被标注为【已确认】，告警将被确认为有效信息。'
      this.operationContent = '确认'
      this.formOption.alertRankId = null
      this.formOption.processingStatus = 39
      this.alertIds = row.id ? row.id : this.idArr.join()
      this.alertIdNum = row.id ? 1 : this.idArr.length
      this.modalStatus = true
    },
    forwardClick (row) {

    },
    delClick (row) {
      this.rowObj = row
      this.commonTitle = '确认清除'
      this.activeColor = '#E92E2E'
      this.activeClass = ''
      this.modalTitle = '告警信息状态将被标注为【已清除】，从系统有效数据中脱钩。'
      this.operationContent = '清除'
      this.formOption.alertRankId = null
      this.formOption.processingStatus = 40
      this.alertIds = row.id ? row.id : this.idArr.join()
      this.alertIdNum = row.id ? 1 : this.idArr.length
      this.modalStatus = true
    },
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
     }
    },
    detailClick (row) {
      this.rowObj = row
      this.detailParams.alertId = this.rowObj.id
      this.detailStatus = true
      this.$nextTick(() => {
        this.$get('metroapi/alert/processing/info', this.detailParams).then(res=>{
        if ( res.httpCode == 1 ){
            this.detailLabel = res.data
          } else {
            this.$Message.info(res.msg)
          }
        })
        this.apiUrl = 'metroapi/alert/processing/info'
        this.$refs.detailTable.getChartsDetail(this.detailParams,this.apiUrl)
      });
    },
    modalDetailChange (val) {
     	if (!val) {
        this.detailParams.pageNum = 1
        document.querySelector(".rolling-detail-table .ivu-table-body").scrollTo(0, 0)
      }
    },
    modalOk () {
      let params = {
        alertIds: this.alertIds,
        processingStatus: this.formOption.processingStatus,
        alertRankId: this.formOption.alertRankId,
        operationContent: this.operationContent,
        userId: utils.storage('sw_user').userId
      }
      this.changeStateData(params)
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
      let params = {
        alertIds: this.alertIds,
        processingStatus: this.formOption.processingStatus,
        alertRankId: this.formOption.alertRankId,
        operationContent: this.operationContent,
        userId: utils.storage('sw_user').userId
      }
      this.changeStateData(params)
    },
    commonCancel () {
      this.modalStatus = false
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  position: relative;
  height: 100%;
}
.search-list {
  display: flex;
  padding: 10px 0 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 125px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
   >>> .ivu-input {
     width: 152px;
     height: 32px;
   }
    >>> .common-date-picker .ivu-input {
    width: 234px;
   }
   >>> .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 .table-state-clear .ivu-table-cell-tooltip-content{
//  color:#E92E2E;
// }
>>> .common-table .ivu-table th {
  height: 50px;
 }
 >>> .common-table .ivu-table td {
  height: 49.5px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 50px;
 }
  >>> .app-table .ivu-spin-fix {
   height: calc(100vh - 375px);
 }
 >>> .common-table .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;
  }
}
.common-form-item-text {
  font-size: 11px;
  color: #85A3D4;
  margin: 10px 0;
}
>>> .common-modal-top-text {
  font-size: 14px;
  font-weight: bold;
  color: #29A0FF;
  line-height: 42px;
  border-left: 3px solid #1590F1;
  padding-left: 12px;
}
>>> .common-modal-top-especial {
  margin-bottom: -10px;
}
>>> .common-modal-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-right: 1px solid #21437B;
}
>>> .modal-content-item {
  width: 50%;
  display: flex;
}
>>> .item-especial {
  width: 100%;
}
>>> .modal-content-item-name {
  width: 50%;
  height: 45px;
  line-height: 45px;
  background: #13305F;
  border-top: 1px solid #21437B;
  border-left: 1px solid #21437B;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
>>> .modal-content-item-value {
  width: 50%;
  height: 45px;
  line-height: 45px;
  background: #06214D;
  border-top: 1px solid #21437B;
  border-left: 1px solid #21437B;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
>>> .item-especial-bot .modal-content-item-name {
  border-bottom: 1px solid #21437B;
}
>>> .item-especial-bot .modal-content-item-value {
  border-bottom: 1px solid #21437B;
}
>>> .item-especial-value .ivu-tooltip-rel{
  cursor: pointer;
  text-decoration: underline;
}
>>> .modal-content-item-value .ivu-tooltip {
  width: 100%;
}
>>> .modal-content-item-value .ivu-tooltip-rel {
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
>>> .common-modal-detail .ivu-table-body {
 max-height: 238PX;
}
/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;
}
.common-modal-select {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  margin-left: 35PX;
}
</style>