From b0d836e4b3a0f0c2914e4e5508e3d18a203b779c Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Tue, 11 Nov 2025 17:32:54 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=AF=B9=E6=8E=A5=E9=87=87=E6=9A=96=E6=B3=B5?=
 =?UTF-8?q?=E7=9B=91=E6=B5=8B=E5=88=97=E8=A1=A8=202.=E5=AF=B9=E6=8E=A5?=
 =?UTF-8?q?=E9=87=87=E6=9A=96=E6=B3=B5=E5=9C=A8=E7=BA=BF=E6=83=85=E5=86=B5?=
 =?UTF-8?q?=203.=E5=AF=B9=E6=8E=A5=E9=87=87=E6=9A=96=E6=B3=B5=E6=8A=A5?=
 =?UTF-8?q?=E8=AD=A6=E4=BF=A1=E6=81=AF=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/boiler/heatingPump.js                 |  27 +
 src/store/modules/permission.js               |   8 +
 .../heatingPump/heatingPumpDetails.vue        | 718 +++++++++---------
 src/views/boilerSys/steamHeating/index.vue    |  20 +
 .../steamHeating/steamHeatingDetails.vue      | 420 ++++++++++
 5 files changed, 835 insertions(+), 358 deletions(-)
 create mode 100644 src/api/boiler/heatingPump.js
 create mode 100644 src/views/boilerSys/steamHeating/index.vue
 create mode 100644 src/views/boilerSys/steamHeating/steamHeatingDetails.vue

diff --git a/src/api/boiler/heatingPump.js b/src/api/boiler/heatingPump.js
new file mode 100644
index 0000000..834b9d0
--- /dev/null
+++ b/src/api/boiler/heatingPump.js
@@ -0,0 +1,27 @@
+import request from "@/utils/request";
+
+// 采暖泵列表
+export function heatPumpList(query) {
+  return request({
+    url: "/device/heatPump/list",
+    method: "get",
+    params: query,
+  });
+}
+// 采暖泵在线情况
+export function heatPumpOnlineList(query) {
+  return request({
+    url: "/device/heatPump/online",
+    method: "get",
+    params: query,
+  });
+}
+// 采暖泵报警列表
+export function heatPumpAlarmList(query) {
+  return request({
+    url: "/device/heatPump/alarmList",
+    method: "get",
+    params: query,
+  });
+}
+
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 2b3bc73..d9f53ef 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -155,6 +155,14 @@ const permission = {
                   import("@/views/boilerSys/heatingPump/heatingPumpDetails"),
                 meta: { title: "采暖泵监控", icon: "screen" },
               },
+              {
+                path: "/steamHeatingDetails",
+                name: "steamHeatingDetails",
+                hidden: true,
+                component: () =>
+                  import("@/views/boilerSys/steamHeating/steamHeatingDetails"),
+                meta: { title: "蒸汽采暖运行监控", icon: "screen" },
+              },
               // 可以继续添加更多路由对象
             ];
             // 循环添加额外的路由对象到各路由数组
diff --git a/src/views/boilerSys/heatingPump/heatingPumpDetails.vue b/src/views/boilerSys/heatingPump/heatingPumpDetails.vue
index 169f012..3beb1c9 100644
--- a/src/views/boilerSys/heatingPump/heatingPumpDetails.vue
+++ b/src/views/boilerSys/heatingPump/heatingPumpDetails.vue
@@ -46,144 +46,12 @@
       />
     </div>
     <div class="heatingPump">
-      <div class="pumpli">
+      <div class="pumpli" v-for="(item, index) in heatPumpList" :key="index">
         <div class="special-div one">
           <div class="special-top">
             <div class="special-title">
               <div class="title-left">
