代码更新

surprise

2024-03-29 98a2b24c89e81a5aacdcbd6b739fef422adf17dd

 src/views/maintenance/systemMonitoring.vue

@@ -1,120 +1,61 @@
<template>
  <div class="systemMonitoring_box">
    <My-bread :list="[
        `${$t('operatManage.operatManage')}`,
        `${$t('operatManage.systemMonitoring')}`,
      ]"></My-bread>
      `${$t('operatManage.operatManage')}`,
      `${$t('operatManage.systemMonitoring')}`,
    ]"></My-bread>
    <el-divider />
    <div class="content_Box">
      <div class="cloumn_Box1"> 
      <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"
            >
              <el-table
                :data="resInfo"
                style="width: 100%; height: 310px"
              >
                <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>
          <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 :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 :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 :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">
        <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 style="line-height: 32px" class="imageTitle">
              {{ $t("operatManage.systemMonitoringObj.onlinePersonnel") }}
            </div>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            height="90%"
          >
            <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 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">
@@ -122,7 +63,7 @@
          <div style="width: 100%; height: 20px">
            <div class="image1"></div>
            <div class="imageTitle">
              {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }}
              {{ $t("operatManage.systemMonitoringObj.memoryMonitoring") }}
            </div>
          </div>
          <div class="top_Box1">
@@ -131,15 +72,15 @@
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.haveBeenUsed')
                    }}</label>
      $t("operatManage.systemMonitoringObj.haveBeenUsed")
    }}</label>
                  <p>{{ memInfo.use }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.usageRate')
                    }}</label>
      $t("operatManage.systemMonitoringObj.usageRate")
    }}</label>
                  <p>{{ memInfo.usage }}</p>
                </div>
              </div>
@@ -147,23 +88,20 @@
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.totalMemory')
                    }}</label>
      $t("operatManage.systemMonitoringObj.totalMemory")
    }}</label>
                  <p>{{ memInfo.totalMem }}</p>
                </div>
                <div class="height_title">
                  <label>
                    {{
                      $t('operatManage.systemMonitoringObj.remainingMemory')
                    }}</label>
      $t("operatManage.systemMonitoringObj.remainingMemory")
    }}</label>
                  <p>{{ memInfo.remainMem }}</p>
                </div>
              </div>
            </div>
            <div
              id="fathershuiWen"
              class="top_box_right"
            >
            <div id="fathershuiWen" class="top_box_right">
              <div id="shuiwen"></div>
            </div>
          </div>
@@ -171,43 +109,33 @@
        <div class="flex_Box subpage_Div">
          <div>
            <div class="image2"></div>
            <div
              style="line-height: 32px"
              class="imageTitle"
            >
              {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }}
            <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 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 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 style="width: 100%; height: 100%">
                <div class="ycTltle">{{ resInfoCount }}</div>
                <div class="heteroTitle">
                  {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
                  {{
      $t("operatManage.systemMonitoringObj.numberOfExceptions")
    }}
                </div>
              </div>

            </div>
          </div>

        </div>
      </div>

    </div>
    <!-- <div class="inform_box">
      <div class="content_box">
@@ -339,7 +267,7 @@
          @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"
@@ -382,7 +310,7 @@
          @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"
@@ -394,8 +322,8 @@
</template>

<script>
import MyBread from '../../components/MyBread.vue';
import 'echarts-liquidfill';
import MyBread from "../../components/MyBread.vue";
import "echarts-liquidfill";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -404,7 +332,7 @@
  data() {
    //这里存放数据
    return {
      activeName: 'first',
      activeName: "first",
      ws: null,
      tableData: [],
      memInfo: { totalMem: 0, use: 0, usage: 0, remainMem: 0 },
@@ -427,7 +355,7 @@
        this.echartData.splice(0, 1);
      }
      this.lineChart2(this.memInfo.usage);
      this.echartData.push([' ', parseFloat(res.cpuInfo.cpuSysUsage)]);
      this.echartData.push([" ", parseFloat(res.cpuInfo.cpuSysUsage)]);
      this.lineChart1();
    },
    SetTableData2(res) {
@@ -444,15 +372,15 @@
    },
    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;
      }
