<script lang="ts">
export default {
  name: "areaboard", // 区域型首页
};
</script>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
import { getNotCheckAlarmCount } from '@/api/home';
import { ElMessage } from "element-plus";
import router from '@/router';
import { getUserInfo } from '@/api/user';
import Header from "@/views/monitorsystem/header/header.vue";
import * as echarts from 'echarts';
import Cookies from 'js-cookie';
import { getAlarmLogList, getExceptionEventStat } from "@/api/home";
import { getPatrolDeviceStat, getAreaTaskTodoStat } from "@/api/areaboard";
import { useUserStore } from '@/store/modules/user';
import Mapmode from './map.vue';
import Giveanalarm from "@/views/monitorsystem/giveanalarm.vue";
import Alarminformation from "@/views/monitorsystem/alarminformation.vue";

const userStore = useUserStore();
if (userStore.stationData.length <= 1) {
  router.push({ path: '/stationboard' });
}
const patrolInfo: any = ref({
  camera: {},
  wheelRobot: {},
  hangTrackRobot: {},
  uav: {},
  aVoicePrint: {},
  dvr: {}
})
const alarmCount = ref(0)
const CloseNav: any = ref(0)
function closeClick() {
  CloseNav.value++
}
//控制行变色
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}


//告警信息模块- 变量，方法
const tableTop = ref(0)
const tableList: any = ref([])

let tableTimer: any = null
const tableTimerInterval = ref(100) //向
function bsGetProductProcess() {
  clearInterval(tableTimer);

  //查询报警信息
  let params = {
    stationId: stationIds.value
  }
  getAlarmLogList(params).then((res: any) => {
    tableTop.value = 0;
    tableList.value = res.data
    tableTimerFun(true);
  })
}
function tableTimerFun(is: any) {
  var parentDom: any = document.querySelector('#tableTr .el-scrollbar__wrap') //获取滚动元素
  if (is == true) {
    parentDom.scrollTop = 0
  }

  tableTimer = setInterval(() => {
    if (parentDom.scrollTop + parentDom.clientHeight >= parentDom.scrollHeight) {
      parentDom.scrollTop = 0
    } else {
      parentDom.scrollTop++ // 元素自增距离顶部
    }
  }, tableTimerInterval.value);
}

// 异常事件统计区域 - 
const abnormalInfo: any = ref({
  crisisEvent: 0,
  sameEvent: 0,
  seriousEvent: 0,
  warnEvent: 0
})
function tourTaskInit(type: any) {
  visitationmonth.value = type
  let params = {
    stationCode: stationCodes.value,
    type: type
  }
  getAreaTaskTodoStat(params).then((res: any) => {
    myChart.clear()
    option.value.xAxis.data = res.data.xData
    // option.value.yAxis.series = res.data.yData
    let execute = [] //已执行
    let toBeExecute = [] //待执行
    for (let i = 0; i < res.data.yData.length; i++) {
      execute.push(res.data.yData[i].execute)
      toBeExecute.push(res.data.yData[i].toBeExecute)
    }
    option.value.series[0].data = execute
    option.value.series[1].data = toBeExecute
    myChart.setOption(option.value)
  })
}

const option: any = ref({
  grid: {
    top: '10px',
    left: '40px',
    right: '30px',
    bottom: '30px',
    containLabel: false,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {//y轴文字的配置
      textStyle: {
        color: "#ffffff",//Y轴内容文字颜色
      },
    },

  },
  yAxis: {
    type: 'value',
    splitNumber: 4,  // 配置 Y 轴数值间隔
    axisLabel: {//y轴文字的配置
      textStyle: {
        color: "#ffffff",//Y轴内容文字颜色
      },
    },
    // //网格线
    splitLine: {
      show: true,
      lineStyle: {
        type: 'solid', //y轴分割线类型
        color: 'rgb(0 249 162 / 10%)',
        width: 1,
      },
    },
  },
  series: [{
    name: "已执行",
    data: [],
    type: 'bar',
    showBackground: false,
    barWidth: '15px',
    backgroundStyle: {
      color: 'rgba(220, 220, 220, 0.8)'
    },
    itemStyle: {
      //这里是颜色
      color: "rgb(0, 249, 162)"
    }
  }, {
    name: "待执行",
    data: [],
    type: 'bar',
    barWidth: '15px',
    showBackground: false,
    backgroundStyle: {
      color: 'rgba(220, 220, 220, 0.8)'
    },
    itemStyle: {
      //这里是颜色
      color: "rgb(255, 153, 0)"
    }
  }]
})
const stationIds: any = ref("");
const stationCodes: any = ref("");
const stationData: any = ref([]);


