diff --git a/src/api/temSys/temHistory.js b/src/api/temSys/temHistory.js
deleted file mode 100644
index 2bfb44b..0000000
--- a/src/api/temSys/temHistory.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import request from "@/utils/request";
-
-// 历史数据
-export function temHistory(query) {
-  return request({
-    url: "/device/indoor/tempHis",
-    method: "get",
-    params: query,
-  });
-}
diff --git a/src/api/temSys/temMonitor.js b/src/api/temSys/temMonitor.js
index dc80ba7..2be56a6 100644
--- a/src/api/temSys/temMonitor.js
+++ b/src/api/temSys/temMonitor.js
@@ -8,3 +8,12 @@ export function temList(query) {
     params: query,
   });
 }
+// 历史数据
+export function temHistory(data) {
+  return request({
+    url: "/device/indoor/tempHis",
+    method: "post",
+    data: data,
+  });
+}
+
diff --git a/src/assets/images/border-7.png b/src/assets/images/border-7.png
new file mode 100644
index 0000000..a0bbab2
Binary files /dev/null and b/src/assets/images/border-7.png differ
diff --git a/src/assets/images/hum-normal.png b/src/assets/images/hum-normal.png
new file mode 100644
index 0000000..a98e7d4
Binary files /dev/null and b/src/assets/images/hum-normal.png differ
diff --git a/src/assets/images/tem-normal.png b/src/assets/images/tem-normal.png
new file mode 100644
index 0000000..97bc949
Binary files /dev/null and b/src/assets/images/tem-normal.png differ
diff --git a/src/assets/images/tem-warning.png b/src/assets/images/tem-warning.png
new file mode 100644
index 0000000..20b1c43
Binary files /dev/null and b/src/assets/images/tem-warning.png differ
diff --git a/src/assets/images/warning.png b/src/assets/images/warning.png
new file mode 100644
index 0000000..2441b27
Binary files /dev/null and b/src/assets/images/warning.png differ
diff --git a/src/views/temSys/temHistory/index.vue b/src/views/temSys/temHistory/index.vue
deleted file mode 100644
index a867ec2..0000000
--- a/src/views/temSys/temHistory/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div>历史数据</div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/src/views/temSys/temMonitor/index.vue b/src/views/temSys/temMonitor/index.vue
index aaaf6f4..868516c 100644
--- a/src/views/temSys/temMonitor/index.vue
+++ b/src/views/temSys/temMonitor/index.vue
@@ -28,13 +28,112 @@
         </el-tree>
       </div>
     </div>
