From ec224975ec419c2c489650734a06db34aa3ba294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Wed, 3 Sep 2025 17:26:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/screen/Dashboard.vue               |  54 ++-
 src/views/screen/components/ZxtCQ.vue        |  88 ++---
 src/views/screen/components/ZxtJX.vue        | 357 +++++++++++++++++++
 src/views/staticList/GlfghsList.vue          |   2 +-
 src/views/staticList/GlfghsListHistory.vue   |   2 +-
 src/views/staticList/GlfghsjxList.vue        |   6 +-
 src/views/staticList/GlfghsjxListHistory.vue |   2 +-
 src/views/staticList/GlfrlljxList.vue        |   4 +-
 src/views/staticList/GlfrlljxListHistory.vue |   4 +-
 src/views/staticList/GlfslljxList.vue        |   4 +-
 src/views/staticList/GlfslljxListHistory.vue |   4 +-
 src/views/staticList/GlfylList.vue           |   4 +-
 src/views/staticList/GlfylListHistory.vue    |   4 +-
 src/views/staticList/GlfyljxList.vue         |   4 +-
 src/views/staticList/GlfyljxListHistory.vue  |   4 +-
 15 files changed, 445 insertions(+), 98 deletions(-)
 create mode 100644 src/views/screen/components/ZxtJX.vue

diff --git a/src/views/screen/Dashboard.vue b/src/views/screen/Dashboard.vue
index 3498782..7d987c0 100644
--- a/src/views/screen/Dashboard.vue
+++ b/src/views/screen/Dashboard.vue
@@ -62,9 +62,9 @@
               <span>二次网供压</span>
               <span>二次网回压</span>
               <div>
-<!--                <span v-if="tableCanScroll" @click="stopScroll()">停</span>
-                <span v-else @click="startScroll()">启</span>-->
-                <a-switch v-model:checked="checked1" checked-children="启" un-checked-children="停" />
+                <span v-if="tableCanScroll" @click="stopScroll()">停</span>
+                <span v-else @click="startScroll()">启</span>
+<!--                <a-switch v-model:checked="checked1" checked-children="启" un-checked-children="停" />-->
               </div>
               <!-- <img src="./dashboard/dp_icon4-right.png" class="left-icon" /> -->
             </div>
@@ -168,7 +168,7 @@
           <span class="close-btn" @click="closeModal">×</span>
         </div>
         <div class="modal-body list-container">
-          <div class="list-header" style="color: #81c7e6;">
+          <div class="list-header" style="color: #fff;">
             <img src="./dashboard/dp_icon4-left.png" class="left-icon" />
             <span>锅炉房名称</span>
             <span v-show="modalType == 1">换热站名称</span>
@@ -181,7 +181,7 @@
           </div>
           <div class="list-body">
             <div v-if="!!modalData.length" v-for="item in modalData" :key="item.view028" class="list-row"
-              style="color: #81c7e6;">
+              style="color: #fff;">
               <span>{{ item.view028 }}</span>
               <span v-show="modalType == 1">{{ item.view030 }}</span>
               <span v-if="modalType == 0 || modalType == 1">{{ item.view005 }}</span>
@@ -192,7 +192,7 @@
               <span v-if="modalType == 1">{{ item.view011 }}</span>
               <span v-if="modalType == 0 || modalType == 2">{{ item.view008 }}</span>
               <span v-if="modalType == 1">{{ item.view012 }}</span>
-              <span><a-button type="link"><span style="color: white;"
+              <span><a-button type="link"><span style="color: #81c7e6;"
                     @click="detailFunc(item)">详情</span></a-button></span>
             </div>
             <div v-else class="list-row">
@@ -208,6 +208,13 @@
         <ZxtCQ ref="registerModal" @close="closeModal2" />
       </div>
     </div>
+
+    <div v-if="modalVisible3" class="modal-overlay2" @click.self="closeModal3">
+      <div class="modal-content2">
+        <ZxtJx ref="registerModal3" @close="closeModal3" />
+      </div>
+    </div>
+
   </div>
 </template>
 
@@ -219,11 +226,14 @@ import aImg from './dashboard/c.png';
 import lqImg from './dashboard/lq.png';
 import ljt from './dashboard/ljt.png';
 import ZxtCQ from './components/ZxtCQ.vue'
