<template>
  <div id="main" class="h-all">
    <el-dialog
      @close="close"
      v-dialogDrag
      :title="$t('CollectTaskCommands.createCollectTask')"
      style="font-size: 10px;" width='830px'
      :visible.sync="createCollectTask">
      <el-row>
        <el-form :model="form" inline="true" ref="form">
          <el-form-item style="margin-bottom: -10px; float:left">
            <el-form-item :label="'*'+ $t('CollectTask.taskName') + ':'" :label-width="formLabelWidth" style="margin-bottom: -10px;margin-top: -10px;">
              <el-input size='mini' :placeholder="$t('common.placeholder1')" v-model="form.taskName"
                        autocomplete="off" style="width:200px" v-on:blur="taskNameCheck"></el-input>
            </el-form-item>
            <el-form-item :label="'*'+ $t('CollectTask.collectPeriod')+':'"
                          :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;"
                          prop="string">
              <el-select clearable
                         size="mini"
                         @change="collectPeriodCheck(form.collectPeriod)"
                         v-model="form.collectPeriod"
                         style="width:210px"
                         filterable @blur="selectBlur"
                         :placeholder="$t('common.pleaseSelect')">
                <el-option v-for="item1 in periodList"
                           :key="item1.key"
                           :label="item1.label"
                           :value="item1.label">
                </el-option>
              </el-select>
              <span>min</span>
            </el-form-item>
          </el-form-item>
          <el-form-item style="float:left;margin-bottom: -10px">
            <el-form-item :label="$t('DeviceConfigurationManagement.nodeDesc')+':'" :label-width="formLabelWidth">
              <el-input type="textarea" :rows="3" size="mini" :placeholder="$t('common.placeholder')" v-model="form.description"
                        autocomplete="off" style="width: 550px; margin-top: 0px; margin-bottom: 10px"></el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item style="float:left;margin-bottom: -10px">
            <el-form-item :label="'*'+ $t('CollectTask.useTime')+':'" :label-width="formLabelWidth" style="margin-bottom: 10px">
              <el-radio-group v-model="form.radio" @change="startChange(form.radio)" style="margin-bottom: -5px">
                <el-radio label=0>{{$t("CollectTask.useImmediate")}}</el-radio>
                <el-radio label=1 style="margin-left: -20px">{{$t("CollectTask.useTimer")}}</el-radio>
              </el-radio-group>
              <el-date-picker
                v-model="beginTimestamp"
                type="datetime"
                size="mini"
                style="width: 175px"
                :disabled="timeFlag"
                format="yyyy-MM-dd HH:mm:ss"
                :clearable="true"
                align="center"
                :picker-options="startDatePicker"
                @change="beginDateChange"
                :placeholder="$t('Performance.startTimePlaceholder')">
              </el-date-picker>
              <span> - </span>
              <el-date-picker
                v-model="endTimestamp"
                type="datetime"
                size="mini"
                style="width: 175px"
                :disabled="timeFlag"
                format="yyyy-MM-dd HH:mm:ss"
                :clearable="true"
                align="center"
                :picker-options="endDatePicker"
                @change="endDateChange"
                :placeholder="$t('Performance.endTimePlaceholder')">
              </el-date-picker>
            </el-form-item>
          </el-form-item>
          <el-form-item style="float:left;margin-bottom: -10px">
            <el-form-item :label="'*'+ $t('CollectTask.indexTemplate')+':'"
                          :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;"
                          prop="string">
              <el-select clearable
                         size="mini"
                         style="width:200px"
                         @change="indexTemplateChange"
                         v-model="form.indexTemplate"
                         :placeholder="$t('common.pleaseSelect')">
                <el-option v-for="item in indexTemplateList"
                           :key="item.performTemplateKey"
                           :label="item.performTemplateName"
                           :value="item.performTemplateKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="'*'+ $t('CollectTask.subnet')+':'"
                          :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;"
                          prop="string">
              <el-select clearable
                         size="mini"
                         style="width:210px"
                         @change="subnetCheck(form.subnet)"
                         v-model="form.subnet"
                         :placeholder="$t('common.pleaseSelect')">
                <el-option v-for="item1 in subnetList"
                           :key="item1.subnetKey"
                           :label="item1.subnetName"
                           :value="item1.subnetKey">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item style="float:left;margin-bottom: -10px">
            <el-form-item :label="'*'+ $t('CollectTask.monitorObject')+':'"
                          :label-width="formLabelWidth"
                          style="margin-bottom: -10px;margin-top: -10px;">
              <el-radio-group v-model="monitorObject" style="margin-top: 10px;margin-bottom: 20px;margin-left: 0px">
                <el-radio :label=0>{{$t("DeviceConfigurationManagement.nodeType")}}</el-radio>
                <el-select clearable
                           size="mini"
                           style="width:200px"
                           multiple
                           collapse-tags
                           v-model="form.deviceType"
                           :disabled="monitorObjectFlag0"
                           @change="deviceTypeCheck(form.deviceType)"
                           :placeholder="$t('common.pleaseSelect')">
                  <el-option v-for="item in deviceTypeList1"
                             :key="item.deviceTypeKey"
                             :label="item.deviceType"
                             :value="item.deviceTypeKey"></el-option>
                </el-select>
                <br>
                <el-radio :label=1>{{$t("DeviceConfigurationManagement.nodeModel")}}</el-radio>
                <el-select clearable
                           size="mini"
                           style="width:200px"
                           multiple
                           collapse-tags
                           @change="deviceModelCheck(form.deviceModel)"
                           v-model="form.deviceModel"
                           :disabled="monitorObjectFlag1"
                           :placeholder="$t('common.pleaseSelect')">
                  <el-option v-for="item in deviceModelList1"
                             :key="item.deviceModel"
                             :label="item.deviceModel"
                             :value="item.deviceModel">
                  </el-option>
                </el-select>
              </el-radio-group>
