diff --git a/.env.development b/.env.development
index 5d8b39e..23d77f3 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
 VITE_USE_MOCK = true
 
 # 发布路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = /xz
 
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
diff --git a/.env.production b/.env.production
index 8cc62d9..2d763e8 100644
--- a/.env.production
+++ b/.env.production
@@ -2,7 +2,7 @@
 VITE_USE_MOCK = false
 
 # 发布路径
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = /xz
 
 # 是否启用gzip或brotli压缩
 # 选项值: gzip | brotli | none
diff --git a/src/assets/dp/frame.png b/src/assets/dp/frame.png
new file mode 100644
index 0000000..69c77cb
Binary files /dev/null and b/src/assets/dp/frame.png differ
diff --git a/src/assets/dp/frame2.png b/src/assets/dp/frame2.png
new file mode 100644
index 0000000..f6e5fd5
Binary files /dev/null and b/src/assets/dp/frame2.png differ
diff --git a/src/assets/dp/frame3.png b/src/assets/dp/frame3.png
new file mode 100644
index 0000000..3e6608c
Binary files /dev/null and b/src/assets/dp/frame3.png differ
diff --git a/src/assets/dp/icon1.png b/src/assets/dp/icon1.png
new file mode 100644
index 0000000..ad138bd
Binary files /dev/null and b/src/assets/dp/icon1.png differ
diff --git a/src/assets/dp/icon2.png b/src/assets/dp/icon2.png
new file mode 100644
index 0000000..5b9a8d2
Binary files /dev/null and b/src/assets/dp/icon2.png differ
diff --git a/src/assets/dp/icon3.png b/src/assets/dp/icon3.png
new file mode 100644
index 0000000..8867b57
Binary files /dev/null and b/src/assets/dp/icon3.png differ
diff --git a/src/assets/dp/icon4.png b/src/assets/dp/icon4.png
new file mode 100644
index 0000000..5173abb
Binary files /dev/null and b/src/assets/dp/icon4.png differ
diff --git a/src/views/dashboard/Analysis/index.vue b/src/views/dashboard/Analysis/index.vue
index 007162e..c45c552 100644
--- a/src/views/dashboard/Analysis/index.vue
+++ b/src/views/dashboard/Analysis/index.vue
@@ -1,484 +1,1179 @@
 <template>
-  <div class="page-shell">
-    <div class="container">
-      <!-- 第一排：4 卡片（宽度占满） -->
-      <a-row :gutter="[20, 20]" class="card-row">
-        <a-col :xs="24" :sm="12" :md="6" v-for="(c, i) in cards" :key="i">
-          <a-card class="dash-card" :hoverable="true">
-            <div class="card-accent" :style="{ background: c.color }"></div>
-            <div class="card-body">
-              <div class="card-left">
-                <div class="card-label">{{ c.label }}</div>
-                <div class="card-note">{{ c.note }}</div>
-              </div>
-              <div class="card-value">{{ c.value }}</div>
-            </div>
-          </a-card>
-        </a-col>
-      </a-row>
+<a-row class="indexCentralAll">
+  <a-col :span="24" class="indexTitle">
+    &nbsp;
+  </a-col>
+  <a-col :span="7" class="divLeft">
+    <a-row>
+      <a-col :span="24" class="left1">
+        <div class="gsmcClass">
+          <span class="left-to-right" style="margin-left: 15px;">{{companyName}}</span>
+          <span v-if="glfCount>1" style="margin-left:10px;color: #66b1e1;" @click="handleCheckGlf" ><Icon icon="ant-design:sync-outlined" /></span>
+        </div>
+      </a-col>
+      <a-col :span="24" class="left2">
+        <div class="glfslClass">
+          <span style="margin-left:10px;" class="left-to-right">锅炉房<br/> 数量</span>
+          <span style="margin-left:12px;font-size:40px;">{{glfCount}}</span>
+        </div>
+      </a-col>
+      <a-col :span="24" class="left3">
+        <div class="glfsllClass" style="padding-top:6px;">
+          <span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房水流量</span>
+          <div class="staticOne">
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </a-col>
+  <a-col :span="10" class="divCenter">
+    <a-row style="margin-top: 8vh;">
+      <a-col :span="24" class="center1">
+        <div class="glfghswdClass" style="padding-top:6px;">
+          <span style="margin-left: 8vh;font-size:16px;" class="left-to-right">锅炉房供回水温度</span>
+          <div  class="staticTwo">
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="24" class="center2">
+        <div class="glfghsylClass" style="padding-top:6px;">
+          <span style="margin-left: 8vh;font-size:16px;" class="left-to-right">锅炉房供回水压力</span>
+          <div class="staticThree">
+          </div>
+        </div>
+      </a-col>
+    </a-row>
 
