From e28f1bd987192cf689fc294242a9cc1618d4b8bb Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Thu, 28 Aug 2025 10:35:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=83=8A=E5=8E=BF=E7=AE=A1=E7=BD=91=E7=9B=91?=
 =?UTF-8?q?=E6=B5=8B=E6=8C=87=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../heatanalysis/HeatanalysisListJx.vue       |  48 +++-
 .../components/HeatanalysisModal.vue          |  33 ++-
 .../components/{Cqzxt.vue => ZxtCQ.vue}       |  13 +-
 .../heating/heatanalysis/components/ZxtJX.vue | 255 ++++++++++++++++++
 .../history/HeatanalysisHistory.api.ts        |   4 +
 5 files changed, 330 insertions(+), 23 deletions(-)
 rename src/views/heating/heatanalysis/components/{Cqzxt.vue => ZxtCQ.vue} (95%)
 create mode 100644 src/views/heating/heatanalysis/components/ZxtJX.vue

diff --git a/src/views/heating/heatanalysis/HeatanalysisListJx.vue b/src/views/heating/heatanalysis/HeatanalysisListJx.vue
index b239dd5..391b255 100644
--- a/src/views/heating/heatanalysis/HeatanalysisListJx.vue
+++ b/src/views/heating/heatanalysis/HeatanalysisListJx.vue
@@ -22,15 +22,15 @@
               </a-select>
             </a-form-item>
           </a-col>
-<!--          <a-col :lg="5">-->
-<!--            <a-form-item label="换热站">-->
-<!--              <a-select ref="select" placeholder="请选择换热站" v-model:value="queryParam.view004" style="width: 250px"-->
-<!--                @focus="focus" @change="handleChange3">-->
-<!--                <a-select-option :value="item.id" v-for="item in heatsourcestation" :key="item.id">{{ item.stationName-->
-<!--                }}</a-select-option>-->
-<!--              </a-select>-->
-<!--            </a-form-item>-->
-<!--          </a-col>-->
+          <!--          <a-col :lg="5">-->
+          <!--            <a-form-item label="换热站">-->
+          <!--              <a-select ref="select" placeholder="请选择换热站" v-model:value="queryParam.view004" style="width: 250px"-->
+          <!--                @focus="focus" @change="handleChange3">-->
+          <!--                <a-select-option :value="item.id" v-for="item in heatsourcestation" :key="item.id">{{ item.stationName-->
+          <!--                }}</a-select-option>-->
+          <!--              </a-select>-->
+          <!--            </a-form-item>-->
+          <!--          </a-col>-->
           <a-col :lg="5">
             <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-col :lg="6">
@@ -64,6 +64,10 @@
     </div>
     <!--引用表格-->
     <BasicTable @register="registerTable">
+      <!--操作栏-->
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
       <template v-slot:bodyCell="{ column, record, index, text }">
         <template v-if="column.dataIndex === 'view005'">
           <span v-if="record.fromFlow == 0">{{ record.view005 }}</span>
@@ -77,6 +81,8 @@
         </template>
       </template>
     </BasicTable>
+
+    <HeatanalysisModal ref="registerModal"></HeatanalysisModal>
   </div>
 </template>
 
@@ -86,6 +92,7 @@ import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { columnsJx } from './Heatanalysis.data';
 import { list, companylist, heatsourcelist, heatsourcestationlist } from './Heatanalysis.api';
+import HeatanalysisModal from './components/HeatanalysisModal.vue'
 
 const queryParam = ref<any>({});
 const toggleSearchStatus = ref<boolean>(false);
@@ -99,7 +106,6 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     canResize: false,
     useSearchForm: false,
     clickToRowSelect: false,
