<template>
  <div>
    <Alarminformation v-if="isAlarm" style="position: absolute;top: 0;z-index: 2001;" :alarminInfo="alarminInfo"
      @closeAlarm="closeAlarm" />
    <el-scrollbar height="calc(100vh - 90px)" style="height: calc(100vh - 90px);">
      <div style="position: relative; height: 100%;">
        <div style="width: calc(100vw);
          height: 100vh;
          position: fixed;
          top: 60px;
          ">
          <!-- <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">
            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>主设备信息</span></div>
          </div>
          <div class="one_box">
            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_left1.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">变压器</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.transformer }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>
            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_right1.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">干式电抗器</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.dryTypeReactor }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>
            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_left2.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">GIS</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.gis }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>
            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_right2.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">断路器</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.circuitBreaker }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>
            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_left3.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">隔离开关</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.disconnector }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>
            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_right3.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">电流互感器</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.currentTransformer }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>

            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_right4.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">电压互感器</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.voltageTransformer }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>

            <div class="one_box_all">
              <div class="all_img"><img src="@/assets/sytlechange/one_right5.svg" alt=""></div>
              <div class="all_text">
                <div class="all_text_qian">避雷器</div>
                <div>
                  <span class="all_text_hou_one">{{ equipmentlist.lightningRod }}</span>
                  <span class="all_text_hou_two">个</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="stationboard-left2">
          <div class="stationboard-box-title">
            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>装置状态信息</span></div>
          </div>
          <div class="two_box">
            <div class="two_box_all" v-if="patrolInfo.camera">
              <div class="two_img"><img src="@/assets/sytlechange/two-left-1.svg" alt=""></div>
              <div class="two_body">
                <div class="two_text">
                  <div class="two_text_one">
                    <span class="one_one">摄像头</span>
                    <span class="one_two">{{ patrolInfo.camera.online }}<span class="one_three">/{{
                        patrolInfo.camera.allCount }}</span></span>
                  </div>
                  <div class="two_text_two">
                    <span class="two_one">在线率:</span>
                    <span class="two_two">{{ patrolInfo.camera.onLineRate }}%</span>
                  </div>
                </div>
                <div class="two_img_all">
                  <el-progress style="width: 100%;" :percentage="patrolInfo.camera.onLineRate" />
                </div>
              </div>
            </div>
            <div class="two_box_all" v-if="patrolInfo.voice">
              <div class="two_img"><img src="@/assets/sytlechange/two-left-2.svg" alt=""></div>
              <div class="two_body">
                <div class="two_text">
                  <div class="two_text_one">
                    <span class="one_one">声纹设备</span>
                    <span class="one_two">{{ patrolInfo.voice.online }}<span class="one_three">/{{
                        patrolInfo.voice.allCount }}</span></span>
                  </div>
                  <div class="two_text_two">
                    <span class="two_one">在线率:</span>
                    <span class="two_two">{{ patrolInfo.voice.onLineRate }}%</span>
                  </div>
                </div>
                <div class="two_img_all">
                  <el-progress style="width: 100%;" :percentage="patrolInfo.voice.onLineRate" />
                </div>
              </div>
            </div>
            <div class="two_box_all" v-if="patrolInfo.gateway">
              <div class="two_img"><img src="@/assets/sytlechange/two-left-3.svg" alt=""></div>
              <div class="two_body">
                <div class="two_text">
                  <div class="two_text_one">
                    <span class="one_one">网关机</span>
                    <span class="one_two">{{ patrolInfo.gateway.online }}<span class="one_three">/{{
                      patrolInfo.gateway.allCount }}</span></span>
                  </div>
                  <div class="two_text_two">
                    <span class="two_one">在线率:</span>
                    <span class="two_two">{{ patrolInfo.gateway.onLineRate }}%</span>
                  </div>
                </div>
                <div class="two_img_all">
                  <el-progress style="width: 100%;" :percentage="patrolInfo.gateway.onLineRate" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="stationboard-left3">
          <div class="stationboard-box-title">
            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>微气象信息</span></div>
          </div>
          <div class="three_body">
            <div class="three_box">
              <div class="three_top">
                <div class="three_top_left">温度</div>
                <div class="three_top_right"><img src="@/assets/sytlechange/three1.svg" alt=""></div>
              </div>
              <div class="three_bottom">
                <span class="three_bottom_one">{{ environmentInfo.temperature == '无' ? environmentInfo.temperature :
                  Number(environmentInfo.temperature).toFixed(2) }}</span>
                <span class="three_bottom_two">℃</span>
              </div>
            </div>
            <div class="three_box">
              <div class="three_top">
                <div class="three_top_left">湿度</div>
                <div class="three_top_right"><img src="@/assets/sytlechange/three2.svg" alt=""></div>
              </div>
              <div class="three_bottom">
                <span class="three_bottom_one">{{ environmentInfo.humidity == '无' ? environmentInfo.humidity : Number(
                  environmentInfo.humidity).toFixed(2) }}</span>
                <span class="three_bottom_two">RH</span>
              </div>
            </div>
            <div class="three_box">
              <div class="three_top">
                <div class="three_top_left">风速</div>
                <div class="three_top_right"><img src="@/assets/sytlechange/three3.svg" alt=""></div>
              </div>
              <div class="three_bottom">
                <span
                  class="three_bottom_one">{{ environmentInfo.windSpeed == '无' ? environmentInfo.windSpeed : Number(environmentInfo.windSpeed).toFixed(2)
                  }}</span>
                <span class="three_bottom_two">级</span>
              </div>
            </div>
            <div class="three_box">
              <div class="three_top">
                <div class="three_top_left">风向</div>
                <div class="three_top_right"><img src="@/assets/sytlechange/three4.svg" alt=""></div>
              </div>
              <div class="three_bottom">
                <span class="three_bottom_one">{{ environmentInfo.windDirection }}</span>
                <span class="three_bottom_two">SW</span>
              </div>
            </div>
            <div class="three_box">
              <div class="three_top">
                <div class="three_top_left">气压</div>
                <div class="three_top_right"><img src="@/assets/sytlechange/three5.svg" alt=""></div>
              </div>
              <div class="three_bottom">
                <span class="three_bottom_one">{{
                  environmentInfo.pressure == '无' ? environmentInfo.pressure : Number(environmentInfo.pressure).toFixed(2)
                  }}</span>
                <span class="three_bottom_two">HPA</span>
              </div>
            </div>
            <div class="three_box">
              <div class="three_top">
                <div class="three_top_left">降雨量</div>
                <div class="three_top_right"><img src="@/assets/sytlechange/three6.svg" alt=""></div>
              </div>
              <div class="three_bottom">
                <span class="three_bottom_one">{{
                  environmentInfo.rainfall == '无' ? environmentInfo.rainfall : Number(environmentInfo.rainfall).toFixed(2)
                  }}</span>
                <span class="three_bottom_two">MM</span>
              </div>
            </div>
          </div>
        </div>
        <div class="stationboard-right1" id="tableTr">
          <div class="stationboard-box-title" style="padding-bottom:0px ;">
            <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;"> 
              <div class="img_txt">
                <img src=@/assets/navigation/ty_bq.png alt=""><span>告警列表</span>
              </div>
              <el-button class="searchButton"  @click="alarmInfoClick" >详情</el-button>
            </div>
          </div>
          <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="180px" style="height: 180px;width: 100%;margin: auto;" @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> -->
                  <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">{{ dateFormat(item.alarmDate) }}</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="stationboard-right2">
          <div class="stationboard-box-title">
            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>告警准确率</span></div>
          </div>
          <div class="right2_body" v-if="rate">
            <div class="right2_box">
              <div class="box_text">
                <div class="box_text_one">{{ rate.confirmationRate || 0 }}%</div>
                <div class="box_text_two">报警准确率</div>
              </div>
            </div>
            <div class="right2_box_left">
              <div class="box_text">
                <div class="box_text1">核查总数</div>
                <div class="box_text3"> <img src="@/assets/navigation/sysy_gjl2.png" alt=""></div>
                <div class="box_text2">{{ rate.totalAlarms || 0 }} <span class="span">条</span></div>
              </div>
              <div class="box_text" style="margin-top: 30px;">
                <div class="box_text1">确认告警总数</div>
                <div class="box_text3"> <img src="@/assets/navigation/sysy_gjl2.png" alt=""></div>
                <div class="box_text2">{{ rate.confirmedCount || 0 }} <span class="span">条</span></div>
              </div>
            </div>
          </div>

        </div>
        <div class="stationboard-right3">
          <div class="stationboard-box-title">
            <div class="img_txt"> <img src=@/assets/navigation/ty_bq.png alt=""><span>巡视任务统计</span></div>
            <div class="stationboard-box-title-right">
              <span :class="tabs == 1 ? 'span1' : ''" @click="tourTaskInit(1)">年</span>
              <span :class="tabs == 2 ? 'span1' : ''" @click="tourTaskInit(2)">月</span>
              <span :class="tabs == 3 ? 'span1' : ''" @click="tourTaskInit(3)">周</span>
              <span :class="tabs == 4 ? 'span1' : ''" @click="tourTaskInit(4)">日</span>
            </div>
          </div>
          <div class="right_three_body" v-loading="loading2">
            <div class="three_left">
              <div class="three_left_top">{{ tourTaskInfo.executeRate }}%</div>
              <div class="three_left_bottom">任务执行率</div>
            </div>
            <div class="three_right">
              <div class="three_right1">任务总数 <span class="spanc1">{{ tourTaskInfo.allCount }}</span></div>
              <div class="three_right2">已执行任务数<span class="spanc2">{{ tourTaskInfo.execute }}</span></div>
              <div class="three_right3">未执行任务数<span class="spanc3">{{ tourTaskInfo.toBeExecute }}</span></div>
            </div>
          </div>

        </div>

      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
