服务资源实时监控

王旭

2022-09-21 2a6cb291418889f479dc0061ce01618db6519619

服务资源实时监控

 public/config/config.js

@@ -1,7 +1,8 @@
var baseUrl = "http://192.168.20.53:8062";
var gisUrl = "http://183.162.245.49:3301";
var ifreamUrl = "http://192.168.20.39:12306/";
var baseUrl = 'http://192.168.20.53:8062';
var gisUrl = 'http://183.162.245.49:3301';
var ifreamUrl = 'http://192.168.20.39:12306/';

var serverUrl = "http://192.168.20.106/LFServer/";
var serverUrl = 'http://192.168.20.106/LFServer/';

var api_Url = "http://192.168.20.106/";
var api_Url = 'http://192.168.20.106/';
var sql_Url = 'http://192.168.20.39:8081/admin/druid/sql.html'; //数据库监控地址

 src/assets/lang/en.js

@@ -33,6 +33,35 @@
    safetyManagement: 'Safety Management',
    operationMonitoring: 'Operation Monitoring',
    systemMonitoring: 'System Monitoring',
    systemMonitoringObj:{
      totalMemory:"totalMemory",
      haveBeenUsed:"haveBeenUsed",
      usageRate:"usageRate",
      systemMemory:"systemMemory",
      CPUusage:"CPUusage",
      CPUsystemUsage:"CPUsystemUsage",
      numberOfExceptions:"numberOfExceptions",
      numberOfAbnormalSystems:"numberOfAbnormalSystems",
      serviceAarm:"serviceAarm",
      serviceResourceAlarm:"serviceResourceAlarm",
      serviceResourceStatus:"serviceResourceStatus",
      userOperationBehavior:"userOperationBehavior",
      resourceInvocationStatus:"resourceInvocationStatus",
      resourceCallStatistics:"resourceCallStatistics",
      inquire:"inquire",
      EnterTheUserName:"Enter The UserName",
      EnterTheResourceID:"Enter The Resource ID",
      EnterTheUserChineseName:"Enter the user name, Chinese name or Pinyin first letter query",
      onlinePersonnel:"onlinePersonnel",
      userID:"userID",
      username:"username",
      onlineTime:"onlineTime",
      abnormalResources:"abnormalResources",
      resourceID:"resourceID",
      resourceName:"resourceName",
      resourceState:"resourceState",
      abnormaltime:"abnormaltime",
    },
    logLog: 'ConLog',
    operationLog: 'Operation Log',
    databaseMonitoring: 'Database Monitoring',

 src/assets/lang/zh.js

@@ -32,7 +32,36 @@
    authorityManagement: '权限管理',
    safetyManagement: '安全管理',
    operationMonitoring: '运行监控',
    systemMonitoring: '系统监控',
    systemMonitoring: '服务资源实时监控',
    systemMonitoringObj:{
      totalMemory:"总内存",
      haveBeenUsed:"已使用",
      usageRate:"使用率",
      systemMemory:"系统内存",
      CPUusage:"CPU用量",
      CPUsystemUsage:"cpu系统用量",
      numberOfExceptions:"异常个数",
      numberOfAbnormalSystems:"异常系统个数",
      serviceAarm:"服务告警",
      serviceResourceAlarm:"服务资源告警",
      serviceResourceStatus:"服务资源状态",
      userOperationBehavior:"用户操作行为",
      resourceInvocationStatus:"资源调用状态",
      resourceCallStatistics:"资源调用统计",
      inquire:"查询",
      EnterTheUserName:"输入用户名称查询",
      EnterTheResourceID:"输入资源id",
      EnterTheUserChineseName:"输入用户名，中文名或者拼音首字母查询",
      onlinePersonnel:"在线人员",
      userID:"用户ID",
      username:"用户名",
      onlineTime:"上线时间",
      abnormalResources:"异常资源",
      resourceID:"资源ID",
      resourceName:"资源名称",
      resourceState:"资源状态",
      abnormaltime:"异常时间",
    },
    logLog: '登录日志',
    operationLog: '操作日志',
    databaseMonitoring: '数据库监控',

 src/views/maintenance/systemMonitoring.vue

