diff --git a/dist/index.html b/dist/index.html
index 4818ac45..60935942 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cacfrontend</title><script defer="defer" src="static/js/chunk-vendors.ff5c292b.js"></script><script defer="defer" src="static/js/app.6a623dc1.js"></script><link href="static/css/app.c8924e65.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cacfrontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>cacfrontend</title><script defer="defer" src="static/js/chunk-vendors.ff5c292b.js"></script><script defer="defer" src="static/js/app.588219af.js"></script><link href="static/css/app.c8924e65.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but cacfrontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
diff --git a/dist/static/img/loginbg.29b5129b.jpg b/dist/static/img/loginbg.29b5129b.jpg
deleted file mode 100644
index bc32498f..00000000
Binary files a/dist/static/img/loginbg.29b5129b.jpg and /dev/null differ
diff --git a/dist/static/img/loginmain.b930c8be.png b/dist/static/img/loginmain.b930c8be.png
deleted file mode 100644
index c3467699..00000000
Binary files a/dist/static/img/loginmain.b930c8be.png and /dev/null differ
diff --git a/package-lock.json b/package-lock.json
index 21f23641..2aa2e9ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8454,6 +8454,11 @@
         "csstype": "^3.1.0"
       }
     },
+    "vue-cookies": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-cookies/-/vue-cookies-1.8.3.tgz",
+      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
+    },
     "vue-eslint-parser": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
diff --git a/package.json b/package.json
index 482a8e18..8d2e2d53 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "px2rem-loader": "^0.1.9",
     "three": "^0.158.0",
     "vue": "^2.6.14",
