EdgeManager/src/views/scada/scadaQuery/index.vue

<template>
  <d2-container>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="工序单元">
        <el-select
           v-model="formInline.workingSubclass"
           filterable
           clearable
           placeholder="工序单元"
           @change="getCodesByWorkingSubclass(formInline.workingSubclass)">
          <el-option
            v-for="workingSubclass in workingSubclasses"
            :key="workingSubclass"
            :value="workingSubclass">
          </el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="采集时间">
        <el-date-picker
          v-model="formInline.time"
          type="datetimerange"
          :clearable="false"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="节点编码">
        <el-select
          v-model="formInline.code"
          filterable
          clearable
          placeholder="节点编码">
          <el-option
            v-for="code in codes"
            :key="code"
            :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportExcel">导出EXCEL</el-button>
      </el-form-item>
    </el-form>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="值筛选">
        <el-select v-model="valueType" @change="valueSearch">
          <el-option v-for="(item, i) in options" :key="i" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="show_integer_input == 'bool'">
        <el-radio v-model="selectData.selectBool" label="true">TRUE</el-radio>
        <el-radio v-model="selectData.selectBool" label="false">FALSE</el-radio>
      </el-form-item>


      <el-form-item v-show="show_integer_input == 'number'">
        <div class="number_css">
          <el-select v-model="selectData.select" placeholder="请选择" style="width:85px;">
            <el-option label="大于" value=">">
            </el-option>
            <el-option label="等于" value="==">
            </el-option>
            <el-option label="小于" value="<">
            </el-option>
          </el-select>
          <el-input-number v-model="selectData.max" placeholder="最大值" :min="0" style="width:100px;" :controls='false' />
        </div>
      </el-form-item>

      <el-form-item label="数字区间筛选" v-show="show_integer_input == 'number'">
        <div class="number_css">
          <el-input-number v-model="selectData.intervalNumber.min" placeholder="最小值" :min="0" style="width:100px;"
            :controls='false' />
          <el-input-number v-model="selectData.intervalNumber.max" placeholder="最大值" :min="0" style="width:100px;"
            :controls='false' />
        </div>
      </el-form-item>

      <el-form-item v-show="show_integer_input == 'string'">
        <div class="number_css">
          <el-select v-model="selectData.selectStringCompare" placeholder="请选择" style="width:85px;">
            <el-option v-for="(item, i) in stringOptions" :key="i" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="selectData.selectString" placeholder="请输入" style="width:100px;" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">筛选</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectRestore"> 还原</el-button>
      </el-form-item>
    </el-form>
    <c-grid
      :filter="tableFilter"
      :key='key'
      :data="data">
      <c-grid-column
        field="id"
        width="5%">
      序号
      </c-grid-column>
      <c-grid-column
        field="name"
        width="16.25%">
      节点名称
      </c-grid-column>
      <c-grid-column
        field="value"
        width="16.25%"
        sort="true">
      值
      </c-grid-column>
      <c-grid-column
        field="device_code"
        width="16.25%"
        sort="true">
      设备
      </c-grid-column>
      <c-grid-column
        field="batch"
        width="16.25%"
        sort="true">
      批次
      </c-grid-column>
      <c-grid-column
        field="capture_time"
        width="30%"
        sort="true">
      采集时间
      </c-grid-column>
    </c-grid>
  </d2-container>
</template>

<script>
const now = new Date()

//导出表头
const columns = [
  {
    label: '序号',
    prop: 'id'
  },
  {
    label: '节点名称',
    prop: 'name'
  },
  {
    label: '值',
    prop: 'value'
  },
  {
    label: '设备',
    prop: 'device_code'
  },
  {
    label: '批次',
    prop: 'batch'
  },
  {
    label: '采集时间',
    prop: 'capture_time'
  }

]

const options = [
  {
    value: 'string',
    label: 'string(字符串)'
  },
  {
    value: 'number',
    label: 'number(数字)'
  },
  {
    value: 'bool',
    label: 'bool(逻辑值)'
  }
]


const stringOptions = [
  {
    value: '_.eq',
    label: '等于'
  },
  {
    value: '!_.eq',
    label: '不等于'
  },
  {
    value: 'this.stringCompare',
    label: '包含'
  },
  {
    value: '!this.stringCompare',
    label: '不包含'
  }
]

