<script lang="ts">
export default {
  name: "stationboard", // 变电站首页
};
</script>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import Alarminformation from "@/views/monitorsystem/alarminformation.vue";
import { getNotCheckAlarmCount } from '@/api/home';
import { CountTo as BaseCountTo } from 'vue3-count-to'
import { ref, onMounted,onBeforeUnmount, nextTick, reactive,watch } from "vue";
import { getMainDeviceNumber, getPatrolDeviceOnLine, getWeatherLogList, getAlarmLogList, getExceptionEventStat, getTaskTodoStat } from "@/api/home";
import Modelset from './3DModelSet.vue';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
watch(() => userStore.alarmCount, (newValue, oldValue) => {
  alarmCount.value = newValue
  tableTimerInterval.value = 100
  bsGetProductProcess()
},{ deep: true })
const equipmentlist: any = ref([])
equipmentlist.value = [{
  name: '变压器',
  num: 0
}, {
  name: '干式电抗器',
  num: 0
}, {
  name: 'GIS',
  num: 0
}, {
  name: '断路器',
  num: 0
}, {
  name: '隔离开关',
  num: 0
}, {
  name: '电流互感器',
  num: 0
}, {
  name: '电压互感器',
  num: 0
}, {
  name: '低压并联电抗器',
  num: 0
}, {
  name: '避雷针',
  num: 0
}]

const tableTop = ref(0)
const tableList: any = ref([])
let tableTimer: any = null
const tableTimerInterval = ref(100) //向上滚动 1px 所需要的时间，越小越快，推荐值 100
function bsGetProductProcess() {
  clearInterval(tableTimer);

  //查询报警信息
  let params = {
    stationId: userStore.stationId
  }
  if(userStore.stationId == "" || userStore.stationId == null){
    return
  }
  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(parentDom == null){
   return
  }
  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
})
const patrolInfo: any = ref({
  camera: {},
  robot: {},
  uav: {}
})


function getEquipment() {
  let params = {
    stationCode: userStore.stationCode
  }
  getMainDeviceNumber(params).then((res: any) => {
    if (res.data != null) {
      equipmentlist.value = [{
        name: '变压器',
        num: res.data.transformer
      }, {
        name: '干式电抗器',
        num: res.data.dryTypeReactor
      }, {
        name: 'GIS',
        num: res.data.gis
      }, {
        name: '断路器',
        num: res.data.circuitBreaker
      }, {
        name: '隔离开关',
        num: res.data.disconnector
      }, {
        name: '电流互感器',
        num: res.data.currentTransformer
      }, {
        name: '电压互感器',
        num: res.data.voltageTransformer
      }, {
        name: '低压并联电抗器',
        num: 0
      }, {
        name: '避雷针',
        num: res.data.lightningRod
      }]
    }
  })
}