-    <div class="right-monitor">111</div>
+    <div class="right-monitor">
+      <div class="buildingDiv">
+        <img
+          class="title-bg"
+          src="../../../assets/images/title-bg.png"
+          alt=""
+        />
+        <div class="title-word">位置：{{ currentName }}</div>
+      </div>
+      <div class="tem-data">
+        <div class="tem-li" v-for="(item, index) in tableData" :key="index">
+          <div class="temli-top">
+            <div class="temli-title">{{ item.houseName }}</div>
+            <div class="top-right">
+              <!-- 可能有报警的img -->
+              <img
+                v-if="getDeviceWarning(item.deviceList, '12')"
+                src="../../../assets/images/warning.png"
+                class="warning-img"
+                alt=""
+              />
+              <!-- 详情 -->
+              <div
+                class="details"
+                @click="getHistory(item)"
+                title="查看历史记录"
+              >
+                <i class="el-icon-s-data"></i>
+              </div>
+            </div>
+          </div>
+          <!-- 显示温度 -->
+          <div
+            class="tem"
+            v-if="getDeviceByParamType(item.deviceList, '12')"
+            :class="{ warningClass: getDeviceWarning(item.deviceList, '12') }"
+          >
+            <div class="tem-word">
+              <img
+                v-if="getDeviceWarning(item.deviceList, '12')"
+                class="tem-img"
+                src="../../../assets/images/tem-warning.png"
+                alt=""
+              />
+              <img
+                v-else
+                class="tem-img"
+                src="../../../assets/images/tem-warning.png"
+                alt=""
+              />
+              <div class="tem-middle">
+                <div>
+                  {{ getDeviceByParamType(item.deviceList, "12").otherName }}
+                </div>
+                <div class="en-text">Temperature</div>
+              </div>
+            </div>
+            <div class="tem-right">
+              <span class="tem-num">{{
+                getDeviceByParamType(item.deviceList, "12").curValue
+              }}</span>
+              <span>℃</span>
+            </div>
+          </div>
+          <!-- 显示湿度 -->
+          <div class="tem" v-if="getDeviceByParamType(item.deviceList, '32')">
+            <div class="tem-word">
+              <img
+                class="tem-img"
+                src="../../../assets/images/hum-normal.png"
+                alt=""
+              />
+              <div class="tem-middle">
+                <div>
+                  {{ getDeviceByParamType(item.deviceList, "32").otherName }}
+                </div>
+                <div class="en-text">Humidity</div>
+              </div>
+            </div>
+            <div class="tem-right">
+              <span class="tem-num">{{
+                getDeviceByParamType(item.deviceList, "32").curValue
+              }}</span>
+              <span>%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 历史数据弹框 -->
+    <el-dialog
+      title="历史记录"
+      :visible.sync="openDialog"
+      width="900px"
+      append-to-body
+    >
+      <div class="charts" ref="chart_ref"></div>
+    </el-dialog>
+    <!-- <div class="charts" ref="chart_ref"></div> -->
   </div>
 </template>
 
 <script>
 import { spaceTree } from "@/api/region";