-      <!-- 第二排：Tabs 温度图（整行，宽度占满） -->
-      <a-card class="charts-card">
-        <a-tabs v-model:activeKey="activeTab" centered @change="onTabChange">
-          <a-tab-pane key="city" tab="城区供回水温度">
-            <div ref="cityChartRef" class="chart-large"></div>
-          </a-tab-pane>
-          <a-tab-pane key="county" tab="乡镇供回水温度">
-            <div ref="countyChartRef" class="chart-large"></div>
-          </a-tab-pane>
-        </a-tabs>
-      </a-card>
+  </a-col>
+  <a-col :span="7" class="divRight">
+    <a-row>
+      <a-col :span="24" class="right1">
+        <div class="glfrlClass" style="padding-top:6px;">
+          <span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房热量</span>
+          <div  class="staticFour">
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="24" class="right2">
+        <div class="glfrlClass" style="padding-top:6px;">
+          <span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房累积热量</span>
+          <div  class="staticFive">
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="24" class="right3">
+        <div class="glfrlClass" style="padding-top:6px;">
+          <span style="margin-left: 7vh;font-size:16px;" class="left-to-right">锅炉房累积水流量</span>
+          <div  class="staticSix">
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </a-col>
+  
+</a-row>
+<a-modal title="切换锅炉房" :visible="visible" @ok="handleOk"
+    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
+    <a-row>
+      <a-col :span="24" style="height: 130px;line-height: 130px;text-align: center;">
+        锅炉房：
+        <a-select v-model:value="sourceId" style="width: 200px;">
+          <template v-for="item in heatsource" :key="`${item.sourceId}`">
+            <a-select-option :value="item.sourceId">{{ item.sourceName }}</a-select-option>
+          </template>
+        </a-select>
+      </a-col>
+    </a-row>
+  </a-modal>
 
-      <!-- 第三排：左右两个图（各占一半，总体占满） -->
-      <a-row :gutter="20" class="third-row">
-        <a-col :xs="24" :md="12">
-          <a-card bordered class="mini-card">
-            <div class="mini-title">乡镇瞬时热量【实时】</div>
-            <div ref="countyPowerChartRef" class="chart-medium"></div>
-          </a-card>
-        </a-col>
-        <a-col :xs="24" :md="12">
-          <a-card bordered class="mini-card" style="margin-left: 8px;">
-            <div class="mini-title">乡镇瞬时流量【实时】</div>
-            <div ref="countyFlowChartRef" class="chart-medium"></div>
-          </a-card>
-        </a-col>
-      </a-row>
-    </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, nextTick, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
-import { slcx, cqglfgswd } from '/@/api/dashboard/api';
+import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
+ 
+import { useUserStore } from '/@/store/modules/user';
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+const { userInfo } = useUserStore();
 
-/* ---- state ---- */
-const activeTab = ref('city');
+const heatsource = ref();
+const sourceId = ref<string>('');
+const companyName = ref<string>('');
+const glfCount = ref<string>('');
+const disableSubmit = ref<boolean>(false);
+const visible = ref<boolean>(false);
+const dataList = ref<any>([]);
 
-const cards = ref([
-  { label: '城区锅炉房数量', value: 0, note: '实时统计', color: 'linear-gradient(90deg,#5B8FF9,#2FC25B)' },
-  { label: '城区换热站数量', value: 0, note: '实时统计', color: 'linear-gradient(90deg,#2FC25B,#FACC14)' },
-  { label: '乡镇数量', value: 0, note: '实时统计', color: 'linear-gradient(90deg,#F04864,#9254DE)' },
-  { label: '乡镇锅炉房数量', value: 0, note: '实时统计', color: 'linear-gradient(90deg,#9254DE,#5B8FF9)' }
-]);
+let chartOne: echarts.ECharts | null = null;
+let chartTwo: echarts.ECharts | null = null;
+let chartThree: echarts.ECharts | null = null;
+let chartFour: echarts.ECharts | null = null;
+let chartFive: echarts.ECharts | null = null;
+let chartSix: echarts.ECharts | null = null;
 