function getInit() {
  let params = {
    stationId: userStore.stationId
  }
  getWeatherLogList(params).then((res: any) => {

    environmentInfo.value = res.data
    if (res.data.temperature == "") {
      environmentInfo.value.temperature = "无"
    }
    if (res.data.humidity == "") {
      environmentInfo.value.humidity = "无"
    }
    if (res.data.rainfall == "") {
      environmentInfo.value.rainfall = "无"
    }
    if (res.data.windSpeed == "") {
      environmentInfo.value.windSpeed = "无"
    }
    if (res.data.windDirection == "") {
      environmentInfo.value.windDirection = "无"
    }
    if (res.data.pressure == "") {
      environmentInfo.value.pressure = "无"
    }
  })
  //获取巡视设备在线率
  getPatrolDeviceOnLine(params).then((res: any) => {
    patrolInfo.value = res.data
  })

  //异常事件统计
  getExceptionEventStat(params).then((res: any) => {
    abnormalInfo.value = res.data
  })
}
const tourTaskInfo: any = ref({})
const isvisitationday = ref('1')
function tourTaskInit(type: any) {
  isvisitationday.value = type
  let params = {
    stationCode: userStore.stationCode,
    type: type
  }
  loading2.value = true
  getTaskTodoStat(params).then((res: any) => {
    loading2.value = false
    if (res.data == undefined) {
      res.data.allCount = 0
    }
    tourTaskInfo.value = res.data
  }).catch(()=>{
    loading2.value = false
  })
}
// 天气
function setupWebSocket() {
  const ws = new WebSocket( userStore.wsApiBaseUrl+ '/websocket/vibe_run_data_'+ userStore.userId);  
  ws.onopen = () => {  
  };  
  ws.onerror = (error:any) => {  
  };  
  ws.onmessage = (e:any) => {  
    if (e.data != 0) {
      environment.value = JSON.parse(e.data)
      if(environment.value.type == 1){
        environmentInfo.value.temperature = environment.value.value
      }
      if(environment.value.type == 2){
        environmentInfo.value.humidity = environment.value.value
      }
      if(environment.value.type == 3){
        environmentInfo.value.windSpeed = environment.value.value
      }
      if(environment.value.type == 4){
        environmentInfo.value.rainfall = environment.value.value
      }
      if(environment.value.type == 5){
        environmentInfo.value.windDirection = environment.value.value
      }
      if(environment.value.type == 6){
        environmentInfo.value.pressure = environment.value.value
      }
    }
  };  
  ws.onclose = () => {  
  };  
}
const environmentInfo = ref({
  temperature: "",
  humidity: "",
  rainfall: "",
  windSpeed: "",
  windDirection: "",
  pressure: ""
})
const environment = ref()

onMounted(() => {
  setupWebSocket()
  clearInterval(tableTimer)
  bsGetProductProcess()
  getEquipment()
  getInit()
  tourTaskInit('1')
  isModelset.value = true
  alarmCount.value = userStore.alarmCount
  
});
onBeforeUnmount(() => {
  clearInterval(tableTimer)
})
const isautoRotate = ref(true)
const isModelset = ref(false)

function autoRotateClick() {
  if (isautoRotate.value == true) {
    isautoRotate.value = false
  } else {
    isautoRotate.value = true
  }

  // controls.autoRotate = type
}
function mouseenter() {
  clearInterval(tableTimer);
  tableTimerInterval.value = 100000
  tableTimerFun(false)
}
function mouseleave() {
  clearInterval(tableTimer);
  tableTimerInterval.value = 100
  tableTimerFun(false)
}
const loading2 = ref(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)
  
}
const alarmCount = ref(0)
function closeAlarm(type:any){
  if(type == true){
    ElMessage({
      type: "success",
        message: "核查成功",
    });
    tableTimerInterval.value = 100
    bsGetProductProcess()
    getNotCheckAlarmCount({stationId:userStore.stationId}).then((res: any) => {
      alarmCount.value =  res.data.count
      userStore.alarmCount=  res.data.count
  })
  }else{
    setTimeout(()=>{
      clearInterval(tableTimer);
      tableTimerInterval.value = 100
      tableTimerFun(false)
    },100)
  }
  isAlarm.value  = false
}
</script>

