<template>
  <div id="ZHRQ">
    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <div class="ComBox LeftBox1_1">
        <div class="Box_header">管道风险评估</div>
        <div class="Box_Body">
          <div class="TJListBox">
            <div class="TJList TJList_RQ" @click="TuChengClick(0)">
              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png" alt="" />
              <span class="TJListName">燃气管道</span>
              <span class="TJListValue">4549km</span>
            </div>
            <div class="TJList TJList_GZ">
              <img class="TJListImg" src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png" alt="" />
              <span class="TJListName">需改造</span>
              <span class="TJListValue">1922km</span>
            </div>
          </div>
          <div class="RQ_EchartsBox">
            <div class="ClickDiv1" @click="TuChengClick(1)"></div>
            <div class="ClickDiv2" @click="TuChengClick(2)"></div>
            <div class="ClickDiv3" @click="TuChengClick(3)"></div>
            <div class="ClickDiv4" @click="TuChengClick(4)"></div>
          </div>
        </div>
      </div>
      <div class="ComBox LeftBox1_2">
        <div class="Box_header">风险监测</div>
        <div class="Box_Body">
          <div class="TJListBox">
            <div class="TJList2" @click="showIndexOver()">
              <span class="TJList2Name">指标超标</span>
              <span class="TJList2Value">10</span>
            </div>
            <div class="TJList2" @click="showIndexWarning()">
              <span class="TJList2Name">预警站点数</span>
              <span class="TJList2Value">1</span>
            </div>
          </div>
          <div class="TableChange">
            <div
              class="TableChangeList"
              :class="AllData.TableChangeIndex == item.id ? 'TableCheck' : ''"
              v-for="item in AllData.ChangeData"
              @click="AllData.TableChangeIndex = item.id"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 弹性盒子 -->
          <div class="TableBox">
            <div class="tableHeader">
              <span class="tableHeaderList tableList1">指标</span>
              <span class="tableHeaderList tableList2">数值</span>
              <span class="tableHeaderList tableList3">状态</span>
              <span class="tableHeaderList tableList4">操作</span>
            </div>
            <div class="tableBody">
              <div class="tableBodyList" v-for="item in AllData.FXJCData">
                <span class="tableBodyList_span1" @click="FengXianClick(item)">{{ item.zb }}</span>
                <span class="tableBodyList_span2" @click="FengXianClick(item)"
                  >{{ item.sz }}
                  <el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
                  <el-icon v-else color="#f54444" size="14">
                    <Bottom />
                  </el-icon>
                </span>
                <span class="tableBodyList_span3" :class="item.zt == 0 ? 'YJClass' : ''">{{
                  item.zt == 0 ? '预警' : '正常'
                }}</span>
                <span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
              </div>
            </div>
            <div class="tableFoot">更新时间：2024-09-27 10:00</div>
          </div>
        </div>
      </div>
      <div class="ComBox LeftBox1_3">
        <div class="Box_header">预警统计</div>
        <div class="Box_Body">
          <div class="TableChange2">
            <div
              class="TableChangeList2"
              :class="AllData.YJChangeIndex == item.id ? 'TableCheck2' : ''"
              v-for="item in AllData.YJChangeData"
              @click="initEcharts(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
          <div id="YJEchartsBox"></div>
        </div>
      </div>
    </div>
    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
      <div class="ComBox RightBox1_1">
        <div class="Box_header">辅助决策</div>
        <div class="Box_Body">
          <div class="JCListBox" v-for="item in AllData.JCData">
            <div class="JCListBox_List">
              <span class="JCListBox_List_label">风险区域:</span>
              <span class="JCListBox_List_value">{{ item.qy }}</span>
            </div>
            <div class="JCListBox_List">
              <span class="JCListBox_List_label">风险特征:</span>
              <span class="JCListBox_List_value">{{ item.tz }}</span>
            </div>
            <div class="JCListBox_List">
              <span class="JCListBox_List_label">历史事件:</span>
              <span class="JCListBox_List_value">{{ item.sj }}</span>
            </div>
            <div class="JCListBox_List">
              <span class="JCListBox_List_label">问题研判:</span>
              <span class="JCListBox_List_value color_red">{{ item.yp }}</span>
            </div>
            <div class="JCListBox_List JCListBox_List_BTN">
              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="GongDanPaiFa(item)"
                >工单派发</el-button
              >
              <el-button style="background: #03b6a0; color: white; border: none" size="small" @click="XianChangLianXian(item)"
                >现场联线</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="ComBox RightBox1_2">
        <div class="Box_header">巡查反馈</div>
        <div class="Box_Body">
          <div class="FK_headerBox">
            <div class="FK_headerBox_list" @click="dealOrNoDeal(1)"><span class="FK_headerBox_list_colorBox1"></span> 未处理</div>
            <div class="FK_headerBox_list" @click="dealOrNoDeal(2)"><span class="FK_headerBox_list_colorBox2"></span> 已处理</div>
          </div>
          <div class="FK_bodyBox">
            <div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
              <span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{ item.name }}</span>
              <div class="FK_BigBox">
                <div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
                <div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
      <div class="TopTableHeader">
        <span class="TopTableListSpan TopTableListSpan1">时间</span>
        <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
        <span class="TopTableListSpan TopTableListSpan3">地点</span>
        <span class="TopTableListSpan TopTableListSpan4">状态</span>
        <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
        <span class="TopTableListSpan TopTableListSpan6">督办</span>
      </div>
      <!-- <div class="TopTableBody"> -->
      <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
        <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
          <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
          <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
          <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
          <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
          <span class="TopTableListSpan TopTableListSpan6">
            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
            <img
              class="TopTableListSpanImg"
              src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
              alt=""
              @click="XianChangLianXian(item)"
            />
          </span>
        </div>
      </Vue3SeamlessScroll>
      <!-- </div> -->
    </div>
    <div :class="['bottomBox', 'animate__animated', showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig']">
      <div class="TopTableHeader">
        <span class="TopTableListSpan TopTableListSpan1">指挥中心</span>
        <span class="TopTableListSpan TopTableListSpan2">动态</span>
        <span class="TopTableListSpan TopTableListSpan3">时间</span>
        <span class="TopTableListSpan TopTableListSpan4">指令状态</span>
      </div>
      <Vue3SeamlessScroll :list="AllData.bottomTableData" :singleHeight="34" :hover="true" class="TopTableBody">
        <div class="TopTableBody_list" v-for="item in AllData.bottomTableData">
          <span class="TopTableListSpan TopTableListSpan1">{{ item.zhzx }}</span>
          <span class="TopTableListSpan TopTableListSpan2">{{ item.dt }}</span>
          <span class="TopTableListSpan TopTableListSpan3">{{ item.sj }}</span>
          <span class="TopTableListSpan TopTableListSpan4">{{ item.zlzt }}</span>
        </div>
      </Vue3SeamlessScroll>
    </div>

    <div class="IssueWarning" @click="WarningClick">发布预警</div>
  </div>
