sagacloud-alarm-system-pages/src/views/main/Select.vue

<template>
  <div class="my-all-select">
    <!-- 重要级别 -->
    <sg-mul-select class="my-select" v-model="selectParams.selectedLevel" :list="levelList" :label="label1"></sg-mul-select>
    <!-- 报警类型 -->
    <sg-mul-select class="my-select" v-model="selectParams.selectedType" :list="typeList" :label="label2"></sg-mul-select>
    <!-- 报警持续时间 -->
    <sg-select class="my-select" v-model="selectParams.selectedDurationTime" :list="startTimeList" :label="label4"></sg-select>
     <!-- 报警开始时间 -->
     <!-- <div class="my-select" v-if="clear==2">
       <history-date-picker></history-date-picker>
     </div> -->
    <div class="my-select">
      <div class="date-input" >
        <label>报警开始时间:</label>
        <input type="text" name="daterange" id="config-demo" class="form-control">
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
      </div>
    </div>
    <!-- 报警所在位置 -->
    <sg-tree-select class="my-select" v-model="selectParams.selectedPosition" :list="positionList" :label="label3" ></sg-tree-select>
    <!-- 搜索 -->
    <div class="my-select">
      <i-Input placeholder="输入设备/空间名称关键字查找" v-model="selectParams.keyword" clearable style="width:230px" @on-enter="onkeyup">
        <Icon type="ios-search" slot="suffix"/>
      </i-Input>
    </div>
  </div>
</template>

<script>
import sgMulSelect from "../../common/sagacloudMulSelect.vue"
import sgSelect from "../../common/sagacloudSelect.vue"
import sgTreeSelect from "../../common/sagasloudTreeSelect.vue"

