<template>
  <div class="workbench" :class="{'isItFullScreen': isItFullScreen }">
    <div class="largeScreenTitle">
      <img class="largeScreenTitleImg" src="../../../assets/largeScreen/系统标题%20(1).png" alt="加载失败">
      <div class="headInformation">
        <div>
          <img src="../../../assets/largeScreen/日期.png" alt="">
          <span>2025-3-12:23:33</span>
          <img src="../../../assets/largeScreen/icon／通用／天气.png" alt="">
          <span>晴天 32</span>
        </div>
        <div class="titleImg">
          <img src="../../../assets/largeScreen/XXXXXX工业园管理平台.png" alt="">
        </div>
        <div class="fullScreen">
          <img @click="enterFullscreen()" src="../../../assets/largeScreen/Vector.png" alt="">
        </div>
      </div>
    </div>
    <div class="layoutContainer">
      <div class="theLeft">
        <div class="theLeftItem">
          <div class="theLeftItemTitle">设备状态</div>
          <div class="theLeftItemContent  equipmentStatus">
            <div class="updateTime">更新时间： 2024-12-34</div>
            <div class="updateTimeMap">
              <div class="updateTimeMapItem">
                <el-progress type="circle" color="#0b9ff4" :stroke-width="10" width="70" :percentage="80" />
              </div>
              <div class="updateTimeMapItem">
                <el-progress type="circle" color="#e0940b" :stroke-width="10" width="70" :percentage="60" />
              </div>
              <div class="updateTimeMapItem">
                <el-progress type="circle" color="#CBF2FA" :stroke-width="10" width="70" :percentage="90" />
              </div>
              <div class="updateTimeMapItem">
                <el-progress type="circle" color="#95ee0f" :stroke-width="10" width="70" :percentage="40" />
              </div>
            </div>
            <div class="progressBarTitle">
              <span>火警</span>
              <span>火警</span>
              <span>火警</span>
              <span>火警</span>
            </div>
          </div>
        </div>
        <div class="theLeftItem">
          <div class="theLeftItemTitle">设备状态</div>
          <div class="theLeftItemContent  eventStatistics">
            <div class="eventStatisticsItem" v-for="index of 6" :key="index">
              <img v-if="index <= 3" src="../../../assets/largeScreen/未处理报警数.png" alt="">
              <img v-else src="../../../assets/largeScreen/已处理报警数.png" alt="">
              <div>
                <p>65</p>
                <span>未处理报警数</span>
              </div>
            </div>
          </div>
        </div>
        <div class="theLeftItem">
          <div class="theLeftItemTitle">履职雷达图</div>
          <div class="theLeftItemContent performanceContainer">
            <div class="performanceRadarChart" id="deputyActivity"></div>
            <div class="performanceRadarInfo">
              <div v-for="index of 6" :key="index">A 制度建设</div>
            </div>
          </div>
        </div>
        <div class="theLeftItem">
          <div class="theLeftItemTitle titleOfHazardStatistics">
            <span>隐患统计</span>
            <el-select
              style="width: 100px;"
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="theLeftItemContent hazardStatistics">
            <div class="hazardStatisticsTitle">
              <div>
                <p>发现隐患： 14</p>
                <img src="../../../assets/largeScreen/标注.png" alt="">
              </div>
              <div>
                <p>处理隐患： 28</p>
                <img src="../../../assets/largeScreen/标注.png" alt="">
              </div>
            </div>
            <div class="hiddenDangerMap" id="hiddenDangerMap"></div>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="middleItem3d">
          <iframe ref="middle3d" class="middleItem_3d" src="http://183.222.39.242:9999/webgl/"></iframe>
        </div>
        <div class="middleItem middleItemBox">
          <div class="middleItemContainer">
            <div class="theLeftItemTitle">警告时段分析</div>
            <div class="theLeftItemContent warningPeriodAnalysis">
              <div class="warningPeriodAnalysisItem">
                <div class="warningPeriodAnalysisItemTitle">
                  <i></i>
                  <span>白天：</span>
                  <span>10 - 12时</span>
                  <i></i>
                </div>
                <div class="accountForTitle">
                  <span>共报表</span>
                  <span>占比</span>
                </div>
                <div class="accountForNumber">
                  <span>41起</span>
                  <span>36%</span>
                </div>
                <div class="warningPeriodAnalysisItemTitle">
                  <i></i>
                  <span>白天：</span>
                  <span>10 - 12时</span>
                  <i></i>
                </div>
                <div class="accountForTitle">
                  <span>共报表</span>
                  <span>占比</span>
                </div>
                <div class="accountForNumber">
                  <span>41起</span>
                  <span>36%</span>
                </div>
              </div>
              <div class="warningPeriodAnalysisItem" id="warningPeriodAnalysisItem"></div>
            </div>
          </div>
          <div class="middleItemContainer">
            <div class="theLeftItemTitle titleOfHazardStatistics">
              <span>报警趋势</span>
              <el-select
                style="width: 100px;"
                v-model="value"
                class="m-2"
                placeholder="Select"
                size="large">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div id="alarmTrend" class="theLeftItemContent"></div>
          </div>
        </div>
        <div class="middleItem">
          <div class="theLeftItemTitle">设备状态</div>
          <div class="theLeftItemContent  eventStatisticsStatic">
            <div class="eventStatisticsStaticItem">
              <p>
                <span>800</span>
                个
              </p>
              <img src="../../../assets/largeScreen/火灾报警.png" alt="">
              <p>火灾报警</p>
            </div>
            <div class="eventStatisticsStaticItem">
              <p>
                <span>800</span>
                个
              </p>
              <img src="../../../assets/largeScreen/火灾报警.png" alt="">
              <p>电气报警</p>
            </div>
            <div class="eventStatisticsStaticItem">
              <p>
                <span>800</span>
                个
              </p>
              <img src="../../../assets/largeScreen/消防给水.png" alt="">
              <p>消防给水</p>
            </div>
            <div class="eventStatisticsStaticItem">
              <p>
                <span>800</span>
                个
              </p>
              <img src="../../../assets/largeScreen/气体灭火.png" alt="">
              <p>气体灭火</p>
            </div>
            <div class="eventStatisticsStaticItem">
              <p>
                <span>800</span>
                个
              </p>
              <img src="../../../assets/largeScreen/消火栓.png" alt="">
              <p>消火栓</p>
            </div>
            <div class="eventStatisticsStaticItem">
              <p>
                <span>800</span>
                个
              </p>
              <img src="../../../assets/largeScreen/消防电源.png" alt="">
              <p>消防电源</p>
            </div>
          </div>
        </div>
      </div>
      <div class="theRightSide">
        <div class="theRightSideItem">
          <div class="theLeftItemTitle">系统评分</div>
          <div class="theLeftItemContent systemScore">
            <div class="systemScoreLeft" id="systemScoreLeft"></div>
            <div class="systemScoreRight">
              <div class="systemScoreRightItem">
                <p>报警处理率</p>
                <span>98%</span>
              </div>
              <div class="systemScoreRightItem">
                <p>信息处理率</p>
                <span>98%</span>
              </div>
              <div class="systemScoreRightItem">
                <p>巡查处理率</p>
                <span>98%</span>
              </div>
              <div class="systemScoreRightItem">
                <p>设备完好率</p>
                <span>98%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="theRightSideItem">
          <div class="theLeftItemTitle">应急资源</div>
          <div class="theLeftItemContent">
            <div class="theLeftItemContent  eventStatistics" id="emergencyResources">
              <div class="eventStatisticsItem" v-for="index of 6" :key="index">
                <img src="../../../assets/largeScreen/救援队伍.png" alt="">
                <div>
                  <p>65</p>
                  <span>救援队伍</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="theRightSideItem">
          <div class="theLeftItemTitle">值班查岗</div>
          <div class="theLeftItemContent onDutyInspection">
            <div id="onDutyInspection"></div>
            <div class="onDutyInspectionRight">
              <div class="onDutyInspectionMap" v-for="index of 3" :key="index">
                <div>
                  <i></i>
                  <span>查岗次数</span>
                </div>
                <span>56次</span>
              </div>
            </div>
          </div>
        </div>
        <div class="theRightSideItem">
          <div class="theLeftItemTitle titleOfHazardStatistics">
            <span>告警消息</span>
            <el-select
              style="width: 100px;"
              v-model="value"
              class="m-2"
              placeholder="Select"
              size="large">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="theLeftItemContent">
            <div class="theLeftItemContentTab">
              <div>警告时间</div>
              <div>警告位置</div>
              <div>设备类型</div>
            </div>
            <div class="theLeftItemContentTable">
              <div class="theLeftItemContentTableItem" v-for="index of scrollListArr" :key="index">
                <div>2025-3-18</div>
                <div>B栋2楼204室</div>
                <div>独立烟感</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref, onMounted, onUnmounted, nextTick } from "vue"
