diff --git a/src/views/screen/Dashboard.vue b/src/views/screen/Dashboard.vue
index 5cbd156..a92dcb6 100644
--- a/src/views/screen/Dashboard.vue
+++ b/src/views/screen/Dashboard.vue
@@ -10,7 +10,7 @@
     <div class="bottom">
       <!-- 左侧 -->
       <div class="left">
-        <!-- 模板（只展示被改动的 area-3 部分，其他不变） -->
+        <!-- area-3 柱状图 -->
         <div class="area1 areabg area-3">
           <div class="area-header">
             <div class="header-left">
@@ -23,9 +23,11 @@
             </div>
           </div>
           <div class="area-body">
-              <div id="main" style="width: 100%; height: 100%;"></div>
+            <div id="main" style="width: 100%; height: 100%;"></div>
           </div>
         </div>
+
+        <!-- area-4 折线图 -->
         <div class="area2 areabg area-4">
           <div class="area-header">
             <div class="header-left">
@@ -37,26 +39,53 @@
               <div>回水</div>
             </div>
           </div>
-          <div class=" area-body">
+          <div class="area-body">
+            <div id="lineChart" style="width: 100%; height: 100%;"></div>
+          </div>
+        </div>
+
+        <div class="area3 areabg area-9">
+          <div class="area-body list-container">
+            <!-- 标题行 -->
+            <div class="list-header">
+              <img src="./dashboard/dp_icon4.png" class="left-icon" />
+              <span>锅炉房名称</span>
+              <span>换热站名称</span>
+              <span>二次网供水</span>
+              <span>二次网回水</span>
+              <span>二次网供压</span>
+              <span>二次网回压</span>
+              <img src="./dashboard/dp_icon4.png" class="right-icon" />
+            </div>
+            <!-- 内容行滚动区域 -->
+            <div class="list-body">
+              <div v-for="item in z" :key="item.view028" class="list-row">
+                <span>{{ item.view028 }}</span>
+                <span>{{ item.view030 }}</span>
+                <span>{{ item.view035 }}</span>
+                <span>{{ item.view036 }}</span>
+                <span>{{ item.view007 }}</span>
+                <span>{{ item.view008 }}</span>
+              </div>
+            </div>
           </div>
         </div>
-        <div class="area3 areabg area-9">列表</div>
       </div>
 
-      <!-- 右侧 -->
+      <!-- 右侧保持不变 -->
       <div class="right">
         <div class="area area-5">
-          <div class="left-img">
+          <div class="left-img" style="cursor: pointer;" @click="openModal(0, '城区锅炉房')">
             <img src="./dashboard/dp_icon1.png" />
           </div>
-          <div class="right-text">
+          <div class="right-text" style="cursor: pointer;" @click="openModal(0, '城区锅炉房')">
             <div class="top-text-1">{{ cqglfsl }}</div>
             <div class="bottom-text-1">城区锅炉房总数</div>
           </div>
-          <div class="left-img">
+          <div class="left-img" style="cursor: pointer;" @click="openModal(1, '城区换热站')">
             <img src="./dashboard/dp_21.png" />
           </div>
-          <div class="right-text">
+          <div class="right-text" style="cursor: pointer;" @click="openModal(1, '城区换热站')">
             <div class="top-text-2">{{ cqhrzsl }}</div>
             <div class="bottom-text-2">城区换热站总数</div>
           </div>
@@ -67,10 +96,10 @@
             <div class="top-text-3">{{ jxglfsl }}</div>
             <div class="bottom-text-3">郊县总数</div>
           </div>
-          <div class="left-img">
+          <div class="left-img" style="cursor: pointer;" @click="openModal(2, '郊县锅炉房')">
             <img src="./dashboard/dp_icon1.png" />
           </div>
-          <div class="right-text">
+          <div class="right-text" style="cursor: pointer;" @click="openModal(2, '郊县锅炉房')">
             <div class="top-text-4">{{ jxsl }}</div>
             <div class="bottom-text-4">郊县锅炉房总数</div>
           </div>
@@ -83,8 +112,7 @@
                 <span class="header-left-text">郊县瞬时热量【实时】</span>
               </div>
             </div>
-            <div class=" area-body">
-            </div>
+            <div class="area-body"></div>
           </div>
           <div class="area areabg area-7">
             <div class="area-header">
@@ -93,8 +121,7 @@
                 <span class="header-left-text">郊县瞬时流量【实时】</span>
               </div>
             </div>
-            <div class=" area-body">
-            </div>
+            <div class=" area-body"></div>
           </div>
         </div>
         <div class="area areabg area-8">
@@ -104,21 +131,79 @@
               <span class="header-left-text">郊县供回水温度【实时】</span>
             </div>
           </div>
