<template>
    <div class="mian">
        <div class="title">
            <div class="left">
                <div class="left-first" id="time">--:--:--</div>
                <div class="left-second" id="date">----</div>
            </div>
            <div class="center">南川区综合服务中心数智管理平台监控大屏</div>
            <div class="right">
                <div>{{ weekDay }}</div>
                <div>晴</div>
                <div>40℃</div>
                <div class="logout" @click="logout">
                <img src="../../../assets/return.png" style="width: 1.5rem; height: 1.5rem;">
                <div>
                退出
                </div>
              </div>
            </div>
        </div>
        <div class="contents">
            <div class="content">
                <div class="content-left">
                    <div class="first">
                      <div class="first-total">
                          <div class="first-total-title">在线数量</div>
                          <div class="first-total-value">
                            <div class="first-total-value-number">4</div>
                            <div class="first-total-value-number">7</div>
                            <div class="first-total-value-number">3</div>
                          </div>
                          <div class="first-total-unit">个</div>
                        </div>
                      <div class="first-content">
                        <div class="alarm-table-container">
                        <table class="alarm-table">
                          <thead>
                            <tr>
                              <th>监控编号</th>
                              <th>监控位置</th>
                              <th>监控范围</th>
                              <th>监控情况</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>0625142512</td>
                              <td>东区大门</td>
                              <td>右侧</td>
                              <td class="status-done">正常</td>
                            </tr>
                            <tr>
                              <td>0625342512</td>
                              <td>东区大门</td>
                              <td>左侧</td>
                              <td class="status-done">正常</td>
                            </tr>
                            <tr>
                              <td>0625142513</td>
                              <td>东区大门</td>
                              <td>正前方</td>
                              <td class="status-done">正常</td>
                            </tr>
                            <tr>
                              <td>0625142912</td>
                              <td>东区大门</td>
                              <td>马路</td>
                              <td class="status-undone">异常</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      </div>
                    </div>
                    <div class="second">
                      <div class="water-factory-mix-chart" ref="waterFactoryMixChart"></div>
                    </div>
                    <div class="third">
                        <div class="third-content">
                            <div ref="powerChart" class="power-chart"></div>
                        </div>
                    </div>
                </div>
                <div class="content-center">
                <div class="content-box">
                  <div class="box">
                    <div>
                      <img src="../../../assets/monitor/monitor1.png" alt="" width="90%" height="90%">
                    </div>
                    <div>
                      <img src="../../../assets/monitor/monitor2.png" alt="" width="90%" height="90%">
                    </div>
                  </div>
                  <div class="box">
                    <div>
                      <img src="../../../assets/monitor/monitor3.png" alt="" width="90%" height="90%">
                    </div>
                    <div>
                      <img src="../../../assets/monitor/monitor4.png" alt="" width="90%" height="90%">
                    </div>
                  </div>
                  <div class="box">
                    <div>
                      <img src="../../../assets/monitor/monitor5.png" alt="" width="90%" height="90%">
                    </div>
                    <div>
                      <img src="../../../assets/monitor/monitor6.png" alt="" width="90%" height="90%">
                    </div>
                  </div>
                </div>
                </div>
                <div class="content-right">
                    <div class="first">
                    <div class="bg2">
                      <div class="bg1">
                        <div class="content1">
                          <div class="content1-box">
                            <div class="box-title">已处理</div>
                            <div class="box-number" style="color: #29ECB5;">8</div>
                            <div class="box-variation" style="color: #DF7110;">19.1</div>
                          </div>
                          <div class="content1-box">
                            <div class="box-title">未处理</div>
                            <div class="box-number" style="color: #DF7110;">12</div>
                            <div class="box-variation" style="color: #29ECB5;">19.1</div>
                          </div>
                        </div>
                        <div class="content2">
                          <div class="content2-box">
                            <div class="box-title">今日报警</div>
                            <div class="box-number" style="color: #00A8FF;">12</div>
                            <div class="box-variation" style="color: #29ECB5;">19.1</div>
                          </div>
                          <div class="content2-box">
                            <div class="box-title">完成率</div>
                            <div class="box-number" style="color: #00A8FF;">66%</div>
                            <div class="box-variation" style="color: #29ECB5;">19.1</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    </div>
                    <div class="second">
                      <div class="alarm-table-container">
                        <table class="alarm-table">
                          <thead>
                            <tr>
                              <th>报警时间</th>
                              <th>报警位置</th>
                              <th>报警内容</th>
                              <th>处理情况</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>06-25 14:25:12</td>
                              <td>东区大门</td>
                              <td>门禁异常</td>
                              <td class="status-done">已处理</td>
                            </tr>
                            <tr>
                              <td>06-25 14:25:12</td>
                              <td>东区大门</td>
                              <td>门禁异常</td>
                              <td class="status-done">已处理</td>
                            </tr>
                            <tr>
                              <td>06-25 14:25:12</td>
                              <td>东区大门</td>
                              <td>门禁异常</td>
                              <td class="status-done">已处理</td>
                            </tr>
                            <tr>
                              <td>06-25 14:25:12</td>
                              <td>东区大门</td>
                              <td>门禁异常</td>
                              <td class="status-undone">未处理</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="third">
                      <div class="device-cards">
                          <div class="device-card1">
                            <div>
                              <img src="../../../assets/energyConsumptionAnalysis/devices-number-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
                            </div>
                            <div class="device-card-text-box">
                              <div class="device-card-text">设备总数</div>
                              <div class="device-card1-value">650</div>
                            </div>
                          </div>
                          <div class="device-card2">
                            <div>
                              <img src="../../../assets/energyConsumptionAnalysis/devices-online-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
                            </div>
                            <div>
                              <div class="device-card-text">设备在线数</div>
                              <div class="device-card2-value">632</div>
                            </div>
                          </div>
                          <div class="device-card3">
                            <div>
                              <img src="../../../assets/energyConsumptionAnalysis/devices-offline-icon.png" style="width: 1.75rem;height: 1.75rem;" alt="">
                            </div>
                            <div>
                              <div class="device-card-text">设备离线数</div>
                              <div class="device-card3-value">18</div>
                            </div>
                          </div>
                      </div>
                      <div class="os-distribution-chart" ref="osDistributionChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import 'echarts-gl'