<!--              <el-form-item>-->
<!--                <el-form-item style="width: 100px">-->
<!--                </el-form-item>-->
<!--              </el-form-item>-->
            </el-form-item>
          </el-form-item>
          <el-form-item style="float:left;margin-bottom: -10px">
            <el-form-item :label-width="formLabelWidth" style="margin-right:135px; margin-top: -8px;">
              <el-radio v-model='monitorObject' :label=2>{{$t("DeviceConfigurationManagement.nodeName")}}</el-radio>
              <el-input
                style="width: 200px;margin-left: -6px"
                size="mini"
                disabled
                :placeholder="$t('common.placeholder')"
                v-model="form.deviceNameList">
              </el-input>
              <el-button size='mini'
                         type="primary"
                         :disabled="chooseDeviceFlag"
                         @click="chooseDevice">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanze"></use>
                </svg>
                {{$t("common.clickSelect")}}
              </el-button>
            </el-form-item>
            <el-form-item style="margin-left: 300px">
            </el-form-item>
          </el-form-item>
          <el-form-item style="float:left">
            <el-form-item :label="'*'+ $t('CollectTask.taskStatus')+':'"
                          :label-width="formLabelWidth"
                          style="margin-top: -40px;">
              <el-switch
                v-model="form.value"
                :active-value=0
                :inactive-value=1>
              </el-switch>
            </el-form-item>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row style="margin-top: -50px;margin-right: 150px" slot="footer">
        <el-button icon="el-icon-circle-check" type="primary" size="mini" @click="onSubmit">{{$t("common.ok")}}</el-button>
        <el-button icon='el-icon-circle-close' size="mini" @click="close">{{$t("common.cancel")}}</el-button>
      </el-row>
    </el-dialog>
    <ChooseDeviceDialog :innerVisible.sync="innerVisible"
                        :passSubnet="passSubnet"
                        :indexTemplate="form.indexTemplate"
                        :deviceNameList.sync="form.deviceNameList">
    </ChooseDeviceDialog>
  </div>
</template>