-          <div class=" area-body">
+          <div class=" area-body"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div v-if="modalVisible" class="modal-overlay" @click.self="closeModal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <span>{{ modalTitle }}</span>
+          <span class="close-btn" @click="closeModal">×</span>
+        </div>
+        <div class="modal-body list-container">
+          <div class="list-header" style="color: #81c7e6;">
+            <img src="./dashboard/dp_icon4.png" class="left-icon" />
+            <span>锅炉房名称</span>
+            <span v-show="modalType == 1">换热站名称</span>
+            <span>{{ modalType == 1 ? '二' : '一' }}次网供水</span>
+            <span>{{ modalType == 1 ? '二' : '一' }}次网回水</span>
+            <span>{{ modalType == 1 ? '二' : '一' }}次网供压</span>
+            <span>{{ modalType == 1 ? '二' : '一' }}次网回压</span>
+            <span>操作</span>
+            <img src="./dashboard/dp_icon4.png" class="right-icon" />
+          </div>
+          <div class="list-body">
+            <div v-if="!!modalData.length" v-for="item in modalData" :key="item.view028" class="list-row"
+              style="color: #81c7e6;">
+              <span>{{ item.view028 }}</span>
+              <span v-show="modalType == 1">{{ item.view030 }}</span>
+              <span>{{ item.view035 }}</span>
+              <span>{{ item.view036 }}</span>
+              <span>{{ item.view007 }}</span>
+              <span>{{ item.view008 }}</span>
+              <span><a-button type="link"><span style="color: white;"
+                    @click="detailFunc(item)">详情</span></a-button></span>
+            </div>
+            <div v-else class="list-row">
+              <span>暂无数据</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div v-if="modalVisible2" class="modal-overlay2" @click.self="closeModal2">
+      <div class="modal-content2">
+        <ZxtCQ ref="registerModal" @close="closeModal2" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, nextTick,onBeforeUnmount } from 'vue';
-import { slcx, cqglfgswd } from '/@/api/dashboard/api';
+import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick } from 'vue';
+import { slcx, cqglfgswd, glfzb } from '/@/api/dashboard/api';
 import * as echarts from 'echarts';
 import aImg from './dashboard/c.png';
+import lqImg from './dashboard/lq.png';
+import ljt from './dashboard/ljt.png';
+import ZxtCQ from './components/ZxtCQ.vue'
 
-let myChart: echarts.ECharts | null = null;
+const registerModal = ref();
+
+const modalVisible = ref(false);
+const modalVisible2 = ref(false)
+const modalTitle = ref('');
+const modalData = ref<any[]>([]);
+
+let chartMain: echarts.ECharts | null = null;  // 区域 main
+let chartLine: echarts.ECharts | null = null;  // 区域 line
+let chartCounty: echarts.ECharts | null = null; // area-6
+let chartRadar: echarts.ECharts | null = null; // area-7 雷达图
+let chartArea8: echarts.ECharts | null = null;
 
 const currentTime = ref(new Date().toLocaleString());
 
@@ -128,128 +213,547 @@ const cqglfsl = ref(0)
 const cqhrzsl = ref(0)
 const jxglfsl = ref(0)
 const jxsl = ref(0)
-async function loadData() {
-  try {
-    const s = await slcx();
-    cqglfsl.value = s.cqglfsl || 0
-    cqhrzsl.value = s.cqhrzsl || 0
-    jxglfsl.value = s.jxglfsl || 0
-    jxsl.value = s.jxsl || 0
-    console.log("🌊 ~ loadData ~ s:", s)
-    const r = await cqglfgswd();
-    console.log("🌊 ~ loadData ~ r:", r)
-  } catch (e) {
+const jbztys = ref('#59accf')
+const jbzbzys = ref('rgba(27, 147, 191, 0.3)')
 
-  }
+const cityList = ref<{ name: string; value: number; raw: any }[]>([]);
+const countyList = ref<{ name: string; value: number; raw: any }[]>([]);
+
+const cityHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
+const countyHrzList = ref<{ name: string; value: number; raw: any }[]>([]);
+
+// 区域 main 柱状图
+function updateChartMain() {
+  if (!chartMain) return;
+  const names = cityList.value.map(i => i.name);
+  const values = cityList.value.map(i => i.value);
+  const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
+
+  chartMain.setOption({
+    grid: { left: 10, right: 0, bottom: 14, top: 28, containLabel: true },
+    tooltip: {
+      trigger: 'axis', backgroundColor: 'transparent', extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+      formatter: function (params) {
+        var content = '<div style="'
+          + 'position:relative;'
+          + 'border-left:2px solid #cccccc46;' // 淡蓝色左边框
+          + 'border-right:2px solid #cccccc46;' // 淡蓝色右边框
+          + 'border-radius: 5px;' // 5. 增加radius 5px
+          + 'background:linear-gradient(to right bottom, #08101D, #1a3b70);' // 渐变背景色
+          + 'color:#ffffff;' // 字体颜色
+          + 'padding:5px 10px;'
+          + 'margin-left: 10px;' // 2. 固定显示在鼠标右侧（别太近）
+          + 'z-index: 99;' // 3. 现在会被其他容器挡住 - 提高z-index确保它在最上层
+          + 'text-align:center;'
+          + '">'
+          + '<div style="'
+          + 'position:absolute;'
+          + 'top:0;left:0;right:0;height:2px;'
+          + 'background:linear-gradient(to right, #cccccc46, #ececec7c, #cccccc46);'
+          + 'background-position:right;'
+          + '"></div>' // 上边框渐变
+          + '<div style="'
+          + 'position:absolute;'
+          + 'bottom:0;left:0;right:0;height:2px;'
+          + 'background:linear-gradient(to right, #cccccc46, #ececec7c, #cccccc46);'
+          + 'background-position:left;'
+          + '"></div>' // 下边框渐变
+          + params[0].name + '锅炉房<br/>供水温度: ' + params[1].value + '</div>';
+        return content;
+      },
+    },
+    xAxis: { type: 'category', data: names, axisLabel: { rotate: 35, interval: 0, color: jbztys.value }, axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: jbzbzys.value } } },
+    yAxis: { type: 'value', axisLabel: { color: jbztys.value, margin: 8 }, axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: jbzbzys.value } }, splitLine: { show: false } },
+    series: [
+      { type: 'bar', barWidth: '15px', data: names.map(() => maxVal), barGap: '-100%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] } }, z: 1, silent: true },
+      { type: 'bar', barWidth: '15px', data: values, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#e8a929' }, { offset: 1, color: '#27a3d5' }] }, opacity: 0.95 }, z: 2 },
+      { type: 'pictorialBar', symbol: `image://${aImg}`, symbolSize: [15, 15], symbolOffset: [0, -10], symbolPosition: 'end', data: values, z: 3, silent: true }
+    ]
+  }, true);
 }
 