function getInit() {
  let params = {
    stationId: stationIds.value
  }
  //异常事件统计
  getExceptionEventStat(params).then((res: any) => {
    abnormalInfo.value = res.data
  })
  let paramss = {
    stationId: stationIds.value
  }
  //巡视设备统计(多站)
  getPatrolDeviceStat(paramss).then((res: any) => {
    patrolInfo.value = res.data
  })
}
function selectRow(row: any) { // 点击变电站详情列表
  Cookies.set('stationIds', row.stationId);
  userStore.stationCode = row.stationCode
  userStore.stationName = row.stationName
  userStore.stationId = row.stationId
  router.push({ path: '/stationboard' });
}
let myChart: any = null
const visitationmonth: any = ref('1')
const refMapmode: any = ref()
// var source = new EventSource(userStore.webApiBaseUrl + `/sse/connect/` + userStore.regionId + "_" + userStore.userId);
// var source1 = new EventSource(userStore.webApiBaseUrl + `/sse/connect/check_` + userStore.regionId + "_" + userStore.userId);
const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/' + userStore.regionId + "_" + userStore.userId);
const ws2 = new WebSocket(userStore.wsApiBaseUrl + "/websocket/check_" + userStore.regionId + "_" + userStore.userId);
function setupWebSocket() {

  ws1.onopen = () => {
  };
  ws1.onerror = (error: any) => {
  };
  ws1.onmessage = (e: any) => {

    if (e.data != 0) {
      userStore.giveanalarmInfo = e.data
      alarmCount.value = JSON.parse(e.data).alarmCount
      let civeanalarmInfo: any = {}
      civeanalarmInfo = JSON.parse(e.data)
      civeanalarmInfo.defectFilePath = userStore.webApiBaseUrl + "/previewimage?type=alarm&filename=" + encodeURI(civeanalarmInfo.defectFilePath)
      civeanalarmInfo.checkResult = "1"
      examinationData.value.push(civeanalarmInfo)
      isGiveanalarm.value = true
    }
  }
  ws1.onclose = () => {

  };

}
function setCloseNavWebSocket() {

  ws2.onopen = () => {
  
  };
  ws2.onerror = (error: any) => {
  };
  ws2.onmessage = (e: any) => {
 
    if (e.data != 0) {
      userStore.trendsInfo = e.data

      getNotCheckAlarmCount({ stationId: stationIds.value }).then((res: any) => {
        alarmCount.value = res.data.count
        tableTimerInterval.value = 100
        bsGetProductProcess()
      })
    }
  };
  ws2.onclose = () => {
  };
}
onMounted(() => {
  stationData.value = userStore.stationData
  let stationIdArr = []
  let stationCodeArr = []
  for (let i = 0; i < userStore.stationData.length; i++) {
    stationIdArr.push(userStore.stationData[i].stationId)
    stationCodeArr.push(userStore.stationData[i].stationCode)
  }
  stationIds.value = stationIdArr.join(',')
  stationCodes.value = stationCodeArr.join(',')
  getInit()
  clearInterval(tableTimer)
  bsGetProductProcess()
  tourTaskInit('1')
  setupWebSocket()
  setCloseNavWebSocket()
  myChart = echarts.init(document.getElementById("myChartId") as HTMLDivElement);
  window.onresize = function () { // 自适应大小
    myChart.resize();
    refMapmode.value.setEcharts()
  };
  getNotCheckAlarmCount({ stationId: stationIds.value }).then((res: any) => {
    alarmCount.value = res.data.count
  })

  isGiveanalarm.value = false


})
onBeforeUnmount(() => {
  if (ws1 != null) {
    ws1.close()
  }
  if (ws2 != null) {
    ws2.close()
  }
  clearInterval(tableTimer)
})
const isGiveanalarm = ref(false)
const examinationData: any = ref([])
function closeGiveanalarm(type: any) {
  if (type == true) {
    ElMessage({
      type: "success",
      message: "核查成功",
    });
  }

  examinationData.value = []
  isGiveanalarm.value = false
}
function closeAlarm(type: any) {
  if (type == true) {
    ElMessage({
      type: "success",
      message: "核查成功",
    });
    tableTimerInterval.value = 100
    bsGetProductProcess()
    getNotCheckAlarmCount({ stationId: stationIds.value }).then((res: any) => {
      alarmCount.value = res.data.count
    })
  } else {
    setTimeout(() => {
      clearInterval(tableTimer);
      tableTimerInterval.value = 100
      tableTimerFun(false)
    }, 100)
  }
  isAlarm.value = false
}