-    showActionColumn: false,
     showIndexColumn: false,
     tableSetting: {
       // 是否显示刷新按钮
@@ -156,13 +162,13 @@ function searchReset() {
 
 const thermalcompany = ref();
 async function getThermalcompany() {
-  let params = {regionType:'郊县'};
+  let params = { regionType: '郊县' };
   thermalcompany.value = await companylist(params);
 }
 
 const heatsource = ref();
 async function getHeatsource() {
-  let params = {regionType:'郊县'};
+  let params = { regionType: '郊县' };
   heatsource.value = await heatsourcelist(params);
 }
 
@@ -172,7 +178,7 @@ async function getHeatsource() {
 // }
 
 async function handleChange1(record) {
-  var params = { companyId: record,regionType:'郊县' };
+  var params = { companyId: record, regionType: '郊县' };
   heatsource.value = await heatsourcelist(params);
   // heatsourcestation.value = [];
 }
@@ -183,6 +189,22 @@ async function handleChange2(record) {
 function handleChange3(record) {
 }
 
+function handleDetail(record) {
+  registerModal.value.jxDetail(record)
+}
+
+
+/**
+ * 操作栏
+ */
+function getTableAction(record) {
+  return [
+    {
+      label: '详情',
+      onClick: handleDetail.bind(null, record),
+    },
+  ];
+}
 onMounted(() => {
   getThermalcompany();
   getHeatsource();
diff --git a/src/views/heating/heatanalysis/components/HeatanalysisModal.vue b/src/views/heating/heatanalysis/components/HeatanalysisModal.vue
index 6129f74..0275064 100644
--- a/src/views/heating/heatanalysis/components/HeatanalysisModal.vue
+++ b/src/views/heating/heatanalysis/components/HeatanalysisModal.vue
@@ -4,16 +4,23 @@
     <HeatanalysisForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false">
     </HeatanalysisForm>
   </a-modal>
-  <a-modal title="详情" width="100vw"  wrap-class-name="full-modal" :visible="cqzxtVisible" @cancel="handleCqzxtCancel"
-    :okButtonProps="{ class: { 'jee-hidden': true } }" cancelText="关闭">
-    <Cqzxt ref="cqzxtRef"></Cqzxt>
+  <!-- 城区折线图 -->
+  <a-modal title="详情" width="100vw" wrap-class-name="full-modal" v-if="cqzxtVisible" :visible="cqzxtVisible"
+    @cancel="handleCqzxtCancel" :okButtonProps="{ class: { 'jee-hidden': true } }" cancelText="关闭">
+    <ZxtCQ ref="cqzxtRef"></ZxtCQ>
+  </a-modal>
+  <!-- 郊县折线图 -->
+  <a-modal title="详情" width="100vw" wrap-class-name="full-modal" v-if="jxzxtVisible" :visible="jxzxtVisible"
+    @cancel="handleJxzxtCancel" :okButtonProps="{ class: { 'jee-hidden': true } }" cancelText="关闭">
+    <ZxtJX ref="jxzxtRef"></ZxtJX>
   </a-modal>
 </template>
 
 <script lang="ts" setup>
 import { ref, nextTick, defineExpose } from 'vue';
 import HeatanalysisForm from './HeatanalysisForm.vue'
-import Cqzxt from './Cqzxt.vue'
+import ZxtCQ from './ZxtCQ.vue'
+import ZxtJX from './ZxtJX.vue'
 
 const title = ref<string>('');
 const width = ref<number>(800);
@@ -23,6 +30,8 @@ const registerForm = ref();
 const emit = defineEmits(['register', 'success']);
 const cqzxtVisible = ref(false)
 const cqzxtRef = ref()
+const jxzxtVisible = ref(false)
+const jxzxtRef = ref()
 
 /**
  * 新增
@@ -71,7 +80,7 @@ function handleCancel() {
 
 function cqDetail(record) {
   cqzxtVisible.value = true
-  nextTick(()=>{
+  nextTick(() => {
     cqzxtRef.value.init(record)
   })
 }
@@ -80,11 +89,23 @@ 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>
 
@@ -101,11 +122,13 @@ defineExpose({
     padding-bottom: 0;
     margin: 0;
   }
+
   .ant-modal-content {
     display: flex;
     flex-direction: column;
     height: calc(100vh);
   }
+
   .ant-modal-body {
     flex: 1;
   }
diff --git a/src/views/heating/heatanalysis/components/Cqzxt.vue b/src/views/heating/heatanalysis/components/ZxtCQ.vue
similarity index 95%
rename from src/views/heating/heatanalysis/components/Cqzxt.vue
rename to src/views/heating/heatanalysis/components/ZxtCQ.vue
index 89ad4f7..dd822ba 100644
--- a/src/views/heating/heatanalysis/components/Cqzxt.vue
+++ b/src/views/heating/heatanalysis/components/ZxtCQ.vue
@@ -53,13 +53,16 @@ function safeNum(v: any) {
 }
 
 function buildHeader(records: any[], record_: any) {
-  if (records && records.length > 0) {
-    const r = records[0];
-    return `${r.view001Name || ''}/${r.view002Name || ''}/${r.view004Name || ''}`;
-  }
-  return `${record_.view001Name || ''}/${record_.view002Name || ''}/${record_.view004Name || ''}`.replace(/\/+$/, '');
+  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);
diff --git a/src/views/heating/heatanalysis/components/ZxtJX.vue b/src/views/heating/heatanalysis/components/ZxtJX.vue
new file mode 100644
index 0000000..570fc14
--- /dev/null
+++ b/src/views/heating/heatanalysis/components/ZxtJX.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="wrap">
+    <div class="title">{{ headerText }}</div>
+
+    <a-tabs v-model:activeKey="activeTab" centered @change="onTabChange">
+      <a-tab-pane key="temp" tab="温度指标">
+        <div ref="tempChartRef" class="chart-box"></div>
+      </a-tab-pane>
+      <a-tab-pane key="press" tab="压力指标">
+        <div ref="pressChartRef" class="chart-box"></div>
+      </a-tab-pane>
+      <a-tab-pane key="heat" tab="热量指标">
+        <div ref="heatChartRef" class="chart-box"></div>
+      </a-tab-pane>
+      <a-tab-pane key="flow" tab="流量指标">
+        <div ref="flowChartRef" class="chart-box"></div>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, defineProps, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { jxpage } from '/@/views/heating/history/HeatanalysisHistory.api';
+
+const props = defineProps({});
+const { createMessage } = useMessage();
+
+const activeTab = ref('temp'); // 默认进入温度指标 tab
+
+// 日期：近7天（含今天）
+const end = new Date();
+end.setHours(23, 59, 59, 999);
+const start = new Date(end);
+start.setDate(end.getDate() - 6);
+start.setHours(0, 0, 0, 0);
+
+const pad = (n: number) => String(n).padStart(2, '0');
+function formatDateTime(d: Date) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}
+
+const tempChartRef = ref<HTMLElement | null>(null);
+const pressChartRef = ref<HTMLElement | null>(null);
+const heatChartRef = ref<HTMLElement | null>(null);
+const flowChartRef = ref<HTMLElement | null>(null);
+let tempChart: echarts.ECharts | null = null;
+let pressChart: echarts.ECharts | null = null;
+let heatChart: echarts.ECharts | null = null;
+let flowChart: echarts.ECharts | null = null;
+let tempOption: any = null;
+let pressOption: any = null;
+let heatOption: any = null;
+let flowOption: any = null;
+const headerText = ref(''); // 页面顶部显示文本
+
+function safeNum(v: any) {
+  if (v === null || v === undefined || v === '') return null;
+  const n = Number(v);
+  return Number.isNaN(n) ? null : n;
+}
+
+function buildHeader(records: any[], record_: any) {
+  const r = (records && records.length > 0) ? records[0] : record_;
+  const names = [r.view001Name, r.view002Name].filter(v => v && v !== '');
+  return names.join(' → ');
+}
+
+function initChartsOptions(records: any[]) {
+  // 按时间排序（优先 datatime，再 view032）
+  records.sort((a: any, b: any) => {
+    const ta = new Date(a.datatime || a.view032 || '').getTime();
+    const tb = new Date(b.datatime || b.view032 || '').getTime();
+    return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
+  });
+
+  // 横坐标使用 view032 或 datatime
+  const xAxis = records.map((r: any) => r.view032 || r.datatime || '');
+
+  const tempSeries = [
+    { name: '供水温度', key: 'view005' },
+    { name: '回水温度', key: 'view006' },
+  ].map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  const pressSeries = [
+    { name: '供水压力', key: 'view007' },
+    { name: '回水压力', key: 'view008' },
+  ].map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  // 热量指标： 瞬时热量 view041，正累积热量 view042
+  const heatSeries = [
+    { name: '瞬时热量', key: 'view041' },
+    { name: '正累积热量', key: 'view042' },
+  ].map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  // 流量指标： 瞬时流量 view037，正累积流量 view038
+  const flowSeries = [
+    { name: '瞬时流量', key: 'view037' },
+    { name: '正累积流量', key: 'view038' },
+  ].map(s => ({
+    name: s.name,
+    type: 'line',
+    showSymbol: false,
+    connectNulls: false,
+    data: records.map((r: any) => safeNum(r[s.key])),
+  }));
+
+  const baseOption = {
+    tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } },
+    legend: { top: 36, left: 'center' },
+    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 ? val.replace(' ', '\n') : val,
+      },
+    },
+    yAxis: { type: 'value', scale: true },
+  };
+
+  tempOption = { ...baseOption, title: { text: '温度指标', left: 'center', top: 8 }, series: tempSeries };
+  pressOption = { ...baseOption, title: { text: '压力指标', left: 'center', top: 8 }, series: pressSeries };
+  heatOption = { ...baseOption, title: { text: '热量指标', left: 'center', top: 8 }, series: heatSeries };
+  flowOption = { ...baseOption, title: { text: '流量指标', left: 'center', top: 8 }, series: flowSeries };
+}
+
+let resizeAdded = false;
+function ensureResizeListener() {
+  if (resizeAdded) return;
+  const onResize = () => {
+    tempChart?.resize();
+    pressChart?.resize();
+    heatChart?.resize();
+    flowChart?.resize();
+  };
+  window.addEventListener('resize', onResize);
+  onUnmounted(() => {
+    window.removeEventListener('resize', onResize);
+  });
+  resizeAdded = true;
+}
+
+function init(record_: any) {
+  const params = {
+    pageNo: 1,
+    pageSize: -1,
+    regionType: '郊县',
+    view001: record_.view001,
+    view002: record_.view002,
+    view004: -1,
+    SDateStr: formatDateTime(start),
+    EDateStr: formatDateTime(end),
+  };
+
+  jxpage(params).then((res: any) => {
+    console.log("🌊 ~ init ~ res:", res)
+    const records = (res && res.records) ? res.records : [];
+    headerText.value = buildHeader(records, record_);
+    initChartsOptions(records);
+    nextTick(() => {
+      // 初始化温度图表（默认tab）
+      if (tempChartRef.value) {
+        if (!tempChart) tempChart = echarts.init(tempChartRef.value);
+        tempChart.setOption(tempOption);
+      }
+      ensureResizeListener();
+    });
+  }).catch(err => {
+    console.error(err);
+    createMessage.error('获取数据失败');
+  });
+}
+
+// tab切换时，第一次进来才 init对应图表
+function onTabChange(key: string) {
+  nextTick(() => {
+    if (key === 'temp') {
+      if (!tempChart && tempChartRef.value) {
+        tempChart = echarts.init(tempChartRef.value);
+        tempChart.setOption(tempOption);
+      }
+      tempChart?.resize();
+    } else if (key === 'press') {
+      if (!pressChart && pressChartRef.value) {
+        pressChart = echarts.init(pressChartRef.value);
+        pressChart.setOption(pressOption);
+      }
+      pressChart?.resize();
+    } else if (key === 'heat') {
+      if (!heatChart && heatChartRef.value) {
+        heatChart = echarts.init(heatChartRef.value);
+        heatChart.setOption(heatOption);
+      }
+      heatChart?.resize();
+    } else if (key === 'flow') {
+      if (!flowChart && flowChartRef.value) {
+        flowChart = echarts.init(flowChartRef.value);
+        flowChart.setOption(flowOption);
+      }
+      flowChart?.resize();
+    }
+  });
+}
+
+defineExpose({ init });
+
+onUnmounted(() => {
+  if (tempChart) { tempChart.dispose(); tempChart = null; }
+  if (pressChart) { pressChart.dispose(); pressChart = null; }
+  if (heatChart) { heatChart.dispose(); heatChart = null; }
+  if (flowChart) { flowChart.dispose(); flowChart = null; }
+});
+</script>
+
+<style lang="less" scoped>
+.wrap {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.title {
+  text-align: center;
+  font-size: 16px;
+  font-weight: 600;
+  margin: 12px 0;
+}
+
+.chart-box {
+  width: 100%;
+  height: 60vh;
+}
+</style>
diff --git a/src/views/heating/history/HeatanalysisHistory.api.ts b/src/views/heating/history/HeatanalysisHistory.api.ts
index 89d9f2a..05d12f0 100644
--- a/src/views/heating/history/HeatanalysisHistory.api.ts
+++ b/src/views/heating/history/HeatanalysisHistory.api.ts
@@ -5,6 +5,7 @@ const { createConfirm } = useMessage();
 
 enum Api {
   list = '/heating/heatanalysishistory/page',
+  jxpage = '/heating/heatanalysishistory/jxpage',
   companylist = '/heating/thermalcompany/list',
   heatsourcelist = '/heating/heatsource/list',
   heatsourcestationlist = '/heating/heatsourcestation/list',
@@ -17,6 +18,9 @@ enum Api {
 export const list = (params) =>
   defHttp.get({url: Api.list, params});
 
+export const jxpage = (params) =>
+  defHttp.get({url: Api.jxpage, params});
+
 export const companylist = (params) =>
   defHttp.get({url: Api.companylist, params});