代码更新

surprise

2024-03-29 98a2b24c89e81a5aacdcbd6b739fef422adf17dd

 src/views/maintenance/systemMonitoring.vue

@@ -1,13 +1,143 @@
<template>
  <div class="systemMonitoring_box">
    <My-bread
      :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.systemMonitoring')}`,
      ]"
    ></My-bread>
    <My-bread :list="[
      `${$t('operatManage.operatManage')}`,
      `${$t('operatManage.systemMonitoring')}`,
    ]"></My-bread>
    <el-divider />
    <div class="inform_box">
    <div class="content_Box">
      <div class="cloumn_Box1">
        <div class="flex_Box1 subpage_Div">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.abnormalResources')" name="first">
              <div class="table_b">
                <el-table :data="resInfo" style="width: 100%; height: 100%">
                  <el-table-column prop="id" :label="$t('operatManage.systemMonitoringObj.resourceID')">
                  </el-table-column>
                  <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.resourceName')">
                  </el-table-column>
                  <el-table-column prop="bak" :label="$t('operatManage.systemMonitoringObj.resourceState')
      ">
                  </el-table-column>
                  <el-table-column prop="createTime" :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
                    show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.serviceResourceStatus')
      " name="second">
              <div id="resUseChart" style="width: 101vh; height: 30vh"></div>
            </el-tab-pane>
            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.userloginStatus')" name="third">
              <div id="userLoginChart" style="width: 101vh; height: 30vh"></div>
            </el-tab-pane>
            <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceOperationStatus')
      " name="fourth">
              <div id="operateCountChart" style="width: 101vh; height: 30vh"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="flex_Box subpage_Div" style="overflow: auto;padding-bottom:20px">
          <div>
            <div style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.onlinePersonnel") }}
            </div>
          </div>
          <div class="table_b">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column align="center" type="index" :label="$t('operatManage.ELM.index')" width="100px" />
              <el-table-column prop="uid" :label="$t('operatManage.systemMonitoringObj.userID')">
              </el-table-column>
              <el-table-column prop="uname" :label="$t('operatManage.systemMonitoringObj.username')">
              </el-table-column>
              <el-table-column prop="loginTime" :label="$t('operatManage.systemMonitoringObj.onlineTime')"
                fixed="right">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="cloumn_Box">
        <div class="flex_Box subpage_Div">
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.memoryMonitoring") }}
            </div>
          </div>
          <div class="top_Box1">
            <div class="top_box_left">
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
      $t("operatManage.systemMonitoringObj.haveBeenUsed")
    }}</label>
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
      $t("operatManage.systemMonitoringObj.usageRate")
    }}</label>
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
              <div class="left_title">
                <div class="height_title">
                  <label>
                    {{
      $t("operatManage.systemMonitoringObj.totalMemory")
    }}</label>
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
      $t("operatManage.systemMonitoringObj.remainingMemory")
    }}</label>
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
            </div>
            <div id="fathershuiWen" class="top_box_right">
              <div id="shuiwen"></div>
            </div>
          </div>
        </div>
        <div class="flex_Box subpage_Div">
          <div>
            <div class="image2"></div>
            <div style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.cpuMonitoring") }}
            </div>
          </div>
          <div id="Sys_cpu_chart" style="width: 100%; height: 86%; margin-top: 8%"></div>
        </div>
        <div class="flex_Box subpage_Div">
          <div style="width: 100%; height: 34px">
            <div class="image3"></div>
            <div style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.heteroconstant") }}
            </div>
          </div>
          <div class="ycContent">
            <div class="ycsBox">
              <div style="width: 100%; height: 100%">
                <div class="ycTltle">{{ resInfoCount }}</div>
                <div class="heteroTitle">
                  {{
      $t("operatManage.systemMonitoringObj.numberOfExceptions")
    }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="inform_box">
      <div class="content_box">
        <div class="top_box">
          <div style="width: 100%; height: 100%">
@@ -36,21 +166,6 @@
              "
            ></div>
          </div>
          <!-- <div class="Syslabel">
            {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
          </div>
          <div class="details">{{ memInfo.totalMem }}</div> -->
          <!-- -->
          <!-- <div class="Syslabel">
            <span
              >{{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
              {{ memInfo.use }}</span
            >
            <span style="margin-left: 25px"
              >{{ $t('operatManage.systemMonitoringObj.usageRate') }}
              {{ memInfo.usage }}</span
            >
          </div> -->
        </div>
        <div class="bottom_box">
          {{ $t('operatManage.systemMonitoringObj.systemMemory') }}
@@ -79,13 +194,6 @@
          {{ $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">
      <el-tabs v-model="activeName" @tab-click="handleClick">
@@ -131,7 +239,7 @@
      <!-- <p class="title_box">
        {{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
      </p> -->
      <!-- <el-table :data="resInfo" style="width: 100%">
    <!-- <el-table :data="resInfo" style="width: 100%">
        <el-table-column
          prop="id"
          :label="$t('operatManage.systemMonitoringObj.resourceID')"
@@ -154,18 +262,18 @@
        >
        </el-table-column>
      </el-table> -->
      <!-- <div style="margin-top: 10px" class="pagination_box">
    <!-- <div style="margin-top: 10px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
      </div> -->
      </div>
    </div>

    <div class="left">
@@ -202,20 +310,20 @@
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
      </div> -->
    </div>
      </div>
    </div>   -->
  </div>
</template>

<script>
import MyBread from '../../components/MyBread.vue';
import 'echarts-liquidfill';
import MyBread from "../../components/MyBread.vue";
import "echarts-liquidfill";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -224,10 +332,10 @@
  data() {
    //这里存放数据
    return {
      activeName: 'first',
      activeName: "first",
      ws: null,
      tableData: [],
      memInfo: { totalMem: 0, use: 0, usage: 0 },
      memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
      cpuInfo: { cpuSysUsage: 0 },
      resInfo: [],
      resInfoCount: 0,
@@ -246,10 +354,9 @@
      if (this.echartData.length == 7) {
        this.echartData.splice(0, 1);
      }
      this.echartData.push(parseFloat(res.cpuInfo.cpuSysUsage));
      this.lineChart1();

      this.lineChart2(this.memInfo.usage);
      this.echartData.push([" ", parseFloat(res.cpuInfo.cpuSysUsage)]);
      this.lineChart1();
    },
    SetTableData2(res) {
      this.resInfo = res.resInfo;
@@ -265,234 +372,266 @@
    },
    handleClick(tab, event) {
      switch (tab) {
        case 'first':
        case "first":
          break;
        case 'second':
        case "second":
          this.lineChart3();
          break;
        case 'third':
        case "third":
          this.lineChart4();
          break;
        case 'fourth':
        case "fourth":
          this.lineChart5();
          break;
      }
    },
    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, // 不显示坐标轴上的文字
      const valueList = this.echartData.map(function (item) {
        return item[1];
      });

      var option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
          },
        ],
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        title: [],
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["", "", "", "", "", "", ""],
        },
        yAxis: [
          {
            axisLabel: {
              show: false, // 不显示坐标轴上的文字
            },
          },
        ],
        grid: [
          {
            top: "10%",
            bottom: "10%",
            left: "10%",
            right: "10%",
          },
        ],
        series: [
          {
            data: this.echartData,
            type: 'line',
            areaStyle: {},
            type: "line",
            showSymbol: false,
            data: valueList,
            // itemStyle: {
            //   normal: {
            //     color: "#009cff", //改变折线点的颜色
            //     lineStyle: {
            //       color: "#009cff", //改变折线颜色
            //     },
            //   },
            // }
          },
        ],
      };

      let myChart = this.$echarts.init(
        document.getElementById('Sys_cpu_chart')
        document.getElementById("Sys_cpu_chart")
      );
      myChart.setOption(option);
      window.addEventListener('resize', function () {
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    lineChart2(res) {
      var a = res.split('%').join('');
      var a = 0;
      if (res != 0) {
        a = res.split("%").join("");
      }

      let value = parseFloat(a);
      let data = [value, value, value];
      let option = {
        title: {
          text: value + '{a|%}',
          textStyle: {
            fontSize: 15,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: 'black',
            rich: {
              a: {
                fontSize: 15,
              },
            },
          },
          x: 'center',
          y: '35%',
        },
        graphic: [
          {
            type: 'group',
            left: 'center',
      var data = { name: "1111", value: parseFloat(a) / 100 };
      var list = [];
      let value = data.value;
      list.push({ name: data.name, value: data.value });

            children: [
              {
                type: 'text',
                z: 20,
                left: '10',
                top: '50',
                style: {
                  fill: 'black',
                  text: '使用率',
                  font: '20px Microsoft YaHei',
                  fontWeight: '900',
                },
              },
            ],
          },
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            //  shape: 'roundRect',
            data: data,
            backgroundStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(126,147,211, 0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(126,147,211, .25)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(126,147,211, 1)',
                  },
                ],
                globalCoord: false,
              },
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 20,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(69, 73, 240, 0)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(69, 73, 240, .25)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(69, 73, 240, 1)',
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: '#000',
              },
            },
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(58, 71, 212, 0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(31, 222, 225, .2)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(31, 222, 225, 1)',
                  },
                ],
                globalCoord: false,
              },
            },
            label: {
              normal: {
                formatter: '',
              },
            },
          },
        ],
      };

      let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
      myChart1.setOption(option);
      window.addEventListener('resize', function () {
        myChart1.resize();
      });
    },
    lineChart3() {
      var data = [
        { name: '可用资源', value: this.resUseCount.resAbleCount },
        { name: '不可用资源', value: this.resUseCount.resUnableCount },
      ];
      var option = {
      for (let i = 0; i < 2; i++) {
        if (value - 0.1 > 0) {
          value -= 0.1;
          list.push({ name: data.name, value: value });
        }
      }
      var options = {
        // 提示框组件
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
          show: false,
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            show: false,
          },
          formatter: function (value) {
            return value.seriesName + ": " + parseInt(value.value * 100) + "% ";
          },
        },
        series: [
          {
            name: ' ',
            type: 'pie',
            radius: ['40%', '70%'],
            type: "liquidFill",
            name: " ",
            radius: "40%",
            center: ["30%", "30%"],
            shape: "circle",
            phase: 0,
            direction: "right",
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1,
                borderWidth: 0,
                borderColor: "#2bf9ed",
              },
            },
            // 图形样式
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#c5e87e" }, //柱图渐变色
                { offset: 0.5, color: "#2bf9ed" }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
              shadowBlur: 10,
            },
            backgroundStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#2bf9ed" }, //柱图渐变色
                { offset: 0.4, color: "#44C0C1" }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            // 图形上的文本标签
            label: {
              fontSize: 40,
              fontWeight: 600,
              color: "#fff",
            },
            data: list,
          },
          {
            name: "Access From",
            type: "pie",
            radius: ["43%", "50%"],
            center: ["30%", "30%"],
            startAngle: 340,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 0.4,
                name: "Direct",
                itemStyle: {
                  color: "#2bf9ed",
                },
              },
              {
                value: 0.6,
                name: "Direct",
                itemStyle: {
                  color: "rgba(240, 248, 255, 0)",
                },
              },
            ],
            emphasis: {
              disabled: true,
            },
            tooltip: {
              show: false,
            },
          },
        ],
      };
      var dome = document.getElementById("shuiwen")
      if (dome) {
        let myChart1 = this.$echarts.init(dome);
        myChart1.setOption(options);
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
      }

    },
    lineChart3() {
      var data = [
        { name: "可用资源", value: this.resUseCount.resAbleCount },
        { name: "不可用资源", value: this.resUseCount.resUnableCount },
      ];
      var option = {
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小
          },
        },
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
@@ -502,9 +641,9 @@
          },
        ],
      };
      let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
      let myChart2 = this.$echarts.init(document.getElementById("resUseChart"));
      myChart2.setOption(option);
      window.addEventListener('resize', function () {
      window.addEventListener("resize", function () {
        myChart2.resize();
      });
    },
@@ -521,15 +660,15 @@
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
@@ -538,24 +677,24 @@
          },
        },
        xAxis: {
          type: 'category',
          type: "category",
          boundaryGap: false,
          data: data1,
        },
        yAxis: {
          type: 'value',
          type: "value",
        },
        series: [
          {
            name: '',
            type: 'line',
            stack: 'Total',
            name: "",
            type: "line",
            stack: "Total",
            data: data2,
          },
        ],
      };
      let myChart3 = this.$echarts.init(
        document.getElementById('userLoginChart')
        document.getElementById("userLoginChart")
      );
      myChart3.setOption(option);
    },