<template>
  <div>
    <Alarminformation v-if="isAlarm" style="position: absolute;top: 0;z-index: 2003;"
    :alarminInfo="alarminInfo"
     @closeAlarm="closeAlarm"/>
    <el-scrollbar height="calc(100vh - 75px)" style="height: calc(100vh - 75px);">
      <div style="position: relative; height: 100%;">
        <div style="width:100%;height:1005px;position:absolute;top: 0px;left: 0">
          <Modelset v-if="isModelset" :isautoRotate="isautoRotate" />
        </div>
        <div class="three_button" @click="autoRotateClick">
          <span v-if="isautoRotate == true">暂停</span>
          <span v-if="isautoRotate == false">开始</span>
        </div>
        <div class="stationboard-left1">
          <div class="stationboard-box-title">
            <img src="@/assets/monitorsystem/bkzs.png" alt="">
            <div class="imgname">主设备</div>
          </div>
          <img src="@/assets/monitorsystem/sy_bj.png" alt="">
          <div class="equipment-displayflex">
            <div class="equipment-box" v-for="(item, index) in equipmentlist" :key="item.name">
              <img v-if="index == 0" src="@/assets/monitorsystem/home/sy_sb1.png" alt="" class="equipment-icon">
              <img v-if="index == 1" src="@/assets/monitorsystem/home/sy_sb2.png" alt="" class="equipment-icon">
              <img v-if="index == 2" src="@/assets/monitorsystem/home/sy_sb3.png" alt="" class="equipment-icon">
              <img v-if="index == 3" src="@/assets/monitorsystem/home/sy_sb4.png" alt="" class="equipment-icon">
              <img v-if="index == 4" src="@/assets/monitorsystem/home/sy_sb5.png" alt="" class="equipment-icon">
              <img v-if="index == 5" src="@/assets/monitorsystem/home/sy_sb6.png" alt="" class="equipment-icon">
              <img v-if="index == 6" src="@/assets/monitorsystem/home/sy_sb7.png" alt="" class="equipment-icon">
              <img v-if="index == 7" src="@/assets/monitorsystem/home/sy_sb8.png" alt="" class="equipment-icon">
              <img v-if="index == 8" src="@/assets/MenuIcon/u996.png" alt="" class="equipment-icon">
              <img v-if="index == 9" src="@/assets/monitorsystem/home/sy_sb10.png" alt="" class="equipment-icon">
              <img src="@/assets/MenuIcon/f002811ad4a0899feb6317498aa8771.png" alt="" class="equipment-icon1">
              <div class="equipment-name">{{ item.name }}</div>
              <div class="equipment-number">
                <BaseCountTo :startVal="0" :endVal="item.num" :duration="2000" :decimals="0" />
              </div>
              <div>台</div>
            </div>
          </div>
        </div>
        <div class="stationboard-left2">
          <div class="stationboard-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: 14px;">
          <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/home/sy_xssb2.png" alt="">
            <div>
              <div class="displayflex">
                <div>
                  无人车在线率：<span class="online-number">{{ patrolInfo.robot.onLineRate }}%</span>
                </div>
                <div>
                  <span class="online-number2">{{ patrolInfo.robot.online }}</span>/{{ patrolInfo.robot.allCount }}
                </div>
              </div>
              <el-progress :percentage="patrolInfo.robot.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>
        <div class="stationboard-left3">
          <div class="stationboard-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="environment-box">
            <div class="environmentson">
              <img class="environmentson1" src="@/assets/MenuIcon/a308b7314390015c7d93c8b3039b26c.png" alt="">
              <div>
                <div class="environmentsontext">{{ environmentInfo.temperature }}<span>℃</span></div>
                <div class="environmentsonline"></div>
                <div>温度</div>
              </div>
              <img src="@/assets/monitorsystem/home/sy_hjxx.png" alt="" class="environmentsonimg">
            </div>
            <div class="environmentson">
              <img class="environmentson1" src="@/assets/MenuIcon/a308b7314390015c7d93c8b3039b26c.png" alt="">
              <div>
                <div class="environmentsontext">{{ environmentInfo.humidity }}<span>RH</span></div>
                <div class="environmentsonline"></div>
                <div>湿度</div>
              </div>
              <img src="@/assets/monitorsystem/home/sy_hjxx1.png" alt="" class="environmentsonimg">
            </div>
            <div class="environmentson">
              <img class="environmentson1" src="@/assets/MenuIcon/a308b7314390015c7d93c8b3039b26c.png" alt="">
              <div>
                <div class="environmentsontext">{{ environmentInfo.rainfall }}<span>mm</span></div>
                <div class="environmentsonline"></div>
                <div>雨量</div>
              </div>
              <img src="@/assets/monitorsystem/home/sy_hjxx2.png" alt="" class="environmentsonimg">
            </div>
            <div class="environmentson">
              <img class="environmentson1" src="@/assets/MenuIcon/a308b7314390015c7d93c8b3039b26c.png" alt="">
              <div>
                <div class="environmentsontext">{{ environmentInfo.windSpeed }}<span>级</span></div>
                <div class="environmentsonline"></div>
                <div>风速</div>
              </div>
              <img src="@/assets/monitorsystem/home/sy_hjxx3.png" alt="" class="environmentsonimg">
            </div>
            <div class="environmentson">
              <img class="environmentson1" src="@/assets/MenuIcon/a308b7314390015c7d93c8b3039b26c.png" alt="">
              <div>
                <div class="environmentsontext" style="font-size: 16px;">{{ environmentInfo.windDirection }}<span></span>
                </div>
                <div class="environmentsonline"></div>
                <div>风向</div>
              </div>
              <img src="@/assets/monitorsystem/home/sy_hjxx4.png" alt="" class="environmentsonimg">
            </div>
            <div class="environmentson">
              <img class="environmentson1" src="@/assets/MenuIcon/a308b7314390015c7d93c8b3039b26c.png" alt="">
              <div>
                <div class="environmentsontext">{{ environmentInfo.pressure }}<span>hpa</span></div>
                <div class="environmentsonline"></div>
                <div>气压</div>
              </div>
              <img src="@/assets/monitorsystem/home/sy_hjxx5.png" alt="" class="environmentsonimg">
            </div>
          </div>
        </div>
        <div class="stationboard-right1">
          <div class="stationboard-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/sy_bj.png" alt="" style="margin-bottom: 20px;">
          <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>
          <el-scrollbar height="350px" style="height: 350px;width: 351px;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>
              </div>
              <div class="tr3 tr">{{ item.alarmDate }}</div>
            </div>
          </el-scrollbar>
        </div>
        </div>
        <div class="stationboard-right2">
          <div class="stationboard-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="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="stationboard-right3">
          <div class="stationboard-box-title">
            <img src="@/assets/monitorsystem/bkzs.png" alt="">
            <div class="imgname" style="width:260px ;">巡视任务统计</div>
            <div class="visitationday" :class="{ 'visitationmonth': isvisitationday == '1' }" @click="tourTaskInit('1')">年
            </div>
            <div class="visitationday" :class="{ 'visitationmonth': isvisitationday == '2' }" @click="tourTaskInit('2')">月
            </div>
            <div class="visitationday" :class="{ 'visitationmonth': isvisitationday == '3' }" @click="tourTaskInit('3')">周
            </div>
            <div class="visitationday" :class="{ 'visitationmonth': isvisitationday == '4' }" @click="tourTaskInit('4')">日
            </div>
          </div>
          <img src="@/assets/monitorsystem/sy_bj.png" alt="" style="margin-bottom: 20px;">
          <div class="visitationbox" v-loading="loading2">
            <div class="visitationimgbox">
              <img src="@/assets/monitorsystem/home/right-icon3.png" alt="">
              <div class="visitationimgnum">
                <div>{{ tourTaskInfo.allCount }}</div>
                <div class="visitationimgtext"> 任务总数</div>
              </div>
            </div>
            <div class="visitationright">
              <div class="visitationflex">
                <div class="visitationblock"></div>
                <div>已执行</div>
              </div>
              <div>
                <span class="visitationtext">{{ tourTaskInfo.execute }}</span>
                <span>{{ tourTaskInfo.executeRate }}%</span>
              </div>
              <div class="visitationflex" style="margin-top: 20px;">
                <div class="visitationblock" style="background: rgba(255, 189, 0, 1);"></div>
                <div>待执行</div>
              </div>
              <div>
                <span class="visitationtext">{{ tourTaskInfo.toBeExecute }}</span>
                <span>{{ tourTaskInfo.toBeExecuteRate }}%</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.stationboard-left1 {
  position: absolute;
  top: 22px;
  left: 20px;
  width: 390px;
  height: 415px;
  background: url(@/assets/monitorsystem/home/sy_sbbj.png);
  background-size: 100% 100%;
  // border: 1px solid rgba(0, 249, 162,0.2);
  // background:  rgba(17, 52, 44, 0.9);
}

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

