<template>
  <div>
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 左侧 -->
      <div class="sidebar sidebar-left">
        <div class="sidebar-item H917">
          <div class="sub-title por"><span>环境监测实时数据 </span></div>
          <div class="table-box">
            <vue-seamless-scroll ref="sssjControl" :data="tableData1" :class-option="classOption" class="warp">
              <ul class="item">
                <div
                  :class="upWindowData.upWindowActive === i ? 'active' : ''"
                  style="cursor: pointer"
                  v-for="(item, i) in tableData1"
                  :key="i + 'aaa'"
                  @click="lookRealData(item, i)"
                >
                  <li class="table-item">
                    <el-row :gutter="16">
                      <el-col :span="6" class="jz">
                        <img class="img-class" :src="require(`@/assets/images/screen/hjjc/${item.typeId}.png`)" />
                      </el-col>
                      <el-col :span="10">
                        <p class="device-name">{{ item.tpName }}</p>
                        <p class="device-time">{{ item.time }}</p>
                      </el-col>
                      <el-col :span="8">
                        <p class="device-value">{{ item.value | capitalize }}{{ item.unit }}</p>
                      </el-col>
                    </el-row>
                  </li>
                </div>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main-area">
        <!--一中、二中。。。-->
        <span class="main-example" style="left: 0px; top: 190px">一中</span>
        <span class="main-example" style="left: 0px; top: 321px">二中</span>
        <span class="main-example" style="left: 0px; top: 446px">三中</span>
        <span class="main-example" style="left: 0px; top: 569px">四中</span>
        <span class="main-example" style="left: 0px; top: 705px">五中</span>
        <!-- 设备点位 -->
        <div v-if="checkList.includes('2')">
          <div
            class="dot"
            v-for="(item, i) in filteredEquipmentList"
            :key="i + 'bbb'"
            :class="item.isWarning == 1 ? 'active' : ''"
            :style="{ left: item.x + 'px', top: item.y + 'px' }"
          >
            <div class="dot1">
              <div class="tip-box">
                <p
                  v-for="(iitem, l) in item.monitorPositionList"
                  :key="l + 'ccc'"
                  :class="iitem.isWarning == 1 ? 'active' : ''"
                >
                  {{ iitem.equipmentName }}
                  <span></span>
                </p>
              </div>
            </div>
          </div>
        </div>

        <!--监控点位-->
        <div v-if="checkList.includes('1')">
          <div
            class="camera-item"
            v-for="(item, i) in filteredCameraList"
            :key="i + 'ddd'"
            :class="item.status == 0 ? 'offline' : ''"
            :style="{ left: item.x + 'px', top: item.y + 'px' }"
            @click="lookVideo(item, i)"
          ></div>
        </div>
        <!-- 现实设备切换按钮 -->
        <div class="toggle-button">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="1">监控</el-checkbox>
            <el-checkbox label="2">监测设备</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="sidebar sidebar-right">
        <!-- 右上历史数据图组件 -->
        <div class="sidebar-item H286 alert-analysis">
          <div class="sub-title por">
            <span>历史数据图</span>
          </div>
          <div class="sub-con histrybox">
            <div class="histrubox_left">
              <div class="echarts_title">
                <img src="../../../assets/images/screen/jianceshebei.png" alt="" class="img_class" />
                <span>环境监测设备</span>
              </div>
              <div class="chart_bg"></div>
              <div id="EchartsPieLeft" class="chart_box"></div>
              <div class="chart_number">
                <span>{{ deviceStatusNum.total }}个</span>
                <br />
                <span>总数</span>
              </div>
            </div>
            <div class="histrubox_right">
              <div class="echarts_title">
                <img src="../../../assets/images/screen/shipingshebei.png" alt="" class="img_class" />
                <span>视频监测设备</span>
              </div>
              <div class="chart_bg_right"></div>
              <div id="EchartsPieRight" class="chart_box"></div>
              <div class="chart_number_right">
                <span>{{ deviceStatusNum.cameraTotal }}个</span>
                <br />
                <span>总数</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 右中设备监测曲线图 -->
        <div class="sidebar-item H286 alert-analysis">
          <div class="sub-title por">
            <span>历史数据图</span>
            <span class="scroll-title">{{ rightTopLssjData.name }}</span>
          </div>
          <div class="sub-con">
            <div class="sub-con">
              <span
                v-for="(item, i) in rightTopLssjData.list"
                :key="i + 'aab'"
                :class="i == rightTopLssjData.mark ? 'active' : ''"
                >{{ item.name }}
                <p class="subscript"></p>
              </span>
            </div>
            <div class="left-chart" ref="sssj" id="sssj"></div>
          </div>
        </div>
        <!-- 右下设备监测曲线图 -->
        <div class="sidebar-item H286 alert-analysis">
          <div class="sub-title por">
            <span>历史数据图</span>
            <span class="scroll-title">{{ rightCenterLssjData.name }}</span>
          </div>
          <div class="sub-con">
            <div class="sub-con">
              <span
                v-for="(item, i) in rightCenterLssjData.list"
                :key="i + 'abb'"
                :class="i == rightCenterLssjData.mark ? 'active' : ''"
                >{{ item.name }}
                <p class="subscript"></p>
              </span>
            </div>
            <div class="left-chart" ref="right" id="rclssj"></div>
          </div>
        </div>
      </div>
      <!-- 弹窗内容 -->
      <transition name="el-fade-in">
        <div v-show="upWindowData.upWindowVisible" class="up-window">
          <p><span></span>{{ upWindowData.title }}</p>
          <i class="el-icon-close close-button" @click="closeUpWindow"></i>
          <p class="date-title">{{ upWindowData.date }}</p>
          <div class="chart-box" id="chartBox"></div>
        </div>
      </transition>
      <!--视频弹窗-->
      <transition name="el-fade-in">
        <div v-show="video.upWindowVisible" class="up-window video-window">
          <p><span></span>{{ video.title }}</p>
          <i class="el-icon-close close-button" @click="closeVideoUpWindow"></i>
          <video width="800" id="player" controls></video>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getRealData, getRtData, getDeviceStatus, getDeviceData, getRcData, getDeviceStatusNum } from '@/api/tyler/hjjc'