@@ -569,20 +708,26 @@

      var option = {
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true },
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            type: "category",
            data: data1,
            axisTick: {
              alignWithLabel: true,
@@ -591,51 +736,79 @@
        ],
        yAxis: [
          {
            type: 'value',
            type: "value",
          },
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: data2,
          },
        ],
      };
      let myChart4 = this.$echarts.init(
        document.getElementById('operateCountChart')
        document.getElementById("operateCountChart")
      );
      myChart4.setOption(option);
    },
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == 'object' && obj) {
            return true;
          } else {
            return false;
          }

        } catch (e) {

          return false;
        }
      }

    }

  },
  created() {
    if (Window.ws != null) {
      Window.ws.close();
      Window.ws.onclose = () => {
        console.log('服务器关闭');
        console.log("服务器关闭");
      };
      Window.ws = null;
    }

    Window.ws = new WebSocket(socketUrl);
    Window.ws.option = () => {};
    Window.ws.option = () => { };
    var that = this;
    Window.ws.onmessage = (msg) => {
      // console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
      var data = JSON.parse(msg.data);
      console.log(data);
      if (data.userInfo != undefined) {
        that.SetTableData1(data);
      } else if (data.resInfo != undefined) {
        that.SetTableData2(data);
      } else if (data.operateCount != undefined) {
        that.SetTableData3(data);
      var obj = this.isJSON(msg.data);
      if (obj) {
        var data = JSON.parse(msg.data);
        if (data.userInfo != undefined) {
          that.SetTableData1(data);
        } else if (data.resInfo != undefined) {
          that.SetTableData2(data);
        } else if (data.operateCount != undefined) {
          that.SetTableData3(data);
        }
      }

    };
  },

  mounted() {
    var mywidth = $("#fathershuiWen").width();
    var mysright = $("#fathershuiWen").height();
    var width = mywidth * 1.5 + "px";
    var height = mysright * 1.5 + "px";
    $("#shuiwen").width(width);
    $("#shuiwen").height(height);

    this.lineChart2(0);
  },
};
@@ -643,130 +816,177 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.systemMonitoring_box {
  border-radius: 10px;
  height: 100%;
  height: 98%;
  width: 98%;
  padding: 1%;

  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: 33%;
      height: 100%;

      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: white;
          text-align: left;
          // margin-left: 20px;
        }
        .details {
          font-family: sans-serif;
          font-size: 31px;
          color: white;
          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: white;
        font-size: 14px;
      }
    }
  .table_b .el-table,
  .table_b .el-table /deep/ .el-table__expanded-cell {
    background-color: transparent !important;
  }

  .left {
    box-sizing: border-box;
    padding: 10px;
  .table_b .el-table /deep/ th,
  .table_b .el-table /deep/ tr {
    background-color: transparent !important;
  }

  .content_Box {
    width: 100%;
    height: 37%;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
  }
  .title_box {
    font-weight: 800;
  }
  .pagination_box {
    text-align: center;
  }
  .chart_box {
    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 {
    height: 90%;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .cloumn_Box {
      width: 100%;
      height: 38%;

      display: flex;
      justify-content: space-between;

      .flex_Box {
        width: 30.5%;
        height: 88%;

        border-radius: 5px;
        padding: 1%;

        .image1 {
          width: 46px;
          height: 20px;
          float: left;
          background: url("../../assets/img/systemMonitoring/图层 38.png") no-repeat;
          background-size: 100% 100%;
        }

        .image2 {
          width: 34px;
          height: 34px;
          float: left;
          background: url("../../assets/img/systemMonitoring/图层 37.png") no-repeat;
          background-size: 100% 100%;
        }

        .image3 {
          width: 32px;
          height: 32px;
          float: left;
          background: url("../../assets/img/systemMonitoring/图层 40.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .ycsBox {
        width: 495px;
        height: 182px;
        background: url("../../assets/img/systemMonitoring/图层 39.png") no-repeat;
        background-size: 100% 100%;
        border: 1px;
        display: flex;
        align-items: center;
      }

      .ycContent {
        width: 100%;
        padding: 1%;
        height: 80%;

        display: flex;
        justify-content: center;
      }
    }

    .imageTitle {
      float: left;

      margin-left: 10px;
    }

    .ycTltle {
      width: 100%;
      height: 95%;
      position: relative;
      .input_box {
        position: absolute;
        top: 0;
        left: 0;
      margin-top: 8%;
      font-size: 60px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #009cff;
      text-align: center;
    }

    .heteroTitle {
      width: 100%;
      text-align: center;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;

      line-height: 49px;

      // margin-top: 20px;

      // text-align: center;
    }

    .top_Box1 {
      width: 96%;
      height: 91%;
      margin-top: 2%;
      margin-left: 4%;
      display: flex;
      justify-content: space-between;

      .top_box_left {
        width: 59%;
        height: 100%;
        display: flex;
        justify-content: space-between;

        .left_title {
          width: 48%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .height_title {
            width: 100%;
            height: 48%;

            p {
              margin-top: 3%;
              font-size: 24px;
            }
          }
        }
      }
      #gauge_chart2 {
        width: 49%;

      .top_box_right {
        width: 39%;
        height: 100%;
      }
      #gauge_chart1 {
        width: 49%;
        height: 100%;
    }

    .cloumn_Box1 {
      width: 100%;
      height: 58%;

      display: flex;
      justify-content: space-between;

      .flex_Box1 {
        width: 64%;
        height: 92%;
        padding: 1%;

        border-radius: 5px;
      }
      #gauge_chart3 {
        width: 100%;
        height: 100%;
      }
      #gauge_chart4 {
        width: 100%;
        height: 100%;
      }
      #gauge_chart5 {
        width: 100%;
        height: 100%;
      }
      #line_chart {
        width: 100%;
        height: 100%;

      .flex_Box {
        width: 30.5%;
        height: 92%;

        border-radius: 5px;
        padding: 1%;
      }
    }
  }