function mouseenter() {
  clearInterval(tableTimer);
  tableTimerInterval.value = 100000
  tableTimerFun(false)
}
function mouseleave() {
  clearInterval(tableTimer);
  tableTimerInterval.value = 100
  tableTimerFun(false)
}
const isAlarm = ref(false)
const alarminInfo: any = ref({})
function processClick(row: any) {
  alarminInfo.value = row
  isAlarm.value = true
  setTimeout(() => {
    clearInterval(tableTimer);
    tableTimerInterval.value = 100000
    tableTimerFun(false)
  }, 100)

}
</script>
<template>
  <div class="areaboard-box">
    <div class="sectionimgbg" @click="closeClick">
      <Alarminformation v-if="isAlarm" style="position: absolute;top: 0;z-index: 2003;" :alarminInfo="alarminInfo"
        @closeAlarm="closeAlarm" />

      <Giveanalarm v-if="isGiveanalarm" style="position: absolute;top: 0;z-index: 2002;"
        :examinationData="examinationData" @closeGiveanalarm="closeGiveanalarm" />

      <Header :CloseNav="CloseNav" :isHide="false" />

      <img src="@/assets/monitorsystem/region/qysy_bj.png" alt=""
        style="position: absolute;top: 0; height: calc(100vh - 75px); ">
      <el-scrollbar height="calc(100vh - 75px)" style="height: calc(100vh - 75px);">

        <div style="position: relative; height: 100%;  ">
          <div class="areaboard-left1">
            <div class="areaboard-box-title">
              <img src="@/assets/monitorsystem/bkzs.png" alt="">
              <div class="imgname">变电站详情</div>
            </div>
            <img src="@/assets/monitorsystem/sy_bj.png" alt="">
            <el-table row-key="id" :data="stationData" :row-class-name="tableRowClassName" class="PatrolMonitoring"
              element-loading-background="rgb(11, 40, 34)" @row-click="selectRow"
              style="width: 92%;position: relative;margin:0 15px; margin-top: 15px; height:calc(100% - 75px); overflow: auto;font-size: 12px; "
              :header-cell-style="{ background: 'rgba(255, 255, 255, 0.1)', color: '#00F9A2', height: '30px' }">
              <el-table-column prop="stationName" label="变电站名称" min-width="150px">
                <template #default="scope">
                  <span v-if="scope.row.isStationFlag == '1'">{{ scope.row.stationName }}(节点型)</span>
                  <span v-if="scope.row.isStationFlag == '0'">{{ scope.row.stationName }}(直联型)</span>
                </template>
              </el-table-column>
              <el-table-column prop="stationCode" label="变电站编码" width="85px" align="center" />
              <el-table-column prop="online" label="状态" width="60px" align="center">
                <template #default="scope">
                  <span v-if="scope.row.online == null || scope.row.online == '0'" style="color:#FF3300">离线</span>
                  <span v-if="scope.row.online == '1'" style="color:#00F9A2">在线</span>

                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="areaboard-left2">
            <div class="areaboard-box-title">
              <img src="@/assets/monitorsystem/bkzs.png" alt="">
              <div class="imgname">巡视设备在线率</div>
            </div>
            <img src="@/assets/monitorsystem/sy_bj.png" alt="" style="margin-bottom: 20px;">
            <div class="online-displayflex">
              <img src="@/assets/monitorsystem/home/sy_xssb1.png" alt="">
              <div>
                <div class="displayflex">
                  <div>
                    摄像头在线率：<span class="online-number">{{ patrolInfo.camera.onLineRate }}%</span>
                  </div>
                  <div>
                    <span class="online-number2">{{ patrolInfo.camera.online }}</span>/{{ patrolInfo.camera.allCount }}
                  </div>
                </div>
                <el-progress :percentage="patrolInfo.camera.onLineRate" :stroke-width="8" />
              </div>
            </div>
            <div class="online-displayflex">
              <img src="@/assets/monitorsystem/region/icon3.png" alt="">
              <div>
                <div class="displayflex">
                  <div>
                    硬盘录像机在线率：<span class="online-number">{{ patrolInfo.dvr.onLineRate }}%</span>
                  </div>
                  <div>
                    <span class="online-number2">{{ patrolInfo.dvr.online }}</span>/{{ patrolInfo.dvr.allCount }}
                  </div>
                </div>
                <el-progress :percentage="patrolInfo.dvr.onLineRate" :stroke-width="8" />
              </div>
            </div>
            <div class="online-displayflex">
              <img src="@/assets/monitorsystem/home/sy_xssb2.png" alt="">
              <div>
                <div class="displayflex">
                  <div>
                    轮式机器人在线率：<span class="online-number">{{ patrolInfo.wheelRobot.onLineRate }}%</span>
                  </div>
                  <div>
                    <span class="online-number2">{{ patrolInfo.wheelRobot.online }}</span>/{{
                      patrolInfo.wheelRobot.allCount
                    }}
                  </div>
                </div>
                <el-progress :percentage="patrolInfo.wheelRobot.onLineRate" :stroke-width="8" />
              </div>
            </div>
            <div class="online-displayflex">
              <img src="@/assets/monitorsystem/region/icon1.png" alt="">
              <div>
                <div class="displayflex">
                  <div>
                    轨道机器人在线率：<span class="online-number">{{ patrolInfo.hangTrackRobot.onLineRate }}%</span>
                  </div>
                  <div>
                    <span class="online-number2">{{ patrolInfo.hangTrackRobot.online }}</span>/{{
                      patrolInfo.hangTrackRobot.allCount }}
                  </div>
                </div>
                <el-progress :percentage="patrolInfo.hangTrackRobot.onLineRate" :stroke-width="8" />
              </div>
            </div>
            <div class="online-displayflex">
              <img src="@/assets/monitorsystem/home/sy_xssb3.png" alt="">
              <div>
                <div class="displayflex">
                  <div>
                    无人机在线率：<span class="online-number">{{ patrolInfo.uav.onLineRate }}%</span>
                  </div>
                  <div>
                    <span class="online-number2">{{ patrolInfo.uav.online }}</span>/{{ patrolInfo.uav.allCount }}
                  </div>
                </div>
                <el-progress :percentage="patrolInfo.uav.onLineRate" :stroke-width="8" />
              </div>
            </div>
            <div class="online-displayflex">
              <img src="@/assets/monitorsystem/region/icon2.png" alt="">
              <div>
                <div class="displayflex">
                  <div>
                    声纹设备在线率：<span class="online-number">{{ patrolInfo.aVoicePrint.onLineRate }}%</span>
                  </div>
                  <div>
                    <span class="online-number2">{{ patrolInfo.aVoicePrint.online }}</span>/{{
                      patrolInfo.aVoicePrint.allCount
                    }}
                  </div>
                </div>
                <el-progress :percentage="patrolInfo.aVoicePrint.onLineRate" :stroke-width="8" />
              </div>
            </div>
          </div>
          <div class="areaboard-content" style="position:relative ;">
            <img class="imgccccc" src="@/assets/monitorsystem/region/circle.png" alt="">
            <Mapmode ref="refMapmode" />
          </div>


          <div class="areaboard-right1">
            <div class="areaboard-box-title">
              <img src="@/assets/monitorsystem/bkzs.png" alt="">
              <div class="imgname">报警信息</div>
              <div style="font-size: 12px; color: #fff;">（{{ alarmCount }}）</div>
            </div>
            <img src="@/assets/monitorsystem/qysy_gjxx1.png" alt="" style="margin-bottom: 10px;">

            <div class="table_body">
              <div class="table_th">
                <div class="tr1 th_style">内容</div>
                <div class="tr2 th_style">级别</div>
                <div class="tr3 th_style">发生时间</div>
                <div class="tr4 th_style">变电站</div>

              </div>
              <el-scrollbar height="350px" style="height: 350px;width: 92%;margin: auto;" id="tableTr"
                @mouseenter="mouseenter" @mouseleave="mouseleave">
                <div class="table_tr" v-for="(item, index) in tableList" :key="index"
                  :class="{ 'table_active': index % 2 == 0 }" @dblclick="processClick(item)">
                  <div class="tr1 tr" :title="item.content">{{ item.content }}</div>
                  <div class="tr2 tr">
                    <span v-if="item.alarmLevel == 1" style="color: #0099FF;">预警</span>
                    <span v-if="item.alarmLevel == 2" style="color: #FFFF00;">一般</span>
                    <span v-if="item.alarmLevel == 3" style="color: #FF9900;">严重</span>
                    <span v-if="item.alarmLevel == 4" style="color: #FF3300;">危急</span>
                    <!-- {{item.level  }} -->
                  </div>
                  <div class="tr3 tr">{{ item.alarmDate }}</div>
                  <div class="tr4 tr">{{ item.stationName }}</div>
                </div>
              </el-scrollbar>
            </div>
          </div>
          <div class="areaboard-right2">
            <div class="areaboard-box-title">
              <img src="@/assets/monitorsystem/bkzs.png" alt="">
              <div class="imgname">异常事件统计</div>
            </div>
            <img src="@/assets/monitorsystem/qysy_gjxx1.png" alt="" style="margin-bottom: 20px;">
            <div class="abnormalbox">
              <div style="display:flex;margin-right: 40px;margin-bottom: 40px;">
                <div class="abnormalimgbox">
                  <img src="@/assets/monitorsystem/home/sy_ycsj1.png" style="margin-top: -5px;" alt="">
                  <div class="animationbox">
                    <div class="luminescence">
                      <div class="abnormalcircular"></div>
                    </div>
                  </div>
                </div>
                <div class="abnormaltextbox">
                  <div>{{ abnormalInfo.warnEvent }}</div>
                  <div class="abnormaltextline"></div>
                  <div class="abnormaltextname">预警事件</div>
                </div>
              </div>
              <div style="display:flex;margin-bottom: 40px;">
                <div class="abnormalimgbox">
                  <img src="@/assets/monitorsystem/home/sy_ycsj2.png" style="margin-top: -5px;" alt="">
                  <div class="animationbox">
                    <div class="luminescence">
                      <div class="abnormalcircular"></div>
                    </div>
                  </div>
                </div>
                <div class="abnormaltextbox">
                  <div>{{ abnormalInfo.sameEvent }}</div>
                  <div class="abnormaltextline"></div>
                  <div class="abnormaltextname">一般事件</div>
                </div>
              </div>
              <div style="display:flex;margin-right: 40px;">
                <div class="abnormalimgbox">
                  <img src="@/assets/monitorsystem/home/sy_ycsj3.png" style="margin-top: -5px;" alt="">
                  <div class="animationbox">
                    <div class="luminescence">
                      <div class="abnormalcircular"></div>
                    </div>
                  </div>
                </div>
                <div class="abnormaltextbox">
                  <div>{{ abnormalInfo.seriousEvent }}</div>
                  <div class="abnormaltextline"></div>
                  <div class="abnormaltextname">严重事件</div>
                </div>

              </div>
              <div style="display:flex;">
                <div class="abnormalimgbox">
                  <img src="@/assets/monitorsystem/home/sy_ycsj4.png" style="margin-top: -5px;" alt="">

                  <div class="animationbox">
                    <div class="luminescence">
                      <div class="abnormalcircular"></div>
                    </div>

                  </div>
                </div>
                <div class="abnormaltextbox">
                  <div>{{ abnormalInfo.crisisEvent }}</div>
                  <div class="abnormaltextline"></div>
                  <div class="abnormaltextname">危急事件</div>
                </div>
              </div>
            </div>
          </div>
          <div class="areaboard-bottom">
            <div class="areaboard-box-title" style="justify-content: space-between;">
              <div style="display:flex">
                <img src="@/assets/monitorsystem/bkzs.png" alt="">
                <div class="imgname" style="">巡视任务统计</div>
              </div>
              <div style="display:flex;align-items: center;font-family: 'Arial Normal', 'Arial';
                    font-weight: 400;
                    font-style: normal;
                    font-size: 12px;
                    color: #FFFFFF;">
                <div style="width: 6px;
                    height: 6px;
                    background: inherit;
                    background-color: rgba(0, 249, 162, 1);"></div>
                <div style="padding-left:5px ;padding-right: 30px;">已执行</div>
                <div style=" width: 6px;
                    height: 6px;
                    background: inherit;
                    background-color: rgba(255, 153, 0, 1);"></div>
                <div style="padding-left:5px ;">待执行</div>
              </div>
              <div style="display:flex">
                <div class="visitationday" :class="visitationmonth == '1' ? 'visitationmonth' : ''"
                  @click="tourTaskInit('1')">年
                </div>
                <div class="visitationday" :class="visitationmonth == '2' ? 'visitationmonth' : ''"
                  @click="tourTaskInit('2')">月
                </div>
                <div class="visitationday" :class="visitationmonth == '3' ? 'visitationmonth' : ''"
                  @click="tourTaskInit('3')">周
                </div>
                <div class="visitationday" :class="visitationmonth == '4' ? 'visitationmonth' : ''"
                  @click="tourTaskInit('4')">日
                </div>
              </div>


            </div>
            <img src="@/assets/monitorsystem/region/qysy_xsrw1.png" alt="" style="margin-bottom: 5px;">
            <div id="myChartId" style="width: 100%;height:calc(100% - 45px);"></div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<style scoped lang="scss">