export default {
  name: "dashboard", // 变电站首页
};
</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, getConfirmationRate } from "@/api/home";
import Modelset from './3DModelSet.vue';
import { getTaskTodoStatByMonth } from "@/api/areaboard";
import { useUserStore } from '@/store/modules/user';
import * as echarts from 'echarts';
import router from '@/router';
const userStore = useUserStore();
watch(() => userStore.alarmCount, (newValue, oldValue) => {
  alarmCount.value = newValue
  tableTimerInterval.value = 100
  bsGetProductProcess()
}, { deep: true })
//时间转换
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return month + "-" + day + " " + hours + ":" + minutes;
  }
}
function alarmInfoClick() {
  router.push(`/task/alarmInfo/index`)

}
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: {}
})
const equipmentlist: any = ref({})
function getEquipment() {
  let params = {
    stationCode: userStore.stationCode
  }
  getMainDeviceNumber(params).then((res: any) => {
    if (res.data != null) {
      equipmentlist.value = res.data
    }
  })
}

function getInit() {
  let params = {
    stationId: userStore.stationId
  }
  getWeatherLogList(params).then((res: any) => {
    environmentInfo.value = res.data
  })
  //获取巡视设备在线率
  getPatrolDeviceOnLine(params).then((res: any) => {
    patrolInfo.value = res.data
  })

  //异常事件统计
  getExceptionEventStat(params).then((res: any) => {
    abnormalInfo.value = res.data
  })
}
const tourTaskInfo: any = ref({})
// 天气
const url = userStore.webApiBaseUrl;
// const ws1 = new WebSocket(userStore.wsApiBaseUrl + '/websocket/vibe_run_data_' + userStore.userId);
// // var source = new EventSource(url + "/sse/connect/vibe_run_data_" + userStore.userId,)
// function setupWebSocket() {