-import { temList } from "@/api/temSys/temMonitor";
+import { temList, temHistory } from "@/api/temSys/temMonitor";
+import * as echarts from "echarts";
 export default {
   data() {
     return {
@@ -52,11 +151,34 @@ export default {
       currentParentId: "", //当前节点的上级的id
 
       tableData: [], //系统状态表格数据
+      openDialog: false,
+      chartInstance: null,
+      option: {},
+      chartData1: [8, 3, 5, 7, 8, 10, 4, 5, 12, 13, 10, 18],
+      chartData2: [7, 4, 5, 6.2, 7, 9, 3, 6, 13, 11, 9, 20],
+      bottomData: [
+        "1月",
+        "2月",
+        "3月",
+        "4月",
+        "5月",
+        "6月",
+        "7月",
+        "8月",
+        "9月",
+        "10月",
+        "11月",
+        "12月",
+      ],
     };
   },
   mounted() {
     this.getSysBuild();
   },
+  destroyed() {
+    //取消监听器
+    window.removeEventListener("resize", this.screenAdapter);
+  },
   methods: {
     getSysBuild() {
       spaceTree().then((res) => {
@@ -197,8 +319,271 @@ export default {
       temList(data).then((res) => {
         console.log("温度返回", res);
         if (res.code == 200) {
+          this.tableData = res.rows;
+        } else {
+          this.tableData = [];
+        }
+      });
+    },
+    getDeviceByParamType(deviceList, paramType) {
+      let obj = deviceList.find((device) => device.paramType === paramType);
+      return obj;
+    },
+    getDeviceWarning(deviceList, paramType) {
+      console.log("deviceList", deviceList);
+      return deviceList.some((item) => {
+        console.log("item.paramType", item.paramType);
+        console.log("item.alarmStatus", item.alarmStatus);
+        if (item.paramType === paramType && item.alarmStatus === 1) {
+          console.log("返回true了呀");
+          return true;
+        }
+        return false;
+      });
+    },
+    getHistory(item) {
+      console.log("item", item);
+      // 打开当前房间的历史记录的内容
+      this.openDialog = true;
+      this.$nextTick(() => {
+        this.echartsData(item.houseId);
+      });
+    },
+    echartsData(id) {
+      let data = {
+        systemType: "4",
+        houseIds: [id],
+      };
+      temHistory(data).then((res) => {
+        console.log("历史数据返回", res);
+        if (res.code == 200) {
+          let data = res.rows[0].dataList;
+          this.chartData1 = [];
+          this.chartData2 = [];
+          this.bottomData = [];
+          console.log("data",data)
+          data.forEach((item) => {
+            // 处理 chartData1
+            const value1 =
+              item.indoorTemp === null || item.indoorTemp === ""
+                ? 0
+                : item.indoorTemp;
+            this.chartData1.push(value1);
+
+            // 假设 item 中对应 chartData2 的字段是 indoorHumidity
+            const value2 =
+              item.indoorHumidity === null || item.indoorHumidity === ""
+                ? 0
+                : item.indoorHumidity;
+            this.chartData2.push(value2);
+
+            // 假设 item 中对应 bottomData 的字段是 curTime
+            const value3 =
+              item.curTime === null || item.curTime === "" ? 0 : item.curTime;
+            this.bottomData.push(value3);
+          });
+          this.initChart();
+          window.addEventListener("resize", this.screenAdapter);
+          this.screenAdapter();
         }
       });
+      // // chartData1是实线部分， chartData2是虚线代表预测部分
+      // // chartData2的值 为 [ chartData1的长度-1个" "空值,chartData1最后一个值, xxx，xxx，xxx ]
+      // const adapterOption = {
+      //   xAxis: {
+      //     data: this.bottomData,
+      //   },
+      //   series: [
+      //     {
+      //       yAxisIndex: 0,
+      //       data: this.chartData1,
+      //     },
+      //     {
+      //       yAxisIndex: 0,
+      //       data: this.chartData2,
+      //     },
+      //   ],
+      // };
+      // this.chartInstance.setOption(adapterOption);
+      // //手动的调用图标对象的resize才能产生效果
+      // this.chartInstance.resize();
+    },
+    // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+    screenAdapter() {
+      //自己定义的比较合适的适配大小,2.6  mes_ref是图表盒子
+      const titleFontSize = this.$refs.chart_ref.offsetWidth / 130;
+      //因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据
+      const adapterOption = {};
+      //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
+      this.chartInstance.setOption(adapterOption);
+      //手动的调用图标对象的resize才能产生效果
+      this.chartInstance.resize();
+    },
+    //初始化chartInstance对象
+    initChart() {
+      const chartRef = this.$refs.chart_ref;
+      if (chartRef) {
+        // 初始化图表的代码
+        this.chartInstance = echarts.init(this.$refs.chart_ref);
+        this.option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            show: true,
+            top: 10,
+            textStyle: {
+              color: "white",
+            },
+          },
+          grid: {
+            top: "10%",
+            left: "4%",
+            right: "6%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            //设置为true代表离零刻度间隔一段距离
+            boundaryGap: true,
+            // 修饰刻度标签的颜色即x坐标数据
+            axisLabel: {
+              // interval: 0, //强制显示所有x轴数据
+              // rotate: 30, //x轴坐标字体倾斜30度
+              color: "rgba(255, 255, 255, 1)",
+            },
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            // x坐标轴的颜色
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#e2e6f0",
+              },
+            }, //x轴分割线
+            data: this.bottomData,
+          },
+          yAxis: {
+            min: 0,
+            // max:20,
+            // // // min:'dataMin',
+            // // // max:'dataMax',
+            // name: "kwh", // 第一个 y 轴的单位描述
+            // 设置 name 的样式
+            nameTextStyle: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            miniInterval: 5,
+            type: "value",
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            //y轴分割线段数
+            // splitNumber: 10,
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
+          },
+          series: [
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData1,
+              name: "温度",
+              //折线颜色
+              itemStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              lineStyle: {
+                color: "#1a69f1", //折线点的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: true,
+              // 区域填充样式，添加渐变背景
+              areaStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(26, 105, 241, 0.5)", // 渐变起始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(26, 105, 241, 0)", // 渐变结束颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            {
+              type: "line",
+              // 拐点大小
+              symbolSize: 8,
+              data: this.chartData2,
+              name: "湿度",
+              //折线颜色
+              itemStyle: {
+                color: "#00CED1", //折线的颜色
+              },
+              smooth: false,
+              // 不显示折线点
+              showSymbol: true,
+              areaStyle: {
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(0, 206, 209, 0.5)", // 渐变起始颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(0, 206, 209, 0)", // 渐变结束颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+          ],
+        };
+        //把配置项给实例对象
+        this.chartInstance.setOption(this.option, true);
+      } else {
+        console.error("未找到有效的 DOM 元素");
+      }
     },
   },
 };
@@ -222,8 +607,148 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
+    .buildingDiv {
+      padding-left: 54px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 20px;
+      position: relative;
+      .title-bg {
+        width: 208px;
+        height: 38px;
+        position: absolute;
+        left: 0;
+        z-index: 0;
+      }
+      .title-word {
+        z-index: 10;
+        font-family: YouSheBiaoTiHei;
+        font-size: 24px;
+        color: #ffffff;
+        white-space: nowrap;
+      }
+    }
+    .tem-data {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      .tem-li {
+        display: flex;
+        flex-direction: column;
+        width: calc(33.33% - 20px);
+        background-image: url(../../././../assets/images/border-7.png);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        padding: 20px;
+        margin: 0 10px 20px 10px;
+        transition: filter 0.3s ease;
+        .temli-top {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          color: #ffffff;
+          font-size: 18px;
+          margin-bottom: 15px;
+          .top-right {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+          }
+        }
+        .temli-title {
+          height: 40px;
+          font-family: Arial, sans-serif;
+          font-size: 20px;
+          font-weight: bold;
+          color: #00aaff;
+          text-shadow: 0 0 5px rgba(0, 170, 255, 0.5);
+          margin-left: 7px;
+        }
+        .warning-img {
+          width: 40px;
+          height: 40px;
+          margin-right: 20px;
+          /* 添加闪烁动画 */
+          animation: blink 1s infinite;
+        }
+        @keyframes blink {
+          100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0;
+          }
+        }
+        .tem {
+          width: 100%;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: space-between;
+          color: #ffffff;
+          font-size: 18px;
+          .tem-word {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .tem-img {
+              width: 80px;
+              height: 80px;
+              margin-right: 15px;
+            }
+            .tem-middle {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+              justify-content: flex-start;
+              .en-text {
+                font-size: 13px;
+                margin-top: 10px;
+              }
+            }
+          }
+          .tem-right {
+            font-size: 16px;
+            margin-top: 15px;
+            .tem-num {
+              font-size: 30px;
+              font-weight: bold;
+              margin-right: 10px;
+            }
+          }
+        }
+        .warningClass {
+          color: #fe9805 !important;
+        }
+        .details {
+          background-color: #3c8dd4;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          text-align: center;
+          line-height: 40px;
+          cursor: pointer;
+        }
+      }
+      .details:hover .tem-li {
+        filter: brightness(
+          1.2
+        ); /* 降低亮度，使背景图片颜色更深，可根据需求调整数值 */
+        transform: scale(1.02);
+      }
+      .tem-li:hover {
+      }
+    }
   }
 }
+.charts {
+  width: 870px;
+  height: 300px;
+}
 .tree-container {
   height: 300px; /* 设置固定高度 */
   overflow-y: auto; /* 启用垂直滚动条 */
@@ -249,6 +774,16 @@ export default {
     }
   }
 }
+@media (min-width: 1200px) and (max-width: 1540px) {
+  .tem-li {
+    width: calc(49% - 20px) !important;
+  }
+}
+@media (max-width: 1200px) {
+  .tem-li {
+    width: calc(100% - 40px) !important;
+  }
+}
 </style>
 <style scoped>
 /* 自定义高亮颜色 */