</template>

<script setup name="ZHRQ">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from 'vue';

import * as echarts from 'echarts';
import bus from '@/bus';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import sheBeiLost from '@/assets/sheBeiLost.json';
import xiaXian from '@/assets/xiaXian.json';
import yiBian from '@/assets/yiBian.json';
import zaWuDuiFang from '@/assets/zaWuDuiFang.json';
import rq_QiTa from '@/assets/rq_QiTa.json';
import no_sheBeiLost from '@/assets/no_sheBeiLost.json';
import no_xiaXian from '@/assets/no_xiaXian.json';
import no_yiBian from '@/assets/no_yiBian.json';
import no_zaWuDuiFang from '@/assets/no_zaWuDuiFang.json';
import no_rq_QiTa from '@/assets/no_rq_QiTa.json';
import yanAnRQoverindex from '@/assets/yanAnRQoverindex.json';
import yanAnWarring from '@/assets/yanAnWarring.json';

const AllData = reactive({
  xunChaStatic: null,
  xunChaLayers: [
    'alreadyDeal_DF',
    'alreadyDeal_DS',
    'alreadyDeal_XX',
    'alreadyDeal_YB',
    'alreadyDeal_QT',
    'noDeal_DF',
    'noDeal_DS',
    'noDeall_XX',
    'noDeal_YB',
    'noDeal_QT',
  ],
  ChangeData: [
    {
      name: '枣园',
      id: 1,
    },
    {
      name: '杨家湾',
      id: 2,
    },
    {
      name: '丰富川',
      id: 3,
    },
  ],
  TableChangeIndex: 1,
  // 风险监测
  FXJCData: [
    {
      zb: '甲烷浓度',
      sz: '3%',
      szzt: true,
      zt: 0, //0预警 1 正常
      value: 'JWND',
    },
    {
      zb: '压力',
      sz: '5MPa',
      szzt: false,
      zt: 1, //0预警 1 正常
      value: 'YL',
    },
    {
      zb: '温度',
      sz: '25C°',
      szzt: true,
      zt: 1, //0预警 1 正常
      value: 'WD',
    },
  ],
  YJChangeData: [
    {
      name: '综合',
      id: 1,
    },
    {
      name: '压力',
      id: 2,
    },
    {
      name: '温度',
      id: 3,
    },
  ],
  YJChangeIndex: 1,
  //辅助决策
  JCData: [
    {
      qy: '宝塔区凤凰山街道二道街',
      tz: '压力监测异常波动',
      sj: 5,
      yp: '设施故障',
      value: '001', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
    },
    {
      qy: '宝塔区凤凰山街道二道街',
      tz: '燃气管道压力过大',
      sj: 5,
      yp: '燃气爆管风险',
      value: '002',
    },
    {
      qy: '宝塔区凤凰山街道二道街',
      tz: '高峰期流量持续降低',
      sj: 4,
      yp: '燃气泄漏风险',
      value: '003',
    },
  ],
  // 巡查反馈
  XCFKData: [
    {
      name: '堆放杂物',
      num1: 20,
      num2: 80,
    },
    {
      name: '设备丢失',
      num1: 12,
      num2: 88,
    },
    {
      name: '下陷',
      num1: 32,
      num2: 68,
    },
    {
      name: '异变',
      num1: 30,
      num2: 70,
    },
    {
      name: '其他',
      num1: 20,
      num2: 80,
    },
  ],
  // 顶部表格数据
  TopTableData: [
    {
      sj: '2024-09-26 10:00:29',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
    {
      sj: '2024-09-27 16:10:248',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
    {
      sj: '2024-09-26 10:00:29',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
    {
      sj: '2024-09-27 16:10:248',
      mx: '燃气常规检查发现泄漏',
      dd: '宝塔区凤凰山街道二道街',
      zt: 0, //0未处理 1已处理
      dw: '延安市燃气总公司',
      value: null,
    },
  ],
  // 底部表格数据
  bottomTableData: [
    {
      zhzx: '预警发布',
      dt: '启动预警并通知成员单位',
      sj: '10-20 08:30',
      zlzt: '预警下发给城管局各单位，燃气供应处',
    },
    {
      zhzx: '预警启动',
      dt: '起草燃气安全预警应急行动',
      sj: '10-20 07:00',
      zlzt: '起草了预警通知',
    },
  ],
  timer: null,
});
// 预警统计echarts实例
const myChart = shallowRef(null);
//面板展开收起
const showPanel = ref(true);
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
// 初始化预警统计的Echarts
const initEcharts = id => {
  AllData.YJChangeIndex = id;
  let Data1 = [];
  let Data2 = [];
  if (AllData.YJChangeIndex == 1) {
    Data1 = [6, 2, 1, 5, 7, 6, 3];
    Data2 = [16, 7, 8, 12, 16, 13, 12];
  } else if (AllData.YJChangeIndex == 2) {
    Data1 = [2, 3, 8, 3, 2, 1, 4];
    Data2 = [7, 16, 13, 16, 12, 8, 12];
  } else {
    Data1 = [6, 4, 3, 5, 8, 3, 8];
    Data2 = [8, 12, 16, 13, 16, 7, 12];
  }
  if (!!AllData.timer) {
    clearTimeout(AllData.timer);
  }
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  myChart.value = echarts.init(document.getElementById('YJEchartsBox'));
  myChart.value.off('click');
  myChart.value.setOption({
    color: ['#18A7F2', '#1AF7AA'],
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '30%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      data: ['预警次数', '持续时长'],
      textStyle: {
        color: '#fffd', // 图例文字颜色
      },
      x: '40',
      y: '10',
    },
    xAxis: [
      {
        type: 'category',
        data: ['今日', '09/27', '09/26', '09/25', '09/24', '09/23', '09/22'],
        axisPointer: {
          type: 'shadow',
        },
        textStyle: {
          color: '#EBFEFF',
        },
        axisLine: {
          lineStyle: {
            color: '#EBFEFF',
          },
        },
        // boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '预警次数',
        min: 0,
        max: 12,
        interval: 2,
        axisLabel: {
          formatter: '{value}',
        },
        axisLine: {
          lineStyle: {
            color: '#AAC1CF',
          },
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#184E5A'],
          },
        },
      },
      {
        type: 'value',
        name: '持续时长',
        min: 0,
        max: 30,
        interval: 5,
        axisLabel: {
          formatter: '{value}',
        },
        axisLine: {
          lineStyle: {
            color: '#AAC1CF',
          },
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#184E5A'],
          },
        },
      },
    ],
    series: [
      {
        name: '预警次数',
        type: 'bar',
        barWidth: '10px',
        showBackground: true,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 次';
          },
        },
        itemStyle: {
          // borderRadius: 10, // 统一设置四个角的圆角大小
          borderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
        },
        data: Data1,
      },
      {
        name: '持续时长',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + 'min';
          },
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#1AF7AA',
            },
            {
              offset: 1,
              color: '#1AF7AA00',
            },
          ]),
        },

        data: Data2,
      },
    ],
  });
  myChart.value.on('click', param => {
    console.log(param);
    let data = {
      title: '风险监测',
      comIDs: ['RQ_FengXianJianCe'],
    };
    bus.emit('publicDialog', data);
    let a = {
      value: '全部',
      endTime: '2024-10-05',
    };
    setTimeout(() => {
      bus.emit('getDataListFxjc', a);
    }, 500);
  });

  animateChart();
};