-/* ---- dom refs ---- */
-const cityChartRef = ref<HTMLElement | null>(null);
-const countyChartRef = ref<HTMLElement | null>(null);
-const countyPowerChartRef = ref<HTMLElement | null>(null);
-const countyFlowChartRef = ref<HTMLElement | null>(null);
-
-/* ---- echarts instances & options ---- */
-let cityChart: echarts.ECharts | null = null;
-let countyChart: echarts.ECharts | null = null;
-let countyPowerChart: echarts.ECharts | null = null;
-let countyFlowChart: echarts.ECharts | null = null;
-
-let cityOption: any = null;
-let countyOption: any = null;
-let countyPowerOption: any = null;
-let countyFlowOption: any = null;
-
-/* ---- helpers ---- */
-function safeNum(v: any) {
-  if (v === null || v === undefined || v === '') return null;
-  const n = Number(v);
-  return Number.isNaN(n) ? null : n;
-}
-function sortByTime(arr: any[]) {
-  return [...arr].sort((a, b) => {
-    const ta = new Date(a.datatime || a.view032 || '').getTime();
-    const tb = new Date(b.datatime || b.view032 || '').getTime();
-    return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
-  });
-}
-function splitByRegion(data: any[]) {
-  const city = data.filter(d => String(d.regionType).includes('城区'));
-  const county = data.filter(d => String(d.regionType).includes('乡镇'));
-  return { city: sortByTime(city), county: sortByTime(county) };
-}
-function buildXAxis(records: any[], key = 'view028') {
-  return records.map((r: any) => {
-    return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
-  });
-}
-
-/* ---- build options（折线改为直线 smooth: false） ---- */
-function prepareOptions(records: any[]) {
-  const { city, county } = splitByRegion(records);
-
-  const cityX = buildXAxis(city, 'view028');
-  const citySW = city.map((r: any) => safeNum(r.view005));
-  const cityHW = city.map((r: any) => safeNum(r.view006));
-  cityOption = {
-    title: { text: '城区供/回水温度【实时】', left: 'center', top: 10 },
-    tooltip: { trigger: 'axis' },
-    legend: { top: 36, left: 'center' },
-    grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
-    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 20 } },
-    yAxis: { type: 'value', name: '℃' },
-    series: [
-      { name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
-      { name: '回水温度', type: 'line', data: cityHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
-    ],
-    color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
-  };
-
-  const countyX = buildXAxis(county, 'view028');
-  const countySW = county.map((r: any) => safeNum(r.view035));
-  const countyHW = county.map((r: any) => safeNum(r.view036));
-  countyOption = {
-    title: { text: '乡镇供/回水温度【实时】', left: 'center', top: 10 },
-    tooltip: { trigger: 'axis' },
-    legend: { top: 36, left: 'center' },
-    grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
-    xAxis: { type: 'category', data: countyX, axisLabel: { rotate: 20 } },
-    yAxis: { type: 'value', name: '℃' },
-    series: [
-      { name: '供水温度', type: 'line', data: countySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
-      { name: '回水温度', type: 'line', data: countyHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
-    ],
-    color: ['#D64545', '#12A0A6']
-  };
-
-  const powerY = county.map((r: any) => safeNum(r.view041));
-  countyPowerOption = {
-    title: { text: '', left: 'center', top: 8 },
-    tooltip: { trigger: 'axis' },
-    grid: { left: '6%', right: '6%', bottom: 60, top: 50, containLabel: true },
-    xAxis: { type: 'category', data: countyX, axisLabel: { rotate: 20 } },
-    yAxis: { type: 'value', name: '瞬时热量' },
-    series: [{ name: '瞬时热量', type: 'line', data: powerY, smooth: false, areaStyle: {}, showSymbol: false, lineStyle: { type: 'solid' } }],
-    color: ['#E89B3B']
-  };
-
-  const flowY = county.map((r: any) => safeNum(r.view037));
-  countyFlowOption = {
-    title: { text: '', left: 'center', top: 8 },
-    tooltip: { trigger: 'axis' },
-    grid: { left: '6%', right: '6%', bottom: 60, top: 50, containLabel: true },
-    xAxis: { type: 'category', data: countyX, axisLabel: { rotate: 20 } },
-    yAxis: { type: 'value', name: '瞬时流量' },
-    series: [{ name: '瞬时流量', type: 'line', data: flowY, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }],
-    color: ['#7C55FF']
-  };
-}
-
-/* ---- lazy init & resize ---- */
-let resizeAdded = false;
-function ensureResize() {
-  if (resizeAdded) return;
-  const onResize = () => {
-    cityChart?.resize();
-    countyChart?.resize();
-    countyPowerChart?.resize();
-    countyFlowChart?.resize();
-  };
-  window.addEventListener('resize', onResize);
-  onUnmounted(() => window.removeEventListener('resize', onResize));
-  resizeAdded = true;
-}
-
-function initCityIfNeed() {
-  if (!cityChart && cityChartRef.value && cityOption) {
-    cityChart = echarts.init(cityChartRef.value);
-    cityChart.setOption(cityOption);
-  } else {
-    cityChart?.resize();
+function getStaticOne(){
+  var names = [];
+  var dataSource = [];
+  for(var i=0;i<dataList.value.length;i++){
+    names.push(dataList.value[i].datatime);
+    dataSource.push({value:dataList.value[i].view037});
   }
-}
-function initCountyIfNeed() {
-  if (!countyChart && countyChartRef.value && countyOption) {
-    countyChart = echarts.init(countyChartRef.value);
-    countyChart.setOption(countyOption);
-  } else {
-    countyChart?.resize();
-  }
-}
-function initPowerIfNeed() {
-  if (!countyPowerChart && countyPowerChartRef.value && countyPowerOption) {
-    countyPowerChart = echarts.init(countyPowerChartRef.value);
-    countyPowerChart.setOption(countyPowerOption);
-  } else {
-    countyPowerChart?.resize();
-  }
-}
-function initFlowIfNeed() {
-  if (!countyFlowChart && countyFlowChartRef.value && countyFlowOption) {
-    countyFlowChart = echarts.init(countyFlowChartRef.value);
-    countyFlowChart.setOption(countyFlowOption);
-  } else {
-    countyFlowChart?.resize();
-  }
-}
-
-function onTabChange(key: string) {
-  nextTick(() => {
-    if (key === 'city') {
-      if (!cityChart && cityChartRef.value) {
-        cityChart = echarts.init(cityChartRef.value);
+  const staticParam = document.querySelector('.staticOne') as HTMLElement;
+  chartOne = echarts.init(staticParam);
+  chartOne.setOption({
+  xAxis: {
+    type: 'category',
+    data: names,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
       }
-      cityChart?.setOption(cityOption, true);
-      cityChart?.resize();
-    } else if (key === 'county') {
-      if (!countyChart && countyChartRef.value) {
-        countyChart = echarts.init(countyChartRef.value);
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 12,
+      // interval: 0
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: 'value',
+    name: '(m³/h)',
+    nameTextStyle: {
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontSize: 12,
+      padding: [0, 0, 0, 10]
+    },
+    min: 0,
+    interval: 100,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
       }
-      countyChart?.setOption(countyOption, true);
-      countyChart?.resize();
-    }
-  });
-}
-
-let timer: number | null = null;
-/* ---- load data ---- */
-async function loadData() {
-  try {
-    // 1. 获取卡片数据
-    const s = await slcx();
-    cards.value = [
-      { label: '城区锅炉房数量', value: s?.cqglfsl ?? 0, note: '实时统计', color: 'linear-gradient(90deg,#5B8FF9,#2FC25B)' },
-      { label: '城区换热站数量', value: s?.cqhrzsl ?? 0, note: '实时统计', color: 'linear-gradient(90deg,#2FC25B,#FACC14)' },
-      { label: '乡镇数量', value: s?.jxsl ?? 0, note: '实时统计', color: 'linear-gradient(90deg,#F04864,#9254DE)' },
-      { label: '乡镇锅炉房数量', value: s?.jxglfsl ?? 0, note: '实时统计', color: 'linear-gradient(90deg,#9254DE,#5B8FF9)' }
-    ];
-
-    // 2. 获取图表数据
-    const r = await cqglfgswd();
-    const records = r?.data ?? [];
-    prepareOptions(records);
-
-    // 3. 等 DOM 更新完
-    await nextTick();
-
-    // 4. 初始化或更新图表（你的这段代码）
-    if (activeTab.value === 'city') {
-      if (!cityChart && cityChartRef.value) {
-        cityChart = echarts.init(cityChartRef.value);
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 12,
+      formatter: function(value) {
+        return value;
       }
-      cityChart?.setOption(cityOption, true);
-    } else {
-      if (!countyChart && countyChartRef.value) {
-        countyChart = echarts.init(countyChartRef.value);
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'dashed'
       }
-      countyChart?.setOption(countyOption, true);
     }
-
-    // 第三排图表
-    if (!countyPowerChart && countyPowerChartRef.value) {
-      countyPowerChart = echarts.init(countyPowerChartRef.value);
+  },
+  series: [{
+    name: '水流量',
+    type: 'bar',
+    data: dataSource,
+    barWidth: '25%',
+    itemStyle: {
+      borderRadius: [4, 4, 0, 0],
+      opacity: 0.8
+    },
+    // label: {
+    //   show: true,
+    //   position: 'top',
+    //   color: '#fff',
+    //   fontSize: 12,
+    //   fontWeight: 'bold',
+    //   formatter: function(params) {
+    //     return params.value;
+    //   }
+    // }
+  }],
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderColor: 'rgba(255, 255, 255, 0.4)',
+    textStyle: {
+      color: '#fff'
+    },
+    formatter: function(params) {
+      return `时间: ${params[0].name}<br/>水流量: ${params[0].value} m³/h`;
     }
-    countyPowerChart?.setOption(countyPowerOption, true);
-
-    if (!countyFlowChart && countyFlowChartRef.value) {
-      countyFlowChart = echarts.init(countyFlowChartRef.value);
-    }
-    countyFlowChart?.setOption(countyFlowOption, true);
-
-    // 5. 窗口自适应
-    ensureResize();
-  } catch (err) {
-    console.error('load error', err);
   }
+  }, true)
+
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartOne.__autoTooltipTimer) {
+    clearInterval(chartOne.__autoTooltipTimer);
+    chartOne.__autoTooltipTimer = null;
+    try { chartOne.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartOne.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartOne.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartOne.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartOne.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartOne.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartOne.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartOne.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartOne.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartOne.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartOne.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartOne.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+      }
+    }, 5000);
+  }, 2500);
 }
 
+function getStaticTwo(){
+  var names = [];
+  var dataSource = [];
+  var dataSource2 = [];
+  for(var i=0;i<dataList.value.length;i++){
+    names.push(dataList.value[i].datatime);
+    dataSource.push({value:dataList.value[i].view005});
+    dataSource2.push({value:dataList.value[i].view006});
+  }
+  const staticParam = document.querySelector('.staticTwo') as HTMLElement;
+  chartTwo = echarts.init(staticParam);
+  chartTwo.setOption({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+    textStyle: {
+      color: '#fff'
+    }
+  },
+  legend: {
+    data: ['供水温度', '回水温度'],
+    textStyle: {
+      color: '#fff'
+    },
+    top: 10,
+    right: 20
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    top: '60px',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: names,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 12,
+      // interval: 0
+    },
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 100,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 12,
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '供水温度',
+      type: 'bar',
+      data: dataSource,
+      barWidth: '25%',
+      barGap: '30%',
+      itemStyle: {
+        borderRadius: [3, 3, 0, 0],
+        opacity: 0.8
+      },
+      // label: {
+      //   show: true,
+      //   position: 'top',
+      //   color: '#fff',
+      //   fontSize: 11,
+      //   fontWeight: 'normal'
+      // }
+    },
+    {
+      name: '回水温度',
+      type: 'bar',
+      data: dataSource2,
+      barWidth: '25%',
+      barGap: '30%',
+      itemStyle: {
+        borderRadius: [3, 3, 0, 0],
+        opacity: 0.8
+      },
+      // label: {
+      //   show: true,
+      //   position: 'top',
+      //   color: '#fff',
+      //   fontSize: 11,
+      //   fontWeight: 'normal'
+      // }
+    }
+  ]
+  }, true)
 