import { listVideoTable } from '@/api/tyler/videoTable'
import ScrollTable from '@/components/Tyler/ScrollTable.vue'
import screenfull from 'screenfull'
import vueSeamlessScroll from 'vue-seamless-scroll'
import Highcharts from 'highcharts/highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
import { EQUIPMENT_POSITIONS, CAMERA_POSITIONS } from './hjjc-config'
highcharts3d(Highcharts)

export default {
  name: 'cockpit',
  components: {
    ScrollTable,
    vueSeamlessScroll,
  },
  data() {
    return {
      // 设备实施数据弹窗
      upWindowData: {
        upWindowActive: '',
        upWindowVisible: false,
        title: '',
        date: '2025-03-19',
      },
      // 左边列表数据
      tableData1: [],
      // 左侧滚动 参数
      classOption: {
        singleHeight: 110,
        hoverStop: true,
        autoPlay: true,
      },
      // 设备定位分类开关
      checkList: ['2', '1'],
      // 右侧上部分历史数据
      rightTopLssjData: {
        list: [
          {
            name: '',
            value: [
              {
                data: {
                  xData: {
                    data: [],
                  },
                  yData: {
                    data: [],
                  },
                },
              },
            ],
          },
        ],
        mark: 0,
        name: '',
      },
      // 右侧中间历史数据
      rightCenterLssjData: {
        list: [
          {
            name: '',
            value: [
              {
                data: {
                  xData: {
                    data: [],
                  },
                  yData: {
                    data: [],
                  },
                },
              },
            ],
          },
        ],
        mark: 0,
        name: '',
      },
      // 设备列表
      equipmentList: [],
      //摄像头数据
      cameraList: [],
      // 视频弹窗
      video: {
        upWindowVisible: false,
        title: '',
        videoUrl: '',
      },
      player: null,
      //highCharts配置
      highChartsOption: {},
      deviceStatusNum: {
        total: 0,
        cameraTotal: 0,
      },
      // 定时器管理
      timers: {},
      // ECharts实例管理
      chartInstances: {},
    }
  },
  computed: {
    // 优化：计算属性替代v-if+v-for
    filteredEquipmentList() {
      return this.equipmentList.filter(item => this.checkList.includes('2'))
    },
    filteredCameraList() {
      return this.cameraList.filter(item => this.checkList.includes('1'))
    },
  },
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request()
    }
    this.initPageData()
    this.initvideoPlayer()
  },
  created() {
    listVideoTable().then(res => {
      if (res.code === 200) {
        this.cameraList = res.rows.map(el => {
          const camera = CAMERA_POSITIONS.find(c => c.name === el.cameraName)
          return {
            ...el,
            x: camera?.x || 0,
            y: camera?.y || 0,
          }
        })
      }
    })
  },
  beforeDestroy() {
    // 清理所有定时器
    Object.values(this.timers).forEach(timer => clearInterval(timer))
    // 销毁所有图表实例
    Object.values(this.chartInstances).forEach(instance => instance.dispose())
    // 清理播放器
    if (this.player) {
      this.player.disconnect()
      this.player = null
    }
  },
  methods: {
    // API请求优化：串行处理+错误处理
    async initPageData() {
      try {
        // 并行请求关键数据
        const [rtDataRes, rcDataRes, deviceStatusRes] = await Promise.all([getRtData(), getRcData(), getDeviceStatus()])

        // 处理历史数据
        this.rightTopLssjData.list = rtDataRes.data || []
        this.rtPlayFun(this.rightTopLssjData)

        this.rightCenterLssjData.list = rcDataRes.data || []
        this.rcPlayFun(this.rightCenterLssjData)
        // 处理设备状态
        this.handleDeviceStatus(deviceStatusRes.data)

        // 串行请求次要数据
        await this.initRealData()
        await this.initDeviceStatusNum()
      } catch (error) {
        console.error('页面初始化失败:', error)
        this.$message.error('数据加载失败，请刷新页面重试')
      }
    },

    async initRealData() {
      const res = await getRealData()
      this.tableData1 = res.data.map(el => ({ ...el, value: el.value }))
    },

    async initDeviceStatusNum() {
      const res = await getDeviceStatusNum()
      if (res.code === 200) {
        this.deviceStatusNum = {
          total: res.data[0].online + res.data[0].offline,
          cameraTotal: res.data[1].online + res.data[1].offline,
        }
        this.getHighChartsData(res.data)
      }
    },

    handleDeviceStatus(apiData) {
      if (apiData && apiData.length) {
        this.equipmentList = apiData.map(apiItem => {
          const localItem = EQUIPMENT_POSITIONS.find(xy => xy.name === apiItem.name)
          return {
            ...apiItem,
            x: localItem?.x || 0,
            y: localItem?.y || 0,
            monitorPositionList: apiItem.monitorPositionList || [],
          }
        })
      }
    },

    initvideoPlayer() {
      this.player = new WebRtcStreamer('player', 'http://127.0.0.1:8000')
    },

    // 查看视频
    lookVideo(item, i) {
      fetch('http://localhost:8000/api/version')
        .then(response => {
          this.video.upWindowVisible = true
          this.video.title = item.cameraName
          this.video.videoUrl = item.cameraUrl
          this.player.connect(this.video.videoUrl)
        })
        .catch(error =>
          this.$confirm('需要启动/安装WebRtcStreamer才能播放视频，是否现在安装？', '提示', {
            confirmButtonText: '安装',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            window.open('/webrtcstreamer/webrtc-streamer.exe') // 确保webrtc-streamer.exe的路径正确 在pulic/webrtcstreamer目录下
          })
        )
    },

    closeVideoUpWindow() {
      this.video.upWindowVisible = false
      this.player.disconnect()
    },

    getHighChartsData(value = []) {
      this.highChartsOption = {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0,
          },
          backgroundColor: 'rgba(64, 158, 255, 0)',
        },
        legend: {
          enabled: true,
          align: 'center',
          verticalAlign: 'middle',
          layout: 'vertical',
          y: 60,
          itemStyle: {
            color: '#fff',
            fontSize: '12px',
          },
          labelFormatter: function () {
            return `${this.name}: ${this.y}`
          },
        },
        title: { text: '' },
        subtitle: { text: '' },
        plotOptions: {
          pie: {
            size: '55%',
            allowPointSelect: false,
            cursor: 'pointer',
            innerSize: '65%',
            showInLegend: false,
            center: ['50%', '34%'],
            depth: 15,
            dataLabels: { enabled: false },
          },
        },
        credits: { enabled: false },
        series: [
          {
            type: 'pie',
            name: '设备统计',
            showInLegend: true,
            data: [
              {
                name: '正常设备',
                y: value[0].online,
                color: 'RGBA(37, 160, 238, 1)',
              },
              {
                name: '异常设备',
                y: value[0].offline,
                color: 'RGBA(252, 183, 62, 1)',
              },
            ],
            startAngle: 0,
            label: { show: false },
          },
        ],
      }

      Highcharts.chart('EchartsPieLeft', this.highChartsOption)
      this.highChartsOption.series[0].data = [
        { name: '在线', y: value[1].online, color: '#02CD9B' },
        { name: '离线', y: value[1].offline, color: 'RGBA(252, 183, 62, 1)' },
      ]
      Highcharts.chart('EchartsPieRight', this.highChartsOption)
    },

    initEchartBox(id, xData = [], yData = [], mkData = 28, step = 4, grid) {
      // 销毁旧实例
      if (this.chartInstances[id]) {
        this.chartInstances[id].dispose()
      }

      let myChart = echarts.init(document.getElementById(id))
      let maxData = yData.length ? Math.ceil(Math.max(...yData)) : 0
      let minData = yData.length ? Math.floor(Math.min(...yData)) : 0

      let option = {
        grid: grid,
        xAxis: {
          show: true,
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLabel: {
            show: true,
            interval: step,
            textStyle: { color: '#FFFFFF', fontSize: 16 },
          },
          axisTick: { alignWithLabel: true },
          splitLine: {
            lineStyle: { type: 'dashed', opacity: 0.5 },
            show: true,
          },
        },
        yAxis: {
          type: 'value',
          max: mkData > maxData ? mkData : maxData,
          min: minData,
          boundaryGap: false,
          axisTick: { alignWithLabel: true },
          axisLabel: {
            show: true,
            textStyle: { color: '#FFFFFF', fontSize: 16 },
          },
          splitLine: {
            lineStyle: { type: 'dashed', opacity: 0.5 },
            show: true,
          },
        },
        series: [
          {
            type: 'line',
            stack: 'Total',
            smooth: 0.2,
            lineStyle: { width: 2, color: '#35B1F3' },
            markLine: {
              data: [
                {
                  name: '警戒线',
                  yAxis: mkData,
                  label: { show: false },
                },
              ],
              symbol: ['none', 'none'],
              lineStyle: { color: 'red', width: 2 },
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgb(55, 184, 251,0.5)' },
                { offset: 1, color: 'rgb(55, 184, 251,0.1)' },
              ]),
            },
            emphasis: { focus: 'series' },
            data: yData,
          },
        ],
      }

      myChart.setOption(option)
      setTimeout(() => myChart.resize(), 600)

      // 保存实例引用
      this.chartInstances[id] = myChart

      this.$on('hook:deactivated', () => {
        if (myChart && myChart !== '' && myChart !== undefined) {
          myChart.dispose()
        }
        myChart = null
      })
    },

    // 右上图表轮播
    rtPlayFun(data) {
      if (!data || !data.list || !data.list.length) {
        console.error('数据格式错误或数据为空')
        return
      }
      this.clearTimer('rtPlayTimer')
      let i = 0,
        l = 0
      const grid = {
        left: '4%',
        right: '5%',
        bottom: '4%',
        top: '7%',
        containLabel: true,
      }
      // 初始化首次渲染
      this.updateRtChart(0, 0)
      this.timers.rtPlayTimer = setInterval(() => {
        if (i < data.list.length) {
          if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
            this.updateRtChart(i, l)
            l++
          } else {
            l = 0
            i++
          }
        } else {
          i = 0
          l = 0
        }
      }, 15000)
    },

    updateRtChart(i, l) {
      const data = this.rightTopLssjData.list
      if (data && data.length) {
        this.rightTopLssjData.mark = i
        this.rightTopLssjData.name = data[i].value[l].name
        this.initEchartBox(
          'sssj',
          data[i].value[l].value.xData.data,
          data[i].value[l].value.yData.data,
          data[i].value[l].value.yData.alarm,
          4,
          {
            left: '4%',
            right: '5%',
            bottom: '4%',
            top: '7%',
            containLabel: true,
          }
        )
      }
    },

    // 右中图表轮播
    rcPlayFun(data) {
      if (!data || !data.list || !data.list.length) {
        console.error('数据格式错误或数据为空')
        return
      }
      this.clearTimer('rcPlayTimer')
      let i = 0,
        l = 0
      const grid = {
        left: '4%',
        right: '5%',
        bottom: '4%',
        top: '7%',
        containLabel: true,
      }

      this.rightCenterLssjData.mark = i
      this.rightCenterLssjData.name = data.list[i].value[l].name
      this.initEchartBox(
        'rclssj',
        data.list[i].value[l].value.xData.data,
        data.list[i].value[l].value.yData.data,
        data.list[i].value[l].value.yData.alarm,
        4,
        grid
      )

      this.timers.rcPlayTimer = setInterval(() => {
        if (i < data.list.length) {
          if (Array.isArray(data.list[i].value) && l < data.list[i].value.length) {
            this.rightCenterLssjData.mark = i
            this.rightCenterLssjData.name = data.list[i].value[l].name
            this.initEchartBox(
              'rclssj',
              data.list[i].value[l].value.xData.data,
              data.list[i].value[l].value.yData.data,
              data.list[i].value[l].value.yData.alarm,
              4,
              grid
            )
            l++
          } else {
            l = 0
            i++
          }
        } else {
          i = 0
          l = 0
        }
      }, 15000)
    },

    // 清除定时器
    clearTimer(timerName) {
      if (this.timers[timerName]) {
        clearInterval(this.timers[timerName])
        this.timers[timerName] = null
      }
    },

    // 查看设备24H实时数据
    lookRealData(item, i) {
      let grid = {
        left: 0,
        right: '1.7%',
        bottom: '4%',
        top: '7%',
        containLabel: true,
      }

      let xData = []
      let yData = []
      getDeviceData({ id: item.id }).then(res => {
        if (res.code === 200) {
          this.upWindowData.upWindowActive = i
          this.upWindowData.upWindowVisible = true
          this.upWindowData.title = item.tpName
          this.upWindowData.date = res.data.day
          this.classOption.autoPlay = false
          let threshold = 0
          res.data.envScreenEditDto.forEach(i => {
            xData.push(i.time)
            yData.push(i.value)
          })
          threshold = res.data.threshold || 0
          this.initEchartBox('chartBox', xData, yData, threshold, 0, grid)
        } else {
          this.$message.error('数据请求失败！')
        }
      })
    },

    closeUpWindow() {
      this.upWindowData.upWindowActive = ''
      this.upWindowData.upWindowVisible = false
      this.classOption.autoPlay = true
      this.$refs.sssjControl._startMove()
    },

    goToSys() {
      var link = this.$router.resolve({ path: '/' })
      window.open(link.href)
      return
    },

    handleScroll(e) {
      this.$refs.sssjControl.yPos = this.$refs.sssjControl.yPos - e.deltaY
      if (this.$refs.sssjControl.yPos > 0) {
        this.$refs.sssjControl.yPos = 0
        return
      }
      if (Math.abs(this.$refs.sssjControl.yPos) > this.$refs.sssjControl.realBoxHeight / 2) {
        this.$refs.sssjControl.yPos = 0
      }
    },
  },
  filters: {
    capitalize(value) {
      if (value === null || value === undefined) return '--'
      if (value === '开' || value === '关') {
        return value
      }
      const parsedValue = Number(value)
      return isNaN(parsedValue) ? '--' : parsedValue.toFixed(1)
    },
  },
}
</script>
<style lang="scss" scoped>
// 变量定义
$primary-color: #2ed5ff;
$bg-color: rgba(1, 33, 58, 0.2);
$border-radius: 8px;
$spacing: 16px;