const animateChart = () => {
  let length = 7;
  let i = 0;
  AllData.timer = setInterval(() => {
    i++;
    if (i == length) i = 0;
    myChart.value.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: i,
    });
  }, 2000);
};
// 动态计算盒子的宽度
const getWidth = (item, num) => {
  let widthNum = 0;
  if (num == 1) {
    widthNum = (item.num1 / (item.num1 + item.num2)) * 100;
  } else {
    widthNum = (item.num2 / (item.num1 + item.num2)) * 100;
  }
  return `width:${widthNum}%`;
};
// 工单派发
const GongDanPaiFa = item => {
  console.log(item);
  let data = {
    title: item.qy,
    comIDs: ['gdpf'],
    getSiteId: item.value,
  };
  bus.emit('publicDialog', data);
};
// // 风险
// const FengXianClick = (item) => {
//   console.log(item);
//   let data = {
//     title: item.zb + " 风险监测",
//     comIDs: ["RQ_FengXianJianCe"],
//   };
//   bus.emit("publicDialog", data);
// };
// 风险监测派发
const PaiFa = item => {
  console.log(item);
  let data = {
    title: '智慧外呼',
    comIDs: ['RQ_ZhiHuiWaiHu'],
    getSiteId: item.value,
  };
  bus.emit('publicDialog', data);
};
//巡查反馈处理、未处理
const dealOrNoDeal = item => {
  AllData.xunChaStatic = item;
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  bus.emit('removeMapDatas', ['warning_monitor']);
  if (item == 1) {
    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
    bus.emit('removeMapDatas', AllData.xunChaLayers);
    bus.emit('setGeoJSON', { json: zaWuDuiFang, key: 'alreadyDeal_DF' });
    bus.emit('setGeoJSON', { json: sheBeiLost, key: 'alreadyDeal_DS' });
    bus.emit('setGeoJSON', { json: xiaXian, key: 'alreadyDeal_XX' });
    bus.emit('setGeoJSON', { json: yiBian, key: 'alreadyDeal_YB' });
    bus.emit('setGeoJSON', { json: rq_QiTa, key: 'alreadyDeal_QT' });
    selectedLayer.forEach(layer => {
      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
    });
  } else {
    let removedLayer = AllData.xunChaLayers.filter(layer => layer.includes('alreadyDeal'));
    let selectedLayer = AllData.xunChaLayers.filter(layer => layer.includes('noDeal'));
    bus.emit('removeMapDatas', AllData.xunChaLayers);
    bus.emit('setGeoJSON', { json: no_zaWuDuiFang, key: 'onDeal_DF' });
    bus.emit('setGeoJSON', { json: no_sheBeiLost, key: 'onDeal_DS' });
    bus.emit('setGeoJSON', { json: no_xiaXian, key: 'onDeal_XX' });
    bus.emit('setGeoJSON', { json: no_yiBian, key: 'onDeal_YB' });
    bus.emit('setGeoJSON', { json: no_rq_QiTa, key: 'onDeal_QT' });
    selectedLayer.forEach(layer => {
      bus.emit('setLayerVisible', { layername: layer, isCheck: true });
    });
  }
};
// 巡查反馈
const XunChaFanKui = item => {
  let removedLayer = [];
  let selectedLayer = [];
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  switch (item.name) {
    case '堆放杂物':
      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DF' && layer != 'noDeal_DF');
      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DF' || layer == 'noDeal_DF');
      selectedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
      });
      removedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
      });
      break;
    case '设备丢失':
      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_DS' && layer != 'noDeal_DS');
      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_DS' || layer == 'noDeal_DS');
      selectedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
      });
      removedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
      });
      break;
    case '下陷':
      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_XX' && layer != 'noDeal_XX');
      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_XX' || layer == 'noDeal_XX');
      selectedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
      });
      removedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
      });
      break;
    case '异变':
      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_YB' && layer != 'noDeal_YB');
      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_YB' || layer == 'noDeal_YB');
      selectedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
      });
      removedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
      });
      break;
    case '其他':
      removedLayer = AllData.xunChaLayers.filter(layer => layer != 'alreadyDeal_QT' && layer != 'noDeal_QT');
      selectedLayer = AllData.xunChaLayers.filter(layer => layer == 'alreadyDeal_QT' || layer == 'noDeal_QT');
      selectedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: true });
      });
      removedLayer.forEach(layer => {
        bus.emit('setLayerVisible', { layername: layer, isCheck: false });
      });
      break;
  }
};
// 风险评估
const TuChengClick = item => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  switch (item) {
    case 0:
      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
      break;
    case 1:
      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
      break;
    case 2:
      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });

      break;
    case 3:
      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: true });
      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
      break;
    case 4:
      bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
      bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
      bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: true });
      break;
  }
};

