<template>
  <div class="dashboard-container" :style="containerStyle">
    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 左侧区域 -->
      <div class="left-section">
        <!-- 左侧上部分 -->
        <div class="left-top">
          <!-- 区域信息概览 -->
          <div class="card-header">
            <div class="headTitle">区域概览--阳光城市花园</div>
            <div class="titleR">
              <img src="../../../static/ui/quan.png" class="titleRImg" alt="">
              <div>刷新</div>
            </div>
          </div>
          <!-- <div class="info-card region-overview">
            <div class="info-grid">
              <div class="info-item" v-for="(item, index) in OverviewRegionalInformation" :key="index">
                <span class="label">{{ item.label }}:</span>
                <span class="value" :style="{ color: item.label === '当前可用无人机数量' ? 'green' : 'black' }">{{ item.value
                }}</span>
              </div>
            </div>
          </div> -->

          <!-- 区域地图 -->
          <div class="info-card region-map">
            <img src="../../../static/image/login_bg.png" alt="阳光花园小区航拍图" class="map-image" />
          </div>
        </div>

        <!-- 左侧下部分：历史火情统计 -->
        <div class="info-card stats-alerts">
          <!-- <div class="card-tabs">
            <span class="tab-btn">历史火情统计</span>
          </div> -->
          <div class="card-header">
            <div>历史火情统计</div>
            <div class="titleR">
              <div class="timeQiehuan">
                <div class="time0" :class="timeNum == 1 ? 'timeActive' : ''" @click="timeChange(1)">近30天</div>
                <div class="time0 bor" :class="timeNum == 2 ? 'timeActive' : ''" @click="timeChange(2)">近3个月</div>
                <div class="time0" :class="timeNum == 3 ? 'timeActive' : ''" @click="timeChange(3)">近一年</div>
              </div>
              <img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
              <div>更多</div>
            </div>
          </div>

          <div class="tab-content history-stats">
            <!-- <div class="time-filter">
              <el-select v-model="historyFireSelectTime" placeholder="选择数据查看范围" style="width: 240px"
                class="filter-select" @change="historyFireSelectTimeFn">
                <el-option v-for="item in historyFireTimeData" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </div> -->
            <div class="chart-container">
              <div class="main4Title" style="margin-top: 10px;width: 80%;margin: 0 auto;">
                <div>火情登记分布</div>
                <img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
              </div>
              <div id="echarts0" class="chart"></div>
            </div>
            <div class="chart-container1">
              <div class="main4Title" style="margin-top: 10px;width: 90%;margin: 0 auto;">
                <div>火情趋势图</div>
                <img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
              </div>
              <div id="historyChart" class="chart"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-section">
        <div class="info-card current-situation">
          <div class="card-headers">
            <div class="headTitle">火情告警</div>
            <div class="titleR">
              <img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
              <div>更多</div>
            </div>
          </div>
          <div class="situationMain">
            <!-- 火情告警 -->
            <div style="width: 100%;height: 100%;overflow-y: auto;z-index: 11;">
              <div class="situation-item"
                :class="item.isXFOk ? 'jiechu' : item.severity == 1 ? 'oneji' : item.severity == 2 ? 'twoji' : item.severity == 3 ? 'threeji' : ''"
                v-for="(item, index) in currentFireData" :key="index">
                <div class="itemtop">
                  <div style="display: flex;">
                    <div class="itemtop0 onejiColor"
                      :class="item.severity == 1 ? 'onejiColor' : item.severity == 2 ? 'twojiColor' : item.severity == 3 ? 'threejiColor' : ''">
                      <img v-if="item.severity == 3" src="../../../static/ui/huo1.png" class="itemimg" alt="">
                      <img v-else src="../../../static/ui/huo0.png" class="itemimg" alt="">
                      <div :style="{ color: item.severity == 3 ? '#000000' : '#ffffff' }">{{ item.severity == 1 ? '一级' :
                        item.severity == 2 ? '二级' : item.severity == 3 ? '三级' : '' }}
                      </div>
                    </div>
                    <div class="itemtop0 itemjiechu">已解除</div>
                  </div>
                  <div style="color: #ffffff;">{{ item.time }}</div>
                </div>
                <div>
                  <div style="display: flex;align-items: center;">
                    <img class="itemimgs" src="../../../static/ui/dingwei.png" alt="">
                    <div>{{ item.location }}</div>
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 5px;">
                    <img class="itemimgs" src="../../../static/ui/zhuangtai.png" alt="">
                    <div>{{ item.status }}</div>
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 5px;">
                    <img class="itemimgs" src="../../../static/ui/renyaun.png" alt="">
                    <div>{{ item.personnel }}</div>
                  </div>
                  <div style="display: flex;align-items: center;margin-top: 5px;">
                    <img class="itemimgs" src="../../../static/ui/wurenji.png" alt="">
                    <div>{{ item.drone }}</div>
                  </div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="info-card current-situation1">
          <div class="card-headers">
            <div class="headTitle">火情告警</div>
            <div class="titleR">
              <img src="../../../static/ui/yan.png" class="titleRImg1" alt="">
              <div>更多</div>
            </div>
          </div>
          <div class="situationMain">
            <div class="main4Title">
              <div>设备使用情况</div>
              <img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
            </div>
            <div>
              <div id="echats3"></div>
            </div>
            <div class="main4Title" style="margin-top: 10px;">
              <div>设备状态</div>
              <img src="../../../static/ui/leftTop.png" class="imgposition" alt="">
            </div>
            <div>
              <div id="echats4"></div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, nextTick, reactive, onUnmounted, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 初始化设置历史火情统计的图标天数