import * as echarts from "echarts"
import { ElLoading } from "element-plus"

let app_main = null
let middle3d = ref(null)
let value = ref(1)
let isItFullScreen = ref(false)
let scrollListArr = ref(new Array(20).fill(0))
let options = ref([
  {
    label: "近一周",
    value: 1
  },
  {
    label: "近一月",
    value: 2
  }
])

/**
 * 初始化字体
 */
const initializeFontSize = () => {
  let baseSize = 192
  let basePc = baseSize / 1920 // 表示1920的设计图,使用100PX的默认值
  let vW = window.innerWidth // 当前窗口的宽度
  let vH = window.innerHeight // 当前窗口的高度
  // 非正常屏幕下的尺寸换算
  let dueH = vW * 1080 / 1920
  if (vH > dueH) { // 当前屏幕高度小于应有的屏幕高度，就需要根据当前屏幕高度重新计算屏幕宽度
    vW = vH * 1920 / 1080
  }
  let rem = vW * basePc // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
  document.documentElement.style.fontSize = rem + "px"
}

/**
 * 履职雷达图
 */
const performanceRadarChart = () => {
  let chartDom = document.getElementById("deputyActivity")
  let myChart = echarts.init(chartDom)
  let option

  option = {
    legend: {
      show: false  // 隐藏图例
    },
    radar: {
      indicator: [
        { name: "A", max: 6500 },
        { name: "B", max: 16000 },
        { name: "C", max: 30000 },
        { name: "D", max: 38000 },
        { name: "E", max: 52000 },
        { name: "F", max: 52000 }
      ],
      nameGap: 4 // 图中工艺等字距离图的距离
    },
    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 4000],
            name: "Allocated Budget"
          }
        ],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,
            [
              { offset: 0, color: "rgba(40,115,169,0.61)" }, // 此处可以调整颜色和透明度
              { offset: 1, color: "rgba(39,112,173,0.66)" } // 此处可以调整颜色和透明度
            ]
          )
        }
      }
    ]
  }
  option && myChart.setOption(option)
}