//   ws1.onopen = () => {
//     console.log('WebSocket连接成功');
//   };
//   ws1.onerror = (error: any) => {
//   };
//   ws1.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
//       }
//     }
//   };
//   ws1.onclose = () => {
//   };
// }

const environmentInfo = ref({
  temperature: "",
  humidity: "",
  rainfall: "",
  windSpeed: "",
  windDirection: "",
  pressure: ""
})
const environment = ref()
const rate: any = ref()
function getgetConfirmationRate() {
  getConfirmationRate({ stationId: userStore.stationId }).then((res: any) => {
    rate.value = res.data
  })
}
onMounted(() => {
  clearInterval(tableTimer)
  isModelset.value = true
  if (userStore.stationId == "" || userStore.stationId == null) {
    return
  }
  bsGetProductProcess()
  getInit()
  tourTaskInit('1')
  // setupWebSocket()
  getEquipment()
  getgetConfirmationRate()

  alarmCount.value = userStore.alarmCount
});
onBeforeUnmount(() => {
  // if (ws1 != null) {
  //   ws1.close()
  // }
  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
}

const option = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['已执行', '待执行'],
    textStyle: {
      color: '#ffffff'//字体颜色
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
    splitLine: { //修改背景线条样式
      show: true,//是否展示 
      lineStyle: {
        color: "rgba(152, 224, 255, 0.1)",//线条颜色
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#B5D7FF',  //更改坐标轴文字颜色
        fontSize: 14      //更改坐标轴文字大小
      }
    },
  },
  xAxis: {
    type: 'category',
    data: ['01月', '02月', '03月', '04月', '05月', '07月', '08月', '09月', '10月', '11月', '12月'],
    axisLine: {
      // lineStyle:{
      //   color:'rgba(150,255,255,1)' //更改坐标轴颜色
      // }
    },

    axisLabel: {
      show: true,
      textStyle: {
        color: '#B5D7FF',  //更改坐标轴文字颜色
        fontSize: 14      //更改坐标轴文字大小
      }
    },
  },
  series: [
    {
      name: '已执行',
      type: 'bar',
      barWidth: "12px",
      itemStyle: {
        normal: {
          barBorderRadius: [15, 15, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(150,255,255)'
          }, {
            offset: 1,
            color: 'rgba(19,26,37,1)'
          }])
        }
      },
      data: [300, 100, 210, 300, 100, 210, 300, 100, 210, 300, 100, 210]
    },
    {
      name: '待执行',
      type: 'bar',
      barWidth: "12px",
      itemStyle: {
        normal: {
          barBorderRadius: [15, 15, 0, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgb(105,130,250)'
          }, {
            offset: 1,
            color: 'rgba(19,26,37,1)'
          }])
        }
      },
      data: [560, 310, 400, 560, 310, 400, 560, 310, 400, 560, 310, 400]
    }
  ]
})