export default {
  data () {
    return {
      formInline: {
        workingSubclass: '',
        time: [now - 3600 * 1000 * 24 * 7, +now],
        code: ''
      },
      workingSubclasses: [],
      codes: [],
      data: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      excelData: [],
      stringOptions,
      show_integer_input: '',
      key: false,
      selectData: {
        select: '>',
        max: 0,
        selectBool: false,
        selectString: '',
        selectStringCompare: '_.eq',
        intervalNumber: {
          min: 0,
          max: 0
        }
      },
      valueType: '',
      options,
    }
  },
  methods: {
    async getworkingSubclasses () {
      try {
        this.workingSubclasses = await this.$api.QUERY_WORKING_SUBCLASSES()
      } catch (e) {
        console.log(e)
      }
    },
    async getCodesByWorkingSubclass (workingSubclass) {
      try {
        this.codes = await this.$api.QUERY_CODES(workingSubclass)
      } catch (e) {
        console.log(e)
      }
    },
    async getData () {
      this.excelData = []
      if (!this.formInline.workingSubclass) {
        this.$message.error('请选择工序单元')
      }
      try {
        this.data = await this.$api.QUERY_NODE_DATA({
          workingSubclass: this.formInline.workingSubclass,
          startTime: this.formInline.time[0],
          endTime: this.formInline.time[1],
          code: this.formInline.code
        })
      } catch (e) {
        console.log(e)
      }
    },
    async exportExcel() {
      let data = this.excelData.length < 1 ? this.data : this.excelData //如果没有使用 this.excelData为空则代表没有使用筛选
      this.$export.excel({
        columns,
        data
      }).then(() => {
        this.$message.error('导出EXCEL成功！')
      })
    },
    valueSearch(e) {
      this.show_integer_input = e
    },
    //还原
    selectRestore() {
      this.show_integer_input = ''
      this.selectData = {
        select: '>',
        max: 0,
        selectBool: false,
        selectString: '',
        selectStringCompare: '_.eq',
        intervalNumber: {
          min: 0,
          max: 0
        }
      }
      this.excelData = []
      this.valueType = ''
      this.key = !this.key //取反重新渲染组件
    },
    //筛选
    search() {
      let max = this.selectData.intervalNumber.max
      let min = this.selectData.intervalNumber.min
      if (max < min) {
        this.selectData.intervalNumber.min = 0
        this.selectData.intervalNumber.max = 0
        this.$message.error('数字区间筛选最大值不能小于最小值')
        return false
      }
      this.excelData = []
      this.key = !this.key //取反重新组件渲染
    },
    tableFilter(e) {
      switch (this.valueType) {
        case 'string':
          if (eval(this.selectData.selectStringCompare + '("' + this.selectData.selectString + '","' + e.value + '")')) {
            this.excelData.push(e)
            return e;
          }
          break;
        case 'bool':
          if (e.value === this.selectData.selectBool) {
            this.excelData.push(e)
            return e;
          }
          break;
        case 'number':
          //判断值是否为数字并且不为Boolean
          if (Number(e.value) && !isBoolean(e.value)) {
            let condition = e.value + this.selectData.select + this.selectData.max
            if (this.selectData.intervalNumber.max && this.selectData.select !== '=') {
              //拼接区间判断
              condition = '(' + condition + ') && '
              condition += '(' + this.selectData.intervalNumber.min + ' < ' + e.value + ') && (' + e.value + ' < ' + this.selectData.intervalNumber.max + ')'
            }

            if (eval(condition)) {
              this.excelData.push(e)
              return e;
            }
          }
          break;
        default:
          return e
      }
    },
    stringCompare(val, other) {
      return other.indexOf(val) > -1 ? true : false
    },
  },
  mounted () {
    this.getworkingSubclasses()
  }
}
</script>
<style scoped>
.number_css {
  border-radius: 4px;
  border: 1px solid #DCDFE6;
}

/deep/.number_css .el-input__inner:hover {
  border-color: #fff
}

/deep/.number_css .el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #fff
}

/deep/.number_css .el-input__inner {
  border: 1px solid #fff;
}

/deep/.number_css .el-select:hover .el-input__inner {
  border-color: #fff;
}

/deep/.number_css .el-select .el-input.is-focus .el-input__inner {
  border-color: #fff;
}
</style>