// Mixin定义
@mixin sidebar-item {
  width: 100%;
  margin-bottom: $spacing;
  background: linear-gradient(180deg, $bg-color 0%, rgba(8, 132, 233, 0.2) 100%);
  position: relative;
  border-radius: $border-radius;

  &::before {
    content: '';
    width: 460px;
    height: 4px;
    position: absolute;
    background: url('~@/assets/images/screen/title1.png') no-repeat center;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
  }
}

.por {
  position: relative;
}

.sidebar-left {
  transform-origin: left center;
  transform: scaleX(1) perspective(610px) rotateY(5deg);
}

.sidebar-right {
  transform-origin: center right;
  transform: scaleX(1) perspective(610px) rotateY(-5deg);
}

/* 主体内容 */
.main-content {
  display: flex;
  justify-content: space-between;
  padding: 0 $spacing;
  padding-top: 173px;
  background: url('~@/assets/images/screen/bg12.png');
  color: #fff;
  height: 100%;
  box-sizing: border-box;
}

.histrybox {
  width: 100%;
  height: 100%;
  display: flex;

  .histrubox_left,
  .histrubox_right {
    width: 50%;
    height: calc(100% - 46px);

    .echarts_title {
      height: 25px;
      text-align: center;

      span {
        color: rgba(42, 207, 255, 1);
        font-weight: 400;
        font-size: 16px;
        color: $primary-color;
      }
    }
  }

  .chart_box {
    width: 100%;
    height: calc(100% - 25px);
  }

  .img_class {
    width: 29px;
    height: 25px;
    display: inline-block;
    line-height: 25px;
    margin-right: 12px;
    margin-bottom: -7px;
  }

  .chart_bg,
  .chart_bg_right {
    position: absolute;
    width: 140px;
    height: 150px;
    background-image: url('~@/assets/images/screen/chart.png');
    background-repeat: no-repeat;
    background-position: cover;
    background-size: 100% 100%;
    transform: rotateX(53deg);
    top: 89px;
  }

  .chart_bg {
    left: 45px;
  }
  .chart_bg_right {
    left: 275px;
  }

  .chart_number,
  .chart_number_right {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 109px;
    text-align: center;

    span:nth-child(1) {
      font-size: 30px;
      font-weight: 400;
    }
  }

  .chart_number {
    left: 66px;
  }
  .chart_number_right {
    left: 296px;
  }
}