import { getThreeDBarOption } from '#/utils/threeDBarOption'
import { renderPie3DChart } from '#/utils/pie3d'
import { addChartToResizeManager, removeChartFromResizeManager } from '#/utils/echartsResize'
import { useFlexibleRem } from '#/utils/useFlexibleRem'
useFlexibleRem()
// 路由
const router = useRouter()

// 图表实例
const barChart = ref<HTMLElement>()
const powerChart = ref<HTMLElement>()
const envChart = ref<HTMLElement>()
const waterChart = ref<HTMLElement>()
const deviceChart = ref<HTMLElement>()
const pie3dChart = ref<HTMLElement>()
const waterFactoryMixChart = ref<HTMLElement>()
const osDistributionChart = ref<HTMLElement>()

// 定时器
let timer: number | null = null

// 星期几
const weekDay = ref('')

// 图表实例
let barChartInstance: echarts.ECharts | null = null
let powerChartInstance: echarts.ECharts | null = null
let envChartInstance: echarts.ECharts | null = null
let waterChartInstance: echarts.ECharts | null = null
let deviceChartInstance: echarts.ECharts | null = null
let pie3dChartInstance: any = null
let waterFactoryMixChartInstance: echarts.ECharts | null = null
let osDistributionChartInstance: echarts.ECharts | null = null

// 退出方法
const logout = () => {
  router.push('/navigation')
}

// 更新时间
const updateTime = () => {
  const now = new Date()
  const time = now.toLocaleTimeString('zh-CN', { hour12: false })
  const date = now.getFullYear() + '.' +
    String(now.getMonth() + 1).padStart(2, '0') + '.' +
    String(now.getDate()).padStart(2, '0')

  // 获取星期几
  const weekDays = ['日', '一', '二', '三', '四', '五', '六']
  weekDay.value = '星期' + weekDays[now.getDay()]

  const timeElement = document.getElementById('time')
  const dateElement = document.getElementById('date')

  if (timeElement) timeElement.innerText = time
  if (dateElement) dateElement.innerText = date
}