const timeNum = ref(1)
const timeChange = (val) => {
  timeNum.value = val
}
const router = useRouter();
const route = useRoute();
// 响应式高度配置，方便统一修改
const heightConfig = reactive({
  containerMinHeight: '100vh',
  leftTopHeight: '350px',
  cardSpacing: '1rem',
  headerHeight: '40px',
  chartMinHeight: '250px'
});

// 计算容器样式
const containerStyle = computed(() => ({
  minHeight: heightConfig.containerMinHeight,
  '--card-spacing': heightConfig.cardSpacing,
  '--header-height': heightConfig.headerHeight,
  '--chart-min-height': heightConfig.chartMinHeight
}));

// 区域信息数据
const OverviewRegionalInformation = ref([
  { label: "小区名称", value: "阳光花园" },
  { label: "小区建筑数量", value: "12栋" },
  { label: "配备无人机数量", value: "5台" },
  { label: "当前可用无人机数量", value: "3台" },
  { label: "最近火情发生时间", value: "2023-05-15 14:30" },
  { label: "配备无人机数量", value: "5台" },
  { label: "当前可用无人机数量", value: "3台" },
  { label: "最近火情发生时间", value: "2023-05-15 14:30" }
]);

// 历史数据时间选择
const historyFireSelectTime = ref('');
const historyFireTimeData = ref([
  { label: "近一个月", value: 30 },
  { label: "近三个月", value: 90 },
  { label: "近半年", value: 180 },
  { label: "近一年", value: 365 }
]);