.areaboard-box {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/monitorsystem/u4.png);
  background-size: 100% 100%;

  .areaboard-box-title {
    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #FFBD00;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .imgname {
    padding-left: 10px;
  }

  .areaboard-left1 {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 390px;
    height: 455px;
    background: url(@/assets/monitorsystem/home/sy_sbbj.png);
    background-size: 100% 100%;

    :deep(.el-table__header-wrapper) {
      border-left: #00F9A2 2px solid;
      border-right: #00F9A2 2px solid;
    }
  }

  .areaboard-left2 {
    position: absolute;
    top: 490px;
    left: 20px;
    width: 390px;
    height: 498px;
    background: url(@/assets/monitorsystem/home/sy_xssbbj.png);
    background-size: 100% 100%;

    .online-displayflex {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #FFFFFF;

      img {
        margin-right: 10px;
      }

      .displayflex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 5px;
        padding-top: 10px;
      }

      .el-progress--line {
        margin-bottom: 15px;
        width: 300px;
      }

      :deep(.el-progress__text) {
        display: none;
      }

      :deep(.el-progress-bar__outer) {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 0;
      }

      // :deep(.el-progress-bar__inner) {
      //   background-color: rgba(0, 249, 162, 1);
      //   border-radius: 0;
      // }

      .online-number {
        font-family: '钉钉进步体 Bold', '钉钉进步体 Regular', '钉钉进步体';
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: #00F9A2;
      }

      .online-number2 {
        font-family: '钉钉进步体 Bold', '钉钉进步体 Regular', '钉钉进步体';
        font-weight: 700;
        font-style: normal;
        font-size: 12px;
        color: #00F9A2;
      }

    }

  }

  .areaboard-content {
    position: absolute;
    top: 22px;
    left: 430px;
    width: calc(100vw - 970px);
    height: 710px;
    // background: url(@/assets/monitorsystem/home/sy_sbbj.png);
    // background-size: 100% 100%;
  }
}

