diff --git a/.env.development b/.env.development
index 8253cfb..8e968ab 100644
--- a/.env.development
+++ b/.env.development
@@ -7,9 +7,9 @@ ENV = 'development'
 # 开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
-VUE_APP_BASE_API = 'http://192.168.1.222:8080'
+# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
 # 云端
-# VUE_APP_BASE_API = 'http://106.55.173.225:8090'
+VUE_APP_BASE_API = 'http://106.55.173.225:8090'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/views/centerairC/sysMonitor/components/performanceChart.vue b/src/views/centerairC/sysMonitor/components/performanceChart.vue
new file mode 100644
index 0000000..7aa38da
--- /dev/null
+++ b/src/views/centerairC/sysMonitor/components/performanceChart.vue
@@ -0,0 +1,416 @@
+<template>
+    <div>
+      <div class="historyCharts" ref="chart_ref"></div>
+    </div>
+  </template>
+  
+  <script>
+  import * as echarts from "echarts";
+  export default {
+    props: {
+      temArray: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    data() {
+      return {
+        chartInstance: null,
+        option: {},
+        chartData1: [],
+        chartData2: [],
+        chartData3: [],
+        chartData4: [],
+        bottomData: [],
+      };
+    },
+    watch: {
+      temArray: {
+        immediate: true, // 页面加载时立即触发一次监听
+        handler(newVal, oldVal) {
+          if (newVal) {
+            this.chartData1 = []; // 清空 chartData1
+            this.chartData2 = []; // 清空 chartData2
+            this.bottomData = []; // 清空 bottomData
+            console.log("charts传值", newVal);
+            let data = newVal;
+            if (data.length > 0) {
+              // 获取 title 和 titleStr 数组
+              const title = data.data[0].title;
+              const titleStr = data.data[1].titleStr;
+              // 获取 dataList 数组
+              const dataList = data.data[3].dataList;
+  
+              // 遍历 dataList 数组
+              dataList.forEach((item) => {
+                // 查找 name 在 title 数组中的索引
+                const index = title.indexOf(item.name);
+                if (index !== -1) {
+                  // 若找到匹配项，则将 name 替换为 titleStr 中对应位置的值
+                  item.name = titleStr[index];
+                }
+              });
+              console.log("处理后的data", data);
+              data.forEach((item) => {
+                if (item.timeStr) {
+                  this.bottomData = item.timeStr;
+                }
+                if (item.dataList) {
+                  let name1 = "";
+                  let name2 = "";
+                  let name3 = "";
+                  let name4 = "";
+                  item.dataList.forEach((val, index) => {
+                    if (val.name) {
+                      switch (index) {
+                        case 0:
+                          this.chartData1 = val.value;
+                          name1 = val.name;
+                          break;
+                        case 1:
+                          this.chartData2 = val.value;
+                          name2 = val.name;
+                          break;
+                        case 2:
+                          this.chartData3 = val.value;
+                          name3 = val.name;
+                          break;
+                        case 3:
+                          this.chartData4 = val.value;
+                          name4 = val.name;
+                          break;
+                        default:
+                          break;
+                      }
+                    }
+                  });
+                }
+              });
+              this.$nextTick(() => {
+                const adapterOption = {
+                  xAxis: {
+                    data: this.bottomData,
+                  },
+                  series: [
+                    {
+                      yAxisIndex: 0,
+                      name:name1,
+                      data: this.chartData1,
+                    },
+                    {
+                      yAxisIndex: 0,
+                      name:name2,
+                      data: this.chartData2,
+                    },
+                    {
+                      yAxisIndex: 0,
+                      name:name3,
+                      data: this.chartData3,
+                    },
+                    {
+                      yAxisIndex: 0,
+                      name:name4,
+                      data: this.chartData4,
+                    },
+                  ],
+                };
+                this.chartInstance.setOption(adapterOption);
+                //手动的调用图标对象的resize才能产生效果
+                this.chartInstance.resize();
+              });
+            } else {
+              this.$nextTick(() => {
+                const adapterOption = {
+                  xAxis: {
+                    data: [],
+                  },
+                  series: [
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                    {
+                      yAxisIndex: 0,
+                      data: [],
+                    },
+                  ],
+                };
+                this.chartInstance.setOption(adapterOption);
+                //手动的调用图标对象的resize才能产生效果
+                this.chartInstance.resize();
+                this.screenAdapter();
+              });
+            }
+          }
+        },
+      },
+    },
+    mounted() {
+      this.initChart();
+      this.screenAdapter();
+    },
+    destroyed() {
+      //取消监听器
+      window.removeEventListener("resize", this.screenAdapter);
+    },
+    methods: {
+      // 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据
+      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: 0,
+              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,
+                //折线颜色
+                itemStyle: {
+                  color: "#1a69f1", //折线点的颜色
+                },
+                lineStyle: {
+                  color: "#1a69f1", //折线点的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                // 区域填充样式，添加渐变背景
+                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,
+                //折线颜色
+                itemStyle: {
+                  color: "#00CED1", //折线的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                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
+                  },
+                },
+              },
+              {
+                type: "line",
+                // 拐点大小
+                symbolSize: 8,
+                data: this.chartData3,
+                //折线颜色
+                itemStyle: {
+                  color: "#00CED1", //折线的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                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
+                  },
+                },
+              },
+              {
+                type: "line",
+                // 拐点大小
+                symbolSize: 8,
+                data: this.chartData4,
+                //折线颜色
+                itemStyle: {
+                  color: "#00CED1", //折线的颜色
+                },
+                smooth: false,
+                // 不显示折线点
+                showSymbol: false,
+                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 元素");
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .historyCharts {
+    width: 100%;
+    height:3rem;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
index e22a076..eb79da9 100644
--- a/src/views/centerairC/sysMonitor/hostDetails.vue
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -139,7 +139,7 @@
           </div>
           <div class="hostStatus-li">
             <span>运行累计时间:</span>
-            <span class="timeData">{{ timeObj.showValue }}</span>
+            <span class="timeData">{{ timeObj.showValue }}小时</span>
           </div>
         </div>
         <div class="detail-data hostparams">
@@ -850,7 +850,7 @@ export default {
             // width: 100%;
             margin-right: 0.1rem;
             position: relative;
-            color: #2980b9;
+            color: #89acc4;
             font-family: Arial, sans-serif;
             letter-spacing: 0.02rem;
             font-size: 0.18rem;
@@ -1011,7 +1011,9 @@ export default {
       .dotData {
         font-weight: bold;
         margin: 0 0.06rem;
-        color: #3d8df5;
+        color: #3b80ff;
+        display: flex;
+        align-items: center;
       }
       .goodData {
         font-weight: bold;
diff --git a/src/views/centerairC/sysMonitor/monitorCenter.vue b/src/views/centerairC/sysMonitor/monitorCenter.vue
index 3065812..76ac4ed 100644
--- a/src/views/centerairC/sysMonitor/monitorCenter.vue
+++ b/src/views/centerairC/sysMonitor/monitorCenter.vue
@@ -124,10 +124,10 @@
         <img class="step" src="../../../assets/images/step.png" alt="" />
         <div class="tips-text">{{ startOrStopStatus }}</div>
       </div>
-      <!-- <div class="funtion-menu1" @click="goPerformance">
+      <div class="funtion-menu1" @click="goPerformance">
         <div class="menu-title"><div>冷机性能统计</div></div>
         <img class="ditu" src="../../../assets/images/di.png" />
-      </div> -->
+      </div>
       <div class="funtion-menu1 menu2" @click="goControl">
         <div class="menu-title"><div>系统控制</div></div>
         <img class="ditu" src="../../../assets/images/di.png" />
@@ -753,7 +753,7 @@ export default {
     goPerformance() {
       // 退出全屏
       // this.exitFullscreen();
-      // this.$router.push("/performance");
+      this.$router.push("/performance");
     },
     // 系统控制
     goControl() {
diff --git a/src/views/centerairC/sysMonitor/performance.vue b/src/views/centerairC/sysMonitor/performance.vue
index d0719a9..aa3f206 100644
--- a/src/views/centerairC/sysMonitor/performance.vue
+++ b/src/views/centerairC/sysMonitor/performance.vue
@@ -46,11 +46,344 @@
     </div>
     <div class="host-detail">
       <div class="detail-top">
-        <div class="detail-top-left"></div>
-        <div class="detail-top-middle"></div>
-        <div class="detail-top-right"></div>
+        <div class="detail-top-left">
+          <div class="host-li">
+            <img
+              class="host-img"
+              src="../../../assets/images/host-img4.png"
+              alt=""
+            />
+            <div class="host-name">1号螺旋机</div>
+            <div class="detail-data hostparams">
+              <div class="detail-data-top">
+                <title-img></title-img>
+                <div class="details-title">冷机性能</div>
+                <title-img></title-img>
+              </div>
+              <div class="detail-data-bottom">
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时EER:</span>
+                      <span class="dotData">10.365</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时功率:</span>
+                      <span class="dotData">126</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时冷量:</span>
+                      <span class="dotData">1306</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li year-data">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年EER:</span>
+                      <span class="dotData">0.000</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年用电:</span>
+                      <span class="dotData">64098</span>
+                      <span class="dotUnit">kw/H</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年供电:</span>
+                      <span class="dotData">101365</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="host-li">
+            <img
+              class="host-img"
+              src="../../../assets/images/host-img4.png"
+              alt=""
+            />
+            <div class="host-name">2号螺旋机</div>
+            <div class="detail-data hostparams">
+              <div class="detail-data-top">
+                <title-img></title-img>
+                <div class="details-title">冷机性能</div>
+                <title-img></title-img>
+              </div>
+              <div class="detail-data-bottom">
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时EER:</span>
+                      <span class="dotData">10.365</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时功率:</span>
+                      <span class="dotData">126</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时冷量:</span>
+                      <span class="dotData">1306</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li year-data">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年EER:</span>
+                      <span class="dotData">0.000</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年用电:</span>
+                      <span class="dotData">64098</span>
+                      <span class="dotUnit">kw/H</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年供电:</span>
+                      <span class="dotData">101365</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="host-li">
+            <img
+              class="host-img"
+              src="../../../assets/images/host-img3.png"
+              alt=""
+            />
+            <div class="host-name">3号磁悬浮机</div>
+            <div class="detail-data hostparams">
+              <div class="detail-data-top">
+                <title-img></title-img>
+                <div class="details-title">冷机性能</div>
+                <title-img></title-img>
+              </div>
+              <div class="detail-data-bottom">
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时EER:</span>
+                      <span class="dotData">10.365</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时功率:</span>
+                      <span class="dotData">126</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>实时冷量:</span>
+                      <span class="dotData">1306</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li year-data">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年EER:</span>
+                      <span class="dotData">0.000</span>
+                      <span class="dotUnit">kw/kw</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年用电:</span>
+                      <span class="dotData">64098</span>
+                      <span class="dotUnit">kw/H</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="detail-data-li">
+                  <div class="rightDot">
+                    <div class="leftDot">
+                      <span>全年供电:</span>
+                      <span class="dotData">101365</span>
+                      <span class="dotUnit">kw</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-top-right">
+          <div class="detail-data hostparams">
+            <div class="detail-data-top">
+              <title-img></title-img>
+              <div class="details-title">系统性能</div>
+              <title-img></title-img>
+            </div>
+            <div class="detail-data-bottom">
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今日EER:</span>
+                    <span class="dotData">6.531</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今日用电:</span>
+                    <span class="dotData">367</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今日供冷:</span>
+                    <span class="dotData">2397</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li year-data">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当月EER:</span>
+                    <span class="dotData">6.131</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>今月用电:</span>
+                    <span class="dotData">27840</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当月供冷:</span>
+                    <span class="dotData">172069</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li year-data">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当年EER:</span>
+                    <span class="dotData">6.531</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当年用电:</span>
+                    <span class="dotData">105771</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span>当年供冷:</span>
+                    <span class="dotData">744519</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li year-data">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span class="dotTitle">累计EER:</span>
+                    <span class="dotData">5.531</span>
+                    <span class="dotUnit">kw/kw</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span class="dotTitle">累计用电:</span>
+                    <span class="dotData">1096628</span>
+                    <span class="dotUnit">kw/H</span>
+                  </div>
+                </div>
+              </div>
+              <div class="detail-data-li">
+                <div class="rightDot">
+                  <div class="leftDot">
+                    <span class="dotTitle">累计供冷:</span>
+                    <span class="dotData">6107983</span>
+                    <span class="dotUnit">kw</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="detail-bottom">
+        <performance-chart :temArray="temArray"></performance-chart>
       </div>
-      <div class="detail-bottom"></div>
     </div>
   </div>
 </template>
@@ -62,15 +395,12 @@ import {
   runTime,
 } from "@/api/centerairC/sysMonitor";
 import { alarmRecordList } from "@/api/alarm/alarmRecord";
-import { cpmList } from "@/api/device/gather";
-import LoadData from "./components/loadData.vue";
-import hostChart from "./components/hostChart.vue";
 import titleImg from "./components/titleImg.vue";
-import lineSquare from "./components/lineSquare.vue";
 import { format } from "@/utils/datetime";
+import PerformanceChart from './components/performanceChart.vue';
 export default {
   name: "sysControl",
-  components: { LoadData, hostChart, titleImg, lineSquare },
+  components: { titleImg, PerformanceChart },
   data() {
     return {
       loading: false,
@@ -78,7 +408,7 @@ export default {
       currentDate: new Date(),
       nowTimer: null,
       deviceName: "", //主机名称
-      hostData: [], //主机参数
+      hostData: [], //冷机性能
       rightHostData: [], //右
       automaticObj: {}, //手自动状态
       localObj: {}, //本地远程状态
@@ -321,23 +651,230 @@ export default {
       align-items: center;
       justify-content: space-between;
       .detail-top-left {
-        width: 7rem;
-        height: 4.4rem;
+        width: 14rem;
         // background-color: aquamarine;
         position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        .host-li {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin-left: 0.3rem;
+          position: relative;
+          .host-img {
+            width: 3.5rem;
+            height: 2.6rem;
+            margin-bottom: 0.1rem;
+          }
+          .host-name{
+            position: absolute;
+            top: 0.8rem;
+            left: 1.6rem;
+            color: #3520f8;
+            font-size: 0.18rem;
+            font-weight: bold;
+          }
+        }
       }
       .detail-top-right {
-        width: calc(100% - 7.25rem);
-        height: 4.4rem;
+        width: calc(100% - 14rem);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .detail-data {
+        display: flex;
+        flex-direction: column;
+        width: 4.5rem;
+        position: relative;
+        .detail-data-top {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          color: #c0dffc;
+          font-weight: bold;
+          font-size: 0.18rem;
+          width: 100%;
+          text-align: center;
+          z-index: 10;
+          .details-title {
+            margin: 0 0.15rem;
+          }
+        }
+        .detail-data-bottom {
+          width: 100%;
+          padding: 0rem 0.3rem;
+          z-index: 0;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          align-items: flex-start;
+          justify-content: center;
+          .detail-data-li {
+            width: 80%;
+            margin-right: 0.1rem;
+            position: relative;
+            color: #89acc4;
+            font-family: Arial, sans-serif;
+            letter-spacing: 0.02rem;
+            font-size: 0.18rem;
+            position: relative;
+            margin-bottom: 0.08rem;
+            border-left: 0.01rem solid #217df5;
+            border-right: 0.01rem solid #217df5;
+            background-image: radial-gradient(
+                circle at left top,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at right top,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at left bottom,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              ),
+              radial-gradient(
+                circle at right bottom,
+                #217df5 0.01rem,
+                transparent 0.01rem
+              );
+            background-repeat: no-repeat;
+            background-position: left top, right top, left bottom, right bottom;
+          }
+          .detail-data-li::before,
+          .detail-data-li::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0.01rem;
+            background-image: linear-gradient(
+              to right,
+              #217df5 0%,
+              rgba(41, 128, 185, 0) 50%,
+              #217df5 100%
+            ) !important;
+          }
+          .year-data {
+            margin-top: 0.1rem;
+          }
+          .rightDot {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            z-index: 999;
+          }
+          .leftDot {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            padding: 0.04rem 0.1rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            .dotData {
+              font-weight: bold;
+              margin: 0 0.06rem;
+              color: #3b80ff;
+              display: flex;
+              align-items: center;
+            }
+            .dotUnit{
+              width: 0.55rem;
+              text-align: left;
+              display: flex;
+              align-items: center;
+            }
+          }
+
+          .rightDot::before {
+            content: "";
+            position: absolute;
+            top: -0.03rem;
+            right: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+          }
+
+          .rightDot::after {
+            content: "";
+            position: absolute;
+            bottom: -0.03rem;
+            right: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+          }
+          .leftDot::before {
+            content: "";
+            position: absolute;
+            top: -0.03rem;
+            left: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            border-radius: 50%;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+          }
+
+          .leftDot::after {
+            content: "";
+            position: absolute;
+            bottom: -0.03rem;
+            left: -0.03rem;
+            width: 0.06rem;
+            height: 0.06rem;
+            background-color: #217df5;
+            box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
+            background-image: radial-gradient(
+              circle at 30% 30%,
+              rgba(255, 255, 255, 0.8) 0%,
+              rgba(255, 255, 255, 0) 70%
+            );
+            border-radius: 50%;
+          }
+        }
+        .line1 {
+          position: absolute;
+          top: 0.53rem;
+        }
       }
     }
     .detail-bottom {
-      height: 2.6rem;
-      margin-top: 0.3rem;
-      margin-left: 0.25rem;
+      // margin: 0.3rem 0.5rem 0 0.5rem;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
+      height:3rem;
+      // background-color: #217df5;
     }
   }
 }