data_governance/src/views/homecomponents/EquipmentAnalysis/LevelDeterConfig.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="targetCount">
            <Select v-model="tableParams.targetCount" placeholder="监测指标数量">
                <Option v-for="item in indicatorsNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="" prop="coverTargetCount">
            <Select v-model="tableParams.coverTargetCount" placeholder="策略覆盖指标数量">
                <Option v-for="item in strategyIndicNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="" prop="coverEquipmentCount">
            <Select v-model="tableParams.coverEquipmentCount" placeholder="策略覆盖设备数量">
                <Option v-for="item in strategyEquipNum" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="" prop="name">
            <Input placeholder="输入关键字查询" clearable search v-model="tableParams.name" />
          </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">
      <Button icon="ios-add" class="common-add-btn" @click="addClick">新增策略</Button>
    </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">
        <template slot="loading">
            <Loading-animation></Loading-animation>
        </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-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(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>
        </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="65"
      ref="modalGrag"
      draggable
      reset-drag-position
      @on-visible-change="modalChange"
      :mask-closable="false"
      class-name="common-modal">
      <div class="common-modal-top">
        <span class="common-modal-top-text">基础信息</span>
      </div>
      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="95" inline label-position="left">
        <FormItem label="来源应用：" prop="appId" style="width:48%">
           <Select v-model="formOption.appId" placeholder="来源应用" @on-change="selectModalApp" label-in-value :disabled="disabledApp">
             <Option v-for="item in appModalData" :value="item.id" :key="item.id">{{ item.appName }}</Option>
          </Select>
        </FormItem>
        <FormItem label="设备类型：" prop="equipmentTypeId" style="width:48%">
          <Select v-model="formOption.equipmentTypeId" placeholder="设备类型" @on-change="selectModalEquip" label-in-value :disabled="disabledEquip">
             <Option v-for="item in equipTypeModalData" :value="item.equipmentTypeId" :key="item.equipmentTypeId">{{ item.equipmentName }}</Option>
          </Select>
        </FormItem>
         <FormItem label="策略名称：" prop="strategyName" style="width:100%" >
          <Input v-model.trim="formOption.strategyName" placeholder="默认回显【来源应用-设备类型】作为策略名称，可手动修改" maxlength="100" show-word-limit />  
        </FormItem>
			</Form>
      <div class="common-modal-top">
        <span class="common-modal-top-text">等级判定策略</span>
      </div>
      <div class="strategy-form-scroll common-scroll" v-if="showModal">
        <Form ref="formDynamic" :model="formCustom" :label-width="0" class="strategy-form">
          <Row v-for="(item, index) in formCustom.alertStrategyRankDTOList" :key="index">
          <Col span="2" :class="{'row-first': index == 0}" class="row-first-es">策略{{index + 1}}</Col>
          <Col span="16" :class="{'row-first': index == 0}">
            <Row v-for="(val, i) in item.alertStrategyDetailList" :key="i" style="width:100%" class="strategy-form-row">
              <Col span="4">
                <FormItem :prop="'alertStrategyRankDTOList.' + index + '.alertStrategyDetailList.' + i + '.targetId'" :rules="{ required: clickbtn==3 ? false: true, type: 'number',message: '请选择监测指标', trigger: 'change',}" style="display:flex">
                <span class="sub-first-text">{{val.relationName}}</span>
                  <Select v-model="val.targetId" style="width: 75%" placeholder="监测指标" @on-change="selectTarget(val.targetId,index,i)" ref="targetId" transfer>
                    <Option v-for="subItem in indicatorsModalData" :value="subItem.id" :key="subItem.id">{{ subItem.targetName }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem :prop="'alertStrategyRankDTOList.' + index + '.alertStrategyDetailList.' + i + '.logical1'" :rules="{required: clickbtn==3 ? false: true, type: 'number',message: '请选择逻辑关系',trigger: 'change',}">
                  <Select v-model="val.logical1" style="width: 100%" placeholder="逻辑关系" @on-change="selectLogical1(val.logical1,index,i)" ref="logical1" transfer>
                    <Option v-for="item in operatorModalData" :value="item.id" :key="item.id">{{ item.value }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem :prop="'alertStrategyRankDTOList.' + index + '.alertStrategyDetailList.' + i + '.targetValue1'" :rules="{ required: clickbtn==3 ? false: true,  message: '请输入', trigger: 'blur'}" style="display:flex">
                   <Input v-model.trim="val.targetValue1" placeholder="请输入"/>  
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem :prop="'alertStrategyRankDTOList.' + index + '.alertStrategyDetailList.' + i + '.connectLogical'" style="display:flex">
                  <Select v-model="val.connectLogical" style="width: 100%" placeholder="逻辑判断" clearable @on-change="selectConnectLogical(val.connectLogical,index,i)" ref="connectLogical" transfer>
                    <Option v-for="item in logicJudgmentModalData" :value="item.id" :key="item.id">{{ item.value }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="4">
                <FormItem :prop="'alertStrategyRankDTOList.' + index + '.alertStrategyDetailList.' + i + '.logical2'" style="display:flex">
                  <Select v-model="val.logical2" style="width: 100%" placeholder="逻辑关系" clearable @on-change="selectLogical2(val.logical2,index,i)" ref="logical2" transfer>
                    <Option v-for="subItem in operatorModalData" :value="subItem.id" :key="subItem.id">{{ subItem.value }}</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col :span="i != 0 ? 3 : 4">
                <FormItem :prop="'alertStrategyRankDTOList.' + index + '.alertStrategyDetailList.' + i + '.targetValue2'">
                  <Input v-model.trim="val.targetValue2" placeholder="请输入" clearable /> 
                </FormItem>
              </Col>
              <Col span="1" class="row-es-del" v-if="i != 0">
               <FormItem>
                  <i class="iconfont icon-shanchu ivu-col-del" v-if="i != 0" @click="handleSubRemove(index,i)"></i>
                  <Input placeholder="请输入" clearable style="opacity: 0;width:0px"/>
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col span="2" :class="{'row-first': index == 0}" class="row-es-text">判定为</Col>
          <Col span="3" :class="{'row-first': index == 0}" class="row-es-last">
            <FormItem
              :prop="'alertStrategyRankDTOList.'+index+'.rankId'" :rules="{required: clickbtn==3 ? false: true,type: 'number',message: '请选择告警等级',trigger: 'change'}">
              <Select v-model="item.rankId" style="width: 100%" placeholder="告警等级" @on-change="selectRank(item.rankId,index)" ref="rank" transfer>
                <Option v-for="firstitem in alarmLevelModalData" :value="firstitem.id" :key="firstitem.id" :disabled="firstitem.disabled">{{ firstitem.name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="1" class="ivu-col-btn">
          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#2DA0F8;" @click="handleAdd('formDynamic')" v-if="index == formCustom.alertStrategyRankDTOList.length - 1 &&title=='新增策略'"></i>
          <i class="iconfont icon-shanchu ivu-col-del" style="padding-left:5px" @click="handleRemove(index)"></i>
          </Col>
          <Col span="23" class="ivu-col-edit" v-if="title=='编辑策略'">
          <div class="sub-add">
          <span>新增一条子策略 子策略与现有子策略间为</span>
           <FormItem ref="subLogical" :prop="'alertStrategyRankDTOList.'+index+'.subLogical'" :rules="{required: clickbtn==2 ? true: false, type: 'number',message: '请选择逻辑判断',trigger: 'change'}">
            <Select v-model="item.subLogical" placeholder="逻辑判断" style="width: 200px;padding: 0 6px" @on-change="selectEditSubLogical(item.subLogical,index)" label-in-value transfer>
              <Option v-for="item in logicJudgmentModalData" :value="item.id" :key="item.id">{{ item.value }}</Option> 
            </Select>
          </FormItem>
          关系
          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#43B843;padding-left:10px" @click="handleEditSub('formDynamic',index)"></i>
        </div>
          </Col>
         </Row>
        <div class="sub-add" v-if="title=='新增策略'">
          <span>新增一条子策略 子策略与现有子策略间为</span>
           <FormItem prop="subLogical" :rules="{required: clickbtn==2 ? true: false, type: 'number',message: '请选择逻辑判断',trigger: 'change'}">
            <Select v-model="formCustom.subLogical" placeholder="逻辑判断" style="width: 200px;padding: 0 6px" @on-change="selectSubLogical" label-in-value transfer>
              <Option v-for="item in logicJudgmentModalData" :value="item.id" :key="item.id">{{ item.value }}</Option> 
            </Select>
          </FormItem>
          关系
          <i class="iconfont icon-tianjia" style="cursor:pointer;color:#43B843;padding-left:10px" @click="handleAddSub('formDynamic')"></i>
        </div>
      </Form>
      </div> 
      <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">
      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon"></Icon>
      <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
      :mask-closable="false"
      class-name="common-modal">
      <div v-for="(item,index) in detailLabel" :key="index">
        <div class="common-modal-top">
         <span class="common-modal-top-text">{{item.name}}</span>
        </div>
        <div class="common-modal-content">
          <div class="modal-content-item" v-for="(val,i) in item.arr" :key="i" :class="{'item-especial': val.name == '策略名称' && item.arr.length%2!=0,'item-especial-bot':(i==item.arr.length-1 || i==item.arr.length-2)}">
            <span class="modal-content-item-name">
            {{val.name}}
            </span>
            <div class="modal-content-item-value">
                <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
                  <span>{{val.value}}</span>
                  <div slot="content">
                    <span>{{val.value}}</span>
                  </div>
                </Tooltip>
                <span v-else>{{val.value}}</span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="common-modal-top">
         <span class="common-modal-top-text">等级判定策略</span>
        </div>
        <div class="strategy-form strategy-form-detail common-scroll" v-if="detailStatus">
          <Row v-for="(item, index) in formCustom.alertStrategyRankDTOList" :key="index">
            <Col span="2" :class="{'row-first': index == 0}" class="row-first-es row-first-es-detail">
              <Tooltip placement="top-start" transfer max-width="350">
                <span>策略{{index + 1}}</span>
                <div slot="content">
                  <span>策略{{index + 1}}</span>
                </div>
              </Tooltip>
            </Col>
            <Col span="16" :class="{'row-first': index == 0}">
              <Row v-for="(val, i) in item.alertStrategyDetailList" :key="i" style="width:100%" class="strategy-form-row">
                <Col span="4">
                <!-- <span class="sub-first-text">{{val.relationName}}</span> -->
                  <Tooltip placement="top-start" transfer max-width="350">
                   <span>{{val.targetName}}</span>
                    <div slot="content">
                      <span>{{val.targetName}}</span>
                    </div>
                  </Tooltip>
                </Col>
                <Col span="4">
                <Tooltip placement="top-start" transfer max-width="350">
                   <span>{{val.logicalName1}}</span>
                    <div slot="content">
                      <span>{{val.logicalName1}}</span>
                    </div>
                  </Tooltip>
                </Col>
                <Col span="4">
                <Tooltip placement="top-start" transfer max-width="350">
                   <span>{{val.targetValue1}}</span>
                    <div slot="content">
                      <span>{{val.targetValue1}}</span>
                    </div>
                  </Tooltip>
                </Col>
                <Col span="4">
                <Tooltip placement="top-start" transfer max-width="350" v-if="val.connectLogicalName">
                   <span>{{val.connectLogicalName}}</span>
                    <div slot="content">
                      <span>{{val.connectLogicalName}}</span>
                    </div>
                  </Tooltip>
                   <span v-else>{{val.connectLogicalName}}</span>
                </Col>
                <Col span="4">
                <Tooltip placement="top-start" transfer max-width="350" v-if="val.logicalName2">
                   <span>{{val.logicalName2}}</span>
                    <div slot="content">
                      <span>{{val.logicalName2}}</span>
                    </div>
                  </Tooltip>
                  <span v-else>{{val.logicalName2}}</span>
                </Col>
                <Col span="4">
                <Tooltip placement="top-start" transfer max-width="350" v-if="val.targetValue2 || val.targetValue2===0">
                   <span>{{val.targetValue2}}</span>
                    <div slot="content">
                      <span>{{val.targetValue2}}</span>
                    </div>
                  </Tooltip>
                   <span v-else>{{val.targetValue2}}</span>
                </Col>
              </Row>
            </Col>
            <Col span="6" :class="{'row-first': index == 0}" class="row-es-last">
            <Tooltip placement="top-start" transfer max-width="350">
              <span>{{item.rankName}}</span>
              <div slot="content">
                <span>{{item.rankName}}</span>
              </div>
            </Tooltip>
            </Col>
          </Row>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
const defaultFrom = {appId:'',equipmentTypeId: '',strategyName: '',enabled: 0}
export default {
  name: "LevelDeterConfig",
  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: [],
      tableParams: {
        keywords: '',
        applicationId:'',
        equipmentTypeId: '',
        targetCount: '',
        coverTargetCount: '',
        coverEquipmentCount: '',
        name: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tableTotal: 0,
      tablePage: 0,
      rowObj: {},
      indicatorsNum: [
         {
          value: '-1',
          label: '监测指标数量'
        },
        {
          value: '0-5',
          label: '0-5'
        },
        {
          value: '6-10',
          label: '6-10'
        },
        {
          value: '11-',
          label: '11-'
        },
      ],
      strategyIndicNum: [
        {
          value: '-1',
          label: '策略覆盖指标数量'
        },
        {
          value: '0-5',
          label: '0-5'
        },
        {
          value: '6-10',
          label: '6-10'
        },
        {
          value: '11-',
          label: '11-'
        }
      ],
      strategyEquipNum: [
        {
          value: '-1',
          label: '策略覆盖设备数量'
        },
        {
          value: '0-10',
          label: '0-10'
        },
        {
          value: '11-50',
          label: '11-50'
        },
        {
          value: '51-',
          label: '51-'
        },
      ],  
      equipTypeData: [],
      equipTypeModalData: [],
      appData: [],
      appModalData: [],
      columns: [
          {
            title: '等级判定策略名称',
            key: 'strategyName',
            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: 'targetCount',
            align: 'center'
          },
          {
            title: '策略覆盖指标数量',
            key: 'coverTargetCount',
            align: 'center',
          },
          {
            title: '策略覆盖设备数量',
            key: 'coverEquipmentCount',
            align: 'center',
          },
          {
          title: '是否启用',
          key: 'enabled',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', [                             
              h('i-switch', {
                props: { value: params.row.enabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
                },
                nativeOn:{
                    "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
                      this.rowObj =  params.row
                      if (params.row.enabled == 1) {
                        this.commonTitle = '确认关闭'
                        this.activeColor = '#E92E2E'
                        this.activeClass = 'icon-guanbi'
                        this.modalTitle = '可能影响新数据判断结果。'
                        this.modalStatus = true       
                      } else {
                         this.commonTitle = '确认启用'
                        this.activeColor = '#57C44F'
                        this.activeClass = 'icon-qiyong'
                        this.modalTitle = '当前时间点后所有告警信息，将使用策略自动判定。'
                        this.modalStatus = true
                      }
                    },
                  }
                }),
              ])
            }
          },
          {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 120,
        }
      ],
      disabledApp: false,
      disabledEquip: false,
      showModal: false,
      detailStatus: false, 
      modalStatus: false,
      title: '新增策略',
      commonTitle: "确认删除",
      activeColor: '#E92E2E',
      activeClass: '',
      modalTitle: '',
      formOption: {appId:'',equipmentTypeId: '',strategyName: '',enabled: 0},
      appModalName: '',
      ruleValidate: {
        appId: [{
          required: true,
          type: 'number',
          message: '请选择来源应用',
          trigger: 'change'
        }],
        equipmentTypeId: [{
          required: true,
          type: 'number',
          message: '请选择设备类型',
          trigger: 'change'
        }],
        strategyName: [{
          required: true,
          message: '请输入策略名称',
          trigger: 'change'
        }],
      }, 
      detailLabel: [],
      formCustom: {
        alertStrategyRankDTOList: [
          {
            rankId: '',
            rankName: '',
            alertStrategyDetailList: [
              {
                targetId: '',
                targetName: '',
                logical1: '',
                logicalName1: '',
                targetValue1: '',
                connectLogical: '',
                connectLogicalName: '',
                logical2: '',
                logicalName2: '',
                targetValue2: '',
                relation: '',
                relationName: ''
              },
            ],
            subLogical: '',
            subLogicalName: ''
          },
        ],
      },
      operatorModalData: [],
      indicatorsModalData: [],
      alarmLevelModalData: [],
      logicJudgmentModalData: [],
      clickbtn: 1, // 1点击策略增加按钮 2点击子策略增加按钮 3点击子策略删除按钮
    };
  },
  mounted() {
    this.getType()
  },
  methods: {
    go (){
      // this.$router.push({path:'//ApplicationManage'})
      // this.$router.push({path:'/MainPage/ApplicationManage/2'})
      this.$router.push({ name: 'ApplicationManage', params: { type:2 }}) // -> /home/123
    },
    changePicker (date) {
      this.tableParams.useDateBegin = date[0]
      this.tableParams.useDateEnd = 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.appModalData = res.data.data
          // this.appData = res.data.data
          // this.appData.unshift({ id: '-1', appName: '来源应用' })
        } else {
          this.appModalData = []
          // this.appData = []
        }
      })
      // this.$get('metroapi/dic/queryDictionary', {name:'监测指标'}).then(res=>{
      //   if (res.httpCode == 1 ){
      //     this.indicatorsModalData = res.data
      //   } else {
      //     this.indicatorsModalData = []
      //   }
      // })
      this.$get('metroapi/dic/queryDictionary', {name:'逻辑运算符'}).then(res=>{
        if (res.httpCode == 1 ){
          this.operatorModalData = res.data
        } else {
          this.operatorModalData = []
        }
      })
      this.$get('metroapi/dic/queryDictionary', {name:'逻辑判断'}).then(res=>{
        if (res.httpCode == 1 ){
          this.logicJudgmentModalData = res.data
        } else {
          this.logicJudgmentModalData = []
        }
      })
      // 告警等级
      this.$get('metroapi/alert/rank/list', this.alarmParams).then(res=>{
        if (res.httpCode == 1 ){
          this.alarmLevelModalData = res.data.data
        } else {
          this.alarmLevelModalData = []
        }
      })
    },
    // selectApp (val) {
    //   this.tableParams.equipmentTypeId = ''
    //   this.tableParams.applicationId = val
    //   this.appParams.applicationId = val
    //   if (this.tableParams.applicationId) {
    //     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.equipTypeModalData = res.data.data
            this.equipTypeData = res.data.data
            this.equipTypeData.unshift({ equipmentTypeId: '-1', equipmentName: '设备类型' })
          } else {
            this.equipTypeData = []
            this.equipTypeModalData = []
          }
        })
      }
    },
    // 获取表格数据
    getTableData () {
      let params = JSON.parse(JSON.stringify(this.tableParams))
      // params.applicationId = params.applicationId == '-1' ? '':params.applicationId
      // params.equipmentTypeId = params.equipmentTypeId == '-1' ?'':params.equipmentTypeId
      params.targetCount = params.targetCount == '-1' ? '':params.targetCount
      params.coverTargetCount = params.coverTargetCount == '-1' ?'':params.coverTargetCount
      params.coverEquipmentCount = params.coverEquipmentCount == '-1' ?'':params.coverEquipmentCount
      this.loading = true
      this.$get('metroapi/alert/queryStrategyPage', 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
          }
        })
    },
    selectModalApp (val) {
      if (val) {
        this.appParams.applicationId = val.value
        this.formOption.equipmentTypeId = ''
        this.formOption.strategyName = val.label
        this.appModalName = val.label
        this.clickbtn = 1
        this.formCustom.alertStrategyRankDTOList[0].alertStrategyDetailList[0].targetId = ''
        this.indicatorsModalData = []
        this.getAddEquipType( this.appParams)
      }
    },
    selectModalEquip (val) {
      if (val) {
        this.formOption.equipmentTypeId = val.value
        this.formOption.strategyName = this.appModalName + '-'+ val.label
        this.clickbtn = 1
        this.formCustom.alertStrategyRankDTOList[0].alertStrategyDetailList[0].targetId = ''
        let params = {
          equipmentTypeId: val.value
        }
        this.getMonitorIndex(params)
      }
    },
    // 获取监测指标
    getMonitorIndex (params) {
      this.$get('metroapi/target/queryTargetCountByEquTypeId', params).then(res=>{
        if (res.httpCode == 1 ){
          this.indicatorsModalData = res.data.data
        } else {
          this.equipTypeModalData = []
        }
      })
    },
    // 获取新增设备类型 
    getAddEquipType (params) {
      this.$get('metroapi/application/equipmentTypeInfo', params).then(res=>{
        if (res.httpCode == 1 ){
          this.equipTypeModalData = res.data.data
        } else {
          this.equipTypeModalData = []
        }
      })
    },
    searchClick () {
      this.tableParams.pageNum = 1
      this.getTableData()
      // this.$router.push({ path: '/MainPage/ApplicationManage',  query: {deptName: "2"}})
    },
    resetClick (name) {
    //  this.tableParams.equipmentTypeId = ''
    //  this.equipTypeModalData = [{ id: '-1', stationName: '设备类型' }]
     this.$refs[name].resetFields()
     this.tableParams.pageNum = 1
     this.getTableData()
    },   
    getstrategyData (id) {
      this.$get('metroapi/alert/getStrategy', {strategyId:id}).then(res=>{
        if ( res.httpCode == 1 ){
          this.detailLabel = [{name:'基础信息',arr:[{name:'策略名称',value:res.data.strategyName},{name:'设备类型',value:res.data.equipmentTypeName},{name:'来源应用',value:res.data.appName}]}]
          this.formCustom.alertStrategyRankDTOList = res.data.alertStrategyRankDTOList
          if (this.formCustom.alertStrategyRankDTOList && this.formCustom.alertStrategyRankDTOList.length>1) {
            this.disabledApp = true
            this.disabledEquip = true
          } else if (this.formCustom.alertStrategyRankDTOList.length==1) {
            this.disabledApp = false
            this.disabledEquip = false
            if (this.formCustom.alertStrategyRankDTOList[0].alertStrategyDetailList.length>1) {
              this.disabledApp = true
              this.disabledEquip = true
            }
          }
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    addClick () {
      this.clickbtn = 1
      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
      this.formCustom.alertStrategyRankDTOList = [{
          rankId: '',
          rankName: '',
          alertStrategyDetailList: [
          {
            targetId: '',
            targetName: '',
            logical1: '',
            logicalName1: '',
            targetValue1: '',
            connectLogical: '',
            connectLogicalName: '',
            logical2: '',
            logicalName2: '',
            targetValue2: '',
            relation: '',
            relationName: ''
          },
        ],
        subLogical: '',
        subLogicalName: ''
      }];
      this.disabledApp = false
      this.disabledEquip = false
      this.title = '新增策略'
      this.$nextTick(()=> {
        this.showModal = true
      })
    },
    detailClick (row) {
      this.getstrategyData(row.id)
      this.rowObj = row
      this.$nextTick(()=> {
         this.detailStatus = true
      })
      // this.$get('metroapi/equipment/equipmentDetail', {equipmentId:row.id}).then(res=>{
      //   if ( res.httpCode == 1 ){
      //     this.detailLabel = res.data
      //   } else {
      //     this.$Message.info(res.msg)
      //   }
      // })
    },
    editClick (row) {
      this.clickbtn = 1
      let params = {
        equipmentTypeId: row.equipmentTypeId
      }
      this.getMonitorIndex(params)
      this.getstrategyData(row.id)
      this.rowObj = row
      this.formOption = JSON.parse(JSON.stringify(row));
      this.appParams.applicationId = this.formOption.appId
      this.getAddEquipType(this.appParams)
      this.title = '编辑策略'
      this.$nextTick(()=> {
        this.showModal = true
      })
    },
    delClick (row) {
      this.rowObj = row
      this.commonTitle = '确认删除'
      this.activeColor = '#E92E2E'
      this.activeClass = ''
      this.modalTitle = '删除的同时将解绑所有运营数据，且数据不可恢复，请慎重操作。'
      this.modalStatus = true
    },
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
      this.$refs.formDynamic.resetFields();
      this.equipTypeModalData = []
      this.indicatorsModalData = []
      document.querySelector(".common-modal .common-scroll").scrollTo(0, 0); // 滚动条回到顶部
     } 
    },
    modalOk () {
      var params = Object.assign({}, this.formOption, this.formCustom); // 合并对象 注意目标对象自身也会改变。假设目标对象{}是之前里的对象，他的值跟obj一样
      this.clickbtn = 1
      this.$nextTick(()=> {
        // 多个form表单验证
        const p1 = new Promise((resolve,reject)=>{
        this.$refs['formOption'].validate(valid=>{
                if(valid) resolve()
            })
        })
        const p2 = new Promise((resolve,reject)=>{
            this.$refs['formDynamic'].validate(valid=>{
                if(valid) resolve()
            })
        })
        Promise.all([p1,p2]).then(()=>{
          let canSave = false
          params.alertStrategyRankDTOList.forEach((item,index) => {
              item.alertStrategyDetailList.forEach((val,i) => {
                if ((val.connectLogical && val.logical2 && val.targetValue2) || (!val.connectLogical && !val.logical2 && !val.targetValue2)) {
                  canSave = true
                } else {
                  canSave = false
                   this.$Message['error']({
                    background: true,
                    content: '后三个做一致性校验。值要有都有，要没有都没有'
                  });
                }
              })
            })
            if(canSave) {
              this.saveStrategyData(params)
            }
        })
      })
    },
    saveStrategyData (params) {
      let url = ''
      if (this.title == '新增策略') {
        url = 'metroapi/alert/addStrategy'  
      } else {
        url = 'metroapi/alert/editStrategy'
      }
       this.$post(url, params).then(res=>{
          if ( res.httpCode == 1 ){
              this.showModal = false
              this.$Message.info(res.msg)
              this.getTableData()
            } else {
              this.$Message.info(res.msg)
            }
          })
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
     if (this.commonTitle == '确认启用') {
        let params = {
          strategyId: this.rowObj.id,
          enabled: 1
        }
        this.getSwitchStatus(params)
      } else if (this.commonTitle == '确认关闭') {
        let params = {
          strategyId: this.rowObj.id,
          enabled:0
        }
        this.getSwitchStatus(params)
      } else {
        let params = {
          strategyId: this.rowObj.id
        }
        this.delData(params)
      }
    },
    commonCancel () {
      this.modalStatus = false
    },
    // 启用 关闭/接口
    getSwitchStatus (params) {
      this.$get('metroapi/alert/enableStrategy',params).then(res=>{
        if (res.httpCode == 1 ){
          if (params.enabled == 0) {
            this.rowObj.enabled = 0
          } else {
            this.rowObj.enabled = 1
          }
          this.modalStatus = false
        } else {
          this.rowObj.enabled = 0
          this.$Message.info(res.msg)
        }
      })
    },    
    // 删除接口
    delData (params) {
      this.$get('metroapi/alert/delStrategy',params).then(res=>{
        if (res.httpCode == 1 ){
          this.modalStatus = false
          this.$Message.info(res.msg)
          this.getTableData()
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
    handleAdd(name) {
      this.clickbtn = 1
      this.$nextTick(()=> {
        this.$refs[name].validate((valid) => {
        if (valid) { 
          if (this.formCustom.alertStrategyRankDTOList.length>0) {
            this.disabledApp = true
            this.disabledEquip = true
          }
          this.formCustom.alertStrategyRankDTOList.push({
                rankId: '',
                rankName: '',
                alertStrategyDetailList: [
                {
                  targetId: '',
                  targetName: '',
                  logical1: '',
                  logicalName1: '',
                  targetValue1: '',
                  connectLogical: '',
                  connectLogicalName: '',
                  logical2: '',
                  logicalName2: '',
                  targetValue2: '',
                  relation: '',
                  relationName: ''
                },
              ],
          });
          this.formCustom.subLogical = ''
          this.formCustom.subLogicalName = ''
          // this.formCustom.alertStrategyRankDTOList.forEach((item,index) => {
          //   item.alertStrategyDetailList.forEach((val,i) => {
          //     if ((val.connectLogical && val.logical2 && val.targetValue2) || (!val.connectLogical && !val.logical2 && !val.targetValue2)) {
          //         this.formCustom.alertStrategyRankDTOList.push({
          //           rankId: '',
          //           rankName: '',
          //           alertStrategyDetailList: [
          //           {
          //             targetId: '',
          //             targetName: '',
          //             logical1: '',
          //             logicalName1: '',
          //             targetValue1: '',
          //             connectLogical: '',
          //             connectLogicalName: '',
          //             logical2: '',
          //             logicalName2: '',
          //             targetValue2: '',
          //             relation: '',
          //             relationName: ''
          //           },
          //         ],
          //     });
          //     this.formCustom.subLogical = ''
          //     this.formCustom.subLogicalName = ''
          //     } else {
          //       this.$Message.info('后三个做一致性校验。值要有都有，要没有都没有')
          //     }
          //   })
          // })
        }
       });
      }) 
    },
    handleAddSub(name) {
      if (this.formCustom.subLogical) {
        this.clickbtn = 1
      } else {
        this.clickbtn = 2
      }
      this.$nextTick(()=> {
        this.$refs[name].validate((valid) => {
            if (valid) {
              this.disabledApp = true
              this.disabledEquip = true
              this.formCustom.alertStrategyRankDTOList[
                this.formCustom.alertStrategyRankDTOList.length - 1
              ].alertStrategyDetailList.push({
                targetId: '',
                targetName: '',
                logical1: '',
                logicalName1: '',
                targetValue1: '',
                connectLogical: '',
                connectLogicalName: '',
                logical2: '',
                logicalName2: '',
                targetValue2: '',
                relation: this.formCustom.subLogical,
                relationName:  this.formCustom.subLogicalName
              });
              // this.formCustom.subLogical = ''
              // this.formCustom.subLogicalName = ''
            }
        })
      })
    },
    handleEditSub (name,index) {
       if (this.formCustom.subLogical) {
        this.clickbtn = 1
      } else {
        this.clickbtn = 2
      }
      this.$nextTick(()=> {
      this.$refs.formDynamic.validateField(`alertStrategyRankDTOList.${index}.subLogical`,(valid)=> {
        if (valid!='请选择逻辑判断') {
             this.disabledApp = true
              this.disabledEquip = true
              this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList.push({
                targetId: '',
                targetName: '',
                logical1: '',
                logicalName1: '',
                targetValue1: '',
                connectLogical: '',
                connectLogicalName: '',
                logical2: '',
                logicalName2: '',
                targetValue2: '',
                relation:  this.formCustom.alertStrategyRankDTOList[index].subLogical,
                relationName:  this.formCustom.alertStrategyRankDTOList[index].subLogicalName
              });
        }
      })
      })
    },
    handleRemove (index) {
      this.clickbtn = 3
      this.$nextTick(()=> {
        if (this.formCustom.alertStrategyRankDTOList.length == 1) {
          this.$Message['error']({
              background: true,
              content: '请至少保留一条非空策略',
          });
        } else {
          this.formCustom.alertStrategyRankDTOList.splice(index, 1) //因为删除选值的下拉框，没选值的下拉框的值会变成undefined 所以加个状态值（clickbtn=3）
        }
        this.formCustom.alertStrategyRankDTOList.forEach((item,index)=> {
          if (this.formCustom.alertStrategyRankDTOList.length==1 && item.alertStrategyDetailList && item.alertStrategyDetailList.length==1) {
            this.disabledApp = false
            this.disabledEquip = false
          }
        })
        // this.formCustom.alertStrategyRankDTOList[this.formCustom.alertStrategyRankDTOList.length - 1].alertStrategyDetailList.splice(i, 1) //因为删除选值的下拉框，没选值的下拉框的值会变成undefined 所以加个状态值（clickbtn=3）
      })
    },
    handleSubRemove(index,i) {
      this.clickbtn = 3
      this.$nextTick(()=> {
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList.splice(i, 1) //因为删除选值的下拉框，没选值的下拉框的值会变成undefined 所以加个状态值（clickbtn=3）
        // if (this.formCustom.alertStrategyRankDTOList.length==1) {
        //   this.disabledApp = false
        //   this.disabledEquip = false
        // }
        this.formCustom.alertStrategyRankDTOList.forEach((item,index)=> {
          if (this.formCustom.alertStrategyRankDTOList.length==1 && item.alertStrategyDetailList && item.alertStrategyDetailList.length==1) {
            this.disabledApp = false
            this.disabledEquip = false
          }
        })
        // this.formCustom.alertStrategyRankDTOList[this.formCustom.alertStrategyRankDTOList.length - 1].alertStrategyDetailList.splice(i, 1) //因为删除选值的下拉框，没选值的下拉框的值会变成undefined 所以加个状态值（clickbtn=3）
      })
    },
    selectSubLogical (val) {
      if (val) {
        this.formCustom.subLogical = val.value
        this.formCustom.subLogicalName = val.label
        this.clickbtn = 1
      }
    },
    selectEditSubLogical (val,index) {
      this.formCustom.alertStrategyRankDTOList[index].subLogical = val
      let subLogicalName = ''
      this.logicJudgmentModalData.forEach((item)=> {
        if (val == item.id) {
         subLogicalName = item.value
        }
      })
      this.formCustom.alertStrategyRankDTOList[index].subLogicalName = subLogicalName
    },
    selectTarget (val,index,i) {
      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].targetId = val
      let targetName = ''
      this.indicatorsModalData.forEach((item)=> {
        if (val == item.id) {
          targetName = item.targetCode
        }
      })
      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].targetName = targetName
    },
    selectLogical1 (val,index,i) {
      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logical1 = val
      let logicalName1 = ''
      this.operatorModalData.forEach((item)=> {
        if (val == item.id) {
        logicalName1 = item.value
        }
      })
      this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName1 = logicalName1
    },
    selectConnectLogical (val,index,i) {
      if (val) {
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogical = val
        let connectLogicalName = ''
        this.logicJudgmentModalData.forEach((item)=> {
          if (val == item.id) {
           connectLogicalName = item.value
          }
        })
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogicalName = connectLogicalName
      } else {
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogical = ''
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].connectLogicalName = ''
      }
    },
    selectLogical2 (val,index,i) {
      if (val) {
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logical2 = val
        let logicalName2 = ''
        this.operatorModalData.forEach((item)=> {
          if (val == item.id) {
          logicalName2 = item.value
          }
        })
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName2 = logicalName2
      } else {
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logical2 = ''
        this.formCustom.alertStrategyRankDTOList[index].alertStrategyDetailList[i].logicalName2 = ''
      }
    },
    selectRank (val,index) {
      this.formCustom.alertStrategyRankDTOList[index].rankId = val
      let rankName = ''
      this.alarmLevelModalData.forEach((item)=> {
        if (val == item.id) {
         rankName = item.name
        }
      })
      this.formCustom.alertStrategyRankDTOList[index].rankName = rankName
      // this.alarmLevelModalData.forEach((item,index)=> {
      //   if (val == item.id) {
      //     item.disabled = true
      //   } else {
      //     item.disabled = false
      //   }
      // })
    }
  }
};
</script>
<style scoped lang="stylus">
.content-main-manage {
  position: relative;
  // height: calc(100% - 50px);
  height: 100%;
}
.search-list {
  display: flex;
  padding: 10px 0 0;
}
.search-left {
  display: flex;
  align-items: center;
   .ivu-select {
     width: 175px;
     height: 32px;
   }
   .ivu-select-single .ivu-select-selection {
     height: 100%;
   }
   >>> .ivu-input {
     width: 160px;
     height: 32px;
   }
   >>> .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: flex-end;
  padding-bottom: 10px;
}
.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);
  height: calc(100% - 140px);
}
.common-table {
  height: 100%;
  // max-height: 100%;
}
>>> .common-table .ivu-table-body{
  height: calc(100% - 50px);
  overflow: hidden;
  overflow-y: auto;
}
>>> .common-table .ivu-table th {
  height: 50px;
 }
 >>> .common-table .ivu-table td {
  height: 49.5px;
 }
  >>> .common-table .ivu-spin-fix {
   top: 50px;
 }
