gasInjection-project/src/views/vent/monitorManager/gateMonitor/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 }}
    </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" columnsType="gate_monitor"
              :dataSource="dataSource" design-scope="gate-monitor" @selectRow="getSelectRow" :scroll="{ y: scroll.y - 40 }" title="风门监测"
              :isShowPagination="true">
              <template #filterCell="{ column, record }">
                <template v-if="column.dataIndex === 'frontGateOpen'">
                  <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 == 1 && record.frontGateClose == 0"
                    color="default">开到位</a-tag>
                  <a-tag
                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1"
                    color="default">关到位</a-tag>
                </template>
                <!-- <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 ? 'default' : '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" :device-list-api="getTableList"
                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, 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: 230
})

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 => {
      if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
        cameraNames.push(item['name'])
      } else {
        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;
          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(() => {
    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>