// 初始化柱状图
const initBarChart = () => {
  if (!barChart.value) return

  const chart = echarts.init(barChart.value)
  const option = getThreeDBarOption({
    xData: ['A区', 'B区', 'C区', 'D区'],
    yData: [320, 452, 688, 400]
  })
  chart.setOption(option)
  barChartInstance = chart
  addChartToResizeManager(chart)
}

// 初始化电力图表
const initPowerChart = () => {
  if (!powerChart.value) return

  const chart = echarts.init(powerChart.value)
  const option = {
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      data: Array.from({length: 19}, (_, i) => i + 6),
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      name: '',
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e90ff22' } }
    },
    series: [{
      data: [80, 120, 100, 130, 150, 180, 200, 220, 250, 285, 230, 200, 180, 150, 120, 100, 80, 60, 40],
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 0,
      itemStyle: { color: '#3ec6ff' },
      lineStyle: { width: 1 },
      areaStyle: { color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // 上→下
            [
              { offset: 0, color: '#32B7E9' },
              { offset: 1, color: 'rgba(50,183,233,0)' }
            ]
            ), }
    }]
  }
  chart.setOption(option)
  powerChartInstance = chart
  addChartToResizeManager(chart)
}

// 初始化环境图表
const initEnvChart = () => {
  if (!envChart.value) return

  const chart = echarts.init(envChart.value)
  const option = {
    tooltip: { trigger: 'axis' },
    grid: { left: 40, right: 20, top: 10, bottom: 20 },
    xAxis: {
      type: 'category',
      data: Array.from({length: 8}, (_, i) => (i+1)*3),
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e90ff22' } }
    },
    series: [
      {
        name: '今年',
        data: [100, 200, 150, 300, 250, 200, 100, 80],
        type: 'line',
        smooth: true,
        itemStyle: { color: '#b388ff' },
        lineStyle: { width: 3 },
        areaStyle: { color: 'rgba(179,136,255,0.2)' },
        symbol: 'circle',
        symbolSize: 0,
      },
      {
        name: '去年',
        data: [80, 120, 100, 180, 150, 120, 60, 40],
        type: 'line',
        smooth: true,
        itemStyle: { color: '#ffb300' },
        lineStyle: { width: 3 },
        areaStyle: { color: 'rgba(255,179,0,0.15)' },
        symbol: 'circle',
        symbolSize: 0,
      }
    ]
  }
  chart.setOption(option)
  envChartInstance = chart
  addChartToResizeManager(chart)
}

// 初始化水表图表
const initWaterChart = () => {
  if (!waterChart.value) return

  const chart = echarts.init(waterChart.value)
  const option = {
    tooltip: { trigger: 'axis' },
    legend: {
      data: ['今日', '平均'],
      textStyle: { color: '#fff' },
      right: 20,
      top: 10
    },
    grid: { left: 40, right: 20, top: 40, bottom: 30 },
    xAxis: {
      type: 'category',
      data: Array.from({length: 19}, (_, i) => i + 6),
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#3ec6ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: '#1e90ff22' } }
    },
    series: [
      {
        name: '今日',
        data: [1.2, 2.1, 1.8, 2.5, 3.0, 3.8, 4.2, 4.5, 4.8, 4.8, 4.0, 3.2, 2.5, 2.0, 1.5, 1.0, 0.8, 0.5, 0.2],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 0,
        itemStyle: { color: '#3ec6ff' },
        lineStyle: { width: 1 },
        areaStyle: { color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, // 上→下
              [
                { offset: 0, color: '#32B7E9' },
                { offset: 1, color: 'rgba(50,183,233,0)' }
              ]
              ), }
      },
      {
        name: '平均',
        data: Array(19).fill(2.5),
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { color: '#ff6b00' },
        lineStyle: { width: 1, type: 'solid', color: '#ff6b00' }
      }
    ]
  }
  chart.setOption(option)
  waterChartInstance = chart
  addChartToResizeManager(chart)
}