function tourTaskInit(type: any) {
  tabs.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
  })
}
//巡视计划统计tab切换
const tabs = ref(1)
</script>


<style scoped lang="scss">
.stationboard-left1 {
  position: absolute;
  top: 16px;
  left: 15px;
  width: 450px;
  height: 400px;
  background: url(@/assets/navigation/sy_zsb.png);
  background-size: 100% 100%;
  background-color: #001f59d7;
  box-sizing: border-box;
  padding: 0px 20px;

  .one_box {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;

    .one_box_all {
      width: 187px;
      height: 46px;
      background-image: url(@/assets/sytlechange/one.svg);
      position: relative;
      padding-left: 20px;
      margin: 17px 0px;

      .all_img {
        width: 23px;
        height: 23px;
        position: absolute;
        top: -11px;
        // left:20px;
      }

      .all_text {
        width: 100%;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .all_text_qian {
          font-size: 12px;
          color: #B5D7FF;
        }

        .all_text_hou_one {
          font-family: 钉钉进步体;
          font-weight: 400;
          font-style: normal;
          color: rgb(0, 255, 255);
          display: inline-block;
          margin-right: 5px;
        }

        .all_text_hou_two {
          font-family: 钉钉进步体;
          font-weight: 400;
          font-style: normal;
          font-size: 10px;
          color: rgb(255, 255, 255);
        }
      }
    }
  }
}

.stationboard-left2 {
  position: absolute;
  top: 420px;
  left: 15px;
  width: 450px;
  height: 290px;
  background: url(@/assets/navigation/sy_zz.png);
  background-size: 100% 100%;
  background-color: #001f59d7;
  box-sizing: border-box;
  padding: 0px 20px;

  .el-progress-bar__inner {
    background-color: #0099ff;
  }

  .two_box {
    width: 100%;

    .two_box_all {
      width: 100%;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;

      .two_img {
        width: 36px;
        height: 36px;
        box-sizing: border-box;
        border-bottom: 2px #0099ff solid;
        background-color: rgba(0, 153, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .two_body {
        width: 360px;
        height: 36px;
        flex-direction: column;
        justify-content: space-between;

        .two_text {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 5px;

          .two_text_one {
            .one_one {
              font-family: 'Arial Normal', 'Arial';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #B5D7FF;
            }

            .one_two {
              display: inline-block;
              margin-left: 30px;
              font-family: '钉钉进步体';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #00FFFF;

              .one_three {
                color: #FFFFFF;
              }
            }
          }

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

            .two_two {
              font-family: '钉钉进步体';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #00FFFF;
            }
          }
        }
      }
    }
  }
}

.stationboard-left3 {
  position: absolute;
  top: 715px;
  left: 15px;
  width: 450px;
  height: 273px;
  background: url(@/assets/navigation/sy_gj.png);
  background-size: 100% 100%;
  background-color: #001f59d7;
  box-sizing: border-box;
  padding: 0px 20px;

  .three_body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .three_box {
      width: 125px;
      height: 80px;
      background: url(@/assets/navigation/sy_qx.png);
      background-size: 100% 100%;
      padding: 13px 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20px;

      .three_top {
        width: 100%;
        font-family: 'MicrosoftYaHei Normal', 'MicrosoftYaHei';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        color: #B5D7FF;
        line-height: 11px;
        position: relative;

        .three_top_right {
          position: absolute;
          top: -3px;
          right: 0px;
        }
      }

      .three_bottom {
        .three_bottom_one {
          font-family: '钉钉进步体';
          font-weight: 400;
          font-style: normal;
          font-size: 24px;
          color: #00FFFF;
          line-height: 23px;
          margin-right: 10px;
        }

        .three_bottom_two {
          font-family: 'MicrosoftYaHei Normal', 'MicrosoftYaHei';
          font-weight: 400;
          font-style: normal;
          font-size: 12px;
          color: #B5D7FF;
          line-height: 11px;
        }
      }
    }
  }
}

