<template>
  <div>
    <!-- <p>服务器、虚拟机资源监控预警值设置</p> -->
    <div class="setValue-mod">
      <Form :model="formSearch" ref="formMonitoring" slot="search-bar" label-position="top" inline>
        <Form-item prop="JVMMemoryRate" :label="$t('module.resourceMonitor.JVMMemRateWarning')">
          <Input type="text" v-model="formSearch.JVMMemoryRate" style="width:120px" readonly size="small"></Input>
          <!--<Button type="ghost" size="small" :loading="isOrNotAvailable0" @click.native="setValues(0)">{{$t('module.resourceMonitor.set')}}</Button>-->
        </Form-item>
        <Form-item prop="systemCPURate" :label="$t('module.resourceMonitor.serverCPURateWarning')">
          <Input type="text" v-model="formSearch.systemCPURate" style="width:120px" readonly size="small"></Input>
          <!--<Button type="ghost" size="small" loading="isOrNotAvailable1" @click.native="setValues(1)">{{$t('module.resourceMonitor.set')}}</Button>-->
        </Form-item>
        <Form-item prop="systemMemoryRate" :label="$t('module.resourceMonitor.serverMemRateWarning')">
          <Input type="text" v-model="formSearch.systemMemoryRate" style="width:120px" readonly size="small"></Input>
          <!--<Button type="ghost" size="small" :loading="isOrNotAvailable2" @click.native="setValues(2)">{{$t('module.resourceMonitor.set')}}</Button>-->
        </Form-item>
        <Form-item prop="emailAddress" :label="$t('module.resourceMonitor.serverMemRateWarning')" >
          <Input type="text" v-model="formSearch.emailAddress" style="width:180px" maxlength="50" readonly size="small"></Input>
          <!--<Button type="ghost" size="small" :loading="isOrNotAvailable3" @click.native="setValues(3)">{{$t('module.resourceMonitor.set')}}</Button>-->
        </Form-item>
      </Form>
    </div>

    <div class="sidelip-box">
      <div class="echarts-mod">
        <div id="dashboard" :style="{width: '100%', height: '300px' }"></div>
        <!-- <p>服务器、虚拟机资源监控动态以表图</p> -->
       
      </div>
      <div class="">
        <div id="linegraph" :style="{width: '49%', height: '300px'}" style="float: left"></div>
        <!-- <p>服务器、虚拟机资源监控动态折线图</p> -->
      </div>
      <div class="">
        <div id="linegraph_class" :style="{width: '49%', height: '300px'}" style="float: right"></div>
        <!-- <p>类加载数动态折线图</p> -->
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'resources-monitoring',
  
  props: {
    runtimeName: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    const numberValidate = (rule, value, callback) => {
      let number = /^\d+$/g;
      if (value > 100 || value < 0) {
        callback(new Error(this.$t('module.resourceMonitor.warning.numberLength')))
      } else if (!number.test(value)) {
        callback(new Error(this.$t('module.resourceMonitor.warning.numberFormat')))
      }
      callback();
    }
    const emailValidate = (rule, value, callback) => {
      let email = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
      if (!email.test(value)) {
        callback(new Error(this.$t('module.resourceMonitor.warning.emailFormat')))
      }
      callback();
    }
    return {
      last: '0',
      isOrNotAvailable0: false,
      isOrNotAvailable1: false,
      isOrNotAvailable2: false,
      isOrNotAvailable3: false,
      dictId0: '',
      dictItemId0: '',
      dictItemCode0: '',
      version0: '',
      dictId1: '',
      dictItemId1: '',
      dictItemCode1: '',
      version1: '',
      dictId2: '',
      dictItemId2: '',
      dictItemCode2: '',
      version2: '',
      dictId3: '',
      dictItemId3: '',
      dictItemCode3: '',
      version3: '',
      finish: "",
      dashboard: "",
      linegraph: "",
      linegraph_class: "",
      systemCPU: [],
      systemMemory: [],
      JVMCPU: [],
      JVMMemory: [],
      data_systemMemory: [],
      data_systemCPU: [],
      data_JVMMemory: [],
      //data_JVMCPU: [],
      data_classCount: [],
      data_totalClassCount: [],
      data_unloadedClassCount: [],
      now: new Date(new Date().getTime() - 14 * 60 * 1000), //将坐标右侧设为当前时间
      tenSecond: 1450, //图像时间刷新步长
      classCount: "",
      totalClassCount: "",
      unloadedClassCount: "",
      setInterval1: "",
      formSearch: {
        JVMMemoryRate: '',
        systemCPURate: '',
        systemMemoryRate: '',
        emailAddress: ''
      },
      
      option1: {
        title: {
          text: this.$t('module.resourceMonitor.JVMServerChart'),
          fontSize: "16px",
          x: "center",
          y: "10",
          textStyle: {
            fontWeight: 800
          }
        },
        toolbox: {
          show: true,
          x: "30px",
          feature: {
            mark: { show: true },
            // restore : {show: true},
            saveAsImage: {
              show: true,
            }
          }
        },
        series: [
          {
            name: this.$t('module.resourceMonitor.JVMServerChart'),
            type: "gauge",
            center: ["20%", "63%"], // 默认全局居中
            radius: "80%",
            min: 0,
            max: 100,
            endAngle: -45,
            splitNumber: 10,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 5
            },
            title: {
              offsetCenter: [0, "85%"], // x, y，单位px
              text: this.$t('module.resourceMonitor.JVMServerChart'),
              fontSize: "16px",
              x: "center",
              y: "10",
              textStyle: {
                fontWeight: 800,
              }
            },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              formatter: "{value}%",
              fontSize: 24,
              offsetCenter: [0, "-30%"]
            },
            data: [{ value: "5", name: this.$t('module.resourceMonitor.JVMMemoryRate') }]
          },
          {
            name: this.$t('module.resourceMonitor.JVMMemoryRate'),
            type: "gauge",
            center: ["50%", "63%"], // 默认全局居中
            radius: "80%",
            min: 0,
            max: 100,
            endAngle: -45,
            splitNumber: 10,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 5
            },
            title: {
              offsetCenter: [0, "85%"] // x, y，单位px
            },
            detail: {
              fontWeight: "bolder",
              formatter: "{value}%",
              fontSize: 24,
              offsetCenter: [0, "-30%"]
            },
            data: [{ value: "5", name: this.$t('module.resourceMonitor.serverCPURate')}]
          },
          {
            name: this.$t('module.resourceMonitor.serverMemoryRate'),
            type: "gauge",
            center: ["80%", "63%"], // 默认全局居中
            radius: "80%",
            min: 0,
            max: 100,
            endAngle: -45,
            splitNumber: 10,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 8
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            pointer: {
              width: 5
            },
            title: {
              offsetCenter: [0, "85%"] // x, y，单位px
            },
            detail: {
              // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: "bolder",
              formatter: "{value}%",
              fontSize: 24,
              offsetCenter: [0, "-30%"]
            },
            data: [{ value: "5", name: this.$t('module.resourceMonitor.serverMemoryRate') }]
          }
        ]
        
      },
      option2: {
        title: {
          text: this.$t('module.resourceMonitor.lineChart'),
          x: "center",
          y: "0",
          textStyle: {
            fontWeight: 800,
            fontSize: "16"
          }
        },

        tooltip: {
          //这部分与提示框有关，与Y坐标自适应无关
          trigger: "axis",
          formatter: function (params) {
            //需要接收一个参数数组
            params = params[0];
            let date = new Date(params.name); //这个就是name，对应的是时间
            //return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            return params.value[1];
          },
          axisPointer: {
            animation: true
          }
        },
        legend: {
          data: [this.$t('module.resourceMonitor.serverMemory'), this.$t('module.resourceMonitor.serverCPU'), this.$t('module.resourceMonitor.JVMMemory'), this.$t('module.resourceMonitor.JVMCPU')],
          x: "center",
          top: 35,
          textStyle: {
            fontSize: 11
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "25%",
          containLabel: true
        },
        toolbox: {
          x: "400px",
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#495060",
              width: 2
            }
          }
        },
        yAxis: {
          type: "value",
          max: 100,
          axisLine: {
            lineStyle: {
              color: "#495060",
              width: 2
            }
          },
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}％"
          },
          boundaryGap: [0, "100%"],
          splitLine: {
            show: true, //代表横向分隔线
            lineStyle: {
              color: "#eee"
            }
          }
        },
        series: [
          {
            name: this.$t('module.resourceMonitor.serverMemory'),
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FF0000" //红色
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false,
            data: this.data_systemMemory
          },
          {
            name: this.$t('module.resourceMonitor.serverCPU'),
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#000000" //黑色
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false,
            data: this.data_systemCPU
          },
          {
            name: this.$t('module.resourceMonitor.JVMMemory'),
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#32CD32" //绿色
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false,
            data: this.data_JVMMemory
          }
        ]
      },
      option3: {
        title: {
          text: this.$t('module.resourceMonitor.classChart'),
          x: "center",
          y: "0",
          textStyle: {
            fontWeight: 800,
            fontSize: "16"
          }
        },
        tooltip: {
          //这部分与提示框有关，与Y坐标自适应无关
          trigger: "axis",
          formatter: function (params) {
            //需要接收一个参数数组
            params = params[0];
            // let date = new Date(params.name);//这个就是name，对应的是时间
            return params.value[1];
          },
          axisPointer: {
            animation: true
          }
        },
        legend: {
          data: [this.$t('module.resourceMonitor.classCount'), this.$t('module.resourceMonitor.classAmount'), this.$t('module.resourceMonitor.classUnloaded')],
          x: "center",
          top: 35,
          textStyle: {
            fontSize: 11
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "25%",
          containLabel: true
        },
        toolbox: {
          x: "390px",
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "time",
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#495060",
              width: 2
            }
          }
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
          splitLine: {
            show: true, //代表横向分隔线
            lineStyle: {
              color: "#eee"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#495060",
              width: 2
            }
          }
        },
        series: [
          {
            name: this.$t('module.resourceMonitor.classCount'),
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FF0000" //红色
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false,
            data: this.data_classCount
          },
          {
            name: this.$t('module.resourceMonitor.classAmount'),
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#0000CD" //蓝色
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false,
            data: this.data_totalClassCount
          },
          {
            name: this.$t('module.resourceMonitor.classUnloaded'),
            type: "line",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#000000" //黑色
                }
              }
            },
            showSymbol: false,
            hoverAnimation: false,
            data: this.data_unloadedClassCount
          }
        ]
      },
      rules: {
        JVMMemoryRate: [{ validator: numberValidate, trigger: "blur" }],
        systemCPURate: [{ validator: numberValidate, trigger: "blur" }],
        systemMemoryRate: [{ validator: numberValidate, trigger: "blur" }],
        emailAddress: [{ validator: emailValidate, trigger: "blur" }],
      }
    }
  },
  mounted() {
    
    this.dashboard = this.$echarts.init(document.getElementById("dashboard"));
    this.linegraph = this.$echarts.init(document.getElementById("linegraph"));
    this.linegraph_class = this.$echarts.init(document.getElementById("linegraph_class"));
    //提前折线图插入数据
    for (let i = 0; i < 100; i++) {
      this.data_systemMemory.push(this.insertData_systemMemory());
      this.data_systemCPU.push(this.insertData_systemCPU());
      this.data_JVMMemory.push(this.insertData_JVMMemory());
      this.data_classCount.push(this.insertData_classCount());
      this.data_totalClassCount.push(this.insertData_totalClassCount());
      this.data_unloadedClassCount.push(this.insertData_unloadedClassCount());
    }
    this.linegraph.setOption(this.option2);
    this.linegraph_class.setOption(this.option3);

    this.refresh1();
    this.refresh2();
    this.refresh3();
    this.finish = setInterval(this.refresh, 10000);
    this.getValues();
  },
  beforeDestroy() {
    clearInterval(this.finish);
  },
  methods: {
    refresh() {
      this.refresh1();
      this.refresh2();
      this.refresh3();
    },
    setValues(id) {
      this.setValuesAction(id).then((result) => {
        result && this.getValues();
      })
    },
    setValuesAction(id) {
      let now = Date.now();
      return new Promise((resolve) => {
        if (now - this.last < 1500) {
          resolve(false);
          return;
        }
        this.$refs["formMonitoring"].validate(valid => {
          if (!valid) return;
          if (id == 0) {
            this.isOrNotAvailable0 = true,
              $store.dispatch("SetValues", {
                dictItemName: this.formSearch.JVMMemoryRate,
                dictItemId: this.dictItemId0,
                dictId: this.dictId0,
                dictItemCode: this.dictItemCode0,
                version: this.version0,
              }
              ).then(response => {
                resolve(response.statusCode == "0");
                if (response.statusCode == "0") {
                  this.$Message.success({
                    content: this.$t('module.resourceMonitor.warning.updateJVMMemSuccess'),
                    duration: 3
                  })
                } else {
                  this.$Message.error({
                    content: response.msg,
                    duration: 3
                  })
                }
              });
          } else if (id == 1) {
            this.isOrNotAvailable1 = true,
              $store.dispatch("SetValues", {
                dictItemName: this.formSearch.systemCPURate,
                dictItemId: this.dictItemId1,
                dictId: this.dictId1,
                dictItemCode: this.dictItemCode1,
                version: this.version1,
              }
              ).then(response => {
                resolve(response.statusCode == "0");
                if (response.statusCode == "0") {
                  this.$Message.success({
                    content:this.$t('module.resourceMonitor.warning.updateSerCPUSuccess'),
                    duration: 3
                  })
                } else {
                  this.$Message.error({
                    content: response.msg,
                    duration: 3
                  })
                }
              });
          } else if (id == 2) {
            this.isOrNotAvailable2 = true,
              $store.dispatch("SetValues", {
                dictItemName: this.formSearch.systemMemoryRate,
                dictItemId: this.dictItemId2,
                dictId: this.dictId2,
                dictItemCode: this.dictItemCode2,
                version: this.version2,
              }).then(response => {
                resolve(response.statusCode == "0");
                if (response.statusCode == "0") {
                  this.$Message.success({
                    content: this.$t('module.resourceMonitor.warning.updateSerMemSuccess'),
                    duration: 3
                  })
                } else {
                  this.$Message.error({
                    content: response.msg,
                    duration: 3
                  })
                }
              })
          } else {
            this.isOrNotAvailable3 = true,
              $store.dispatch("SetValues", {
                dictItemName: this.formSearch.emailAddress,
                dictItemId: this.dictItemId3,
                dictId: this.dictId3,
                dictItemCode: this.dictItemCode3,
                version: this.version3,
              }
              ).then(response => {
                resolve(response.statusCode == "0");
                if (response.statusCode == "0") {
                  this.$Message.success({
                    content: this.$t('module.resourceMonitor.warning.updateEmailSuccess'),
                    duration: 3
                  })
                } else {
                  this.$Message.error({
                    content: response.msg,
                    duration: 3
                  })
                }
              });
          }
          //设置新值后刷新到最新数据
        })
        this.last = now;
      })
    },
    //仪表盘
    refresh1() {
      $store.dispatch("QueryOs", this.runtimeName).then(response => {
        if (!!response) {
          //虚拟机内存,有时候是没返回这个字段，待跟后台工作人员确认后决定前端展示形式
          let v0 = (this.option1.series[0].data[0].value = (100 *
            response.jvmMemoryyLoad
          ).toFixed(2));
          //将每次取到的数据存入数组
          this.JVMMemory.push(v0);

          let v1 = (this.option1.series[1].data[0].value = (100 *
            response.systemCpuLoad
          ).toFixed(2));
          this.systemCPU.push(v1);

          let v2 = (this.option1.series[2].data[0].value = (100 *
            response.physicalMemoryLoad
          ).toFixed(2));
          this.systemMemory.push(v2);

          this.dashboard.setOption(this.option1);
        } else {
          let v0 = (this.option1.series[0].data[0].value = 0);
          this.JVMMemory.push(v0);

          let v1 = (this.option1.series[1].data[0].value = 0);
          this.systemCPU.push(v1);

          let v2 = (this.option1.series[2].data[0].value = 0);
          this.systemMemory.push(v2);

          this.dashboard.setOption(this.option1);
        }
      });
    },
    //仪表盘对应的折线图
    refresh2() {
      //删除尾数据
      this.data_systemMemory.shift();
      this.data_systemCPU.shift();
      this.data_JVMMemory.shift();
      //this.data_JVMCPU.shift();

      //插入新数据
      this.data_systemMemory.push(this.insertData_systemMemory());
      this.data_systemCPU.push(this.insertData_systemCPU());
      this.data_JVMMemory.push(this.insertData_JVMMemory());

      //将数据显示在坐标系中
      this.linegraph.setOption({
        series: [
          {
            data: this.data_systemMemory
          },
          {
            data: this.data_systemCPU
          },
          {
            data: this.data_JVMMemory
          }
        ]
      });
      
    },
    
    //类加载、卸载折线图
    refresh3() {
      $store.dispatch("QueryClass", this.runtimeName).then(response => {
        if (!!response.dataResult) {
          this.classCount = response.dataResult.loadedClassCount;
          this.totalClassCount = response.dataResult.totalLoadedClassCount;
          this.unloadedClassCount = response.dataResult.unloadedClassCount;
        } else {
          this.classCount = 0;
          this.totalClassCount = 0;
          this.unloadedClassCount = 0;
        }
      });
      this.data_classCount.shift();
      this.data_classCount.push(this.insertData_classCount());

      this.data_totalClassCount.shift();
      this.data_totalClassCount.push(this.insertData_totalClassCount());

      this.data_unloadedClassCount.shift();
      this.data_unloadedClassCount.push(this.insertData_unloadedClassCount());

      this.linegraph_class.setOption({
        series: [
          {
            data: this.data_classCount
          },
          {
            data: this.data_totalClassCount
          },
          {
            data: this.data_unloadedClassCount
          }
        ]
      });
    },
    insertData_systemMemory() {
      //let now = new Date();
      this.now = new Date(+this.now + this.tenSecond);
      let value = this.systemMemory[this.systemMemory.length - 1];
      let minute =
        this.now.getMinutes() < 10
          ? "0" + this.now.getMinutes()
          : this.now.getMinutes();
      let second =
        this.now.getSeconds() < 10
          ? "0" + this.now.getSeconds()
          : this.now.getSeconds();
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth(),
            this.now.getDate()
          ].join("/") +
          " " +
          [this.now.getHours(), minute, second].join(":"),
          value
        ]
      };
    },
    insertData_systemCPU() {
      this.now = new Date(+this.now + this.tenSecond);
      let value = this.systemCPU[this.systemCPU.length - 1];
      let minute =
        this.now.getMinutes() < 10
          ? "0" + this.now.getMinutes()
          : this.now.getMinutes();
      let second =
        this.now.getSeconds() < 10
          ? "0" + this.now.getSeconds()
          : this.now.getSeconds();
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth(),
            this.now.getDate()
          ].join("/") +
          " " +
          [this.now.getHours(), minute, second].join(":"),
          value
        ]
      };
    },
    insertData_JVMMemory() {
      this.now = new Date(+this.now + this.tenSecond);
      let value = this.JVMMemory[this.JVMMemory.length - 1];
      let minute =
        this.now.getMinutes() < 10
          ? "0" + this.now.getMinutes()
          : this.now.getMinutes();
      let second =
        this.now.getSeconds() < 10
          ? "0" + this.now.getSeconds()
          : this.now.getSeconds();
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth(),
            this.now.getDate()
          ].join("/") +
          " " +
          [this.now.getHours(), minute, second].join(":"),
          value
        ]
      };
    },
    insertData_classCount() {
      //返回的是json格式的数据，name对应横坐标，是时间，value又是一个数组
      this.now = new Date(+this.now + this.tenSecond);
      let value = this.classCount;
      let minute =
        this.now.getMinutes() < 10
          ? "0" + this.now.getMinutes()
          : this.now.getMinutes();
      let second =
        this.now.getSeconds() < 10
          ? "0" + this.now.getSeconds()
          : this.now.getSeconds();
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth(),
            this.now.getDate()
          ].join("/") +
          " " +
          [this.now.getHours(), minute, second].join(":"),
          value
        ]
      };
    },
    insertData_totalClassCount() {
      //返回的是json格式的数据，name对应横坐标，是时间，value又是一个数组
      this.now = new Date(+this.now + this.tenSecond);
      let value = this.totalClassCount;
      let minute =
        this.now.getMinutes() < 10
          ? "0" + this.now.getMinutes()
          : this.now.getMinutes();
      let second =
        this.now.getSeconds() < 10
          ? "0" + this.now.getSeconds()
          : this.now.getSeconds();
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth(),
            this.now.getDate()
          ].join("/") +
          " " +
          [this.now.getHours(), minute, second].join(":"),
          value
        ]
      };
    },
    insertData_unloadedClassCount() {
      this.now = new Date(+this.now + this.tenSecond);
      let value = this.unloadedClassCount;
      let minute =
        this.now.getMinutes() < 10
          ? "0" + this.now.getMinutes()
          : this.now.getMinutes();
      let second =
        this.now.getSeconds() < 10
          ? "0" + this.now.getSeconds()
          : this.now.getSeconds();
      return {
        name: this.now.toString(),
        value: [
          [
            this.now.getFullYear(),
            this.now.getMonth(),
            this.now.getDate()
          ].join("/") +
          " " +
          [this.now.getHours(), minute, second].join(":"),
          value
        ]
      };
    },
    //获取数据字典预警设置信息
    getValues() {
      // $store.dispatch('GetValues', { dictCode: "JMX_ALERT" }).then(response => {
      $store.dispatch('GetValueSetByCode', { code: "JMX_ALERT" }).then(response => {
        //CPU使用率警告参数
        this.formSearch.systemCPURate = response.dataResult[1].vsiValue;
        // this.dictId1 = response.dataResult[0].dictId;
        // this.dictItemCode1 = response.dataResult[0].dictItemCode;
        // this.dictItemId1 = response.dataResult[0].dictItemId;
        // this.version1 = response.dataResult[0].version;
        //JVM内存使用率警告设置参数
        this.formSearch.JVMMemoryRate = response.dataResult[2].vsiValue;
        // this.dictId0 = response.dataResult[1].dictId;
        // this.dictItemCode0 = response.dataResult[1].dictItemCode;
        // this.dictItemId0 = response.dataResult[1].dictItemId;
        // this.version0 = response.dataResult[1].version;
        //服务器内存预警设置参数
        this.formSearch.systemMemoryRate = response.dataResult[0].vsiValue;
        // this.dictId2 = response.dataResult[3].dictId;
        // this.dictItemCode2 = response.dataResult[3].dictItemCode;
        // this.dictItemId2 = response.dataResult[3].dictItemId;
        // this.version2 = response.dataResult[3].version;
        //邮箱预警设置参数
        this.formSearch.emailAddress = response.dataResult[3].vsiValue;
        // this.dictId3 = response.dataResult[2].dictId;
        // this.dictItemCode3 = response.dataResult[2].dictItemCode;
        // this.dictItemId3 = response.dataResult[2].dictItemId;
        // this.version3 = response.dataResult[2].version;

        // this.isOrNotAvailable0 = false;
        // this.isOrNotAvailable1 = false;
        // this.isOrNotAvailable2 = false;
        // this.isOrNotAvailable3 = false;
      })
    }
  },
  watch: {

  }
};  

</script>

<style lang="less">
.echarts-mod {
  background: #f3f3f3;
  padding: 20px 10px;
  border-radius: 10px;
  margin-bottom: 30px;
}
.setValue-mod{
  margin:30px 30px 0 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid #ececec;
  .ivu-form-item{
    margin:0 40px 0 0 !important;
  }
}  
#dashboard div{
  margin:0 auto !important;
}
</style>