// 初始化设备图表
const initDeviceChart = () => {
  if (!deviceChart.value) return

  const chart = echarts.init(deviceChart.value)
  const option = {
    grid: { left: 60, right: 40, top: 10, bottom: 30 },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#8697BA' } },
      axisLabel: { color: '#fff' },
      splitLine: { show: false }
    },
    yAxis: {
      type: 'category',
      data: ['门禁', '监控', '水表'],
      axisLine: { lineStyle: { color: '#8697BA' } },
      axisLabel: { color: '#A1B2C2' }
    },
    series: [
      {
        name: '设备数',
        type: 'bar',
        data: [650, 120, 40],
        barWidth: 12,
        itemStyle: {
          color: function(params: any) {
            const colors = [
            new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // 上→下
            [
              { offset: 0, color: '#2986B1' },
              { offset: 1, color: '#6941FF' }
            ]
            ),
            new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // 上→下
            [
              { offset: 0, color: '#33FF99' },
              { offset: 1, color: '#00908E' }
            ]
            ),
            new echarts.graphic.LinearGradient(
            0, 0, 0, 1, // 上→下
            [
              { offset: 0, color: '#01B4FF' },
              { offset: 1, color: '#0336FF' }
            ]
            ),
          ];
            return colors[params.dataIndex]
          }
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        }
      }
    ]
  }
  chart.setOption(option)
  deviceChartInstance = chart
  addChartToResizeManager(chart)
}

// 初始化3D饼图
const initPie3DChart = () => {
  if (!pie3dChart.value) return

  pie3dChartInstance = renderPie3DChart(pie3dChart.value, {
    data: [
      { name: 'A区域', value: 20, itemStyle: { color: '#3ffbff' } },
      { name: 'D区域', value: 20, itemStyle: { color: '#b388ff' } },
      { name: 'C区域', value: 45, itemStyle: { color: '#ff9900' } },
      { name: 'B区域', value: 15, itemStyle: { color: '#3f6bff' } },
    ],
    hoverHeightScale: 2,
    selectOffset: 0.1,
    distance: 220,
    boxHeight: 5
  })
  if (pie3dChartInstance) {
    addChartToResizeManager(pie3dChartInstance)
  }
}

// 初始化混合图表
const initWaterFactoryMixChart = () => {
  if (!waterFactoryMixChart.value) return
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['人脸库', '车牌库', '新增'],
      top:'7%',
      right:'10%',
      textStyle: {
        color: '#fff'
    }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#3F93A3',
            width: 3
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          textStyle: {
            color: '#01747B'
          }
        },
        axisTick: {
          show: false
        },
        data: ['2017', '2018', '2019', '2020']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量/个',
        nameTextStyle: {
          color: '#01747B'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#01747B'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          textStyle: {
            color: '#01747B'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#01747B'
          }
        }
      },
      {
        type: 'value',
        name: '比例/%',
        nameTextStyle: {
          color: '#01747B'
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#01747B'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          textStyle: {
            color: '#01747B'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#01747B'
          }
        }
      }
    ],
    series: [
      {
        name: '人脸库',
        type: 'bar',
        barWidth: 20,
        stack: 'ele',
        itemStyle: {
          color: '#01A4FF'
        },
        data: [120, 132, 101, 134]
      },
      {
        name: '车牌库',
        type: 'bar',
        barWidth: 20,
        stack: 'ele',
        itemStyle: {
          color: '#54E6CB'
        },
        data: [220, 182, 191, 234]
      },
      {
        name: '新增',
        type: 'line',
        yAxisIndex: 1,
        stack: 'percent',
        itemStyle: {
          color: '#EC731F'
        },
        data: [60, 72, 71, 74]
      },
    ]
  }
  waterFactoryMixChartInstance = echarts.init(waterFactoryMixChart.value)
  waterFactoryMixChartInstance.setOption(option)
}