-/* ---- lifecycle ---- */
-onMounted(() => {
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartTwo.__autoTooltipTimer) {
+    clearInterval(chartTwo.__autoTooltipTimer);
+    chartTwo.__autoTooltipTimer = null;
+    try { chartTwo.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartTwo.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartTwo.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartTwo.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartTwo.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartTwo.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+      }
+    }, 5000);
+  }, 2500);
+}
+
+function getStaticThree(){
+  var names = [];
+  var dataSource = [];
+  var dataSource2 = [];
+  for(var i=0;i<dataList.value.length;i++){
+    names.push(dataList.value[i].datatime);
+    dataSource.push(dataList.value[i].view007);
+    dataSource2.push(dataList.value[i].view008);
+  }
+  // var names = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'];
+  const staticParam = document.querySelector('.staticThree') as HTMLElement;
+  chartThree = echarts.init(staticParam);
+  chartThree.setOption({
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+    textStyle: {
+      color: '#fff'
+    },
+    formatter: function(params) {
+      return `时间: ${params[0].name}<br/>` +
+             `${params[0].seriesName}: ${params[0].value}<br/>` +
+             `${params[1].seriesName}: ${params[1].value}`;
+    }
+  },
+  legend: {
+    data: ['供水压力', '回水压力'],
+    textStyle: {
+      color: '#fff',
+      fontSize: 12
+    },
+    top: 10,
+    right: 20,
+    itemWidth: 15,
+    itemHeight: 10,
+    itemGap: 15
+  },
+  grid: {
+    left: '30px',
+    right: '40px',
+    bottom: '40px',
+    top: '60px',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: names,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 11,
+      // interval: 0
+    },
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 5,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 11,
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'dashed'
+      }
+    }
+  },
+  series: [
+    {
+      name: '供水压力',
+      type: 'line',
+      data: dataSource,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: {
+        color: '#1E90FF'
+      },
+      lineStyle: {
+        color: '#1E90FF',
+        width: 2
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0,
+            color: 'rgba(30, 144, 255, 0.3)'
+          }, {
+            offset: 1,
+            color: 'rgba(30, 144, 255, 0.1)'
+          }]
+        }
+      },
+      smooth: true
+    },
+    {
+      name: '回水压力',
+      type: 'line',
+      data: dataSource2,
+      symbol: 'circle',
+      symbolSize: 6,
+      itemStyle: {
+        color: '#FFD700'
+      },
+      lineStyle: {
+        color: '#FFD700',
+        width: 2
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0,
+            color: 'rgba(255, 215, 0, 0.3)'
+          }, {
+            offset: 1,
+            color: 'rgba(255, 215, 0, 0.1)'
+          }]
+        }
+      },
+      smooth: true
+    }
+  ]
+  }, true)
+
+  
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartThree.__autoTooltipTimer) {
+    clearInterval(chartThree.__autoTooltipTimer);
+    chartThree.__autoTooltipTimer = null;
+    try { chartThree.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartThree.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartThree.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartThree.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartThree.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartThree.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartThree.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartThree.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartThree.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartThree.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartThree.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartThree.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+      }
+    }, 5000);
+  }, 2500);
+}
+
+function getStaticFour(){
+  var names = [];
+  var dataSource = [];
+  for(var i=0;i<dataList.value.length;i++){
+    names.push(dataList.value[i].datatime);
+    dataSource.push(dataList.value[i].view041);
+  }
+  const staticParam = document.querySelector('.staticFour') as HTMLElement;
+  chartFour = echarts.init(staticParam);
+  chartFour.setOption({
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12
+    },
+    formatter: function(params) {
+      return `时间: ${params[0].name}<br/>数值: ${params[0].value}`;
+    }
+  },
+  grid: {
+    left: '20px',
+    right: '20px',
+    bottom: '10px',
+    top: '30px',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: names,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 11,
+      // interval: 0
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 5,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 11,
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'dashed'
+      }
+    }
+  },
+  series: [{
+    name: '数据值',
+    type: 'line',
+    data: dataSource,
+    symbol: 'circle',
+    symbolSize: 6,
+    itemStyle: {
+      color: '#FFD700'
+    },
+    lineStyle: {
+      color: '#FFD700',
+      width: 2
+    },
+    areaStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: 'rgba(255, 215, 0, 0.3)' },
+          { offset: 1, color: 'rgba(255, 215, 0, 0.1)' }
+        ]
+      }
+    },
+    smooth: false,
+    emphasis: {
+      lineStyle: {
+        width: 2
+      },
+      itemStyle: {
+        color: '#FFD700'
+      }
+    }
+  }]
+  }, true)
+
+  
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartFour.__autoTooltipTimer) {
+    clearInterval(chartFour.__autoTooltipTimer);
+    chartFour.__autoTooltipTimer = null;
+    try { chartFour.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartFour.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartFour.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartFour.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartFour.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartFour.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartFour.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartFour.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartFour.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartFour.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartFour.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartFour.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+      }
+    }, 5000);
+  }, 2500);
+}
+
+function getStaticFive(){
+  
+  var names = [];
+  var dataSource = [];
+  for(var i=0;i<dataList.value.length;i++){
+    names.push(dataList.value[i].datatime);
+    dataSource.push(dataList.value[i].view042);
+  }
+  const staticParam = document.querySelector('.staticFive') as HTMLElement;
+  chartFive = echarts.init(staticParam);
+  chartFive.setOption({
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12
+    },
+    formatter: function(params) {
+      return `时间: ${params[0].name}<br/>数值: ${params[0].value}`;
+    }
+  },
+  grid: {
+    left: '20px',
+    right: '20px',
+    bottom: '40px',
+    top: '30px',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: names,
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 11,
+      // interval: 0
+    },
+    axisTick: {
+      show: false
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    interval: 5,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.6)'
+      }
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 11,
+      formatter: '{value}'
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'dashed'
+      }
+    }
+  },
+  series: [{
+    name: '数据值',
+    type: 'line',
+    data: dataSource,
+    symbol: 'circle',
+    symbolSize: 6,
+    itemStyle: {
+      color: '#1E90FF'
+    },
+    lineStyle: {
+      color: '#1E90FF',
+      width: 2
+    },
+    areaStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: 'rgba(30, 144, 255, 0.3)' },
+          { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
+        ]
+      }
+    },
+    smooth: false,
+    emphasis: {
+      lineStyle: {
+        width: 2
+      },
+      itemStyle: {
+        color: '#00BFFF'
+      }
+    }
+  }]
+  }, true)
+  
+  // -------- 自动轮播 tooltip（每 5 秒） --------
+  // 清理旧定时器（避免重复）
+  if (chartFive.__autoTooltipTimer) {
+    clearInterval(chartFive.__autoTooltipTimer);
+    chartFive.__autoTooltipTimer = null;
+    try { chartFive.dispatchAction({ type: 'hideTip' }); } catch (e) { }
+    try { chartFive.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: 0 }); } catch (e) { }
+    try { chartFive.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: 0 }); } catch (e) { }
+  }
+
+  if (!names || names.length === 0) return;
+
+  let idx = 0;
+  // 先展示第一个（使用 seriesIndex:0 展示 axis tooltip）
+  setTimeout(() => {
+    try {
+      chartFive.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+      chartFive.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+      // 同时也可以高亮第二条线的点（可选）
+      chartFive.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+    } catch (e) { }
+    chartFive.__autoTooltipTimer = setInterval(() => {
+      try {
+        // 取消上一个高亮
+        chartFive.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: idx });
+        chartFive.dispatchAction({ type: 'downplay', seriesIndex: 1, dataIndex: idx });
+
+        // 下一个索引
+        idx = (idx + 1) % names.length;
+
+        // 显示 tooltip（axis 模式会显示两条线的数据）并高亮
+        chartFive.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: idx });
+        chartFive.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
+        chartFive.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
+      } catch (e) {
+      }
+    }, 5000);
+  }, 2500);
+}
+
+function getStaticSix(){
+  
+  var names = [];
+  var dataSource = [];
+  for(var i=0;i<dataList.value.length;i++){
+    names.push({name:dataList.value[i].datatime});
+    dataSource.push(dataList.value[i].view038);
+  }
+  const staticParam = document.querySelector('.staticSix') as HTMLElement;
+  chartSix = echarts.init(staticParam);
+  chartSix.setOption({
+   tooltip: {
+    trigger: 'item',
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+    textStyle: {
+      color: '#fff',
+      fontSize: 12
+    }
+  },
+  legend: {
+    data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'],
+    textStyle: {
+      color: '#fff',
+      fontSize: 11
+    },
+    top: 10,
+    right: 20,
+    itemWidth: 12,
+    itemHeight: 12,
+    itemGap: 8,
+    formatter: function(name) {
+      return name;
+    }
+  },
+  radar: {
+    indicator: names,
+    shape: 'polygon',
+    splitNumber: 4,
+    center: ['50%', '55%'],
+    radius: '65%',
+    axisName: {
+      color: 'rgba(255, 255, 255, 0.7)',
+      fontSize: 10
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.3)'
+      }
+    },
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.2)'
+      }
+    },
+    splitArea: {
+      show: true,
+      areaStyle: {
+        color: ['rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.2)']
+      }
+    }
+  },
+  series: [{
+    name: '数据分布',
+    type: 'radar',
+    itemStyle: {
+      color: '#1E90FF',
+      opacity: 0.6
+    },
+    lineStyle: {
+      color: '#1E90FF',
+      width: 2
+    },
+    areaStyle: {
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [{
+          offset: 0,
+          color: 'rgba(30, 144, 255, 0.4)'
+        }, {
+          offset: 1,
+          color: 'rgba(30, 144, 255, 0.1)'
+        }]
+      }
+    },
+    data: [{
+      value: dataSource,
+      symbol: 'circle',
+      symbolSize: 6,
+      label: {
+        show: true,
+        color: '#fff',
+        fontSize: 10,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        padding: [2, 4],
+        borderRadius: 3
+      }
+    }]
+  }]
+  }, true)
+}
+
+function handleCheckGlf(){
+  visible.value = true;
+  disableSubmit.value = true;
+
+}
+function handleOk(){ 
+  var list = heatsource.value
+  companyName.value = list.filter(item => item.sourceId == sourceId.value)[0].sourceName
+  visible.value = false;
+  disableSubmit.value = false;
   loadData();
-  timer = window.setInterval(() => {
-    console.log('刷新数据…', new Date().toLocaleTimeString());
-    loadData();
-  }, 5 * 60 * 1000);
-  // }, 5 * 1000);
-});
-onUnmounted(() => {
-  if (cityChart) { cityChart.dispose(); cityChart = null; }
-  if (countyChart) { countyChart.dispose(); countyChart = null; }
-  if (countyPowerChart) { countyPowerChart.dispose(); countyPowerChart = null; }
-  if (countyFlowChart) { countyFlowChart.dispose(); countyFlowChart = null; }
+}
+function handleCancel(){
+  visible.value = false;
+  disableSubmit.value = false;
+}
 
-  if (timer) {
-    clearInterval(timer);
-    timer = null;
+async function loadData() {
+  var startTime = dayjs().format('YYMM');
+  await defHttp.post({url: '/exportapi/homeApi/getStaticNowList',params:{sourceId:sourceId.value,startTime}}).then(res => {
+    var list = res.data
+    for (let i = 0; i < list.length; i++) {
+      list[i].datatime = dayjs(list[i].datatime).format('HH:mm')
+    }
+    dataList.value = list
+  })
+
+  getStaticOne()
+  getStaticTwo();
+  getStaticThree();
+  getStaticFour();
+  getStaticFive();
+  getStaticSix();
+  
+}
+async function getHeatsource(){
+  heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
+}
+/* ---- lifecycle ---- */
+onMounted(async () => {
+  await getHeatsource();
+  glfCount.value = userInfo.sourceId.split(',').length;
+  var list = heatsource.value
+  if(list.length>0){
+    sourceId.value = list[0].sourceId
+    companyName.value = list[0].sourceName
   }
+  loadData();
+  setTimeout(() => {
+    loadData();
+  }, 30 * 60 * 1000);
 });
 </script>
 
-<style scoped>
-/* 外层背景与容器：真正铺满视口宽度 */
-.page-shell {
-  background: #f4f6fa;
-  min-height: 100vh;
-  box-sizing: border-box;
+<style scoped lang="less">
+.indexCentralAll{
+  background: url(../../../assets/loginmini/style/img/register.jpg) no-repeat;
+  background-position: center center;
+  background-size: cover;
+  color: white;
 }
-
-.container {
-  width: 100vw;
-  max-width: 100%;
-  padding: 14px;
-  margin: 0;
-  box-sizing: border-box;
+.indexTitle{
+  background: url(../../../assets/loginmini/style/img/title.png) no-repeat;
+  background-size: auto;
+  text-align: center;
+  background-size: 100% 100%;
+  height: 10vh;
 }
-
-/* header */
-.header {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 18px;
-  padding: 0 16px;
+.divLeft{
+  margin-top:-7vh;
 }
-
-.title {
+.divCenter{
+  margin-top:-7vh;
+}
+.divRight{
+  margin-top:-4vh;
+}
+.left1{
+  height: 20vh;
+}
+.left2{
+  height: 20vh;
+}
+.left3{
+  height: calc(100vh - 56vh);
+}
+.center1{
+  height: 40vh;
+  padding-bottom: 5px;
+}
+.center2{
+  height: calc(100vh - 64vh);
+  padding-top: 9px;
+}
+.right1{
+  height: 27vh;
+}
+.right2{
+  height: 27vh;
+}
+.right3{
+  height: 27vh;
+}
+.gsmcClass{
   font-size: 20px;
-  font-weight: 700;
-  color: #0b3b66;
-}
-
-/* 不纯黑：深蓝 */
-.subtitle {
-  font-size: 12px;
-  color: #6f7f8f;
-  margin-top: 6px;
-}
-
-/* 卡片行：卡片横向填满列宽，文字左/右分布，垂直居中 */
-.card-row {
-  margin-bottom: 18px;
-  width: 101%;
-}
-
-.dash-card {
-  position: relative;
-  overflow: hidden;
-  border-radius: 6px;
-  padding: 0;
-  box-shadow: 0 6px 20px rgba(31, 45, 61, 0.06);
-  transition: transform .12s;
-  height: 110px;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.dash-card:hover {
-  transform: translateY(-6px);
-}
-
-.card-accent {
-  height: 6px;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.card-body {
-  padding: 14px 18px;
-  background: #fff;
-  height: 100%;
-  box-sizing: border-box;
+  font-weight: bold;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中 */
+  height: 20vh;           /* 需要设置容器高度 */
+  
+  background: url(../../../assets/dp/icon1.png) no-repeat;
+  background-position: center center;
+  background-size: 95% 80%;
 }
-
-.card-left {
+.glfslClass{
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中 */
+  height: 20vh;           /* 需要设置容器高度 */
+  
+  background: url(../../../assets/dp/icon2.png) no-repeat;
+  background-position: center center;
+  background-size: 95% 80%;
 }
 
-.card-label {
-  color: #6f7f8f;
-  font-size: 13px;
-  margin-bottom: 6px;
+.left-to-right {
+  background: linear-gradient(to right, #a3d1f0, #66b1e1);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.glfsllClass{
+  height: calc(100vh - 56vh);           /* 需要设置容器高度 */
+  background: url(../../../assets/dp/frame2.png) no-repeat;
+  background-position: center center;
+  background-size: 98% 100%;
+}
+.glfghswdClass{
+  height: 40vh;           /* 需要设置容器高度 */
+  background: url(../../../assets/dp/frame.png) no-repeat;
+  background-position: center center;
+  background-size: 98% 100%;
+}
+.glfghsylClass{
+  height: calc(100vh - 65vh);           /* 需要设置容器高度 */
+  background: url(../../../assets/dp/frame.png) no-repeat;
+  background-position: center center;
+  background-size: 98% 100%;
+}
+.glfrlClass{
+  height: 27vh;           /* 需要设置容器高度 */
+  background: url(../../../assets/dp/frame3.png) no-repeat;
+  background-position: center center;
+  background-size: 98% 100%;
 }
 
-.card-note {
-  font-size: 12px;
-  color: #9aa7b7;
-}
-
-/* 大数字不再纯黑，右对齐，垂直居中 */
-.card-value {
-  font-size: 32px;
-  font-weight: 800;
-  color: #0b63a7;
-  /* 品牌蓝，不纯黑 */
-  text-align: right;
-  line-height: 1;
-}
-
-/* 大图容器：宽度占满父容器 */
-.charts-card {
-  border-radius: 8px;
-  box-shadow: 0 6px 18px rgba(31, 45, 61, 0.04);
-  margin-bottom: 18px;
-  padding: 12px 0;
-}
-
-.chart-large {
+.staticOne {
   width: 100%;
-  height: 420px;
-  border-radius: 6px;
-  background: #ffffff;
-  padding: 8px;
-  box-sizing: border-box;
+  height: calc(100% - 30px); // 减去标题高度
 }
-
-/* 第三排小卡：各占半宽，总体占满 */
-.third-row {
-  margin-top: 6px;
+.staticTwo {
   width: 100%;
+  height: calc(100% - 30px); // 减去标题高度
 }
-
-.mini-card {
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.04);
-  padding: 12px;
-  box-sizing: border-box;
-  width: 101.5%;
-}
-
-.mini-title {
-  font-weight: 600;
-  color: #223344;
-  margin-bottom: 8px;
-}
-
-.chart-medium {
+.staticThree {
   width: 100%;
-  height: 320px;
-  background: #fff;
-  border-radius: 6px;
-  padding: 8px;
-  box-sizing: border-box;
+  height: calc(100% - 30px); // 减去标题高度
 }
-
-/* 响应：移动端仍保留内边距 */
-@media (max-width: 900px) {
-  .header {
-    padding: 0 12px;
-  }
-
-  .chart-large {
-    height: 320px;
-  }
-
-  .chart-medium {
-    height: 260px;
-  }
-
-  .card-body {
-    padding: 12px;
-  }
-
-  .card-value {
-    font-size: 28px;
-  }
+.staticFour {
+  width: 100%;
+  height: calc(100% - 30px); // 减去标题高度
+}
+.staticFive {
+  width: 100%;
+  height: calc(100% ); // 减去标题高度
+}
+.staticSix {
+  width: 100%;
+  height: calc(100% - 30px); // 减去标题高度
 }
 </style>