.stationboard-right1 {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 450px;
  height: 318px;
  background: url(@/assets/navigation/sy_gj.png);
  background-size: 100% 100%;
  background-color: #001f59d7;
  box-sizing: border-box;
  padding: 0px 20px;

}

.stationboard-right2 {
  position: absolute;
  top: 340px;
  right: 15px;
  width: 450px;
  height: 317px;
  background: url(@/assets/navigation/sy_bjl.png);
  background-size: 100% 100%;
  background-color: #001f59d7;
  box-sizing: border-box;
  padding: 0px 20px;

  .right2_body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right2_box {
      width: 221px;
      height: 225px;
      background: url(@/assets/sytlechange/right_two.svg);

      .box_text {
        width: 100%;
        height: 225px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .box_text_one {
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
          font-weight: 700;
          font-style: normal;
          font-size: 40px;
          color: #00FFFF
        }

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

    .right2_box_left {
      width: 96px;
      margin-right: 25px;

      .box_text {
        width: 96px;

        .box_text1 {
          font-family: '微软雅黑';
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: #B5D7FF;
          line-height: 11px;
        }

        .box_text2 {
          font-family: '钉钉进步体';
          font-weight: 400;
          font-style: normal;
          font-size: 30px;
          color: #00FFFF;
          line-height: 23px;

          .span {
            font-family: '钉钉进步体';
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 14px;
          }
        }

        .box_text3 {
          margin: 10px 0px;
        }
      }

    }
  }
}

.stationboard-right3 {
  position: absolute;
  top: 666px;
  right: 15px;
  width: 450px;
  height: 323px;
  background: url(@/assets/navigation/sy_rw.png);
  background-size: 100% 100%;
  background-color: #001f59d7;
  box-sizing: border-box;
  padding: 0px 20px;

  .right_three_body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .three_left {
      width: 221px;
      height: 235px;
      background: url(@/assets/sytlechange/right3.svg);
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .three_left_top {
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight: 700;
        font-style: normal;
        font-size: 40px;
        color: #00FFFF
      }

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

    .three_right {
      height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      div {
        width: 154px;
        height: 35px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        color: #FFFFFF;
        font-size: 14px;

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

        .spanc2 {
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
          font-weight: 700;
          font-style: normal;
          font-size: 20px;
          color: #009933;
        }

        .spanc3 {
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
          font-weight: 700;
          font-style: normal;
          font-size: 20px;
          color: #ff9900;
        }
      }

      .three_right1 {
        background: url(@/assets/sytlechange/right31.svg);
        background-size: 100% 100%;
      }

      .three_right2 {
        background: url(@/assets/sytlechange/right32.svg);
        background-size: 100% 100%;
      }

      .three_right3 {
        background: url(@/assets/sytlechange/right33.svg);
        background-size: 100% 100%;
      }
    }
  }
}

.stationboard-box-title {
  width: 100%;
  padding: 20px 0px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .img_txt {
    display: flex;
    align-items: center;
    color: #fff !important;
    font-size: 16px;
    font-weight: bold;

    img {
      margin-right: 10px;

    }

  }

  .stationboard-box-title-right {
    width: 150px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .span1 {
      display: inline-block;
      width: 30px;
      height: 26px;
      box-sizing: border-box;
      background-color: #0099ff;
      text-align: center;
      line-height: 24px;
      color: #ffffff;
      cursor: pointer;
      border-radius: 5px;
      font-family: '微软雅黑';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
    }

    span {
      display: inline-block;
      width: 30px;
      height: 26px;
      box-sizing: border-box;
      border: 1px solid #0069bd;
      background-color: #003776;
      text-align: center;
      line-height: 24px;
      color: #B5D7FF;
      cursor: pointer;
      border-radius: 5px;
      font-family: '微软雅黑';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
    }

    span:hover {
      color: #ffffff;
    }
  }
}

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

.online-displayflex {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  padding: 20px 25px 0;

  .onlinetext1 {
    padding-top: 4px;
    font-size: 22px;
    font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
    font-weight: 700;
    font-style: normal;
  }

  .onlinetext2 {
    padding-top: 2px;
    font-size: 14px;
    color: #B5D7FF;
  }

}

.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 {
  position: relative;
  // display: flex;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // flex-wrap: wrap;


  .classificationbox {
    position: absolute;
    display: flex;
    align-items: center;

    .abnormalimgbox {
      position: relative;
      width: 70px;
      height: 70px;
      background: url(@/assets/home/sy_yc.png);
      background-size: 100% 100%;
      margin-right: 13px;
    }

    .abnormalimgrightbox {
      font-size: 14px;
      color: #B5D7FF;
      font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
      font-weight: 700;
      font-style: normal;

      .abnormalimgrighttext2 {
        font-size: 22px;
        color: #fff;
      }
    }
  }
}



@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: 100%;
  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: 14px;
  color: #fff;
  text-align: center;
  margin: auto;
  box-sizing: border-box;
  border-left: 3px solid #0099ff;
  border-right: 3px solid #0099ff;
}

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