-                <div>采暖泵1</div>
-              </div>
-            </div>
-          </div>
-          <div class="pumpli-monitor">
-            <div class="pumpli-top">
-              <img
-                src="../../../assets/images/heatingPump.png"
-                class="pump-img"
-                alt=""
-              />
-              <div class="greenStatus">
-                <img
-                  src="../../../assets/images/green-out.png"
-                  class="green-out"
-                  alt=""
-                />
-                <img
-                  src="../../../assets/images/whiteFan.png"
-                  class="whiteFan move"
-                  alt=""
-                />
-              </div>
-            </div>
-            <div class="pump-data">
-              <div class="pump-data-li">
-                <div>运行状态</div>
-                <div class="pump-data-text">运行</div>
-              </div>
-              <div class="pump-data-li">
-                <div>实际转速(rpm)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-              <div class="pump-data-li">
-                <div>电机功率(kw)</div>
-                <div class="pump-data-text">100</div>
-              </div>
-              <div class="pump-data-li">
-                <div>电机输入电压(V)</div>
-                <div class="pump-data-text">220</div>
-              </div>
-              <div class="pump-data-li">
-                <div>点击输入电流(A)</div>
-                <div class="pump-data-text">5</div>
-              </div>
-              <div class="pump-data-li">
-                <div>总流量(m²/h)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-              <div class="pump-data-li">
-                <div>泵运行总用电量(kwh)</div>
-                <div class="pump-data-text">10</div>
-              </div>
-              <div class="pump-data-li">
-                <div>泵总运行时间(小时)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="pumpli">
-        <div class="special-div one">
-          <div class="special-top">
-            <div class="special-title">
-              <div class="title-left">
-                <div>采暖泵2</div>
-              </div>
-            </div>
-          </div>
-          <div class="pumpli-monitor">
-            <div class="pumpli-top">
-              <img
-                src="../../../assets/images/heatingPump.png"
-                class="pump-img"
-                alt=""
-              />
-              <div class="greenStatus">
-                <img
-                  src="../../../assets/images/green-out.png"
-                  class="green-out"
-                  alt=""
-                />
-                <img
-                  src="../../../assets/images/whiteFan.png"
-                  class="whiteFan"
-                  alt=""
-                />
-              </div>
-            </div>
-            <div class="pump-data">
-              <div class="pump-data-li">
-                <div>运行状态</div>
-                <div class="pump-data-text">运行</div>
-              </div>
-              <div class="pump-data-li">
-                <div>实际转速(rpm)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-              <div class="pump-data-li">
-                <div>电机功率(kw)</div>
-                <div class="pump-data-text">100</div>
-              </div>
-              <div class="pump-data-li">
-                <div>电机输入电压(V)</div>
-                <div class="pump-data-text">220</div>
-              </div>
-              <div class="pump-data-li">
-                <div>点击输入电流(A)</div>
-                <div class="pump-data-text">5</div>
-              </div>
-              <div class="pump-data-li">
-                <div>总流量(m²/h)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-              <div class="pump-data-li">
-                <div>泵运行总用电量(kwh)</div>
-                <div class="pump-data-text">10</div>
-              </div>
-              <div class="pump-data-li">
-                <div>泵总运行时间(小时)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="pumpli">
-        <div class="special-div one">
-          <div class="special-top">
-            <div class="special-title">
-              <div class="title-left">
-                <div>采暖泵3</div>
+                <div>{{ item.name }}</div>
               </div>
             </div>
           </div>
@@ -203,42 +71,26 @@
                 <img
                   src="../../../assets/images/whiteFan.png"
                   class="whiteFan"
+                  :class="{ move: shouldAddMoveClass(item) }"
                   alt=""
                 />
               </div>
             </div>
             <div class="pump-data">
-              <div class="pump-data-li">
-                <div>运行状态</div>
-                <div class="pump-data-text">运行</div>
-              </div>
-              <div class="pump-data-li">
-                <div>实际转速(rpm)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-              <div class="pump-data-li">
-                <div>电机功率(kw)</div>
-                <div class="pump-data-text">100</div>
-              </div>
-              <div class="pump-data-li">
-                <div>电机输入电压(V)</div>
-                <div class="pump-data-text">220</div>
-              </div>
-              <div class="pump-data-li">
-                <div>点击输入电流(A)</div>
-                <div class="pump-data-text">5</div>
-              </div>
-              <div class="pump-data-li">
-                <div>总流量(m²/h)</div>
-                <div class="pump-data-text">1000</div>
-              </div>
-              <div class="pump-data-li">
-                <div>泵运行总用电量(kwh)</div>
-                <div class="pump-data-text">10</div>
-              </div>
-              <div class="pump-data-li">
-                <div>泵总运行时间(小时)</div>
-                <div class="pump-data-text">1000</div>
+              <div
+                class="pump-data-li"
+                v-for="(val, index) in item.values"
+                :key="index + 1"
+              >
+                <div>{{ val.otherName }}</div>
+                <div
+                  class="pump-data-text"
+                  :class="{
+                    'bad-data-text': val.curValue === '故障',
+                  }"
+                >
+                  {{ val.curValue }}
+                </div>
               </div>
             </div>
           </div>