@@ -1,50 +1,175 @@
<template>
  <div class="systemMonitoring_box">
    <My-bread :list="['运维管理', '系统监控']"></My-bread>
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.systemMonitoring')}`,
      ]"
    ></My-bread>
    <el-divider />
    <div class="table_box">
      <p class="title_box">服务列表</p>
      <el-table

     
        :data="tableData"
      
        style="width: 100%"
       
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="服务名称"> </el-table-column>
        <el-table-column prop="servicecatalog" label="服务目录">
        </el-table-column>
        <el-table-column prop="visitTimes" label="访问次数"> </el-table-column>
        <el-table-column prop="date" label="创建时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="state" label="运行状态" fixed="right">
        </el-table-column>
      </el-table>
      <div style="margin-top: 40px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
    <div class="inform_box">
      <div class="content_box">
        <div class="top_box">
          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.totalMemory')}}</div>
          <div class="details">63.93GB</div>
          <div class="Syslabel">
            <span>{{$t('operatManage.systemMonitoringObj.haveBeenUsed')}} 31.16GB</span>
            <span style="margin-left: 25px">{{$t('operatManage.systemMonitoringObj.usageRate')}} 49%</span>
          </div>
        </div>
        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.systemMemory')}}</div>
      </div>
      <div class="content_box">
        <div class="top_box">
          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.CPUusage')}}</div>
          <div class="details">3.49%</div>
          <div id="Sys_cpu_chart"></div>
        </div>
        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.CPUsystemUsage')}}</div>
      </div>
      <div class="content_box">
        <div class="top_box">
          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.numberOfExceptions')}}</div>
          <div class="details">0</div>
        </div>
        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.numberOfAbnormalSystems')}}</div>
      </div>
      <div class="content_box">
        <div class="top_box">
          <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.serviceAarm')}}</div>
          <div class="details">8</div>
        </div>
        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.serviceResourceAlarm')}}</div>
      </div>
    </div>
    <div class="chart_box">
      <div class="left_box">
        <p class="title_box">实时服务调用</p>
        <div id="line_chart"></div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.serviceResourceStatus')" name="first">
          <div class="gauge_box">
            <div id="gauge_chart1"></div>
            <div id="gauge_chart2"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.userOperationBehavior')" name="second">
          <div class="gauge_box">
            <div class="input_box">
              <el-form
                :inline="true"
                :model="formInline"
               
                size="mini"
              >
                <el-form-item label="">
                  <el-input
                    v-model="formInline.user"
                    :placeholder="$t('operatManage.systemMonitoringObj.EnterTheUserChineseName')"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div ref="dayBar" id="gauge_chart3"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceInvocationStatus')" name="third">
          <div class="gauge_box">
             <div class="input_box">
              <el-form
                :inline="true"
                :model="formInline"
               
                size="mini"
              >
                <el-form-item label="">
                  <el-input
                    v-model="formInline.user"
                    :placeholder="$t('operatManage.systemMonitoringObj.EnterTheResourceID')"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div ref="dayline" id="line_chart"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceCallStatistics')" name="fourth">
          <div class="gauge_box">
             <div class="input_box">
              <el-form
                :inline="true"
                :model="formInline"
               
                size="mini"
              >
                <el-form-item label="">
                  <el-input
                    v-model="formInline.user"
                    :placeholder="$t('operatManage.systemMonitoringObj.EnterTheUserName')"
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div ref="dayBar1" id="gauge_chart5"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="table_box">
      <div class="left">
        <p class="title_box">{{$t('operatManage.systemMonitoringObj.onlinePersonnel')}}</p>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.userID')"> </el-table-column>
          <el-table-column prop="servicecatalog" :label="$t('operatManage.systemMonitoringObj.username')">
          </el-table-column>
          <el-table-column prop="visitTimes" :label="$t('operatManage.systemMonitoringObj.onlineTime')" fixed="right">
          </el-table-column>
        </el-table>

        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4"
          >
          </el-pagination>
        </div>
      </div>
      <div class="right_box">
        <p class="title_box">系统使用状况</p>
        <div class="gauge_box">
          <div id="gauge_chart1"></div>
          <div id="gauge_chart2"></div>
      <div class="right">
        <p class="title_box">{{$t('operatManage.systemMonitoringObj.abnormalResources')}}</p>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.resourceID')"> </el-table-column>
          <el-table-column prop="servicecatalog" :label="$t('operatManage.systemMonitoringObj.resourceName')">
          </el-table-column>
          <el-table-column prop="visitTimes" :label="$t('operatManage.systemMonitoringObj.resourceState')">
          </el-table-column>
          <el-table-column prop="date" :label="$t('operatManage.systemMonitoringObj.abnormaltime')" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div style="margin-top: 40px" class="pagination_box">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="4"
          >
          </el-pagination>
        </div>
      </div>
    </div>