// >>> .common-table .ivu-table th {
//   height: 49px;
//  }
//  >>> .common-table .ivu-table td {
//   height: 48.5px;
//  }
//   >>> .common-table .ivu-spin-fix {
//    top: 49px;
//  }
  >>> .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;
  }
}
>>> .modal-tabs-item {
  margin-top: 10px;
}
>>> .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-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 .modal-content-item-name{
  width: 25%;
  height: 45px;
  line-height: 45px;
}
>>> .item-especial .modal-content-item-value{
  width: 75%;
  height: 45px;
  line-height: 45px;
}
>>> .item-especial-bot .modal-content-item-name {
  border-bottom: 1px solid #21437B;
}
>>> .item-especial-bot .modal-content-item-value {
  border-bottom: 1px solid #21437B;
}
>>> .modal-content-item-value .ivu-tooltip {
  width: 100%;
}
>>> .modal-content-item-value .ivu-tooltip-rel{
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
>>> .strategy-form-scroll {
  max-height: 360px;
  overflow: hidden;
  overflow-y: auto;
}
>>> .strategy-form {
  margin-bottom: 30px;
}
>>> .strategy-form .ivu-col{
  position: initial;
  color: #2B8EE2;
  font-size: 14PX;
}
>>> .row-first-es {
  border-left: 1px solid #21437B;
  border-bottom: 1px solid #21437B;
  border-right: 1px solid #21437B;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #13305F;
}
>>> .strategy-form .row-first{
  border-top: 1px solid #21437B;
}
>>> .strategy-form .ivu-form-item{
  height: 100%;
  margin-bottom: 0;
}
>>> .strategy-form-row .ivu-form-item{
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  .ivu-form-item-content {
    width: 100%;
    padding: 10px 5px;
  }
}
>>> .strategy-form-row .ivu-col {
  // height: 100%;
  border: 1px solid #21437B;
  border-top: none;
  border-left: none;
}
>>> .strategy-form .row-es-text {
  border-left: none;
  border-bottom: 1px solid #21437B;
  border-right: 1px solid #21437B;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #13305F;
}
>>> .strategy-form .row-es-last {
  border-bottom: 1px solid #21437B;
  border-right: 1px solid #21437B;
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-form-item {
    height: 100%;
    width: 100%;
    .ivu-form-item-content {
      height: 100%;
      width: 100%;
      .ivu-select {
        padding: 10px 5px;
        height: 100%;
        width: 100%;
      }
    }
  }
}
>>> .row-es-del .ivu-form-item-content{
  display: flex;
  align-items: center;
  justify-content: center;
}
>>> .ivu-col-del {
  cursor:pointer;
  color:#BC2020;
}
>>> .strategy-form .ivu-col-btn {
  border-top: none;
  border-bottom: none;
  display: flex; 
  align-items: center;
  justify-content: center;
}
>>> .sub-add {
  display: flex;
  align-items: center;
  margin-top: 20PX;
  padding-left: 10%;
  font-size: 12PX;
  color: #FFFFFF;
  .ivu-form-item-content {
   display: flex;
  }
}
.sub-first-text {
  font-size: 14PX;
  font-weight: bold;
  color: #EE823A;
  margin-right: 5px;
  display: inline-block;
  min-width: 14px;
}
>>> .ivu-col-edit {
  border-left: 1px solid #21437b;
  border-bottom: 1px solid #21437b;
  border-right: 1px solid #21437b;
}
>>> .ivu-col-edit .sub-add {
  margin-top: 0;
  padding: 20px 5px;
  padding-left: 10%;
}
.strategy-form-detail {
  max-height: 350px;
  overflow: hidden;
  overflow-y: auto;
}
.strategy-form-detail .ivu-col{
  text-align: center;
  color: #fff;
}
>>> .strategy-form-detail .row-first-es-detail {
  color: #2b8ee2;
}
>>> .strategy-form-detail .strategy-form-row {
  height: 45px;
  line-height: 45px;
}
>>> .strategy-form-detail .strategy-form-row .ivu-col {
  height: 100%;
}
>>> .strategy-form-detail .ivu-col{
  .ivu-tooltip {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .ivu-tooltip-rel {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 4px;
  }
}
>>> .strategy-form .ivu-form-item-error-tip {
 padding-left: 6px;
}
/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>