diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 9c8e8acd..3648d437 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -1,4 +1,25 @@
 import request from "../request";
+//登录
+export function userloginApi(data) {
+  return request({
+    url: "/user/login",
+    method: "post",
+    data,
+  });
+}
+//退出
+
+//首页接口
+
+//装置总数
+export function getlistAllCountApi(data) {
+  return request({
+    url: "/modevtype/listAllCount",
+    method: "get",
+    data,
+  });
+}
+
 //获取新的树结构
 export function getTreeApi(data) {
   return request({
diff --git a/src/views/homePage/arrester/index.vue b/src/views/homePage/arrester/index.vue
new file mode 100644
index 00000000..3c2a375d
--- /dev/null
+++ b/src/views/homePage/arrester/index.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="arresterbox">
+    <h3>{{ pageCardTitle }}</h3>
+    <div class="cardContent">
+      <el-table
+        :data="arresterData"
+        height="100%"
+        border
+        highlight-current-row
+        size="mini"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="id" label="id" width="50"> </el-table-column>
+        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
+        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { monitoringListApi } from "@/utils/api/index";
+
+export default {
+  name: "arrester",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "避雷器",
+      arresterData: [],
+    };
+  },
+  created() {
+    this.getarresterdata();
+  },
+  methods: {
+    getarresterdata() {
+      monitoringListApi({
+        typeId: 4,
+      })
+        .then((res) => {
+          console.log(res);
+          this.arresterData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row, column, event) {
+      console.log(row); // 这里会打印出被点击的行的数据
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.arresterbox {
+  height: 100%;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .cardContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #296479;
+    cursor: pointer;
+  }
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #296479;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
+  }
+}
+</style>
diff --git a/src/views/homePage/clamp/index.vue b/src/views/homePage/clamp/index.vue
new file mode 100644
index 00000000..7e15e6f6
--- /dev/null
+++ b/src/views/homePage/clamp/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="clampBox">
+    <!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
+    <h3>{{ pageCardTitle }}</h3>
+    <div class="cardContent">
+      <el-table
+        :data="clmpData"
+        height="100%"
+        border
+        highlight-current-row
+        size="mini"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="id" label="id" width="50"> </el-table-column>
+        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
+        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { monitoringListApi } from "@/utils/api/index";
+export default {
+  name: "clamp",
+  data() {
+    return {
+      pageCardTitle: "铁芯",
+      clmpData: [],
+    };
+  },
+  created() {
+    this.getclampdata();
+  },
+  methods: {
+    getclampdata() {
+      monitoringListApi({
+        typeId: 2,
+      })
+        .then((res) => {
+          console.log(res);
+          this.clmpData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row, column, event) {
+      console.log(row); // 这里会打印出被点击的行的数据
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.clampBox {
+  background: url(../../../assets/card2Bg.png) no-repeat center;
+  background-size: 100% 100%;
+  position: relative;
+  height: 280px;
+  margin-bottom: 10px;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tendencyChartText {
+    writing-mode: vertical-lr;
+    position: absolute;
+    right: 8px;
+    top: 15px;
+    color: #fff;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0px;
+    text-align: left;
+    cursor: pointer;
+    &:hover {
+      color: #03bcff;
+    }
+  }
+  .cardContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #296479;
+    cursor: pointer;
+  }
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #296479;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
+  }
+}
+</style>
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index e50468a2..5a5eeead 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -4,22 +4,30 @@
       <div class="pageleftBox">
         <!-- <div class="divTop">我是上面</div> -->
         <oilChromatography></oilChromatography>
-        <div class="divcenter">我是上面2</div>
-        <div class="divBottom">我是上面3</div>
+        <clamp></clamp>
+        <windingTemperature></windingTemperature>
       </div>
     </div>
     <div class="homeCenter">
       <div class="pagecenterBox">
         <div class="divTop"></div>
         <div class="divcenter"></div>
-        <div class="divBottom"></div>
+        <div class="divBottom">
+          <warnMessage></warnMessage>
+        </div>
       </div>
     </div>
     <div class="homeRight">
       <div class="pagerightBox">
-        <div class="divTop"></div>
-        <div class="divcenter"></div>
-        <div class="divBottom"></div>
+        <div class="divTop">
+          <monitoringDevice></monitoringDevice>
+        </div>
+        <div class="divcenter">
+          <sf6></sf6>
+        </div>
+        <div class="divBottom">
+          <arrester></arrester>
+        </div>
       </div>
     </div>
   </div>
@@ -31,11 +39,25 @@
 // } from "@/utils/api/index";
 // import pageLeft from "./components/pageLeft";
 // import pageCenter from "./components/pageCenter";
-import oilChromatography from "./oilChromatography/index.vue";
+import oilChromatography from "./oilChromatography/index.vue"; //油色谱
+import clamp from "./clamp/index.vue"; //铁芯夹件
+import windingTemperature from "./windingTemperature/index.vue"; //绕组测温
+
+import monitoringDevice from "./monitoringDevice/index.vue"; //装置总数
+import sf6 from "./sf6/index.vue"; //sf6环境
+import arrester from "./arrester/index.vue"; //避雷器
+
+import warnMessage from "./warnMessage/index.vue"; //告警列表
 export default {
   name: "homepage",
   components: {
     oilChromatography,
+    clamp,
+    windingTemperature,
+    monitoringDevice,
+    sf6,
+    arrester,
+    warnMessage,
   },
   data() {
     return {};
@@ -59,7 +81,7 @@ export default {
   }
   .homeCenter {
     padding: 0px 10px;
-    flex: 1;
+    width: 60%;
     .pagecenterBox {
       display: flex;
       flex-direction: column;
@@ -99,23 +121,23 @@ export default {
     flex-direction: column;
     width: 100%;
     height: 100%;
-    .divTop,
-    .divcenter,
-    .divBottom {
-      background: url(../../assets/cardBg.png) no-repeat center;
-      background-size: 100% 100%;
-      position: relative;
-    }
+    // .divTop,
+    // .divcenter,
+    // .divBottom {
+    //   background: url(../../assets/cardBg.png) no-repeat center;
+    //   background-size: 100% 100%;
+    //   position: relative;
+    // }
     .divTop {
-      height: 280px;
+      height: 30%;
       margin-bottom: 10px;
     }
     .divcenter {
-      height: 270px;
+      height: 30%;
       margin-bottom: 10px;
     }
     .divBottom {
-      height: 270px;
+      height: 30%;
     }
   }
   .pagerightBox {
@@ -126,7 +148,7 @@ export default {
 
     .divcenter,
     .divBottom {
-      background: url(../../assets/cardBg.png) no-repeat center;
+      background: url(../../assets/card2Bg.png) no-repeat center;
       background-size: 100% 100%;
       position: relative;
     }
diff --git a/src/views/homePage/monitoringDevice/index.vue b/src/views/homePage/monitoringDevice/index.vue
new file mode 100644
index 00000000..d5fa4c9d
--- /dev/null
+++ b/src/views/homePage/monitoringDevice/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="monitoringDevice">
+    <h3>{{ pageCardTitle }} | {{ totalNum }}</h3>
+    <div class="devContent">
+      <el-table :data="devListArr" height="100%" border size="mini">
+        <el-table-column prop="mc" label="主设备类型"> </el-table-column>
+        <el-table-column prop="sensorCount" label="装置数量（个）">
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getlistAllCountApi } from "@/utils/api/index";
+
+export default {
+  name: "monitoringDevice",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "监测装置总数",
+      devListArr: [], //所有装置类型数组
+    };
+  },
+  created() {
+    this.getEquNum();
+  },
+  computed: {
+    // 计算属性，用于相加 sensorCount
+    totalNum() {
+      return this.devListArr.reduce((sum, item) => sum + item.sensorCount, 0);
+    },
+  },
+  methods: {
+    // 获取数量
+    getEquNum() {
+      getlistAllCountApi()
+        .then((res) => {
+          if (res.success) {
+            console.log(res.data);
+            //this.devListArr = res.data;
+            this.devListArr = res.data.filter((item) => item.sensorCount !== 0);
+            localStorage.setItem("devInfo", JSON.stringify(this.devListArr));
+            //this.totalNum = data.totalNum;
+          }
+        })
+        .catch((err) => {});
+      this.loading = true;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.monitoringDevice {
+  //background-color: #fcc;
+  height: 100%;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .devContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
+  }
+}
+</style>
diff --git a/src/views/homePage/oilChromatography/index.vue b/src/views/homePage/oilChromatography/index.vue
index 19c4d74c..b61d1e53 100644
--- a/src/views/homePage/oilChromatography/index.vue
+++ b/src/views/homePage/oilChromatography/index.vue
@@ -1,27 +1,62 @@
 <template>
   <div class="oilChromatographyBox">
-    <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
+    <!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
     <h3>{{ pageCardTitle }}</h3>
-    <div class="cardContent">我是内容</div>
+    <div class="cardContent">
+      <el-table
+        :data="oilData"
+        height="100%"
+        border
+        highlight-current-row
+        size="mini"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="id" label="id" width="50"> </el-table-column>
+        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
+        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
 <script>
+import { monitoringListApi } from "@/utils/api/index";
 export default {
   name: "oil",
   data() {
     return {
       pageCardTitle: "油色谱",
+      oilData: [],
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.getoildata();
+  },
+  methods: {
+    getoildata() {
+      monitoringListApi({
+        typeId: 1,
+      })
+        .then((res) => {
+          console.log(res);
+          this.oilData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row, column, event) {
+      console.log(row); // 这里会打印出被点击的行的数据
+    },
+  },
 };
 </script>
 
 <style lang="less">
 .oilChromatographyBox {
-  background: url(../../../assets/cardBg.png) no-repeat center;
+  background: url(../../../assets/card2Bg.png) no-repeat center;
   background-size: 100% 100%;
   position: relative;
   height: 280px;
@@ -56,8 +91,67 @@ export default {
     }
   }
   .cardContent {
-    padding: 10px 40px 9px 20px;
+    padding: 10px !important;
     box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #296479;
+    cursor: pointer;
+  }
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #296479;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
   }
 }
 </style>
diff --git a/src/views/homePage/sf6/index.vue b/src/views/homePage/sf6/index.vue
new file mode 100644
index 00000000..f42206f8
--- /dev/null
+++ b/src/views/homePage/sf6/index.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="sf6box">
+    <h3>{{ pageCardTitle }}</h3>
+    <div class="sfContent">
+      <el-table
+        :data="sf6Data"
+        height="100%"
+        border
+        highlight-current-row
+        size="mini"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="id" label="id" width="50"> </el-table-column>
+        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
+        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { monitoringListApi } from "@/utils/api/index";
+export default {
+  name: "sf6",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "SF6环境",
+      devArr: "",
+      sf6Data: [],
+    };
+  },
+  mounted() {
+    // 在组件挂载时尝试从localStorage加载数据
+    this.getLocalStorage();
+  },
+  created() {
+    this.getsf6data();
+  },
+  methods: {
+    //获取装置类型
+    getLocalStorage() {
+      this.devArr = JSON.parse(localStorage.getItem("devInfo"));
+      console.log(this.devArr);
+    },
+    getsf6data() {
+      monitoringListApi({
+        typeId: 61,
+        pageNum: 0,
+        pageSize: 1000,
+      })
+        .then((res) => {
+          console.log(res);
+          this.sf6Data = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row, column, event) {
+      console.log(row); // 这里会打印出被点击的行的数据
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.sf6box {
+  height: 100%;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .sfContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #296479;
+    cursor: pointer;
+  }
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #296479;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
+  }
+}
+</style>
diff --git a/src/views/homePage/warnMessage/index.vue b/src/views/homePage/warnMessage/index.vue
new file mode 100644
index 00000000..3c381ee5
--- /dev/null
+++ b/src/views/homePage/warnMessage/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="warnmessageBox">
+    <h3>
+      <span class="arrows1">&gt;</span><span class="arrows2">&gt;</span>
+      <span class="arrows3">&gt;</span> {{ pageCardTitle }}
+      <span class="arrows3">&lt;</span><span class="arrows2">&lt;</span>
+      <span class="arrows1">&lt;</span>
+    </h3>
+    <div class="cardContent">
+      <el-table
+        ref="restauranttable"
+        :data="tableData"
+        class="tableHi"
+        height="192px"
+      >
+        <el-table-column align="center" prop="warnTime" label="报警时间">
+        </el-table-column>
+        <el-table-column align="center" prop="deviceName" label="设备名称">
+        </el-table-column>
+        <el-table-column align="center" prop="warnDesc" label="告警信息">
+          <template slot-scope="scope">
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="scope.row.warnDesc"
+              placement="top"
+            >
+              <span> {{ scope.row.warnDesc }}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="warningCount" label="告警次数">
+        </el-table-column>
+        <el-table-column align="center" prop="warningValue" label="当前值">
+        </el-table-column>
+        <el-table-column align="center" prop="threadval" label="告警阈值">
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="120">
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="particulars(scope.$index, scope.row)"
+              type="text"
+              size="small"
+            >
+              查看详情
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "warnmessage",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "告警/故障信息",
+      tableData: [],
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="less">
+.warnmessageBox {
+  padding: 0px 10px;
+  h3 {
+    height: 38px;
+    line-height: 38px;
+    box-sizing: border-box;
+    color: #fff;
+    font-weight: normal;
+    text-align: left;
+    //display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px dashed #fff;
+    /* 警告标题箭头 */
+    .arrows3 {
+      color: #fff;
+    }
+    .arrows2 {
+      color: rgba(256, 256, 256, 0.5);
+    }
+    .arrows1 {
+      color: rgba(256, 256, 256, 0.15);
+    }
+  }
+  .cardContent {
+    margin-top: 10px;
+
+    .el-table th.el-table__cell {
+      background-color: transparent;
+    }
+    .el-table thead {
+      color: #fff;
+    }
+    .el-table {
+      background-color: transparent;
+      color: #fff;
+      tr {
+        background: transparent;
+      }
+    }
+    .el-table--small .el-table__cell {
+      padding: 2px 0;
+    }
+    .el-table__empty-text {
+      color: #fff;
+    }
+    .el-table::before {
+      height: 0;
+    }
+  }
+}
+</style>
diff --git a/src/views/homePage/windingTemperature/index.vue b/src/views/homePage/windingTemperature/index.vue
new file mode 100644
index 00000000..c4cf9851
--- /dev/null
+++ b/src/views/homePage/windingTemperature/index.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="windingTemperatureBox">
+    <!-- <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div> -->
+    <h3>{{ pageCardTitle }}</h3>
+    <div class="cardContent">
+      <el-table
+        :data="windData"
+        height="100%"
+        border
+        highlight-current-row
+        size="mini"
+        @row-click="handleRowClick"
+      >
+        <el-table-column prop="id" label="id" width="50"> </el-table-column>
+        <!-- <el-table-column prop="jgName" label="间隔"> </el-table-column> -->
+        <el-table-column prop="zsbName" label="主设备名称"> </el-table-column>
+        <el-table-column prop="name" label="名称"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { monitoringListApi } from "@/utils/api/index";
+export default {
+  name: "windingTemperature",
+  data() {
+    return {
+      pageCardTitle: "夹件",
+      windData: [],
+    };
+  },
+  created() {
+    this.getwinddata();
+  },
+  methods: {
+    getwinddata() {
+      monitoringListApi({
+        typeId: 3,
+      })
+        .then((res) => {
+          console.log(res);
+          this.windData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row, column, event) {
+      console.log(row); // 这里会打印出被点击的行的数据
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.windingTemperatureBox {
+  background: url(../../../assets/card2Bg.png) no-repeat center;
+  background-size: 100% 100%;
+  position: relative;
+  height: 280px;
+  margin-bottom: 10px;
+  h3 {
+    height: 50px;
+    line-height: 50px;
+    padding: 0px 60px 0px 20px;
+    box-sizing: border-box;
+    color: #03bcff;
+    font-weight: normal;
+    text-align: left;
+    display: flex;
+    font-size: 16px;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .tendencyChartText {
+    writing-mode: vertical-lr;
+    position: absolute;
+    right: 8px;
+    top: 15px;
+    color: #fff;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0px;
+    text-align: left;
+    cursor: pointer;
+    &:hover {
+      color: #03bcff;
+    }
+  }
+  .cardContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: calc(100% - 52px);
+    .el-table--mini .el-table__cell {
+      padding: 3px 0;
+      text-align: center;
+      color: #03bcff;
+    }
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+      border-bottom: 1px solid #03bcff;
+    }
+    .el-table--border .el-table__cell {
+      border-right: 1px solid #03bcff;
+    }
+    .el-table {
+      border: 1px solid #03bcff;
+      background-color: transparent; /* 设置为透明背景 */
+      tr {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+      th.el-table__cell {
+        background-color: transparent; /* 设置为透明背景 */
+      }
+    }
+    .el-table__row,
+    .el-table__body-wrapper {
+      background-color: transparent; /* 确保行和单元格也是透明的 */
+    }
+  }
+  .el-table::before {
+    height: 0px;
+  }
+  .el-table--border::after,
+  .el-table--group::after {
+    width: 0px;
+  }
+  .el-table--border th.el-table__cell.gutter:last-of-type {
+    //background: #03bcff !important;
+    border-bottom: 1px solid #03bcff;
+  }
+  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+    background-color: #296479;
+    cursor: pointer;
+  }
+  .el-table__body tr.current-row > td.el-table__cell {
+    background-color: #296479;
+  }
+  ::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    background-color: #03bcff;
+    /* 关键代码 */
+    border-radius: 32px;
+  }
+  /* 滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 32px;
+  }
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index da41e96f..51eff550 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -12,8 +12,8 @@
             class="ms-content"
             size="medium"
           >
-            <el-form-item prop="userName">
-              <el-input v-model="userInfo.userName" placeholder="用户名">
+            <el-form-item prop="name">
+              <el-input v-model="userInfo.name" placeholder="用户名">
                 <span slot="prepend" class="el-icon-user"></span>
               </el-input>
             </el-form-item>
@@ -41,6 +41,8 @@
 <script>
 import * as THREE from "three";
 import threejs from "./threejs";
+
+import { userloginApi } from "@/utils/api/index";
 export default {
   components: {
     threejs,
@@ -48,13 +50,11 @@ export default {
   data: function () {
     return {
       userInfo: {
-        userName: "",
+        name: "",
         password: "",
       },
       rules: {
-        userName: [
-          { required: true, message: "请输入用户名", trigger: "blur" },
-        ],
+        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
         password: [
           { required: true, message: "请输入密码", trigger: "blur" },
           // { min: 6, max: 8, message: "请输入6-8位字符", trigger: "blur" },
@@ -69,49 +69,55 @@ export default {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           console.log(this.userInfo);
-          if (
-            (this.userInfo.userName == "admin" &&
-              this.userInfo.password == "shxy123456") ||
-            (this.userInfo.userName == "cacuser" &&
-              this.userInfo.password == "cac123456")
-          ) {
-            localStorage.setItem("token", "13747c96ff9f434cb09ecf78e4b9a8bc");
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "登录成功",
-              type: "success",
-            });
-            this.$router.push("/");
-            return;
-          } else {
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "账号密码错误，请重新输入！",
-              type: "warning",
-            });
-            return;
-          }
+          // if (
+          //   (this.userInfo.userName == "admin" &&
+          //     this.userInfo.password == "shxy123456") ||
+          //   (this.userInfo.userName == "cacuser" &&
+          //     this.userInfo.password == "cac123456")
+          // ) {
+          //   localStorage.setItem("token", "13747c96ff9f434cb09ecf78e4b9a8bc");
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "登录成功",
+          //     type: "success",
+          //   });
+          //   this.$router.push("/");
+          //   return;
+          // } else {
+          //   this.$message({
+          //     duration: 1500,
+          //     showClose: true,
+          //     message: "账号密码错误，请重新输入！",
+          //     type: "warning",
+          //   });
+          //   return;
+          // }
           //注释
-          // loginJoggle(this.userInfo)
-          //   .then((res) => {
-          //     if (res.code == 200) {
-          //       this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
-          //       this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
-          //       console.log(res.data);
-          //       this.$router.push("/weather");
-          //       this.$message({
-          //         duration: 1500,
-          //         showClose: true,
-          //         message: "登录成功",
-          //         type: "success",
-          //       });
-          //     } else {
-          //       this.$message.error(res.msg);
-          //     }
-          //   })
-          //   .catch((err) => {});
+          userloginApi(this.userInfo)
+            .then((res) => {
+              if (res.success) {
+                console.log(res.data);
+                //this.$router.push("/weather");
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: "登录成功",
+                  type: "success",
+                });
+                this.$router.push("/");
+                return;
+              } else {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: res.errorMsg,
+                  type: "warning",
+                });
+                return;
+              }
+            })
+            .catch((err) => {});
         } else {
           this.$message.error("请输入账号和密码");
           console.log("error submit!!");