:deep(.el-table) {
  background: transparent !important;
  --el-table-row-hover-bg-color: transparent !important;
  --el-table-border-color: transparent !important;
  --el-table-current-row-bg-color: transparent !important;
  --el-table-header-bg-color: transparent !important;
  --el-table-fixed-box-shadow: transparent !important;
  --el-table-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-expanded-cell-bg-color: transparent !important;
  color: #fff;
}

//暂无数据背景颜色
:deep(.el-table__empty-block) {
  background-color: rgb(255 255 255 / 10%);
  // display: none;
}

.areaboard-right1 {
  position: absolute;
  top: 15px;
  right: 20px;
  width: 480px;
  height: 455px;
  background: url(@/assets/monitorsystem/home/sy_bjbj.png);
  background-size: 100% 100%;

  .table_body {
    width: 100%;
    margin-top: 15px;
  }

  .table_th {
    width: 92%;
    display: flex;
    height: 34px;
    line-height: 34px;
    background-color: rgba(255, 255, 255, 0.0980392156862745);
    border-left: 2px solid rgba(0, 249, 162, 1);
    border-right: 2px solid rgba(0, 249, 162, 1);
    font-size: 12px;
    color: #00F9A2;
    text-align: center;
    margin: auto;
  }

  .tr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 5px;
    text-align: center;
    font-size: 12px;
  }

  .tr1 {
    width: 100px;
  }

  .tr2 {
    width: 60px;
  }

  .tr3 {
    width: 140px;
  }

  .tr4 {
    width: 130px;
  }

  .table_main_body {
    margin: auto;
    width: 92%;
    height: 338px;
    overflow: auto;
    position: relative;
  }

  .table_inner_body {
    width: 100%;
    position: absolute;
    left: 0;
  }

  .table_tr {
    display: flex;
    height: 34px;
    line-height: 34px;
    color: #eee;
    font-size: 15px;
    background: rgba(255, 255, 255, 10%);
    cursor: pointer;
  }

  .table_active {
    background: rgba(255, 255, 255, 0%);
  }

}

