<template>
  <div class="MonitorChart">
    <!-- 面包屑导航 -->
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <!-- 大tab页 -->
   <!--  <el-tabs type="card" class="container">
    <el-tab-pane label="操作系统监控"> 
 --> 
  <div class="searchCon" ref="tableDataRef">
    <search-form
      :show-select="true"
      :showDelete="false"
      @submit1="handleTimeBtnClick"
      @submit2="searchHandler">
    </search-form>
  </div>

  <!-- 图表内容 -->
<div class="ChartData">
  <div class="maindiv" ref="chartCon">
    <div class="parttitle">
      CPU/内存/负载
    </div>
    <!--  CPU使用率 -->
    <div class="layout"> 
      <p class="roundtime">周期：{{ titleRound }} </p>
      <percent-chart domId="chartData.accessLineChart" 
      :title="chartData.accessLineData.title" 
      :catalog="chartData.accessLineData.catalog" 
      :data="chartData.accessLineData.data" 
      :y-name="yName" 
      :a-colori="chartData.accessLineData.aColor1" 
      :a-colorii="chartData.accessLineData.aColor2"
      :rendering="rendering">
      </percent-chart>
    </div>
    <!-- 内存使用率 -->
    <div class="layout fr">
      <p class="roundtime">周期：{{ titleRound }} </p>
      <percent-chart domId="chartData.accessLineChart1" 
      :title="chartData.accessLineData1.title" 
      :catalog="chartData.accessLineData1.catalog" 
      :data="chartData.accessLineData1.data" 
      :y-name="yName"  
      :a-colori="chartData.accessLineData1.aColor1" 
      :a-colorii="chartData.accessLineData1.aColor2"
      :rendering="rendering">
      </percent-chart>
    </div>
    <!-- 内存使用量 -->
    <div class="layout">
      <p class="roundtime">周期：{{ titleRound }} </p>
      <new-line-chart domId="chartData.accessLineChart2" 
      :title="chartData.accessLineData2.title" 
      :catalog="chartData.accessLineData2.catalog" 
      :data="chartData.accessLineData2.data" 
      yName="总量GB"
      :a-colori="chartData.accessLineData2.aColor1" 
      :a-colorii="chartData.accessLineData2.aColor2"
      :rendering="rendering">
      </new-line-chart>
    </div>
    <div class="parttitle" style="margin-top: 5px;">
      磁盘监控指标
    </div>
    <div style="padding-left: 30px; margin-top:5px;">
    <div>
    磁盘设备:    
        <el-button
        v-for="(item, index) in tabList"
        :key="item"
        size="mini"
        @click="handleTabClick (item, index)" 
        :class="{isClick:changeDiskColor === index}"
        class="btn">
        {{ item }}
        </el-button>
      </div> 
    </div>
    <!--  tab 标签下显示的内容 -->   
    <!--磁盘使用量 -->
    <div class="layout">
      <p class="roundtime">周期：{{ titleRound }} </p>
      <new-line-chart domId="chartData.accessLineChart3" 
      :title="chartData.accessLineData3.title" 
      :catalog="chartData.accessLineData3.catalog" 
      :data="chartData.accessLineData3.data" 
      y-name="磁盘总量GB"  
      :a-colori="chartData.accessLineData3.aColor1" 
      :a-colorii="chartData.accessLineData3.aColor2"
      :rendering="rendering">
      </new-line-chart>
    </div>     
    <!--读写字节数 -->
    <div class="layout fr">
      <p class="roundtime">周期：{{ titleRound }} </p>
      <new-line-chart domId="chartData.accessLineChart4" 
      :title="chartData.accessLineData4.title" 
      :catalog="chartData.accessLineData4.catalog" 
      :data="chartData.accessLineData4.data" 
      y-name="Bps"  
      :a-colori="chartData.accessLineData4.aColor1" 
      :a-colorii="chartData.accessLineData4.aColor2"
      :rendering="rendering">
      </new-line-chart>
    </div>
    <!--读写请求数 暂时获取不到数据-->
    <!-- <div class="layout">
      <new-line-chart domId="chartData.accessLineChart5" 
      :title="chartData.accessLineData5.title" 
      :catalog="chartData.accessLineData5.catalog" 
      :data="chartData.accessLineData5.data" 
      y-name="Count/s"  
      :a-colori="chartData.accessLineData5.aColor1" 
      :a-colorii="chartData.accessLineData5.aColor2"
      :rendering="rendering">
      </new-line-chart>
    </div>      -->  
    <div class="parttitle" style="margin-top: 5px;">
      网络监控指标
    </div>
    <div style="padding-left: 30px; margin-top:5px;">
      <div>
      网络设备:
      <el-button
        v-for="(item, index) in tabList1"
        :key="item"
        size="mini"
        @click="handleTabClick1 (item, index)" 
        :class="{isClick:changeTcpColor === index}"
        class="btn">
        {{ item }}
        </el-button>
        </div>
      </div>
        <!--网络流入流出速率 -->
      <div class="layout">
        <p class="roundtime">周期：{{ titleRound }} </p>
        <new-line-chart domId="chartData.accessLineChart6" 
        :title="chartData.accessLineData6.title" 
        :catalog="chartData.accessLineData6.catalog" 
        :data="chartData.accessLineData6.data" 
        y-name="Bps"  
        :a-colori="chartData.accessLineData6.aColor1" 
        :a-colorii="chartData.accessLineData6.aColor2"
        :rendering="rendering">
        </new-line-chart>
      </div>
      <!--网络流入流出数据包数 -->
      <div class="layout fr">
        <p class="roundtime">周期：{{ titleRound }} </p>
        <new-line-chart domId="chartData.accessLineChart7" 
        :title="chartData.accessLineData7.title" 
        :catalog="chartData.accessLineData7.catalog" 
        :data="chartData.accessLineData7.data" 
        y-name="pps"  
        :a-colori="chartData.accessLineData7.aColor1" 
        :a-colorii="chartData.accessLineData7.aColor2"
        :rendering="rendering">
        </new-line-chart>
      </div>
      <!--TCP连接数 -->
      <div class="layout">
        <p class="roundtime">周期：{{ titleRound }}</p>
        <new-line-chart domId="chartData.accessLineChart8" 
        :title="chartData.accessLineData8.title" 
        :catalog="chartData.accessLineData8.catalog" 
        :data="chartData.accessLineData8.data" 
        y-name="Count"  
        :a-colori="chartData.accessLineData8.aColor1" 
        :a-colorii="chartData.accessLineData8.aColor2"
        :rendering="rendering">
        </new-line-chart>
      </div>
  </div>
      <!-- </el-tab-pane> -->

      <!-- <el-tab-pane label="进程监控"> -->
      <!-- 进程监控 -->
      <div>
      <div class="parttitle" style="margin-top: 5px;">
        进程监控 <div style="display: inline-block; margin-left: 10px;">(周期:1min)</div>     
      </div>
     
      <div class="layout1 tableform">
        <table-form 
          v-loading.body="isLoadingTableData"
          :colData="colData" 
          :data="tableData" 
          :colWidth="150"
          :max-height="height"
          :row-key="rowKey"
          :submiting="submiting"
          :isShowOper="isShowOper"
          border 
          :stripe="true"
          :sortable="sortable">
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="item.sortable || sortable">
          <template slot-scope="scope">
            <div v-if="item.prop === 'cpuusage'">            
                {{ scope.row.cpuusage }} %           
            </div>
            <div v-else-if="item.prop === 'memusage'">
              {{ scope.row.memusage }}  %
            </div>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </table-form>
      </div>
      </div>
    <!-- </el-tab-pane>
    </el-tabs> -->
  </div>
  </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb.vue'