/**
 * 履职隐患初始化
 */
const initializationOfHazardMapForJobPerformance = () => {
  let chartDom = document.getElementById("hiddenDangerMap")
  let myChart = echarts.init(chartDom)
  let option
  option = {
    grid: {
      top: "20px",
      left: "20px",
      right: "20px",
      bottom: "20px"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      show: false
    },
    xAxis: [
      {
        watch: 10,
        axisLine: {
          lineStyle: {
            color: "#fff",
            width: 0.5,
            type: "solid"
          }
        },
        axisLabel: {
          fontSize: 8,
          color: "#FFFFFF",
          margin: 6
        },
        type: "category",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
        axisPointer: {
          type: "shadow"
        },
        axisTick: {
          alignWithLabel: true,
          inside: true
        },
        splitNumber: 5
      }
    ],
    yAxis: [
      {
        axisLabel: {
          fontSize: 6,
          color: "#FFFFFF"
        },
        splitLine: {
          lineStyle: {
            color: "#0072FF",
            width: 0.1
          }
        },
        type: "value",
        alignTicks: true,
        min: 0,
        max: 250,
        interval: 50,
        axisLine: {
          show: true
        },
        axisTick: {
          show: true,
          inside: true
        }
      },
      {
        splitLine: {
          lineStyle: {
            color: "#0072FF",
            width: 0.1
          }
        },
        axisTick: { show: false },
        axisLabel: { show: false },
        type: "value",
        alignTicks: false,
        min: 0,
        max: 25,
        interval: 5,
        axisLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "Evaporation",
        type: "bar",
        data: [
          2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
        ],
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00FFFF"
              },
              {
                offset: 1,
                color: "rgba(0,255,255,0.06)"
              }
            ]
          }
        }
      },
      {
        name: "Temperature",
        type: "line",
        yAxisIndex: 1,
        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 0],
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgb(210,107,116)"
              },
              {
                offset: 1,
                color: "rgb(210,107,116)"
              }
            ]
          }
        }
      }
    ]
  }
  option && myChart.setOption(option)
}

/**
 * 警告时段分析
 */
