diantou/src_product/iam/kpi/components/kpi-threshold-config.vue

<template>
  <div>
    <div :class="$style.btndiv">
      <a-dropdown>
        <a-button icon="plus" type="link">添加</a-button>
        <a-menu slot="overlay" @click="addClick">
          <a-menu-item key="one">一区间阈值</a-menu-item>
          <a-menu-item key="two">两区间阈值</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
    <div :class="$style.formdiv">
      <a-form ref="form" :form="form">
        <div v-for="(item, index) in form.dynamicItem" :key="index">
          <div v-if="index > 0">
            <span>或</span>
          </div>
          <!-- 一区间 -->
          <a-form-item v-if="item.type === 'one'">
            <span>N</span>
            <a-select v-model="item.onesize" :options="sizeOptions" />
            <a-select v-model="item.onetype" :options="typeOptions"></a-select>
            <a-input-number
              v-show="item.onetype === 'const'"
              v-model="item.oneconstant"
            ></a-input-number>
            <a-select
              v-show="item.onetype === 'var'"
              v-model="item.onevariable"
              :options="variableOptions"
            ></a-select>
            <span v-show="item.onetype === 'var'">（</span>
            <a-input
              v-show="item.onetype === 'var'"
              v-model="item.onekpi"
              :class="$style.inputkpi"
              :read-only="true"
              @click="selectZb(index, 'onekpi', 'onekpiid')"
            ></a-input>
            <span v-show="item.onetype === 'var'">，</span>
            <a-input-number
              v-show="item.onetype === 'var'"
              v-model="item.onerange"
              :class="$style.inputrange"
              :max="100"
              :min="0"
              :precision="0"
              placeholder="请输入0-100正整数"
            ></a-input-number>
            <span v-show="item.onetype === 'var'">期）</span>
          </a-form-item>
          <!-- 两区间 -->
          <a-form-item v-if="item.type === 'two'">
            <span v-show="item.twotype1 === 'var'">（</span>
            <a-input-number
              v-show="item.twotype1 === 'var'"
              v-model="item.tworange1"
              :class="$style.inputrange"
              :max="100"
              :min="0"
              :precision="0"
              placeholder="请输入0-100正整数"
            ></a-input-number>
            <span v-show="item.twotype1 === 'var'">期，</span>
            <a-input
              v-show="item.twotype1 === 'var'"
              v-model="item.twokpi1"
              :class="$style.inputkpi"
              :read-only="true"
              @click="selectZb(index, 'twokpi1', 'twokpi1id')"
            ></a-input>
            <span v-show="item.twotype1 === 'var'">）</span>
            <a-select
              v-show="item.twotype1 === 'var'"
              v-model="item.twovariable1"
              :options="variableOptions"
            ></a-select>
            <a-input-number
              v-show="item.twotype1 === 'const'"
              v-model="item.twoconstant1"
            ></a-input-number>
            <a-select v-model="item.twotype1" :options="typeOptions"></a-select>
            <a-select v-model="item.twosize1" :options="sizeOptions" />
            <span>N</span>
            <a-select v-model="item.twosize2" :options="sizeOptions" />
            <a-select v-model="item.twotype2" :options="typeOptions"></a-select>
            <a-input-number
              v-show="item.twotype2 === 'const'"
              v-model="item.twoconstant2"
            ></a-input-number>
            <a-select
              v-show="item.twotype2 === 'var'"
              v-model="item.twovariable2"
              :options="variableOptions"
            ></a-select>
            <span v-show="item.twotype2 === 'var'">（</span>
            <a-input
              v-show="item.twotype2 === 'var'"
              v-model="item.twokpi2"
              :class="$style.inputkpi"
              :read-only="true"
              @click="selectZb(index, 'twokpi2', 'twokpi2id')"
            ></a-input>
            <span v-show="item.twotype2 === 'var'">，</span>
            <a-input-number
              v-show="item.twotype2 === 'var'"
              v-model="item.tworange2"
              :class="$style.inputrange"
              :max="100"
              :min="0"
              :precision="0"
              placeholder="请输入0-100正整数"
            ></a-input-number>
            <span v-show="item.twotype2 === 'var'">期）</span>
          </a-form-item>
          <div :class="$style.delbtn">
            <a-button icon="sd-trash2" @click="deleteItem(item, index)"></a-button>
          </div>
        </div>
      </a-form>
    </div>
    <iam-audit-modal
      :single="true"
      :check-type="'radio'"
      select-type="table"
      :visible="visible"
      :treeparams="{
        configId: '41',
      }"
      :columns="columns"
      @listSelected="listSelected"
      @getCheckNode="getCheckNode"
    ></iam-audit-modal>
  </div>