@@ -467,25 +395,24 @@
        visualMap: [
          {
            show: false,
            type: 'continuous',
            type: "continuous",
            seriesIndex: 0,
          },
        ],
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
            saveAsImage: { show: true },
          },
        },
        title: [],
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
        },
        xAxis: {
          type: 'category',
          type: "category",
          boundaryGap: false,
          data: ['', '', '', '', '', '', ''],
          data: ["", "", "", "", "", "", ""],
        },
        yAxis: [
          {
@@ -496,38 +423,44 @@
        ],
        grid: [
          {
            top: '10%',
            bottom: '10%',
            left: '10%',
            right: '10%',
            top: "10%",
            bottom: "10%",
            left: "10%",
            right: "10%",
          },
        ],
        series: [
          {
            type: 'line',
            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 = 0;
      if (res != 0) {
        a = res.split('%').join('');
        a = res.split("%").join("");
      }

      var data = { name: '1111', value: parseFloat(a) / 100 };
      var data = { name: "1111", value: parseFloat(a) / 100 };
      var list = [];
      let value = data.value;
      list.push({ name: data.name, value: data.value });
@@ -542,45 +475,45 @@
        // 提示框组件
        tooltip: {
          show: false,
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          trigger: "item", // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            show: false,
          },
          formatter: function (value) {
            return value.seriesName + ': ' + parseInt(value.value * 100) + '% ';
            return value.seriesName + ": " + parseInt(value.value * 100) + "% ";
          },
        },
        series: [
          {
            type: 'liquidFill',
            name: ' ',
            radius: '40%',
            center: ['30%', '30%'],
            shape: 'circle',
            type: "liquidFill",
            name: " ",
            radius: "40%",
            center: ["30%", "30%"],
            shape: "circle",
            phase: 0,
            direction: 'right',
            direction: "right",
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1,
                borderWidth: 0,
                borderColor: '#2bf9ed',
                borderColor: "#2bf9ed",
              },
            },
            // 图形样式
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#c5e87e' }, //柱图渐变色
                { offset: 0.5, color: '#2bf9ed' }, //柱图渐变色                 //柱图渐变色
                { 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' }, //柱图渐变色                 //柱图渐变色
                { offset: 0, color: "#2bf9ed" }, //柱图渐变色
                { offset: 0.4, color: "#44C0C1" }, //柱图渐变色                 //柱图渐变色
              ]),
              opacity: 0.5,
            },
@@ -594,15 +527,15 @@
            label: {
              fontSize: 40,
              fontWeight: 600,
              color: '#fff',
              color: "#fff",
            },
            data: list,
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['43%', '50%'],
            center: ['30%', '30%'],
            name: "Access From",
            type: "pie",
            radius: ["43%", "50%"],
            center: ["30%", "30%"],
            startAngle: 340,
            avoidLabelOverlap: false,
            itemStyle: {
@@ -610,13 +543,13 @@
            },
            label: {
              show: false,
              position: 'center',
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
@@ -625,16 +558,16 @@
            data: [
              {
                value: 0.4,
                name: 'Direct',
                name: "Direct",
                itemStyle: {
                  color: '#2bf9ed',
                  color: "#2bf9ed",
                },
              },
              {
                value: 0.6,
                name: 'Direct',
                name: "Direct",
                itemStyle: {
                  color: 'rgba(240, 248, 255, 0)',
                  color: "rgba(240, 248, 255, 0)",
                },
              },
            ],
@@ -647,56 +580,58 @@
          },
        ],
      };
      var dome = document.getElementById("shuiwen")
      if (dome) {
        let myChart1 = this.$echarts.init(dome);
        myChart1.setOption(options);
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
      }

      let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
      myChart1.setOption(options);
      window.addEventListener('resize', function () {
        myChart1.resize();
      });
    },
    lineChart3() {
      var data = [
        { name: '可用资源', value: this.resUseCount.resAbleCount },
        { name: '不可用资源', value: this.resUseCount.resUnableCount },
        { name: "可用资源", value: this.resUseCount.resAbleCount },
        { name: "不可用资源", value: this.resUseCount.resUnableCount },
      ];
      var option = {
        tooltip: {
          trigger: 'item',
          trigger: "item",
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: { show: true }
          }
            saveAsImage: { show: true },
          },
        },
        legend: {
          top: '5%',
          left: 'center',
          top: "5%",
          left: "center",
          textStyle: {
            fontSize: 18, //字体大小
            
          },
        },
        series: [
          {
            name: ' ',
            type: 'pie',
            radius: ['40%', '70%'],
            name: " ",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold',
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
@@ -706,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();
      });
    },
@@ -725,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: {
@@ -742,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);
    },
@@ -773,27 +708,26 @@

      var option = {
        tooltip: {
          trigger: 'axis',
          trigger: "axis",
          axisPointer: {
            type: 'shadow',
            type: "shadow",
          },
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
            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,
@@ -802,29 +736,47 @@
        ],
        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;
    }
@@ -834,29 +786,28 @@
    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"
    var width = mywidth * 1.5 + "px";
    var height = mysright * 1.5 + "px";
    $("#shuiwen").width(width);
    $("#shuiwen").height(height);





    this.lineChart2(0);
  },
@@ -868,76 +819,90 @@
  height: 98%;
  width: 98%;
  padding: 1%;
 

  .table_b .el-table,
  .table_b .el-table /deep/ .el-table__expanded-cell {
    background-color: transparent !important;
  }

  .table_b .el-table /deep/ th,
  .table_b .el-table /deep/ tr {
    background-color: transparent !important;
  }

  .content_Box {
    width: 100%;
    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: 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: 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: url("../../assets/img/systemMonitoring/图层 40.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .ycsBox {
        width: 200px;
        height: 200px;
        background: url("../../assets/img/systemMonitoring/图层 39.png")
          no-repeat;
        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%;
      margin-top: 8%;
@@ -947,19 +912,21 @@
      color: #009cff;
      text-align: center;
    }

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

      line-height: 49px;

      // margin-top: 20px;

      // text-align: center;
    }

    .top_Box1 {
      width: 96%;
      height: 91%;
@@ -967,29 +934,32 @@
      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;
            }
          }
        }
      }

      .top_box_right {
        width: 39%;
        height: 100%;
@@ -1002,25 +972,23 @@

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

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

        border-radius: 5px;
        
      }

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

        border-radius: 5px;
        padding: 1%;
         
      }
    }
  }
  
 
}
</style>