+import ZxtJx from './components/ZxtJx.vue'
 
 const registerModal = ref();
+const registerModal3 = ref();
 
 const modalVisible = ref(false);
 const modalVisible2 = ref(false)
+const modalVisible3 = ref(false)
 const modalTitle = ref('');
 const modalData = ref<any[]>([]);
 
@@ -256,10 +266,14 @@ let tableTimer = null;
 const tableCanScroll = ref(true)
 
 const startScroll = () => {
+  if (tableTimer) {
+    clearInterval(tableTimer);
+    scrollTop.value = 0;
+  }
+  tableTimer = null;
+
   tableCanScroll.value = true
-
   const totalHeight = 28 * z.value.length;
-
   tableTimer = setInterval(() => {
     scrollTop.value += speed;
     if (scrollTop.value >= totalHeight) {
@@ -356,7 +370,7 @@ function updateChartMain() {
       chartMain.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
     } catch (e) {
       // 防止报错中断定时器
-      console.error(e);
+      // console.error(e);
     }
   }, 5000);
 
@@ -725,7 +739,7 @@ function updateChartArea8() {
         chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: idx });
         chartArea8.dispatchAction({ type: 'highlight', seriesIndex: 1, dataIndex: idx });
       } catch (e) {
-        console.error(e);
+        // console.error(e);
       }
     }, 5000);
   }, 2500);
@@ -1008,14 +1022,26 @@ function closeModal() {
 }
 
 async function detailFunc(record) {
-  modalVisible2.value = true;
-  await nextTick()
-  registerModal.value.init(record)
+  console.log(record);
+  console.log(modalType);
+  if(modalType.value == 2){
+    modalVisible3.value = true;
+    await nextTick()
+    registerModal3.value.init(record)
+  }else{
+    modalVisible2.value = true;
+    await nextTick()
+    registerModal.value.init(record)
+  }
 }
 
 function closeModal2() {
   modalVisible2.value = false;
 }
+
+function closeModal3() {
+  modalVisible3.value = false;
+}
 </script>
 
 