</template>

<script>
import iamAuditModal from '@product/iam/components/iam-audit-modal.vue'
import components from './_import-components/kpi-threshold-config-import'

export default {
  name: 'KpiThresholdConfig',
  components: {
    ...components,
    iamAuditModal,
  },
  props: {
    /**
     * 表单数据
     */
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      visible: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNum',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        {
          title: '指标名称',
          dataIndex: 'indiName',
        },
        {
          title: '业务分类',
          dataIndex: 'busiClass',
        },
        {
          title: '维护单位',
          dataIndex: 'createDeptName',
        },
      ],
      addtype: '', // 添加类型
      sizeOptions: [
        {
          value: '>',
          label: '>',
        },
        {
          value: '>=',
          label: '>=',
        },
        {
          value: '<',
          label: '<',
        },
        {
          value: '<=',
          label: '<=',
        },
        {
          value: '=',
          label: '=',
        },
        {
          value: '!=',
          label: '!=',
        },
      ],
      typeOptions: [
        {
          value: 'const',
          label: '常量',
        },
        {
          value: 'var',
          label: '变量',
        },
      ],
      variableOptions: [
        {
          value: 'avg',
          label: '平均值',
        },
        {
          value: 'max',
          label: '最大值',
        },
        {
          value: 'min',
          label: '最小值',
        },
      ],
      form: {
        dynamicItem: [],
      },
      zbindex: 0,
      zbfield: '',
      zbidfield: '',
    }
  },
  mounted() {
    if (this.value !== '') {
      this.form.dynamicItem = JSON.parse(this.value)
    }
  },
  methods: {
    // 选择指标回写
    listSelected(keys, keyinfos) {
      this.visible = false
      if (keyinfos?.length > 0) {
        this.form.dynamicItem[this.zbindex][this.zbfield] = keyinfos[0].indiName
        this.form.dynamicItem[this.zbindex][this.zbidfield] = keyinfos[0].id
      }
    },
    getCheckNode(checkNode) {
      this.visible = false
    },
    // 选择指标
    selectZb(index, field, idfield) {
      this.visible = true
      this.zbindex = index // 编辑行index
      this.zbfield = field // 编辑指标域
      this.zbidfield = idfield // 编辑指标ID域
    },
    // 添加
    addClick(type) {
      this.addtype = type.key
      if (this.addtype === 'one') {
        // 一区间
        this.form.dynamicItem.push({
          type: 'one',
          onesize: '>',
          onetype: 'const',
          onevariable: 'avg',
        })
      } else {
        // 两区间
        this.form.dynamicItem.push({
          type: 'two',
          twosize1: '<',
          twotype1: 'const',
          twosize2: '<',
          twotype2: 'const',
          twovariable1: 'avg',
          twovariable2: 'avg',
        })
      }
      this.getConfigVal()
    },
    // 删除
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1)
    },
    // 表单数据
    getConfigVal() {
      let strval = '' // 前端显示公式
      let calval = '' // 计算公式
      this.form.dynamicItem?.forEach((item) => {
        let strtemp = ''
        let caltemp = ''
        // 一区间
        if (item.type === 'one') {
          // 常量
          if (item.onetype === 'const') {
            strtemp = 'N' + item.onesize + item.oneconstant
            caltemp = 'N' + item.onesize + item.oneconstant
          } else {
            // 变量
            strtemp =
              'N' +
              item.onesize +
              '最新' +
              item.onerange +
              '期' +
              item.onekpi +
              '的' +
              this.getVarName(item.onevariable)
            caltemp =
              'N' +
              item.onesize +
              '@thresholdService.' +
              item.onevariable +
              '(#v_' +
              item.onekpiid +
              ',DEPTCODE,' +
              item.onerange +
              ')'
          }
        }
        // 两区间
        if (item.type === 'two') {
          // 1常量
          if (item.twotype1 === 'const') {
            strtemp = 'N' + this.handleSize(item.twosize1) + item.twoconstant1
            caltemp = '(N' + this.handleSize(item.twosize1) + item.twoconstant1
          } else {
            // 1变量
            strtemp =
              'N' +
              this.handleSize(item.twosize1) +
              '最新' +
              item.tworange1 +
              '期' +
              item.twokpi1 +
              '的' +
              this.getVarName(item.twovariable1)
            caltemp =
              '(N' +
              this.handleSize(item.twosize1) +
              '@thresholdService.' +
              item.twovariable1 +
              '(#v_' +
              item.twokpi1id +
              ',DEPTCODE,' +
              item.tworange1 +
              ')'
          }

          // 2常量
          if (item.twotype2 === 'const') {
            strtemp = strtemp + '且N' + item.twosize2 + item.twoconstant2
            caltemp = caltemp + ' && N' + item.twosize2 + item.twoconstant2 + ')'
          } else {
            // 2变量
            strtemp =
              strtemp +
              '且N' +
              item.twosize2 +
              '最新' +
              item.tworange2 +
              '期' +
              item.twokpi2 +
              '的' +
              this.getVarName(item.twovariable2)
            caltemp =
              caltemp +
              ' && N' +
              item.twosize2 +
              '@thresholdService.' +
              item.twovariable2 +
              '(#v_' +
              item.twokpi2id +
              ',DEPTCODE,' +
              item.tworange2 +
              '))'
          }
        }
        if (strval === '') {
          strval = strtemp
        } else {
          strval = strval + '\n或\n' + strtemp
        }
        if (calval === '') {
          calval = caltemp
        } else {
          calval = calval + ' || ' + caltemp
        }
      })
      // console.log(strval)
      // console.log(calval)
      return {
        strconfig: strval,
        calconfig: calval,
        dynamicItem: JSON.stringify(this.form.dynamicItem), // 表单数据
      }
    },
    // 获取变量值类型名称
    getVarName(val) {
      let varname = ''
      switch (val) {
        case 'avg':
          varname = '平均值'
          break
        case 'max':
          varname = '最大值'
          break
        case 'min':
          varname = '最小值'
          break
        default:
          break
      }
      return varname
    },
    // 两区间的时候处理twosize1字段
    handleSize(val) {
      let varsize = ''
      switch (val) {
        case '<':
          varsize = '>'
          break
        case '<=':
          varsize = '>='
          break
        case '>':
          varsize = '<'
          break
        case '>=':
          varsize = '<='
          break
        default:
          break
      }
      return varsize
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.btndiv {
  text-align: right;
}
.formdiv {
  :global(.ant-select),
  :global(.ant-input-number),
  :global(.ant-input) {
    width: auto !important;
  }
  .delbtn,
  :global(.ant-form-item) {
    display: inline-block;
  }
  .delbtn {
    :global(.ant-btn) {
      margin: 4px;
      color: $white;
      background: $red-6;
      border: none;
    }
  }
  .inputrange,
  .inputkpi {
    border: none;
    border-bottom: 1px solid $black;
  }
}
</style>