{"remainingRequest":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\itResources.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\src\\views\\BigScreen\\itResources.vue","mtime":1705604912221},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\sfz-lh-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport * as echarts from 'echarts'\r\nimport headline from './headline.vue'\r\nimport commonAPI from '@/api/bigScreen/common.js'\r\nimport utils from '@/utils'\r\nexport default {\r\n  components: {headline},\r\n  name: 'itResources',\r\n  data() {\r\n    return {\r\n      test: [],\r\n      pageQuery: {\r\n        pageBean: {\r\n          page: 1,\r\n          pageSize: -1,\r\n        },\r\n      },\r\n      thisMenuValue: '',\r\n      //   主数据\r\n      mainData: {},\r\n      //   数据组\r\n      groupData: [\r\n        {\r\n          name: 'CPU',\r\n          imgUrl: require('../../assets/img/bigScreen/icon-CPU.png'),\r\n          value: 0,\r\n        },\r\n        {\r\n          name: '内存',\r\n          imgUrl: require('../../assets/img/bigScreen/icon-Memory.png'),\r\n          value: 0,\r\n        },\r\n        {\r\n          name: '存储',\r\n          imgUrl: require('../../assets/img/bigScreen/icon-storage.png'),\r\n          value: 0,\r\n        },\r\n        {\r\n          name: 'CPU使用率',\r\n          imgUrl: require('../../assets/img/bigScreen/over-cpu.png'),\r\n          value: 0,\r\n        },\r\n        {\r\n          name: '内存使用率',\r\n          imgUrl: require('../../assets/img/bigScreen/over-Memory.png'),\r\n          value: 0,\r\n        },\r\n        {\r\n          name: '存储使用率',\r\n          imgUrl: require('../../assets/img/bigScreen/over-storage.png'),\r\n          value: 0,\r\n        },\r\n      ],\r\n      loadingColor: 'rgba(6, 46, 106, 0.01)',\r\n      loading: {\r\n        CPUChartDataResource: false,\r\n        MemoryChartDataResource: false,\r\n        CloudCPUChartDataResource: false,\r\n        CloudMemoryChartDataResource: false,\r\n        IOChartDataResource: false,\r\n        NetworkChartDataResource: false,\r\n        CloudCPUData: false,\r\n        CPUData: false,\r\n      },\r\n      //   总物理机CPU使用率\r\n      CPUChartOptionSource: null,\r\n      CPUChartResource: null,\r\n      CPUChartDataResource: [],\r\n\r\n      //   总物理机内存负载\r\n      MemoryChartOptionSource: null,\r\n      MemoryChartResource: null,\r\n      MemoryChartDataResource: [],\r\n      //   云主机CPU使用率\r\n      CloudCPUChartOptionSource: null,\r\n      CloudCPUChartResource: null,\r\n      CloudCPUChartDataResource: [],\r\n      //   云主机内存负载\r\n      CloudMemoryChartOptionSource: null,\r\n      CloudMemoryChartResource: null,\r\n      CloudMemoryChartDataResource: [],\r\n      //   总物理磁盘IO\r\n      IOChartOptionSource: null,\r\n      IOChartResource: null,\r\n      IOChartDataResource: [],\r\n      //   网络吞吐量\r\n      NetworkChartOptionSource: null,\r\n      NetworkChartResource: null,\r\n      NetworkChartDataResource: [],\r\n      //   top物理机CPU使用率数据\r\n      CPUData: [],\r\n      //   top云主机CPU使用率数据\r\n      CloudCPUData: [],\r\n      tollStationId: '',\r\n    }\r\n  },\r\n  mounted() {},\r\n  activated() {\r\n    this.getData()\r\n  },\r\n  methods: {\r\n    getData() {\r\n      this.tollStationId = sessionStorage.getItem('tollStationId')\r\n\r\n      this.getCpu()\r\n      this.getItData()\r\n      this.getPyCpuData()\r\n      this.getPmRamData()\r\n      this.getVmCpuData()\r\n      this.getVmRamData()\r\n      this.getPhysicalMdIoData()\r\n      this.getNetworkData()\r\n    },\r\n\r\n    // 总物理机CPU使用率\r\n    drawCPUChartResource() {\r\n      // chart 已存在则为更新数据\r\n      if (this.CPUChartResource) {\r\n        this.CPUChartOptionResource.xAxis.data = this.CPUChartDataResource.map(\r\n          function (item) {\r\n            return item.name\r\n          }\r\n        )\r\n        this.CPUChartOptionResource.series[0].data =\r\n          this.CPUChartDataResource.map(function (item) {\r\n            return item.value\r\n          })\r\n        this.CPUChartResource.setOption(this.CPUChartOptionResource)\r\n      } else {\r\n        // chart 不存在则为初始化数据和图表\r\n        this.CPUChartResource = echarts.init(\r\n          document.getElementById('CPU-chart-resource')\r\n        )\r\n        this.CPUChartOptionResource = {\r\n          color: ['#66B2FF'],\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n            borderColor: '#3399FF',\r\n            confine: true,\r\n            textStyle: {\r\n              color: '#fff',\r\n            },\r\n            confine: true,\r\n            position: 'bottom',\r\n            formatter: '{b}<br/>' + '总物理机CPU使用率：' + '{c}%',\r\n          },\r\n          grid: [\r\n            {\r\n              top: '18%',\r\n              left: '10%',\r\n              right: '6%',\r\n              bottom: '20%',\r\n            },\r\n          ],\r\n          xAxis: {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              padding: 5,\r\n              formatter: (val) => {\r\n                return val.slice(11, 16)\r\n              },\r\n            },\r\n            data: this.CPUChartDataResource.map(function (item) {\r\n              return item.name\r\n            }),\r\n          },\r\n          yAxis: {\r\n            name: '单位（%）',\r\n            nameTextStyle: {\r\n              color: 'rgba(255,255,255,0.6)',\r\n              padding: [0, 0, 0, 8],\r\n            },\r\n            type: 'value',\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              formatter: (val) => {\r\n                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {\r\n                  return val\r\n                } else {\r\n                  return\r\n                }\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n          series: [\r\n            {\r\n              type: 'line',\r\n              showBackground: true,\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(102,178,255,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(102,178,255,0)',\r\n                  },\r\n                ]),\r\n              },\r\n\r\n              data: this.CPUChartDataResource.map(function (item) {\r\n                return item.value\r\n              }),\r\n            },\r\n          ],\r\n        }\r\n\r\n        this.CPUChartOptionResource &&\r\n          this.CPUChartResource.setOption(this.CPUChartOptionResource)\r\n        window.addEventListener('resize', () => this.CPUChartResource.resize())\r\n        // var i = 1\r\n        // setInterval(() => {\r\n        //   i = i + 1\r\n        //   let obj = {}\r\n        //   obj = {\r\n        //     name: i + '月',\r\n        //     value: [i + '月', 45 + i],\r\n        //   }\r\n        //   this.CPUChartDataResource.shift()\r\n        //   this.CPUChartDataResource.push(obj)\r\n\r\n        //   this.CPUChartOptionResource.series[0].data = this.CPUChartDataResource\r\n        //   this.CPUChartResource.setOption(this.CPUChartOptionResource)\r\n        // }, 1000)\r\n      }\r\n    },\r\n    // 总物理机内存负载\r\n    drawMemoryChartResource() {\r\n      // chart 已存在则为更新数据\r\n      if (this.MemoryChartResource) {\r\n        this.MemoryChartOptionSource.xAxis.data =\r\n          this.MemoryChartDataResource.map(function (item) {\r\n            return item.name\r\n          })\r\n        this.MemoryChartOptionSource.series[0].data =\r\n          this.MemoryChartDataResource.map(function (item) {\r\n            return item.value\r\n          })\r\n        this.MemoryChartResource.setOption(this.MemoryChartOptionSource)\r\n      } else {\r\n        // chart 不存在则为初始化数据和图表\r\n        this.MemoryChartResource = echarts.init(\r\n          document.getElementById('Memory-chart-resource')\r\n        )\r\n        this.MemoryChartOptionSource = {\r\n          color: ['#55EDB0'],\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n            borderColor: '#3399FF',\r\n            confine: true,\r\n            textStyle: {\r\n              color: '#fff',\r\n            },\r\n            confine: true,\r\n            position: 'bottom',\r\n            formatter: '{b}<br/>' + '总物理机内存负载：' + '{c}%',\r\n          },\r\n          grid: [\r\n            {\r\n              top: '18%',\r\n              left: '10%',\r\n              right: '6%',\r\n              bottom: '20%',\r\n            },\r\n          ],\r\n          xAxis: {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              padding: 5,\r\n              formatter: (val) => {\r\n                return val.slice(11, 16)\r\n              },\r\n            },\r\n            data: this.MemoryChartDataResource.map(function (item) {\r\n              return item.name\r\n            }),\r\n          },\r\n          yAxis: {\r\n            max: 100,\r\n            min: 0,\r\n            interval: 25,\r\n            name: '单位（%）',\r\n            nameTextStyle: {\r\n              color: 'rgba(255,255,255,0.6)',\r\n              padding: [0, 0, 0, 8],\r\n            },\r\n            type: 'value',\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              formatter: (val) => {\r\n                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {\r\n                  return val\r\n                } else {\r\n                  return\r\n                }\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n          series: [\r\n            {\r\n              type: 'line',\r\n              showBackground: true,\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(85,237,176,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(85,237,176,0)',\r\n                  },\r\n                ]),\r\n              },\r\n\r\n              data: this.MemoryChartDataResource.map(function (item) {\r\n                return item.value\r\n              }),\r\n            },\r\n          ],\r\n        }\r\n\r\n        this.MemoryChartOptionSource &&\r\n          this.MemoryChartResource.setOption(this.MemoryChartOptionSource)\r\n        window.addEventListener('resize', () =>\r\n          this.MemoryChartResource.resize()\r\n        )\r\n      }\r\n    },\r\n    // 云主机CPU使用率\r\n    drawCloudCPUChartResource() {\r\n      // chart 已存在则为更新数据\r\n      if (this.CloudCPUChartResource) {\r\n        this.CloudCPUChartOptionSource.xAxis.data =\r\n          this.CloudCPUChartDataResource.map(function (item) {\r\n            return item.name\r\n          })\r\n        this.CloudCPUChartOptionSource.series[0].data =\r\n          this.CloudCPUChartDataResource.map(function (item) {\r\n            return item.value\r\n          })\r\n        this.CloudCPUChartResource.setOption(this.CloudCPUChartOptionSource)\r\n      } else {\r\n        // chart 不存在则为初始化数据和图表\r\n        this.CloudCPUChartResource = echarts.init(\r\n          document.getElementById('CloudCPU-chart-resource')\r\n        )\r\n        this.CloudCPUChartOptionSource = {\r\n          color: ['#FFDA81'],\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n            borderColor: '#3399FF',\r\n            confine: true,\r\n            textStyle: {\r\n              color: '#fff',\r\n            },\r\n            confine: true,\r\n            position: 'bottom',\r\n            formatter: '{b}<br/>' + '云主机CPU使用率：' + '{c}%',\r\n          },\r\n          grid: [\r\n            {\r\n              top: '18%',\r\n              left: '10%',\r\n              right: '6%',\r\n              bottom: '20%',\r\n            },\r\n          ],\r\n          xAxis: {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              padding: 5,\r\n              formatter: (val) => {\r\n                return val.slice(11, 16)\r\n              },\r\n            },\r\n            data: this.CloudCPUChartDataResource.map(function (item) {\r\n              return item.name\r\n            }),\r\n          },\r\n          yAxis: {\r\n            max: 100,\r\n            min: 0,\r\n            interval: 25,\r\n            name: '单位（%）',\r\n            nameTextStyle: {\r\n              color: 'rgba(255,255,255,0.6)',\r\n              padding: [0, 0, 0, 8],\r\n            },\r\n            type: 'value',\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              formatter: (val) => {\r\n                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {\r\n                  return val\r\n                } else {\r\n                  return\r\n                }\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n          series: [\r\n            {\r\n              type: 'line',\r\n              showBackground: true,\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(255,218,129,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(255,218,129,0)',\r\n                  },\r\n                ]),\r\n              },\r\n\r\n              data: this.CloudCPUChartDataResource.map(function (item) {\r\n                return item.value\r\n              }),\r\n            },\r\n          ],\r\n        }\r\n\r\n        this.CloudCPUChartOptionSource &&\r\n          this.CloudCPUChartResource.setOption(this.CloudCPUChartOptionSource)\r\n        window.addEventListener('resize', () =>\r\n          this.CloudCPUChartResource.resize()\r\n        )\r\n      }\r\n    },\r\n    // 云主机内存负载\r\n    drawCloudMemoryChartResource() {\r\n      // chart 已存在则为更新数据\r\n      if (this.CloudMemoryChartResource) {\r\n        this.CloudMemoryChartOptionSource.xAxis.data =\r\n          this.CloudMemoryChartDataResource.map(function (item) {\r\n            return item.name\r\n          })\r\n        this.CloudMemoryChartOptionSource.series[0].data =\r\n          this.CloudMemoryChartDataResource.map(function (item) {\r\n            return item.value\r\n          })\r\n        this.CloudMemoryChartResource.setOption(\r\n          this.CloudMemoryChartOptionSource\r\n        )\r\n      } else {\r\n        // chart 不存在则为初始化数据和图表\r\n        this.CloudMemoryChartResource = echarts.init(\r\n          document.getElementById('CloudMemory-chart-resource')\r\n        )\r\n        this.CloudMemoryChartOptionSource = {\r\n          color: ['#66B2FF'],\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n            borderColor: '#3399FF',\r\n            confine: true,\r\n            textStyle: {\r\n              color: '#fff',\r\n            },\r\n            confine: true,\r\n            position: 'bottom',\r\n            formatter: '{b}<br/>' + '云主机内存负载：' + '{c}%',\r\n          },\r\n          grid: [\r\n            {\r\n              top: '18%',\r\n              left: '10%',\r\n              right: '6%',\r\n              bottom: '20%',\r\n            },\r\n          ],\r\n          xAxis: {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              padding: 5,\r\n              formatter: (val) => {\r\n                return val.slice(11, 16)\r\n              },\r\n            },\r\n            data: this.CloudMemoryChartDataResource.map(function (item) {\r\n              return item.name\r\n            }),\r\n          },\r\n          yAxis: {\r\n            max: 100,\r\n            min: 0,\r\n            interval: 25,\r\n            name: '单位（%）',\r\n            nameTextStyle: {\r\n              color: 'rgba(255,255,255,0.6)',\r\n              padding: [0, 0, 0, 8],\r\n            },\r\n            type: 'value',\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              formatter: (val) => {\r\n                if ((val >= 1 && parseInt(val, 10) === val) || val == 0) {\r\n                  return val\r\n                } else {\r\n                  return\r\n                }\r\n              },\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n          series: [\r\n            {\r\n              type: 'line',\r\n              showBackground: true,\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(102,178,255,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(102,178,255,0)',\r\n                  },\r\n                ]),\r\n              },\r\n\r\n              data: this.CloudMemoryChartDataResource.map(function (item) {\r\n                return item.value\r\n              }),\r\n            },\r\n          ],\r\n        }\r\n\r\n        this.CloudMemoryChartOptionSource &&\r\n          this.CloudMemoryChartResource.setOption(\r\n            this.CloudMemoryChartOptionSource\r\n          )\r\n        window.addEventListener('resize', () =>\r\n          this.CloudMemoryChartResource.resize()\r\n        )\r\n      }\r\n    },\r\n    // 总物理机磁盘IO\r\n    drawIOChartResource() {\r\n      // chart 已存在则为更新数据\r\n      if (this.IOChartResource) {\r\n        this.IOChartOptionSource.dataset.source = this.IOChartDataResource\r\n        this.IOChartResource.setOption(this.IOChartOptionSource)\r\n      } else {\r\n        // chart 不存在则为初始化数据和图表\r\n        this.IOChartResource = echarts.init(\r\n          document.getElementById('IO-chart-resource')\r\n        )\r\n        this.IOChartOptionSource = {\r\n          dataset: {\r\n            source: this.IOChartDataResource,\r\n          },\r\n          color: ['#66B2FF', '#55EDB0'],\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n            borderColor: '#3399FF',\r\n            confine: true,\r\n            textStyle: {\r\n              color: '#fff',\r\n            },\r\n            confine: true,\r\n            axisPointer: {\r\n              type: 'cross',\r\n              label: {\r\n                backgroundColor: '#6a7985',\r\n              },\r\n            },\r\n          },\r\n          grid: [\r\n            {\r\n              top: '18%',\r\n              left: '16%',\r\n              right: '6%',\r\n              bottom: '20%',\r\n            },\r\n          ],\r\n          legend: {\r\n            data: [\r\n              {\r\n                name: '读',\r\n                itemStyle: {\r\n                  opacity: 0,\r\n                },\r\n              },\r\n              {\r\n                name: '写',\r\n                itemStyle: {\r\n                  opacity: 0,\r\n                },\r\n              },\r\n            ],\r\n            textStyle: {\r\n              color: 'rgba(255,255,255,0.8)',\r\n              fontSize: 10,\r\n            },\r\n            top: '-2%',\r\n          },\r\n          xAxis: {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              padding: 5,\r\n              formatter: (val) => {\r\n                return val.slice(11, 16)\r\n              },\r\n            },\r\n\r\n            data: this.IOChartDataResource.map(function (item) {\r\n              return item[0]\r\n            }),\r\n          },\r\n          yAxis: {\r\n            name: '单位（M）',\r\n            nameTextStyle: {\r\n              color: 'rgba(255,255,255,0.6)',\r\n              padding: [0, 0, 0, 8],\r\n            },\r\n            type: 'value',\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n          series: [\r\n            {\r\n              name: '读',\r\n              type: 'line',\r\n\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(102,178,255,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(102,178,255,0)',\r\n                  },\r\n                ]),\r\n              },\r\n            },\r\n            {\r\n              name: '写',\r\n              type: 'line',\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(85,237,176,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(85,237,176,0)',\r\n                  },\r\n                ]),\r\n              },\r\n            },\r\n          ],\r\n        }\r\n\r\n        this.IOChartOptionSource &&\r\n          this.IOChartResource.setOption(this.IOChartOptionSource)\r\n        window.addEventListener('resize', () => this.IOChartResource.resize())\r\n      }\r\n    },\r\n    // 网络吞吐量\r\n    drawNetworkChartResource() {\r\n      // chart 已存在则为更新数据\r\n      if (this.NetworkChartResource) {\r\n        this.NetworkChartOptionSource.dataset.source =\r\n          this.NetworkChartDataResource\r\n        this.NetworkChartResource.setOption(this.NetworkChartOptionSource)\r\n      } else {\r\n        // chart 不存在则为初始化数据和图表\r\n        this.NetworkChartResource = echarts.init(\r\n          document.getElementById('Network-chart-resource')\r\n        )\r\n        this.NetworkChartOptionSource = {\r\n          dataset: {\r\n            source: this.NetworkChartDataResource,\r\n          },\r\n          color: ['#66B2FF', '#55EDB0'],\r\n          tooltip: {\r\n            trigger: 'axis',\r\n            backgroundColor: 'rgba(13, 79, 145, 0.9)',\r\n            borderColor: '#3399FF',\r\n            confine: true,\r\n            textStyle: {\r\n              color: '#fff',\r\n            },\r\n            confine: true,\r\n            axisPointer: {\r\n              type: 'cross',\r\n              label: {\r\n                backgroundColor: '#6a7985',\r\n              },\r\n            },\r\n          },\r\n          grid: [\r\n            {\r\n              top: '18%',\r\n              left: '16%',\r\n              right: '6%',\r\n              bottom: '20%',\r\n            },\r\n          ],\r\n          legend: {\r\n            data: [\r\n              {\r\n                name: '发送',\r\n                itemStyle: {\r\n                  opacity: 0,\r\n                },\r\n              },\r\n              {\r\n                name: '接收',\r\n                itemStyle: {\r\n                  opacity: 0,\r\n                },\r\n              },\r\n            ],\r\n            textStyle: {\r\n              color: 'rgba(255,255,255,0.8)',\r\n              fontSize: 10,\r\n            },\r\n            top: '-2%',\r\n          },\r\n          xAxis: {\r\n            type: 'category',\r\n            boundaryGap: false,\r\n            axisTick: {\r\n              show: false,\r\n              alignWithLabel: true,\r\n            },\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n              padding: 5,\r\n              formatter: (val) => {\r\n                return val.slice(11, 16)\r\n              },\r\n            },\r\n            data: this.NetworkChartDataResource.map(function (item) {\r\n              return item[0]\r\n            }),\r\n          },\r\n          yAxis: {\r\n            name: '单位（M）',\r\n            nameTextStyle: {\r\n              color: 'rgba(255,255,255,0.6)',\r\n              padding: [0, 0, 0, 8],\r\n            },\r\n            type: 'value',\r\n            axisLine: {\r\n              show: true,\r\n              lineStyle: {\r\n                color: '#808080',\r\n              },\r\n            },\r\n            axisLabel: {\r\n              show: true,\r\n              color: 'rgba(255,255,255,0.6)',\r\n              fontSize: 12,\r\n            },\r\n            splitLine: {\r\n              show: false,\r\n            },\r\n          },\r\n          series: [\r\n            {\r\n              name: '发送',\r\n              type: 'line',\r\n\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(102,178,255,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(102,178,255,0)',\r\n                  },\r\n                ]),\r\n              },\r\n            },\r\n            {\r\n              name: '接收',\r\n              type: 'line',\r\n              smooth: true,\r\n              symbol: 'none',\r\n              areaStyle: {\r\n                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\r\n                  {\r\n                    offset: 0,\r\n                    color: 'rgba(85,237,176,0.3)',\r\n                  },\r\n                  {\r\n                    offset: 1,\r\n                    color: 'rgba(85,237,176,0)',\r\n                  },\r\n                ]),\r\n              },\r\n            },\r\n          ],\r\n        }\r\n\r\n        this.NetworkChartOptionSource &&\r\n          this.NetworkChartResource.setOption(this.NetworkChartOptionSource)\r\n        window.addEventListener('resize', () =>\r\n          this.NetworkChartResource.resize()\r\n        )\r\n      }\r\n    },\r\n    // 获取物理机cpu使用率\r\n    getRate() {\r\n      for (var j = 0; j < this.CPUData.length; j++) {\r\n        const rating = document.getElementsByClassName('CPU-rate')[j]\r\n        const block = document.getElementsByClassName('CPU-block')[j]\r\n        const value = document.getElementsByClassName('CPU-value')[j]\r\n        rating.innerHTML = ''\r\n        for (var i = 1; i < this.CPUData[j].value * 0.766; i++) {\r\n          let opacity = 1 / Math.floor(this.CPUData[j].value * 0.766)\r\n          let blockopacity = opacity * i\r\n          blockopacity = String(blockopacity)\r\n\r\n          if (this.CPUData[j].value >= 90 && this.CPUData[j].value <= 100) {\r\n            setTimeout(() => {\r\n              rating.innerHTML += `<div class='block' style='background-color:#FD9854;opacity:${blockopacity}'></div>`\r\n              value.style.color = '#FD9854'\r\n            }, i * 25)\r\n          } else if (\r\n            this.CPUData[j].value >= 80 &&\r\n            this.CPUData[j].value < 90\r\n          ) {\r\n            setTimeout(() => {\r\n              rating.innerHTML += `<div class='block' style='background-color:#FFDA81;opacity:${blockopacity}'></div>`\r\n              value.style.color = '#FFDA81'\r\n            }, i * 25)\r\n          } else {\r\n            setTimeout(() => {\r\n              rating.innerHTML += `<div class='block' style='background-color:#66B2FF;opacity:${blockopacity}'></div>`\r\n              value.style.color = '#66B2FF'\r\n            }, i * 25)\r\n          }\r\n        }\r\n      }\r\n    },\r\n    // 获取云主机cpu使用率\r\n    getCloudRate() {\r\n      for (var j = 0; j < this.CloudCPUData.length; j++) {\r\n        const rating = document.getElementsByClassName('CloudCPU-rate')[j]\r\n        const block = document.getElementsByClassName('CloudCPU-block')[j]\r\n        const value = document.getElementsByClassName('CloudCPU-value')[j]\r\n        rating.innerHTML = ''\r\n        for (var i = 1; i < this.CloudCPUData[j].value * 0.833; i++) {\r\n          let opacity = 1 / Math.floor(this.CloudCPUData[j].value * 0.833)\r\n          let blockopacity = opacity * i\r\n          blockopacity = String(blockopacity)\r\n\r\n          if (\r\n            this.CloudCPUData[j].value >= 90 &&\r\n            this.CloudCPUData[j].value <= 100\r\n          ) {\r\n            setTimeout(() => {\r\n              rating.innerHTML += `<div class='block' style='background-color:#FD9854;opacity:${blockopacity}'></div>`\r\n              value.style.color = '#FD9854'\r\n            }, i * 25)\r\n          } else if (\r\n            this.CloudCPUData[j].value >= 80 &&\r\n            this.CloudCPUData[j].value < 90\r\n          ) {\r\n            setTimeout(() => {\r\n              rating.innerHTML += `<div class='block' style='background-color:#FFDA81;opacity:${blockopacity}'></div>`\r\n              value.style.color = '#FFDA81'\r\n            }, i * 25)\r\n          } else {\r\n            setTimeout(() => {\r\n              rating.innerHTML += `<div class='block' style='background-color:#66B2FF;opacity:${blockopacity}'></div>`\r\n              value.style.color = '#66B2FF'\r\n            }, i * 25)\r\n          }\r\n        }\r\n      }\r\n    },\r\n    getCpu() {\r\n      this.CPUData = []\r\n      this.CloudCPUData = []\r\n      this.loading.CPUData = true\r\n      this.loading.CloudCPUData = true\r\n      for (let i = 1; i < 3; i++) {\r\n        let data = this.qs.stringify({\r\n          stationId: this.tollStationId,\r\n          type: i,\r\n        })\r\n\r\n        commonAPI.getCpu(data).then((res) => {\r\n          if (res) {\r\n            for (let j = 0; j < res.length; j++) {\r\n              let obj = {}\r\n              let rate = 0\r\n              rate = res[j].useRate * 100\r\n              rate = rate.toFixed(2)\r\n              if (rate.length < 4) {\r\n                while (rate.length < 4) {\r\n                  rate = rate + '0'\r\n                }\r\n              }\r\n              obj = {\r\n                id: res[j].itSourceId,\r\n                name: res[j].name,\r\n                value: rate,\r\n              }\r\n              if (i == 1) {\r\n                this.CPUData.push(obj)\r\n              } else if (i == 2) {\r\n                this.CloudCPUData.push(obj)\r\n              }\r\n            }\r\n          }\r\n          this.$nextTick(() => {\r\n            if (i == 1) {\r\n              this.getRate()\r\n              this.loading.CPUData = false\r\n            } else {\r\n              this.getCloudRate()\r\n              this.loading.CloudCPUData = false\r\n            }\r\n          })\r\n        })\r\n      }\r\n    },\r\n    getItData() {\r\n      this.mainData = {}\r\n      commonAPI\r\n        .getItSoutceCount(this.tollStationId, this.pageQuery)\r\n        .then((res) => {\r\n          if (res) {\r\n            let obj = {}\r\n            obj = {\r\n              pyNum: res.physicalMachineNum,\r\n              pyConnect: res.physicalMachineConnectNum,\r\n              pyUnConnect: res.physicalMachineUnConnectNum,\r\n              pyOther: res.physicalMachineOtherNum,\r\n              CNum: res.cloudHostNum,\r\n              CConnect: res.cloudHostInWorkNum,\r\n              CUnConnect: res.cloudHostStopNum,\r\n              COther: res.cloudHostOtherNum,\r\n            }\r\n            this.mainData = obj\r\n            for (let i = 0; i < this.groupData.length; i++) {\r\n              if (this.groupData[i].name == 'CPU使用率') {\r\n                this.groupData[i].value = res.cpuRate * 100\r\n                this.groupData[i].value = Number(\r\n                  this.groupData[i].value\r\n                ).toFixed(2)\r\n                if (this.groupData[i].value.length < 4) {\r\n                  while (this.groupData[i].value.length < 4) {\r\n                    this.groupData[i].value = this.groupData[i].value + '0'\r\n                  }\r\n                }\r\n                this.groupData[i].value = this.groupData[i].value + ' %'\r\n              }\r\n              if (this.groupData[i].name == '内存使用率') {\r\n                this.groupData[i].value = res.mirrorServerRate * 100\r\n                this.groupData[i].value = Number(\r\n                  this.groupData[i].value\r\n                ).toFixed(2)\r\n                if (this.groupData[i].value.length < 4) {\r\n                  while (this.groupData[i].value.length < 4) {\r\n                    this.groupData[i].value = this.groupData[i].value + '0'\r\n                  }\r\n                }\r\n                this.groupData[i].value = this.groupData[i].value + ' %'\r\n              }\r\n              if (this.groupData[i].name == '存储使用率') {\r\n                this.groupData[i].value = res.primaryStorageRate * 100\r\n                this.groupData[i].value = Number(\r\n                  this.groupData[i].value\r\n                ).toFixed(2)\r\n                if (this.groupData[i].value.length < 4) {\r\n                  while (this.groupData[i].value.length < 4) {\r\n                    this.groupData[i].value = this.groupData[i].value + '0'\r\n                  }\r\n                }\r\n                this.groupData[i].value = this.groupData[i].value + ' %'\r\n              }\r\n              if (this.groupData[i].name == 'CPU') {\r\n                this.groupData[i].value = res.cpuTotal + ' 核'\r\n              }\r\n              if (this.groupData[i].name == '内存') {\r\n                this.groupData[i].value = res.ramTotal + ' G'\r\n              }\r\n              if (this.groupData[i].name == '存储') {\r\n                this.groupData[i].value = res.primaryStorageTotal + ' G'\r\n              }\r\n            }\r\n          }\r\n        })\r\n    },\r\n    // 物理cpu使用率数据\r\n    getPyCpuData() {\r\n      this.CPUChartDataResource = []\r\n\r\n      this.loading.CPUChartDataResource = true\r\n      let data = this.qs.stringify({\r\n        endDate: '',\r\n        startDate: '',\r\n        stationId: this.tollStationId,\r\n      })\r\n\r\n      commonAPI.getPmCPURate(data).then((res) => {\r\n        if (res) {\r\n          for (let i = 0; i < res.length; i++) {\r\n            let obj = {\r\n              name: res[i].transDate,\r\n              value: (res[i].useRate * 100).toFixed(1),\r\n            }\r\n            this.CPUChartDataResource.push(obj)\r\n          }\r\n          this.loading.CPUChartDataResource = false\r\n          this.drawCPUChartResource()\r\n        }\r\n      })\r\n    },\r\n    // 物理内存负载数据\r\n    getPmRamData() {\r\n      this.MemoryChartDataResource = []\r\n      this.loading.MemoryChartDataResource = true\r\n      let data = this.qs.stringify({\r\n        endDate: '',\r\n        startDate: '',\r\n        stationId: this.tollStationId,\r\n      })\r\n      commonAPI.getPmRamRate(data).then((res) => {\r\n        if (res) {\r\n          for (let i = 0; i < res.length; i++) {\r\n            let obj = {\r\n              name: res[i].transDate,\r\n              value: (res[i].useRate * 100).toFixed(1),\r\n            }\r\n            this.MemoryChartDataResource.push(obj)\r\n          }\r\n          this.loading.MemoryChartDataResource = false\r\n          this.drawMemoryChartResource()\r\n        }\r\n      })\r\n    },\r\n    // 物理磁盘io数据\r\n    getPhysicalMdIoData() {\r\n      this.IOChartDataResource = []\r\n      this.loading.IOChartDataResource = true\r\n      let data = this.qs.stringify({\r\n        endDate: '',\r\n        startDate: '',\r\n        stationId: this.tollStationId,\r\n      })\r\n      commonAPI.getPhysicalMdIo(data).then((res) => {\r\n        if (res) {\r\n          for (let i = 0; i < res.length; i++) {\r\n            let arr = []\r\n            arr.push(res[i].transDate)\r\n            arr.push(res[i].physicalMdIoRead)\r\n            arr.push(res[i].physicalMdIoWrite)\r\n            this.IOChartDataResource.push(arr)\r\n          }\r\n          this.loading.IOChartDataResource = false\r\n          this.drawIOChartResource()\r\n        }\r\n      })\r\n    },\r\n    // 云主机cpu使用率数据\r\n    getVmCpuData() {\r\n      this.CloudCPUChartDataResource = []\r\n      this.loading.CloudCPUChartDataResource = true\r\n      let data = this.qs.stringify({\r\n        endDate: '',\r\n        startDate: '',\r\n        stationId: this.tollStationId,\r\n      })\r\n      commonAPI.getVmCPURate(data).then((res) => {\r\n        if (res) {\r\n          for (let i = 0; i < res.length; i++) {\r\n            let obj = {\r\n              name: res[i].transDate,\r\n              value: (res[i].useRate * 100).toFixed(1),\r\n            }\r\n            this.CloudCPUChartDataResource.push(obj)\r\n          }\r\n          this.loading.CloudCPUChartDataResource = false\r\n          this.drawCloudCPUChartResource()\r\n        }\r\n      })\r\n    },\r\n    // 云主机内存负载数据\r\n    getVmRamData() {\r\n      this.CloudMemoryChartDataResource = []\r\n      this.loading.CloudMemoryChartDataResource = true\r\n      let data = this.qs.stringify({\r\n        endDate: '',\r\n        startDate: '',\r\n        stationId: this.tollStationId,\r\n      })\r\n      commonAPI.getVmRamRate(data).then((res) => {\r\n        if (res) {\r\n          for (let i = 0; i < res.length; i++) {\r\n            let obj = {\r\n              name: res[i].transDate,\r\n              value: (res[i].useRate * 100).toFixed(1),\r\n            }\r\n            this.CloudMemoryChartDataResource.push(obj)\r\n          }\r\n          this.loading.CloudMemoryChartDataResource = false\r\n          this.drawCloudMemoryChartResource()\r\n        }\r\n      })\r\n    },\r\n    // 网络吞吐量数据\r\n    getNetworkData() {\r\n      this.NetworkChartDataResource = []\r\n      this.loading.NetworkChartDataResource = true\r\n      let data = this.qs.stringify({\r\n        endDate: '',\r\n        startDate: '',\r\n        stationId: this.tollStationId,\r\n      })\r\n      commonAPI.getNetworkThroughput(data).then((res) => {\r\n        if (res) {\r\n          for (let i = 0; i < res.length; i++) {\r\n            let arr = []\r\n            arr.push(res[i].transDate)\r\n            arr.push(res[i].networkThroughputSend)\r\n            arr.push(res[i].networkThroughputAccept)\r\n            this.NetworkChartDataResource.push(arr)\r\n          }\r\n          this.loading.NetworkChartDataResource = false\r\n          this.drawNetworkChartResource()\r\n        }\r\n      })\r\n    },\r\n  },\r\n}\r\n",null]}