From 4dba88a958364afaea5be5aaff212b2b2b1082b1 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Sat, 30 Aug 2025 16:56:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A9=BE=E9=A9=B6=E8=88=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/screen/Dashboard.vue                | 879 +++++++++++++++---
 .../screen/components/HeatanalysisModal.vue   | 124 +++
 src/views/screen/components/ZxtCQ.vue         | 292 ++++++
 src/views/screen/dashboard/ljt.png            | Bin 0 -> 2610 bytes
 src/views/screen/dashboard/lq.png             | Bin 0 -> 3416 bytes
 5 files changed, 1188 insertions(+), 107 deletions(-)
 create mode 100644 src/views/screen/components/HeatanalysisModal.vue
 create mode 100644 src/views/screen/components/ZxtCQ.vue
 create mode 100644 src/views/screen/dashboard/ljt.png
 create mode 100644 src/views/screen/dashboard/lq.png

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 0000000000000000000000000000000000000000..e5addd32913e4c5a91debceb0785e3d69a489b12
GIT binary patch
literal 2610
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
QPyQF@Z12t}rtd!RA86h!M*si-

literal 0
HcmV?d00001

diff --git a/src/views/screen/dashboard/lq.png b/src/views/screen/dashboard/lq.png
new file mode 100644
index 0000000000000000000000000000000000000000..459d67877363c1c640f7a55d5aaf8c076174dcdd
GIT binary patch
literal 3416
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

literal 0
HcmV?d00001