// 定义一个响应式变量currentFireData，存储火灾数据
const currentFireData = ref([
  {
    severity: 1,//级别
    time: "2025-8-7 11:14:36",
    location: "红色 四单元 七号搂 3楼",//位置
    status: "消防人员已到达现场",//状态   
    personnel: '刘诗涵',//人员
    drone: 'DR569',//无人机编号
    isXFOk: false,//是否已解除
  },
  {
    severity: 2,//级别
    time: "2025-8-7 11:14:36",
    location: "红色 四单元 七号搂 3楼",//位置
    status: "消防人员已到达现场",//状态   
    personnel: '刘诗涵',//人员
    drone: 'DR569',//无人机编号
    isXFOk: false,//是否已解除
  },
  {
    severity: 3,//级别
    time: "2025-8-7 11:14:36",
    location: "红色 四单元 七号搂 3楼",//位置
    status: "消防人员已到达现场",//状态   
    personnel: '刘诗涵',//人员
    drone: 'DR569',//无人机编号
    isXFOk: false,//是否已解除
  },
  {
    severity: 2,//级别
    time: "2025-8-7 11:14:36",
    location: "红色 四单元 七号搂 3楼",//位置
    status: "消防人员已到达现场",//状态   
    personnel: '刘诗涵',//人员
    drone: 'DR569',//无人机编号
    isXFOk: true,//是否已解除
  },

]);
// 定义一个响应式变量，用来存储火警的边框颜色
const sensorFireBorderColor = ref(["fireover", "firewarning", "fireemergency"]);
const historyFireSelectTimeFn = () => {
  console.log(historyFireSelectTime.value);
};
// 火情登记分布
let chart0Instance = null;
const initChart0 = () => {
  nextTick(() => {  // 确保DOM渲染完成
    const chartDom = document.getElementById('echarts0');
    if (!chartDom) return;
    // 销毁已有实例避免内存泄漏
    if (chart0Instance) chart0Instance.dispose();
    chart0Instance = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        // orient: "vertical",
        top: '75%',
        // right: '0%',
        // left: '60%',
        textStyle: { //图例文字的样式
          color: '#ffffff',
          // fontSize: 14,
          rich: {
            a: { fontSize: 20, color: '#ffffff' }, // 自定义样式
            b: { fontSize: 12 }
          }
        },
        data: ['一级', '二级', '三级'],
        formatter: function (name) {
          // 根据不同的名称返回不同的样式
          switch (name) {
            case '一级':
              return `${name} {a|20}`; // 大号字体
            case '二级':
              return `${name} {a|2}`; // 大号字体
            case '三级':
              return `${name} {a|8}`; // 大号字体
          }
        }
      },
      series: [
        {
          name: '火情登记',
          detail: {
            // 调节数字位置
            offsetCenter: [-1, 12],
            color: '#fff',
            fontSize: '22px'
          },
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '40%'],
          avoidLabelOverlap: false,
          itemStyle: {
            // borderRadius: 10,
            borderColor: 'transparent',
            borderWidth: 5
          },
          label: {
            show: true,
            name: 'asas',
            position: 'center'
          },
          // emphasis: {//聚焦
          //   label: {
          //     show: true,
          //     fontSize: 14,
          //     fontWeight: 'bold'
          //   }
          // },
          // labelLine: {
          //   show: true
          // },
          color: ['red', '#faac53', '#ffcc24'],
          data: [
            { value: 20, name: '一级' },
            { value: 40, name: '二级' },
            { value: 40, name: '三级' },
          ]
        }
      ]
    };
    chart0Instance.on('click', function (params) {
      // 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
      // console.log("--------------333333333333-------------",params.name,params.value);
      // router.push({
      //   path: '/fireManage',
      //   query: { taskId: params.name }
      // })
      // useAppStoreInstance.num = 4
    });
    chart0Instance.setOption(option);
    // 窗口大小变化时重绘图表
    const resizeHandler = () => {
      chart0Instance.resize();
    };
    window.addEventListener('resize', resizeHandler);
    // 组件卸载时清理
    onUnmounted(() => {
      window.removeEventListener('resize', resizeHandler);
      chartInstance.dispose();
    });
  });
};
// 火情趋势图
let chartInstance = null;
const initChart2 = () => {
  nextTick(() => {  // 确保DOM渲染完成
    const chartDom = document.getElementById('historyChart');
    if (!chartDom) return;

    // 销毁已有实例避免内存泄漏
    if (chartInstance) chartInstance.dispose();

    chartInstance = echarts.init(chartDom);

    const option = {
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        top: '3%',
        containLabel: true  // 确保标签不被裁剪
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          // console.log('params', params)
          let html = `${(params[0].axisValue)}日共发生<span style="color:red">${(params[0].value)}</span>起火灾<br />`
          return html
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          rotate: 45 // 旋转45度
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
      }]
    };
    chartInstance.on('click', function (params) {
      // 获取到点击的点的相关信息，再跳转到详情页的时候传递过去
      // console.log("--------------333333333333-------------",params.name,params.value);
      router.push({
        path: '/fireManage',
        query: { taskId: params.name }
      })
      useAppStoreInstance.num = 4
    });
    chartInstance.setOption(option);

    // 窗口大小变化时重绘图表
    const resizeHandler = () => {
      chartInstance.resize();
    };

    window.addEventListener('resize', resizeHandler);

    // 组件卸载时清理
    onUnmounted(() => {
      window.removeEventListener('resize', resizeHandler);
      chartInstance.dispose();
    });
  });
};
// 设备使用情况
let chart3Instance = null;
const initChart3 = () => {
  nextTick(() => {  // 确保DOM渲染完成
    const chartDom = document.getElementById('echats3');
    if (!chartDom) return;
    // 销毁已有实例避免内存泄漏
    if (chart3Instance) chart3Instance.dispose();

    chart3Instance = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: "vertical",
        top: '20%',
        // right: '0%',
        left: '40%',
        textStyle: { //图例文字的样式
          color: '#ffffff',
          // fontSize: 14,
          rich: {
            a: { fontSize: 20, color: '#ffffff' }, // 自定义样式
            b: { fontSize: 12 }
          }
        },
        data: ['无人机总数', '飞行中', '空闲'],
        formatter: function (name) {
          // 根据不同的名称返回不同的样式
          switch (name) {
            case '无人机总数':
              return `${name} {a|20}`; // 大号字体
            case '空闲':
              return `${name} {a|2}`; // 大号字体
            case '飞行中':
              return `${name} {a|8}`; // 大号字体
          }
        }
      },
      series: [
        {
          name: '无人机总数',
          detail: {
            // 调节数字位置
            offsetCenter: [-1, 12],
            color: '#fff',
            fontSize: '22px'
          },
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['20%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            // borderRadius: 10,
            borderColor: 'transparent',
            borderWidth: 5
          },
          label: {
            show: true,
            name: 'asas',
            position: 'center'
          },
          // emphasis: {//聚焦
          //   label: {
          //     show: true,
          //     fontSize: 14,
          //     fontWeight: 'bold'
          //   }
          // },
          // labelLine: {
          //   show: true
          // },
          color: ['#636367', '#c7e9ff'],
          data: [
            { value: 20, name: '空闲' },
            { value: 80, name: '飞行中' },
          ]
        }
      ]
    };
    chart3Instance.on('click', function (params) {
      // router.push({
      //   path: '/fireManage',
      //   query: { taskId: params.name }
      // })
      // useAppStoreInstance.num = 4
    });
    chart3Instance.setOption(option);
    // 窗口大小变化时重绘图表
    window.addEventListener('resize', resizeHandler);
  });
};
//设备状态
let chart4Instance = null;
const initChart4 = () => {
  nextTick(() => {  // 确保DOM渲染完成
    const chartDom = document.getElementById('echats4');
    if (!chartDom) return;
    // 销毁已有实例避免内存泄漏
    if (chart4Instance) chart4Instance.dispose();

    chart4Instance = echarts.init(chartDom);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        orient: "vertical",
        top: '60%',
        // right: '0%',
        left: '25%',
        textStyle: { //图例文字的样式
          color: '#ffffff',
          // fontSize: 14,
          rich: {
            a: { fontSize: 20, color: '#ffffff' }, // 自定义样式
            b: { fontSize: 12 }
          }
        },
        data: ['正常', '维护', '故障'],
      },
      grid: {

        left: 60,
      },
      xAxis: {
        type: 'value',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
      },
      yAxis: {
        type: 'category',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        data: ['设备状态']
      },
      series: [
        {
          name: '正常',
          type: 'bar',
          barWidth: 10,
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [320]
        },
        {
          name: '维护',
          type: 'bar',
          barWidth: 10,
          stack: 'total',
          emphasis: {
            focus: 'series'
          },
          data: [120,]
        },
        {
          name: '故障',
          type: 'bar',
          stack: 'total',
          barWidth: 10,
          emphasis: {
            focus: 'series'
          },
          data: [220]
        },


      ]
    };
    chart4Instance.on('click', function (params) {
    });
    chart4Instance.setOption(option);
    // 窗口大小变化时重绘图表
    window.addEventListener('resize', resizeHandler);
  });
};
const resizeHandler = () => {
  if (chart3Instance) {
    chart3Instance.resize();
  }
  if (chartInstance) {
    chartInstance.resize();
  }
  if (chart4Instance) {
    chart4Instance.resize();
  }
};
// 挂载时初始化
onMounted(() => {
  initChart0();
  initChart2();
  initChart3();
  initChart4();
});
// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler);
  if (chart3Instance) {
    chart3Instance.dispose();
  }
  if (chartInstance) {
    chartInstance.dispose();
  }
  if (chart4Instance) {
    chart4Instance.dispose();
  }
});