// 初始化操作系统分布图
const initOsDistributionChart = () => {
  if (!osDistributionChart.value) return
  const option = {
    legend: {
    orient: 'horizontal',
    bottom: 0,
    left: 'center',
    itemWidth: 18,
    itemHeight: 14,
    textStyle: {
      color: '#fff',
      fontSize: 10
    },
    data: ['Linux 7.x', 'Linux 6.6.x', 'Windows7', 'Windows10']
  },
  dataset: {
    source: [
      ['product', 'nums'],
      ['Linux 7.x', 100],
      ['Linux 6.6.x', 200],
      ['Windows7', 120],
      ['Windows10', 240]
    ]
  },
  grid: {
    left: '35%',
    top: 10,
    right: '15%',
    bottom: 10,
    containLabel: true
  },
  xAxis: [{ show: false }, { show: false }],
  yAxis: {
    type: 'category',
    // inverse: true, // 注释掉这行
    show: false
  },
  tooltip: {
        trigger: 'item',
        fontSize: 10,
        formatter: function(params:any) {
        return `${params.value} (${params.percent}%)`;
        }
      },
  series: [
    {
      type: 'pie',
      center: ['20%', '50%'],
      radius: ['60%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
      color: function(params:any) {
        const colorList = [
          '#3ec6ff', // Linux 7.x
          '#00ffb0', // Linux 6.6.x
          '#b388ff', // Windows7
          '#ffb300'  // Windows10
        ];
        return colorList[params.dataIndex];
      }
    },
      label: {
        normal: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      encode: {
        itemName: 'product',
        value: 'nums'
      },
    },
    {
      type: 'bar',
      barWidth: 10,
      itemStyle: {
      color: function(params:any) {
        const colorList = [
          '#3ec6ff', // Linux 7.x
          '#00ffb0', // Linux 6.6.x
          '#b388ff', // Windows7
          '#ffb300'  // Windows10
        ];
        return colorList[params.dataIndex];
      }
    },
      label: {
        show: true,
        position: 'right',
        color: '#fff',
        fontSize: 10,
        fontWeight: 'bold'
      },
      encode: {
        x: 'nums',
        y: 'product'
      }
    }
  ]
}
  osDistributionChartInstance = echarts.init(osDistributionChart.value)
  osDistributionChartInstance.setOption(option)
}

// 组件挂载时初始化
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
  initBarChart()
  initPowerChart()
  initEnvChart()
  initWaterChart()
  initDeviceChart()
  initPie3DChart()
  initWaterFactoryMixChart()
  initOsDistributionChart()
})

// 组件卸载时清理
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }

  // 从管理器中移除图表
  if (barChartInstance) {
    removeChartFromResizeManager(barChartInstance)
    barChartInstance.dispose()
  }
  if (powerChartInstance) {
    removeChartFromResizeManager(powerChartInstance)
    powerChartInstance.dispose()
  }
  if (envChartInstance) {
    removeChartFromResizeManager(envChartInstance)
    envChartInstance.dispose()
  }
  if (waterChartInstance) {
    removeChartFromResizeManager(waterChartInstance)
    waterChartInstance.dispose()
  }
  if (deviceChartInstance) {
    removeChartFromResizeManager(deviceChartInstance)
    deviceChartInstance.dispose()
  }
  if (pie3dChartInstance) {
    removeChartFromResizeManager(pie3dChartInstance)
    pie3dChartInstance.dispose()
  }
  if (waterFactoryMixChartInstance) {
    waterFactoryMixChartInstance.dispose()
  }
  if (osDistributionChartInstance) {
    osDistributionChartInstance.dispose()
  }
})
</script>