@@ -293,6 +145,11 @@
 <script>
 import { runTime } from "@/api/centerairC/sysMonitor";
 import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import {
+  heatPumpList,
+  heatPumpOnlineList,
+  heatPumpAlarmList,
+} from "@/api/boiler/heatingPump";
 import { getDay } from "@/utils/datetime";
 import * as echarts from "echarts";
 export default {
@@ -310,6 +167,7 @@ export default {
       energyMes: {}, //饼图数据
       // 报警列表
       alarmList: [],
+      heatPumpList: [],
     };
   },
   computed: {
@@ -352,6 +210,8 @@ export default {
     this.getAlarnStatus();
     this.getDayData();
     this.initChart();
+    this.getHotWaterBoiler();
+    this.getHotPumpAlarmList();
     this.$nextTick(() => {
       this.echartsData();
     });
@@ -405,215 +265,242 @@ export default {
       this.$router.push("/alarm/alarmRecord");
     },
     echartsData() {
-      console.log("父组件传过来的值", this.energyMes);
-      if (this.energyMes) {
-        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
-        const colorList = ["#ffe21e", "#08c8ff", "#0882ff", "#2df499"]; // 提取颜色列表
-        const adapterOption = {
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)",
-          },
-          legend: {
-            itemWidth: titleFontSize,
-            itemHeight: titleFontSize,
-            itemGap: titleFontSize * 2,
-            formatter: function (name) {
-              var arr = [];
-              let data = adapterOption.series[0].data;
-              var index = 0;
-              var total = 0;
-              // 计算总和
-              for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
-                if (data[i].name == name) {
-                  index = i;
-                }
-              }
-              // 检查当前项的值是否为 0
-              var percentage =
-                data[index].value === 0
-                  ? "0.00"
-                  : ((data[index].value / total) * 100).toFixed(2);
-              arr.push(
-                "{name|" + name + "}",
-                "{text|" + " " + ":" + " " + "}",
-                "{value|" + data[index].value + " " + "}",
-                "{percentage|" + " " + percentage + "%}"
-              );
-              return arr.join("");
-            },
-            textStyle: {
-              color: function (name) {
-                const dataSeries = adapterOption.series[1].data; // 数据圆的data
-                const index = dataSeries.findIndex(
-                  (item) => item.name === name
-                );
-                const colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表
-                return colorList[index];
+      let queryParams = {
+        systemType: "3",
+        type: "0",
+      };
+      heatPumpOnlineList(queryParams).then((res) => {
+        if (res.code == 200 && res.rows) {
+          console.log("采暖泵在线情况数据", res.rows);
+          this.energyMes = res.rows[0];
+          if (this.energyMes) {
+            const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+            const colorList = ["#ffe21e", "#08c8ff", "#0882ff", "#2df499"]; // 提取颜色列表
+            const adapterOption = {
+              title: {
+                text: this.energyMes.total,
               },
-              rich: {
-                name: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
+              tooltip: {
+                trigger: "item",
+                formatter: "{a} <br/>{b} : {c} ({d}%)",
+              },
+              legend: {
+                itemWidth: titleFontSize,
+                itemHeight: titleFontSize,
+                itemGap: titleFontSize * 2,
+                formatter: function (name) {
+                  var arr = [];
+                  let data = adapterOption.series[0].data;
+                  var index = 0;
+                  var total = 0;
+                  // 计算总和
+                  for (var i = 0; i < data.length; i++) {
+                    total += data[i].value;
+                    if (data[i].name == name) {
+                      index = i;
+                    }
+                  }
+                  // 检查当前项的值是否为 0
+                  var percentage =
+                    data[index].value === 0
+                      ? "0.00"
+                      : ((data[index].value / total) * 100).toFixed(2);
+                  arr.push(
+                    "{name|" + name + "}",
+                    "{text|" + " " + ":" + " " + "}",
+                    "{value|" + data[index].value + " " + "}",
+                    "{percentage|" + " " + percentage + "%}"
+                  );
+                  return arr.join("");
                 },
-                text: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
+                textStyle: {
+                  color: function (name) {
+                    const dataSeries = adapterOption.series[1].data; // 数据圆的data
+                    const index = dataSeries.findIndex(
+                      (item) => item.name === name
+                    );
+                    const colorList = [
+                      "#08c8ff",
+                      "#2df499",
+                      "#ffe21e",
+                      "#0882ff",
+                    ]; // 数据圆的颜色列表
+                    return colorList[index];
+                  },
+                  rich: {
+                    name: {
+                      align: "left",
+                      fontSize: titleFontSize * 1.6,
+                    },
+                    text: {
+                      align: "left",
+                      fontSize: titleFontSize * 1.6,
+                    },
+                    value: {
+                      align: "left",
+                      fontSize: titleFontSize * 1.6,
+                      // color: function (params) {
+                      //   let data = adapterOption.series[1].data;
+                      //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                      // },
+                    },
+                    percentage: {
+                      align: "left",
+                      fontSize: titleFontSize * 1.6,
+                      // color: function (params) {
+                      //   let data = adapterOption.series[1].data;
+                      //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                      // },
+                    },
+                  },
                 },
-                value: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
+              },
+              series: [
+                {
+                  name: "数据详情:",
+                  data: [
+                    { value: this.energyMes.online, name: "在线" },
+                    { value: this.energyMes.offline, name: "离线" },
+                  ],
+                  itemStyle: {
+                    color: function (params) {
+                      var colorList = [
+                        "#08c8ff",
+                        "#2df499",
+                        "#ffe21e",
+                        "#0882ff",
+                      ];
+                      return colorList[params.dataIndex];
+                    },
+                    // borderWidth: 5,
+                    borderColor: "#002a56",
+                  },
                 },
-                percentage: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
+                {
+                  data: [
+                    { value: this.energyMes.online, name: "在线" },
+                    { value: this.energyMes.offline, name: "离线" },
+                  ],
                 },
-              },
-            },
-          },
-          series: [
-            {
-              name: "数据详情:",
-              data: [
-                { value: 2, name: "设备1" },
-                { value: 3, name: "设备2" },
-                { value: 4, name: "设备3" },
-                { value: 5, name: "设备4" },
               ],
-              itemStyle: {
-                color: function (params) {
-                  var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"];
-                  return colorList[params.dataIndex];
-                },
-                // borderWidth: 5,
-                borderColor: "#002a56",
-              },
+            };
+            this.chartInstance.setOption(adapterOption);
+            this.chartInstance.resize();
+          }
+        } else {
+          const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
+          const adapterOption = {
+            title: {
+              text: 0,
             },
-            {
-              data: [
-                { value: 2, name: "设备1" },
-                { value: 3, name: "设备2" },
-                { value: 4, name: "设备3" },
-                { value: 5, name: "设备4" },
-              ],
+            tooltip: {
+              trigger: "item",
+              formatter: "{a} <br/>{b} : {c} ({d}%)",
             },
-          ],
-        };
-        this.chartInstance.setOption(adapterOption);
-        this.chartInstance.resize();
-      } else {
-        const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2;
-        const adapterOption = {
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b} : {c} ({d}%)",
-          },
-          legend: {
-            itemWidth: titleFontSize,
-            itemHeight: titleFontSize,
-            itemGap: titleFontSize * 2,
-            formatter: function (name) {
-              var arr = [];
-              let data = adapterOption.series[0].data;
-              var index = 0;
-              var total = 0;
-              // 计算总和
-              for (var i = 0; i < data.length; i++) {
-                total += data[i].value;
-                if (data[i].name == name) {
-                  index = i;
+            legend: {
+              itemWidth: titleFontSize,
+              itemHeight: titleFontSize,
+              itemGap: titleFontSize * 2,
+              formatter: function (name) {
+                var arr = [];
+                let data = adapterOption.series[0].data;
+                var index = 0;
+                var total = 0;
+                // 计算总和
+                for (var i = 0; i < data.length; i++) {
+                  total += data[i].value;
+                  if (data[i].name == name) {
+                    index = i;
+                  }
                 }
-              }
-              // 检查当前项的值是否为 0
-              var percentage =
-                data[index].value === 0
-                  ? "0.00"
-                  : ((data[index].value / total) * 100).toFixed(2);
-              arr.push(
-                "{name|" + name + "}",
-                "{text|" + " " + ":" + " " + "}",
-                "{value|" + data[index].value + " " + "}",
-                "{percentage|" + " " + percentage + "%}"
-              );
-              return arr.join("");
-            },
-            textStyle: {
-              color: function (name) {
-                const dataSeries = adapterOption.series[1].data; // 数据圆的data
-                const index = dataSeries.findIndex(
-                  (item) => item.name === name
+                // 检查当前项的值是否为 0
+                var percentage =
+                  data[index].value === 0
+                    ? "0.00"
+                    : ((data[index].value / total) * 100).toFixed(2);
+                arr.push(
+                  "{name|" + name + "}",
+                  "{text|" + " " + ":" + " " + "}",
+                  "{value|" + data[index].value + " " + "}",
+                  "{percentage|" + " " + percentage + "%}"
                 );
-                const colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"]; // 数据圆的颜色列表
-                return colorList[index];
+                return arr.join("");
               },
-              rich: {
-                name: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                },
-                text: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                },
-                value: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
+              textStyle: {
+                color: function (name) {
+                  const dataSeries = adapterOption.series[1].data; // 数据圆的data
+                  const index = dataSeries.findIndex(
+                    (item) => item.name === name
+                  );
+                  const colorList = [
+                    "#08c8ff",
+                    "#2df499",
+                    "#ffe21e",
+                    "#0882ff",
+                  ]; // 数据圆的颜色列表
+                  return colorList[index];
                 },
-                percentage: {
-                  align: "left",
-                  fontSize: titleFontSize * 1.6,
-                  // color: function (params) {
-                  //   let data = adapterOption.series[1].data;
-                  //   return data.itemStyle.color({ dataIndex: params.dataIndex });
-                  // },
+                rich: {
+                  name: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                  },
+                  text: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                  },
+                  value: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                    // color: function (params) {
+                    //   let data = adapterOption.series[1].data;
+                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                    // },
+                  },
+                  percentage: {
+                    align: "left",
+                    fontSize: titleFontSize * 1.6,
+                    // color: function (params) {
+                    //   let data = adapterOption.series[1].data;
+                    //   return data.itemStyle.color({ dataIndex: params.dataIndex });
+                    // },
+                  },
                 },
               },
             },
-          },
-          series: [
-            {
-              name: "数据详情:",
-              data: [
-                { value: 0, name: "设备1" },
-                { value: 0, name: "设备2" },
-                { value: 0, name: "设备3" },
-                { value: 0, name: "设备4" },
-              ],
-              itemStyle: {
-                color: function (params) {
-                  var colorList = ["#08c8ff", "#2df499", "#ffe21e", "#0882ff"];
-                  return colorList[params.dataIndex];
+            series: [
+              {
+                name: "数据详情:",
+                data: [
+                  { value: 0, name: "在线" },
+                  { value: 0, name: "离线" },
+                ],
+                itemStyle: {
+                  color: function (params) {
+                    var colorList = [
+                      "#08c8ff",
+                      "#2df499",
+                      "#ffe21e",
+                      "#0882ff",
+                    ];
+                    return colorList[params.dataIndex];
+                  },
+                  // borderWidth: 5,
+                  borderColor: "#002a56",
                 },
-                // borderWidth: 5,
-                borderColor: "#002a56",
               },
-            },
-            {
-              data: [
-                { value: 0, name: "设备1" },
-                { value: 0, name: "设备2" },
-                { value: 0, name: "设备3" },
-                { value: 0, name: "设备4" },
-              ],
-            },
-          ],
-        };
-        this.chartInstance.setOption(adapterOption);
-        this.chartInstance.resize();
-      }
+              {
+                data: [
+                  { value: 0, name: "在线" },
+                  { value: 0, name: "离线" },
+                ],
+              },
+            ],
+          };
+          this.chartInstance.setOption(adapterOption);
+          this.chartInstance.resize();
+        }
+      });
     },
     // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
     screenAdapter() {
@@ -622,6 +509,9 @@ export default {
       //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
       const adapterOption = {
         title: {
+          textStyle: {
+            fontSize: titleFontSize * 1.4,
+          },
           subtextStyle: {
             fontSize: titleFontSize * 1.2,
           },
@@ -647,7 +537,7 @@ export default {
           },
           textAlign: "center",
           x: "27%",
-          y: "36%", //距离上边的距离
+          y: "33%", //距离上边的距离
         },
         tooltip: {
           trigger: "item",
@@ -776,6 +666,82 @@ export default {
       //把配置项给实例对象
       this.chartInstance.setOption(this.option, true);
     },
+    // 获取采暖泵数据
+    getHotWaterBoiler() {
+      let queryParams = {
+        systemType: "3",
+        type: "0",
+      };
+      heatPumpList(queryParams).then((res) => {
+        if (res.code == 200) {
+          console.log("采暖泵数据", res.rows);
+          this.heatPumpList = res.rows;
+          this.processHeatPumpList();
+        }
+      });
+    },
+    // 处理 heatPumpList 数据的方法
+    processHeatPumpList() {
+      // 遍历 heatPumpList 数组
+      this.heatPumpList.forEach((item) => {
+        // 检查 values 是否为数组且有值
+        if (Array.isArray(item.values) && item.values.length > 0) {
+          // 遍历 values 数组
+          item.values.forEach((valueItem) => {
+            // 检查 otherName 是否包含 "故障"
+            if (valueItem.otherName && valueItem.otherName.includes("故障")) {
+              // 将 curValue 转换为数字进行比较
+              const numValue = parseFloat(valueItem.curValue);
+              if (!isNaN(numValue)) {
+                if (numValue === 0) {
+                  valueItem.curValue = "无故障";
+                } else if (numValue === 1) {
+                  valueItem.curValue = "故障";
+                }
+              }
+            }
+            if (
+              valueItem.otherName &&
+              valueItem.otherName.includes("运行状态")
+            ) {
+              //将 curValue 转换为数字进行比较
+              const numValue = parseFloat(valueItem.curValue);
+              if (!isNaN(numValue)) {
+                if (numValue === 0) {
+                  valueItem.curValue = "不运行";
+                } else if (numValue === 1) {
+                  valueItem.curValue = "运行";
+                }
+              }
+            }
+          });
+        }
+      });
+    },
+    // 运行状态-小风扇类
+    shouldAddMoveClass(item) {
+      for (let val of item.values) {
+        if (val.otherName.includes("运行状态") && val.curValue === "运行") {
+          return true;
+        }
+      }
+      return false;
+    },
+    // 采暖报警数据
+    getHotPumpAlarmList() {
+      let queryParams = {
+        systemType: "3",
+        type: "0",
+      };
+      heatPumpAlarmList(queryParams).then((res) => {
+        if (res.code == 200) {
+          console.log("采暖泵报警数据", res.rows);
+          this.alarmList = res.rows;
+        } else {
+          this.alarmList = [];
+        }
+      });
+    },
   },
 };
 </script>
@@ -968,6 +934,23 @@ export default {
               color: #05d120;
               font-weight: bold;
             }
+            .bad-data-text {
+              color: #f50d0d !important;
+              font-weight: bold;
+              animation: blink 1s infinite; /* 应用闪烁动画，持续时间 1 秒，无限循环 */
+            }
+
+            @keyframes blink {
+              0% {
+                opacity: 1; /* 初始透明度为 1（完全不透明） */
+              }
+              50% {
+                opacity: 0; /* 中间透明度为 0（完全透明） */
+              }
+              100% {
+                opacity: 1; /* 结束透明度为 1（完全不透明） */
+              }
+            }
           }
         }
       }
@@ -1008,4 +991,23 @@ export default {
   padding: 0.04rem 0.26rem 0.04rem 0px;
   min-height: 0.37rem;
 }
+.pumpli-monitor >>> .el-table {
+  font-size: 0.14rem !important;
+}
+.pumpli-monitor >>> .el-table .el-table__header-wrapper th,
+.pumpli-monitor >>> .el-table .el-table__fixed-header-wrapper th {
+  font-size: 0.13rem !important;
+  height: 0.4rem !important;
+}
+.pumpli-monitor >>> table tr {
+  height: 0.4rem !important;
+}
+.pumpli-monitor >>> .el-table--medium .el-table__cell {
+  padding: 0.1rem 0 !important;
+}
+.pumpli-monitor >>> .el-table .cell {
+  line-height: 0.23rem !important;
+  padding-left: 0.1rem !important;
+  padding-right: 0.1rem !important;
+}
 </style>
diff --git a/src/views/boilerSys/steamHeating/index.vue b/src/views/boilerSys/steamHeating/index.vue
new file mode 100644
index 0000000..0fdcc92
--- /dev/null
+++ b/src/views/boilerSys/steamHeating/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  created() {
+    this.toPage();
+  },
+  methods: {
+    toPage() {
+      console.log("需要跳转的")
+      // 跳转到展示
+      this.$router.push("/steamHeatingDetails")
+    },
+  },
+};
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/src/views/boilerSys/steamHeating/steamHeatingDetails.vue b/src/views/boilerSys/steamHeating/steamHeatingDetails.vue
new file mode 100644
index 0000000..6f274bd
--- /dev/null
+++ b/src/views/boilerSys/steamHeating/steamHeatingDetails.vue
@@ -0,0 +1,420 @@
+<template>
+  <div class="monitor" v-loading="loading">
+    <div class="monitor-top">
+      <img
+        class="title-left"
+        src="../../../assets/images/title-left.png"
+        alt=""
+      />
+      <img
+        class="title-center"
+        src="../../../assets/images/title-center.png"
+        alt=""
+        @click="goSys"
+      />
+      <img
+        class="title-right"
+        src="../../../assets/images/title-right.png"
+        alt=""
+      />
+      <div class="sys-title" @click="goSys">蒸汽采暖系统运行监测</div>
+      <!-- logo -->
+      <img src="../../../assets/images/logo-3.png" class="sys-logo" alt="" />
+      <div class="nowTime">{{ formattedDate }}</div>
+      <div class="monitor-time">已监测时长:{{ dayData }}天</div>
+      <img
+        class="icon_warning"
+        src="../../../assets/images/warning.png"
+        title="报警记录"
+        @click="goWarning"
+        v-if="isShowWarning"
+        alt=""
+      />
+      <img
+        class="icon_home"
+        src="../../../assets/images/icon_home.png"
+        title="首页"
+        @click="goSys"
+        alt=""
+      />
+      <img
+        class="back-icon"
+        src="../../../assets/images/back-icon.png"
+        title="返回"
+        @click="goBack"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { runTime } from "@/api/centerairC/sysMonitor";
+import { alarmRecordList } from "@/api/alarm/alarmRecord";
+import { monitorList } from "@/api/centerairC/sysMonitor";
+import { getDay } from "@/utils/datetime";
+export default {
+  name: "boilerMonitorDetails",
+  data() {
+    return {
+      loading: false,
+      currentDate: new Date(),
+      nowTimer: null,
+      timer: null, // 用于存储定时器 ID
+      isShowWarning: false, //是否有报警
+      dayData: "", //监测天数
+      currentWeekday: "",
+      // 蒸汽锅炉数据
+      steamHeatingData: [],
+    };
+  },
+  computed: {
+    formattedDate() {
+      const year = this.currentDate.getFullYear();
+      const month = String(this.currentDate.getMonth() + 1).padStart(2, "0");
+      const day = String(this.currentDate.getDate()).padStart(2, "0");
+      const hours = String(this.currentDate.getHours()).padStart(2, "0");
+      const minutes = String(this.currentDate.getMinutes()).padStart(2, "0");
+      const seconds = String(this.currentDate.getSeconds()).padStart(2, "0");
+      const weekDays = [
+        "星期日",
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+      ];
+      const weekDay = weekDays[this.currentDate.getDay()];
+      return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekDay}`;
+    },
+  },
+  created() {
+    const weekdays = [
+      "星期日",
+      "星期一",
+      "星期二",
+      "星期三",
+      "星期四",
+      "星期五",
+      "星期六",
+    ];
+    const date = new Date();
+    const dayIndex = date.getDay();
+    this.currentWeekday = weekdays[dayIndex];
+    console.log("今天是星期几", this.currentWeekday);
+  },
+  mounted() {
+    this.getAlarnStatus();
+    this.getDayData();
+    // 获取当蒸汽采暖数据
+    this.getSteamHeatingData();
+    // 设置定时器，每 10 秒执行一次
+    this.timer = setInterval(() => {
+      this.getAlarnStatus();
+      this.getDayData();
+      // 获取当蒸汽采暖数据
+      this.getSteamHeatingData();
+    }, 10000);
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+    // 组件销毁前清除定时器
+    if (this.nowTimer) {
+      clearInterval(this.nowTimer);
+    }
+  },
+  methods: {
+    // 进入系统首页
+    goSys() {
+      this.$router.push("/");
+    },
+    // 返回上一页
+    goBack() {
+      window.history.go(-2);
+    },
+    // 监测天数
+    getDayData() {
+      runTime().then((res) => {
+        if (res.code == 200) {
+          this.dayData = res.data.runTime;
+        }
+      });
+    },
+    // 报警列表
+    getAlarnStatus() {
+      let data = {
+        pageNum: 1,
+        pageSize: 10,
+        status: "0",
+      };
+      let timeArr = [getDay(0), getDay(0)];
+      alarmRecordList(this.addDateRange(data, timeArr)).then((res) => {
+        if (res.code == 200 && res.rows.length > 0) {
+          this.isShowWarning = true;
+        } else {
+          this.isShowWarning = false;
+        }
+      });
+    },
+    goWarning() {
+      this.$router.push("/alarm/alarmRecord");
+    },
+    // 获取蒸汽锅炉运行监测数据
+    getSteamHeatingData() {
+      monitorList({ systemType: 3 }).then((res) => {
+        if (res.code === 200) {
+          console.log("设备监测列表返回", res);
+
+          // 初始化各个设备列表
+          this.hostList = [];
+          this.coolingPump = [];
+          this.freezingPump = [];
+          this.coolingTower = [];
+          this.frozenValve = [];
+          this.coolingValue = [];
+          this.coolingTowerInlet = [];
+          this.coolingTowerOutlet = [];
+          this.freezingManifold = [];
+          this.coolingOutletBuild = []; //裙楼供冷出水阀
+          this.coolingInletBuild = []; //裙楼供冷进水阀
+          this.coolingOutletGuest = []; //客房供冷出水阀
+          this.coolingInletGuest = []; //客房供冷进水阀
+          this.hotOutletBuild = []; //裙楼供暖出水阀
+          this.hotInletBuild = []; //裙楼供暖进水阀
+          this.hotOutletGuest = []; //客房供暖出水阀
+          this.hotInletGuest = []; //客房供暖进水阀
+
+          res.rows.forEach((row) => {
+            switch (row.name) {
+              case "0":
+                this.hostList = this.processDeviceList(row.values);
+                console.log("主机列表", this.hostList);
+                break;
+              case "1":
+                this.coolingPump = this.processDeviceList(row.values);
+                console.log("冷却泵列表", this.coolingPump);
+                break;
+              case "2":
+                this.freezingPump = this.processDeviceList(row.values);
+                console.log("冷冻泵列表", this.freezingPump);
+                break;
+              case "3":
+                this.coolingTower = this.processDeviceList(row.values);
+                console.log("冷却塔列表", this.coolingTower);
+                break;
+              case "4":
+                this.frozenValve = this.processDeviceList(row.values);
+                console.log("冷冻蝶阀列表", this.frozenValve);
+                break;
+              case "7":
+                this.coolingValue = this.processDeviceList(row.values);
+                console.log("冷却蝶阀列表", this.coolingValue);
+                break;
+              case "8":
+                this.coolingTowerInlet = this.processDeviceList(row.values);
+                console.log("冷却塔进水阀列表", this.coolingTowerInlet);
+                break;
+              case "9":
+                this.coolingTowerOutlet = this.processDeviceList(row.values);
+                console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
+                break;
+              case "15":
+                this.freezingManifold = row.values;
+                console.log("冷冻总管", this.freezingManifold);
+                break;
+              case "18":
+                let buildInData = row.values;
+                buildInData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingInletBuild.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotInletBuild.push(item);
+                  }
+                });
+                console.log("裙楼供冷进水阀", this.coolingInletBuild);
+                console.log("裙楼供暖进水阀", this.hotInletBuild);
+                break;
+              case "19":
+                let buildOutData = row.values;
+                buildOutData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingOutletBuild.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotOutletBuild.push(item);
+                  }
+                });
+                console.log("裙楼供冷出水阀", this.coolingOutletBuild);
+                console.log("裙楼供暖出水阀", this.hotOutletBuild);
+                break;
+              case "20":
+                let guestInData = row.values;
+                guestInData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingInletGuest.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotInletGuest.push(item);
+                  }
+                });
+                console.log("客房供冷进水阀", this.coolingInletGuest);
+                console.log("客房供暖进水阀", this.hotInletGuest);
+                break;
+              case "21":
+                let guestOutData = row.values;
+                guestOutData.forEach((item) => {
+                  if (item.deviceName.includes("供冷")) {
+                    this.coolingOutletGuest.push(item);
+                  }
+                  if (item.deviceName.includes("供暖")) {
+                    this.hotOutletGuest.push(item);
+                  }
+                });
+                console.log("客房供冷出水阀", this.coolingOutletGuest);
+                console.log("客房供暖出水阀", this.hotOutletGuest);
+                break;
+              default:
+                break;
+            }
+          });
+        }
+      });
+    },
+    // 封装一个通用函数来处理设备列表
+    processDeviceList(values) {
+      const deviceList = [];
+      // 遍历每个设备属性
+      values.forEach((item) => {
+        // 提取设备编号
+        const match = item.deviceName.match(/(\d+)号/);
+        if (match) {
+          const deviceNumber = parseInt(match[1]);
+          // 如果 deviceList 中对应编号的对象还不存在，则创建一个新对象
+          if (!deviceList[deviceNumber - 1]) {
+            deviceList[deviceNumber - 1] = {
+              deviceName: item.deviceName,
+              properties: [],
+            };
+          }
+          // 将当前属性添加到对应设备的 properties 数组中
+          deviceList[deviceNumber - 1].properties.push(item);
+        }
+      });
+      // 过滤掉 deviceList 中可能存在的空元素
+      return deviceList.filter((item) => item);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monitor {
+  width: 100%;
+  min-height: 100vh;
+  background-color: black;
+  color: #fff;
+  .monitor-top {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    padding: 0.1rem 0.2rem;
+    position: relative;
+    .title-left {
+      width: 3.41rem;
+      height: 0.8rem;
+    }
+    .title-center {
+      width: 9.46rem;
+      height: 0.8rem;
+    }
+    .title-right {
+      width: 5.04rem;
+      height: 0.78rem;
+    }
+    .sys-title {
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.28rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+      cursor: pointer;
+    }
+    .nowTime {
+      position: absolute;
+      top: 0.37rem;
+      right: 0.6rem;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+      z-index: 100;
+    }
+    .sys-logo {
+      width: 1.8rem;
+      height: 0.5rem;
+      position: absolute;
+      top: 0.26rem;
+      left: 0.8rem;
+      z-index: 10;
+    }
+    .monitor-time {
+      position: absolute;
+      top: 0.44rem;
+      left: 4.2rem;
+      z-index: 10;
+      font-size: 0.18rem;
+      color: #ffffff;
+      font-weight: bold;
+    }
+    .icon_warning {
+      position: absolute;
+      top: 0.39rem;
+      right: 4.4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.25rem 0 0.27rem;
+      cursor: pointer;
+      /* 添加闪烁动画 */
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0;
+      }
+    }
+    .icon_home {
+      position: absolute;
+      top: 0.39rem;
+      right: 4rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      margin: 0 0.2rem 0 0.27rem;
+      cursor: pointer;
+    }
+    .back-icon {
+      position: absolute;
+      top: 0.39rem;
+      right: 3.7rem;
+      z-index: 10;
+      width: 0.35rem;
+      height: 0.32rem;
+      cursor: pointer;
+    }
+  }
+}
+</style>