</script>

<style scoped>
/* 基础样式 - 使用CSS变量方便调整 */
.dashboard-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: rgba(0, 0, 0, 0.05);
  color: #333;
  overflow: hidden;
}

/* 主内容区样式 */
.main-content {
  display: flex;
  gap: var(--card-spacing);
  /* padding: 0.4rem 0; */
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

/* 左侧区域样式 */
.left-section {
  /* background-color: #10b981; */
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  height: 100%;
  overflow: hidden;
}

.left-top {
  /* display: flex; */
  gap: var(--card-spacing);
  height: calc(60vh - 106px);
  flex-shrink: 0;
  background-color: #2d2d34;
}

/* 卡片通用样式 - 核心优化 */
.info-card {
  background-color: #2d2d34;
  /* border-radius: 8px; */

  /* padding: 1rem; */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.info-card:hover {
  /* transform: translateY(2px); */
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
}

/* 卡片头部 */
.card-header {
  color: #ffffff;
  padding-left: 20px;

  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom: 1px solid #f1f1f1; */
  /* margin-bottom: 1rem; */
  height: 50px;
  width: 100%;
  background-image: url(../../../static/ui/long.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* height: var(--header-height); */
  /* flex-shrink: 0; */
}

.card-headers {
  color: #ffffff;
  padding-left: 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  width: 100%;
  background-image: url(../../../static/ui/samrt.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 标题 */
.headTitle {
  font-size: 16px;
  font-weight: 600;
}

.card-header1 {
  background-color: #e29393;
}

.card-header h2 {
  font-size: 1.2rem;
  color: #1e40af;
  margin: 0;

}

.more-btn {
  width: 50px;
  background-color: #facc15;
  display: flex;
  justify-content: center;
  border-radius: 90%;
  align-items: center;
}

.icon-fire-red {
  margin-top: -0.31rem;
  width: 15%;
  margin-right: 10px;

}

/* 区域信息概览 */
.region-overview {
  flex: 1;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  /* flex-grow: 1; */
  padding-right: 5px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;

}

.info-item:hover {
  /* transform: translateX(4px); */
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-size: 0.9rem;
  color: #666;
}

.info-item .value {
  font-size: 0.95rem;
  font-weight: 600;
}

/* 区域地图 */
.region-map {
  flex: 2;
  padding: 20px;
  height: calc(100% - 50px);
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-image:hover {

  /* transform: translateY(4px); */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

}

/* 历史火情统计 */
.stats-alerts {
  height: 39vh;
  display: flex;
  flex-direction: column;


}

/* .card-tabs {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #1e40af;
} */

.tab-content {

  /* display: flex;
  flex-direction: column; */
  /* height: 100%; */
}

.history-stats {
  display: flex;
  /* flex-direction: column; */
  height: calc(100% - 50px);
  padding-top: 20px;
}

.time-filter {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0 1rem 1rem;
  flex-shrink: 0;
}

/* 图表容器 - 自适应高度 */
.chart-container {
  color: #ffffff;
  width: 30%;
  position: relative;
  /* min-height: var(--chart-min-height); */
  height: 100%;
}

.chart-container1 {
  color: #ffffff;
  width: 70%;
  position: relative;
  /* min-height: var(--chart-min-height); */
  height: 100%;
}


.chart {
  width: 100% !important;
  height: 100% !important;
  /* position: absolute;
  top: 0;
  left: 0; */
}

/* 右侧区域样式 */
.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--card-spacing);
  /* height: calc(100vh - 100px); */
  overflow: hidden;
}

/* 右侧卡片 - 使用flex布局自动分配高度 */
.current-situation {
  display: flex;
  flex-direction: column;
  height: calc(60vh - 106px);
}

.current-situation1 {
  display: flex;
  flex-direction: column;
  height: 39vh;
}

/* 火情列表 */
.situation-list {
  /* display: flex;
  flex-direction: column; */
  /* gap: 0.5rem; */
  /* flex-grow: 1; */
  /* padding-right: 5px; */
  height: 100%;

}

.situationMain {
  overflow-y: auto;
  padding: 20px 20px 10px 20px;
  height: calc(100% - 50px);
  color: #ffffff;
  /* box-shadow: inset 0 -20px rgba(0, 0, 0, 1); */
  /* box-shadow: 2px 0 5px rgba(0, 0, 0, 1); */
}

/* 火情项目样式 */
.situation-item {
  height: 200px;
  margin-bottom: 10px;
  padding: 0px 20px;
  color: #ffffff;
  z-index: 10;
}

.situation-item:hover {
  /* transform: translateX(4px); */
}

.fireover {
  border-left: #10b981 4px solid;
}

.fireemergency {
  border-left: #fc0000 4px solid;
}

.firewarning {

  border-left: #facc15 4px solid;

}

.isXFOk {
  color: #10b981;
}

.isXFNotOk {
  color: #144937;
}

.emergency {
  position: sticky;
  /*//固定在某个位置 */
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  /* background-color: #fff; 设置背景色避免透明 */
  /* 可选：添加阴影增强视觉效果 */

}

.situation-content p {
  margin: 0.2rem 0;
  font-size: 1rem;
  color: #444;
  height: 1.5rem;
  display: flex;

  align-items: center;
}

.icon-fire-red1 {
  height: 70%;
  margin-right: 0.5rem;
}

.situation-content .location {
  font-weight: 500;
  color: #1e40af;
}

.situation-content .severity {
  color: #ef4444;
}

.situation-content .status {
  color: #10b981;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .left-top {
    height: auto;
    flex-direction: column;
  }

  .region-overview,
  .region-map {
    height: 300px;
    margin-bottom: var(--card-spacing);
  }
}

@media (max-width: 768px) {
  .card-header h2 {
    font-size: 1rem;
  }

  .situation-item {
    padding: 0.7rem;
    gap: 0.7rem;
  }

  .situation-content p {
    font-size: 0.85rem;
  }
}

.titleR {
  margin-right: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
}

.titleRImg {
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.titleRImg1 {
  width: 20px;
  height: 15px;
  margin-right: 5px;
}

.timeQiehuan {
  display: flex;
  align-items: center;
  border: 1px solid #5c54c5;
  border-radius: 5px;
  margin-right: 10px;

}

.time0 {
  width: 60px;
  padding: 2px 0px;
  text-align: center;
  color: #5c54c5;
}

.timeActive {
  background-color: #5c54c5;
  color: #ffffff;
}

.bor {
  border-left: 1px solid #5c54c5;
  border-right: 1px solid #5c54c5;
}

/* 火情告警 */
/* 火情解除 */
.jiechu {
  background-image: url(../../../static/ui/jiechu.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.oneji {
  background-image: url(../../../static/ui/oneji.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.onejiColor {
  background: linear-gradient(to right, #fe473e 40%, #df2d39 100%);
}

.twojiColor {
  background: linear-gradient(to right, #f08f20 40%, #e56b00 100%);
}

.threejiColor {
  background: linear-gradient(to right, #ffe263 40%, #ffcc25 100%);
}

.jiechuColor {
  background-color: red !important;
}

.twoji {
  background-image: url(../../../static/ui/twoji.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.threeji {
  background-image: url(../../../static/ui/threeji.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.itemtop {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #4d4642;
  align-items: center;
  margin-bottom: 5px;
}

.itemtop0 {
  margin: 10px 0;
  width: 65px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 14px;
  color: #ffffff;
  border-radius: 3px;
  padding: 2px 5px;
  cursor: pointer;

}

.itemjiechu {
  border: 1px solid #37ba6d;
  color: #37ba6d;
  margin-left: 10px;
}

.itemimg {
  width: 13px;
  height: 18px;
}

.itemimgs {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/* 设备使用情况 */
#echats3 {
  width: 100%;
  height: 150px;
  color: #ffffff !important;
}

.main4Title {
  background-color: #3a3a3e;
  font-size: 14px;
  padding: 5px;
  position: relative;
  margin-bottom: 5px;
}

.imgposition {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
}

/* 设备状况 */
#echats4 {
  width: 100%;
  height: 50px;
  color: #ffffff !important;
}
</style>