<style scoped>
@font-face {
  font-family: 'ShiShangZhongHeiJianTi';
  src: url('../../../assets/fonts/时尚中黑简体.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.mian{
    height: 100vh;
    background: url("../../../assets/monitor/bg.png");
    background-size: 100% 100%;
    background-color: #081b3a;
    display: flex;
    flex-direction: column;
}
.title {
    height: 5.375rem;
    align-items: center;
    display: flex;
    justify-content: space-between;
    .left {
    display: flex;
    width: 18.3125rem;
    .left-first {
      padding-left: 2.3125rem;
      font-size: 1.875rem;
      width: 10.5rem;
      color: #ffffff;
    }
    .left-second {
      width: 6.5rem;
      font-family: ShiShangZhongHeiJianTi;
      font-weight: 400;
      font-size: 1.25rem;
      color: #ffffff;
    }
  }
    .center{
    font-size: 1.9rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px #1e90ff, 0 0 20px #1e90ff;
    }
    .right{
        width: 17.3125rem;
        display: flex;
        font-family: ShiShangZhongHeiJianTi;
        font-weight: 400;
        font-size: 1.25rem;
        color: #FFFFFF;
        gap: .75rem;
        .logout{
          display: flex;
          cursor: pointer;
          align-items: center;
          gap: .2rem;
        }
    }
}
.contents{
    flex: 1;
    .content{
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin:  2rem 2.25rem 1.93rem 2.25rem;
    .content-left{
        width: 32.6875rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .first{
            height: 14.5rem;
            .first-total{
              display: flex;
              justify-content: flex-end;
              align-items: center;
              padding: 2rem 1rem 0 0;
              font-size: 1.12rem;
              color: #89EAFF;
              .first-total-title{
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 1.12rem;
              line-height: 1rem;
              }
              .first-total-value{
                display: flex;
                align-items: center;
                .first-total-value-number{
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  font-size: 1.3rem;
                  color: #89EAFF;
                  line-height: 1rem;
                  padding: .3rem;
                  margin: 0 .1rem;
                  border: .02rem solid rgba(99,145,180,0.59);
                }
              }
            }
            .first-content{
              .alarm-table-container {
              border-radius: 0.5rem;
              width: 95%;
              margin: 0 auto;
            }
            .alarm-table-title {
              color: #fff;
              font-size: 1.1rem;
              font-weight: bold;
              margin-bottom: 0.5rem;
              letter-spacing: 0.1em;
            }

            .alarm-table {
              width: 100%;
              border-collapse: collapse;
              color: #8697BA;
              font-size: 0.95rem;
            }

            .alarm-table thead th {
              padding: .8rem 0.2rem;
              color: #3ec6ff;
              font-weight: bold;
            }
            .alarm-table thead {
              border: .1rem solid #1EC7F8;
            }

            .alarm-table tbody td {
              text-align: center;
              padding: .3rem .2rem;
            }

            .status-done {
              color: #3ec6ff;
            }

            .status-undone {
              color: #ffb300;
              font-weight: bold;
            }
            }
        }
        .second{
            height: 13.5rem;
            .water-factory-mix-chart {
              width: 100%;
              height: 100%;
              border-radius: 0.5rem;
            }
        }
        .third{
            height: 15rem;
            .third-content{
                height: 100%;
                .power-chart {
                    height: 100%;
                }
            }
        }
    }
    .content-center{
        width: 47.5rem;
        display: flex;
        align-items: end;
        .content-box{
          width: 100%;
          display: flex;
          flex-direction: column;
          .box{
            flex: 1;
            display: flex;
            justify-content: space-around;
            align-items: center;
          }
          .box div{
            width: 23rem;
            height: 15rem;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
    }
    .content-right{
        width: 32.68rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .first{
            height: 16rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .bg2{
              background: url("../../../assets/monitor/device-alerts-bg3.png");
              background-repeat: no-repeat;
              background-position: center;
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              .bg1{
              background: url("../../../assets/monitor/device-alerts-bg1.png");
              background-repeat: no-repeat;
              background-position: center;
              height: 12rem;
              width: 100%;
              padding-top: 4rem;
              display: flex;
              flex-direction: column;
              .content1{
                flex: 1;
                display: flex;
                justify-content: space-between;
                margin: 0 4rem;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                .content1-box{
                  width: 8rem;
                  height: 2rem;
                  padding: .5rem;
                  display: flex;
                  justify-content: space-between;
                  font-size: 1.1rem;
                  font-weight: bold;
                  background: url("../../../assets/monitor/device-alerts-button1.png");
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  background-position: center;
                  .box-title{
                  font-size: 1rem;
                  color: #FFFFFF;
                  display: flex;
                  align-items: center;
                }
                .box-number{
                  font-size: 1.3rem;
                  color: #29ECB5;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                .box-variation{
                  font-size: .7rem;
                  color: #DF7110;
                  display: flex;
                  align-items: end;
                }
                }
              }
              .content2{
                flex: 1;
                display: flex;
                justify-content: space-between;
                margin: 0 2rem;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                .content2-box{
                  width: 9rem;
                  height: 2rem;
                  padding: .5rem;
                  display: flex;
                  justify-content: space-between;
                  font-size: 1.1rem;
                  font-weight: bold;
                  background: url("../../../assets/monitor/device-alerts-button1.png");
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  background-position: center;
                  .box-title{
                  font-size: 1rem;
                  color: #FFFFFF;
                  display: flex;
                  align-items: center;
                }
                .box-number{
                  font-size: 1.3rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                .box-variation{
                  font-size: .7rem;
                  display: flex;
                  align-items: end;
                }
                }
              }
            }
            }
        }
        .second{
            height: 13.5rem;
            display: flex;
            justify-content: center;
            align-items: end;
            .alarm-table-container {
              border-radius: 0.5rem;
              width: 95%;
              margin: 0 auto;
            }
            .alarm-table-title {
              color: #fff;
              font-size: 1.1rem;
              font-weight: bold;
              margin-bottom: 0.5rem;
              letter-spacing: 0.1em;
            }

            .alarm-table {
              width: 100%;
              border-collapse: collapse;
              color: #8697BA;
              font-size: 0.95rem;
            }

            .alarm-table thead th {
              padding: .8rem 0.2rem;
              color: #3ec6ff;
              font-weight: bold;
            }
            .alarm-table thead {
              border: .1rem solid #1EC7F8;
            }

            .alarm-table tbody td {
              text-align: center;
              padding: .3rem .2rem;
            }

            .status-done {
              color: #3ec6ff;
            }

            .status-undone {
              color: #ffb300;
              font-weight: bold;
            }
        }
        .third{
            height: 14.8rem;
            .device-cards {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
            margin-right: 1.06rem;
            /* margin-bottom: 0.5rem; */
            margin-left: 1.31rem;
              .device-card1{
                height: 3.2rem;
                width: 7.21rem;
                background: url("../../../assets/energyConsumptionAnalysis/devices-number.png");
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;

              .device-card1-value{
                font-family: Arial;
                font-weight: bold;
                font-size: 1.25rem;
                color: #02B3F4;
              }
            }
              .device-card2{
                height: 3.2rem;
                width: 7.21rem;
                background: url("../../../assets/energyConsumptionAnalysis/devices-online.png");
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .device-card2-value{
                font-family: Arial;
                font-weight: bold;
                font-size: 1.25rem;
                color: #1DE39D;
              }
              }
              .device-card3{
                height: 3.2rem;
                width: 7.21rem;
                background: url("../../../assets/energyConsumptionAnalysis/devices-offline.png");
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                .device-card3-value{
                font-family: Arial;
                font-weight: bold;
                font-size: 1.25rem;
                color: #F19315;
              }
              }
              .device-card-text{
                font-family: Microsoft YaHei UI;
                  font-weight: 400;
                  font-size: 0.75rem;
                  color: #A1B2C2;
                  line-height: 0.75rem;
              }
          }
          .os-distribution-chart {
            width: 100%;
            height: 10rem;
          }
        }
    }
}
}
.pie3d-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.pie3d-water {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.pie3d-water-num {
  font-size: 1.3rem;
  color: #3ec6ff;
  background: #0a1e3a;
  border-radius: 0.2rem;
  padding: 0 0.2rem;
  margin: 0 0.2rem;
  letter-spacing: 0.1em;
}
.pie3d-chart {
  width: 100%;
  height: 176px;
  min-height: unset;
  margin: 0 auto;
}

</style>