@@ -61,6 +186,11 @@
  data() {
    //这里存放数据
    return {
      formInline: {
        user: "",
        region: "",
      },
      activeName: "first",
      currentPage4: 1,
      tableData: [
        {
@@ -96,6 +226,17 @@
  },
  //方法集合
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.$nextTick(() => {
        this.$echarts.getInstanceByDom(this.$refs.dayBar).resize();
        this.$echarts.getInstanceByDom(this.$refs.dayBar1).resize();
        this.$echarts.getInstanceByDom(this.$refs.dayline).resize();
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
@@ -103,73 +244,46 @@
      console.log(`当前页: ${val}`);
    },
    gaugeChart1() {
      const gaugeData = [
        {
          value: 20,
          name: "CPU利用率",
          title: {
            offsetCenter: ["0%", "10%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "-10%"],
          },
        },
      ];
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "20%",
          orient: "vertical",
        },
        series: [
          {
            type: "gauge",
            // radius: "10%",
            name: "",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "正常资源" },
              { value: 735, name: "异常资源" },
            ],
            itemStyle: {
              normal: {
                color: "#5c5dd3",
                color: function (colors) {
                  var colorList = ["#d3e9af", "#ed9678"];
                  return colorList[colors.dataIndex];
                },
              },
            },
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#5c5dd3",
              },
            },
            axisLine: {
              lineStyle: {
                width: 40,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 24,
              fontWeight: 800,
            },
            detail: {
              fontSize: 40,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 0,
              formatter: "{value}%",
            },
          },
        ],
@@ -181,76 +295,46 @@
      });
    },
    gaugeChart2() {
      const gaugeData = [
        {
          value: 20,
          name: "内存利用率",
          title: {
            offsetCenter: ["0%", "10%"],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ["0%", "-10%"],
          },
        },
      ];
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "20%",
          orient: "vertical",
        },
        series: [
          {
            type: "gauge",
            name: "",
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "活跃资源" },
              { value: 0, name: "不活跃资源" },
            ],
            itemStyle: {
              normal: {
                color: "#78c9f8",
              },
            },
            // radius: "10%",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#78c9f8",
                normal: {
                  color: "#78c9f8",
                color: function (colors) {
                  var colorList = ["#d3e9af", "#ed9678"];
                  return colorList[colors.dataIndex];
                },
              },
            },
            axisLine: {
              lineStyle: {
                width: 40,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 24,
              fontWeight: 800,
            },
            detail: {
              fontSize: 40,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 0,
              formatter: "{value}%",
            },
          },
        ],
@@ -261,28 +345,190 @@
        myChart.resize();
      });
    },
    lineChart() {
    barChart() {
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            interval: 0,
            rotate: 60,
          },
          data: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
          ],
        },
        yAxis: {
          name: "次数",
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
            itemStyle: {
              normal: {
                color: "#1f88ff",
                lineStyle: {
                  color: "#1f88ff",
                },
              },
            data: [
              120, 200, 150, 80, 70, 110, 130120, 200, 150, 80, 70, 110, 130,
              120, 200, 150, 80, 70, 110, 130,
            ],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("gauge_chart5"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    barChart1() {
      let option = {
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0,
            rotate: 60,
          },
          data: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              120, 200, 150, 80, 70, 110, 130120, 200, 150, 80, 70, 110, 130,
              120, 200, 150, 80, 70, 110, 130,
            ],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("gauge_chart3"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    lineChart() {
      let base = +new Date(1968, 9, 3);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 20000; i++) {
        var now = new Date((base += oneDay));
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
        );
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      let option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center",
          text: "Large Area Chart",
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "100%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: "Fake Data",
            type: "line",
            symbol: "none",
            sampling: "lttb",
            itemStyle: {
              color: "rgb(255, 70, 131)",
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 158, 68)",
                },
                {
                  offset: 1,
                  color: "rgb(255, 70, 131)",
                },
              ]),
            },
            data: data,
          },
        ],
      };