const warningPeriodAnalysis = () => {

  let chartDom = document.getElementById("warningPeriodAnalysisItem")
  let myChart = echarts.init(chartDom)
  let option

  option = {
    legend: {
      right: "right",
      top: "24%",
      itemWidth: 10,
      itemHeight: 8,
      itemGap: 6,
      textStyle: {
        color: "#fff",
        fontSize: 12
      }
    },
    series: [
      {
        label: {
          show: false
        },
        name: "Nightingale Chart",
        type: "pie",
        radius: [20, 56],
        center: ["30%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: "rose 1" },
          { value: 38, name: "rose 2" },
          { value: 32, name: "rose 3" },
          { value: 30, name: "rose 4" },
          { value: 28, name: "rose 5" }
        ]
      }
    ]
  }

  option && myChart.setOption(option)
}

/**
 * 报警趋势
 */
const initializeAlarmTrend = () => {
  let chartDom = document.getElementById("alarmTrend")
  let myChart = echarts.init(chartDom)
  let option

  option = {
    grid: {
      top: "20px",
      left: "40px",
      right: "10px",
      bottom: "30px"
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLabel: {
        color: "#FFFFFF"
      }
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          color: "#FFFFFF",
          width: 0.1
        }
      },
      type: "value",
      axisLabel: {
        color: "#FFFFFF"
      }
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        areaStyle: {
          color: "rgba(31,121,206,0.37)"
        },
        smooth: true
      }
    ]
  }

  option && myChart.setOption(option)
}

/**
 * 初始化系统评分
 */
const initializeSystemRating = () => {
  let chartDom = document.getElementById("systemScoreLeft")
  let myChart = echarts.init(chartDom)
  let option


  option = {

    series: [
      {
        type: "gauge",
        center: ["50%", "54%"], //调整位置
        radius: 40, //外圆半径55
        startAngle: -134, // 结束位置
        // endAngle: 100, // 结束位置
        pointer: {
          show: false // 是否显示仪表盘指针
        },
        progress: {
          // 展示当前进度。
          show: true, // 是否展示进度条
          overlap: false, // 是否重叠
          roundCap: false, // 是否圆顶
          clip: false // 是否裁掉超出部分
        },
        axisLine: {
          // 设置线条
          lineStyle: {
            width: 15, // 圆环宽 15
            opacity: 0.1
          }
        },
        itemStyle: {
          normal: {
            //具体颜色显示
            color: {
              type: "radial", // 使用径向渐变色
              x: 0.2, // 渐变色的起始点位置
              y: 1,
              r: 1, // 渐变半径，值为0到1之间
              colorStops: [
                { offset: 0, color: "rgba(0, 255, 229, 1)" }, // 渐变颜色1
                { offset: 1, color: "rgba(0, 255, 229, 1)" } // 渐变颜色2
              ]

            },
            //饼状图阴影，值越大阴影亮度越高
            shadowBlur: 24, // 模糊
            shadowColor: "rgba(0, 255, 229, 0.5)" // 圆环阴影色
          }
        },
        axisTick: {
          // 刻度样式。
          show: true, // 是否显示刻度。
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 4,
            color: "rgba(0, 255, 229, 1)"
          }
        },
        splitLine: {
          distance: -40,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999"
          }
        },
        axisLabel: {
          //刻度标签。
          show: true, // 是否显示标签。
          color: "#999",
          fontSize: 10,
          distance: 14 // 标签与刻度线的距离。
        },
        data: [
          {
            value: 50, // 可写变量  此value 对应 formatter: '{value}%' 中的Value
            detail: {
              // 仪表盘边框数据详情，用于显示数据。
              valueAnimation: true, // 是否开启标签的数字动画。
              offsetCenter: ["0%", "-10%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              fontSize: 16 // 文字的字体大小。
            }
          }
        ],
        detail: {
          //仪表盘详情，用于显示数据 仪表盘中间数字数据。
          color: "rgba(57, 193, 91, 1)", // 文本颜色，默认取数值所在的区间的颜色
          formatter: "{value}%▴" // 格式化函数或者字符串
        }
      }
    ]
  }

  option && myChart.setOption(option)
}

/**
 * 初始化值班查岗
 */
const initializeDutyInspection = () => {
  let chartDom = document.getElementById("onDutyInspection")
  let myChart = echarts.init(chartDom)
  let option

  option = {
    legend: {
      show: false
    },
    series: [
      {
        label: {
          show: false
        },
        name: "Nightingale Chart",
        type: "pie",
        radius: [40, 60],
        center: ["60%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 30, name: "rose 1" },
          { value: 28, name: "rose 2" },
          { value: 52, name: "rose 3" }
        ]
      }
    ]
  }
  option && myChart.setOption(option)
}

/**
 * 进入全屏和退出全屏
 * @param element
 */