<script>
import DeviceService from '../../../domain/services/DeviceService'
import SubnetService from '../../../domain/services/SubnetService'
import HelperUtil from '../../../utils/HelperUtil'
import legitimacyCheck from '../../../utils/legitimacyCheck'
import ChooseDeviceDialog from '../../DialogComponents/CollectTaskDialog/ChooseDeviceDialog'
import CollectTaskService from '../../../domain/services/CollectTaskService'
import loading from '../../../utils/Loading'
import IndexTeplateService from '../../../domain/services/IndexTeplateService'

export default {
  name: 'CreateAndCopyCollTaskDialog',
  props: ['command'],
  data: function () {
    return {
      createCollectTask: false,
      initList: this.command.target,
      check: null,
      flag: true,
      deviceTypeList1: [],
      deviceModelList1: [],
      deviceList: [],
      subnetList: [],
      subnetList1: {},
      passSubnet: {},
      deviceModelList: [],
      indexTemplateList: [],
      indexTemplateList1: {},
      deviceTypeList: [],
      monitorObjectFlag0: false,
      monitorObjectFlag1: true,
      monitorObjectFlag2: true,
      monitorObject: 0,
      chooseDeviceFlag: true,
      beginTimestamp: '',
      endTimestamp: '',
      monitorObjectInit: '',
      form: {
        taskName: '',
        collectPeriod: '',
        description: '',
        value: 0,
        radio: '0',
        indexTemplate: '',
        subnet: '',
        deviceType: '',
        deviceModel: '',
        deviceNameList: ''
      },
      periodList: [
        {
          key: '0',
          label: '10'
        },
        {
          key: '1',
          label: '15'
        },
        {
          key: '2',
          label: '30'
        }
      ],
      startUseFlag: false,
      timeFlag: true,
      startDatePicker: this.beginDate(),
      endDatePicker: this.endDate(),
      commandContext: {},
      innerVisible: false,
      tableHeight: window.innerHeight * 0.7,
      formLabelWidth: '120px'
    }
  },
  methods: {
    /**
     * @Description  : 开始时间
     * @author       : ls
     * @date         : 2020/4/29 14:50
     * @param        :
     * @return       :
     */
    beginDate: function () {
      let self = this
      return {
        disabledDate (time) {
          if (self.endTimestamp === '') {
            return time.getTime() < Date.now()
          } else {
            return time.getTime() > self.endTimestamp.getTime() || time.getTime() < Date.now()
          }
        }
      }
    },
    /**
     * @Description  : 结束时间
     * @author       : ls
     * @date         : 2020/4/29 14:50
     * @param        :
     * @return       :
     */
    endDate: function () {
      let self = this
      return {
        disabledDate (time) {
          if (self.beginTimestamp === '') {
            return time.getTime() < Date.now()
          } else {
            return time.getTime() < (self.beginTimestamp.getTime()) || time.getTime() < Date.now()
          }
        }
      }
    },
    /**
     * @Description  : 确认
     * @author       : ls
     * @date         : 2020/4/23 15:08
     * @param        :
     * @return       :
     */
    onSubmit: function () {
      if (!this.totalCheck()) {
        return
      }
      this.monitorObjectInit = ''
      if (this.monitorObject === 0) {
        this.monitorObjectInit = this.form.deviceType.toString()
      }
      if (this.monitorObject === 1) {
        this.monitorObjectInit = this.form.deviceModel.toString()
      }
      if (this.monitorObject === 2) {
        var arr = this.form.deviceNameList.split(',')
        var l = arr.length
        if (l === 1) {
          for (let t = 0; t < this.deviceList.length; t++) {
            if (this.deviceList[t].displayName === arr[0]) {
              this.monitorObjectInit = this.monitorObjectInit.concat(this.deviceList[t].deviceKey)
              break
            }
          }
        } else {
          for (let j = 0; j < l; j++) {
            for (let k = 0; k < this.deviceList.length; k++) {
              if (this.deviceList[k].displayName === arr[j]) {
                if (j !== l - 1) {
                  this.monitorObjectInit = this.monitorObjectInit.concat(this.deviceList[k].deviceKey).concat(',')
                  break
                } else {
                  this.monitorObjectInit = this.monitorObjectInit.concat(this.deviceList[k].deviceKey)
                }
              }
            }
          }
        }
      }
      let formTask = {
        performTaskName: this.form.taskName,
        period: parseInt(this.form.collectPeriod),
        description: this.form.description,
        status: this.form.value,
        startTime: (this.beginTimestamp === '' || this.beginTimestamp === null) ? '' : HelperUtil.dateToString(this.beginTimestamp).concat('.000'),
        endTime: (this.endTimestamp === '' || this.endTimestamp === null) ? '' : HelperUtil.dateToString(this.endTimestamp).concat('.000'),
        performTemplateKey: this.form.indexTemplate,
        subnetKey: this.form.subnet,
        monitorType: this.monitorObject,
        monitorObject: this.monitorObjectInit
      }
      let _this = this
      let loadingInstance = _this.Loading.openLoading()
      CollectTaskService.createCollectTask(formTask).then(result => {
        _this.Loading.closeLoading(loadingInstance)
        _this.InfoTip.successTip(_this, HelperUtil.getStatusCodeObjectByCode(_this.successCode.ADD_CODE))
        _this.close()
      }).catch(err => {
        _this.Loading.closeLoading(loadingInstance)
        this.InfoTip.errorTip(this, err)
      })
    },
    /**
     * @Description  : 任务名称校验
     * @author       : ls
     * @date         : 2020/4/28 13:55
     * @param        :
     * @return       :
     */
    taskNameCheck: function () {
      if (!this.check.textNullCheck(this.form.taskName)) {
        this.InfoTip.warningTip_alarm(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.taskName'))
        return false
      }
      if (!this.check.textLengthCheck(this.form.taskName)) return false
      return true
    },
    selectBlur: function (e) {
      this.form.collectPeriod = e.target.value
    },
    /**
     * @Description  : 采集周期校验
     * @auor       : ls
     * @date         : 2020/4/28 13:58
     * @param        :
     * @return       :
     */
    collectPeriodCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.collectPeriod'))
        return false
      }
      return true
    },
    /**
     * @Description  : 立即启用设置
     * @author       : ls
     * @date         : 2020/4/28 14:02
     * @param        :
     * @return       :
     */
    useDisableOrNo: function (val) {
      if (val === 1) {
        this.startUseFlag = true
      }
      if (val === 0) {
        this.startUseFlag = false
      }
      this.timeFlag = true
    },
    /**
     * @Description  : 时间校验
     * @author       : ls
     * @date         : 2020/4/28 14:19
     * @param        :
     * @return       :
     */
    startChange: function (val) {
      if (val === '0') {
        this.timeFlag = true
        this.beginTimestamp = ''
        this.endTimestamp = ''
      }
      if (val === '1') {
        this.timeFlag = false
        var arr = HelperUtil.setDefaultDateTime()
        this.beginTimestamp = arr[1]
      }
    },
    /**
     * @Description  : 指标模板校验
     * @author       : ls
     * @date         : 2020/4/28 14:35
     * @param        :
     * @return       :
     */
    indexTemplateCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.indexTemplate'))
        return false
      }
      return true
    },
    /**
     * @Description  : indexTemplateChange
     * @author       : ls
     * @date         : 2021/1/22 16:34
     * @param        :
     * @return       :
     */
    indexTemplateChange1: function () {
      switch (this.monitorObject) {
        case 0:
          this.form.deviceType = ''
          let unitList = this.indexTemplateList1[this.form.indexTemplate].unitList
          this.deviceTypeList1 = []
          let obj = {}
          for (let t = 0; t < unitList.length; t++) {
            if (!obj[unitList[t].deviceTypeKey]) {
              this.deviceTypeList1.push(unitList[t])
              obj[unitList[t].deviceTypeKey] = true
            }
          }
          break
        case 1:
          this.form.deviceModel = ''
          let unitListModel = this.indexTemplateList1[this.form.indexTemplate].unitList
          this.deviceModelList1 = []
          let obj1 = {}
          for (let n = 0; n < unitListModel.length; n++) {
            if (!obj1[unitListModel[n].deviceTypeKey]) {
              this.deviceModelList1.push(unitListModel[n])
              obj1[unitListModel[n].deviceModel] = true
            }
          }
          break
        default:
          break
      }
    },
    /**
     * @Description  : indexTemplateChange
     * @author       : ls
     * @date         : 2021/1/25 16:06
     * @param        :
     * @return       :
     */
    indexTemplateChange: function () {
      this.form.deviceType = ''
      let unitList = this.indexTemplateList1[this.form.indexTemplate].unitList
      this.deviceTypeList1 = []
      let obj = {}
      for (let t = 0; t < unitList.length; t++) {
        if (!obj[unitList[t].deviceTypeKey]) {
          this.deviceTypeList1.push(unitList[t])
          obj[unitList[t].deviceTypeKey] = true
        }
      }
      this.form.deviceModel = ''
      let unitListModel = this.indexTemplateList1[this.form.indexTemplate].unitList
      this.deviceModelList1 = []
      let obj1 = {}
      for (let n = 0; n < unitListModel.length; n++) {
        if (!obj1[unitListModel[n].deviceTypeKey]) {
          this.deviceModelList1.push(unitListModel[n])
          obj1[unitListModel[n].deviceModel] = true
        }
      }
    },
    /**
     * @Description  : 所属子网
     * @author       : ls
     * @date         : 2020/4/28 14:37
     * @param        :
     * @return       :
     */
    subnetCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('CollectTask.subnet'))
        return false
      }
      return true
    },
    /**
     * @Description  : 网元类型
     * @author       : ls
     * @date         : 2020/4/28 14:41
     * @param        :
     * @return       :
     */
    deviceTypeCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeType'))
        return false
      }
      return true
    },
    /**
     * @Description  : 网元型号
     * @author       : ls
     * @date         : 2020/4/28 14:42
     * @param        :
     * @return       :
     */
    deviceModelCheck: function (val) {
      var result = this.check.textNullCheck(val)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeModel'))
        return false
      }
      return true
    },
    /**
     * @Description  : 选择网元校验
     * @author       : ls
     * @date         : 2020/4/29 14:46
     * @param        :
     * @return       :
     */
    chooseCheck: function () {
      if (!this.indexTemplateCheck(this.form.indexTemplate)) {
        return false
      }
      if (!this.subnetCheck(this.form.subnet)) {
        return false
      }
      return true
    },
    /**
     * @Description  : xianshi
     * @author       : ls
     * @date         : 2020/4/28 15:28
     * @param        :
     * @return       :
     */
    chooseDevice: function () {
      if (!this.chooseCheck()) {
        return
      }
      this.form.deviceNameList = ''
      this.passSubnet = this.subnetList1[this.form.subnet]
      this.innerVisible = true
    },
    /**
     * @Description  : 网元名称
     * @author       : ls
     * @date         : 2020/4/28 15:03
     * @param        :
     * @return       :
     */
    deviceNameCheck: function () {
      var result = this.check.textNullCheck(this.form.deviceNameList)
      if (!result) {
        this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.TEXT_NULL_CODE), this.$t('DeviceConfigurationManagement.nodeName'))
        return false
      }
      return true
    },
    /**
     * @Description  : 获取网元类型
     * @author       : ls
     * @date         : 2020/4/28 13:50
     * @param        :
     * @return       :
     */
    getAllDeviceType: function () {
      let _this = this
      DeviceService.getAllDeviceTypeCollection().then(result => {
        _this.deviceTypeList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取网元型号
     * @author       : ls
     * @date         : 2020/4/28 13:27
     * @param        :
     * @return       :
     */
    getAllDeviceModel: function () {
      let _this = this
      DeviceService.getAllDeviceModelCollection().then(result => {
        _this.deviceModelList = Object.values(result)
      }).catch(err => {
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : 获取指标模板
     * @author       : ls
     * @date         : 2020/5/25 10:16
     * @param        :
     * @return       :
     */
    getAllIndexTemplate: function () {
      let _this = this
      let loadingInstance = loading.openLoading()
      IndexTeplateService.getAllIndexTemplateCollection().then(result => {
        _this.indexTemplateList = Object.values(result)
        _this.indexTemplateList1 = result
        loadingInstance.close()
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
        loadingInstance.close()
      })
    },
    /**
     * @Description  : 提交校验
     * @author       : ls
     * @date         : 2020/4/28 14:46
     * @param        :
     * @return       :
     */
    totalCheck: function () {
      if (!this.taskNameCheck(this.form.taskName)) {
        return false
      }
      if (!this.collectPeriodCheck(this.form.collectPeriod)) {
        return false
      }
      if (!this.indexTemplateCheck(this.form.indexTemplate)) {
        return false
      }
      if (!this.subnetCheck(this.form.subnet)) {
        return false
      }
      switch (this.monitorObject) {
        case 0:
          if (!this.deviceTypeCheck(this.form.deviceType)) {
            return false
          }
          break
        case 1:
          if (!this.deviceModelCheck(this.form.deviceModel)) {
            return false
          }
          break
        case 2:
          if (!this.deviceNameCheck(this.form.deviceNameList)) {
            return false
          }
          break
      }
      return true
    },
    /**
       * @Description  : 关闭
       * @author       : ls
       * @date         : 2020/4/23 12:34
       * @param        :
       * @return       :
       */
    close: function () {
      this.command.done()
    },
    /**
     * @Description  : 获取所属子网
     * @author       : ls
     * @date         : 2020/4/28 15:12
     * @param        :
     * @return       :
     */
    getAllSubnet: function () {
      let _this = this
      SubnetService.getAllSubnetCollection().then(result => {
        // 成功
        _this.subnetList1 = result
        _this.subnetList = Object.values(result)
      }).catch(err => {
        // 失败
        _this.InfoTip.errorTip(_this, err)
      })
    },
    /**
     * @Description  : getAllDevice
     * @author       : ls
     * @date         : 2020/11/17 16:54
     * @param        :
     * @return       :
     */
    getAllDevice: function () {
      DeviceService.getAllDeviceCollection().then(result => {
        this.deviceList = Object.values(result)
      }).catch(err => {
        this.InfoTip.errorTip(this, err)
      })
    }
  },
  created: function () {
    this.check = legitimacyCheck()
    this.getAllSubnet()
    this.getAllDevice()
    this.getAllDeviceType()
    this.getAllDeviceModel()
    this.getAllIndexTemplate()
  },
  // 初始化函数，加载数据
  mounted () {
    this.createCollectTask = true
  },
  components: {
    ChooseDeviceDialog
  },
  watch: {
    innerVisible (newVal, oldVal) {
    },
    monitorObject (newVal) {
      switch (newVal) {
        case 0:
          this.monitorObjectFlag0 = false
          this.monitorObjectFlag1 = true
          this.monitorObjectFlag2 = true
          this.chooseDeviceFlag = true
          break
        case 1:
          this.monitorObjectFlag0 = true
          this.monitorObjectFlag1 = false
          this.monitorObjectFlag2 = true
          this.chooseDeviceFlag = true
          break
        case 2:
          this.monitorObjectFlag0 = true
          this.monitorObjectFlag1 = true
          this.monitorObjectFlag2 = false
          this.chooseDeviceFlag = false
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
  /*!* 外层布局容器样式 *!*/
  .el-header {
    background-color: #f9fafc;
    color: #333;
    line-height: 40px;
  }

  #box{
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .el-card__header {
    background-color: greenyellow;
  }

  /* .el-input {
     width: 330px;
   }*/

  /deep/ .el-textarea__inner{
    font-size: 12px;
  }
</style>
