<template>
? <el-container>
? ? <el-header>
? ? ? <el-menu :default-active="activeIndex" class="el-menu-header" mode="horizontal" @select="handleSelect">
? ? ? ? <el-menu-item index="1"><router-link :to="{path: '/yun/index' }">首頁</router-link></el-menu-item>
? ? ? ? <el-menu-item index="2"><router-link :to="{path: '/yun/list' }">服務器列表</router-link></el-menu-item>
? ? ? ? <el-menu-item index="3">控制臺</el-menu-item>
? ? ? ? <el-menu-item index="4">消息中心</el-menu-item>
? ? ? ? <el-menu-item index="5"><router-link :to="{path: '/yun/about' }">關于我們</router-link></el-menu-item>
? ? ? ? <el-menu-item @click="toLogin()" v-if="userName === ''">登錄</el-menu-item>
? ? ? ? <el-menu-item>
? ? ? ? <el-dropdown>
? ? ? ? ? <span class="el-dropdown-link" v-if="userName !== ''">
? ? ? ? ? ? {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
? ? ? ? ? </span>
? ? ? ? ? <el-dropdown-menu slot="dropdown" v-if="userName!==''">
<!-- ? ? ? ? ? ?<el-dropdown-item>登錄</el-dropdown-item>-->
? ? ? ? ? ? <el-dropdown-item @click.native="toLogout">退出</el-dropdown-item>
? ? ? ? ? </el-dropdown-menu>
? ? ? ? </el-dropdown>
? ? ? ? </el-menu-item>
? ? ? </el-menu>
? ? </el-header>
? ? <el-container ?style="height: 620px; border: 1px solid #eee">
? ? ? <el-aside width="200px">
? ? ? ? <el-menu
? ? ? ? ? default-active="1"
? ? ? ? ? class="el-menu-vertical-demo"
? ? ? ? ? @open="handleOpen"
? ? ? ? ? @close="handleClose">
? ? ? ? ? <el-submenu index="1">
? ? ? ? ? ? <template slot="title">
? ? ? ? ? ? ? <i class="el-icon-location"></i>
? ? ? ? ? ? ? <span>服務器列表</span>
? ? ? ? ? ? </template>
? ? ? ? ? ? <el-menu-item-group>
? ? ? ? ? ? ? <template slot="title">分組一</template>
? ? ? ? ? ? ? <el-menu-item index="1-1">選項1</el-menu-item>
? ? ? ? ? ? ? <el-menu-item index="1-2">選項2</el-menu-item>
? ? ? ? ? ? </el-menu-item-group>
? ? ? ? ? ? <el-menu-item-group title="分組2">
? ? ? ? ? ? ? <el-menu-item index="1-3">選項3</el-menu-item>
? ? ? ? ? ? </el-menu-item-group>
? ? ? ? ? ? <el-submenu index="1-4">
? ? ? ? ? ? ? <template slot="title">選項4</template>
? ? ? ? ? ? ? <el-menu-item index="1-4-1">選項1</el-menu-item>
? ? ? ? ? ? </el-submenu>
? ? ? ? ? </el-submenu>
? ? ? ? ? <el-menu-item index="2">
? ? ? ? ? ? <i class="el-icon-menu"></i>
? ? ? ? ? ? <span slot="title">導航二</span>
? ? ? ? ? </el-menu-item>
? ? ? ? ? <el-menu-item index="3" disabled>
? ? ? ? ? ? <i class="el-icon-document"></i>
? ? ? ? ? ? <span slot="title">導航三</span>
? ? ? ? ? </el-menu-item>
? ? ? ? ? <el-menu-item index="4">
? ? ? ? ? ? <i class="el-icon-setting"></i>
? ? ? ? ? ? <span slot="title">導航四</span>
? ? ? ? ? </el-menu-item>
? ? ? ? </el-menu>
? ? ? </el-aside>
? ? ? <el-container>
? ? ? ? <el-main>
? ? ? ? ? <div class="x-bar">
? ? ? ? ? ? <div :id="id" :option="option"></div>
? ? ? ? ? </div>
? ? ? ? </el-main>
<!-- ? ? ? ?<el-footer>-->
?
<!-- ? ? ? ?</el-footer>-->
? ? ? </el-container>
? ? </el-container>
? </el-container>
</template>

<script>
? ? import { mapMutations } from 'vuex';
? ? import Vuex from 'vuex' //引入 Vuex
? ? import store from '../store'
? ? import HighCharts from 'highcharts'
? ? export default {
? ? ? ? name: "YunMonitorServerv",
? ? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? userName: "",
? ? ? ? ? ? activeIndex: '1',
? ? ? ? ? ? arr: [],
? ? ? ? ? ? chartData: [],
? ? ? ? ? ? username: this.$route.query.data,
? ? ? ? ? ? idForm: {
? ? ? ? ? ? ? id: "1"
? ? ? ? ? ? },
? ? ? ? ? ? id: 'testtt',
? ? ? ? ? ? option: {
? ? ? ? ? ? ? chart: {
? ? ? ? ? ? ? ? zoomType: 'x'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? text: 'cpu.0.percent.active'//表頭文字
? ? ? ? ? ? ? },
? ? ? ? ? ? ? subtitle: {
? ? ? ? ? ? ? ? text: document.ontouchstart === undefined ?
? ? ? ? ? ? ? ? ? '鼠標拖動可以進行縮放' : '手勢操作進行縮放'
? ? ? ? ? ? ? },
? ? ? ? ? ? ? xAxis: {
? ? ? ? ? ? ? ? type: 'datetime',
? ? ? ? ? ? ? ? dateTimeLabelFormats: {
? ? ? ? ? ? ? ? ? millisecond: '%H:%M:%S.%L',
? ? ? ? ? ? ? ? ? second: '%H:%M:%S',
? ? ? ? ? ? ? ? ? minute: '%H:%M',
? ? ? ? ? ? ? ? ? hour: '%H:%M',
? ? ? ? ? ? ? ? ? day: '%m-%d',
? ? ? ? ? ? ? ? ? week: '%m-%d',
? ? ? ? ? ? ? ? ? month: '%Y-%m',
? ? ? ? ? ? ? ? ? year: '%Y'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? dateTimeLabelFormats: {
? ? ? ? ? ? ? ? ? millisecond: '%H:%M:%S.%L',
? ? ? ? ? ? ? ? ? second: '%H:%M:%S',
? ? ? ? ? ? ? ? ? minute: '%H:%M',
? ? ? ? ? ? ? ? ? hour: '%H:%M',
? ? ? ? ? ? ? ? ? day: '%Y-%m-%d',
? ? ? ? ? ? ? ? ? week: '%m-%d',
? ? ? ? ? ? ? ? ? month: '%Y-%m',
? ? ? ? ? ? ? ? ? year: '%Y'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? yAxis: {
? ? ? ? ? ? ? ? title: {
? ? ? ? ? ? ? ? ? text: '使用率'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? legend: {
? ? ? ? ? ? ? ? enabled: false
? ? ? ? ? ? ? },
? ? ? ? ? ? ? plotOptions: {
? ? ? ? ? ? ? ? area: {
? ? ? ? ? ? ? ? ? fillColor: {
? ? ? ? ? ? ? ? ? ? linearGradient: {
? ? ? ? ? ? ? ? ? ? ? x1: 0,
? ? ? ? ? ? ? ? ? ? ? y1: 0,
? ? ? ? ? ? ? ? ? ? ? x2: 0,
? ? ? ? ? ? ? ? ? ? ? y2: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? stops: [
? ? ? ? ? ? ? ? ? ? ? [0, HighCharts.getOptions().colors[0]],
? ? ? ? ? ? ? ? ? ? ? [1, HighCharts.Color(HighCharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? marker: {
? ? ? ? ? ? ? ? ? ? radius: 2
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? lineWidth: 1,
? ? ? ? ? ? ? ? ? states: {
? ? ? ? ? ? ? ? ? ? hover: {
? ? ? ? ? ? ? ? ? ? ? lineWidth: 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? threshold: null
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? },
? ? ? ? ? ? ? series: [{
? ? ? ? ? ? ? ? type: 'area',
? ? ? ? ? ? ? ? name: '使用率',
? ? ? ? ? ? ? ? data: [
?
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? }]
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? created() {
? ? ? ? },
? ? ? ? mounted() {
? ? ? ? ? this.showCharts();
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ...mapMutations(['changeLogin']),
? ? ? ? ? toLogout() {
? ? ? ? ? ? localStorage.removeItem('Authorization');
? ? ? ? ? ? localStorage.removeItem('Username');
? ? ? ? ? ? this.$router.push(
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? path: "/yun/login",
? ? ? ? ? ? ? }
? ? ? ? ? ? )
? ? ? ? ? },
? ? ? ? ? toLogin() {
? ? ? ? ? ? this.$router.push(
? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? path: "/yun/login",
? ? ? ? ? ? ? }
? ? ? ? ? ? )
? ? ? ? ? },
? ? ? ? ? showCharts() {
? ? ? ? ? ? this.flag = true
? ? ? ? ? ? this.$http.get('http://localhost:8088/monitor/query/lidata-DL/cpu.0.percent.active/1600672572/1600672629',{
? ? ? ? ? ? ? _timeout:5000,
? ? ? ? ? ? ? onTimeout :(request) => {
? ? ? ? ? ? ? ? this.$message.error('請求超時');
? ? ? ? ? ? ? ? this.loading = false
? ? ? ? ? ? ? }
? ? ? ? ? ? }).then((response) => {
? ? ? ? ? ? ? var res = JSON.parse(response.bodyText);
? ? ? ? ? ? ? this.loading = false;
? ? ? ? ? ? ? this.records = res.records;
? ? ? ? ? ? ? var arr = res.records;
? ? ? ? ? ? ? for(var i = 0;i < arr.length;i++){
? ? ? ? ? ? ? ? ?this.chartData.push(arr[i]);
? ? ? ? ? ? ? }
? ? ? ? ? ? ? var oSeries = {
? ? ? ? ? ? ? ? ? type: 'area',
? ? ? ? ? ? ? ? ? name: '功率',
? ? ? ? ? ? ? ? ? data: this.chartData
? ? ? ? ? ? ? };
? ? ? ? ? ? ? HighCharts.chart(this.id,this.option).addSeries(oSeries);
? ? ? ? ? ? })
? ? ? ? ? },
? ? ? ? ? toVmDetail(url){
? ? ? ? ? ? window.open(url)
? ? ? ? ? },
? ? ? ? ? handleSelect(key, keyPath) {
? ? ? ? ? ? console.log(key, keyPath);
? ? ? ? ? },
? ? ? ? ? handleOpen(key, keyPath) {
? ? ? ? ? ? console.log(key, keyPath);
? ? ? ? ? },
? ? ? ? ? handleClose(key, keyPath) {
? ? ? ? ? ? console.log(key, keyPath);
? ? ? ? ? },
? ? ? ? }
? ? }
</script>

series: [{
? ? type: 'area',
? ? name: 'area',
? ? data: [
? ? ? ? [1370131200000, 0.7695],
? ? ? ? [1370217600000, 0.7648]
? ? ]
}]

this.$set (this.selectedarr, index, option)