import TableForm from '@/components/Table.vue'
import echarts from 'echarts'
import PercentChart from '@/components/PercentChart.vue'
import NewLineChart from '@/components/NewLineChart.vue'
import SearchForm from  './otherComponent/SearchForm.vue'

import Api from '@/api/index.js'
import Util from '@/utils/util.js'

export default {
  name: 'MonitorChart',
  components: {
    BreadCrumb,
    TableForm,
    PercentChart,
    NewLineChart,
    SearchForm
  },
  data() {
    return {
      hostid: '',
      hostname: '',
      active: false,
      isLoadingTableData: false,
      colData: [],
      tableData: [],
      isShowOper: false,
      rowKey: 'domainId',
      height: '400',
      sortable: true,
      submiting: false,
      total: null,
      // 搜索
      searchForm: {
        typeOptions: [],
        selectLabel: '',
        selectPlaceholder: ''
      },
      currentPage: 1,
      pageSize: 15,
      pageSizes: [15, 30, 50, 100],
      isLoadingAccessLineData: false,
      breadCrumbList: [], // 面包屑
      axisMaxLength: 60,
      rendering: true, // 渲染     
      chartData: {
        accessLineData: {
        title: 'CPU使用率',
        catalog: [],
        data: [],
        aColor1: '#ffffff',
        aColor2: '#ffffff'    
        },
        accessLineData1: {
          title: '内存使用率',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData2: {
          title: '内存使用量',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData3: {
          title: '磁盘使用量',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData4: {
          title: '读写字节数(Bps)',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData5: {
          title: '读写请求数(Count/s)',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData6: {
          title: '网络流入流出速率(bps)',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData7: {
          title: '网络流入流出数据包数',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        },
        accessLineData8: {
          title: 'TCP连接数',
          catalog: [],
          data: [],
          aColor1: '#ffffff',
          aColor2: '#ffffff' 
        }
      },      
      tempArr: [],
      options: [],
      value: '',
      yName: '百分比%',
      activeName2: 'first',
      index: '',
      tabList: [],
      tabList1: [],  
      timefrom: '',
      timeto: '',
      flag: '',
      diskname: '',
      titleRound: '15s',  
      changeDiskColor: 0,
      changeTcpColor: 0
    }
  },
  computed: {
     sethostId() {
      return this.$store.state.sethostId
    }
  },
  created() {
    this.getDisksName()   
    this.getNetsName()      
    this.getSelectCpuInfo()
    this.getSelectMemoryInfo()   
    this.getSelectTcpInfo()
    this.getSelectProcessInfo()
    // this.hostid = this.$route.params.hostid 后期实现多台主机的主机id差相应图表
  },
  mounted() {
    this.breadCrumbList = [{ title: '服务器监控' }, { title: '监控图表' }]
    this.colData = [
          {prop: 'proname', label: '进程名称', width: '200', sortable: false, align: 'center'},
          {prop: 'pid', label: 'PID', width: '200', sortable: false, align: 'center'},
          // {prop: 'prouser', label: '用户', width: '100', sortable: false, align: 'center'},
          {prop: 'cpuusage', label: 'CPU使用率', width: '220', sortable: true, align: 'center'},
          {prop: 'memusage', label: '内存使用率', width: '220', sortable: true, align: 'center'},
          // {prop: 'openfiles', label: '打开文件数', width: '120', sortable: true, align: 'center'},
          {prop: 'createtime', label: '时间', sortable: false, align: 'center'}
        ]
     // 钩子
    this.$nextTick(() => { 
          this.handleFn()
      })
    window.addEventListener('resize', this.handleFn)
  },
  destroyed () {
    window.removeEventListener('resize', this.handleFn)
  },
  methods: {
    // resize的函数
    handleFn() {
      // this.height = this.$refs.tableDataRef.clientHeight - 130
      this.rendering = !this.rendering
      let _this = this
      if (_this.$refs.chartCon.clientWidth >= 1120) {
        _this.chartData.accessLineData.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData1.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData2.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'     
        _this.chartData.accessLineData3.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData4.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        // _this.chartData.accessLineData5.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData6.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData7.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'    
        _this.chartData.accessLineData8.width = parseInt(_this.$refs.chartCon.clientWidth / 2 - 50) + 'px'       
      } else {
        _this.chartData.accessLineData.width = '759px'
        _this.chartData.accessLineData1.width = '759px'
        _this.chartData.accessLineData2.width = '759px'   
        _this.chartData.accessLineData3.width = '759px'   
        _this.chartData.accessLineData4.width = '759px'         
        // _this.chartData.accessLineData5.width = '759px'   
        _this.chartData.accessLineData6.width = '759px'   
        _this.chartData.accessLineData7.width = '759px'
        _this.chartData.accessLineData8.width = '759px'      
      }
      if (_this.$refs.chartCon.clientHeight >= 500) {
        _this.chartData.accessLineData.height = '450px'
        _this.chartData.accessLineData1.height = '450px'
        _this.chartData.accessLineData2.height = '450px'   
        _this.chartData.accessLineData3.height = '450px'   
        _this.chartData.accessLineData4.height = '450px'         
        // _this.chartData.accessLineData5.height = '450px'   
        _this.chartData.accessLineData6.height = '450px'   
        _this.chartData.accessLineData7.height = '450px'
        _this.chartData.accessLineData8.height = '450px'  
      }
    },
    handleTabClick (item, index) {
      this.diskname = item
      this.changeDiskColor = index
      this.getSelectDiskInfo(this.flag, '', '', this.diskname) // 查看不同磁盘信息
    },
    handleTabClick1 (item, index) {
      this.netname = item
      this.changeTcpColor = index
      this.getSelectNetInfo(this.flag, '', '', this.netname) // 查看不同IP网络信息
    },
    handleTimeBtnClick(data) {
      this.flag = data.flag
      this.titleRound = data.round
      // 全部图表重新初始化
      this.getSelectCpuInfo(this.flag, '', '')
      this.getSelectMemoryInfo(this.flag, '', '')  
      this.getSelectDiskInfo(this.flag, '', '', this.diskname)
      this.getSelectNetInfo(this.flag, '', '', this.netname)
      this.getSelectTcpInfo(this.flag, '', '')
      this.getSelectProcessInfo(this.flag, '', '')
      },
    handleItemChange (val) {
      this.activeOpts = val
    },
    // 选择日期
    dateTimeChange (value) {
      this.startEndDate = value
    },
    // 点击查询
    searchHandler (data) { 
        this.flag = ''
        this.timefrom = data[0]
        this.timeto = data[1]
        this.getSelectCpuInfo(this.flag, this.timefrom, this.timeto)
        this.getSelectMemoryInfo(this.flag, this.timefrom, this.timeto)  
        this.getSelectDiskInfo(this.flag, this.timefrom, this.timeto, this.diskname)
        this.getSelectNetInfo(this.flag, this.timefrom, this.timeto, this.netname)
        this.getSelectTcpInfo(this.flag, this.timefrom, this.timeto)
        this.getSelectProcessInfo(this.flag, this.timefrom, this.timeto)
    },
    // 接收CPU使用率信息
    getSelectCpuInfo (flag, timefrom, timeto) {
      this.chartData.accessLineData.catalog = []
      this.chartData.accessLineData.data = []

      this.isLoadingAccessLineData = true
      this.flag = flag
      this.timefrom = timefrom
      this.timeto = timeto
      Api.getSelectCpuInfo(flag, timefrom, timeto)
      .then(data => {
        this.isLoadingAccessLineData = false
        let datas = data.data
        if (data.status === 0) {    
          if (datas.dataList.length !== 0) {  
            this.chartData.accessLineData.catalog = datas.catalogs  
            this.chartData.accessLineData.data = datas.dataList    
          } else {
            this.chartData.accessLineData.catalog = []
            this.chartData.accessLineData.data = []
            this.$message({
            type: 'warning',
            message: '获取CPU使用率数据为空'
          })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '获取CPU使用率数据失败！'
          })
        }  
      }).catch(res => {
        this.isLoadingCatalogLineChart = false
        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
      },
    // 接收内存使用率信息 + 接收内存使用量信息
     getSelectMemoryInfo (flag, timefrom, timeto) {
        this.chartData.accessLineData1.catalog = []
        this.chartData.accessLineData1.data = []
        this.chartData.accessLineData2.catalog = []
        this.chartData.accessLineData2.data = []
        this.isLoadingAccessLineData = true
        this.flag = flag
        this.timefrom = timefrom
        this.timeto = timeto
        Api.getSelectMemoryInfo(flag, timefrom, timeto)
        .then(data => {
          this.isLoadingAccessLineData = false
          let datas = data.data
          if (data.status === 0) {
            if (datas.dataList.length !== 0) {
              this.chartData.accessLineData1.catalog = datas.catalogs
              this.chartData.accessLineData1.data = datas.dataList.memusage
              this.chartData.accessLineData2.catalog = datas.catalogs
              this.chartData.accessLineData2.data = datas.dataList.data
              } else {
              this.chartData.accessLineData1.catalog = []
              this.chartData.accessLineData1.data = []
              this.chartData.accessLineData2.catalog = []
              this.chartData.accessLineData2.data = []  
              this.$message({
              type: 'warning',
              message: '获取内存信息数据为空'
            })
            }
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败！'
            })
          }  
        }).catch(res => {
          this.isLoadingCatalogLineChart = false

          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
      },
      
    // 获取磁盘名称
    getDisksName () {
      Api.getDisksName()
      .then(data => {
        let datas = data.data
        if (data.status === 0) {
          this.tabList = datas           
          this.diskname = datas[0]
          this.flag = '1h'
          this.chartData.accessLineData3.catalog = []
          this.chartData.accessLineData3.data = []
          this.chartData.accessLineData4.catalog = []
          this.chartData.accessLineData4.data = []
          Api.getSelectDiskInfo(this.flag, '', '', this.diskname)
          .then(data => {
          let datas = data.data
          if (data.status === 0) {
            this.chartData.accessLineData3.catalog = datas.catalogs
            this.chartData.accessLineData3.data = datas.dataList.usedfree
            this.chartData.accessLineData4.catalog = datas.catalogs
            this.chartData.accessLineData4.data = datas.dataList.readwrite
          }
          })
        } else {
          this.$message({
            type: 'warning',
            message: '获取磁盘数据失败！'
          })
        }  
      }).catch(res => {
        this.isLoadingCatalogLineChart = false

        this.$message({
          type: 'error',
          message: '请求磁盘数据失败'
        })
      })
    },
    // 接收磁盘使用量信息
    getSelectDiskInfo (flag, timefrom, timeto, diskname) {
      this.chartData.accessLineData3.catalog = []
      this.chartData.accessLineData3.data = []
      this.chartData.accessLineData4.catalog = []
      this.chartData.accessLineData4.data = []
      this.isLoadingAccessLineData = true
      this.flag = flag
      this.diskname = diskname
      this.timefrom = timefrom
      this.timeto = timeto
      Api.getSelectDiskInfo(this.flag, this.timefrom, this.timeto, this.diskname)
      .then(data => {
        this.isLoadingAccessLineData = false
        let datas = data.data
        if (data.status === 0) {
          if (datas.dataList.length !== 0) {
            this.chartData.accessLineData3.catalog = datas.catalogs
            this.chartData.accessLineData3.data = datas.dataList.usedfree
            this.chartData.accessLineData4.catalog = datas.catalogs
            this.chartData.accessLineData4.data = datas.dataList.readwrite
            } else {
            this.$message({
            type: 'warning',
            message: '获取磁盘使用量数据为空'
          })
          }            
        } else {
          this.$message({
            type: 'warning',
            message: '获取使用量数据失败！'
          })
        }  
      }).catch(res => {
        this.isLoadingCatalogLineChart = false

        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
    },
   
    // 获取网络名称
    getNetsName () {
      Api.getNetsName()
      .then(data => {
        let datas = data.data
        if (data.status === 0) {
          this.tabList1 = datas        
          this.netname = datas[0]
          this.flag = '1h'
          this.chartData.accessLineData6.catalog = []
          this.chartData.accessLineData6.data = []
          this.chartData.accessLineData7.catalog = []
          this.chartData.accessLineData7.data = []
          Api.getSelectNetInfo(this.flag, '', '', this.netname)
          .then(data => {
            this.isLoadingAccessLineData = false
            let datas = data.data
            if (data.status === 0) {
              if (datas.dataList.length !== 0) {
                this.chartData.accessLineData6.catalog = datas.catalogs
                this.chartData.accessLineData6.data = datas.dataList.inoutrate
                this.chartData.accessLineData7.catalog = datas.catalogs
                this.chartData.accessLineData7.data = datas.dataList.packages
              } else {
            this.chartData.accessLineData6.catalog = []
            this.chartData.accessLineData6.data = []
            this.chartData.accessLineData7.catalog = []
            this.chartData.accessLineData7.data = []    
            this.$message({
            type: 'warning',
            message: '获取网络名称数据为空'
          })
          }
            }
            })
        } else {
          this.$message({
            type: 'warning',
            message: '获取网络数据失败'
          })
        }  
      }).catch(res => {
        this.isLoadingCatalogLineChart = false

        this.$message({
          type: 'error',
          message: '请求网络数据失败'
        })
      })
      },
          // 接收网络情况
    getSelectNetInfo (flag, timefrom, timeto, netname) {
      this.chartData.accessLineData6.catalog = []
      this.chartData.accessLineData6.data = []
      this.chartData.accessLineData7.catalog = []
      this.chartData.accessLineData7.data = []
      this.isLoadingAccessLineData = true
      this.flag = flag
      this.netname = netname
      this.timefrom = timefrom
      this.timeto = timeto
      Api.getSelectNetInfo(this.flag, this.timefrom, this.timeto, this.netname)
      .then(data => {
        this.isLoadingAccessLineData = false
        let datas = data.data
        if (data.status === 0) {
          if (datas.dataList.length !== 0) {
            this.chartData.accessLineData6.catalog = datas.catalogs
            this.chartData.accessLineData6.data = datas.dataList.inoutrate
            this.chartData.accessLineData7.catalog = datas.catalogs
            this.chartData.accessLineData7.data = datas.dataList.packages
          } else {
            this.chartData.accessLineData6.catalog = []
            this.chartData.accessLineData6.data = []
            this.chartData.accessLineData7.catalog = []
            this.chartData.accessLineData7.data = []
            this.$message({
            type: 'success',
            message: '获取网络情况数据为空'
          })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '获取网络情况数据失败！'
          })
        }  
      }).catch(res => {
        this.isLoadingCatalogLineChart = false

        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
    },
    // 接收TCP连接情况
    getSelectTcpInfo (flag, timefrom, timeto) {
      this.chartData.accessLineData8.catalog = []
      this.chartData.accessLineData8.data = []
      this.isLoadingAccessLineData = true
      this.flag = flag
      this.timefrom = timefrom
      this.timeto = timeto
      Api.getSelectTcpInfo(this.flag, this.timefrom, this.timeto)
      .then(data => {
        this.isLoadingAccessLineData = false
        let datas = data.data
        if (data.status === 0) {
          if (datas.dataList.length !== 0) {
            this.chartData.accessLineData8.catalog = datas.catalogs
            this.chartData.accessLineData8.data = datas.dataList
          } else {
            this.chartData.accessLineData8.catalog = []
            this.chartData.accessLineData8.data = []
            this.$message({
            type: 'warning',
            message: '获取TCP连接数据为空'
          })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '获取数据失败！'
          })
        }  
      }).catch(res => {
        this.isLoadingCatalogLineChart = false

        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
    },
    // 进程监控接口
    getSelectProcessInfo(flag, timefrom, timeto) {
      this.flag = flag
      this.timefrom = timefrom
      this.timeto = timeto
      Api.getSelectProcessInfo(this.flag, this.timefrom, this.timeto)
      .then(data => {
        this.isLoadingAccessLineData = false
        let datas = data.data
        if (data.status === 0) {
          this.tableData = datas
        } else {
          this.$message({
            type: 'warning',
            message: '获取数据失败！'
          })
        }  
      }).catch(res => {
        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
   }
}
}
</script>

<style lang="scss">
.MonitorChart {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .dynamicCharts {
    padding-top: 10px;
  }
  .parttitle {
    padding-top: 5px;
    height: 40px;
    background: #eeeeee;
    padding-left: 30px;
    border-bottom: solid 1px #e2e2e2;
    line-height: 40px;
  }
  .ChartData {
    width:100%;
    height:100%;
    overflow: auto;
  }
  
  .optiondiv {
    background: #fbfbfb;
    padding: 20px 30px 0px;
  }
  .layout {
    display: inline-block;
    padding: 30px; 
    width: 45%; 
    height: 300px
  }
  .layout1 {
    display: inline-block;
    padding: 30px; 
    width: 100%;
    height: 600px; 
  }
  .fr {
    margin-left: 5%;
  }
  .btn {
    background-color:#fbfbfb;
  }
  .isClick {
    background-color:rgb(126, 128, 129);
    color: white;
  }
  .tableform {
    margin-bottom: 23px;
  }
  .roundtime {
    float: right;
  }
}
  @media screen and (max-width:1366px) {
  .MonitorChart {
    min-height: 110px;
    padding: 15px 20px;

    dl {
      margin: 0 20px;
    }
  }
}
</style>