.stationboard-left3 {
  position: absolute;
  top: 737px;
  left: 20px;
  width: 390px;
  height: 250px;
  background: url(@/assets/monitorsystem/home/sy_hjxxbj.png);
  background-size: 100% 100%;

  // border: 1px solid rgba(0, 249, 162,0.2);
  // background:  rgba(17, 52, 44, 0.9);
  .environment-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;

    .environmentson {
      margin-bottom: 20px;
      width: 103px;
      height: 74px;
      // border: 1px solid rgba(0, 249, 162, 0.2);
      // background: rgba(17, 52, 44, 0.9);
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #FFFFFF;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .environmentson1 {
        width: 103px;
        height: 74px;
        position: absolute;
        left: 0px;
      }

      .environmentsontext {
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
        color: #00F9A2;

        span {
          font-family: 'Arial Normal', 'Arial';
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: rgba(255, 255, 255, 0.5);
          padding-left: 5px;
        }
      }

      .environmentsonline {
        width: 16px;
        height: 1px;
        background: inherit;
        background-color: rgba(242, 242, 242, 0.8);
        margin-bottom: 5px;
      }

      .environmentsonimg {
        padding-top: 25px;
      }
    }
  }

}

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

}

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


}

.stationboard-right3 {
  position: absolute;
  top: 747px;
  right: 20px;
  width: 392px;
  height: 240px;
  background: url(@/assets/monitorsystem/home/sy_ycsjbj.png);
  background-size: 100% 100%;
}

