gasInjection-project/src/views/vent/monitorManager/obfurage1Monitor/index.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <a-spin :spinning="loading" />
    <div id="deviceDetail" class="device-detail">
      <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
        <div class="title">KJ-980-F矿用本安型监控分站</div>
        <div class="detail-box">
          <div class="left-box"></div>
          <div class="right-box">
            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
            <div
              ><span class="detail-title">技术参数：</span>
              <span
                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center row">
        <div class="button-box" @click="playAnimation(1)">打开前门</div>
        <div class="button-box" @click="playAnimation(2)">关闭前门</div>
        <div class="button-box" @click="playAnimation(3)">打开后门</div>
        <div class="button-box" @click="playAnimation(4)">关闭后门</div>
        <div class="button-box" @click="playAnimation(5)">打开前后门</div>
        <div class="button-box" @click="playAnimation(6)">关闭前后门</div>
      </div>
      <div class="top-right row">
        <div class="control-type row">
          <div class="control-title">控制模式：</div>
          <a-radio-group v-model:value="selectData.autoRoManual" @change="changeType">
            <a-radio :value="`0`">就地</a-radio>
            <a-radio :value="`1`">远程</a-radio>
          </a-radio-group>
        </div>
        <!-- <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="selectData.runRoRecondition">
            <a-radio :value="`0`">检修</a-radio>
            <a-radio :value="`1`">运行</a-radio>
          </a-radio-group>
        </div> -->
      </div>
    </div>
    <div class="title-text">
      {{ selectData.strname.replace('风门', '快速密闭') }}
    </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 350, scroll)">
      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="实时监测">
            <MonitorTable
              v-if="activeKey === '1'"
              ref="MonitorDataTable"
              class="monitor-table"
              :columns="columns"
              :dataSource="dataSource"
              design-scope="gate-monitor"
              @select-row="getSelectRow"
              :scroll="{ y: scroll.y - 40 }"
              title="风门监测"
              :isShowPagination="true"
            >
              <template #filterCell="{ column, record }">
                <template v-if="record.frontGateOpenCtrl == 1 || record.frontGateOpenCtrl === true">
                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
                    >正在打开</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                </template>
                <template v-else-if="record.frontGateOpenCtrl == 0 || record.frontGateOpenCtrl === false">
                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
                    >正在关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
                    >关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
                    >打开</a-tag
                  >
                </template>
                <template v-if="record.rearGateOpenCtrl == 1 || record.rearGateOpenCtrl === true">
                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
                    >正在打开</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                </template>
                <template v-else-if="record.rearGateOpenCtrl == 0 || record.rearGateOpenCtrl === false">
                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
                    >正在关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
                    >关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
                    >打开</a-tag
                  >
                </template>

                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                  record.warnFlag == 0 ? '正常' : '报警'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                  record.netStatus == '0' ? '断开' : '连接'
                }}</a-tag>
              </template>
            </MonitorTable>
          </a-tab-pane>
          <a-tab-pane key="2" tab="实时曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '2'">
              <DeviceEcharts
                chartsColumnsType="gate_chart"
                xAxisPropType="strname"
                :dataSource="dataSource"
                height="100%"
                :chartsColumns="chartsColumns"
                :device-list-api="list"
                device-type="gate"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item" v-if="activeKey === '3'">
              <HistoryTable columns-type="gate" device-type="gate" designScope="gate-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable
                columns-type="alarm"
                device-type="gate"
                :device-list-api="getTableList"
                designScope="alarm-history"
                :scroll="scroll"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="操作历史">
            <div class="tab-item" v-if="activeKey === '5'">
              <HandlerHistoryTable
                columns-type="operator_history"
                device-type="gate"
                :device-list-api="getTableList"
                designScope="alarm-history"
                :scroll="scroll"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto"> </div>
  <HandleModal
    v-if="!globalConfig?.simulatedPassword"
    :modal-is-show="modalIsShow"
    :modal-title="modalTitle"
    :modal-type="modalType"
    @handle-ok="handleOK"
    @handle-cancel="handleCancel"
  />
</template>