@@ -292,13 +538,57 @@
        myChart.resize();
      });
    },
    lineChart1() {
      let option = {
        grid: {
          top: 0,
          left: "0%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["", "", "", "", "", "", ""],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false, // 不显示坐标轴上的文字
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      let myChart = this.$echarts.init(
        document.getElementById("Sys_cpu_chart")
      );
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    handleSelectionChange() {},
  },
  created() {},
  mounted() {
    this.lineChart();
    this.gaugeChart1();
    this.gaugeChart2();
    this.$nextTick(() => {
      this.lineChart();
      this.lineChart1();
      this.barChart();
      this.barChart1();
      this.gaugeChart1();
      this.gaugeChart2();
    });
  },
};
</script>
@@ -310,13 +600,85 @@
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .inform_box {
    height: 16%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content_box {
      box-sizing: border-box;
      padding: 10px;
      padding-top: 30px;
      width: 24%;
      height: 100%;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
      .top_box {
        width: 70%;
        height: 90%;
        margin-left: 15%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 15px;
        box-sizing: border-box;
        .Syslabel {
          font-family: sans-serif;
          font-size: 13px;
          color: gray;
          text-align: left;
          // margin-left: 20px;
        }
        .details {
          font-family: sans-serif;
          font-size: 31px;
          color: #1b1e21;
          text-align: center;
          letter-spacing: 2px;
        }
        #Sys_cpu_chart {
          width: 100%;
          height: 30%;
        }
      }
      .bottom_box {
        border-top: 1px solid rgb(202, 201, 204);
        text-align: center;
        color: #6c757d;
        font-size: 14px;
      }
    }
  }
  .table_box {
    height: 40%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
    height: 36%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      box-sizing: border-box;
      padding: 10px;
      width: 49%;
      height: 100%;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
      overflow: auto;
    }
    .right {
      overflow: auto;
      box-sizing: border-box;
      padding: 10px;
      width: 49%;
      height: 100%;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
    }
  }
  .title_box {
    font-weight: 800;
@@ -325,44 +687,55 @@
    text-align: center;
  }
  .chart_box {
    height: calc(60% - 100px);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left_box {
      width: 40%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;
      #line_chart {
    height: 36%;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    box-sizing: border-box;
    .el-tabs {
      height: 100%;
    }
    /deep/ .el-tabs__content {
      height: calc(100% - 55px);
    }
    .el-tab-pane {
      height: 100%;
    }
    .gauge_box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 95%;
      position: relative;
      .input_box{
        position: absolute;
        top: 0;
        left: 0;
      }
      #gauge_chart2 {
        width: 49%;
        height: 100%;
      }
      #gauge_chart1 {
        width: 49%;
        height: 100%;
      }
      #gauge_chart3 {
        width: 100%;
        height: 100%;
      }
    }
    .right_box {
      margin-left: 20px;
      width: 60%;
      padding: 10px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid rgb(202, 201, 204);
      box-sizing: border-box;

      .gauge_box {
        display: flex;
        justify-content: space-between;
      #gauge_chart4 {
        width: 100%;
        height: 95%;
        #gauge_chart2 {
          width: 49%;
          height: 100%;
        }
        #gauge_chart1 {
          width: 49%;
          height: 100%;
        }
        height: 100%;
      }
      #gauge_chart5 {
        width: 100%;
        height: 100%;
      }
      #line_chart {
        width: 100%;
        height: 100%;
      }
    }
  }