+// 区域 line 折线图
+function updateChartLine() {
+  if (!chartLine) return;
+  const names = cityList.value.map(i => i.name);
+  const values = cityList.value.map(i => (i.raw?.view006 ? Number(i.raw.view006) : 0));
 
-onMounted(() => {
-  timer = setInterval(() => {
-    currentTime.value = new Date().toLocaleString();
-  }, 1000);
-
-  window.addEventListener('resize', adjustHeight);
-  nextTick(adjustHeight);
-
-  loadData();
-  dataTimer = window.setInterval(() => {
-    loadData();
-  }, 5 * 60 * 1000);
-
-
-   const chartDom = document.getElementById("main") as HTMLElement;
-  myChart = echarts.init(chartDom);
-
-  const option: echarts.EChartsOption = {
-    xAxis: {
-      type: "category",
-      data: [
-        "恒大锅炉房", "恒大锅炉房", "恒大锅炉房", "恒大锅炉房", "恒大锅炉房",
-        "恒大锅炉房", "恒大锅炉房", "恒大锅炉房", "恒大锅炉房", "恒大锅炉房",
-        "恒大锅炉房", "恒大锅炉房", "恒大锅炉房", "恒大锅炉房", "恒大锅炉房",
-        "恒大锅炉房", "恒大锅炉房", "恒大锅炉房"
-      ],
-      axisLabel: {
-        rotate: 35,
-        interval: 0
+  chartLine.setOption({
+    grid: { left: 10, right: 0, bottom: 14, top: 28, containLabel: true },
+    tooltip: {
+      trigger: 'axis', backgroundColor: 'transparent', extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+      formatter: function (params) {
+        var content = '<div style="'
+          + 'position:relative;'
+          + 'border-left:2px solid #cccccc46;' // 淡蓝色左边框
+          + 'border-right:2px solid #cccccc46;' // 淡蓝色右边框
+          + 'border-radius: 5px;' // 5. 增加radius 5px
+          + 'background:linear-gradient(to right bottom, #08101D, #1a3b70);' // 渐变背景色
+          + 'color:#ffffff;' // 字体颜色
+          + 'padding:5px 10px;'
+          + 'margin-left: 10px;' // 2. 固定显示在鼠标右侧（别太近）
+          + 'z-index: 99;' // 3. 现在会被其他容器挡住 - 提高z-index确保它在最上层
+          + 'text-align:center;'
+          + '">'
+          + '<div style="'
+          + 'position:absolute;'
+          + 'top:0;left:0;right:0;height:2px;'
+          + 'background:linear-gradient(to right, #cccccc46, #ececec7c, #cccccc46);'
+          + 'background-position:right;'
+          + '"></div>' // 上边框渐变
+          + '<div style="'
+          + 'position:absolute;'
+          + 'bottom:0;left:0;right:0;height:2px;'
+          + 'background:linear-gradient(to right, #cccccc46, #ececec7c, #cccccc46);'
+          + 'background-position:left;'
+          + '"></div>' // 下边框渐变
+          + params[0].name + '锅炉房</br>' + (params[0].seriesName || '') + ': ' + params[0].value
+          + '</div>';
+        return content;
       }
     },
+    xAxis: {
+      type: 'category',
+      data: names,
+      axisLabel: { rotate: 35, interval: 0, color: jbztys.value },
+      axisTick: { show: false },
+      axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
+      splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } }
+    },
+    yAxis: { type: 'value', axisLabel: { color: jbztys.value, margin: 8 }, axisTick: { show: false }, axisLine: { show: true, lineStyle: { color: jbzbzys.value } }, splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } }, splitNumber: 3 },
+    series: [{ name: '回水温度', type: 'line', data: values, symbol: 'none', lineStyle: { width: 3, color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'white' }, { offset: 0.2, color: '#009BFF' }, { offset: 0.4, color: '#49B0FF' }, { offset: 0.6, color: 'white' }, { offset: 0.8, color: '#009BFF' }, { offset: 1, color: '#49B0FF' }] } }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(123,138,153,0.8)' }, { offset: 0.9, color: 'rgba(24,53,79,0.2)' }, { offset: 1, color: 'rgba(24,53,79,0)' }] } } }]
+  }, true);
+}
+
+// area-6 郊县柱状图
+function updateChartCounty() {
+  if (!chartCounty) return;
+
+  const names = countyList.value.map(i => i.raw?.view028 ?? '未知');
+  const values = countyList.value.map(i => (i.raw?.view041 ? Number(i.raw.view041) : 0));
+  const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
+
+  chartCounty.setOption({
+    grid: { left: 10, right: 40, bottom: 14, top: 28, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        shadowStyle: {
+          color: 'transparent' // 设置为透明，取消悬浮背景
+        }
+      },
+      backgroundColor: 'transparent',
+      extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+      formatter: function (params) {
+        var content = '<div style="position:relative;border-left:2px solid #cccccc46;border-right:2px solid #cccccc46;border-radius:5px;background:linear-gradient(to right bottom,#08101D,#1a3b70);color:#ffffff;padding:5px 10px;margin-left:10px;z-index:99;text-align:center;">'
+          + '<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
+          + '<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
+          + params[0].name + '</br>瞬时热量:' + params[1].value
+          + '</div>';
+        return content;
+      }
+    },
+    xAxis: {
+      type: 'value',
+      axisLabel: { show: false },
+      axisLine: { lineStyle: { color: jbzbzys.value } },
+      splitLine: { show: false },
+      axisTick: { show: false },
+    },
     yAxis: {
-      type: "value"
+      type: 'category',
+      data: names,
+      axisLabel: { color: jbztys.value, interval: 0 },
+      axisTick: { show: false },
+      axisLine: { show: false }
+    },
+    series: [
+      // 背景条
+      { type: 'bar', barWidth: 3, data: names.map(() => maxVal), barGap: '-100%', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: 'rgba(106,211,255,0.06)' }, { offset: 1, color: 'rgba(106,211,255,0.01)' }] } }, z: 1, silent: true },
+      // 主体条
+      { type: 'bar', barWidth: 4, data: values, itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: '#ECA924' }, { offset: 1, color: '#0D9FD8' }] }, opacity: 0.95 }, z: 2 },
+      // 顶部小图片
+      { type: 'pictorialBar', symbol: `image://${lqImg}`, symbolSize: [25, 25], symbolOffset: [10, 0], symbolPosition: 'end', data: values, z: 3, silent: true },
+
+      {
+        type: 'bar',
+        barWidth: 4,
+        data: values.map(() => maxVal),
+        itemStyle: { color: 'transparent' }, // 透明柱子
+        label: {
+          show: true,
+          position: 'right',
+          distance: 0,
+          align: 'left',
+          color: '#ffffff',
+          formatter: (params: any) => `{icon|} ${values[params.dataIndex]}`, // 数值左边加图标
+          rich: {
+            icon: {
+              height: 14,           // 图标高度
+              align: 'center',
+              backgroundColor: {
+                image: ljt      // 使用导入的图片变量
+              }
+            }
+          }
+        },
+        z: 4,
+        silent: true
+      }
+
+    ],
+  }, true);
+}
+// area-7 的雷达图更新函数
+function updateRadarChart() {
+  if (!chartRadar) return;
+  const names = countyList.value.map(i => i.raw?.view028 ?? '未知');
+  const values = countyList.value.map(i => (i.raw?.view037 ? Number(i.raw.view037) : 0));
+  const maxVal = values.length ? Math.max(...values) * 1.15 : 100;
+
+  chartRadar.setOption({
+    grid: { left: 10, right: 40, bottom: 14, top: 0, containLabel: true },
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'transparent',
+      extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+      formatter: function (params) {
+        const values = Array.isArray(params.value) ? params.value : [params.value];
+        let content1 = `${params.name}<br/>`;
+        values.forEach((val, i) => {
+          content1 += `${names[i]}: ${val}<br/>`;
+        });
+        var content = '<div style="position:relative;border-left:2px solid #cccccc46;border-right:2px solid #cccccc46;border-radius:5px;background:linear-gradient(to right bottom,#08101D,#1a3b70);color:#ffffff;padding:5px 10px;margin-left:10px;z-index:99;text-align:center;">'
+          + '<div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
+          + '<div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>'
+          + content1
+          + '</div>';
+        return content;
+      }
+    },
+    legend: {
+      data: ['瞬时流量'],
+      textStyle: { color: '#f4f4f4' },
+      bottom: 10
+    },
+    radar: {
+      shape: 'polygon',
+      indicator: names.map(name => ({ name, max: maxVal })),
+      splitNumber: 0,
+      center: ['50%', '45%'],
+      radius: '57%',
+      name: {
+        textStyle: {
+          color: '#f4f4f4',
+          fontSize: 12,
+          borderRadius: 3,
+          padding: [3, 5]
+        }
+      },
+      splitLine: { lineStyle: { color: 'rgba(50,150,200,0.3)' } },
+      splitArea: { show: true, areaStyle: { color: ['rgba(15,40,70,0.5)', 'rgba(20,50,80,0.3)'] } },
+      axisLine: { lineStyle: { color: 'rgba(100,200,255,0.5)' } }
+    },
+    series: [{
+      name: '瞬时流量',
+      type: 'radar',
+      lineStyle: { width: 3, color: '#00e4ff' },
+      areaStyle: {
+        color: {
+          type: 'radial',    // 径向渐变
+          x: 0.5,            // 渐变中心 x（0~1）
+          y: 0.5,            // 渐变中心 y（0~1）
+          r: 0.5,            // 渐变半径
+          colorStops: [
+            { offset: 0, color: 'rgba(9,147,149,0.0)' },  // 中心颜色
+            { offset: 0.4, color: 'rgba(9,147,149,0.2)' }, // 中间颜色
+            { offset: 0.7, color: 'rgba(9,147,149,0.6)' }, // 中间颜色
+            { offset: 1, color: 'rgba(9,147,149,0.8)' }      // 外圈透明
+          ]
+        }
+      }
+      ,
+      itemStyle: { color: 'rgba(  0,255,255, 0.8)' },
+      data: [{ value: values, name: '瞬时流量', symbol: 'none', symbolSize: 6, lineStyle: { width: 2, color: 'rgba(9,147,149, 0.8)' } }]
+    }],
+  }, true);
+}
+
+// area-8 折线图更新函数
+function updateChartArea8() {
+  if (!chartArea8) return;
+
+  const names = countyList.value.map(i => i.raw?.view028.replace('锅炉房', '') ?? '未知');
+  const supplyData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view035) : Number(i.raw.view005));
+  const returnData = countyList.value.map(i => i.raw?.fromFlow == 1 ? Number(i.raw.view036) : Number(i.raw.view006));
+
+  const maxVal = Math.max(...supplyData.concat(returnData)) * 1.15 || 100;
+
+  chartArea8.setOption({
+    grid: { left: 30, right: 40, bottom: 14, top: 30, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'transparent',
+      extraCssText: `border:none;box-shadow:none;padding:0;margin:0;pointer-events:none;`,
+      formatter: function (params) {
+        const p = params[0];
+        const content = `<div style="
+        position:relative;
+        border-left:2px solid #cccccc46;
+        border-right:2px solid #cccccc46;
+        border-radius:5px;
+        background:linear-gradient(to right bottom, #08101D, #1a3b70);
+        color:#ffffff;
+        padding:5px 10px;
+        margin-left:10px;
+        z-index:99;
+        text-align:center;">
+          <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
+          <div style="position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(to right,#cccccc46,#ececec7c,#cccccc46);"></div>
+          ${params[0].name}<br/>
+          供水: ${supplyData[p.dataIndex]}<br/>
+          回水: ${returnData[p.dataIndex]}
+        </div>`;
+        return content;
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: names,
+      axisLabel: { rotate: 0, interval: 0, color: jbztys.value },
+      axisLine: { lineStyle: { color: jbzbzys.value } },
+      axisTick: { show: false },
+      splitLine: { show: false }
+    },
+    yAxis: {
+      type: 'value',
+      name: '温度℃',             // 标题
+      nameLocation: 'end',       // 放在轴末端
+      nameTextStyle: {            // 标题样式
+        color: '#ffffff',         // 白色
+        align: 'right',            // 靠左对齐
+        verticalAlign: 'bottom',  // 垂直对齐
+        fontSize: 11
+      },
+      nameGap: 15,
+      axisLabel: {
+        color: jbztys.value,
+        margin: 8,
+        formatter: '{value}'   // 显示温度单位
+      },
+      axisLine: { show: true, lineStyle: { color: jbzbzys.value } },
+      axisTick: { show: false },
+      splitLine: { show: true, lineStyle: { type: [8, 2], color: '#66666655' } },
     },
     series: [
       {
-        type: "bar",
-        barWidth:'15px',
-        data: [120,200,150,80,70,110,120,200,150,80,70,110,120,200,150,80,70,110],
+        name: '供水',
+        type: 'line',
+        smooth: true,
+        data: supplyData,
+        areaStyle: { opacity: 0.4 },
         itemStyle: {
           color: {
-            type: "linear",
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
             colorStops: [
-              { offset: 0, color: "#e8a929" },
-              { offset: 1, color: "#27a3d5" }
+              { offset: 0, color: '#e8a929' },
+              { offset: 1, color: '#27a3d5' }
             ]
           },
           opacity: 0.8
-        }
+        },
+        label: { show: false }  // 关闭折线上数值显示
       },
       {
-        type: "pictorialBar",
-        symbol: `image://${aImg}`, 
-        symbolSize: [15, 15],
-        symbolOffset: [0, -10],
-        symbolPosition: "end",
-        data: [120,200,150,80,70,110,120,200,150,80,70,110,120,200,150,80,70,110],
-        z: 3
+        name: '回水',
+        type: 'line',
+        smooth: true,
+        data: returnData,
+        areaStyle: { opacity: 0.4 },
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 0, y2: 1,
+            colorStops: [
+              { offset: 0, color: '#ff7e5f' },
+              { offset: 1, color: '#feb47b' }
+            ]
+          },
+          opacity: 0.8
+        },
+        label: { show: false }  // 关闭折线上数值显示
       }
     ]