<script setup lang="ts">
  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject } from 'vue';
  import DeviceEcharts from '../comment/DeviceEcharts.vue';
  import MonitorTable from '../comment/MonitorTable.vue';
  import HistoryTable from '../comment/HistoryTable.vue';
  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  import HandleModal from './modal.vue';
  import { mountedThree, addMonitorText, play, destroy, setModelType, initCameraCanvas } from './gate.threejs';
  import { deviceControlApi } from '/@/api/vent/index';
  import { message } from 'ant-design-vue';
  import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
  import { chartsColumns, columns, echartsOption, echartsOption1 } from './gate.data';
  import lodash from 'lodash';
  import { setDivHeight } from '/@/utils/event';
  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  import { useRouter } from 'vue-router';
  import { deviceCameraInit } from '/@/utils/ventutil.ts';
  const globalConfig = inject('globalConfig');

  const { currentRoute } = useRouter();
  const MonitorDataTable = ref();

  const playerRef = ref();

  const activeKey = ref('1'); // tab
  const loading = ref(false);

  const scroll = reactive({
    y: 240,
  });

  const frontDoorIsOpen = ref(false); //前门是否开启
  const backDoorIsOpen = ref(false); //后门是否开启

  const modalIsShow = ref<boolean>(false); // 是否显示模态框
  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
  const modalType = ref(''); // 模态框内容显示类型，设备操作类型

  const selectRowIndex = ref(-1); // 选中行
  const dataSource = ref([]);

  const deviceBaseList = ref([]); // 设备基本信息
  let webRtcServer: any[] = [];

  const tabChange = (activeKeyVal) => {
    activeKey.value = activeKeyVal;
    if (activeKeyVal == 1) {
      nextTick(() => {
        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
      });
    }
  };

  const initData = {
    deviceID: '',
    deviceType: '',
    strname: '',
    frontRearDP: '-', //压差
    sourcePressure: '-', //气源压力
    runRoRecondition: null,
    autoRoManual: null,
    netStatus: '0', //通信状态
    frontGateOpen: '0',
    frontGateClose: '1',
    rearGateOpen: '0',
    rearGateClose: '1',
    fault: '气源压力超限',
    masterComputer: 0,
    frontGateOpenCtrl: false,
    rearGateOpenCtrl: false,
    cameras: [],
  };

  // 监测数据
  const selectData = reactive(lodash.cloneDeep(initData));

  // 获取设备基本信息列表
  function getDeviceBaseList() {
    getTableList({ pageSize: 1000 }).then((res) => {
      deviceBaseList.value = res.records;
    });
  }

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  async function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = await setTimeout(
        async () => {
          const res = await list({ devicetype: 'gate', pagetype: 'normal' });
          if (res.msgTxt && res.msgTxt[0]) {
            dataSource.value = res.msgTxt[0].datalist || [];
            dataSource.value.forEach((data: any) => {
              const readData = data.readData;
              data = Object.assign(data, readData);
            });
            if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
              // 初始打开页面
              if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
                MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
              } else {
                MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
              }
            }
            Object.assign(selectData, dataSource.value[selectRowIndex.value]);
            addMonitorText(selectData);
            monitorAnimation(selectData);
            if (timer) {
              timer = null;
            }
            getMonitor();
          }
        },
        flag ? 0 : 1000
      );
    }
  }

  async function getCamera() {
    const res = await cameraList({ deviceid: selectData['deviceID'] });
    const cameras: [] = res.records || [];
    let cameraAddrs: any[] = [],
      cameraNames: string[] = [];
    if (cameras.length > 0) {
      cameras.forEach((item) => {
        cameraAddrs.push({ name: item['name'], addr: item['addr'] });
      });
    }
    if (cameraNames.length > 0) {
      // 请求接口从装备院拿数据
      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames });
      for (let i = 0; i < addrs.length; i++) {
        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
      }
    }
    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer);
    webRtcServer = obj.webRtcServerList;
    const playerDoms = obj.playerDoms;
    // 注意前后门适应需要对应 //[0] 后门 [1]前门
    await initCameraCanvas(...playerDoms);
  }

  // 切换检测数据
  async function getSelectRow(selectRow, index) {
    if (!selectRow) return;
    loading.value = true;
    selectRowIndex.value = index;

    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
    Object.assign(selectData, initData, selectRow, baseData);
    isFrontOpenRunning = false; //开关门动作是否在进行
    isFrontCloseRunning = false; //开关门动作是否在进行
    isRearOpenRunning = false; //开关门动作是否在进行
    isRearCloseRunning = false; //开关门动作是否在进行
    frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
    rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
    // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
    let type;
    if (selectData.deviceType == 'gate_ss') {
      type = 'fm2';
    } else {
      type = 'fm1';
    }
    setModelType(type).then(async () => {
      addMonitorText(selectData);
      loading.value = false;
    });
    await getCamera();
  }

  // 播放动画
  function playAnimation(handlerState) {
    switch (handlerState) {
      case 1: // 打开前门
        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
          modalTitle.value = '打开前门';
          modalType.value = '1';
          modalIsShow.value = true;
        } else {
          message.warning('前门已经打开或正在打开,请勿重新操作');
        }
        break;
      case 2: // 关闭前门
        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
          modalTitle.value = '关闭前门';
          modalType.value = '2';
          modalIsShow.value = true;
        } else {
          message.warning('前门已经关闭或正在关闭,请勿重新操作');
        }
        break;
      case 3: // 打开后门
        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
          modalTitle.value = '打开后门';
          modalType.value = '3';
          modalIsShow.value = true;
        } else {
          message.warning('后门已经打开或正在打开,请勿重新操作');
        }
        break;
      case 4: // 关闭后门
        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
          modalTitle.value = '关闭后门';
          modalType.value = '4';
          modalIsShow.value = true;
        } else {
          message.warning('后门已经关闭或正在关闭,请勿重新操作');
        }
        break;
      case 5: // 打开前后门
        if (
          selectData.frontGateOpen == '0' &&
          selectData.frontGateClose == '1' &&
          selectData.rearGateOpen == '0' &&
          selectData.rearGateClose == '1'
        ) {
          modalTitle.value = '打开前后门';
          modalType.value = '5';
          modalIsShow.value = true;
        } else {
          message.warning('前后门已经打开或正在打开,请勿重新操作');
        }
        break;
      case 6: // 关闭前后门
        if (
          selectData.frontGateOpen == '1' &&
          selectData.frontGateClose == '0' &&
          selectData.rearGateOpen == '1' &&
          selectData.rearGateClose == '0'
        ) {
          modalTitle.value = '关闭前后门';
          modalType.value = '6';
          modalIsShow.value = true;
        } else {
          message.warning('前后门已经关闭或正在关闭,请勿重新操作');
        }
        break;
    }

    if (globalConfig?.simulatedPassword) {
      handleOK('', handlerState + '');
    }
  }

  function handleOK(passWord, handlerState) {
    // if (passWord !== '123456') {
    //   message.warning('密码不正确，请重新输入');
    //   return;
    // }

    if ((isFrontOpenRunning || isFrontCloseRunning) && (handlerState == 2 || handlerState == 1 || handlerState == 5 || handlerState == 6)) {
      return;
    }

    if ((isRearOpenRunning || isRearCloseRunning) && (handlerState == 3 || handlerState == 4 || handlerState == 5 || handlerState == 6)) {
      return;
    }

    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: '',
      value: null,
      password: passWord,
      masterComputer: selectData.masterComputer,
    };
    let handler = () => {};

    switch (handlerState) {
      case '1': // 打开前门
        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
          handler = () => {
            frontDoorIsOpen.value = true;
          };
          data.paramcode = 'frontGateOpen_S';
        }
        break;
      case '2': // 关闭前门
        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
          handler = () => {
            frontDoorIsOpen.value = false;
          };
          data.paramcode = 'frontGateClose_S';
        }
        break;
      case '3': // 打开后门
        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
          handler = () => {
            backDoorIsOpen.value = true;
          };
          data.paramcode = 'rearGateOpen_S';
        }
        break;
      case '4': // 关闭后门
        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
          handler = () => {
            backDoorIsOpen.value = false;
          };
          data.paramcode = 'rearGateClose_S';
        }
        break;
      case '5': // 打开前后门
        if (
          selectData.frontGateOpen == '0' &&
          selectData.frontGateClose == '1' &&
          selectData.rearGateOpen == '0' &&
          selectData.rearGateClose == '1'
        ) {
          handler = () => {
            frontDoorIsOpen.value = true;
            backDoorIsOpen.value = true;
          };
          data.paramcode = 'sameTimeOpen';
        }
        break;
      case '6': // 关闭前后门
        if (
          selectData.frontGateOpen == '1' &&
          selectData.frontGateClose == '0' &&
          selectData.rearGateOpen == '1' &&
          selectData.rearGateClose == '0'
        ) {
          handler = () => {
            frontDoorIsOpen.value = false;
            backDoorIsOpen.value = false;
          };
          data.paramcode = 'sameTimeClose';
        }
        break;
    }
    if (data.paramcode) {
      deviceControlApi(data).then((res) => {
        // 模拟时开启
        if (res.success) {
          modalIsShow.value = false;
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！');
          } else {
            message.success('指令已下发成功！');
          }
        }
      });
    }
  }

  /** 开关门动画调用 */
  let isFrontOpenRunning = false; //开关门动作是否在进行
  let isFrontCloseRunning = false; //开关门动作是否在进行
  let isRearOpenRunning = false; //开关门动作是否在进行
  let isRearCloseRunning = false; //开关门动作是否在进行
  let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
  let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
  function monitorAnimation(selectData) {
    const timeScale = 0.003;
    if (selectData.frontGateOpenCtrl == 1 || selectData.frontGateOpenCtrl === true) {
      isFrontCloseRunning = false;
      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
        //打开前门1

        if (!isFrontOpenRunning) {
          frontDoorIsOpen.value = true;
          backDoorIsOpen.value = true;
          isFrontOpenRunning = true;
          play(1, timeScale);
          frontDeviceState = 1;
        }
      }
      if (selectData.frontGateOpen == 1 && selectData.frontGateClose == 0) {
        isFrontOpenRunning = false;
        if (frontDeviceState != 1) {
          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
          frontDeviceState = 1;
          frontDoorIsOpen.value = false;
          backDoorIsOpen.value = true;
        }
      }
    } else {
      if (selectData.frontGateOpen == 0 && selectData.frontGateClose == 0) {
        //关闭前门
        isFrontOpenRunning = false;
        if (!isFrontCloseRunning) {
          isFrontCloseRunning = true;
          play(2, timeScale);
          frontDeviceState = 2;
          frontDoorIsOpen.value = true;
          backDoorIsOpen.value = true;
        }
      }
      if (selectData.frontGateClose == 1 && selectData.frontGateOpen == 0) {
        isFrontCloseRunning = false;
        if (frontDeviceState == 1) {
          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
          frontDeviceState = 2;
          frontDoorIsOpen.value = false;
          // backDoorIsOpen.value = false
        }
      }
    }

    if (selectData.rearGateOpenCtrl == 1 || selectData.rearGateOpenCtrl === true) {
      isRearCloseRunning = false;
      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
        //打开后门
        if (!isRearOpenRunning) {
          isRearOpenRunning = true;
          play(3, timeScale);
          rearDeviceState = 3;
          frontDoorIsOpen.value = true;
          backDoorIsOpen.value = true;
        }
      }
      if (selectData.rearGateOpen == 1 && selectData.rearGateClose == 0) {
        isRearOpenRunning = false;

        if (rearDeviceState != 3) {
          rearDeviceState = 3;
          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
          backDoorIsOpen.value = false;
          frontDoorIsOpen.value = true;
        }
      }
    } else {
      if (selectData.rearGateOpen == 0 && selectData.rearGateClose == 0) {
        //关闭后门
        isRearOpenRunning = false;
        if (!isRearCloseRunning) {
          isRearCloseRunning = true;
          play(4, timeScale);
          rearDeviceState = 4;
          frontDoorIsOpen.value = true;
          backDoorIsOpen.value = true;
        }
      }
      if (selectData.rearGateClose == 1 && selectData.rearGateOpen == 0) {
        isRearCloseRunning = false;
        if (rearDeviceState == 3) {
          rearDeviceState = 4;
          import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
          backDoorIsOpen.value = false;
        }
      }
    }

    // console.log('frontGateOpen:', selectData.frontGateOpen, '  frontGateClose:', selectData.frontGateClose, ' rearGateOpen:', selectData.rearGateOpen, '  rearGateClose:', selectData.rearGateClose, '  frontGateOpenCtrl:', selectData.frontGateOpenCtrl, '  rearGateOpenCtrl:', selectData.rearGateOpenCtrl)
  }

  function handleCancel() {
    modalIsShow.value = false;
    modalTitle.value = '';
    modalType.value = '';
  }

  // 远程、就地切换
  function changeType() {
    const data = {
      deviceid: selectData.deviceID,
      devicetype: selectData.deviceType,
      paramcode: 'autoRoManualControl',
      value: selectData.autoRoManual,
    };
    deviceControlApi(data).then(() => {
      if (globalConfig.History_Type == 'remote') {
        message.success('指令已下发至生产管控平台成功！');
      } else {
        message.success('指令已下发成功！');
      }
    });
  }

  onMounted(async () => {
    loading.value = true;
    mountedThree().then(async () => {
      await getMonitor(true);
      loading.value = false;
    });
  });

  onBeforeUnmount(() => {
    getDeviceBaseList();
  });

  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
    destroy();
    if (webRtcServer.length > 0) {
      webRtcServer.forEach((item) => {
        item.disconnect();
      });
    }
  });
</script>

<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  .scene-box {
    .bottom-tabs-box {
      height: 350px;
    }
  }
  .button-box {
    border: none !important;
    height: 34px !important;

    &:hover {
      background: linear-gradient(#2cd1ff55, #1eb0ff55) !important;
    }

    &::before {
      height: 27px !important;
      background: linear-gradient(#1fa6cb, #127cb5) !important;
    }

    &::after {
      top: 35px !important;
    }
  }

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    height: 100%;
  }

  ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4288a444;
  }
</style>