const enterFullscreen = (element = document.documentElement) => {
  if (!isItFullScreen.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.mozRequestFullScreen) { // Firefox
      element.mozRequestFullScreen()
    } else if (element.webkitRequestFullscreen) { // Chrome/Safari/Opera
      element.webkitRequestFullscreen()
    } else if (element.msRequestFullscreen) { // IE/Edge
      element.msRequestFullscreen()
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) { // Chrome/Safari/Opera
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen()
    }
  }
  isItFullScreen.value = !isItFullScreen.value
}

/**
 * 设置容器的高度，使大屏能在小屏幕上正常显示全
 */
const setContainerHeight = () => {
  let availableHeight = window.innerHeight - 134
  app_main = document.getElementsByClassName("app-main")[0]
  app_main.style.height = availableHeight + "px"
  app_main.style.overflowY = "scroll"
}

/**
 * 条转其他页面时初始化容器高度，使得容器不影响其他页面
 */
const initializeContainerHeight = () => {
  app_main.style.height = "auto"
  app_main.style.overflowY = ""
}

/**
 * 加载3D模型
 */
const load3dModel = () => {
  let loading = ElLoading.service({
    lock: true,
    text: "模型初始化中......",
    background: "rgba(0, 0, 0, 0.7)",
    target: document.querySelector(".middleItem_3d")
  })
  if (middle3d.value) {
    const iframe = middle3d.value
    // 监听iframe的load事件
    iframe.onload = () => {
      loading.close()
    }
  }
}


onMounted(() => {
  performanceRadarChart()
  initializationOfHazardMapForJobPerformance()
  warningPeriodAnalysis()
  initializeAlarmTrend()
  initializeSystemRating()
  initializeDutyInspection()
  setContainerHeight()
  load3dModel()
})

onUnmounted(() => initializeContainerHeight())

// 初始化
initializeFontSize()
// 监听窗口变化
window.onresize = () => {
  initializeFontSize()
}

</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.isItFullScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.workbench {
  //width: 100%;
  //height: calc(100vh - 140px);
  //color: #333;
  //background: #95ee0f;
  background-image: url("../../../assets/largeScreen/大背景.png");
  background-size: 100% 100%;


  .largeScreenTitle {
    height: 88px;
    width: 100%;
    margin-bottom: 8px;
    position: relative;

    .headInformation {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: start;

      > div {
        width: 33.3%;
        display: flex;
        align-items: center;
        justify-content: left;
        font-size: 16px;

        > img {
          width: 20px;
          margin-right: 8px;
          margin-left: 20px;
        }
      }

      .titleImg {
        text-align: center;

        > img {
          width: 100%;
          height: 40px;
          margin-top: 22px;
          //margin-left: 100px;
        }
      }
    }

    .largeScreenTitleImg {
      width: 100%;
    }
  }

  .layoutContainer {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: 0 10px;

    .theLeft, .theRightSide {
      width: 24%;
    }

    .middle {
      width: calc(100% - 48% - 10px);

      .middleItem3d {
        height: 482px;
        margin-bottom: 10px;

        iframe {
          width: 100%;
          height: 100%;
          border: none;
        }
      }

      .middleItemBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .middleItem {
        width: 100%;
        height: 236px;
        margin-bottom: 10px;

        .middleItemContainer {
          width: 50%;
          height: 100%;

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

            .warningPeriodAnalysisItem {
              width: 50%;
              height: 100%;

              .warningPeriodAnalysisItemTitle {
                background-image: url("../../../assets/largeScreen/时段背景.png");
                background-size: 100% 100%;
                height: 28px;
                line-height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 14px;

                i {
                  display: block;
                  width: 6px;
                  height: 6px;
                  border-radius: 50%;
                  background: #A9F0FF;
                }

                span:nth-child(2) {
                  margin-left: 8px;
                  margin-right: 10px;
                }

                span:nth-child(3) {
                  margin-right: 8px;
                  color: #A9F0FF;
                }
              }

              .accountForTitle {
                font-size: 13px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                margin-top: 8px;
              }

              .accountForNumber {
                font-size: 18px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 20px;
                font-weight: bold;
                margin-top: 4px;

                span:nth-child(1) {
                  color: #ee6969;
                }

                span:nth-child(2) {
                  color: #A9F0FF;
                }
              }
            }
          }
        }
      }

      .middleItem:last-child {
        margin-bottom: 0;
      }
    }

    > div {
      height: 100%;
      //background: #0b6c51;
      padding-bottom: 14px;

      .theLeftItem, .theRightSideItem {
        height: 236px;
        width: 100%;
        margin-bottom: 10px;
      }

      .theLeftItem:last-child, .theRightSideItem:last-child {
        margin-bottom: 0;
      }
    }
  }

  .theLeftItemTitle {
    height: 24px;
    line-height: 24px;
    background-image: url("../../../assets/largeScreen/小标题-设备状态‘.png");
    background-size: 100% 100%;
    padding-left: 20px;
    color: #A9F0FF;
    margin-bottom: 2px;
  }

  .equipmentStatus {
    padding: 20px 0;

    .updateTime {
      text-align: center;
      color: #CBF2FA;;
      margin-bottom: 18px;
      font-size: 16px;
    }

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

      .updateTimeMapItem {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    .progressBarTitle {
      margin-top: 18px;

      span {
        display: inline-block;
        vertical-align: mathematical;
        width: 25%;
        text-align: center;
        font-size: 14px;
        color: #CBF2FA;;
      }
    }
  }


  .eventStatistics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;

    .eventStatisticsItem {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: left;

      img {
        width: 48px;
      }

      p {
        color: #A9F0FF;
        font-size: 20px;
      }

      span {
        font-size: 12px;
      }
    }
  }

  .performanceContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;

    > div {
      width: 50%;
      height: 100%;
    }

    .performanceRadarInfo {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: left;
      font-size: 13px;
      padding: 28px 0;

      > div {
        text-align: center;
        width: 50%;
        color: #A9F0FF;
      }
    }
  }

  .titleOfHazardStatistics {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .hazardStatistics {
    padding: 10px;

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

      > div {
        width: 50%;
        font-size: 12px;
        color: #A9F0FF;
      }

      > div:nth-child(1) {
        text-align: right;
        margin-right: 10px;
      }

      > div:nth-child(2) {
        margin-left: 10px;
      }
    }

    .hiddenDangerMap {
      height: calc(100% - 34px);
      width: 100%;
    }
  }
}