.areaboard-right2 {
  position: absolute;
  top: 490px;
  right: 20px;
  width: 480px;
  height: 244px;
  background: url(@/assets/monitorsystem/home/sy_ycsjbj.png);
  background-size: 100% 100%;

}

.abnormalbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  .abnormalimgbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;

    .animationbox {
      position: absolute;
      top: 0;
      width: 60px;
      height: 60px;
      // background: );
      // background-image: radial-gradient(rgba(0, 249, 162, 0.2) 0%, transparent 100%);
      border: 1px solid rgb(0 249 162 / 30%);
      border-radius: 50%;
      animation: rotations 6s infinite linear;
      -webkit-animation: rotations 6s infinite linear;

      .luminescence {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        background: rgb(0 249 162 / 5%);
      }
    }

    .abnormalcircular {
      position: absolute;
      top: 42px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: url(@/assets/monitorsystem/home/u1064.png);
      background-size: 100% 100%;
      // background: rgba(0, 249, 162,1);
      // box-shadow: 0 0 2px 2px red;

    }

  }

  .abnormaltextbox {
    font-family: '钉钉进步体 Bold', '钉钉进步体 Regular', '钉钉进步体';
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #00F9A2;
    text-align: right;
    padding-left: 10px;

    .abnormaltextline {
      width: 100px;
      height: 2px;
      background-image: linear-gradient(to right, transparent, rgb(0, 249, 162, 0.5));
      margin-bottom: 5px;
    }

    .abnormaltextname {
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
    }
  }
}



@keyframes rotations {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@-webkit-keyframes rotations {

  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(-360deg);
  }

}

.areaboard-bottom {
  position: absolute;
  top: 747px;
  left: 430px;
  width: calc(100% - 450px);
  height: 240px;
  background: url(@/assets/monitorsystem/region/qysy_xsrw.png);
  background-size: 100% 100%;



  .visitationday {
    margin-right: 10px;
    width: 30px;
    height: 22px;
    line-height: 22px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: 12px;
    border: 1px solid rgb(103, 108, 107);
    background: rgba(60, 81, 77, 1);
    color: #ffffff;
    border-radius: 3px;
    cursor: pointer;
  }

  .visitationmonth {
    border: 1px solid rgba(0, 249, 162, 0.2);
    background: rgba(0, 249, 162, 0.1);
    color: #00F9A2;
    border-radius: 3px;
  }
}

.imgccccc {
  width: 70%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: rotationss 20s infinite linear;
}

@keyframes rotationss {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotationss {

  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }

}

:deep(.el-table__row) {
  cursor: pointer;
}
</style>

