feat: 新增能源管理数据看板页面

src/api/ems/index.js

@@ -0,0 +1,98 @@
+import request from '@/utils/request';
+/**
+ * 综合能费趋势-本月/本年费用趋势图，energyClassificationCode指定用能类型
+ */
+export async function costTrend(params) {
+  const res = await request.get(`/ems/pageHome/costTrend`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+
+综合用能概览-根据统计周期返回本月/本年数据
+ */
+export async function overview(params) {
+  const res = await request.get(`/ems/pageHome/overview`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+ *区域用能对比柱状图-底部柱状图数据，energyClassificationCode指定用能类型
+ */
+export async function regionBarChart(params) {
+  const res = await request.get(`/ems/pageHome/regionBarChart`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+
+区域用能对比-环形图数据(电/水/气)
+ */
+export async function regionCompare(params) {
+  const res = await request.get(`/ems/pageHome/regionCompare`, {
+    params
+  });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 
+区域能费对比柱状图-energyClassificationCode指定用能类型
+ */
+export async function regionCostBarChart(params) {
+  const res = await request.get(`/ems/pageHome/regionCostBarChart`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+ * 
+今日实时数据-包含今日总量和24小时趋势图
+ */
+export async function todayData(params) {
+  const res = await request.get(`/ems/pageHome/todayData`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+ * 
+综合用能趋势-本月/本年趋势图，energyClassificationCode指定用能类型
+ */
+export async function usageTrend(params) {
+  const res = await request.get(`/ems/pageHome/usageTrend`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+/**
+ * 
+用能预警分析-预警列表和统计
+ */
+export async function warningAnalysis(params) {
+  const res = await request.get(`/ems/pageHome/warningAnalysis`, { params });
+  if (res.data.code == 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+// 获取基本区域列表
+export async function basicAreaPageAPI(params) {
+  const res = await request.post(`/main/basicarea/page`, params);
+  if (res.data.code == 0) {
+    return res.data.data.list;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/ems/index.vue

@@ -0,0 +1,2165 @@
+<template>
+  <vue-fullscreen
+    v-model="isFullscreen"
+    :exit-on-click-wrapper="false"
+    class="h-[100%]"
+  >
+    <div class="page" :class="{ 'fullscreen-active': isFullscreen }">
+      <!-- 顶部区域 -->
+      <div class="top_box">
+        <div class="top_content">
+          <!-- 左侧选择器 -->
+
+          <!-- 中间标题 -->
+          <div class="title">
+            <div class="left_selects">
+              <div class="select_item">
+                <img class="img" src="@/assets/home/leftSelect.png" alt="" />
+                <div class="content">
+                  <el-select
+                    v-model="regionId"
+                    @change="dateTypeChange"
+                    clearable
+                    placeholder=" "
+                    :popper-append-to-body="false"
+                  >
+                    <el-option label="全部区域" :value="''" />
+                    <el-option
+                      :label="item.name"
+                      :value="item.id"
+                      v-for="item in areaList"
+                      :key="item.id"
+                    />
+                  </el-select>
+                </div>
+              </div>
+            </div>
+            <span class="title_text">能源管理数据看板</span>
+            <!-- 右侧选择器和信息 -->
+            <div class="right_selects">
+              <div class="select_item">
+                <img class="img" src="@/assets/home/rightSelect.png" alt="" />
+                <div class="content">
+                  <el-select
+                    v-model="statisticsCycle"
+                    @change="dateTypeChange"
+                    clearable
+                    placeholder=" "
+                  >
+                    <el-option label="本月" :value="1" />
+                    <el-option label="本年度" :value="2" />
+                  </el-select>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            style="
+              position: absolute;
+              right: 25px;
+              display: flex;
+              align-items: center;
+              top: 35px;
+            "
+          >
+            <!-- <div class="weather_box" style="margin-right: 15px">
+              <img src="@/assets/home/111.png" alt="" class="weather_icon" />
+              <span class="weather_text">多云转晴</span>
+            </div> -->
+            <div class="time_box" style="margin-right: 15px">
+              <span class="time_text">{{ currentTime }}</span>
+            </div>
+            <div class="fullscreen-btn" @click="toggleFullscreen">
+              <i
+                :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"
+              ></i>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 主内容区域 -->
+      <div class="page_content">
+        <!-- 第一行 -->
+        <div class="row row_1">
+          <!-- 左侧：综合用能概览 -->
+          <div class="panel panel_left_overview">
+            <div class="panel_header">
+              <img src="@/assets/home/icon.png" alt="" />
+              <span>综合用能概览</span>
+            </div>
+            <div class="panel_content overview_content">
+              <div
+                class="overview_row"
+                v-for="(row, rowIndex) in overviewRows"
+                :key="rowIndex"
+              >
+                <div
+                  class="overview_card"
+                  v-for="(item, index) in row"
+                  :key="index"
+                >
+                  <div class="overview_left">
+                    <div class="overview_icon">
+                      <img :src="item.icon" alt="" />
+                    </div>
+                  </div>
+                  <div class="overview_right">
+                    <div class="overview_label"
+                      >{{ item.label }}({{ item.unit }})</div
+                    >
+                    <div class="overview_value">
+                      <span class="value_num">{{ item.value }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 中间：今日数据 -->
+          <div class="panel panel_center_today" style="background: none">
+            <div class="panel_content today_content">
+              <div
+                class="today_card"
+                v-for="(item, index) in todayList"
+                :key="index"
+              >
+                <div class="today_value">{{ item.value }} </div>
+                <div class="today_label">{{ item.label }} </div>
+                <div class="today_chart">
+                  <v-chart
+                    :ref="'todayChartRef' + index"
+                    style="height: 100%"
+                    :option="item.chartOption"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧：综合用能趋势 -->
+          <div class="panel panel_right_trend">
+            <div class="panel_header">
+              <img src="@/assets/home/icon.png" alt="" />
+              <span>综合用能趋势</span>
+            </div>
+            <div class="panel_content">
+              <div class="chart_tabs">
+                <span
+                  :class="['tab_item', active2 === '1' ? 'active' : '']"
+                  @click="switchAreaBar('1', 'active2', 'usageTrend')"
+                  >水</span
+                >
+                <span
+                  :class="['tab_item', active2 === '2' ? 'active' : '']"
+                  @click="switchAreaBar('2', 'active2', 'usageTrend')"
+                  >电</span
+                >
+
+                <span
+                  :class="['tab_item', active2 === '3' ? 'active' : '']"
+                  @click="switchAreaBar('3', 'active2', 'usageTrend')"
+                  >气</span
+                >
+              </div>
+              <v-chart
+                ref="trendRef"
+                style="height: 100%"
+                :option="trendOption"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 第二行 -->
+        <div class="row row_2">
+          <!-- 左侧：区域用能对比 -->
+          <div class="panel panel_left_compare">
+            <div class="panel_header">
+              <img src="@/assets/home/icon.png" alt="" />
+              <span>区域用能对比</span>
+            </div>
+            <div class="panel_content compare_content">
+              <v-chart
+                ref="areaCompareRef"
+                style="height: 100%; width: 100%"
+                :option="areaCompareOption"
+              />
+            </div>
+          </div>
+
+          <!-- 中间：用能预警分析 -->
+          <div class="panel panel_center_warning">
+            <div class="panel_header">
+              <img src="@/assets/home/icon.png" alt="" />
+              <span>用能预警分析</span>
+            </div>
+            <div class="panel_content warning_content">
+              <div class="warning_main">
+                <dv-scroll-board
+                  :config="alertConfig"
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+              <div class="warning_stats">
+                <div
+                  class="stat_item"
+                  v-for="(item, index) in warningStats"
+                  :key="index"
+                >
+                  <div class="stat_value">{{ item.value }}</div>
+                  <div class="stat_label">{{ item.label }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 右侧：综合能费趋势 + 告警统计 -->
+          <div class="panel panel_right_fee">
+            <div class="panel_header">
+              <img src="@/assets/home/icon.png" alt="" />
+              <span>综合能费趋势</span>
+            </div>
+            <div class="panel_content">
+              <div class="chart_tabs">
+                <span
+                  :class="['tab_item', active3 === '1' ? 'active' : '']"
+                  @click="switchAreaBar('1', 'active3', 'costTrend')"
+                  >水</span
+                >
+                <span
+                  :class="['tab_item', active3 === '2' ? 'active' : '']"
+                  @click="switchAreaBar('2', 'active3', 'costTrend')"
+                  >电</span
+                >
+
+                <span
+                  :class="['tab_item', active3 === '3' ? 'active' : '']"
+                  @click="switchAreaBar('3', 'active3', 'costTrend')"
+                  >气</span
+                >
+              </div>
+              <v-chart
+                ref="feeTrendRef"
+                style="height: 100%"
+                :option="feeTrendOption"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- 第三行 -->
+        <div class="row row_3">
+          <!-- 左侧：区域用能对比 -->
+          <div class="panel panel_half">
+            <div class="panel_header">
+              <img
+                src="@/assets/home/icon.png"
+                alt=""
+                style="width: 25px; height: 25px"
+              />
+              <span>区域用能对比</span>
+            </div>
+            <div class="panel_content">
+              <div class="chart_tabs">
+                <span
+                  :class="['tab_item', active === '1' ? 'active' : '']"
+                  @click="switchAreaBar('1', 'active', 'regionBarChart')"
+                  >水</span
+                >
+                <span
+                  :class="['tab_item', active === '2' ? 'active' : '']"
+                  @click="switchAreaBar('2', 'active', 'regionBarChart')"
+                  >电</span
+                >
+
+                <span
+                  :class="['tab_item', active === '3' ? 'active' : '']"
+                  @click="switchAreaBar('3', 'active', 'regionBarChart')"
+                  >气</span
+                >
+              </div>
+              <v-chart
+                ref="areaBarRef"
+                style="height: 100%"
+                :option="areaBarOption"
+                @click="onBarClick"
+              />
+            </div>
+          </div>
+
+          <!-- 右侧：区域用能对比 -->
+          <div class="panel panel_half">
+            <div class="panel_header">
+              <img
+                src="@/assets/home/icon.png"
+                alt=""
+                style="width: 25px; height: 25px"
+              />
+              <span>区域费用对比</span>
+            </div>
+            <div class="panel_content">
+              <div class="chart_tabs">
+                <span
+                  :class="['tab_item', active1 === '1' ? 'active' : '']"
+                  @click="switchAreaBar('1', 'active1', 'regionCostBarChart')"
+                  >水</span
+                >
+                <span
+                  :class="['tab_item', active1 === '2' ? 'active' : '']"
+                  @click="switchAreaBar('2', 'active1', 'regionCostBarChart')"
+                  >电</span
+                >
+
+                <span
+                  :class="['tab_item', active1 === '3' ? 'active' : '']"
+                  @click="switchAreaBar('3', 'active1', 'regionCostBarChart')"
+                  >气</span
+                >
+              </div>
+              <v-chart
+                ref="areaBarRef2"
+                style="height: 100%"
+                :option="areaBar2Option"
+                @click="onBarClick1"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </vue-fullscreen>
+</template>
+
+<script>
+  import VChart from 'vue-echarts';
+  import { echartsMixin } from '@/utils/echarts-mixin';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import {
+    BarChart,
+    LineChart,
+    PieChart,
+    PictorialBarChart
+  } from 'echarts/charts';
+  import {
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent
+  } from 'echarts/components';
+  use([
+    CanvasRenderer,
+    BarChart,
+    LineChart,
+    PieChart,
+    PictorialBarChart,
+    GridComponent,
+    TooltipComponent,
+    LegendComponent,
+    TitleComponent
+  ]);
+  import { component } from 'vue-fullscreen';
+  import {
+    costTrend,
+    overview,
+    regionBarChart,
+    regionCompare,
+    regionCostBarChart,
+    todayData,
+    usageTrend,
+    warningAnalysis,basicAreaPageAPI
+  } from '@/api/ems';
+
+  export default {
+    name: 'EnergyHome',
+    components: { VChart, VueFullscreen: component },
+    mixins: [
+      echartsMixin([
+        'trendRef',
+        'feeTrendRef',
+        'areaCompareRef',
+        'areaBarRef',
+        'areaBarRef2'
+      ])
+    ],
+    data() {
+      return {
+        timer: null,
+        timeTimer: null,
+        isFullscreen: false,
+        statisticsCycle: 1,
+        regionId: '',
+        areaList: [],
+        alertConfig: {},
+
+        currentTime: '',
+        // 综合用能概览
+        overviewList: [],
+        // 今日数据
+        todayList: [],
+        // 预警列表
+        warningList: [],
+        // 预警统计
+        warningStats: [],
+        // 柱状图切换状态
+        active: '1',
+        active1: '1',
+        active2: '1',
+        active3: '1',
+        // 柱状图选中索引
+        selectedBarIndex: null,
+        selectedBarIndex1: null,
+        // 区域用能对比 - 3个环形图合并配置
+        areaCompareOption: {},
+        // 图表配置
+        trendOption: {},
+        feeTrendOption: {},
+        areaBarOption: {},
+        areaBar2Option: {}
+      };
+    },
+    computed: {
+      overviewRows() {
+        const rows = [];
+        for (let i = 0; i < this.overviewList.length; i += 2) {
+          rows.push(this.overviewList.slice(i, i + 2));
+        }
+        return rows;
+      }
+    },
+    watch: {
+      isFullscreen() {
+        setTimeout(() => {
+          this.resizeAllCharts();
+        }, 300);
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.resizeAllCharts();
+      }, 300);
+      this.initAreaList();
+      this.init();
+      this.updateTime();
+      this.timer = setInterval(() => {
+        this.init();
+      }, 60000);
+      this.timeTimer = setInterval(() => {
+        this.updateTime();
+      }, 1000);
+      window.addEventListener('resize', this.resizeAllCharts);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.resizeAllCharts);
+      clearInterval(this.timer);
+      clearInterval(this.timeTimer);
+    },
+    methods: {
+      updateTime() {
+        const now = new Date();
+        this.currentTime = now.toLocaleString('zh-CN', {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: false
+        });
+      },
+      initAreaList() {
+        basicAreaPageAPI({ pageNum: 1, size: 9999 }).then((res) => {
+          this.areaList = res || [];
+        });
+      },
+      init() {
+        this.costTrend();
+        this.overview();
+        this.regionBarChart();
+        this.regionCostBarChart();
+        this.regionCompare();
+        this.todayData();
+        this.usageTrend();
+        this.warningAnalysis();
+      },
+      // 综合能费趋势-本月/本年费用趋势图，energyClassificationCode指定用能类型
+      costTrend() {
+        costTrend({
+          energyClassificationCode: this.active3,
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          // 综合能费趋势 - 专业蓝青渐变色
+          this.feeTrendOption = {
+            tooltip: {
+              trigger: 'axis',
+              backgroundColor: 'rgba(10, 25, 50, 0.9)',
+              borderColor: '#00d4ff',
+              borderWidth: 1,
+              textStyle: {
+                color: '#fff'
+              },
+              axisPointer: {
+                type: 'line',
+                lineStyle: {
+                  color: 'rgba(0, 212, 255, 0.5)',
+                  type: 'dashed'
+                }
+              }
+            },
+            grid: {
+              top: 50,
+              right: 20,
+              bottom: 30,
+              left: 60,
+              containLabel: true
+            },
+            xAxis: {
+              type: 'category',
+              data: res.map((item) => item.time),
+              axisLine: {
+                lineStyle: {
+                  color: 'rgba(0, 212, 255, 0.3)'
+                }
+              },
+              axisLabel: {
+                color: '#a8c5e8',
+                fontSize: 11
+              }
+            },
+            yAxis: {
+              type: 'value',
+              name: '单位：元',
+              nameTextStyle: {
+                color: '#00d4ff',
+                align: 'left',
+                padding: [0, 0, 0, -45],
+                fontSize: 12
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(0, 212, 255, 0.3)'
+                }
+              },
+              axisLabel: {
+                color: '#a8c5e8',
+                fontSize: 11
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(0, 212, 255, 0.15)',
+                  type: 'dashed'
+                }
+              }
+            },
+            series: [
+              {
+                data: res.map((item) => item.value),
+                type: 'line',
+                smooth: 0.4,
+                symbol: 'circle',
+                symbolSize: 6,
+                showSymbol: false,
+                areaStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(0, 242, 254, 0.4)' },
+                      { offset: 0.5, color: 'rgba(0, 153, 255, 0.15)' },
+                      { offset: 1, color: 'rgba(0, 100, 255, 0.02)' }
+                    ]
+                  }
+                },
+                lineStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [
+                      { offset: 0, color: '#00f2fe' },
+                      { offset: 0.5, color: '#00d4ff' },
+                      { offset: 1, color: '#0099ff' }
+                    ]
+                  },
+                  width: 3,
+                  shadowColor: 'rgba(0, 212, 255, 0.5)',
+                  shadowBlur: 10
+                },
+                itemStyle: {
+                  color: '#00f2fe',
+                  borderColor: '#fff',
+                  borderWidth: 2
+                },
+                emphasis: {
+                  showSymbol: true,
+                  scale: true,
+                  itemStyle: {
+                    shadowColor: 'rgba(0, 242, 254, 0.8)',
+                    shadowBlur: 15
+                  }
+                }
+              }
+            ]
+          };
+        });
+      },
+      //综合用能概览-根据统计周期返回本月/本年数据
+      overview() {
+        overview({
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          this.overviewList = [
+            {
+              icon: require('@/assets/home/leftitem.png'),
+              value: res.electricityUsage,
+              unit: 'kWh',
+              label: '用电量'
+            },
+            {
+              icon: require('@/assets/home/leftitem.png'),
+              value: res.electricityCost,
+              unit: '元',
+              label: '用电费用'
+            },
+            {
+              icon: require('@/assets/home/leftitem.png'),
+              value: res.waterUsage,
+              unit: 'm³',
+              label: '用水量'
+            },
+            {
+              icon: require('@/assets/home/leftitem.png'),
+              value: res.waterCost,
+              unit: '元',
+              label: '用水费用(元)'
+            },
+            {
+              icon: require('@/assets/home/leftitem.png'),
+              value: res.gasUsage,
+              unit: 'm³',
+              label: '用气量'
+            },
+            {
+              icon: require('@/assets/home/leftitem.png'),
+              value: res.gasCost,
+              unit: '元',
+              label: '用气费用'
+            }
+          ];
+        });
+      },
+      // 区域用能对比柱状图-底部柱状图数据，energyClassificationCode指定用能类型
+      regionBarChart() {
+        regionBarChart({
+          energyClassificationCode: this.active,
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          this.areaBarOption = {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: { type: 'shadow' },
+              formatter: function (params) {
+                return params[0].name + ': ' + params[0].value;
+              }
+            },
+            legend: { show: false },
+            grid: { left: 50, right: 15, top: 50, bottom: 30 },
+            xAxis: {
+              type: 'category',
+              data: res.map((item) => item.time),
+              axisLabel: { color: '#fff', fontSize: 10 }
+            },
+            yAxis: {
+              type: 'value',
+              max: 6000,
+              axisLine: { show: false },
+              axisLabel: { color: '#fff', fontSize: 10 },
+              splitLine: { lineStyle: { color: 'rgba(56, 255, 249, 0.2)' } }
+            },
+            series: [
+              // 底部圆
+              {
+                name: '底部',
+                type: 'pictorialBar',
+                symbol: 'circle',
+                symbolSize: [30, 7],
+
+                symbolOffset: [0, 2],
+                symbolPosition: 'start',
+                z: 2,
+                data: res.map((val, idx) => ({
+                  value: val.value,
+                  itemStyle: {
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ffd4cc'
+                              : '#7aaaff'
+                        },
+                        {
+                          offset: 0.1426,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ffe8e3'
+                              : '#6cb3ff'
+                        },
+                        {
+                          offset: 0.2793,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ffb3a7'
+                              : '#5a8fff'
+                        },
+                        {
+                          offset: 0.5331,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ff8a50'
+                              : '#4a9dff'
+                        },
+                        {
+                          offset: 0.7117,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ff6b35'
+                              : '#3d7cff'
+                        },
+                        {
+                          offset: 0.8675,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#e65100'
+                              : '#2b59ea'
+                        },
+                        {
+                          offset: 1,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#c44100'
+                              : '#285deb'
+                        }
+                      ]
+                    },
+                    borderColor:
+                      idx === this.selectedBarIndex ? '#ff6b35' : '#7aaaff',
+                    borderWidth: 1
+                  }
+                }))
+              },
+              // 主体柱状
+              {
+                name: '用能',
+                type: 'bar',
+                data: res.map((item) => item.value),
+                barWidth: 30,
+                z: 1,
+                itemStyle: {
+                  color: function (params) {
+                    const idx = params.dataIndex;
+                    if (idx === this.selectedBarIndex) {
+                      return {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 0,
+                        colorStops: [
+                          { offset: 0, color: 'rgba(255, 138, 80, 0.7)' },
+                          { offset: 0.1426, color: 'rgba(255, 107, 53, 0.7)' },
+                          { offset: 0.2793, color: 'rgba(230, 81, 0, 0.7)' },
+                          { offset: 0.5331, color: 'rgba(196, 65, 0, 0.7)' },
+                          { offset: 0.7117, color: 'rgba(163, 54, 0, 0.7)' },
+                          { offset: 0.8675, color: 'rgba(138, 46, 0, 0.7)' },
+                          { offset: 1, color: 'rgba(107, 36, 0, 0.7)' }
+                        ]
+                      };
+                    }
+                    return {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        { offset: 0, color: 'rgba(16, 71, 188, 0.7)' },
+                        { offset: 0.1426, color: 'rgba(16, 67, 184, 0.7)' },
+                        { offset: 0.2793, color: 'rgba(21, 57, 177, 0.7)' },
+                        { offset: 0.5331, color: 'rgba(39, 65, 204, 0.7)' },
+                        { offset: 0.7117, color: 'rgba(46, 78, 225, 0.7)' },
+                        { offset: 0.8675, color: 'rgba(43, 89, 234, 0.7)' },
+                        { offset: 1, color: 'rgba(40, 93, 235, 0.7)' }
+                      ]
+                    };
+                  }.bind(this)
+                },
+                label: {
+                  show: true,
+                  position: 'top',
+                  offset: [0, 5],
+                  formatter: function (params) {
+                    if (params.dataIndex === this.selectedBarIndex) {
+                      return '{value|' + params.value + '}';
+                    }
+                    return '';
+                  }.bind(this),
+                  rich: {
+                    value: {
+                      color: '#ffc938',
+                      fontSize: 18,
+                      fontWeight: 'bold',
+                      fontFamily: 'DS-DIGI',
+                      textShadowColor: 'rgba(0,0,0,0.5)',
+                      textShadowBlur: 3
+                    }
+                  }
+                }
+              },
+              // 顶部高光
+              {
+                name: '顶部',
+                type: 'pictorialBar',
+                symbol: 'circle',
+                symbolSize: [30, 8],
+                symbolOffset: [0, -3],
+                symbolPosition: 'end',
+                z: 3,
+                data: res.map((val, idx) => ({
+                  value: val.value,
+                  itemStyle: {
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ffd4cc'
+                              : '#7aaaff'
+                        },
+                        {
+                          offset: 0.1426,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ffe8e3'
+                              : '#6cb3ff'
+                        },
+                        {
+                          offset: 0.2793,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ffb3a7'
+                              : '#5a8fff'
+                        },
+                        {
+                          offset: 0.5331,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ff8a50'
+                              : '#4a9dff'
+                        },
+                        {
+                          offset: 0.7117,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#ff6b35'
+                              : '#3d7cff'
+                        },
+                        {
+                          offset: 0.8675,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#e65100'
+                              : '#2b59ea'
+                        },
+                        {
+                          offset: 1,
+                          color:
+                            idx === this.selectedBarIndex
+                              ? '#c44100'
+                              : '#285deb'
+                        }
+                      ]
+                    },
+                    borderColor:
+                      idx === this.selectedBarIndex ? '#ff6b35' : '#7aaaff',
+                    borderWidth: 1
+                  }
+                }))
+              }
+            ]
+          };
+        });
+      },
+      //区域能费对比柱状图-energyClassificationCode指定用能类型
+      regionCostBarChart() {
+        regionCostBarChart({
+          energyClassificationCode: this.active1,
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          this.areaBar2Option = {
+            tooltip: {
+              trigger: 'axis',
+              axisPointer: { type: 'shadow' },
+              formatter: function (params) {
+                return params[0].name + ': ' + params[0].value;
+              }
+            },
+            legend: { show: false },
+            grid: { left: 50, right: 15, top: 50, bottom: 30 },
+            xAxis: {
+              type: 'category',
+              data: res.map((item) => item.time),
+              axisLabel: { color: '#fff', fontSize: 10 }
+            },
+            yAxis: {
+              type: 'value',
+              max: 6000,
+              axisLine: { show: false },
+              axisLabel: { color: '#fff', fontSize: 10 },
+              splitLine: { lineStyle: { color: 'rgba(56, 255, 249, 0.2)' } }
+            },
+            series: [
+              // 底部圆
+              {
+                name: '底部',
+                type: 'pictorialBar',
+                symbol: 'circle',
+                symbolSize: [30, 7],
+
+                symbolOffset: [0, 2],
+                symbolPosition: 'start',
+                z: 2,
+                data: res.map((val, idx) => ({
+                  value: val.value,
+                  itemStyle: {
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ffd4cc'
+                              : '#7aaaff'
+                        },
+                        {
+                          offset: 0.1426,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ffe8e3'
+                              : '#6cb3ff'
+                        },
+                        {
+                          offset: 0.2793,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ffb3a7'
+                              : '#5a8fff'
+                        },
+                        {
+                          offset: 0.5331,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ff8a50'
+                              : '#4a9dff'
+                        },
+                        {
+                          offset: 0.7117,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ff6b35'
+                              : '#3d7cff'
+                        },
+                        {
+                          offset: 0.8675,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#e65100'
+                              : '#2b59ea'
+                        },
+                        {
+                          offset: 1,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#c44100'
+                              : '#285deb'
+                        }
+                      ]
+                    },
+                    borderColor:
+                      idx === this.selectedBarIndex1 ? '#ff6b35' : '#7aaaff',
+                    borderWidth: 1
+                  }
+                }))
+              },
+              // 主体柱状
+              {
+                name: '用能',
+                type: 'bar',
+                data: res.map((item) => item.value),
+                barWidth: 30,
+                z: 1,
+                itemStyle: {
+                  color: function (params) {
+                    const idx = params.dataIndex;
+                    if (idx === this.selectedBarIndex1) {
+                      return {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 1,
+                        y2: 0,
+                        colorStops: [
+                          { offset: 0, color: 'rgba(255, 138, 80, 0.7)' },
+                          { offset: 0.1426, color: 'rgba(255, 107, 53, 0.7)' },
+                          { offset: 0.2793, color: 'rgba(230, 81, 0, 0.7)' },
+                          { offset: 0.5331, color: 'rgba(196, 65, 0, 0.7)' },
+                          { offset: 0.7117, color: 'rgba(163, 54, 0, 0.7)' },
+                          { offset: 0.8675, color: 'rgba(138, 46, 0, 0.7)' },
+                          { offset: 1, color: 'rgba(107, 36, 0, 0.7)' }
+                        ]
+                      };
+                    }
+                    return {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        { offset: 0, color: 'rgba(16, 71, 188, 0.7)' },
+                        { offset: 0.1426, color: 'rgba(16, 67, 184, 0.7)' },
+                        { offset: 0.2793, color: 'rgba(21, 57, 177, 0.7)' },
+                        { offset: 0.5331, color: 'rgba(39, 65, 204, 0.7)' },
+                        { offset: 0.7117, color: 'rgba(46, 78, 225, 0.7)' },
+                        { offset: 0.8675, color: 'rgba(43, 89, 234, 0.7)' },
+                        { offset: 1, color: 'rgba(40, 93, 235, 0.7)' }
+                      ]
+                    };
+                  }.bind(this)
+                },
+                label: {
+                  show: true,
+                  position: 'top',
+                  offset: [0, 5],
+                  formatter: function (params) {
+                    if (params.dataIndex === this.selectedBarIndex1) {
+                      return '{value|' + params.value + '}';
+                    }
+                    return '';
+                  }.bind(this),
+                  rich: {
+                    value: {
+                      color: '#ffc938',
+                      fontSize: 18,
+                      fontWeight: 'bold',
+                      fontFamily: 'DS-DIGI',
+                      textShadowColor: 'rgba(0,0,0,0.5)',
+                      textShadowBlur: 3
+                    }
+                  }
+                }
+              },
+              // 顶部高光
+              {
+                name: '顶部',
+                type: 'pictorialBar',
+                symbol: 'circle',
+                symbolSize: [30, 8],
+                symbolOffset: [0, -3],
+                symbolPosition: 'end',
+                z: 3,
+                data: res.map((val, idx) => ({
+                  value: val.value,
+                  itemStyle: {
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ffd4cc'
+                              : '#7aaaff'
+                        },
+                        {
+                          offset: 0.1426,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ffe8e3'
+                              : '#6cb3ff'
+                        },
+                        {
+                          offset: 0.2793,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ffb3a7'
+                              : '#5a8fff'
+                        },
+                        {
+                          offset: 0.5331,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ff8a50'
+                              : '#4a9dff'
+                        },
+                        {
+                          offset: 0.7117,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#ff6b35'
+                              : '#3d7cff'
+                        },
+                        {
+                          offset: 0.8675,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#e65100'
+                              : '#2b59ea'
+                        },
+                        {
+                          offset: 1,
+                          color:
+                            idx === this.selectedBarIndex1
+                              ? '#c44100'
+                              : '#285deb'
+                        }
+                      ]
+                    },
+                    borderColor:
+                      idx === this.selectedBarIndex1 ? '#ff6b35' : '#7aaaff',
+                    borderWidth: 1
+                  }
+                }))
+              }
+            ]
+          };
+        });
+      },
+      //区域用能对比-环形图数据(电/水/气)
+      regionCompare() {
+        regionCompare({
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          console.log(res, 'res');
+          // 专业配色方案 - 科技风渐变
+          const electricityColors = [
+            '#00d4ff',
+            '#00a8ff',
+            '#0099ff',
+            '#0077ff',
+            '#0055ff'
+          ];
+          const waterColors = [
+            '#00f5a0',
+            '#00d4aa',
+            '#00b894',
+            '#009e7d',
+            '#008b6b'
+          ];
+          const gasColors = [
+            '#ff9f43',
+            '#ff8c42',
+            '#ff7b38',
+            '#ff6b35',
+            '#ff5722'
+          ];
+
+          this.areaCompareOption = {
+            tooltip: {
+              trigger: 'item',
+              formatter: (res) => {
+                return res.name + '：' + res.percent + '%';
+              }
+            },
+
+            series: [
+              {
+                name: '用电量',
+                type: 'pie',
+                radius: ['25%', '45%'],
+                center: ['17%', '45%'],
+                avoidLabelOverlap: false,
+                label: {
+                  show: true,
+                  position: 'center',
+                  formatter: '用电量',
+                  color: '#fff',
+                  fontSize: 14,
+                  fontWeight: 'bold'
+                },
+                labelLine: { show: false },
+                itemStyle: {
+                  borderWidth: 0,
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(0, 212, 255, 0.3)'
+                },
+                data: res.electricityCompare?.map((item, index) => {
+                  return {
+                    value: item.usageValue,
+                    name: item.regionName,
+                    itemStyle: {
+                      color: electricityColors[index % electricityColors.length]
+                    }
+                  };
+                })
+              },
+              {
+                name: '用水量',
+                type: 'pie',
+                radius: ['25%', '45%'],
+                center: ['50%', '45%'],
+                avoidLabelOverlap: false,
+                label: {
+                  show: true,
+                  position: 'center',
+                  formatter: '用水量',
+                  color: '#fff',
+                  fontSize: 14,
+                  fontWeight: 'bold'
+                },
+                labelLine: { show: false },
+                itemStyle: {
+                  borderWidth: 0,
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(0, 245, 160, 0.3)'
+                },
+                data: res.waterCompare?.map((item, index) => {
+                  return {
+                    value: item.usageValue,
+                    name: item.regionName,
+                    itemStyle: {
+                      color: waterColors[index % waterColors.length]
+                    }
+                  };
+                })
+              },
+              {
+                name: '用气量',
+                type: 'pie',
+                radius: ['25%', '45%'],
+                center: ['83%', '45%'],
+                avoidLabelOverlap: false,
+                label: {
+                  show: true,
+                  position: 'center',
+                  formatter: '用气量',
+                  color: '#fff',
+                  fontSize: 14,
+                  fontWeight: 'bold'
+                },
+                labelLine: { show: false },
+                itemStyle: {
+                  borderWidth: 0,
+                  shadowBlur: 10,
+                  shadowColor: 'rgba(255, 159, 67, 0.3)'
+                },
+                data: res.gasCompare?.map((item, index) => {
+                  return {
+                    value: item.usageValue,
+                    name: item.regionName,
+                    itemStyle: {
+                      color: gasColors[index % gasColors.length]
+                    }
+                  };
+                })
+              }
+            ]
+          };
+        });
+      },
+      //今日实时数据-包含今日总量和24小时趋势图
+      todayData() {
+        todayData({
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          this.todayList = [
+            {
+              label: '今日用电量(kWh)',
+              value: res.todayElectricityUsage,
+              chartOption: {}
+            },
+            {
+              label: '今日用水量(m³)',
+              value: res.todayWaterUsage,
+              chartOption: {}
+            },
+            {
+              label: '今日用气量(m³)',
+              value: res.todayGasUsage,
+              chartOption: {}
+            },
+            {
+              label: '今日能源费用(元)',
+              value: res.todayTotalCost,
+              chartOption: {}
+            }
+          ];
+          // 专业配色方案
+          const colorThemes = [
+            {
+              line: '#00d4ff',
+              start: 'rgba(0, 212, 255, 0.4)',
+              end: 'rgba(0, 212, 255, 0.02)'
+            },
+            {
+              line: '#00f5a0',
+              start: 'rgba(0, 245, 160, 0.4)',
+              end: 'rgba(0, 245, 160, 0.02)'
+            },
+            {
+              line: '#f59e0b',
+              start: 'rgba(245, 158, 11, 0.4)',
+              end: 'rgba(245, 158, 11, 0.02)'
+            },
+            {
+              line: '#0099ff',
+              start: 'rgba(0, 153, 255, 0.4)',
+              end: 'rgba(0, 153, 255, 0.02)'
+            }
+          ];
+
+          ['electricityTrend', 'waterTrend', 'gasTrend', 'costTrend'].forEach(
+            (item, index) => {
+              const theme = colorThemes[index];
+              this.$set(this.todayList[index], 'chartOption', {
+                tooltip: {
+                  trigger: 'axis',
+                  backgroundColor: 'rgba(10, 25, 50, 0.9)',
+                  borderColor: theme.line,
+                  borderWidth: 1,
+                  textStyle: { color: '#fff', fontSize: 12 }
+                },
+                grid: { left: 5, right: 5, top: 10, bottom: 20 },
+                xAxis: {
+                  type: 'category',
+                  data: res[item]?.map((item) => item.time),
+                  axisLine: {
+                    show: true,
+                    lineStyle: { color: 'rgba(255,255,255,0.2)' }
+                  },
+                  axisLabel: {
+                    show: true,
+                    color: 'rgba(255,255,255,0.7)',
+                    fontSize: 9,
+                    interval: 'auto'
+                  },
+                  axisTick: { show: false }
+                },
+                yAxis: {
+                  type: 'value',
+                  axisLine: { show: false },
+                  axisLabel: { show: false },
+                  splitLine: {
+                    show: true,
+                    lineStyle: {
+                      color: 'rgba(255,255,255,0.1)',
+                      type: 'dashed'
+                    }
+                  },
+                  axisTick: { show: false }
+                },
+                series: [
+                  {
+                    type: 'line',
+                    data: res[item]?.map((item) => item.value),
+                    smooth: 0.4,
+                    symbol: 'circle',
+                    symbolSize: 4,
+                    showSymbol: false,
+                    lineStyle: {
+                      color: theme.line,
+                      width: 2.5,
+                      shadowColor: theme.line,
+                      shadowBlur: 8
+                    },
+                    areaStyle: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                          { offset: 0, color: theme.start },
+                          { offset: 1, color: theme.end }
+                        ]
+                      }
+                    },
+                    emphasis: {
+                      showSymbol: true,
+                      itemStyle: {
+                        color: '#fff',
+                        borderColor: theme.line,
+                        borderWidth: 2
+                      }
+                    }
+                  }
+                ]
+              });
+            }
+          );
+        });
+      },
+      getClolr(item) {
+        return item == '较大'
+          ? '#ffd337'
+          : item == '重大'
+          ? '#FF4444'
+          : '#FFFFFF';
+      },
+      usageTrend() {
+        usageTrend({
+          energyClassificationCode: this.active2,
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          // 综合用能趋势 - 科技蓝色渐变色
+          this.trendOption = {
+            tooltip: {
+              trigger: 'axis',
+              backgroundColor: 'rgba(10, 25, 50, 0.9)',
+              borderColor: '#0099ff',
+              borderWidth: 1,
+              textStyle: {
+                color: '#fff'
+              },
+              axisPointer: {
+                type: 'line',
+                lineStyle: {
+                  color: 'rgba(0, 153, 255, 0.5)',
+                  type: 'dashed'
+                }
+              }
+            },
+            grid: {
+              top: 50,
+              right: 20,
+              bottom: 30,
+              left: 60,
+              containLabel: true
+            },
+            xAxis: {
+              type: 'category',
+              data: res.map((item) => item.time),
+              axisLine: {
+                lineStyle: {
+                  color: 'rgba(0, 153, 255, 0.3)'
+                }
+              },
+              axisLabel: {
+                color: '#7dd3fc',
+                fontSize: 11
+              }
+            },
+            yAxis: {
+              type: 'value',
+              name: '单位：kWh',
+              nameTextStyle: {
+                color: '#0099ff',
+                align: 'left',
+                padding: [0, 0, 0, -50],
+                fontSize: 12
+              },
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: 'rgba(0, 153, 255, 0.3)'
+                }
+              },
+              axisLabel: {
+                color: '#7dd3fc',
+                fontSize: 11
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(0, 153, 255, 0.15)',
+                  type: 'dashed'
+                }
+              }
+            },
+            series: [
+              {
+                data: res.map((item) => item.value),
+                type: 'line',
+                smooth: 0.4,
+                symbol: 'circle',
+                symbolSize: 6,
+                showSymbol: false,
+                areaStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      { offset: 0, color: 'rgba(0, 212, 255, 0.4)' },
+                      { offset: 0.5, color: 'rgba(0, 153, 255, 0.15)' },
+                      { offset: 1, color: 'rgba(0, 100, 255, 0.02)' }
+                    ]
+                  }
+                },
+                lineStyle: {
+                  color: {
+                    type: 'linear',
+                    x: 0,
+                    y: 0,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [
+                      { offset: 0, color: '#00d4ff' },
+                      { offset: 0.5, color: '#0099ff' },
+                      { offset: 1, color: '#0064ff' }
+                    ]
+                  },
+                  width: 3,
+                  shadowColor: 'rgba(0, 153, 255, 0.5)',
+                  shadowBlur: 10
+                },
+                itemStyle: {
+                  color: '#00d4ff',
+                  borderColor: '#fff',
+                  borderWidth: 2
+                },
+                emphasis: {
+                  showSymbol: true,
+                  scale: true,
+                  itemStyle: {
+                    shadowColor: 'rgba(0, 212, 255, 0.8)',
+                    shadowBlur: 15
+                  }
+                }
+              }
+            ]
+          };
+        });
+      },
+      //
+      warningAnalysis() {
+        warningAnalysis({
+          regionId: this.regionId,
+          statisticsCycle: this.statisticsCycle
+        }).then((res) => {
+          this.warningStats = [
+            {
+              label: '用电预警(件)',
+              value: res.warningStat?.electricityWarningCount
+            },
+            {
+              label: '用水预警(件)',
+              value: res.warningStat?.waterWarningCount
+            },
+            { label: '用气预警(件)', value: res.warningStat?.gasWarningCount }
+          ];
+          console.log(res, 'this.warningStats');
+          let dataArr = [];
+          let dataKey = [
+            'warningLevel',
+            'energyType',
+            'warningInfo',
+            'warningTime'
+          ];
+          res.warningList?.forEach((item, index) => {
+            let data = [];
+
+            dataKey.forEach((key, index) => {
+              if (key == 'warningLevel') {
+                item[key] =
+                  item[key] == 1
+                    ? '一般'
+                    : item[key] == 2
+                    ? '较大'
+                    : item[key] == 3
+                    ? '重大'
+                    : '';
+              }
+              // if (key == 'handleStatus') {
+              //   item[key] =
+              //     item[key] == 1
+              //       ? '处理中'
+              //       : item[key] == 2
+              //       ? '已处理'
+              //       : '未处理';
+              // }
+              data.push(item[key]);
+            });
+            dataArr.push(data);
+          });
+          this.alertConfig = {
+            header: ['预警级别', '用能分类', '预警信息', '预警时间'].map(
+              (item) =>
+                `<div style="color: #38fdf8;font-weight: bold">${
+                  item || ''
+                }</div>`
+            ),
+
+            data: dataArr.map((data) =>
+              data.map((item, index) => {
+                return `<div style="color: ${
+                  index == 1 ? this.getClolr(item) : '#fff'
+                };">${item || ''}</div>`;
+              })
+            ),
+            rowNum: 4,
+            headerBGC: 'transparent',
+            oddRowBGC: 'rgba(13, 41, 96, 0.3)',
+            evenRowBGC: 'rgba(13, 41, 96, 0.1)',
+            headerHeight: 30,
+            waitTime: 3000,
+            align: [
+              'center',
+              'center',
+              'center',
+              'center',
+              'center',
+              'center',
+              'center'
+            ],
+            columnWidth: []
+          };
+        });
+      },
+
+      dateTypeChange() {
+        this.init();
+      },
+      toggleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+      },
+
+      switchAreaBar(type, key, apiFn) {
+        this[key] = type;
+        this[apiFn]();
+      },
+
+      onBarClick(params) {
+        this.selectedBarIndex = params.dataIndex;
+        this.regionBarChart();
+      },
+      onBarClick1(params) {
+        this.selectedBarIndex1 = params.dataIndex;
+        this.regionCostBarChart();
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    width: 100%;
+    height: calc(100vh - 96px);
+    background-color: #051b42;
+    background-image: url('@/assets/home/image_207.png');
+    background-size: cover;
+    overflow: auto;
+  }
+
+  // 顶部区域
+  .top_box {
+    width: 100%;
+    height: 80px;
+    background-image: url('@/assets/home/herder.png');
+    background-size: 100% 100%;
+    .top_content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 20px;
+      box-sizing: border-box;
+      position: relative;
+    }
+    .title {
+      text-align: center;
+      line-height: 80px;
+      width: calc(32% + 400px);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .title_text {
+        font-size: 42px;
+        font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
+        background-image: linear-gradient(to top, #009dff, 15%, #fff);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+    .left_selects {
+      margin-top: 1%;
+      height: 36px;
+      .select_item {
+        position: relative;
+        cursor: pointer;
+        line-height: 36px;
+        height: 36px;
+        .img {
+          width: 100%;
+          height: 36px;
+          object-fit: cover;
+        }
+        .content {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          :deep(.el-input__inner) {
+            text-align: center;
+            padding: 0 25px 0 0;
+          }
+        }
+      }
+    }
+    .right_selects {
+      height: 36px;
+      margin-top: 1%;
+      .select_item {
+        line-height: 36px;
+        height: 36px;
+        position: relative;
+        cursor: pointer;
+        // width: 200px;
+        .img {
+          width: 100%;
+          height: 36px;
+          object-fit: cover;
+        }
+        .content {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          :deep(.el-input__inner) {
+            text-align: center;
+            padding: 0 25px 0 0;
+          }
+        }
+      }
+    }
+  }
+  .weather_box {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .weather_icon {
+      width: 28px;
+      height: 28px;
+    }
+    .weather_text {
+      color: #fff;
+      font-size: 13px;
+    }
+  }
+  .time_box {
+    .time_text {
+      color: #38fff9;
+      font-size: 16px;
+      font-family: 'DS-DIGI';
+    }
+  }
+  .fullscreen-btn {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(56, 255, 249, 0.15);
+    border: 1px solid #38fff9;
+    border-radius: 4px;
+    cursor: pointer;
+    i {
+      font-size: 18px;
+      color: #38fff9;
+    }
+    &:hover {
+      background: rgba(56, 255, 249, 0.3);
+    }
+  }
+  // 主内容区域
+  .page_content {
+    box-sizing: border-box;
+    padding: 10px 15px 15px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    height: calc(100% - 80px);
+  }
+
+  .row {
+    display: flex;
+    gap: 20px;
+    flex: 1;
+    min-height: 340px;
+  }
+
+  .row_1 {
+    .panel_left_overview {
+      flex: 1.5;
+    }
+    .panel_center_today {
+      flex: 2.8;
+    }
+    .panel_right_trend {
+      flex: 1.5;
+    }
+  }
+
+  .row_2 {
+    .panel_left_compare {
+      flex: 1.5;
+    }
+    .panel_center_warning {
+      flex: 2.8;
+    }
+    .panel_right_fee {
+      flex: 1.5;
+    }
+  }
+
+  .row_3 {
+    min-height: 230px;
+    .panel_half {
+      flex: 1;
+      min-height: 230px;
+    }
+  }
+
+  // 面板通用样式
+  .panel {
+    background-image: url('@/assets/home/item.png');
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .panel_header {
+      height: 12.5%;
+      display: flex;
+      align-items: center;
+      padding: 0 15px;
+      flex-shrink: 0;
+      img {
+        width: 35px;
+        height: 35px;
+        margin-right: 8px;
+      }
+      span {
+        font-family: 'YouSheBiaoTiHei', 'Microsoft YaHei', sans-serif;
+        color: #fff;
+        font-size: 24px;
+      }
+    }
+
+    .panel_content {
+      flex: 1;
+      overflow: hidden;
+      min-height: 0;
+      position: relative;
+      .chart_tabs {
+        position: absolute;
+        z-index: 999;
+        top: 10px;
+        right: 10px;
+        display: flex;
+        gap: 8px;
+        .tab_item {
+          padding: 6px 15px;
+          font-size: 12px;
+          color: #fff;
+
+          background: rgba(56, 255, 249, 0.1);
+          border: 1px solid #0677e5;
+          border-radius: 4px;
+          cursor: pointer;
+          &.active {
+            background: #0056b3;
+            border-color: #0677e5;
+            color: #fff;
+            font-weight: 800;
+          }
+        }
+      }
+    }
+  }
+
+  // 综合用能概览
+  .overview_content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    padding: 8px 15px 15px 25px;
+    height: 100%;
+    box-sizing: border-box;
+    .overview_row {
+      display: flex;
+      justify-content: space-around;
+      gap: 15px;
+      flex: 1;
+      min-height: 0;
+    }
+    .overview_card {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+      padding: 8px 12px;
+      // background: rgba(56, 255, 249, 0.05);
+      // border: 1px solid rgba(56, 255, 249, 0.2);
+      border-radius: 6px;
+      max-width: calc(50% - 8px);
+      .overview_left {
+        margin-right: 12px;
+        .overview_icon {
+          width: 60px;
+          height: 60px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .overview_right {
+        // flex: 1;
+        .overview_label {
+          font-size: 13px;
+          color: rgba(255, 255, 255, 0.8);
+          margin-bottom: 4px;
+        }
+        .overview_value {
+          .value_num {
+            font-size: 18px;
+            font-weight: bold;
+            font-family: 'DS-DIGI';
+            color: #38fff9;
+            margin-right: 6px;
+          }
+          .value_unit {
+            font-size: 12px;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  // 今日数据
+  .today_content {
+    display: flex;
+    // flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    height: 100%;
+    box-sizing: border-box;
+    .today_card {
+      width: 22%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 8px;
+      box-sizing: border-box;
+      .today_value {
+        font-size: 34px;
+        font-weight: bold;
+        font-family: 'DS-Digital';
+        color: #fff;
+        // margin-bottom: 4px;
+        background-image: url('@/assets/home/centerBk.png');
+        background-size: 100% 100%;
+        min-height: 120px;
+        min-width: 160px;
+        display: flex;
+        justify-content: center;
+        padding-top: 30px;
+      }
+      .today_label {
+        font-size: 16px;
+        color: #fff;
+      }
+
+      .today_chart {
+        width: 100%;
+        flex: 1;
+        min-height: 0;
+      }
+    }
+  }
+
+  // 区域用能对比
+  .compare_content {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 10px 15px;
+    height: 100%;
+    box-sizing: border-box;
+    .compare_item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 30%;
+      height: 100%;
+      .compare_chart {
+        flex: 1;
+        width: 100%;
+        min-height: 0;
+      }
+      .compare_label {
+        font-size: 14px;
+        color: #fff;
+        margin-top: 8px;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // 预警列表
+  .warning_content {
+    display: flex;
+    padding: 8px;
+    height: 100%;
+    box-sizing: border-box;
+    gap: 10px;
+    padding-top: 25px;
+
+    .warning_main {
+      flex: 1;
+      min-width: 0;
+    }
+    .warning_stats {
+      // width: 80px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      gap: 8px;
+      // padding-top: 20px;
+      .stat_item {
+        // flex: 1;
+        width: 130px;
+        height: 90px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-image: url('@/assets/home/Group_1.png');
+        background-size: 100% 100%;
+        // background: rgba(56, 255, 249, 0.1);
+        // border: 1px solid rgba(56, 255, 249, 0.3);
+        border-radius: 4px;
+        padding: 5px;
+        .stat_value {
+          font-size: 28px;
+          font-weight: bold;
+          font-family: 'DS-Digital';
+          color: #38fff9;
+        }
+        .stat_label {
+          font-size: 14px;
+          color: #fff;
+          margin-top: 4px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  // 告警级别
+  .level_一般 {
+    color: #909399;
+  }
+  .level_较大 {
+    color: #e6a23c;
+  }
+  .level_重大 {
+    color: #f56c6c;
+  }
+
+  // 全屏样式
+  .fullscreen-active {
+    height: 100vh !important;
+  }
+
+  // 深色主题表格样式
+  :deep(.el-table__row > td) {
+    border: none;
+  }
+  :deep(.el-table th.is-leaf) {
+    border: none;
+  }
+  :deep(.el-table),
+  :deep(.el-table__expanded-cell) {
+    background-color: transparent;
+  }
+  :deep(.el-table::before) {
+    background-color: transparent !important;
+  }
+  :deep(.el-table__inner-wrapper) {
+    background-color: transparent !important;
+  }
+  :deep(.el-table tr) {
+    background-color: transparent !important;
+    color: #fff !important;
+  }
+  :deep(.el-table td) {
+    border-bottom: 1px solid rgba(56, 255, 249, 0.1) !important;
+  }
+  :deep(.el-table__body tr:hover > td) {
+    background-color: rgba(255, 123, 48, 0.3) !important;
+  }
+  :deep(.el-table__body-wrapper) {
+    overflow-y: auto !important;
+  }
+  :deep(.el-input__inner) {
+    color: #fff;
+    background: transparent;
+    border: none;
+  }
+</style>