-  };
+  }, true);
 
-  myChart.setOption(option);
+}
+const z = ref<any[]>([]);
+
+async function loadData() {
+  try {
+    const s = await slcx();
+    cqglfsl.value = s.cqglfsl || 0;
+    cqhrzsl.value = s.cqhrzsl || 0;
+    jxglfsl.value = s.jxglfsl || 0;
+    jxsl.value = s.jxsl || 0;
+
+    const r = await cqglfgswd();
+    let z_ = await glfzb();
+
+    z.value = z_.data.map(it => ({
+      view028: it.view028 ?? '',
+      view030: it.view030 ?? '',
+      view035: it.view035 ?? '',
+      view036: it.view036 ?? '',
+      view007: it.view007 ?? '',
+      view008: it.view008 ?? ''
+    }));
+
+
+    const arr = (r && r.data) ? r.data : [];
+    const cities: { name: string; value: number; raw: any }[] = [];
+    const countys: { name: string; value: number; raw: any }[] = [];
+
+    arr.forEach((it: any) => {
+      const rawName = (it.view028 ?? '') + '';
+      const name = rawName.replace(/锅炉房/g, '').trim();
+      const val = Number(it.view005 ?? 0) || 0;
+      const node = { name: name || (it.view027 ?? '未知'), value: val, raw: it };
+      if ((it.regionType + '') === '城区') cities.push(node); else countys.push(node);
+    });
+
+    cityList.value = cities;
+    countyList.value = countys;
+    // 
+    const arr2 = (z_ && z_.data) ? z_.data : [];
+    const cities2: { name: string; value: number; raw: any }[] = [];
+    const countys2: { name: string; value: number; raw: any }[] = [];
+
+    arr2.forEach((it: any) => {
+      const rawName = (it.view028 ?? '') + '';
+      const name = rawName.replace(/锅炉房/g, '').trim();
+      const val = Number(it.view005 ?? 0) || 0;
+      const node = { name: name || (it.view027 ?? '未知'), value: val, raw: it };
+      if ((it.regionType + '') === '城区') cities2.push(node); else countys2.push(node);
+    });
+
+    cityHrzList.value = cities2;
+    countyHrzList.value = countys2;
+
+    updateChartMain();
+    updateChartLine();
+    updateChartCounty();
+    updateRadarChart();
+    updateChartArea8();
+  } catch (e) { console.error(e); }
+}
+
+// 监听全屏变化
+const handleFullScreenChange = () => {
+  console.log(123)
+  window.location.reload();
+};
+
+onMounted(() => {
+  timer = setInterval(() => { currentTime.value = new Date().toLocaleString(); }, 1000);
+
+  const chartDom1 = document.getElementById("main") as HTMLElement;
+  const chartDom2 = document.getElementById("lineChart") as HTMLElement;
+  const chartDom3 = document.querySelector(".area-6 .area-body") as HTMLElement;
+  const radarDom = document.querySelector('.area-7 .area-body') as HTMLElement;
+  const area8Dom = document.querySelector('.area-8 .area-body') as HTMLElement;
+
+  chartMain = echarts.init(chartDom1);
+  chartLine = echarts.init(chartDom2);
+  chartCounty = echarts.init(chartDom3);
+  chartRadar = echarts.init(radarDom);
+  chartArea8 = echarts.init(area8Dom);
+
+  updateChartMain();
+  updateChartLine();
+  updateChartCounty();
+  updateChartArea8();
+
+  loadData();
+  dataTimer = window.setInterval(() => { loadData(); }, 3 * 1000);
 
-  // 响应式自适应
   window.addEventListener("resize", resizeChart);
+
+
+  window.addEventListener('keydown', handleKeyDown);
+
+  window.addEventListener('resize', handleFullScreenChange);
 });
 
 onUnmounted(() => {
   clearInterval(timer);
-  window.removeEventListener('resize', adjustHeight);
-
-  if (dataTimer) {
-    clearInterval(dataTimer);
-    dataTimer = null;
-  }
+  if (dataTimer) { clearInterval(dataTimer); dataTimer = null; }
+  window.removeEventListener('fullscreenchange', handleFullScreenChange);
 });