:deep(.el-progress__text span) {
  color: #CBF2FA;
  font-size: 14px;
}


:deep() {
  path:first-child {
    stroke: transparent;
  }
}

:deep(.el-input--large .el-input__inner) {
  height: 28px;
  color: #CBF2FA;
  font-size: 14px;
  background: transparent;
  border: none;
  outline: none;
}

.theLeftItemContent {
  height: calc(236px - 26px);
  width: 100%;
  background-image: url("../../../assets/largeScreen/告警时段分析.png");
  background-size: 100% 100%;
}

.eventStatisticsStatic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;

  .eventStatisticsStaticItem {
    text-align: center;

    span {
      font-size: 28px;
      font-weight: bolder;
    }
  }
}

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

  > div {
    width: 50%;
    height: 100%;
  }

  .systemScoreRight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 30px 10px;

    .systemScoreRightItem {
      width: calc((100% - 10px) / 2);
      background-image: url("../../../assets/largeScreen/事件统计框.png");
      background-size: 100% 100%;
      text-align: center;
      padding: 10px 0;

      p {
        font-size: 12px;
        margin-top: 3px;
      }

      span {
        font-size: 18px;
        color: #CBF2FA;
        font-weight: bolder;
      }
    }
  }
}

#emergencyResources {
  img {
    width: 84px;
    margin-right: 0;
  }
}


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

  > div {
    width: 50%;
    height: 100%;
  }
}

.onDutyInspectionRight {
  text-align: center;
  padding: 60px 0;

  .onDutyInspectionMap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 8px;

    > div {
      display: flex;
      align-items: center;
      justify-content: left;
    }

    i {
      display: block;
      width: 10px;
      height: 10px;
      background: #0b9ff4;
      margin-right: 8px;
    }
  }
}

.theLeftItemContentTab {
  display: flex;
  align-items: center;
  background: rgba(84, 139, 171, 0.54);
  color: #0b9ff4;
  border: 1px solid #058cdc;

  > div {
    width: calc(100% / 3);
    height: 28px;
    line-height: 28px;
    text-align: center;
  }
}

.theLeftItemContentTable {
  height: calc(100% - 38px);
  overflow: hidden;

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

    > div {
      width: calc(100% / 3);
      height: 28px;
      line-height: 28px;
      color: #eeeaea;
      text-align: center;
      border-bottom: 1px solid #058cdc;
    }
  }
}

.fullScreen {
  background: #0b9ff4;
  position: relative;

  img {
    position: absolute;
    top: -10px;
    right: 0;
    cursor: pointer;
  }
}

</style>