.stationboard-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;
}

.titleline {
  width: 100%;
  height: 1px;
  // background: linear-gradient( to left#ffffff 20%, rgb(0,249,162));
  background-image: linear-gradient(to right, rgb(0, 249, 162, 0.5), transparent);
}

.equipment-displayflex {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;



  .equipment-box {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 27px;
    margin-left: 20px;
    width: 164px;
    height: 42px;
    // background: rgb(0, 249, 162, 0.1);
    // border-top: 1px solid rgba(78, 103, 94, 1);
    // border-bottom: 1px solid rgba(78, 103, 94, 1);
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    line-height: normal;

    .equipment-icon {
      position: absolute;
      top: -15px;
      left: 10px;
    }

    .equipment-icon1 {
      width: 164px;
      height: 42px;
      position: absolute;
      top: -1px;
      left: 0px;
    }

    .equipment-name {
      width: 105px;
      text-align: left;
      padding-left: 10px;
    }

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

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

.online-displayflex {
  margin-top: 5px;
  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;
}

.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;
}

.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(rgb(0 249 162 / 40%) 0%, transparent 70%);
      border: 1px solid rgb(0 249 162 / 30%);
      border-radius: 50%;
      -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: 63px;
      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);
  }

}








.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 {
  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 rgba(0, 249, 162, 0.2);
  background: rgba(0, 249, 162, 0.1);
  color: #00F9A2;
  border-radius: 3px;
}

.visitationbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  .visitationimgbox {
    position: relative;
    width: 160px;
    height: 160px;
    margin-right: 50px;

    .visitationimgnum {
      position: absolute;
      top: 45px;
      width: 160px;
      text-align: center;
      font-family: '钉钉进步体 Bold', '钉钉进步体 Regular', '钉钉进步体';
      font-weight: 700;
      font-style: normal;
      font-size: 36px;
      color: #FFFFFF;

      .visitationimgtext {
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #FFFFFF;
      }
    }
  }
}

.visitationright {
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #FFFFFF;

  .visitationflex {
    display: flex;
    align-items: center;

    .visitationblock {
      width: 6px;
      height: 6px;
      background-color: rgba(0, 249, 162, 1);
      margin-right: 5px;
    }
  }

  .visitationtext {
    font-family: '钉钉进步体';
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #00F9A2;
    padding-left: 10px;
    padding-right: 20px;
  }

}

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

.table_th {
  width: 351px;
  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: 126px;
}

.tr2 {
  width: 90px;
}

.tr3 {
  width: 140px;
}

.table_main_body {
  margin: auto;
  width: 351px;
  height: 338px;
  overflow: hidden;
  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%);
}

.three_button {
  position: fixed;
  bottom: 18px;
  right: 450px;
  z-index: 1;
  width: 100px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  background-image: url(@/assets/3d/an_d1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  color: rgb(0, 249, 162);
}


</style>