+
 function resizeChart() {
-  if (myChart) {
-    myChart.resize();
-  }
+  if (chartMain) chartMain.resize();
+  if (chartLine) chartLine.resize();
+  if (chartCounty) chartCounty.resize();
+  if (chartRadar) chartRadar.resize();
+  if (chartArea8) chartArea8.resize();
 }
+
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resizeChart);
-  if (myChart) {
-    myChart.dispose();
-    myChart = null;
-  }
+  if (chartMain) { chartMain.dispose(); chartMain = null; }
+  if (chartLine) { chartLine.dispose(); chartLine = null; }
+  if (chartCounty) { chartCounty.dispose(); chartCounty = null; }
+  if (chartRadar) { chartRadar.dispose(); chartRadar = null; }
+  if (chartArea8) { chartArea8.dispose(); chartArea8 = null; }
+
+  window.addEventListener('keydown', handleKeyDown);
 });
 
-// 调整左下 a9 和右下 a8 高度一致
-function adjustHeight() {
-  const a8 = document.querySelector('.area-8') as HTMLElement;
-  const a9 = document.querySelector('.area-9') as HTMLElement;
-  if (a8 && a9) {
-    const maxH = Math.max(a8.offsetHeight, a9.offsetHeight);
-    a8.style.height = maxH + 'px';
-    a9.style.height = maxH + 'px';
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape' || event.keyCode === 27) {
+    closeModal();
   }
 }