+    "vue-cookies": "^1.8.3",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },
diff --git a/src/assets/card2Bg.png b/src/assets/card2Bg.png
new file mode 100644
index 00000000..8acb3685
Binary files /dev/null and b/src/assets/card2Bg.png differ
diff --git a/src/assets/card3Bg.png b/src/assets/card3Bg.png
new file mode 100644
index 00000000..d9ed45f7
Binary files /dev/null and b/src/assets/card3Bg.png differ
diff --git a/src/assets/cardBg.png b/src/assets/cardBg.png
new file mode 100644
index 00000000..dc4127e6
Binary files /dev/null and b/src/assets/cardBg.png differ
diff --git a/src/components/Home.vue b/src/components/Home.vue
index a2f6ad54..d919d616 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -31,7 +31,6 @@ export default {
   background-image: url(../assets/bg_CAC.png);
   background-size: cover;
   background-position: center center;
-
   .content-box {
     width: 100%;
     height: calc(100% - 72px);
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 27afb2a8..6671ada3 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="sidebarBox">
     <ul class="menuBoxUl">
+      <li class="menuItem" @click="linkHome()">
+        <a>首页</a>
+      </li>
       <li class="menuItem" v-for="(item, index) in routeItem" :key="index">
         <router-link :to="item.path"> {{ item.name }} </router-link>
       </li>
@@ -12,15 +15,21 @@
 export default {
   data() {
     return {
+      hostName: "",
+      isProduction: "",
       routeItem: [
+        // {
+        //   path: "/home",
+        //   name: "首页",
+        // },
         {
           path: "/dataReport",
           name: "数据报表",
         },
-        // {
-        //   path: "/equipment",
-        //   name: "设备台账管理",
-        // },
+        {
+          path: "/equipment",
+          name: "设备台账管理",
+        },
         // {
         //   path: "/systemManagement",
         //   name: "系统管理",
@@ -32,8 +41,26 @@ export default {
       ],
     };
   },
+  mounted() {
+    console.log(window.location.host);
+    console.log(process.env.NODE_ENV);
+    this.isProduction = process.env.NODE_ENV === "production";
+    if (this.isProduction) {
+      // 使用服务器IP或域名作为图片地址
+      this.hostName = window.location.origin;
+      console.log("aaaaaaaaaaaa");
+    } else {
+      // 使用代理的 target 作为图片地址（开发环境）
+      console.log("开发环境");
+      this.hostName = "http://localhost:9527/#/"; // 这里使用你的本地 target 地址
+    }
+  },
   watch: {},
-  methods: {},
+  methods: {
+    linkHome() {
+      window.location.href = this.hostName;
+    },
+  },
   created() {},
 };
 </script>
diff --git a/src/components/header.vue b/src/components/header.vue
index 5fd0c356..aff65f34 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -42,6 +42,7 @@ export default {
   },
   data() {
     return {
+      hostName: "",
       currentTime: null,
       userName: localStorage.getItem("userName"),
       role: localStorage.getItem("role"),
@@ -64,8 +65,11 @@ export default {
             message: "退出成功",
             type: "success",
           });
-          this.$store.commit("REMOVE_INFO");
-          this.$router.push("/login");
+          //this.$store.commit("REMOVE_INFO");
+          // this.$router.push("/login");
+          console.log(this.$cookies.get("Admin-Token"));
+          this.$cookies.remove("Admin-Token");
+          window.location.href = this.hostName + "/#/login";
           break;
       }
     },
@@ -76,6 +80,18 @@ export default {
     setInterval(() => {
       this.currentTime = new Date();
     }, 1000);
+    console.log(window.location.host);
+    console.log(process.env.NODE_ENV);
+    const isProduction = process.env.NODE_ENV === "production";
+    if (isProduction) {
+      // 使用服务器IP或域名作为图片地址
+      this.hostName = window.location.origin;
+      console.log("aaaaaaaaaaaa");
+    } else {
+      // 使用代理的 target 作为图片地址（开发环境）
+      console.log("开发环境");
+      this.hostName = "http://192.168.1.190:88"; // 这里使用你的本地 target 地址
+    }
   },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index a75cb1d5..5c574c43 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,9 @@ import "./utils/rem";
 //引入日期// 注册全局 moment
 import moment from "moment";
 Vue.prototype.$moment = moment;
+//cookies
+import VueCookies from "vue-cookies";
+Vue.use(VueCookies);
 
 //挂载弹出信息
 import { message } from "@/utils/resetMessage";
@@ -30,14 +33,15 @@ Vue.config.productionTip = false;
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 状态监测数据汇集系统`;
-  const token = localStorage.getItem("token");
-  if (!token && to.path !== "/login") {
-    next({
-      path: "/login",
-    });
-  } else {
-    next();
-  }
+  next();
+  // const token = localStorage.getItem("token");
+  // if (!token && to.path !== "/login") {
+  //   next({
+  //     path: "/login",
+  //   });
+  // } else {
+  //   next();
+  // }
 });
 
 new Vue({
diff --git a/src/router/index.js b/src/router/index.js
index ff344049..5c5b2c21 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,16 +4,24 @@ import VueRouter from "vue-router";
 Vue.use(VueRouter);
 
 const routes = [
-  {
-    path: "/login",
-    component: () => import("../views/login/index.vue"),
-    meta: { title: "登录" },
-  },
+  // {
+  //   path: "/login",
+  //   component: () => import("../views/login/index.vue"),
+  //   meta: { title: "登录" },
+  // },
   {
     path: "/",
     redirect: "/dataReport",
     component: () => import("../components/Home.vue"),
     children: [
+      // {
+      //   path: "/home",
+      //   component: () => import("../views/homePage/index.vue"),
+      //   name: "homepage",
+      //   meta: {
+      //     title: "首页",
+      //   },
+      // },
       {
         path: "/dataReport",
         component: () => import("../views/dataReport/index.vue"),
@@ -26,9 +34,52 @@ const routes = [
         path: "/equipment",
         component: () => import("../views/equipment/index.vue"),
         name: "equipment",
+        redirect: "/equipment/bdz",
         meta: {
           title: "设备台账管理",
         },
+        children: [
+          {
+            path: "/equipment/bdz",
+            component: () => import("../views/equipment/bdz/index.vue"),
+            name: "bdz",
+            meta: {
+              title: "变电站",
+            },
+          },
+          {
+            path: "/equipment/qyjg",
+            component: () => import("../views/equipment/qyjg/index.vue"),
+            name: "qyjg",
+            meta: {
+              title: "区域间隔",
+            },
+          },
+          {
+            path: "/equipment/sblx",
+            component: () => import("../views/equipment/sblx/index.vue"),
+            name: "sblx",
+            meta: {
+              title: "设备类型",
+            },
+          },
+          {
+            path: "/equipment/zsb",
+            component: () => import("../views/equipment/zsb/index.vue"),
+            name: "zsb",
+            meta: {
+              title: "主设备",
+            },
+          },
+          {
+            path: "/equipment/modevtype",
+            component: () => import("../views/equipment/modevtype/index.vue"),
+            name: "modevtype",
+            meta: {
+              title: "监测设备类型",
+            },
+          },
+        ],
       },
       {
         path: "/systemManagement",
diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index a3a4e2d0..297eefc4 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -103,10 +103,208 @@ export function colListApi(data) {
   });
 }
 
-// export function getexportApi() {
-//   return request({
-//     url: "/sensor/export",
-//     method: "post",
-//     responseType: "blob",
-//   });
-// }
+//设备台账管理列表api
+//变电站相关接口
+//新增
+export function bdzAddApi(data) {
+  return request({
+    url: "/bdz/add",
+    method: "post",
+    data,
+  });
+}
+
+//修改更新
+export function bdzUpdateApi(data) {
+  return request({
+    url: "/bdz/update",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function bdzDeleteApi(data) {
+  return request({
+    url: "/bdz/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询全部
+export function bdzListAllApi(data) {
+  return request({
+    url: "/bdz/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//区域间隔相关接口
+//新增
+export function areaAddApi(data) {
+  return request({
+    url: "/area/add",
+    method: "post",
+    data,
+  });
+}
+
+//修改更新
+export function areaUpdateApi(data) {
+  return request({
+    url: "/area/update",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function areaDeleteApi(data) {
+  return request({
+    url: "/area/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询全部
+export function areaListAllApi(data) {
+  return request({
+    url: "/area/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//主设备管理相关接口
+//新增
+export function zsbAddApi(data) {
+  return request({
+    url: "/zsb/add",
+    method: "post",
+    data,
+  });
+}
+
+//修改更新
+export function zsbUpdateApi(data) {
+  return request({
+    url: "/zsb/update",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function zsbDeleteApi(data) {
+  return request({
+    url: "/zsb/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询全部
+export function zsbListAllApi(data) {
+  return request({
+    url: "/zsb/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//设备类型相关接口
+//新增
+export function sblxAddApi(data) {
+  return request({
+    url: "/lx/add",
+    method: "post",
+    data,
+  });
+}
+
+//修改更新
+export function sblxUpdateApi(data) {
+  return request({
+    url: "/lx/update",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function sblxDeleteApi(data) {
+  return request({
+    url: "/lx/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询全部
+export function sblxListAllApi(data) {
+  return request({
+    url: "/lx/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//监测设备类型相关接口
+//新增
+export function modevtypeAddApi(data) {
+  return request({
+    url: "/modevtype/add",
+    method: "post",
+    data,
+  });
+}
+
+//修改更新
+export function modevtypeUpdateApi(data) {
+  return request({
+    url: "/modevtype/update",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function modevtypeDeleteApi(data) {
+  return request({
+    url: "/modevtype/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询全部
+export function modevtypeListAllApi(data) {
+  return request({
+    url: "/modevtype/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
diff --git a/src/views/dataReport/index.vue b/src/views/dataReport/index.vue
index 126deaca..aa67ea0e 100644
--- a/src/views/dataReport/index.vue
+++ b/src/views/dataReport/index.vue
@@ -481,7 +481,6 @@ export default {
 </script>
 <style lang="less">
 .dataReport {
-  display: flex;
   display: flex;
   height: 100%;
   //background: #fcc;
diff --git a/src/views/equipment/bdz/components/addbdzDialog.vue b/src/views/equipment/bdz/components/addbdzDialog.vue
new file mode 100644
index 00000000..d3ba3d78
--- /dev/null
+++ b/src/views/equipment/bdz/components/addbdzDialog.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="bdzAddBox">
+    <el-dialog
+      class="bdzAddDialogBox"
+      :title="title"
+      :visible.sync="bdzDialogshow"
+      width="520px"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="名称：" prop="mc">
+          <el-input v-model="formInfo.mc"></el-input>
+        </el-form-item>
+        <el-form-item label="坐标：" prop="coordinate">
+          <el-input v-model="formInfo.coordinate"></el-input>
+        </el-form-item>
+        <el-form-item label="电压等级：" prop="voltagegrade">
+          <el-input v-model="formInfo.voltagegrade"></el-input>
+        </el-form-item>
+        <el-form-item label="规模：" prop="scale">
+          <el-input v-model="formInfo.scale"></el-input>
+        </el-form-item>
+        <el-form-item label="描述：" prop="note">
+          <el-input v-model="formInfo.note"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { bdzAddApi, bdzUpdateApi } from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      bdzDialogshow: false,
+      formInfo: {},
+      rules: {
+        mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+
+      this.formInfo = JSON.parse(JSON.stringify(val));
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "添加电站") {
+            console.log(this.formInfo);
+            bdzAddApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getbdzAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          } else {
+            bdzUpdateApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getbdzAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.bdzDialogshow = true;
+    },
+    hide() {
+      this.bdzDialogshow = false;
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.bdzAddBox {
+  .bdzAddDialogBox {
+    .el-input-number--small {
+      width: 374px;
+      .el-input__inner {
+        text-align: left;
+      }
+    }
+    .el-input-number.is-controls-right[class*="small"] [class*="decrease"],
+    .el-input-number.is-controls-right[class*="small"] [class*="increase"] {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/bdz/index.vue b/src/views/equipment/bdz/index.vue
new file mode 100644
index 00000000..e64b1ade
--- /dev/null
+++ b/src/views/equipment/bdz/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="bdzBox">
+    <div class="reportHead">
+      <h3>变电站管理</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >添加电站</el-button
+      >
+      <div class="bdzTableBox">
+        <el-table
+          v-loading="bdzLoading"
+          :data="bdzTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column prop="id" label="ID"> </el-table-column>
+          <el-table-column prop="mc" label="名称"> </el-table-column>
+          <el-table-column prop="coordinate" label="坐标"></el-table-column>
+          <el-table-column prop="voltagegrade" label="电压等级">
+          </el-table-column>
+          <el-table-column prop="scale" label="规模"> </el-table-column>
+          <el-table-column prop="note" label="描述"> </el-table-column>
+          <el-table-column label="操作" width="200" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >编辑</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addbdzDialog ref="bdzAddRef" :title="title"></addbdzDialog>
+  </div>
+</template>
+<script>
+import { bdzDeleteApi, bdzListAllApi } from "@/utils/api/index";
+import addbdzDialog from "./components/addbdzDialog";
+export default {
+  components: {
+    addbdzDialog,
+  },
+  data() {
+    return {
+      bdzLoading: false,
+      bdzTableData: [],
+      title: "",
+    };
+  },
+  created() {},
+  mounted() {
+    this.getbdzAllList();
+  },
+  watch: {},
+  methods: {
+    getbdzAllList() {
+      this.bdzLoading = true;
+      bdzListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.bdzTableData = res.data;
+          this.bdzLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "添加电站";
+      this.$refs.bdzAddRef.display();
+      //this.$refs.bdzAddRef.getdataform(null);
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑";
+      this.$refs.bdzAddRef.display();
+      this.$refs.bdzAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          bdzDeleteApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getbdzAllList(); //刷新
+            } else {
+              this.$message.error(res.data);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.bdzBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .bdzTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/index.vue b/src/views/equipment/index.vue
index 5eefd842..daafb720 100644
--- a/src/views/equipment/index.vue
+++ b/src/views/equipment/index.vue
@@ -1,13 +1,51 @@
 <template>
   <div class="equiment">
-    <div class="leftTree">设备管理</div>
-    <div class="reportTable"></div>
+    <div class="equimentList">
+      <div class="sideNav">
+        <h3><i class="el-icon-s-tools"></i>设备台账</h3>
+        <ul class="navList">
+          <li v-for="(item, index) in navlist" :key="index">
+            <router-link :to="item.path">
+              <span>{{ item.name }}</span
+              ><i class="el-icon-arrow-right"></i>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="reportTable">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 <script>
 export default {
   data() {
-    return {};
+    return {
+      activeIndex: 0,
+      navlist: [
+        {
+          name: "变电站管理",
+          path: "/equipment/bdz",
+        },
+        {
+          name: "区域管理",
+          path: "/equipment/qyjg",
+        },
+        {
+          name: "主设备管理",
+          path: "/equipment/zsb",
+        },
+        {
+          name: "设备类型管理",
+          path: "/equipment/sblx",
+        },
+        {
+          name: "监测设备类型管理",
+          path: "/equipment/modevtype",
+        },
+      ],
+    };
   },
   methods: {},
 };
@@ -15,15 +53,129 @@ export default {
 <style lang="less">
 .equiment {
   display: flex;
-  .leftTree {
-    width: 200px;
-    height: 500px;
-    border: 1px solid #fff;
+  height: 100%;
+  .equimentList {
+    min-width: 240px;
+    max-width: 240px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
     margin-right: 24px;
+    background: rgba(8, 9, 36, 0.28);
+
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    //padding: 0px 12px;
+    .sideNav {
+      margin: 10px;
+
+      height: calc(100% - 20px);
+      background-color: #fff;
+    }
+    h3 {
+      font-weight: normal;
+      display: block;
+      height: 38px;
+      line-height: 36px;
+      margin: 0;
+      padding: 0 16px 0 16px;
+      -webkit-text-shadow: none !important;
+      text-shadow: none !important;
+      font-size: 14px;
+      text-decoration: none;
+      color: #262626;
+      display: flex;
+      align-items: center;
+      i {
+        margin-right: 6px;
+      }
+    }
+    .navList {
+      box-shadow: inset 0 4px 4px -2px rgba(0, 0, 0, 0.15),
+        inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15);
+      position: relative;
+      background-color: #fbfbfb;
+      li {
+        padding: 0 16px 0 38px;
+        color: #262626;
+        height: 38px;
+        line-height: 36px;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          z-index: 1;
+          left: 23px;
+          top: 0;
+          bottom: 19px;
+          border-left: 1px solid #e2e2e2;
+        }
+        &:hover {
+          a {
+            cursor: pointer;
+            color: #106cde;
+          }
+        }
+        a {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          color: #262626;
+          &::before {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            left: -18px;
+            top: 16px;
+            background-color: #fff;
+            border: 1px solid #e2e2e2;
+            z-index: 2;
+            border-radius: 4px;
+          }
+        }
+        .router-link-active {
+          color: #106cde;
+        }
+      }
+    }
   }
   .reportTable {
     flex: 1;
-    border: 1px solid #fff;
+    overflow-x: hidden;
+    background: rgba(8, 9, 36, 0.28);
+    // -webkit-backdrop-filter: blur(10px);
+    // backdrop-filter: blur(10px);
+    box-shadow: inset 0 4px 44px 0 #106cde;
+    padding: 0px 12px;
+    .reportHead {
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      h3 {
+        font-size: 14px;
+        color: #fff;
+        font-weight: normal;
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+    .el-table .el-table__cell {
+      text-align: center;
+    }
+    .editClass {
+      .el-link.el-link--primary {
+        margin-right: 14px;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/equipment/modevtype/components/addmodevtypeDialog.vue b/src/views/equipment/modevtype/components/addmodevtypeDialog.vue
new file mode 100644
index 00000000..48fb5b98
--- /dev/null
+++ b/src/views/equipment/modevtype/components/addmodevtypeDialog.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="modevtypeAddBox">
+    <el-dialog
+      class="modevtypeAddDialogBox"
+      :title="title"
+      :visible.sync="modevtypeDialogshow"
+      width="520px"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="设备名称：" prop="mc">
+          <el-input v-model="formInfo.mc"></el-input>
+        </el-form-item>
+        <el-form-item label="选择表名：">
+          <el-select v-model="formInfo.tablename">
+            <el-option
+              v-for="item in tableOptions"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  modevtypeAddApi,
+  modevtypeUpdateApi,
+  tableListApi,
+} from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      modevtypeDialogshow: false,
+      formInfo: {},
+      rules: {
+        mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+      tableOptions: [],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formInfo = JSON.parse(JSON.stringify(val));
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "添加监测类型") {
+            console.log(this.formInfo);
+            modevtypeAddApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getmodevtypeAllList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            modevtypeUpdateApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getmodevtypeAllList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取table表名
+    gettableList() {
+      tableListApi()
+        .then((res) => {
+          console.log(res);
+          this.tableOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    display() {
+      this.modevtypeDialogshow = true;
+      this.gettableList();
+    },
+    hide() {
+      this.modevtypeDialogshow = false;
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.modevtypeAddBox {
+  .modevtypeAddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/modevtype/index.vue b/src/views/equipment/modevtype/index.vue
new file mode 100644
index 00000000..8045935e
--- /dev/null
+++ b/src/views/equipment/modevtype/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="modevtypeBox">
+    <div class="reportHead">
+      <h3>监测设备类型管理</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >添加监测类型</el-button
+      >
+      <div class="modevtypeTableBox">
+        <el-table
+          v-loading="modevtypeLoading"
+          :data="modevtypeTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column prop="id" label="ID"> </el-table-column>
+          <el-table-column prop="mc" label="设备名称"> </el-table-column>
+          <el-table-column prop="tablename" label="表名"> </el-table-column>
+
+          <el-table-column label="操作" width="200" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >编辑</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addmodevtypeDialog
+      ref="modevtypeAddRef"
+      :title="title"
+    ></addmodevtypeDialog>
+  </div>
+</template>
+<script>
+import { modevtypeDeleteApi, modevtypeListAllApi } from "@/utils/api/index";
+import addmodevtypeDialog from "./components/addmodevtypeDialog";
+export default {
+  components: {
+    addmodevtypeDialog,
+  },
+  data() {
+    return {
+      modevtypeLoading: false,
+      modevtypeTableData: [],
+      title: "",
+    };
+  },
+  created() {},
+  mounted() {
+    this.getmodevtypeAllList();
+  },
+  watch: {},
+  methods: {
+    //获取所有区间间隔
+    getmodevtypeAllList() {
+      this.modevtypeLoading = true;
+      modevtypeListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.modevtypeTableData = res.data;
+          this.modevtypeLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "添加监测类型";
+      this.$refs.modevtypeAddRef.display();
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑";
+      this.$refs.modevtypeAddRef.display();
+      this.$refs.modevtypeAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          modevtypeDeleteApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getmodevtypeAllList(); //刷新
+            } else {
+              this.$message.error(res.data);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.modevtypeBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .modevtypeTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/qyjg/components/addqyjgDialog.vue b/src/views/equipment/qyjg/components/addqyjgDialog.vue
new file mode 100644
index 00000000..33565a2c
--- /dev/null
+++ b/src/views/equipment/qyjg/components/addqyjgDialog.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="qyjgAddBox">
+    <el-dialog
+      class="qyjgAddDialogBox"
+      :title="title"
+      :visible.sync="qyjgDialogshow"
+      width="520px"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="名称：" prop="mc">
+          <el-input v-model="formInfo.mc"></el-input>
+        </el-form-item>
+        <el-form-item label="所属电站：">
+          <el-select v-model="formInfo.bdzid">
+            <el-option
+              v-for="item in bdzOptions"
+              :key="item.id"
+              :label="item.mc"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { areaAddApi, areaUpdateApi, bdzListAllApi } from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      qyjgDialogshow: false,
+      formInfo: {
+        bdzid: "",
+        mc: "",
+      },
+      rules: {
+        mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+      bdzOptions: [],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formInfo = JSON.parse(JSON.stringify(val));
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "添加区域") {
+            console.log(this.formInfo);
+            areaAddApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getAreaAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          } else {
+            areaUpdateApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getAreaAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取所有电站列表
+    getbdzListAll() {
+      bdzListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.bdzOptions = res.data;
+          console.log(this.title);
+          if (this.title == "添加区域") {
+            console.log(this.formInfo);
+            this.formInfo.bdzid = this.bdzOptions[0].id;
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    display() {
+      this.qyjgDialogshow = true;
+      this.getbdzListAll();
+    },
+    hide() {
+      this.qyjgDialogshow = false;
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.qyjgAddBox {
+  .qyjgAddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/qyjg/index.vue b/src/views/equipment/qyjg/index.vue
new file mode 100644
index 00000000..c8705eca
--- /dev/null
+++ b/src/views/equipment/qyjg/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="qyjgBox">
+    <div class="reportHead">
+      <h3>区域管理</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >添加区域</el-button
+      >
+      <div class="qyjgTableBox">
+        <el-table
+          v-loading="qyjgLoading"
+          :data="qyjgTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column prop="id" label="ID"> </el-table-column>
+          <el-table-column prop="mc" label="区域名称"> </el-table-column>
+          <el-table-column prop="bdzName" label="所属电站"> </el-table-column>
+          <el-table-column label="操作" width="200" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >编辑</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addqyjgDialog ref="qyjgAddRef" :title="title"></addqyjgDialog>
+  </div>
+</template>
+<script>
+import { areaDeleteApi, areaListAllApi } from "@/utils/api/index";
+import addqyjgDialog from "./components/addqyjgDialog";
+export default {
+  components: {
+    addqyjgDialog,
+  },
+  data() {
+    return {
+      qyjgLoading: false,
+      qyjgTableData: [],
+      title: "",
+    };
+  },
+  created() {},
+  mounted() {
+    this.getAreaAllList();
+  },
+  watch: {},
+  methods: {
+    //获取所有区间间隔
+    getAreaAllList() {
+      this.qyjgLoading = true;
+      areaListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.qyjgTableData = res.data;
+          this.qyjgLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "添加区域";
+      this.$refs.qyjgAddRef.display();
+      //this.$refs.qyjgAddRef.getdataform(null);
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑";
+      this.$refs.qyjgAddRef.display();
+      this.$refs.qyjgAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          areaDeleteApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getAreaAllList(); //刷新
+            } else {
+              this.$message.error(res.data);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.qyjgBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .qyjgTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/sblx/components/addsblxDialog.vue b/src/views/equipment/sblx/components/addsblxDialog.vue
new file mode 100644
index 00000000..db65b828
--- /dev/null
+++ b/src/views/equipment/sblx/components/addsblxDialog.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="sblxAddBox">
+    <el-dialog
+      class="sblxAddDialogBox"
+      :title="title"
+      :visible.sync="sblxDialogshow"
+      width="520px"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="名称：" prop="mc">
+          <el-input v-model="formInfo.mc"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { sblxAddApi, sblxUpdateApi } from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      sblxDialogshow: false,
+      formInfo: {},
+      rules: {
+        mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+      bdzOptions: [],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formInfo = JSON.parse(JSON.stringify(val));
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "添加设备类型") {
+            console.log(this.formInfo);
+            sblxAddApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getsblxAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          } else {
+            sblxUpdateApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getsblxAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    display() {
+      this.sblxDialogshow = true;
+    },
+    hide() {
+      this.sblxDialogshow = false;
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.sblxAddBox {
+  .sblxAddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/sblx/index.vue b/src/views/equipment/sblx/index.vue
new file mode 100644
index 00000000..52f870d0
--- /dev/null
+++ b/src/views/equipment/sblx/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="sblxBox">
+    <div class="reportHead">
+      <h3>设备类型管理</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >添加设备类型</el-button
+      >
+      <div class="sblxTableBox">
+        <el-table
+          v-loading="sblxLoading"
+          :data="sblxTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column prop="id" label="ID"> </el-table-column>
+          <el-table-column prop="mc" label="设备名称"> </el-table-column>
+          <el-table-column label="操作" width="200" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >编辑</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addsblxDialog ref="sblxAddRef" :title="title"></addsblxDialog>
+  </div>
+</template>
+<script>
+import { sblxDeleteApi, sblxListAllApi } from "@/utils/api/index";
+import addsblxDialog from "./components/addsblxDialog";
+export default {
+  components: {
+    addsblxDialog,
+  },
+  data() {
+    return {
+      sblxLoading: false,
+      sblxTableData: [],
+      title: "",
+    };
+  },
+  created() {},
+  mounted() {
+    this.getsblxAllList();
+  },
+  watch: {},
+  methods: {
+    //获取所有区间间隔
+    getsblxAllList() {
+      this.sblxLoading = true;
+      sblxListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.sblxTableData = res.data;
+          this.sblxLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "添加设备类型";
+      this.$refs.sblxAddRef.display();
+      //this.$refs.sblxAddRef.getdataform(null);
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑";
+      this.$refs.sblxAddRef.display();
+      this.$refs.sblxAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          sblxDeleteApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getsblxAllList(); //刷新
+            } else {
+              this.$message.error(res.data);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.sblxBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .sblxTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/zsb/components/addzsbDialog.vue b/src/views/equipment/zsb/components/addzsbDialog.vue
new file mode 100644
index 00000000..4770e057
--- /dev/null
+++ b/src/views/equipment/zsb/components/addzsbDialog.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="zsbAddBox">
+    <el-dialog
+      class="zsbAddDialogBox"
+      :title="title"
+      :visible.sync="zsbDialogshow"
+      width="520px"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="所属电站：">
+          <el-select v-model="formInfo.bdzid" @change="changeJg">
+            <el-option
+              v-for="item in bdzOptions"
+              :key="item.id"
+              :label="item.mc"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属区域：">
+          <el-select v-model="formInfo.jgid">
+            <el-option
+              v-for="item in jgOptions"
+              :key="item.id"
+              :label="item.mc"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备类型：">
+          <el-select v-model="formInfo.lxid">
+            <el-option
+              v-for="item in sblxOptions"
+              :key="item.id"
+              :label="item.mc"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备名称：" prop="mc">
+          <el-input v-model="formInfo.mc"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  zsbAddApi,
+  zsbUpdateApi,
+  bdzListAllApi,
+  areaListAllApi,
+  sblxListAllApi,
+} from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      zsbDialogshow: false,
+      formInfo: {
+        bdzid: "",
+        jgid: "",
+        mc: "",
+      },
+      rules: {
+        mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+      bdzOptions: [],
+      jgOptions: [],
+      sblxOptions: [],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formInfo = JSON.parse(JSON.stringify(val));
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "添加主设备") {
+            console.log(this.formInfo);
+            zsbAddApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getzsbAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          } else {
+            zsbUpdateApi(this.formInfo)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getzsbAllList(); //刷新
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取所有电站列表
+    getbdzListAll() {
+      bdzListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.bdzOptions = res.data;
+          console.log(this.title);
+          if (this.title == "添加主设备") {
+            console.log(this.formInfo);
+            this.formInfo.bdzid = this.bdzOptions[0].id;
+          }
+          this.getareaListAll();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //选中电站展示区域
+    changeJg(val) {
+      console.log(val);
+      this.formInfo.bdzid = val;
+      this.getareaListAll();
+      this.formInfo.jgid = "";
+    },
+    //获取所有区域
+    getareaListAll() {
+      areaListAllApi({ bdzid: this.formInfo.bdzid })
+        .then((res) => {
+          console.log(res);
+          this.jgOptions = res.data;
+          console.log(this.title);
+          if (this.title == "添加主设备") {
+            console.log(this.formInfo);
+            this.formInfo.jgid = this.jgOptions[0].id;
+            this.formInfo.mc = "";
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //获取所有的设备类型管理
+    getsblxListAll() {
+      sblxListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.sblxOptions = res.data;
+          console.log(this.title);
+          if (this.title == "添加主设备") {
+            console.log(this.formInfo);
+            this.formInfo.lxid = this.sblxOptions[0].id;
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    display() {
+      this.zsbDialogshow = true;
+      this.getbdzListAll();
+      this.getsblxListAll();
+    },
+    hide() {
+      this.zsbDialogshow = false;
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.zsbAddBox {
+  .zsbAddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+  }
+}
+</style>
diff --git a/src/views/equipment/zsb/index.vue b/src/views/equipment/zsb/index.vue
new file mode 100644
index 00000000..68f63b6b
--- /dev/null
+++ b/src/views/equipment/zsb/index.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="zsbBox">
+    <div class="reportHead">
+      <h3>主设备管理</h3>
+    </div>
+    <div class="page-body">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAddClick"
+        >添加主设备</el-button
+      >
+      <div class="zsbTableBox">
+        <el-table
+          v-loading="zsbLoading"
+          :data="zsbTableData"
+          stripe
+          border
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column prop="id" label="ID"> </el-table-column>
+          <el-table-column prop="bdzName" label="所属电站"> </el-table-column>
+          <el-table-column prop="lxName" label="设备类型"> </el-table-column>
+          <el-table-column prop="jgName" label="所属间隔"> </el-table-column>
+          <el-table-column prop="mc" label="设备名称"> </el-table-column>
+          <el-table-column label="操作" width="200" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="primary"
+                @click="handleEditClick(scope.row)"
+                size="small"
+                icon="el-icon-document"
+                >编辑</el-link
+              >
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addzsbDialog ref="zsbAddRef" :title="title"></addzsbDialog>
+  </div>
+</template>
+<script>
+import { zsbDeleteApi, zsbListAllApi } from "@/utils/api/index";
+import addzsbDialog from "./components/addzsbDialog";
+export default {
+  components: {
+    addzsbDialog,
+  },
+  data() {
+    return {
+      zsbLoading: false,
+      zsbTableData: [],
+      title: "",
+    };
+  },
+  created() {},
+  mounted() {
+    this.getzsbAllList();
+  },
+  watch: {},
+  methods: {
+    //获取所有区间间隔
+    getzsbAllList() {
+      this.zsbLoading = true;
+      zsbListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.zsbTableData = res.data;
+          this.zsbLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "添加主设备";
+      this.$refs.zsbAddRef.display();
+      //this.$refs.zsbAddRef.getdataform(null);
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑";
+      this.$refs.zsbAddRef.display();
+      this.$refs.zsbAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除记录吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          zsbDeleteApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getzsbAllList(); //刷新
+            } else {
+              this.$message.error(res.data);
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.zsbBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>
diff --git a/src/views/homePage/index.vue b/src/views/homePage/index.vue
index 5913fa70..e50468a2 100644
--- a/src/views/homePage/index.vue
+++ b/src/views/homePage/index.vue
@@ -1,13 +1,42 @@
 <template>
-  <div class="homeBox">首页</div>
+  <div class="homeBox">
+    <div class="homeLeft">
+      <div class="pageleftBox">
+        <!-- <div class="divTop">我是上面</div> -->
+        <oilChromatography></oilChromatography>
+        <div class="divcenter">我是上面2</div>
+        <div class="divBottom">我是上面3</div>
+      </div>
+    </div>
+    <div class="homeCenter">
+      <div class="pagecenterBox">
+        <div class="divTop"></div>
+        <div class="divcenter"></div>
+        <div class="divBottom"></div>
+      </div>
+    </div>
+    <div class="homeRight">
+      <div class="pagerightBox">
+        <div class="divTop"></div>
+        <div class="divcenter"></div>
+        <div class="divBottom"></div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 // import {
 //   getTermStatistics,
 
 // } from "@/utils/api/index";
+// import pageLeft from "./components/pageLeft";
+// import pageCenter from "./components/pageCenter";
+import oilChromatography from "./oilChromatography/index.vue";
 export default {
-  name: "home",
+  name: "homepage",
+  components: {
+    oilChromatography,
+  },
   data() {
     return {};
   },
@@ -19,5 +48,101 @@ export default {
 </script>
 <style lang="less">
 .homeBox {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  .homeLeft,
+  .homeRight {
+    width: 20%;
+    height: 100%;
+  }
+  .homeCenter {
+    padding: 0px 10px;
+    flex: 1;
+    .pagecenterBox {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      .divTop,
+      .divcenter,
+      .divBottom {
+        position: relative;
+      }
+      .divTop {
+        height: 380px;
+        margin-bottom: 10px;
+        background: rgba(8, 9, 36, 0.28);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        box-shadow: inset 0 4px 44px 0 #106cde;
+      }
+      .divcenter {
+        height: 190px;
+        margin-bottom: 10px;
+        background: url(../../assets/card3Bg.png) no-repeat center;
+        background-size: 100% 100%;
+      }
+      .divBottom {
+        height: 248px;
+        background: rgba(255, 27, 27, 0.2);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        box-shadow: inset 0 4px 44px 0 rgba(235, 20, 20, 0.69);
+        border: 1px solid #ff1b1b;
+      }
+    }
+  }
+  .pageleftBox {
+    display: flex;
+    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 {
+      height: 280px;
+      margin-bottom: 10px;
+    }
+    .divcenter {
+      height: 270px;
+      margin-bottom: 10px;
+    }
+    .divBottom {
+      height: 270px;
+    }
+  }
+  .pagerightBox {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+
+    .divcenter,
+    .divBottom {
+      background: url(../../assets/cardBg.png) no-repeat center;
+      background-size: 100% 100%;
+      position: relative;
+    }
+    .divTop {
+      background: url(../../assets/card2Bg.png) no-repeat center;
+      background-size: 100% 100%;
+      height: 280px;
+      margin-bottom: 10px;
+    }
+    .divcenter {
+      height: 270px;
+      margin-bottom: 10px;
+    }
+    .divBottom {
+      height: 270px;
+    }
+  }
 }
 </style>
diff --git a/src/views/homePage/oilChromatography/index.vue b/src/views/homePage/oilChromatography/index.vue
new file mode 100644
index 00000000..19c4d74c
--- /dev/null
+++ b/src/views/homePage/oilChromatography/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="oilChromatographyBox">
+    <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
+    <h3>{{ pageCardTitle }}</h3>
+    <div class="cardContent">我是内容</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "oil",
+  data() {
+    return {
+      pageCardTitle: "油色谱",
+    };
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style lang="less">
+.oilChromatographyBox {
+  background: url(../../../assets/cardBg.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 40px 9px 20px;
+    box-sizing: border-box;
+  }
+}
+</style>