// import {mapActions, mapMutations, mapGetters} from 'vuex'
import axios from 'axios'
import dataPickerConfig from '../../tools/dataPickerConfig.js'
// import { log } from 'util'
export default {
  components: {
    sgMulSelect,
    sgSelect,
    sgTreeSelect
  },

  mixins: [],

  props: {
    datePickerKey: {
      type: String,
      default: 'all'
    },
    dateLimitDays: {
      type: Number,
      default: Number.MAX_SAFE_INTEGER // js里的最大安全整数 9007199254740991
    }
  },

  data () {
    return {
      label1: "重要级别",
      label2: "报警类型",
      label3: "报警所在位置",
      label4: "报警持续时间",
      // 下拉框的默认值
      selectParams: {
        selectedLevel: [], // 全部
        selectedType: [],
        selectedPosition: {
          buildingId: [],
          floorId: [],
          spaceId: []
        },
        selectedDurationTime: "",
        selectedStartTime: {
          dStart: "", // 20181208
          dEnd: "" // 20181209
        },
        keyword: null
      },
      levelList: [
        {
          value: "S",
          text: "S级"
        },
        {
          value: "A",
          text: "A级"
        },
        {
          value: "B",
          text: "B级"
        },
        {
          value: "C",
          text: "C级"
        },
        {
          value: "D",
          text: "D级"
        }
      ],
      typeList: [
        {
          value: "1",
          text: "类型1"
        },
        {
          value: "2",
          text: "类型2"
        },
        {
          value: "3",
          text: "类型3"
        },
        {
          value: "4",
          text: "类型4"
        },
        {
          value: "5",
          text: "类型5"
        }
      ],
      positionList: [
      ],
      startTimeList: [
        {
          value: "5m",
          text: "不超过5分钟"
        },
        {
          text: "5分钟-2小时",
          value: "2h"
        },
        {
          text: "2-24小时",
          value: "24h"
        },
        {
          text: "超过24小时",
          value: "1d"
        }
      ],
      durationTimeList: [
        {
          value: "24h",
          text: "近24小时"
        },
        {
          value: "3d",
          text: "近3天"
        },
        {
          value: "7d",
          text: "近7天"
        },
        {
          value: "1m",
          text: "近一个月"
        },
        {
          value: "auto",
          text: "自定义"
        }
      ]
    }
  },

  computed: {

  },
  watch: {
    'selectParams.selectedLevel': function (newVal, oldVal) {
      this.$emit('setSelectParams', this.selectParams)
    },
    'selectParams.selectedPosition': function (newVal, oldVal) {
      this.$emit('setSelectParams', this.selectParams)
    },
    'selectParams.selectedType': function (newVal, oldVal) {
      this.$emit('setSelectParams', this.selectParams)
    },
    'selectParams.selectedDurationTime': function (newVal, oldVal) {
      this.$emit('setSelectParams', this.selectParams)
    },
    datePickerKey () {
      this.daterangepicker()
    },
    dateLimitDays () {
      this.daterangepicker()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.daterangepicker()
    })
    this.getRoomLists()
  },

  methods: {
    // 得到空间列表
    getRoomLists () {
      axios.get(`/alarm-system/alarm-system/alarm/buildingHierarchy?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`).then(res => {
        let data = res.data
        if (data.Result == 'success') {
          this.positionList = data.Content
          this.positionList.forEach(i => {
            i.title = i.buildingName || i.spaceName || i.floorName
            i.value = i.buildingId || i.spaceId || i.floorId
            i.checked = false // 默认不选中
            i.expand = false // 默认不展开
            i.type = i.buildingId ? 'building' : i.floorId ? 'floor' : 'space'
            if (i.content) {
              i.children = []
              i.content.forEach(j => {
                j.title = j.spaceName || j.floorName
                j.value = j.spaceId || j.floorId
                j.checked = false // 默认不选中
                j.expand = false // 默认不展开
                j.type = j.floorId ? 'floor' : 'space'
                i.children.push(j)
                if (j.content) {
                  j.children = []
                  j.content.forEach(k => {
                    k.title = k.spaceName
                    k.value = k.spaceId
                    k.checked = false // 默认不选中
                    k.expand = false // 默认不展开
                    k.type = 'space'
                    j.children.push(k)
                  })
                } else {
                  i.children = []
                }
              })
            } else {
              i.children = []
            }
          })
        }
      })
    },
    // 回车搜索
    onkeyup () {
      this.$emit('setSelectParams', this.selectParams)
    },
    // 绑定控制开始时间的函数
    /* eslint-disable */
    daterangepicker () {
      $("#config-demo").val(dataPickerConfig[this.datePickerKey].view)
      console.log(dataPickerConfig[this.datePickerKey].view)
      let vm = this
      $("#config-demo").daterangepicker(
        {
          startDate: moment().startOf('hour'),
          endDate: moment().startOf('hour').add(32, 'hour'),
          timePicker: false,
          timePicker24Hour: false,
          linkedCalendars: false,
          autoUpdateInput: false,
          showDropdowns: true,
          autoApply: true,
          dateLimit: {
            days: this.dateLimitDays
          },
          ranges: {
            "清空选择": [moment().subtract(30, "days"), moment().subtract(0, "days")],
            "近 24 小时": [ moment().subtract(0, "days"), moment().subtract(0, "days")],
            "近 3 天": [
              moment().subtract(3, "days"),
              moment().subtract(0, "days")
            ],
            "近 7 天": [moment().subtract(7, "days"), moment()],
            "近 1 个月": [
              moment().subtract(30, "days"),
              moment().subtract(0, "days")
            ]
          },
          opens: "right",
          separator: "-",
          locale: {
            format: "YYYY-MM-DD",
            applyLabel: "应用",
            cancelLabel: "取消",
            resetLabel: "重置",
            customRangeLabel: "自定义",
            daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月"
            ]
          }
        },
        function (start, end, label) {
          let _start = this.startDate.format(this.locale.format)
          let _end = this.endDate.format(this.locale.format)
          if (!this.startDate) {
            this.element.val("")
          } else {
            if (_start == '1970-01-01' && _end == '1970-01-01') {
              this.element.val("全部")
              vm.selectParams.selectedStartTime.dStart = ''
              vm.selectParams.selectedStartTime.dEnd = ''
            } else {
              this.element.val(_start + this.locale.separator + _end)
              vm.selectParams.selectedStartTime.dStart = _start.split('-').join('') + '000000'
              vm.selectParams.selectedStartTime.dEnd = _start == _end ? _end.split('-').join('') + '595959' : _end.split('-').join('') + '000000'
            }
            console.log( vm.selectParams.selectedStartTime)
            vm.$emit('setSelectParams', vm.selectParams)
          }
        }
      )
    }
  }
}
</script>

<style scoped lang="less" >
.my-all-select {
  padding: 18px 0 20px 12px;
  background: #f4f5f8;
  display: flex;
  // justify-content: space-between;
  flex-wrap: wrap;
  .my-select {
    padding: 4px 8px;
    display: inline-block;
    .date-input {
      width: 362px;
      height: 34px;
      display: flex;
      background: #fff;
      border: 1px solid #ccc;
      position: relative;
      border-radius: 4px;
      &:hover,
      &:active,
      &:focus {
        outline: none;
        border-color: #2d8cf0;
      }
      > input {
        height: 30px;
        border: none;
        outline: none;
        font-size: 14px;
        &:focus {
          box-shadow: none;
        }
      }
      > label {
        width: 148px;
        height: 34px;
        padding-top: 4px;
        padding-left: 5px;
      }
      > i {
        position: absolute;
        bottom: 6px;
        right: 24px;
        top: auto;
        cursor: pointer;
      }

      .daterangepicker .ranges li.active {
        background: #728dee;
        border: 1px solid #728dee;
      }
      .daterangepicker td.active,
      .daterangepicker td.active:hover {
        background: #728dee;
      }
    }
  }
}
</style>
<style lang="less">
.my-all-select {
  .ivu-input {
    height: 34px;
    border: 1px solid #ccc;
    &:hover,
    &:active,
    &:focus {
      outline: none;
      border-color: #2d8cf0;
    }
  }
}
</style>