三个树

lxl

2022-10-13 f75823de21e1f276bc50e0c96577bf017be1efa5

 src/views/maintenance/systemMonitoring.vue

@@ -10,174 +10,178 @@
    <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 style="width: 100%; height: 100%">
            <div
              style="
                width: 30%;
                height: 100%;

                float: left;
                margin-left: 20%;
              "
            >
              <div class="Syslabel">
                <p style="line-height: 25px">
                  {{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
                  {{ memInfo.use }}
                </p>
                <br />
                <p style="line-height: 25px">
                  {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
                  {{ memInfo.totalMem }}
                </p>
              </div>
            </div>
            <div
              id="shuiwen"
              style="
                width: 40%;
                height: 100%;

                float: left;
              "
            ></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')}}</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 class="Syslabel">
            {{ $t('operatManage.systemMonitoringObj.CPUusage') }}
          </div>
          <div class="details">{{ cpuInfo.cpuSysUsage }}</div>
          <div id="Sys_cpu_chart"></div>
        </div>
        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.CPUsystemUsage')}}</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 class="Syslabel">
            {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
          </div>
          <div class="details">{{ resInfoCount }}</div>
        </div>
        <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.numberOfAbnormalSystems')}}</div>
        <div class="bottom_box">
          {{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
        </div>
      </div>
      <div class="content_box">
      <!-- <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>
    <div class="chart_box">
      <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>
      <p class="title_box">
        {{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
      </p>
      <el-table :data="resInfo" style="width: 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 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-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
      </div> -->
    </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">
        <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 class="left">
      <p class="title_box">
        {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
      </p>
      <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 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-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="4"
        >
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import MyBread from "../../components/MyBread.vue";
import MyBread from '../../components/MyBread.vue';
import 'echarts-liquidfill';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
@@ -186,409 +190,240 @@
  data() {
    //这里存放数据
    return {
      formInline: {
        user: "",
        region: "",
      },
      activeName: "first",
      currentPage4: 1,
      tableData: [
        {
          date: "2022-08-03",
          name: "test",
          servicecatalog: "业务图层",
          visitTimes: "12",
          state: "不可用",
        },
        {
          date: "2022-08-03",
          name: "cs9",
          servicecatalog: "业务图层",
          visitTimes: "7",
          state: "不可用",
        },
        {
          date: "2022-08-03",
          name: "test1",
          servicecatalog: "业务图层",
          visitTimes: "5",
          state: "不可用",
        },
        {
          date: "2022-08-03",
          name: "cs3",
          servicecatalog: "业务图层",
          visitTimes: "8",
          state: "不可用",
        },
      ],
      ws: null,
      tableData: [],
      memInfo: { totalMem: 0, use: 0, usage: 0 },
      cpuInfo: { cpuSysUsage: 0 },
      resInfo: [],
      resInfoCount: 0,
      echartData: [],
    };
  },
  //方法集合
  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} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    gaugeChart1() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "20%",
          orient: "vertical",
        },
        series: [
          {
            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: function (colors) {
                  var colorList = ["#d3e9af", "#ed9678"];
                  return colorList[colors.dataIndex];
                },
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("gauge_chart1"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    gaugeChart2() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "20%",
          orient: "vertical",
        },
        series: [
          {
            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: function (colors) {
                  var colorList = ["#d3e9af", "#ed9678"];
                  return colorList[colors.dataIndex];
                },
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("gauge_chart2"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    barChart() {
      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_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]));
    SetTableData1(res) {
      this.tableData = res.userInfo;
      this.memInfo = res.memInfo;
      this.cpuInfo = res.cpuInfo;
      if (this.echartData.length == 7) {
        this.echartData.splice(0, 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,
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("line_chart"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      this.echartData.push(parseFloat(res.cpuInfo.cpuSysUsage));
      this.lineChart1();
      console.log(this.memInfo.usage);
      this.lineChart2(this.memInfo.usage);
    },
    SetTableData2(res) {
      this.resInfo = res.resInfo;
      this.resInfoCount = res.resInfo.length;
    },
    lineChart1() {
      let option = {
        grid: {
          top: 0,
          left: "0%",
          right: "4%",
          bottom: "0%",
          left: '0%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          trigger: 'axis',
        },
        xAxis: {
          type: "category",
          type: 'category',
          boundaryGap: false,
          data: ["", "", "", "", "", "", ""],
          data: ['', '', '', '', '', '', ''],
        },
        yAxis: {
          type: "value",
          type: 'value',
          axisLabel: {
            show: false, // 不显示坐标轴上的文字
          },
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            data: this.echartData,
            type: 'line',
            areaStyle: {},
          },
        ],
      };
      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();
      });
    },
    handleSelectionChange() {},
    lineChart2(res) {
      var a = res.split('%').join('');
      console.log(a);
      let value = parseFloat(a);
      let data = [value, value, value];
      let option = {
        title: {
          text: value + '{a|%}',
          textStyle: {
            fontSize: 15,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#00FFFF',
            rich: {
              a: {
                fontSize: 15,
              },
            },
          },
          x: 'center',
          y: '35%',
        },
        graphic: [
          {
            type: 'group',
            left: 'center',

            children: [
              {
                type: 'text',
                z: 20,
                left: '10',
                top: '50',
                style: {
                  fill: '#00FFFF',
                  text: '使用率',
                  font: '14px Microsoft YaHei',
                },
              },
            ],
          },
        ],
        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(68, 145, 253, 0)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(68, 145, 253, .25)',
                  },
                  {
                    offset: 0,
                    color: 'rgba(68, 145, 253, 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 () {
        myChart.resize();
      });
    },
  },
  created() {},
  created() {
    if (Window.ws != null) {
      Window.ws.close();
      Window.ws.onclose = () => {
        console.log('服务器关闭');
      };
      Window.ws = null;
    }
    Window.ws = new WebSocket('ws://192.168.20.55:12316/ws');
    Window.ws.option = () => {};
    var that = this;
    Window.ws.onmessage = (msg) => {
      // console.log('来自服务器端的数据：' + msg.data); //监听接受来自服务端的信息
      var data = JSON.parse(msg.data);

      if (data.resInfo == undefined) {
        that.SetTableData1(data);
      } else {
        that.SetTableData2(data);
      }
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.lineChart();
      this.lineChart1();
      this.barChart();
      this.barChart1();
      this.gaugeChart1();
      this.gaugeChart2();
    });
    this.lineChart2(0);
  },
};
</script>
@@ -612,7 +447,7 @@
      box-sizing: border-box;
      padding: 10px;
      padding-top: 30px;
      width: 24%;
      width: 33%;
      height: 100%;
      background: #fff;
      border-radius: 5px;
@@ -653,32 +488,16 @@
      }
    }
  }
  .table_box {
    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);
    }
  .left {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    height: 37%;
    background: #fff;
    border-radius: 5px;
    border: 1px solid rgb(202, 201, 204);
    overflow: auto;
  }
  .title_box {
    font-weight: 800;
@@ -708,7 +527,7 @@
      width: 100%;
      height: 95%;
      position: relative;
      .input_box{
      .input_box {
        position: absolute;
        top: 0;
        left: 0;