// 风险
const FengXianClick = item => {
  let data = {
    title: item.zb + ' 风险监测',
    comIDs: ['RQ_FengXianJianCe'],
  };
  bus.emit('publicDialog', data);
  // 传给组件数据

  setTimeout(() => {
    bus.emit('getDataListFxjc', item);
  }, 500);
};

// 现场连线
const XianChangLianXian = item => {
  bus.emit('OpenRY');
};

// 发布预警
const WarningClick = item => {
  let data = {
    title: '发布预警',
    comIDs: ['RQ_Warning'],
  };
  bus.emit('publicDialog', data);
};

watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
//燃气超标
const showIndexOver = () => {
  bus.emit('removeMapDatas', AllData.xunChaLayers);
  let key = 'warning_monitor';
  bus.emit('getGeojsonByType', {
    type: key,
    callback: geojson => {
      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnRQoverindex, key: 'warning_monitor' });
      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
    },
  });
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 13,
  });
};
//燃气告警
const showIndexWarning = () => {
  bus.emit('removeMapDatas', AllData.xunChaLayers);
  let key = 'warning_monitor';
  bus.emit('getGeojsonByType', {
    type: key,
    callback: geojson => {
      if (!!!geojson.features.length) bus.emit('setGeoJSON', { json: yanAnWarring, key: 'warning_monitor' });
      bus.emit('setLayerVisible', { type: 'point', layername: key, isCheck: true });
    },
  });
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 13,
  });
};
onMounted(() => {
  let initeRQTimer = setInterval(() => {
    if (!newfiberMapbox) return;
    if (!newfiberMapbox.map.getLayer('rq_pipeline_info')) return;
    if (!newfiberMapbox.map.getLayer('sx_ya_smx_rq_point')) return;
    newfiberMapbox.map.easeTo({
      center: [109.488, 36.596],
      zoom: 12,
    });
    //告警点事件
    let warningPoint = newfiberMapbox.getLayers().filter(feature => feature.newfiberId == 'warning_monitor')[0];
    if (warningPoint) {
      warningPoint.on('click', e => {
        let popupData = e.feature.properties;

        console.log('popupData---', '告警---------', popupData);
      });
    }
    bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
    bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: true });
    bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_sz', isCheck: true });
    bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: true });
    bus.emit('setLayerVisible', { layername: 'sx_ya_smx_rq_line_zg', isCheck: true });
    clearInterval(initeRQTimer);
  }, 100);
  initEcharts(1);
});
onBeforeUnmount(() => {
  bus.emit('setLayerVisible', { layername: 'rq_all', isCheck: false });
  bus.emit('setLayerVisible', { layername: 'rq_SZLH', isCheck: false });
  bus.emit('setLayerVisible', { layername: 'rq_TYLH', isCheck: false });
  bus.emit('setLayerVisible', { layername: 'rq_LGLH', isCheck: false });
  bus.emit('setLayerVisible', { layername: 'rq_other', isCheck: false });
  bus.emit('removeMapDatas', AllData.xunChaLayers);
  bus.emit('removeMapDatas', ['warning_monitor']);
  bus.emit('setLayerVisible', { layername: 'warning_monitor', isCheck: false });
  bus.emit('closeCesiumPopup');
  bus.emit('SetLayerShow', ['蓝色地图']);
  if (!!newfiberMapbox.getLayerByName('rqLine')) {
    newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
  }
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/transition_oneMap.scss';
#ZHRQ {
  .LeftBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    left: 10px;
    top: 70px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: inset 0 0 5px 5px #47eef38a;

    .LeftBox1_1 {
      height: 365px;

      .TJListBox {
        height: 42px;
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;

        .TJList {
          height: 42px;
          width: calc(50% - 9px);
          display: flex;
          .TJListImg {
            width: 22px;
            height: 22px;
            margin: 9px;
          }
          .TJListName {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #f4f9ff;
            width: 65px;
            height: 40px;
            line-height: 40px;
          }

          .TJListValue {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 20px;
            width: calc(100% - 110px);
            height: 40px;
            line-height: 40px;
            text-align: right;
          }
        }

        .TJList_RQ {
          background: rgba(7, 54, 102, 0.3);
          border-radius: 4px;
          border: 1px solid #15d2fd;
          box-shadow: inset 0 0 10px #15d2fdb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
          cursor: pointer;

          .TJListValue {
            color: #12f9ff;
          }
        }
        .TJList_GZ {
          background: rgba(164, 74, 8, 0.3);
          border-radius: 4px;
          border: 1px solid #ffd97f;
          box-shadow: inset 0 0 10px #ffd97fb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
          .TJListValue {
            color: #ffd97f;
          }
        }
      }
      .RQ_EchartsBox {
        width: 100%;
        height: calc(100% - 72px);
        margin-top: 10px;
        background: url('@/assets/images/Sponge_screen/RQ/Ech.png') no-repeat center;
        position: relative;

        .ClickDiv1 {
          width: 80px;
          height: 250px;
          // background: #ff000063;
          position: absolute;
          bottom: 0px;
          left: 60px;
          cursor: pointer;
        }
        .ClickDiv2 {
          width: 80px;
          height: 250px;
          // background: #ff000063;
          position: absolute;
          bottom: 0px;
          left: 160px;
          cursor: pointer;
        }
        .ClickDiv3 {
          width: 80px;
          height: 250px;
          // background: #ff000063;
          position: absolute;
          bottom: 0px;
          left: 255px;
          cursor: pointer;
        }
        .ClickDiv4 {
          width: 80px;
          height: 250px;
          // background: #ff000063;
          position: absolute;
          bottom: 0px;
          left: 340px;
          cursor: pointer;
        }
      }
    }
    .LeftBox1_2 {
      height: calc(100% - 365px - 275px - 10px);
      margin-bottom: 10px;
      // 风险监测
      .TJListBox {
        height: 42px;
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        .TJList2 {
          height: 42px;
          width: calc(50% - 9px);
          display: flex;
          background: url('@/assets/images/Sponge_screen/RQ/RQ_FX.png') no-repeat center;
          background-size: 100% 100%;
          cursor: pointer;

          .TJList2Name {
            width: 50%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #f4f9ff;
            height: 40px;
            line-height: 40px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 20px;
          }
          .TJList2Value {
            width: 50%;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 20px;
            color: #12f9ff;
            height: 40px;
            line-height: 40px;
            text-align: center;
          }
        }
      }
      .TableChange {
        height: 42px;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;

        .TableChangeList {
          width: 60px;
          height: 22px;
          background: #00344f;
          border-radius: 2px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #c1d3d4;
          text-align: center;
          line-height: 20px;
          cursor: pointer;
        }

        .TableCheck {
          background: #00344f;
          border-radius: 2px;
          border: 1px solid #1cf5fc;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 12px;
          color: #ebfeff;
          background: #1cf4fc22;
        }
      }

      .TableBox {
        width: 100%;
        height: calc(100% - 94px);

        .tableHeader {
          width: 100%;
          height: 34px;
          background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
          border-radius: 2px;
          border: 1px solid #74dde1;
          display: flex;

          .tableHeaderList {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            height: 34px;
            line-height: 34px;
            text-align: center;
          }
          .tableList1 {
            width: 20%;
          }
          .tableList2 {
            width: 30%;
          }
          .tableList3 {
            width: 30%;
          }
          .tableList4 {
            width: 20%;
          }
        }

        .tableBody {
          width: 100%;
          height: calc(100% - 68px);
          overflow: auto;

          .tableBodyList {
            height: 34px;
            line-height: 34px;
            width: 100%;
            display: flex;
            /* 选择偶数行 */
            &:nth-child(even) {
              background: linear-gradient(0deg, #008599 0%, #08596d 100%);
            }

            .tableBodyList_span1 {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              height: 34px;
              line-height: 34px;
              text-align: center;
              width: 20%;
              cursor: pointer;
            }
            .tableBodyList_span2 {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              height: 34px;
              line-height: 34px;
              text-align: center;
              width: 30%;
              cursor: pointer;
            }
            .tableBodyList_span3 {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              height: 34px;
              line-height: 34px;
              text-align: center;
              width: 30%;
            }
            .YJClass {
              color: #ffe243;
            }
            .tableBodyList_span4 {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
              height: 34px;
              line-height: 34px;
              text-align: center;
              width: 20%;
              cursor: pointer;
            }
          }
        }

        .tableFoot {
          width: 100%;
          height: 34px;
          background: linear-gradient(0deg, #008599b7 0%, #08596d91 100%);
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #ebfeff;
          line-height: 34px;
          text-align: center;
        }
      }
    }
    .LeftBox1_3 {
      height: 275px;

      .TableChange2 {
        height: 42px;
        width: 200px;
        box-sizing: border-box;
        padding: 10px 0px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 999;

        .TableChangeList2 {
          width: 60px;
          height: 22px;
          background: #00344f;
          border-radius: 2px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #c1d3d4;
          text-align: center;
          line-height: 20px;
          cursor: pointer;
        }

        .TableCheck2 {
          background: #00344f;
          border-radius: 2px;
          border: 1px solid #1cf5fc;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 12px;
          color: #ebfeff;
          background: #1cf4fc22;
        }
      }
      #YJEchartsBox {
        width: 100%;
        height: 100%;
      }
    }
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    padding: 10px;
    box-shadow: inset 0 0 5px 5px #47eef38a;

    .RightBox1_1 {
      height: calc(100% - 298px);
      margin-bottom: 10px;
      box-sizing: border-box;
      // padding: 0 10px;

      .JCListBox {
        margin-top: 10px;
        width: 100%;
        height: 196px;
        background: linear-gradient(0deg, #008599 0%, #08596d 100%);
        border-radius: 4px;
        overflow: hidden;

        .JCListBox_List {
          width: 100%;
          height: 28px;
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-evenly;
          align-items: center;

          .JCListBox_List_label {
            display: inline-block;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #c1d3d4;
            height: 28px;
            line-height: 28px;
            text-align: right;
            width: 70px;
          }
          .JCListBox_List_value {
            display: inline-block;
            border: 1px solid #1cf5fc;
            width: 290px;
            height: 28px;
            line-height: 28px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            text-align: center;
          }
        }
        .JCListBox_List_BTN {
          justify-content: center;
          align-items: center;
        }
      }
    }
    .RightBox1_2 {
      height: 288px;
      .FK_headerBox {
        width: 100%;
        height: 45px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .FK_headerBox_list {
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ebfeff;
          width: 100px;
          text-align: center;

          .FK_headerBox_list_colorBox1 {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #ee5777;
          }
          .FK_headerBox_list_colorBox2 {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #00ffbe;
          }
        }
      }
      .FK_bodyBox {
        width: 100%;
        height: 200px;
        overflow: auto;
        box-sizing: border-box;
        padding: 0 30px;

        .FK_bodyBox_list {
          width: 100%;
          height: 20px;
          margin-bottom: 20px;
          display: flex;

          .FK_bodyBox_list_label {
            display: block;
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            width: 80px;
            cursor: pointer;
          }
          .FK_BigBox {
            display: block;
            width: calc(100% - 80px);
            height: 20px;

            .FK_CenBox1 {
              display: inline-block;
              height: 20px;
              background: linear-gradient(-90deg, #f35f7f 0%, #c21439 100%);
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              text-align: right;
              line-height: 20px;
              box-sizing: border-box;
              padding: 0 10px;
            }
            .FK_CenBox2 {
              display: inline-block;
              height: 20px;
              background: linear-gradient(90deg, #20d9aa 0%, #0882a0 100%);
              font-weight: bold;
              font-size: 14px;
              color: #ffffff;
              text-align: right;
              line-height: 20px;
              box-sizing: border-box;
              padding: 0 10px;
            }
          }
        }
      }
    }
  }
  .TopBox {
    width: calc(100% - 1040px);
    height: 122px;
    position: absolute;
    left: 520px;
    top: 110px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    box-shadow: inset 0 0 5px 5px #47eef38a;
    padding: 10px;
    .TopTableHeader {
      width: 100%;
      height: 34px;
      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
      border: 1px solid #74dde1;
      display: flex;
    }

    .TopTableBody {
      width: 100%;
      height: calc(100% - 34px);
      overflow: auto;
      // display: flex;
      // flex-direction: column;
      // flex-wrap: nowrap;

      .TopTableBody_list {
        display: inline-block;
        width: 100%;
        height: 34px;
        /* 选择偶数行 */
        &:nth-child(even) {
          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
        }
      }
    }

    .TopTableListSpan {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      height: 34px;
      line-height: 34px;
      display: inline-block;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis; /* 超出宽度后显示省略号 */
      white-space: nowrap; /* 限制不允许换行 */
    }
    .TopTableListSpan1 {
      width: 20%;
      text-align: left;
      padding-left: 10px;
    }
    .TopTableListSpan2 {
      width: 25%;
      text-align: center;
    }
    .TopTableListSpan3 {
      width: 20%;
      text-align: center;
    }
    .TopTableListSpan4 {
      width: 10%;
      text-align: center;
    }
    .TopTableListSpan5 {
      width: 15%;
      text-align: center;
    }
    .TopTableListSpan6 {
      width: 10%;
      text-align: right;
      padding-right: 10px;

      .TopTableListSpanImg {
        width: 15px;
        height: 19px;
        margin: 7px;
        cursor: pointer;
      }
      .TopTableListSpanImg2 {
        width: 19px;
        height: 19px;
        margin: 7px;
        cursor: pointer;
      }
    }
  }
  .bottomBox {
    width: calc(100% - 1040px);
    height: 122px;
    position: absolute;
    left: 510px;
    bottom: 180px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-sizing: border-box;
    box-shadow: inset 0 0 5px 5px #47eef38a;
    padding: 10px;
    .TopTableHeader {
      width: 100%;
      height: 34px;
      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
      border: 1px solid #74dde1;
      display: flex;
    }

    .TopTableBody {
      width: 100%;
      height: calc(100% - 34px);
      overflow: auto;
      // display: flex;
      // flex-direction: column;
      // flex-wrap: nowrap;

      .TopTableBody_list {
        display: inline-block;
        width: 100%;
        height: 34px;
        /* 选择偶数行 */
        &:nth-child(even) {
          background: linear-gradient(0deg, #008599 0%, #08596d 100%);
        }
      }
    }

    .TopTableListSpan {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      height: 34px;
      line-height: 34px;
      display: inline-block;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis; /* 超出宽度后显示省略号 */
      white-space: nowrap; /* 限制不允许换行 */
    }

    .TopTableListSpan1 {
      width: 25%;
      text-align: left;
      padding-left: 10px;
    }
    .TopTableListSpan2 {
      width: 25%;
      text-align: center;
    }
    .TopTableListSpan3 {
      width: 25%;
      text-align: center;
    }
    .TopTableListSpan4 {
      width: 25%;
      text-align: right;
      padding-right: 10px;
    }
  }

  // 左右两侧展示板块公共样式
  .ComBox {
    width: 100%;
    box-sizing: border-box;
    .Box_header {
      width: 100%;
      height: 43px;
      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
      background-size: cover;
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 23px;
      color: #ebfeff;
      line-height: 43px;
      box-sizing: border-box;
      padding-left: 35px;
    }

    .Box_Body {
      width: 100%;
      height: calc(100% - 43px);
      box-sizing: border-box;
      position: relative;
      overflow: auto;
    }
  }
  .color_red {
    color: #ff3f3f !important;
  }
  .IssueWarning {
    width: 40px;
    height: 60px;
    position: absolute;
    bottom: 150px;
    left: 1400px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 13px;
    color: #ffffff;
    text-align: center;
    background: #003756;
    border-radius: 28px;
    border: 1px solid #53c6c9;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: inset 0 0 5px 2px #47eef38a;
  }
}
</style>