/* 左右侧边栏 */
.sidebar {
  width: 460px;
  border-radius: $border-radius;
  flex: 1;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  margin-top: -10px;
}

.H917 {
  height: 917px;
}
.H286 {
  height: 286px;
}

.sidebar-item {
  @include sidebar-item;

  .sub-title {
    width: 100%;
    height: 46px;
    background: url('~@/assets/images/screen/title1.png') no-repeat center;
    font-weight: bold;
    font-family: 'fangsong';

    span {
      position: absolute;
      top: -10px;
      left: 30px;
      font-size: 22px;
    }

    .scroll-title {
      position: absolute;
      top: -7px;
      left: 157px;
      font-weight: 800;
      font-size: 18px;
      color: #ffc62e;
    }
  }

  .table-box {
    height: 866px;
    width: calc(100% - 4px);

    .table-item {
      height: 110px;
      width: calc(100% - 46px);
      margin: 0 auto;
      border-bottom: 2px dashed rgba(100, 194, 255, 0.3);
      padding-top: 9px;

      .img-class {
        display: block;
        width: 85px;
        height: 85px;
      }

      .device-name {
        width: 100%;
        font-size: 18px;
        color: #63c2ff;
        font-family: Source Han Sans SC;
      }

      .device-time {
        font-weight: 400;
        font-size: 16px;
        color: #b4d5ea;
        font-family: Source Han Sans SC;
      }

      .device-value {
        font-family: Source Han Sans SC;
        font-weight: 500;
        font-size: 28px;
        color: #ffffff;
        background: linear-gradient(0deg, #3cbffa 0%, #ffffff 56.005859375%, #e2f6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: 100%;
        text-align: center;
      }
    }

    .warp {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: 'fangzhengyaoti';

      ul {
        list-style: none;
        margin: 0 auto;
      }

      .active {
        background: RGBA(2, 87, 149, 1);
      }
    }
  }
}

.jz {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 中间主区域 */
.main-area {
  width: calc(100% - 920px);
  background: url('~@/assets/images/screen/bg3.png') no-repeat center;
  background-size: contain;
  background-position-y: 0px;
  text-align: center;
  position: relative;
  pointer-events: auto;
  z-index: 999;

  .main-example {
    font-size: 18px;
    color: $primary-color;
    line-height: 36px;
    font-weight: bold;
    position: absolute;
    font-family: 'fangsong';
  }

  .dot {
    width: 42px;
    height: 70px;
    position: absolute;
    top: 100px;
    left: 500px;
    background: url('~@/assets/images/screen/hjjc/icon8.png') no-repeat center;

    .dot1 {
      position: relative;

      .tip-box {
        width: 216px;
        background: linear-gradient(0deg, #062451 0%, #09162d 100%);
        box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
        border-radius: 4px;
        border: 1px solid #11b9ff;
        position: absolute;
        bottom: 10px;
        left: -81px;
        padding: 9px 14px 14px 14px;
        z-index: 999;
        display: none;

        p {
          font-family: Source Han Sans SC;
          font-weight: 400;
          font-size: 16px;
          color: #1cd2ff;
          margin: 5px 0 0 0;
          text-align: left;

          span {
            display: none;
            width: 16px;
            height: 16px;
            background: url('~@/assets/images/screen/hjjc/icon10.png') no-repeat center;
            margin-bottom: -3px;
          }

          &.active {
            color: rgba(255, 43, 58, 1);
            span {
              display: inline-block;
            }
          }
        }
      }
    }

    &:hover {
      background: url('~@/assets/images/screen/hjjc/icon8_hover.png') no-repeat center;

      .tip-box {
        display: block;
      }
    }

    &.active {
      background: url('~@/assets/images/screen/hjjc/icon9.png') no-repeat center;

      &:hover {
        background: url('~@/assets/images/screen/hjjc/icon9_hover.png') no-repeat center;
      }
    }
  }

  .camera-item {
    width: 42px;
    height: 70px;
    position: absolute;
    top: 100px;
    left: 500px;
    background: url('~@/assets/images/screen/hjjc/icon_normal.png') no-repeat center;
    cursor: pointer;

    &:hover {
      background: url('~@/assets/images/screen/hjjc/icon_hover.png') no-repeat center;
    }

    &.offline {
      background: url('~@/assets/images/screen/hjjc/icon_click.png') no-repeat center;
    }
  }

  .toggle-button {
    width: 120px;
    height: 90px;
    background: RGBA(8, 27, 58, 1);
    position: absolute;
    bottom: 58px;
    right: 0px;

    .el-checkbox-group {
      width: 100%;
      height: 100%;

      .el-checkbox {
        margin-top: 16px;
        color: #fdfeff;
        font-size: 16px;
        font-weight: 500;
        font-family: 'fangzhengyaoti';
      }
    }
  }
}

/* 实时分布图区域 */
.distribution-map {
  height: 300px;
  background: rgba(8, 28, 49, 0.8);
  border-radius: $border-radius;
}

.sub-con {
  .sub-con {
    height: 2em;
    width: 100%;
    font-family: 'fangzhengyaoti';

    span {
      float: left;
      margin-left: 25px;
      min-width: 63px;
      height: 2em;
      font-size: 16px;
      line-height: 16px;
      font-weight: 500;
      color: rgba(179, 240, 255, 1);
      text-align: center;

      &.active {
        color: rgba(46, 213, 255, 1);

        .subscript {
          height: 19px;
          width: 100%;
          background: url('~@/assets/images/screen/hjjc/icon7.png') no-repeat center;
        }
      }
    }
  }
}

.left-chart {
  width: 100%;
  height: 12em;
}

.sub-con-scroll-table {
  width: 95%;
  margin: 0 auto;
  height: 83%;
  overflow: hidden;
}

.custom-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
  color: $primary-color;
}

.custom-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  text-align: center;
}

.custom-header2 {
  width: 100%;
  display: grid;
  grid-template-columns: 1.5fr 2.2fr 1.3fr;
  text-align: center;
  color: $primary-color;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(0deg, rgba(61, 98, 147, 0.35) 0%, rgba(61, 98, 147, 0.03) 100%);
}

.warp {
  height: calc(100% - 36px);
  overflow: hidden;

  .item {
    padding-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .custom-item2 {
    width: 100%;
    height: 36px;
    display: grid;
    grid-template-columns: 1.5fr 2.2fr 1.3fr;
    text-align: center;
    background: linear-gradient(0deg, rgba(61, 98, 147, 0.35) 0%, rgba(61, 98, 147, 0.03) 100%);
    margin-top: 11px;
  }

  .custom-item-content2 {
    font-family: Source Han Sans SC;
    font-size: 16px;
    line-height: 36px;
    color: #bbd7ea;
  }
}

.sub-con-r {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: calc(100% - 70px);

  .sub-con-r-left {
    width: 127px;
    height: 161px;
    background: url('~@/assets/images/screen/icon3.png') no-repeat center;
    background-size: 100%;
  }

  .sub-con-r-right {
    width: 250px;
    display: flex;
    flex-direction: column;

    p {
      display: grid;
      grid-template-columns: 4fr 4fr 1fr;
      font-size: 18px;
      line-height: 24px;
      color: #bbd7ea;
      background-color: rgba(61, 98, 147, 0.2);
      padding: 10px 10px;
      text-align: justify;
      box-sizing: border-box;

      span:nth-child(2) {
        color: rgba(187, 215, 234, 0.2);
      }

      span:nth-child(3) {
        font-weight: bold;
        font-size: 24px;
        color: #bbd7ea;
        background: linear-gradient(0deg, #47c5ff 0%, #fdfeff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}

.up-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1360px;
  height: 480px;
  transform: translate(-50%, -50%);
  background: url('~@/assets/images/screen/hjjc/popup.png') no-repeat;
  background-size: 1377px 501px;
  box-shadow: 0px 15px 11px 2px rgba(0, 20, 39, 0.31);
  padding: 28px 37px;
  z-index: 999;

  &.video-window {
    width: 900px;
    height: 562px;
    background: #062451;

    p {
      width: 820px;
    }
  }

  p {
    width: 1271px;
    height: 37px;
    margin: 0px;
    background: url('~@/assets/images/screen/hjjc/title-popup.png') no-repeat center;
    background-size: 100%;
    font-weight: 500;
    font-size: 22px;
    color: #ffffff;
    height: 37px;
    background-position-y: 9px;

    span {
      width: 27px;
      display: inline-block;
    }
  }

  .close-button {
    font-size: 30px;
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
    transition: transform 0.3s ease;

    &:hover {
      transform: rotate(360deg);
    }
  }

  .date-title {
    height: 18px;
    font-weight: 500;
    font-size: 22px;
    color: #15f1ff;
    background: none;
    margin-left: 56px;
    margin-top: 5px;
  }

  .chart-box {
    width: 100%;
    height: 355px;
  }
}
</style>