@@ -1531,7 +1557,7 @@ function closeModal2() {
   padding: 0 16px;
   font-size: 18px;
   font-weight: bold;
-  color: #59accf;
+  color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
diff --git a/src/views/screen/components/ZxtCQ.vue b/src/views/screen/components/ZxtCQ.vue
index 4285023..94c13a2 100644
--- a/src/views/screen/components/ZxtCQ.vue
+++ b/src/views/screen/components/ZxtCQ.vue
@@ -22,7 +22,7 @@
 import { ref, nextTick, defineProps, onUnmounted } from 'vue';
 import * as echarts from 'echarts';
 import { useMessage } from '/@/hooks/web/useMessage';
-import {jxlist, list} from '/@/views/heating/history/HeatanalysisHistory.api';
+import { list} from '/@/views/heating/history/HeatanalysisHistory.api';
 
 const emit = defineEmits(['close']);
 
@@ -72,29 +72,16 @@ function initChartsOptions(records: any[], record_: any) {
 
   let wdSeries = [];
   let ylSeries = [];
-  if(record_.regionType == '城区'){
-    records.sort((a: any, b: any) => new Date(a.datatime).getTime() - new Date(b.datatime).getTime());
-    if(record_.view004){
-      wdSeries.push({ name: '供水温度', key: 'view009', color: '#ff007f' });
-      wdSeries.push({ name: '回水温度', key: 'view010', color: '#6a5acd' });
-      ylSeries.push({ name: '供水压力', key: 'view011', color: '#ff007f' });
-      ylSeries.push({ name: '回水压力', key: 'view012', color: '#6a5acd' });
-    }else{
-      wdSeries.push({ name: '供水温度', key: 'view005', color: '#00c6ff' });
-      wdSeries.push({ name: '回水温度', key: 'view006', color: '#ff6a00' });
-      ylSeries.push({ name: '供水压力', key: 'view007', color: '#00c6ff' });
-      ylSeries.push({ name: '回水压力', key: 'view008', color: '#ff6a00' });
-    }
-  }
 
-  if(record_.regionType == '郊县'){
-    records.sort((a: any, b: any) => {
-      const ta = new Date(a.view032 || a.datatime  || '').getTime();
-      const tb = new Date(b.view032 || b.datatime ||  '').getTime();
-      return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
-    });
-    wdSeries.push({ name: '供水温度', key: 'view035', color: '#00c6ff' });
-    wdSeries.push({ name: '回水温度', key: 'view036', color: '#ff6a00' });
+  records.sort((a: any, b: any) => new Date(a.datatime).getTime() - new Date(b.datatime).getTime());
+  if(record_.view004){
+    wdSeries.push({ name: '供水温度', key: 'view009', color: '#ff007f' });
+    wdSeries.push({ name: '回水温度', key: 'view010', color: '#6a5acd' });
+    ylSeries.push({ name: '供水压力', key: 'view011', color: '#ff007f' });
+    ylSeries.push({ name: '回水压力', key: 'view012', color: '#6a5acd' });
+  }else{
+    wdSeries.push({ name: '供水温度', key: 'view005', color: '#00c6ff' });
+    wdSeries.push({ name: '回水温度', key: 'view006', color: '#ff6a00' });
     ylSeries.push({ name: '供水压力', key: 'view007', color: '#00c6ff' });
     ylSeries.push({ name: '回水压力', key: 'view008', color: '#ff6a00' });
   }
@@ -146,8 +133,6 @@ function initChartsOptions(records: any[], record_: any) {
   pressOption = { ...baseOption, title: { text: '压力指标', left: 'center', top: 8, textStyle: { color: '#ffffff' } }, series: pressSeries };
 }
 
-
-
 let resizeAdded = false;
 function ensureResizeListener() {
   if (resizeAdded) return;
@@ -166,7 +151,7 @@ function init(record_: any) {
   const params = {
     pageNo: 1,
     pageSize: -1,
-    regionType: record_.regionType,
+    regionType: '城区',
     view001: record_.view001,
     view002: record_.view002,
     view004: record_.view004 || -1,
@@ -174,43 +159,22 @@ function init(record_: any) {
     endDate: formatDateTime(end),
   };
 
-  if(record_.regionType == '城区'){
-    list(params).then((res: any) => {
-      const records = (res && res.list) ? res.list : [];
-      headerText.value = buildHeader(records, record_);
-      initChartsOptions(records,record_);
-      nextTick(() => {
-        // 初始化温度图表（默认tab）
-        if (tempChartRef.value) {
-          tempChart = echarts.init(tempChartRef.value);
-          tempChart.setOption(tempOption);
-        }
-        ensureResizeListener();
-      });
-    }).catch(err => {
-      console.error(err);
-      createMessage.error('获取数据失败');
+  list(params).then((res: any) => {
+    const records = (res && res.list) ? res.list : [];
+    headerText.value = buildHeader(records, record_);
+    initChartsOptions(records,record_);
+    nextTick(() => {
+      // 初始化温度图表（默认tab）
+      if (tempChartRef.value) {
+        tempChart = echarts.init(tempChartRef.value);
+        tempChart.setOption(tempOption);
+      }
+      ensureResizeListener();
     });
-  }
-
-  if(record_.regionType == '郊县'){
-    jxlist(params).then((res: any) => {
-      const records = (res && res.list) ? res.list : [];
-      headerText.value = buildHeader(records, record_);
-      initChartsOptions(records,record_);
-      nextTick(() => {
-        // 初始化温度图表（默认tab）
-        if (tempChartRef.value) {
-          tempChart = echarts.init(tempChartRef.value);
-          tempChart.setOption(tempOption);
-        }
-        ensureResizeListener();
-      });
-    }).catch(err => {
-      console.error(err);
-      createMessage.error('获取数据失败');
-    });
-  }
+  }).catch(err => {
+    console.error(err);
+    createMessage.error('获取数据失败');
+  });
 
 }
 
diff --git a/src/views/screen/components/ZxtJX.vue b/src/views/screen/components/ZxtJX.vue
new file mode 100644
index 0000000..039ee9c
--- /dev/null
+++ b/src/views/screen/components/ZxtJX.vue
@@ -0,0 +1,357 @@
+<template>
+  <div>
+    <span class="close-btn2" @click="closeModal"><span style="color: white;">×</span></span>
+  </div>
+  <div class="wrap">
+    <!-- 页面顶部中间显示 公司/锅炉房/换热站 -->
+    <div class="title">{{ headerText }}</div>
+
+    <!-- Tabs -->
+    <a-tabs v-model:activeKey="activeTab" centered @change="onTabChange">
+      <a-tab-pane key="temp" tab="温度指标">
+        <div ref="tempChartRef" class="chart-box"></div>
+      </a-tab-pane>
+      <a-tab-pane key="press" tab="压力指标">
+        <div ref="pressChartRef" class="chart-box"></div>
+      </a-tab-pane>
+      <a-tab-pane key="heat" tab="热量指标">
+        <div ref="heatChartRef" class="chart-box"></div>
+      </a-tab-pane>
+      <a-tab-pane key="flow" tab="流量指标">
+        <div ref="flowChartRef" class="chart-box"></div>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineProps, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import { useMessage } from '/@/hooks/web/useMessage';
+import {jxlist} from '/@/views/heating/history/HeatanalysisHistory.api';
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({});
+const { createMessage } = useMessage();
+
+const activeTab = ref('temp'); // 默认进入温度指标 tab
+
+// 日期：近7天（含今天）
+const end = new Date();
+end.setHours(23, 59, 59, 999);
+const start = new Date(end);
+start.setDate(end.getDate() - 6);
+start.setHours(0, 0, 0, 0);
+
+const pad = (n: number) => String(n).padStart(2, '0');
+function formatDateTime(d: Date) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+const tempChartRef = ref<HTMLElement | null>(null);
+const pressChartRef = ref<HTMLElement | null>(null);
+const heatChartRef = ref<HTMLElement | null>(null);
+const flowChartRef = ref<HTMLElement | null>(null);
+let tempChart: echarts.ECharts | null = null;
+let pressChart: echarts.ECharts | null = null;
+let heatChart: echarts.ECharts | null = null;
+let flowChart: echarts.ECharts | null = null;
+let tempOption: any = null;
+let pressOption: any = null;
+let heatOption: any = null;
+let flowOption: any = null;
+const headerText = ref(''); // 页面顶部显示文本
+
+function safeNum(v: any) {
+  if (v === null || v === undefined || v === '') return null;
+  const n = Number(v);
+  return Number.isNaN(n) ? null : n;
+}
+
+function buildHeader(records: any[], record_: any) {
+  const r = (records && records.length > 0) ? records[0] : record_;
+
+  // 取出名称
+  const names = [r.view001Name, r.view002Name, r.view004Name].filter(v => v && v !== '');
+
+  // 用箭头连接
+  return names.join(' → ');
+}
+
+
+function initChartsOptions(records: any[], record_: any) {
+
+  let wdSeries = [];
+  let ylSeries = [];
+  let rlSeries = [];
+  let llSeries = [];
+
+  records.sort((a: any, b: any) => {
+    const ta = new Date(a.view032 || a.datatime  || '').getTime();
+    const tb = new Date(b.view032 || b.datatime ||  '').getTime();
+    return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
+  });
+  wdSeries.push({ name: '供水温度', key: 'view035', color: '#00c6ff' });
+  wdSeries.push({ name: '回水温度', key: 'view036', color: '#ff6a00' });
+  ylSeries.push({ name: '供水压力', key: 'view007', color: '#00c6ff' });
+  ylSeries.push({ name: '回水压力', key: 'view008', color: '#ff6a00' });
+  rlSeries.push({ name: '瞬时热量', key: 'view041', color: '#00c6ff' });
+  rlSeries.push({ name: '正累积热量', key: 'view042', color: '#ff6a00' });
+  llSeries.push({ name: '瞬时流量', key: 'view037', color: '#00c6ff' });
+  llSeries.push({ name: '正累积流量', key: 'view038', color: '#ff6a00' });
+
+  const xAxis = records.map((r: any) => r.datatime);
+
+  const tempSeries = wdSeries.map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    lineStyle: { width: 2 },  // 设置线条的宽度
+    itemStyle: {
+      color: s.color, // 设置折线的颜色
+    },
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  const pressSeries = ylSeries.map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    lineStyle: { width: 2 },  // 设置线条的宽度
+    itemStyle: {
+      color: s.color, // 设置折线的颜色
+    },
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  const heatSeries = rlSeries.map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    lineStyle: { width: 2 },  // 设置线条的宽度
+    itemStyle: {
+      color: s.color, // 设置折线的颜色
+    },
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  const flowSeries = llSeries.map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    lineStyle: { width: 2 },  // 设置线条的宽度
+    itemStyle: {
+      color: s.color, // 设置折线的颜色
+    },
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+
+
+  const baseOption = {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
+    legend: { top: 36, left: 'center', textStyle: { color: '#ffffff' } }, // 设置折线图legend文字为白色
+    grid: { left: '5%', right: '5%', bottom: 70, top: 70, containLabel: true },
+    xAxis: {
+      type: 'category',
+      data: xAxis,
+      boundaryGap: false,
+      axisLabel: {
+        interval: 0,
+        formatter: (val: string) => val.replace(' ', '\n'),
+        color: '#ffffff' // 设置x轴文字颜色为白色
+      },
+    },
+    yAxis: { type: 'value', scale: true, axisLabel: { color: '#ffffff' } }, // 设置y轴文字颜色为白色
+  };
+
+  tempOption = { ...baseOption, title: { text: '温度指标', left: 'center', top: 8, textStyle: { color: '#ffffff' } }, series: tempSeries };
+  pressOption = { ...baseOption, title: { text: '压力指标', left: 'center', top: 8, textStyle: { color: '#ffffff' } }, series: pressSeries };
+  heatOption  = { ...baseOption, title: { text: '热量指标', left: 'center', top: 8 , textStyle: { color: '#ffffff' } }, series: heatSeries };
+  flowOption  = { ...baseOption, title: { text: '流量指标', left: 'center', top: 8 , textStyle: { color: '#ffffff' } }, series: flowSeries };
+}
+
+
+
+let resizeAdded = false;
+function ensureResizeListener() {
+  if (resizeAdded) return;
+  const onResize = () => {
+    tempChart?.resize();
+    pressChart?.resize();
+    heatChart?.resize();
+    flowChart?.resize();
+  };
+  window.addEventListener('resize', onResize);
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
+  resizeAdded = true;
+}
+
+function init(record_: any) {
+  const params = {
+    pageNo: 1,
+    pageSize: -1,
+    regionType: '郊县',
+    view001: record_.view001,
+    view002: record_.view002,
+    startDate: formatDateTime(start),
+    endDate: formatDateTime(end),
+  };
+
+  jxlist(params).then((res: any) => {
+    const records = (res && res.list) ? res.list : [];
+    headerText.value = buildHeader(records, record_);
+    initChartsOptions(records,record_);
+    nextTick(() => {
+      // 初始化温度图表（默认tab）
+      if (tempChartRef.value) {
+        tempChart = echarts.init(tempChartRef.value);
+        tempChart.setOption(tempOption);
+      }
+      ensureResizeListener();
+    });
+  }).catch(err => {
+    console.error(err);
+    createMessage.error('获取数据失败');
+  });
+
+}
+
+// tab切换时，第一次进来才 init
+function onTabChange(key: string) {
+  nextTick(() => {
+    if (key === 'temp') {
+      if (!tempChart && tempChartRef.value) {
+        tempChart = echarts.init(tempChartRef.value);
+        tempChart.setOption(tempOption);
+      }
+      tempChart?.resize();
+    } else if (key === 'press') {
+      if (!pressChart && pressChartRef.value) {
+        pressChart = echarts.init(pressChartRef.value);
+        pressChart.setOption(pressOption);
+      }
+      pressChart?.resize();
+    } else if (key === 'heat') {
+      if (!heatChart && heatChartRef.value) {
+        heatChart = echarts.init(heatChartRef.value);
+        heatChart.setOption(heatOption);
+      }
+      heatChart?.resize();
+    } else if (key === 'flow') {
+      if (!flowChart && flowChartRef.value) {
+        flowChart = echarts.init(flowChartRef.value);
+        flowChart.setOption(flowOption);
+      }
+      flowChart?.resize();
+    }
+  });
+}
+
+function closeModal() {
+  emit('close')
+}
+
+defineExpose({ init });
+
+onUnmounted(() => {
+  if (tempChart) { tempChart.dispose(); tempChart = null; }
+  if (pressChart) { pressChart.dispose(); pressChart = null; }
+  if (heatChart) { heatChart.dispose(); heatChart = null; }
+  if (flowChart) { flowChart.dispose(); flowChart = null; }
+});
+</script>
+
+<style lang="less" scoped>
+.close-btn2 {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  float: right;
+  color: white;
+  cursor: pointer;
+  z-index: 299;
+}
+
+.wrap {
+  width: 100%;
+  margin: 0 auto;
+  background: linear-gradient(135deg, rgba(20, 35, 55, 0.85), rgba(0, 20, 40, 0.7));
+  /* 渐变背景色 */
+  padding: 20px;
+  border-radius: 15px;
+  /* 增加圆角 */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  /* 添加阴影 */
+  backdrop-filter: blur(10px);
+  /* 背景模糊效果 */
+}
+
+.title {
+  text-align: center;
+  font-size: 24px;
+  font-weight: 700;
+  margin: 20px 0;
+  color: #ffffff;
+  background: linear-gradient(135deg, #66d9ff, #ff8c00);
+  /* 渐变文字 */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
+  /* 增加文字的荧光效果 */
+}
+
+.chart-box {
+  width: 100%;
+  height: 60vh;
+  background-color: rgba(0, 0, 0, 0.3);
+  /* 深色背景让图表突出 */
+  border-radius: 12px;
+  /* 圆角效果 */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  /* 给图表增加阴影 */
+  overflow: hidden;
+}
+
+a-tabs {
+  background-color: rgba(0, 0, 0, 0.5);
+  /* Tab 背景色 */
+  border-radius: 8px;
+}
+
+a-tab-pane {
+  background-color: rgba(255, 255, 255, 0.836);
+  /* Tab 选项卡背景 */
+  border-radius: 8px;
+}
+
+a-tab-pane .ant-tabs-tab {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  /* 确保未选中的 Tab 文字为白色 */
+  padding: 10px 20px;
+}
+
+a-tab-pane .ant-tabs-tab-active {
+  background-color: #ff8c00;
+  /* 激活的Tab颜色 */
+  color: #ffffff;
+}
+
+a-tab-pane .ant-tabs-tab:hover {
+  color: #ffffff;
+  /* hover时也为白色 */
+}
+
+:deep .ant-tabs-tab-btn {
+  color: white;
+}
+</style>
diff --git a/src/views/staticList/GlfghsList.vue b/src/views/staticList/GlfghsList.vue
index fbd2105..a5d0987 100644
--- a/src/views/staticList/GlfghsList.vue
+++ b/src/views/staticList/GlfghsList.vue
@@ -53,7 +53,7 @@ function prepareOptions(records: any[]) {
     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 } },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
     yAxis: { type: 'value', name: '℃' },
     series: [
       { name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
diff --git a/src/views/staticList/GlfghsListHistory.vue b/src/views/staticList/GlfghsListHistory.vue
index d83488a..9dd5f9b 100644
--- a/src/views/staticList/GlfghsListHistory.vue
+++ b/src/views/staticList/GlfghsListHistory.vue
@@ -79,7 +79,7 @@ function prepareOptions(records: any[]) {
     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 } },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
     yAxis: { type: 'value', name: '℃' },
     series: [
       { name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
diff --git a/src/views/staticList/GlfghsjxList.vue b/src/views/staticList/GlfghsjxList.vue
index e84197f..80faba4 100644
--- a/src/views/staticList/GlfghsjxList.vue
+++ b/src/views/staticList/GlfghsjxList.vue
@@ -46,14 +46,14 @@ function prepareOptions(records: any[]) {
 
   const cityX = buildXAxis(city, 'view028');
   console.log("🚀 ~ prepareOptions ~ cityX:", cityX)
-  const citySW = city.map((r: any) => safeNum(r.view005));
-  const cityHW = city.map((r: any) => safeNum(r.view006));
+  const citySW = city.map((r: any) => safeNum(r.view035));
+  const cityHW = city.map((r: any) => safeNum(r.view036));
   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 } },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
     yAxis: { type: 'value', name: '℃' },
     series: [
       { name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
diff --git a/src/views/staticList/GlfghsjxListHistory.vue b/src/views/staticList/GlfghsjxListHistory.vue
index a579a4e..88f8f65 100644
--- a/src/views/staticList/GlfghsjxListHistory.vue
+++ b/src/views/staticList/GlfghsjxListHistory.vue
@@ -79,7 +79,7 @@ function prepareOptions(records: any[]) {
     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 } },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
     yAxis: { type: 'value', name: '℃' },
     series: [
       { name: '供水温度', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
diff --git a/src/views/staticList/GlfrlljxList.vue b/src/views/staticList/GlfrlljxList.vue
index 59d3511..abc5019 100644
--- a/src/views/staticList/GlfrlljxList.vue
+++ b/src/views/staticList/GlfrlljxList.vue
@@ -52,8 +52,8 @@ function prepareOptions(records: any[]) {
     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: 'Kj' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
+    yAxis: { type: 'value', name: 'kw' },
     series: [
       { name: '热流量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
     ],
diff --git a/src/views/staticList/GlfrlljxListHistory.vue b/src/views/staticList/GlfrlljxListHistory.vue
index ec971fa..a4353f7 100644
--- a/src/views/staticList/GlfrlljxListHistory.vue
+++ b/src/views/staticList/GlfrlljxListHistory.vue
@@ -78,8 +78,8 @@ function prepareOptions(records: any[]) {
     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: 'Kj' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
+    yAxis: { type: 'value', name: 'kw' },
     series: [
       { name: '热流量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
     ],
diff --git a/src/views/staticList/GlfslljxList.vue b/src/views/staticList/GlfslljxList.vue
index 3df34d1..fe878c4 100644
--- a/src/views/staticList/GlfslljxList.vue
+++ b/src/views/staticList/GlfslljxList.vue
@@ -52,8 +52,8 @@ function prepareOptions(records: any[]) {
     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: 'm³/s' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
+    yAxis: { type: 'value', name: 'm³/h' },
     series: [
       { name: '水流量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
     ],
diff --git a/src/views/staticList/GlfslljxListHistory.vue b/src/views/staticList/GlfslljxListHistory.vue
index 9461d88..e1baac4 100644
--- a/src/views/staticList/GlfslljxListHistory.vue
+++ b/src/views/staticList/GlfslljxListHistory.vue
@@ -78,8 +78,8 @@ function prepareOptions(records: any[]) {
     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: 'm³/s' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
+    yAxis: { type: 'value', name: 'm³/h' },
     series: [
       { name: '水流量', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
     ],
diff --git a/src/views/staticList/GlfylList.vue b/src/views/staticList/GlfylList.vue
index 8f5b48b..ab34125 100644
--- a/src/views/staticList/GlfylList.vue
+++ b/src/views/staticList/GlfylList.vue
@@ -53,8 +53,8 @@ function prepareOptions(records: any[]) {
     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: 'Pa' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
+    yAxis: { type: 'value', name: 'MPa' },
     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' } }
diff --git a/src/views/staticList/GlfylListHistory.vue b/src/views/staticList/GlfylListHistory.vue
index 8125719..16852d4 100644
--- a/src/views/staticList/GlfylListHistory.vue
+++ b/src/views/staticList/GlfylListHistory.vue
@@ -79,8 +79,8 @@ function prepareOptions(records: any[]) {
     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: 'Pa' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 ,formatter: (val: string) => val.replace(' ', '\n')} },
+    yAxis: { type: 'value', name: 'MPa' },
     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' } }
diff --git a/src/views/staticList/GlfyljxList.vue b/src/views/staticList/GlfyljxList.vue
index 447a325..ff1b81e 100644
--- a/src/views/staticList/GlfyljxList.vue
+++ b/src/views/staticList/GlfyljxList.vue
@@ -53,8 +53,8 @@ function prepareOptions(records: any[]) {
     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: 'Pa' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
+    yAxis: { type: 'value', name: 'MPa' },
     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' } }
diff --git a/src/views/staticList/GlfyljxListHistory.vue b/src/views/staticList/GlfyljxListHistory.vue
index ba56fde..3a66c53 100644
--- a/src/views/staticList/GlfyljxListHistory.vue
+++ b/src/views/staticList/GlfyljxListHistory.vue
@@ -79,8 +79,8 @@ function prepareOptions(records: any[]) {
     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: 'Pa' },
+    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0,formatter: (val: string) => val.replace(' ', '\n') } },
+    yAxis: { type: 'value', name: 'MPa' },
     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' } }