PerformanceMonitor.vue

<template>
  <div id="main" class="h-all">
    <el-container class="h-all">
      <el-header height="auto">
        <!-- 条件查询工具栏 -->
        <div class="header-button-box">
          <el-button size='mini' icon="el-icon-edit" type="primary" @click="updatePerformType">{{$t("common.updateBtn")}}</el-button>
        </div>
      </el-header>
      <!-- table数据表格 -->
      <el-main class="adapt-height-box">
        <el-table
          :empty-text="$t('common.noData')"
          header-row-class-name="table-header"
          cell-class-name="table-cell"
          class="adapt-height"
          ref="multipleTable"
          :data="performList"
          stripe
          tooltip-effect="dark"
          :highlight-current-row="true"
          @row-click="clickRow"
          height="auto"
          border
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="28">
          </el-table-column>
          <el-table-column
            type="index"
            :label="$t('Performance.index')"
            width="60">
          </el-table-column>
          <el-table-column
            prop="deviceParam"
            :label="$t('Performance.performanceEvent')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="deviceTypeKey"
            :label="$t('Performance.networkElementType')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="deviceModel"
            :label="$t('Performance.deviceModel')"
            :show-overflow-tooltip="true"
            width="150">
          </el-table-column>
          <el-table-column
            prop="period"
            :label="$t('Performance.monitoringPeriod') + '(min)'"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="lowerLimit0"
            :label="$t('Performance.minorAlarmLowerLimit')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="upperLimit0"
            :label="$t('Performance.minorAlarmUpperLimit')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="lowerLimit1"
            :label="$t('Performance.majorAlarmLowerLimit')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="upperLimit1"
            :label="$t('Performance.majorAlarmUpperLimit')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="lowerLimit2"
            :label="$t('Performance.criticalAlarmLowerLimit')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="upperLimit2"
            :label="$t('Performance.criticalAlarmUpperLimit')"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="unit"
            :label="$t('Performance.unit')"
            :show-overflow-tooltip="true"
            width="60">
          </el-table-column>
          <el-table-column
            prop="status"
            :label="$t('Performance.enablementOption')"
            :formatter="formatStatus"
            :show-overflow-tooltip="true">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <CommandExecuteContext v-bind:commands="commandContext"></CommandExecuteContext>
  </div>
</template>

<script>
  //路径不对
  import CommandExecuteContext from '../../commands/CommandExecuteContext'
  import PerformanceCommands from "../../commands/PerformanceCommands"
  import PerformanceMonitorService from '../../domain/services/PerformanceMonitorService'
  import HelperUtil from "../../utils/HelperUtil";

  export default {
    name: 'PerformanceMonitor',

    components: {
      CommandExecuteContext,
    },

    //创建期间
    beforeCreate() {
    },

    //vue加载初始化函数，加载数据
    created: function () {
      this.getAllPerformType();
    },
    //存放数据
    data: function () {
      return {
        //命令
        commandContext: {},
        //为修改传参数
        updateInitList: [],
        multipleSelection: [],

        //form参数
        formLabelWidth: '120px',
        labelPosition: 'right',

        //双向绑定展示数据
        performList: [],

        enableChecked: true,

        //表单输入检测
        rules: {}
      }
    },

    computed: {
      //命令
      updatePerformanceMonitorCommand() {
        return PerformanceCommands.updatePerformanceMonitorCommand(this.updateInitList, this.commandContext)
      },

    },

    methods: {
      /***
       * @Description  : 表格过滤性能检测使能状态
       * @author       : zf
       * @date         : 2019/02/25 15:54
       */
      formatStatus: function (row, column) {
        let result = row.status;
        if (row.status === 0) {
          result = this.$t('Performance.enable')
        }
        else if (row.status === 1) {
          result = this.$t('Performance.disable')
        }
        return result
      },
      //
      // /***
      //  * @Description  : 表格过滤节点类型
      //  * @author       : zf
      //  * @date         : 2019/03/14 11:33
      //  */
      // formatNodeType: function (row, column) {
      //   let result = row.nodeType;
      //   if (row.nodeType === 0) {
      //     result = this.$t('Performance.device')
      //   }
      //   else if (row.nodeType === 1) {
      //     result = this.$t('Performance.server')
      //   }
      //   return result
      // },

      /*---------------------------初始化页面数据---------------------------*/

      /***
       * @Description  : 获取性能配置数据
       * @author       : zf
       * @date         : 2019/02/25 15:31:08
       */
      getAllPerformType: function () {
        let _this = this;
        PerformanceMonitorService.getAllPerformanceMonitorCollection().then(result => {
          //成功
          _this.performList = Object.values(result)
        console.log(this.performList)
        }).catch(err => {
          //失败
          _this.InfoTip.errorTip(_this, err);
        })

      },

      /*---------------------------Table选择---------------------------*/

      /**
       * @Description  :选择行
       * @author       :zf
       * @date         :2019/2/25
       */
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      /**
       * @Description  :单选一行选中checkbox
       * @author       :zf
       * @date         :2019/2/25
       */
      clickRow(val) {
        this.$refs.multipleTable.toggleRowSelection(val)
      },

      /*---------------------------修改选择---------------------------*/

      /***
       * @Description  : 修改选中性能配置初始化
       * @author       :
       * @date         : 2019/5/6
       */
      updatePerformType: function () {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length > 1) {
          //请选择一条信息进行修改
          this.InfoTip.warningTip(this, HelperUtil.getCheckStatusCodeObjectByCode(this.successCode.UPDATE_SELECT_CODE))
        }
        else {

          if (this.multipleSelection[0].status === 0) {
            this.enableChecked = true
          }
          else {
            this.enableChecked = false
          }
          this.updateInitList = {
            "deviceTypeKey": this.multipleSelection[0].deviceTypeKey,
            "deviceModel": this.multipleSelection[0].deviceModel,
            "deviceParam": this.multipleSelection[0].deviceParam,
            "period": this.multipleSelection[0].period,
            "status": this.multipleSelection[0].status,
            "lowerLimit0": this.multipleSelection[0].lowerLimit0,
            "upperLimit0": this.multipleSelection[0].upperLimit0,
            "lowerLimit1": this.multipleSelection[0].lowerLimit1,
            "upperLimit1": this.multipleSelection[0].upperLimit1,
            "lowerLimit2": this.multipleSelection[0].lowerLimit2,
            "upperLimit2": this.multipleSelection[0].upperLimit2,
            "showLowerLimit":this.multipleSelection[0].showLowerLimit,
            "showUpperLimit":this.multipleSelection[0].showUpperLimit,
            "peformTypeName": this.multipleSelection[0].peformTypeName,
            "deviceType":this.multipleSelection[0].deviceType,
            "delFlag": this.multipleSelection[0].delFlag,
            "modifyTime": this.multipleSelection[0].modifyTime,
            "enableChecked": this.enableChecked
          };
          this.updatePerformanceMonitorCommand.execute();
        }
      },
    },

    watch: {
      commandContext(newVal, oldVal){
        if(JSON.stringify(newVal) === '{}'){
          this.getAllPerformType();
          this.$refs.multipleTable.clearSelection();
        }
        deep: true
      },
    },
  }
</script>

<style scoped>
</style>