.tr1 {
  width: 200px;
  text-align: left;
  padding-left: 10px;
}

.tr2 {
  width: 90px;
}

.tr3 {
  width: 114px;
}

.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: #ffffff19;
  cursor: pointer;
}

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

.three_button {
  position: fixed;
  bottom: 18px;
  right: 470px;
  z-index: 1;
  width: 80px;
  height: 33px;
  line-height: 33px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #0099ffcb;
  background-color: #0099ff34;
  border-radius: 5px;
  // background-color: ;
  color: #fff;
}



.wqxsjtext1 {
  position: absolute;
  top: 15px;
  left: 14px;
  color: rgba(181, 215, 255, 0.6);
  font-size: 14px;
  // B5D7FF.60
}

.wqxsjtext2 {
  position: absolute;
  top: 50px;
  left: 14px;
  color: #0ACAFF;
  font-size: 30px;
  // B5D7FF.60
}

.wqxsjtext3 {
  position: absolute;
  top: 65px;
  right: 14px;
  color: rgba(181, 215, 255, 0.6);
  font-size: 14px;
  // B5D7FF.60
}

.statisticbg {
  position: relative;
  margin-left: 24px;
  margin-top: 30px;
  width: 200px;
  height: 200px;
  background-image: url(@/assets/home/sy_rw.png);
  background-size: 100% 100%;
  text-align: center;

  .statisticbgtext1 {
    padding-top: 65px;
    width: 100%;
    color: #ffffff;
    font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
  }

  .statisticbgtext2 {
    width: 100%;
    color: #0ACAFF;
    font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
  }
}

.statisticrightbg {
  position: absolute;
  right: 40px;
  top: 103px;

  .statisticrighttext1 {
    font-size: 14px;
    color: #B5D7FF;
    font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
    font-weight: 700;
    font-style: normal;
    padding-bottom: 5px;
  }

  .statisticrighttext2 {
    width: 83px;
    height: 2px;
    background-image: url(@/assets/home/sy_rws.png);
    background-size: 100% 100%;
  }

  .statisticrighttext3 {
    font-size: 28px;
    // color: rgba(144,144,144);
    color: #fff;
    font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
    font-weight: 700;
    font-style: normal;
  }
}
</style>
<style>
.statisticbg .el-progress-circle__track {
  display: none;
}

.statisticbg .el-progress-circle {
  width: 180px !important;
  height: 180px !important;
}

.abnormalimgbox .el-progress-circle__track {
  display: none;
}

.abnormalimgbox .el-progress-circle {
  /* transform:rotateY(180deg); */
  width: 60px !important;
  height: 60px !important;
}

.abnormalimgbox .el-progress__text {
  color: #fff;
  font-size: 20px;
  font-family: "阿里妈妈数黑体 Bold", "阿里妈妈数黑体";
  font-weight: 700;
  font-style: normal;
}
</style>