+
+const modalType = ref<number>(0)
+
+function openModal(type: number, title: string) {
+  modalType.value = type;
+  modalTitle.value = title;
+  modalData.value = []; // 暂时用 area-9 同样数据
+  if (type == 0) {
+    modalData.value = cityList.value?.map(item => item.raw) || []
+  }
+  if (type == 1) {
+    modalData.value = cityHrzList.value?.map(item => item.raw) || []
+  }
+  if (type == 2) {
+    modalData.value = countyList.value?.map(item => item.raw) || []
+  }
+  modalVisible.value = true;
+}
+
+function closeModal() {
+  modalVisible.value = false;
+}
+
+async function detailFunc(record) {
+  modalVisible2.value = true;
+  await nextTick()
+  registerModal.value.init(record)
+}
+
+function closeModal2() {
+  modalVisible2.value = false;
+}
 </script>
 
+
+
 <style scoped lang="less">
 .dashboard {
   display: flex;
@@ -332,16 +836,19 @@ function adjustHeight() {
   display: flex;
   flex: 4;
 }
+
 .area2 {
   border-radius: 10px;
   display: flex;
   flex: 3;
 }
+
 .area3 {
   border-radius: 10px;
   display: flex;
   flex: 3;
 }
+
 /* 右侧 */
 .right {
   flex: 12;
@@ -492,12 +999,13 @@ function adjustHeight() {
 }
 
 .area-8 {
+  flex: 0.435;
   border-radius: 10px;
   display: flex;
 }
 
 .areabg {
-  background-color: rgba(255, 255, 255, 0.08);
+  background-color: rgba(255, 255, 255, 0.048);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
 }
@@ -550,7 +1058,7 @@ function adjustHeight() {
   font-size: 16px;
   font-weight: 500;
   line-height: 1;
-  color: #6AD3FF;
+  color: #59accf;
   /* 若在浅背景上看不清，可改为深色 */
 }
 
@@ -562,7 +1070,7 @@ function adjustHeight() {
   align-items: center;
   gap: 8px;
   /* 两个项之间间距，可调 */
-  color: #6AD3FF;
+  color: #59accf;
   white-space: nowrap;
 }
 
@@ -595,12 +1103,169 @@ function adjustHeight() {
 .area-body {
   flex: 1;
   display: flex;
-  padding-top: 8px;
+  padding: 0px 24px;
   box-sizing: border-box;
   /* 如果你之前对 .left .area 有 align/justify: center，这里保证主体仍居中 */
 }
+
 #main {
   width: 100%;
   height: 100%;
 }
+
+.deletecs {
+  color: #b5d7ff;
+  color: #c0c0c0bd;
+  color: #ececec7c;
+}
+
+
+
+
+.list-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  padding: 4px 0;
+  height: 275px;
+}
+
+/* 标题行 */
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(19, 23, 34, 0.05); // #131722 几乎透明
+  color: #83c2df;
+  font-size: 16px;
+  height: 30px;
+  padding: 0 8px;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+/* 内容滚动区域 */
+.list-body {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE 10+ */
+}
+
+.list-body::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari */
+}
+
+/* 每行 */
+.list-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgba(19, 23, 34, 0.4); // #131722 半透明
+  color: #83c2df;
+  font-size: 14px;
+  margin: 5px 0; // 行间距 2px
+  padding: 0 30px;
+  height: 28px;
+  box-sizing: border-box;
+}
+
+/* 左右图标 */
+.left-icon,
+.right-icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.right-icon {
+  transform: scaleX(-1);
+  /* 横向翻转 */
+}
+
+/* 每行文字均匀分布 */
+.list-header span,
+.list-row span {
+  flex: 1;
+  text-align: center;
+}
+
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99;
+}
+
+
+.modal-content {
+  width: 80%;
+  max-width: 1000px;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(6px);
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.modal-overlay2 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 199;
+}
+
+.modal-content2 {
+  width: 80%;
+  max-width: 1000px;
+  // background: linear-gradient(135deg, #1e2a47, #091320);
+  backdrop-filter: blur(6px);
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+
+.modal-header {
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #59accf;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.close-btn {
+  cursor: pointer;
+}
+
+.modal-body {
+  flex: 1;
+  padding: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/screen/components/HeatanalysisModal.vue b/src/views/screen/components/HeatanalysisModal.vue
new file mode 100644
index 0000000..4eb4b25
--- /dev/null
+++ b/src/views/screen/components/HeatanalysisModal.vue
@@ -0,0 +1,124 @@
+<template>
+  <!-- 城区折线图 -->
+  <a-modal title="详情" width="80vw" v-if="cqzxtVisible" :visible="cqzxtVisible"
+    @cancel="handleCqzxtCancel" :okButtonProps="{ class: { 'jee-hidden': true } }" cancelText="关闭">
+    <ZxtCQ ref="cqzxtRef"></ZxtCQ>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineExpose } from 'vue';
+import ZxtCQ from './ZxtCQ.vue'
+
+const title = ref<string>('');
+const width = ref<number>(800);
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref();
+const emit = defineEmits(['register', 'success']);
+const cqzxtVisible = ref(false)
+const cqzxtRef = ref()
+const jxzxtVisible = ref(false)
+const jxzxtRef = ref()
+
+/**
+ * 新增
+ */
+function add() {
+  title.value = '新增';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.add();
+  });
+}
+
+/**
+ * 编辑
+ * @param record
+ */
+function edit(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.edit(record);
+  });
+}
+
+/**
+ * 确定按钮点击事件
+ */
+function handleOk() {
+  registerForm.value.submitForm();
+}
+
+/**
+ * form保存回调事件
+ */
+function submitCallback() {
+  handleCancel();
+  emit('success');
+}
+
+/**
+ * 取消按钮回调事件
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+function cqDetail(record) {
+  cqzxtVisible.value = true
+  nextTick(() => {
+    cqzxtRef.value.init(record)
+  })
+}
+
+function handleCqzxtCancel() {
+  cqzxtVisible.value = false
+}
+
+function jxDetail(record) {
+  jxzxtVisible.value = true
+  nextTick(() => {
+    jxzxtRef.value.init(record)
+  })
+}
+
+function handleJxzxtCancel() {
+  jxzxtVisible.value = false
+}
+
+defineExpose({
+  add,
+  edit,
+  disableSubmit,
+  cqDetail,
+  jxDetail,
+});
+</script>
+
+<style>
+/**隐藏样式-modal确定按钮 */
+.jee-hidden {
+  display: none !important;
+}
+
+.full-modal {
+  .ant-modal {
+    max-width: 100%;
+    top: 0;
+    padding-bottom: 0;
+    margin: 0;
+  }
+
+  .ant-modal-content {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh);
+  }
+
+  .ant-modal-body {
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/views/screen/components/ZxtCQ.vue b/src/views/screen/components/ZxtCQ.vue
new file mode 100644
index 0000000..4db4c50
--- /dev/null
+++ b/src/views/screen/components/ZxtCQ.vue
@@ -0,0 +1,292 @@
+<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-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 { list } 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);
+let tempChart: echarts.ECharts | null = null;
+let pressChart: echarts.ECharts | null = null;
+let tempOption: any = null;
+let pressOption: 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[]) {
+  records.sort((a: any, b: any) => new Date(a.datatime).getTime() - new Date(b.datatime).getTime());
+  const xAxis = records.map((r: any) => r.datatime);
+
+  const tempSeries = [
+    { name: '一次供水温度', key: 'view005', color: '#00c6ff' }, // 直接使用颜色而不是渐变
+    { name: '一次回水温度', key: 'view006', color: '#ff6a00' },
+    { name: '二次供水温度', key: 'view009', color: '#ff007f' },
+    { name: '二次回水温度', key: 'view010', color: '#6a5acd' },
+  ].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 = [
+    { name: '一次供水压力', key: 'view007', color: '#00c6ff' },
+    { name: '一次回水压力', key: 'view008', color: '#ff6a00' },
+    { name: '二次供水压力', key: 'view011', color: '#ff007f' },
+    { name: '二次回水压力', key: 'view012', color: '#6a5acd' },
+  ].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 };
+}
+
+
+
+let resizeAdded = false;
+function ensureResizeListener() {
+  if (resizeAdded) return;
+  const onResize = () => {
+    tempChart?.resize();
+    pressChart?.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,
+    view004: record_.view004 || -1,
+    SDateStr: formatDateTime(start),
+    EDateStr: formatDateTime(end),
+  };
+
+  list(params).then((res: any) => {
+    const records = (res && res.records) ? res.records : [];
+    headerText.value = buildHeader(records, record_);
+    initChartsOptions(records);
+    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();
+    }
+  });
+}
+
+function closeModal() {
+  emit('close')
+}
+
+defineExpose({ init });
+
+onUnmounted(() => {
+  if (tempChart) { tempChart.dispose(); tempChart = null; }
+  if (pressChart) { pressChart.dispose(); pressChart = 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/screen/dashboard/ljt.png b/src/views/screen/dashboard/ljt.png
new file mode 100644
index 0000000..e5addd3
Binary files /dev/null and b/src/views/screen/dashboard/ljt.png differ
diff --git a/src/views/screen/dashboard/lq.png b/src/views/screen/dashboard/lq.png
new file mode 100644
index 0000000..459d678
Binary files /dev/null and b/src/views/screen/dashboard/lq.png differ