新建分支

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

desktop.ini

@@ -0,0 +1,4 @@
+[ViewState]
+Mode=
+Vid=
+FolderType=Generic

package.json

@@ -18,6 +18,7 @@
     "three": "^0.158.0",
     "vue": "^2.6.14",
     "vue-cookies": "^1.8.3",
+    "vue-native-websocket": "^2.0.15",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

socket/index.js

@@ -0,0 +1,138 @@
+import { Notification } from "element-ui";
+
+let hasShownNotification = false;
+// WebSocket连接实例
+let socket = null;
+
+// 是否正在尝试重连
+let lockReconnect = false;
+
+// 心跳间隔，20秒
+const timeout = 20 * 1000;
+
+// 心跳定时器
+let timeoutObj = null;
+
+// 服务器无响应超时定时器
+let serverTimeoutObj = null;
+
+// 重连定时器
+let reconnectTimeout = null;
+
+// 初始化WebSocket连接
+const initWebSocket = () => {
+  if ("WebSocket" in window) {
+    const protocol = window.location.protocol === "https:" ? "wss://" : "ws://";
+    const wsPath = "/cac-api/websocket";
+    const wshost =
+      window.location.hostname === "localhost"
+        ? "192.168.1.190:88"
+        : window.location.host;
+    const wsUrl = protocol + wshost + wsPath;
+
+    socket = new WebSocket(wsUrl);
+
+    socket.onerror = webSocketOnError;
+    socket.onmessage = webSocketOnMessage;
+    socket.onclose = closeWebsocket;
+    socket.onopen = openWebsocket;
+  } else {
+    // 浏览器不支持WebSocket
+    console.error("您的浏览器不支持WebSocket");
+    // 这里可以添加更友好的提示方式，如使用Element UI的Notification
+  }
+};
+
+// 打开WebSocket连接时执行
+const openWebsocket = () => {
+  console.log("WebSocket链接成功");
+  startHeartbeat();
+};
+
+// 启动心跳
+const startHeartbeat = () => {
+  timeoutObj = setTimeout(() => {
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send("1"); // 发送心跳消息
+      console.log("发送心跳消息以保持WebSocket连接活跃");
+
+      // 如果需要，可以在这里添加检测服务器响应的逻辑
+      // 例如，设置一个服务器响应超时检测
+
+      // 递归调用以继续发送心跳
+      startHeartbeat();
+    } else {
+      // 如果WebSocket已经关闭，则不再发送心跳
+      console.log("WebSocket连接已关闭，停止发送心跳");
+      clearTimeout(timeoutObj); // 清除定时器
+    }
+  }, timeout);
+};
+
+// WebSocket错误处理
+const webSocketOnError = (e) => {
+  console.error("WebSocket发生错误:", e);
+  // 这里通常不需要立即重连，因为onclose会处理重连逻辑
+};
+
+// 处理接收到的消息
+const webSocketOnMessage = (e) => {
+  // 自定义事件，将接收到的数据派发给其他监听器
+  window.dispatchEvent(
+    new CustomEvent("onmessageWS", { detail: { data: e.data } })
+  );
+  // 收到消息后重置心跳定时器
+  resetHeartbeat();
+};
+
+// WebSocket关闭处理
+const closeWebsocket = (e) => {
+  console.log("WebSocket连接已关闭:", e);
+  // if (!hasShownNotification) {
+  //   Notification({
+  //     title: "告警",
+  //     message: "WebSocket连接已关闭",
+  //     position: "bottom-right",
+  //     type: "warning",
+  //     duration: 2000,
+  //   });
+  //   hasShownNotification = true; // 更新状态，防止再次显示
+  // }
+
+  // 清除所有定时器
+  clearTimeout(timeoutObj);
+  clearTimeout(serverTimeoutObj);
+  // 设置重连定时器
+  reconnectTimeout = setTimeout(() => {
+    initWebSocket();
+  }, 60 * 1000); // 60秒后重连
+};
+
+// 重置心跳定时器
+const resetHeartbeat = () => {
+  clearTimeout(timeoutObj);
+  clearTimeout(serverTimeoutObj);
+  startHeartbeat();
+};
+
+// 发送消息到WebSocket服务器
+const sendWebsocket = (data) => {
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(data);
+  } else {
+    console.error("WebSocket未连接，无法发送消息");
+  }
+};
+
+// 关闭WebSocket连接（通常不需要在前端主动调用，除非有特定需求）
+const close = () => {
+  if (socket) {
+    socket.close();
+  }
+};
+
+// 导出相关函数，以便在其他地方使用
+export default { initWebSocket, sendWebsocket, close };
+
+// 注意：关于离开页面不断开WebSocket连接的需求，这通常取决于浏览器的行为。
+// 在一些情况下，浏览器会在页面卸载时自动关闭WebSocket连接。

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import socketService from "../socket/index";
 export default {
   data() {
     return {
@@ -12,14 +13,31 @@ export default {
       htmlFontSize: 16, // 默认的html字体大小
     };
   },
-  mounted() {
+
+  async mounted() {
     this.setRemUnit();
     this.windowResize();
+    this.initWebSocket();
+    window.addEventListener("onmessageWS", this.getSocketData);
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.windowResize);
   },
   methods: {
+    async initWebSocket() {
+      console.log(this.$websocket);
+      this.$websocket.initWebSocket();
+    },
+    getSocketData(res) {
+      console.log(res);
+      this.$notify({
+        title: "告警",
+        message: res.detail.data,
+        position: "bottom-right",
+        type: "warning",
+        duration: 0,
+      });
+    },
     setRemUnit() {
       // 设置所有的rem单位
       const remUnit = () => {
@@ -37,6 +55,9 @@ export default {
       document.documentElement.style.fontSize = `${remUnit()}px`;
     },
   },
+  destroyed() {
+    this.$websocket.close();
+  },
 };
 </script>
 <style lang="less">

src/components/Home.vue

@@ -40,6 +40,7 @@ export default {
       padding: 12px;
       overflow-y: auto;
       box-sizing: border-box;
+      overflow-x: hidden;
     }
   }
 }

src/components/Sidebar.vue

@@ -1,13 +1,31 @@
 <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>
-    </ul>
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      router
+    >
+      <template v-for="item in routeItem">
+        <template v-if="item.subs">
+          <el-submenu :index="item.path" :key="item.path">
+            <template slot="title">
+              <span slot="title">{{ item.name }}</span>
+            </template>
+            <template v-for="subItem in item.subs">
+              <el-menu-item :index="subItem.path" :key="subItem.path">{{
+                subItem.name
+              }}</el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item :index="item.path" :key="item.path">
+            <span slot="title">{{ item.name }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
   </div>
 </template>
 
@@ -17,6 +35,7 @@ export default {
     return {
       hostName: "",
       isProduction: "",
+      activeIndex: "/home",
       routeItem: [
         {
           path: "/home",
@@ -34,13 +53,47 @@ export default {
         //   path: "/systemManagement",
         //   name: "系统管理",
         // },
+
+        {
+          path: "/61850config",
+          name: "61850配置",
+          subs: [
             {
               path: "/icdConfig",
               name: "icd配置",
             },
             {
               path: "/paramBinding",
-          name: "参数绑定",
+              name: "icd绑定",
+            },
+            {
+              path: "/rptparam",
+              name: "rptparam配置",
+            },
+            {
+              path: "/iecserver",
+              name: "IEC服务器",
+            },
+          ],
+        },
+
+        {
+          path: "/alarmRules",
+          name: "告警规则",
+        },
+        {
+          path: "/datago",
+          name: "数据转移",
+          subs: [
+            {
+              path: "/I2config",
+              name: "I2配置",
+            },
+            {
+              path: "/datatransfer",
+              name: "下载录波文件",
+            },
+          ],
         },
       ],
     };
@@ -64,14 +117,24 @@ export default {
       this.hostName = "http://localhost:9527/#/"; // 这里使用你的本地 target 地址
     }
   },
-  watch: {},
+  watch: {
+    $route() {
+      this.setCurrentRoute();
+    },
+  },
   methods: {
-    linkHome() {
-      console.log(this.hostName);
-      window.location.href = this.hostName;
+    setCurrentRoute() {
+      console.log(this.$route.path);
+      this.$nextTick(() => {
+        this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
+        console.log(this.activeIndex);
+        localStorage.setItem("menuActive", this.activeIndex);
+      });
+    },
   },
+  created() {
+    this.setCurrentRoute();
   },
-  created() {},
 };
 </script>
 
@@ -81,6 +144,71 @@ export default {
   // margin: 0 auto;
   display: flex;
   align-items: center;
+  width: 100%;
+  .el-menu {
+    background: transparent;
+    border-bottom: none;
+    height: 40px;
+    line-height: 40px;
+    width: 100%;
+    display: flex;
+    //justify-content: space-around;
+    li {
+      margin-right: 2%;
+    }
+  }
+  .el-menu--horizontal > .el-menu-item {
+    background-image: url(../assets/menu.png);
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    width: 120px;
+    text-align: center;
+    color: #fff;
+    border-bottom: 0px solid transparent;
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title {
+    background-image: url(../assets/menu.png);
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    width: 120px;
+    text-align: center;
+    color: #fff;
+    border-bottom: 0px solid transparent;
+  }
+  .el-submenu__title i {
+    color: #fff;
+  }
+  .el-menu--horizontal > .el-menu-item.is-active {
+    color: #6de1ff;
+    border-bottom: 0px solid #337ab7;
+  }
+  .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+    color: #6de1ff;
+    border-bottom: 0px solid #337ab7;
+    i {
+      color: #6de1ff;
+    }
+  }
+  .el-menu-item:focus,
+  .el-menu-item:hover {
+    background-color: transparent !important;
+    color: #6de1ff !important;
+  }
+  .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+    background-color: transparent !important;
+    color: #6de1ff !important;
+    i {
+      color: #6de1ff;
+    }
+  }
   .menuBoxUl {
     flex: 1;
     display: flex;
@@ -94,7 +222,8 @@ export default {
       align-items: center;
       cursor: pointer;
       font-size: 14px;
-      margin-right: 32px;
+      margin-right: 16px;
+      width: 100px;
       a {
         color: #fff;
         background-image: url(../assets/menu.png);
@@ -104,6 +233,8 @@ export default {
         background-size: 100% 100%;
         background-repeat: no-repeat;
         overflow: hidden;
+        width: 100px;
+        text-align: center;
       }
       .router-link-active {
         color: #6de1ff;

src/components/header.vue

@@ -65,11 +65,12 @@ export default {
             message: "退出成功",
             type: "success",
           });
+          localStorage.clear();
           //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";
+          this.$router.push("/login");
+          // console.log(this.$cookies.get("Admin-Token"));
+          // this.$cookies.remove("Admin-Token");
+          // window.location.href = this.hostName + "/#/login";
           break;
       }
     },

src/main.js

@@ -10,6 +10,10 @@ Vue.use(ElementUI, {
   size: "small",
 });
 
+//websocket
+import websocket from "../socket/index";
+Vue.prototype.$websocket = websocket;
+
 //引入Echarts;
 import * as echarts from "echarts";
 Vue.prototype.$echarts = echarts;
@@ -33,15 +37,15 @@ Vue.config.productionTip = false;
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 状态监测数据汇集系统`;
+  //next();
+  const token = localStorage.getItem("token");
+  if (!token && to.path !== "/login") {
+    next({
+      path: "/login",
+    });
+  } else {
     next();
-  // const token = localStorage.getItem("token");
-  // if (!token && to.path !== "/login") {
-  //   next({
-  //     path: "/login",
-  //   });
-  // } else {
-  //   next();
-  // }
+  }
 });
 
 new Vue({

src/router/index.js

@@ -11,7 +11,7 @@ const routes = [
   },
   {
     path: "/",
-    redirect: "/dataReport",
+    redirect: "/home",
     component: () => import("../components/Home.vue"),
     children: [
       {
@@ -127,9 +127,109 @@ const routes = [
         component: () => import("../views/paramBinding/index.vue"),
         name: "paramBinding",
         meta: {
-          title: "参数绑定",
+          title: "icd绑定",
         },
       },
+      {
+        path: "/rptparam",
+        component: () => import("../views/rptparam/index.vue"),
+        name: "rptparam",
+        meta: {
+          title: "rptparam配置",
+        },
+      },
+      {
+        path: "/iecserver",
+        component: () => import("../views/iceserver/index.vue"),
+        name: "iecserver",
+        meta: {
+          title: "iecserver服务器",
+        },
+      },
+      {
+        path: "/alarmRules",
+        component: () => import("../views/alarmRules/index.vue"),
+        name: "alarmRules",
+        meta: {
+          title: "告警规则",
+        },
+      },
+      {
+        path: "/I2config",
+        component: () => import("../views/I2config/index.vue"),
+        name: "I2config",
+        meta: {
+          title: "I2配置",
+        },
+        path: "/I2config",
+        component: () => import("../views/I2config/index.vue"),
+        name: "I2config",
+        redirect: "/I2config/filed",
+        meta: {
+          title: "I2配置管理",
+        },
+        children: [
+          {
+            path: "/I2config/filed",
+            component: () => import("../views/I2config/filed/index.vue"),
+            name: "filed",
+            meta: {
+              title: "字段映射",
+            },
+          },
+          {
+            path: "/I2config/exportType",
+            component: () => import("../views/I2config/exportType/index.vue"),
+            name: "exportType",
+            meta: {
+              title: "导出类型",
+            },
+          },
+          {
+            path: "/I2config/record",
+            component: () => import("../views/I2config/record/index.vue"),
+            name: "record",
+            meta: {
+              title: "导出记录",
+            },
+          },
+        ],
+      },
+      {
+        path: "/dataTransfer",
+        component: () => import("../views/dataTransfer/index.vue"),
+        name: "dataTransfer",
+        meta: {
+          title: "数据转移",
+        },
+        path: "/dataTransfer",
+        component: () => import("../views/dataTransfer/index.vue"),
+        name: "dataTransfer",
+        redirect: "/dataTransfer/server",
+        meta: {
+          title: "数据转移",
+        },
+        children: [
+          {
+            path: "/dataTransfer/server",
+            component: () => import("../views/dataTransfer/server/index.vue"),
+            name: "server",
+            meta: {
+              title: "远端服务器",
+            },
+          },
+
+          {
+            path: "/dataTransfer/downrecord",
+            component: () =>
+              import("../views/dataTransfer/downrecord/index.vue"),
+            name: "downrecord",
+            meta: {
+              title: "下载记录",
+            },
+          },
+        ],
+      },
     ],
   },
 ];

src/utils/api/index.js

@@ -1,8 +1,20 @@
 import request from "../request";
-//
-export function getloginApi(data) {
+//登录
+export function userloginApi(data) {
   return request({
     url: "/user/login",
+    method: "post",
+    data,
+  });
+}
+//退出
+
+//首页接口
+
+//装置总数
+export function getlistAllCountApi(data) {
+  return request({
+    url: "/modevtype/sensorCount",
     method: "get",
     data,
   });
@@ -107,6 +119,17 @@ export function icdUpdateApi(data) {
     data,
   });
 }
+//查询icd文件列表
+export function icdFileApi(data) {
+  return request({
+    url: "/icdconfig/listFile",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
 
 //查询data表名
 export function tableListApi(data) {
@@ -150,6 +173,14 @@ export function deleteAttApi(data) {
     },
   });
 }
+//生成rpt
+export function generateRptApi(data) {
+  return request({
+    url: "/icdconfig/generateParamindex",
+    method: "post",
+    data,
+  });
+}
 
 //设备台账管理列表api
 //变电站相关接口
@@ -513,9 +544,9 @@ export function unbindApi(data) {
   });
 }
 
-export function generateParamindexApi(data) {
+export function updateParamindexApi(data) {
   return request({
-    url: "/parambind/generateParamindex",
+    url: "/parambind/updateParamindex",
     method: "post",
     data,
   });
@@ -621,3 +652,302 @@ export function modevtypepointDeleteApi(data) {
     },
   });
 }
+
+//告警规则
+//查询全部列表
+export function AlarmRulesListApi(data) {
+  return request({
+    url: "/rule/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//添加告警规则
+export function AlarmRulesAddRules(data) {
+  return request({
+    url: "/rule/add",
+    method: "post",
+    data,
+  });
+}
+//删除告警规则
+export function AlarmRulesDeleteRules(data) {
+  return request({
+    url: "/rule/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//更新告警规则
+export function AlarmRulesUpdateRules(data) {
+  return request({
+    url: "/rule/update",
+    method: "post",
+    data,
+  });
+}
+//查询比较符
+export function listOperatorApi(data) {
+  return request({
+    url: "/rule/listOperator",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查询比较器
+export function listComparatorApi(data) {
+  return request({
+    url: "/rule/listComparator",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//告警信息
+export function warningListApi(data) {
+  return request({
+    url: "/warning/list",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//I2配置
+//字段映射列表
+export function listFieldConfigApi(data) {
+  return request({
+    url: "/i2sync/listFieldConfig",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//修改字段映射表
+
+export function updateFieldConfigApi(data) {
+  return request({
+    url: "/i2sync/updateFieldConfig",
+    method: "post",
+    data,
+  });
+}
+
+//删除字段映射表
+
+export function delFieldConfigApi(data) {
+  return request({
+    url: "/i2sync/delFieldConfig",
+    method: "post",
+    data,
+  });
+}
+
+//查询导出类型配置
+
+export function listConfigApi(data) {
+  return request({
+    url: "/i2sync/listConfig",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//新增到类型
+export function addConfigApi(data) {
+  return request({
+    url: "/i2sync/addConfig",
+    method: "post",
+    data,
+  });
+}
+
+//删除导出类型
+export function delConfigApi(data) {
+  return request({
+    url: "/i2sync/delConfig",
+    method: "post",
+    data,
+  });
+}
+//预览导出类型
+export function prewXmlApi(data) {
+  return request({
+    url: "/i2sync/prewXml",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//查询导出记录
+
+export function listRecordApi(data) {
+  return request({
+    url: "/i2sync/listRecord",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//rptparam相关接口
+//查询绑定信息
+export function getRptApi(data) {
+  return request({
+    url: "/rptparam/getRpt",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+// 查询可用rptparam
+export function listRptApi(data) {
+  return request({
+    url: "/rptparam/listRpt",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//绑定
+export function updateRptApi(data) {
+  return request({
+    url: "/rptparam/updateRpt",
+    method: "post",
+    data,
+  });
+}
+
+//查询I2状态
+export function i2statusApi(data) {
+  return request({
+    url: "/i2sync/status",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//远端服务器
+//获取所有列表
+export function serverlistApi(data) {
+  return request({
+    url: "/remote/listAll",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//新增
+
+export function serveAddApi(data) {
+  return request({
+    url: "/remote/add",
+    method: "post",
+    data,
+  });
+}
+//修改
+export function serveUpdateApi(data) {
+  return request({
+    url: "/remote/update",
+    method: "post",
+    data,
+  });
+}
+
+//删除导出类型
+export function serveDelApi(data) {
+  return request({
+    url: "/remote/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//下载记录
+export function DownloadAllApi(data) {
+  return request({
+    url: "/remote/listDownload",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
+//IEC服务器
+
+//启动IEC服务端
+
+export function serverstartApi(data) {
+  return request({
+    url: "/iecserver/start",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//查看IEC服务端状态
+
+export function serverstatusApi(data) {
+  return request({
+    url: "/iecserver/status",
+    method: "get",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+//停止IEC服务端
+
+export function serverstopApi(data) {
+  return request({
+    url: "/iecserver/stop",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}

src/views/I2config/exportType/components/addconfigDialog.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="configAddBox">
+    <el-dialog
+      class="AddDialogBox"
+      :title="title"
+      :visible.sync="configDialogshow"
+      width="560px"
+      :close-on-click-modal="false"
+    >
+      <div class="configInfo">
+        <el-form
+          label-position="left"
+          ref="formInfo"
+          label-width="104px"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="监测设备类型:">
+            <el-select
+              v-model="formInfo.jcsbType"
+              @change="changeJg"
+              :disabled="title == '修改'"
+            >
+              <el-option
+                v-for="item in jcsbOptions"
+                :key="item.id"
+                :label="item.mc + '(' + item.tablename + ')'"
+                :value="item.id"
+              >
+                {{ item.mc + "(" + item.tablename + ")" }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <div class="prewInfo" v-loading="warnLoading">
+          <div class="prewclass">
+            <span>导出样例：</span>
+            <pre><code class="xml">{{ prewData }}</code></pre>
+          </div>
+          <div class="warnmsg" v-if="warnMsg">
+            <el-tag type="warning">{{ warnMsg }}</el-tag>
+          </div>
+        </div>
+      </div>
+      <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 {
+  modevtypeListAllApi,
+  addConfigApi,
+  prewXmlApi,
+} from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      configDialogshow: false,
+      formInfo: {
+        jcsbType: "",
+      },
+      rules: {},
+      jcsbOptions: [],
+      selectTableName: "",
+      mc: "",
+      warnMsg: "",
+      prewData: "",
+      warnLoading: false,
+    };
+  },
+  created() {},
+  mounted() {
+    // 初始化时，给每个对象添加 selected 和 value 属性
+  },
+  watch: {},
+  methods: {
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增导出类型") {
+            addConfigApi({ modevtypeId: this.formInfo.jcsbType })
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getconfigList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取监测设备类型
+    getjcsbListAll() {
+      modevtypeListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.jcsbOptions = res.data;
+          console.log(this.title);
+          if (this.title == "新增导出类型") {
+            console.log(this.formInfo);
+            this.formInfo.jcsbType = this.jcsbOptions[0].id;
+            this.selectTableName = this.jcsbOptions[0].tablename;
+            this.mc = this.jcsbOptions[0].mc;
+            this.prewFun();
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    prewFun() {
+      this.warnLoading = true;
+      prewXmlApi({ modevtypeId: this.formInfo.jcsbType })
+        .then((res) => {
+          console.log(res);
+          this.prewData = res.data;
+          this.warnMsg = res.warnMsg;
+          console.log(this.warnMsg);
+          this.warnLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //选中的值获取tablename
+    changeJg(val) {
+      console.log(val);
+      let selectedOption = this.jcsbOptions.find((item) => item.id === val);
+      if (selectedOption) {
+        // 如果找到了匹配的项，访问它的 tablename
+        this.selectTableName = selectedOption.tablename;
+        this.mc = selectedOption.mc;
+        this.formInfo.jcsbType = selectedOption.id;
+        console.log(this.selectTableName); // 或者根据你的需求使用 tablename
+        this.prewFun();
+      }
+    },
+
+    display() {
+      this.configDialogshow = true;
+      this.getjcsbListAll();
+    },
+    hide() {
+      this.configDialogshow = false;
+      this.prewData = "";
+      this.warnMsg = "";
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.configAddBox {
+  .AddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .configInfo {
+      .prewInfo {
+        //height: 300px;
+        .prewclass {
+          pre {
+            max-height: 348px;
+            overflow: auto;
+          }
+        }
+        .warnmsg {
+          margin-top: 24px;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/I2config/exportType/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="filedBox">
+    <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 :data="configData" style="width: 100%">
+          <el-table-column label="类型名称" prop="typeName"> </el-table-column>
+          <el-table-column label="表名" prop="tableName"> </el-table-column>
+          <el-table-column label="创建时间" prop="createTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="danger"
+                @click="handleDeleteClick(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <addconfigDialog ref="configAddRef" :title="title"></addconfigDialog>
+  </div>
+</template>
+<script>
+import { listConfigApi, delConfigApi } from "@/utils/api/index";
+import addconfigDialog from "./components/addconfigDialog";
+export default {
+  name: "exportType",
+  components: {
+    addconfigDialog,
+  },
+  data() {
+    return {
+      configLoading: false,
+      configData: [],
+      title: "",
+    };
+  },
+  created() {
+    this.getconfigList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    getconfigList() {
+      this.configLoading = true;
+      listConfigApi()
+        .then((res) => {
+          console.log(res);
+          this.configData = res.data;
+          this.configLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      console.log(data);
+      this.$confirm(`确定要删除该类型吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delConfigApi({ id: data.id, modevtypeId: data.modevtypeId }).then(
+            (res) => {
+              if (res.success) {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  type: "success",
+                  message: "删除成功",
+                });
+                this.getconfigList(); //刷新
+              } else {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  type: "error",
+                  message: res.errorMsg,
+                });
+              }
+            }
+          );
+        })
+        .catch(() => {});
+    },
+    //新增
+    handleAddClick() {
+      this.title = "新增导出类型";
+      this.$refs.configAddRef.display();
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedBox {
+  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>

src/views/I2config/filed/components/addfiledDialog.vue

@@ -0,0 +1,355 @@
+<template>
+  <div class="filedAddBox">
+    <el-dialog
+      class="AddDialogBox"
+      :title="title"
+      :visible.sync="filedDialogshow"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      <div class="filedInfo">
+        <el-form
+          label-position="left"
+          ref="formInfo"
+          label-width="104px"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="导出类型:">
+            <el-select
+              v-model="formInfo.jcsbType"
+              @change="changeJg"
+              :disabled="title == '修改'"
+            >
+              <el-option
+                v-for="item in jcsbOptions"
+                :key="item.id"
+                :label="item.mc + '(' + item.tablename + ')'"
+                :value="item.id"
+              >
+                {{ item.mc + "(" + item.tablename + ")" }}
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+        <div class="colListBox">
+          <div class="coltitle">
+            <span>表字段</span>
+            <span>导出字段</span>
+          </div>
+          <div
+            class="selectCol"
+            v-for="(item, index) in colData"
+            :key="item.id"
+          >
+            <el-checkbox
+              v-model="item.selected"
+              @change="handleSingleSelect(item, index)"
+            >
+              {{ item.comment + item.name }}
+            </el-checkbox>
+            <el-input
+              :disabled="!item.selected"
+              v-model="item.value"
+              placeholder="请输入值"
+              type="text"
+            ></el-input>
+          </div>
+        </div>
+      </div>
+      <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 {
+  modevtypeListAllApi,
+  colListApi,
+  updateFieldConfigApi,
+} from "@/utils/api/index";
+export default {
+  props: ["title", "filedData"],
+  data() {
+    return {
+      filedDialogshow: false,
+      formInfo: {
+        jcsbType: "",
+      },
+      rules: {},
+      jcsbOptions: [],
+      selectTableName: "",
+      mc: "",
+      curdata: [],
+      colAllData: [],
+      colData: [],
+    };
+  },
+  created() {},
+  mounted() {
+    // 初始化时，给每个对象添加 selected 和 value 属性
+  },
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.curdata = val;
+      this.selectTableName = val.tablename;
+      this.mc = val.mc;
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增字段导出映射") {
+            console.log(this.formInfo);
+            console.log(this.colData);
+
+            let i2syncFields = this.colData
+              .filter(
+                (item) =>
+                  item.hasOwnProperty("value") &&
+                  item.hasOwnProperty("name") && // 确保有name属性
+                  item.value !== "" && // 确保有name属性
+                  item.selected // 并且value为空字符串、undefined或null
+              ) // 过滤出有value和name属性的项
+              .map((item) => ({
+                destFieldName: item.value,
+                fieldName: item.name,
+              }));
+            let params = {
+              tablename: this.selectTableName,
+              i2syncFields: i2syncFields,
+              mc: this.mc,
+            };
+
+            console.log(params);
+            updateFieldConfigApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getFiledList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            console.log(this.formInfo);
+            console.log(this.colData);
+            let i2syncFields = this.colData
+              .filter(
+                (item) =>
+                  item.hasOwnProperty("value") &&
+                  item.hasOwnProperty("name") && // 确保有name属性
+                  item.value !== "" && // 确保有name属性
+                  item.selected // 并且value为空字符串、undefined或null
+              ) // 过滤出有value和name属性的项
+              .map((item) => ({
+                destFieldName: item.value,
+                fieldName: item.name,
+              }));
+            let params = {
+              tablename: this.selectTableName,
+              i2syncFields: i2syncFields,
+              mc: this.mc,
+            };
+
+            console.log(params);
+            updateFieldConfigApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getFiledList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取监测设备类型
+    getjcsbListAll() {
+      modevtypeListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.jcsbOptions = res.data;
+          console.log("我是已经添加过的", this.filedData);
+          let newData2 = this.jcsbOptions.filter((item2) => {
+            // 使用some方法检查data1中是否有相同的mc
+            return !this.filedData.some((item1) => item1.mc === item2.mc);
+          });
+          console.log(newData2);
+
+          console.log(this.title);
+          if (this.title == "新增字段导出映射") {
+            this.jcsbOptions = newData2;
+            console.log(this.formInfo);
+            this.formInfo.jcsbType = this.jcsbOptions[0].id;
+            this.selectTableName = this.jcsbOptions[0].tablename;
+            this.mc = this.jcsbOptions[0].mc;
+          } else {
+            this.jcsbOptions = res.data;
+            let selectXl = this.jcsbOptions.find(
+              (item) => item.tablename === this.selectTableName
+            );
+            console.log(selectXl);
+            if (selectXl) {
+              // 如果找到了匹配的项，访问它的 tablename
+              this.formInfo.jcsbType = selectXl.id;
+              console.log(this.formInfo.jcsbType);
+            }
+          }
+          this.getcolList();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    handleSingleSelect(item, index) {
+      console.log(item.selected);
+      // 如果 checkbox 被选中，并且 input 没有值，则设置初始值
+      if (item.selected && !item.value) {
+        item.value = item.name; // 或者其他默认值
+      } else {
+        item.value = "";
+      }
+      console.log(this.colData);
+    },
+    //选中的值获取tablename
+    changeJg(val) {
+      console.log(val);
+      let selectedOption = this.jcsbOptions.find((item) => item.id === val);
+      if (selectedOption) {
+        // 如果找到了匹配的项，访问它的 tablename
+        this.selectTableName = selectedOption.tablename;
+        this.mc = selectedOption.mc;
+        console.log(this.selectTableName); // 或者根据你的需求使用 tablename
+        this.getcolList();
+      }
+    },
+    //查询data表字段名
+    getcolList() {
+      colListApi({ tableName: this.selectTableName })
+        .then((res) => {
+          console.log(res);
+          const data = res.data; // 假设res.data是一个数组
+          // 使用map方法给每个对象添加selected和value属性
+          this.colAllData = data.map((item) => ({
+            ...item, // 使用展开运算符保持原有属性
+            selected: false, // 添加selected属性并初始化为false
+            value: "", // 添加value属性并初始化为空字符串
+          }));
+          if (this.title == "新增字段导出映射") {
+            this.colData = [...this.colAllData]; // 使用展开运算符创建数据的浅拷贝
+          } else {
+            console.log("修改 ");
+            this.colAllData.forEach((colDataItem) => {
+              this.curdata.i2syncFields.forEach((syncField) => {
+                if (colDataItem.name === syncField.fieldName) {
+                  // 添加 selected 属性并设置为 true
+                  colDataItem.selected = true;
+                  colDataItem.value = syncField.destFieldName;
+                  // 这里不需要设置 value，因为 colDataItem 已经是 this.colAllData 的一部分
+                  // 但如果需要关联原始数据，可以设置一个属性来引用它
+                  // colDataItem.value = this.curdata; // 注意：这样可能会引用整个 curdata 对象，可能不是您想要的
+                  // 通常，您可能只需要引用 curdata 的一部分或者一个标识符
+                }
+              });
+            });
+            this.colData = [...this.colAllData];
+            console.log(this.colAllData);
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    display() {
+      this.filedDialogshow = true;
+      this.getjcsbListAll();
+    },
+    hide() {
+      this.filedDialogshow = false;
+      this.jcsbOptions = [];
+      this.colAllData = [];
+      this.colData = [];
+      this.$refs.formInfo.resetFields(); // 重置表单字段值
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedAddBox {
+  .AddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .filedInfo {
+      .colListBox {
+        overflow: auto;
+        height: 400px;
+        .coltitle {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          span {
+            font-weight: bold;
+            &:first-child {
+              width: 40%;
+              margin-right: 24px;
+            }
+            &:last-child {
+              width: 50%;
+            }
+          }
+        }
+        .selectCol {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          .el-checkbox {
+            width: 40%;
+            margin-right: 24px;
+          }
+          .el-input {
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/I2config/filed/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="filedBox">
+    <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
+          :data="filedData"
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <!-- {{ props.row.i2syncFields }} -->
+              <el-table
+                :data="props.row.i2syncFields"
+                style="width: 100%"
+                border
+              >
+                <el-table-column prop="fieldName" label="表字段">
+                </el-table-column>
+                <el-table-column prop="destFieldName" label="导出字段">
+                </el-table-column>
+              </el-table>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="名称" prop="mc"> </el-table-column>
+          <el-table-column label="表名" prop="tablename"> </el-table-column>
+          <el-table-column label="字段导出个数" prop="i2syncFields">
+            <template slot-scope="scope">
+              <span>{{ scope.row.i2syncFields.length }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" 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>
+    <addfiledDialog
+      ref="filedAddRef"
+      :title="title"
+      :filedData="filedData"
+    ></addfiledDialog>
+  </div>
+</template>
+<script>
+import { listFieldConfigApi, delFieldConfigApi } from "@/utils/api/index";
+import addfiledDialog from "./components/addfiledDialog";
+export default {
+  components: {
+    addfiledDialog,
+  },
+  name: "field",
+  data() {
+    return {
+      filedLoading: false,
+      filedData: [],
+      title: "",
+    };
+  },
+  created() {
+    this.getFiledList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //获取字段映射
+    getFiledList() {
+      this.filedLoading = true;
+      listFieldConfigApi()
+        .then((res) => {
+          console.log(res);
+          this.filedData = res.data;
+
+          this.filedLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "新增字段导出映射";
+      this.$refs.filedAddRef.display();
+    },
+    handleEditClick(data) {
+      this.title = "修改";
+      this.$refs.filedAddRef.display();
+      this.$refs.filedAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      console.log(data);
+      this.$confirm(`确定要删除${data.tablename}的字段映射配置吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          delFieldConfigApi({ tablename: data.tablename, mc: data.mc }).then(
+            (res) => {
+              if (res.success) {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  type: "success",
+                  message: "删除成功",
+                });
+                this.getFiledList(); //刷新
+              } else {
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  type: "error",
+                  message: res.errorMsg,
+                });
+              }
+            }
+          );
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedBox {
+  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>

src/views/I2config/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="I2Box">
+    <div class="equimentList">
+      <div class="sideNav">
+        <h3>
+          <i class="el-icon-s-tools"></i>I2导出配置
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="statusUrl"
+            placement="bottom"
+          >
+            <el-tag type="success" v-if="statusFlag">启用</el-tag>
+            <el-tag type="warning" v-else>停用</el-tag>
+          </el-tooltip>
+        </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>
+// import addRules from "./components/addRules";
+// import copyRules from "./components/copyRules";
+import { i2statusApi } from "@/utils/api/index";
+export default {
+  name: "I2config",
+  components: {},
+  data() {
+    return {
+      activeIndex: 0,
+      navlist: [
+        {
+          name: "字段导出映射",
+          path: "/I2config/filed",
+        },
+        {
+          name: "导出类型",
+          path: "/I2config/exportType",
+        },
+        {
+          name: "导出记录",
+          path: "/I2config/record",
+        },
+      ],
+      statusUrl: "",
+      statusFlag: false,
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {
+    this.getI2Status();
+  },
+  methods: {
+    getI2Status() {
+      i2statusApi()
+        .then((res) => {
+          console.log(res);
+          this.statusFlag = res.data.enable;
+          this.statusUrl = res.data.url;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.I2Box {
+  display: flex;
+  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;
+      }
+      .el-tag {
+        margin-left: auto;
+        cursor: pointer;
+      }
+    }
+    .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;
+    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>

src/views/I2config/record/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="recordBox">
+    <div class="reportHead">
+      <h3>导出记录</h3>
+    </div>
+    <div class="page-body">
+      <div class="title">
+        <span>导出类型：</span>
+        <el-select v-model="jcsbType" @change="changeJg">
+          <el-option
+            v-for="item in jcsbOptions"
+            :key="item.modevtypeId"
+            :label="item.typeName + '(' + item.tableName + ')'"
+            :value="item.modevtypeId"
+          >
+            {{ item.typeName + "(" + item.tableName + ")" }}
+          </el-option>
+        </el-select>
+      </div>
+
+      <div class="zsbTableBox">
+        <el-table
+          :data="recordData"
+          style="width: 100%"
+          height="calc(100% - 0px)"
+          v-loading="recordLoading"
+        >
+          <el-table-column label="名称" prop="name">
+            <template slot-scope="scope">
+              <span>{{ scope.row.sensor.name }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="equipmentId" prop="equipmentId">
+            <template slot-scope="scope">
+              <span>{{ scope.row.sensor.equipmentId }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="sensorCode" prop="sensorCode">
+            <template slot-scope="scope">
+              <span>{{ scope.row.sensor.sensorCode }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="最后导出时间" prop="lastDTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.lastDTime }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { listConfigApi, listRecordApi } from "@/utils/api/index";
+// import addzsbDialog from "./components/addzsbDialog";
+export default {
+  name: "record",
+  components: {},
+  data() {
+    return {
+      jcsbType: "",
+      jcsbOptions: [{ modevtypeId: -1, typeName: "全部", tableName: "all" }],
+      selectTableName: "",
+      recordData: [],
+      recordLoading: false,
+    };
+  },
+  created() {
+    this.getjcsbListAll();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    getjcsbListAll() {
+      listConfigApi()
+        .then((res) => {
+          console.log(res);
+          this.jcsbOptions = this.jcsbOptions.concat(res.data);
+          this.jcsbType = this.jcsbOptions[0].modevtypeId;
+          this.selectTableName = this.jcsbOptions[0].tableName;
+          this.exportFun();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //选中的值获取tablename
+    changeJg(val) {
+      console.log(val);
+      let selectedOption = this.jcsbOptions.find(
+        (item) => item.modevtypeId === val
+      );
+      if (selectedOption) {
+        // 如果找到了匹配的项，访问它的 tablename
+        this.selectTableName = selectedOption.tablename;
+        console.log(this.selectTableName); // 或者根据你的需求使用 tablename
+        this.exportFun();
+      }
+    },
+    exportFun() {
+      let params = {};
+      if (this.jcsbType !== -1) {
+        params.modevtypeId = this.jcsbType;
+      }
+      this.recordLoading = true;
+      listRecordApi(params)
+        .then((res) => {
+          console.log(res);
+          this.recordData = res.data;
+          this.recordLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.recordBox {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .title {
+      display: flex;
+      align-items: center;
+      span {
+        color: #000;
+        font-size: 14px;
+      }
+    }
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 38px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+</style>

src/views/alarmRules/components/addRules.vue

@@ -0,0 +1,389 @@
+<template>
+  <div class="addrulesBox">
+    <el-dialog
+      class="rulesDialogBox"
+      :title="title"
+      :visible.sync="rulesDialogshow"
+      width="520px"
+      :close-on-click-modal="false"
+      @close="hide"
+    >
+      <el-form
+        label-position="left"
+        ref="formInfo"
+        label-width="104px"
+        :rules="rules"
+        :model="formInfo"
+      >
+        <el-form-item label="属性名称：">
+          <el-select
+            v-model="formInfo.attribute"
+            @change="changeAttribute"
+            :disabled="title == '编辑规则'"
+          >
+            <el-option
+              v-for="item in modevOptions"
+              :key="item.id"
+              :label="item.fieldDesc"
+              :value="item.id"
+            >
+              {{ item.fieldDesc }}({{ item.field }})
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="比较器：" prop="compareVal">
+          <el-select v-model="formInfo.compareVal" @change="changecomVal">
+            <el-option
+              v-for="item in compareOptions"
+              :key="item.type"
+              :label="item.comment"
+              :value="item.type"
+            >
+              {{ item.type }}({{ item.comment }})
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="比较符：">
+          <el-select v-model="formInfo.operatorVal" @change="changeOpeara">
+            <el-option
+              v-for="item in operatorValOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="阈值："
+          v-if="formInfo.operatorVal == 'BTW' || formInfo.operatorVal == 'NTW'"
+        >
+          <div class="twoInput">
+            <el-input
+              v-model="formInfo.thresholdL"
+              placeholder="请输入阈值"
+            ></el-input>
+            <span class="gardSpan">-</span>
+            <el-input
+              v-model="formInfo.thresholdR"
+              placeholder="请输入阈值"
+            ></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="阈值：" prop="threshold" v-else>
+          <el-input
+            v-model="formInfo.threshold"
+            placeholder="请输入阈值"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="风险等级：">
+          <el-select v-model="formInfo.riskLevelVal" @change="changeOpeara">
+            <el-option
+              v-for="item in riskLevelOption"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态：" prop="state">
+          <el-switch
+            v-model="formInfo.state"
+            active-text="启用"
+            inactive-text="停用"
+            :active-value="1"
+            :inactive-value="0"
+          ></el-switch>
+        </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 {
+  modevtypepointListApi,
+  listComparatorApi,
+  listOperatorApi,
+  AlarmRulesAddRules,
+  AlarmRulesUpdateRules,
+} from "@/utils/api/index";
+export default {
+  props: ["title", "modevtype", "sensorId"],
+  data() {
+    return {
+      rulesDialogshow: false,
+      formInfo: {
+        attribute: "",
+        compareVal: "", //比较器
+        operatorVal: "", //比较符
+        threshold: "", //阈值
+        thresholdL: "",
+        thresholdR: "",
+        riskLevelVal: 0, //风险等级
+        state: 1,
+      },
+      rulesId: "",
+      //获取当前type
+      attType: "",
+      modevOptions: [], //属性列表
+      compareOptions: [], //比较器列表
+      operatorValOptions: [], //比较符
+      riskLevelOption: [
+        { id: 2, name: "高" },
+        { id: 1, name: "中" },
+        { id: 0, name: "低" },
+      ],
+
+      rules: {
+        // name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        compareVal: [
+          { required: true, message: "比较器不能为空", trigger: "blur" },
+        ],
+        threshold: [
+          { required: true, message: "阈值不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      if (val.operator == "BTW" || val.operator == "NTW") {
+        console.log("wossssssssss", val.active);
+        const thresholdValues = val.threshold.split(",");
+        this.formInfo = {
+          attribute: val.modevtypePointId,
+          compareVal: val.comparator, //比较器
+          operatorVal: val.operator, //比较符
+          thresholdL: thresholdValues[0],
+          thresholdR: thresholdValues[1],
+          riskLevelVal: val.level, //风险等级
+          state: val.active,
+        };
+        console.log(this.formInfo);
+      } else {
+        this.formInfo = {
+          attribute: val.modevtypePointId,
+          compareVal: val.comparator, //比较器
+          operatorVal: val.operator, //比较符
+          threshold: val.threshold, //阈值
+          riskLevelVal: val.level, //风险等级
+          state: val.active,
+        };
+      }
+      this.rulesId = val.id;
+    },
+    //获取监测设备类型属性点
+    getModevTypeList() {
+      modevtypepointListApi({
+        modevtypeId: this.modevtype,
+      })
+        .then((res) => {
+          console.log(res);
+          this.modevOptions = res.data;
+          if (this.formInfo.attribute == "") {
+            this.formInfo.attribute = res.data[0].id;
+          }
+
+          //判断当前type有没有在里面
+          const selectedOption = this.modevOptions.find(
+            (option) => option.id === res.data[0].id
+          );
+          if (selectedOption) {
+            // 假设 selectedOption 中直接有一个 type 属性
+            const type = selectedOption.type; // 这里获取到 type
+            console.log(type); // 输出 type
+            this.formInfo.compareVal = type;
+            this.getOperator();
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //通过属性获取查询比较器
+    getCompareList() {
+      listComparatorApi()
+        .then((res) => {
+          console.log(res);
+          this.compareOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    changecomVal() {
+      this.getOperator();
+    },
+    //获取比较符
+    getOperator() {
+      listOperatorApi({ name: this.formInfo.compareVal })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.operatorValOptions = Object.keys(res.data).map((key) => ({
+              value: key, // 值（键）
+              label: res.data[key], // 标签（显示的值）
+            }));
+            console.log(this.operatorValOptions);
+            if (this.formInfo.operatorVal == "") {
+              this.formInfo.operatorVal = this.operatorValOptions[0].value;
+            }
+          } else {
+            this.formInfo.operatorVal = "";
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换属性名称
+    changeAttribute(val) {
+      const selectedOption = this.modevOptions.find(
+        (option) => option.id === val
+      );
+      if (selectedOption) {
+        // 假设 selectedOption 中直接有一个 type 属性
+        const type = selectedOption.type; // 这里获取到 type
+        console.log(type); // 输出 type
+
+        // 接下来，您可能想根据这个 type 来设置 formInfo.compareVal
+        // 但由于您的 data 数组中的 value 也是 type，所以可以直接设置
+        this.formInfo.compareVal = type;
+        console.log("xia", this.formInfo.compareVal);
+        this.getOperator();
+      }
+    },
+    //切换选择比较符
+    changeOpeara(val) {
+      console.log(val);
+    },
+    submitForm() {
+      this.$refs.formInfo.validate((valid) => {
+        if (valid) {
+          console.log(this.formInfo);
+          let params = {};
+          if (
+            this.formInfo.operatorVal == "BTW" ||
+            this.formInfo.operatorVal == "NTW"
+          ) {
+            let threholdVal = `${this.formInfo.thresholdL.trim()},${this.formInfo.thresholdR.trim()}`;
+            params = {
+              sensorId: this.sensorId,
+              modevtypePointId: this.formInfo.attribute,
+              comparator: this.formInfo.compareVal,
+              operator: this.formInfo.operatorVal,
+              threshold: threholdVal,
+              level: this.formInfo.riskLevelVal,
+              active: this.formInfo.state, //启用
+            };
+          } else {
+            params = {
+              sensorId: this.sensorId,
+              modevtypePointId: this.formInfo.attribute,
+              comparator: this.formInfo.compareVal,
+              operator: this.formInfo.operatorVal,
+              threshold: this.formInfo.threshold,
+              level: this.formInfo.riskLevelVal,
+              active: this.formInfo.state, //启用
+            };
+          }
+          if (this.title == "添加规则") {
+            AlarmRulesAddRules(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getRules(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            this.$set(params, "id", this.rulesId);
+            AlarmRulesUpdateRules(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "修改成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getRules(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+
+    display() {
+      this.rulesDialogshow = true;
+      this.getCompareList();
+      this.getModevTypeList();
+    },
+    hide() {
+      this.rulesDialogshow = false;
+      //this.$refs.formInfo.resetFields(); // 重置表单字段值
+      this.formInfo = {
+        attribute: "",
+        compareVal: "", //比较器
+        operatorVal: "", //比较符
+        threshold: "", //阈值
+        thresholdL: "",
+        thresholdR: "",
+        riskLevelVal: 0, //风险等级
+        state: 1,
+      };
+    },
+  },
+};
+</script>
+<style lang="less">
+.addrulesBox {
+  .rulesDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .twoInput {
+      display: flex;
+      .gardSpan {
+        margin: 0px 12px;
+      }
+    }
+  }
+}
+</style>

src/views/alarmRules/components/copyRules.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="copyrulesBox">
+    <el-dialog
+      class="rulesDialogBox"
+      :title="title"
+      :visible.sync="rulesDialogshow"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      <div class="copyBox" v-loading="deviceLoading">
+        <div class="rulesRow">
+          <el-descriptions size="mini" border v-if="rulesData">
+            <el-descriptions-item label="属性名称：">{{
+              rulesData.typePoint.fieldDesc
+            }}</el-descriptions-item>
+            <el-descriptions-item label="比较器">{{
+              rulesData.comparatorDesc
+            }}</el-descriptions-item>
+            <el-descriptions-item label="触发条件">{{
+              rulesData.operatorDesc
+            }}</el-descriptions-item>
+            <el-descriptions-item label="阈值">
+              {{ rulesData.threshold }}
+            </el-descriptions-item>
+            <el-descriptions-item label="状态">
+              <span v-if="rulesData.active == 0"
+                ><el-tag type="danger">停用</el-tag>
+              </span>
+              <span v-else> <el-tag type="success">启用</el-tag> </span>
+            </el-descriptions-item>
+
+            <el-descriptions-item label="告警等级"
+              ><span v-if="rulesData.level == 2"
+                ><el-tag type="danger">高</el-tag>
+              </span>
+              <span v-else-if="rulesData.level == 1">
+                <el-tag type="warning">中</el-tag>
+              </span>
+              <span v-else-if="rulesData.level == 0">
+                <el-tag type="info">低</el-tag>
+              </span></el-descriptions-item
+            >
+          </el-descriptions>
+        </div>
+        <el-checkbox
+          v-model="isAllSelected"
+          :indeterminate="isIndeterminate"
+          @change="handleAllCheck"
+          >全选</el-checkbox
+        >
+        <el-checkbox-group
+          v-model="selectedDeviceNames"
+          @change="handleDeviceCheck"
+        >
+          <el-checkbox
+            v-for="device in deviceList"
+            :key="device.id"
+            :label="device.name"
+            :disabled="device.id == sensorId"
+          ></el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <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 { monitoringListApi, AlarmRulesAddRules } from "@/utils/api/index";
+export default {
+  props: ["title", "typeId", "sensorId"],
+  data() {
+    return {
+      formInfo: {},
+      deviceLoading: false,
+      rulesDialogshow: false,
+      rulesData: "",
+      deviceList: [],
+      isAllSelected: false, // 控制全选/取消全选
+      selectedDeviceNames: [], // 选中设备的名称列表
+    };
+  },
+  computed: {
+    // 判断是否有设备被选中，并且不是全部选中
+    isIndeterminate() {
+      // 假设你有一个方法来获取当前已选中的设备名称数组
+      const selectedNames = this.selectedDeviceNames;
+      const enabledDevices = this.deviceList.filter(
+        (device) => device.id !== this.sensorId
+      );
+
+      // 如果没有选中任何设备，或者所有设备都已被选中，则不是中间状态
+      if (
+        selectedNames.length === 0 ||
+        selectedNames.length === enabledDevices.length
+      ) {
+        return false;
+      }
+
+      // 否则，检查是否有已禁用的设备，并只计算未禁用的设备
+      const enabledSelectedNames = enabledDevices
+        .map((device) => device.name)
+        .filter((name) => selectedNames.includes(name));
+
+      // 如果有选中的设备且数量小于未禁用的设备总数，则为中间状态
+      return (
+        enabledSelectedNames.length > 0 &&
+        enabledSelectedNames.length < enabledDevices.length
+      );
+    },
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.rulesData = val;
+      if (val.operator == "BTW" || val.operator == "NTW") {
+        console.log("wossssssssss", val.active);
+        const thresholdValues = val.threshold.split(",");
+        this.formInfo = {
+          attribute: val.modevtypePointId,
+          compareVal: val.comparator, //比较器
+          operatorVal: val.operator, //比较符
+          thresholdL: thresholdValues[0],
+          thresholdR: thresholdValues[1],
+          riskLevelVal: val.level, //风险等级
+          state: val.active,
+        };
+        console.log(this.formInfo);
+      } else {
+        this.formInfo = {
+          attribute: val.modevtypePointId,
+          compareVal: val.comparator, //比较器
+          operatorVal: val.operator, //比较符
+          threshold: val.threshold, //阈值
+          riskLevelVal: val.level, //风险等级
+          state: val.active,
+        };
+      }
+    },
+    //根据typeId获取相同的
+    getNsensorList() {
+      this.deviceLoading = true;
+      monitoringListApi({ typeId: this.typeId, pageNum: 1, pageSize: 1000 })
+        .then((res) => {
+          console.log(res);
+          this.deviceLoading = false;
+          this.deviceList = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    // 处理全选/取消全选
+    handleAllCheck(val) {
+      // 过滤掉禁用的设备
+      const enabledDevices = this.deviceList.filter(
+        (device) => device.id !== this.sensorId
+      );
+      this.selectedDeviceNames = val
+        ? enabledDevices.map((device) => device.name)
+        : [];
+
+      // 更新全选状态
+      this.isAllSelected =
+        val && enabledDevices.length === this.selectedDeviceNames.length;
+
+      // 更新中间状态
+      this.isIndeterminate =
+        val &&
+        enabledDevices.length > 0 &&
+        enabledDevices.length !== this.selectedDeviceNames.length;
+    },
+
+    // 处理单个设备复选框的选中状态
+    handleDeviceCheck(value) {
+      // 过滤掉禁用的设备
+      const enabledDevices = this.deviceList.filter(
+        (device) => device.id !== this.sensorId
+      );
+
+      // 更新全选状态
+      this.isAllSelected =
+        enabledDevices.length === value.length &&
+        value.length ===
+          enabledDevices
+            .map((device) => device.name)
+            .filter((name) => value.includes(name)).length;
+
+      // 更新中间状态
+      this.isIndeterminate =
+        enabledDevices.length > 0 &&
+        value.length > 0 &&
+        value.length < enabledDevices.length;
+    },
+    submitForm() {
+      const selectedDevices = this.deviceList.filter((device) => {
+        return this.selectedDeviceNames.includes(device.name);
+      });
+      // 打印或处理选中设备
+      console.log(selectedDevices);
+      for (let i = 0; i < selectedDevices.length; i++) {
+        console.log(selectedDevices[i].id); // 打印选中设备的ID
+
+        let params = {};
+        if (
+          this.formInfo.operatorVal == "BTW" ||
+          this.formInfo.operatorVal == "NTW"
+        ) {
+          let thresholdVal = `${this.formInfo.thresholdL.trim()},${this.formInfo.thresholdR.trim()}`;
+          params = {
+            sensorId: selectedDevices[i].id, // 使用当前选中设备的ID
+            modevtypePointId: this.formInfo.attribute,
+            comparator: this.formInfo.compareVal,
+            operator: this.formInfo.operatorVal,
+            threshold: thresholdVal,
+            level: this.formInfo.riskLevelVal,
+            active: this.formInfo.state, // 启用
+          };
+        } else {
+          params = {
+            sensorId: selectedDevices[i].id, // 使用当前选中设备的ID
+            modevtypePointId: this.formInfo.attribute,
+            comparator: this.formInfo.compareVal,
+            operator: this.formInfo.operatorVal,
+            threshold: this.formInfo.threshold,
+            level: this.formInfo.riskLevelVal,
+            active: this.formInfo.state, // 启用
+          };
+        }
+
+        // 调用 AlarmRulesAddRules 函数，并传入当前设备的 params
+        AlarmRulesAddRules(params)
+          .then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "添加成功",
+                type: "success",
+              });
+              this.hide();
+              // 可能不需要在这里调用 this.hide() 和 this.$parent.getRules()，除非它们是对所有操作都有效的
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: res.errorMsg,
+                type: "error",
+              });
+            }
+          })
+          .catch((err) => {
+            // 错误处理
+            console.error(err);
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "添加失败：" + (err.message || "未知错误"),
+              type: "error",
+            });
+          });
+      }
+    },
+
+    display() {
+      this.rulesDialogshow = true;
+      this.getNsensorList();
+    },
+    hide() {
+      this.rulesDialogshow = false;
+      this.deviceList = [];
+      this.selectedDeviceNames = [];
+    },
+  },
+};
+</script>
+<style lang="less">
+.copyrulesBox {
+  .rulesDialogBox {
+    .el-dialog__body {
+      padding: 10px 20px;
+    }
+    .copyBox {
+      height: 400px;
+      overflow: auto;
+      .rulesRow {
+        margin-bottom: 12px;
+      }
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+        .el-checkbox {
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/alarmRules/index.vue

@@ -0,0 +1,476 @@
+<template>
+  <div class="alarmRulesBox">
+    <div class="leftTree">
+      <h3>设备列表</h3>
+      <div class="treeBox">
+        <div class="searchBar">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            v-model="filterText"
+            prefix-icon="el-icon-search"
+            clearable
+          >
+          </el-input>
+        </div>
+        <el-tree
+          ref="tree"
+          :data="paramTreeData"
+          :props="defaultProps"
+          node-key="id"
+          :filter-node-method="filterNode"
+          :default-expanded-keys="defaultExpandedKeys"
+          highlight-current
+          :current-node-key="currentNodekey"
+          :expand-on-click-node="true"
+          @node-click="handleNodeClick"
+          default-expand-all
+        >
+          <template class="custom-tree-node" slot-scope="{ node, data }">
+            <!-- <span>{{ data.name || data.mc }}</span> -->
+            <span v-if="data.mc">
+              <span>{{ data.mc }} </span>
+            </span>
+            <span v-else-if="data.name">
+              <span class="el-icon-document" style="margin-right: 6px"> </span>
+              <span :title="data.name">{{ data.name }} </span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
+    <div class="paramTable">
+      <div class="paramHead">
+        <h3>设置告警规则</h3>
+        <el-button icon="el-icon-plus" @click="addRules" type="primary">
+          添加规则
+        </el-button>
+      </div>
+      <div class="paramContain" v-if="rulesList.length !== 0">
+        <div class="rulesBox">
+          <el-table
+            v-loading="rulesListLoading"
+            :data="rulesList"
+            stripe
+            border
+            style="width: 100%"
+            height="calc(100% - 0px)"
+          >
+            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
+            <el-table-column prop="typePoint.fieldDesc" label="属性名称">
+            </el-table-column>
+            <el-table-column prop="comparatorDesc" label="比较器">
+            </el-table-column>
+            <el-table-column prop="operatorDesc" label="触发条件">
+            </el-table-column>
+            <el-table-column prop="threshold" label="阈值"> </el-table-column>
+            <el-table-column prop="active" label="状态">
+              <template slot-scope="scope">
+                <span v-if="scope.row.active == 0"
+                  ><el-tag type="danger">停用</el-tag>
+                </span>
+                <span v-else> <el-tag type="success">启用</el-tag> </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="level" label="告警等级">
+              <template slot-scope="scope">
+                <span v-if="scope.row.level == 2"
+                  ><el-tag type="danger">高</el-tag>
+                </span>
+                <span v-else-if="scope.row.level == 1">
+                  <el-tag type="warning">中</el-tag>
+                </span>
+                <span v-else-if="scope.row.level == 0">
+                  <el-tag type="info">低</el-tag>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="lastDTime" label="最后数据时间">
+            </el-table-column>
+            <el-table-column label="操作" class-name="editClass" width="260px">
+              <template slot-scope="scope">
+                <el-link
+                  type="primary"
+                  @click="handleEditClick(scope.row)"
+                  size="small"
+                  icon="el-icon-document"
+                  >编辑</el-link
+                >
+                <el-link
+                  type="primary"
+                  @click="handleCopyClick(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>
+      <div class="paramContain" v-else>
+        <el-empty description="请先添加规则"></el-empty>
+      </div>
+    </div>
+    <addRules
+      ref="addRulesRef"
+      :title="title"
+      :modevtype="modevtypeVal"
+      :sensorId="sensorIdVal"
+    ></addRules>
+    <copyRules
+      ref="copyRulesRef"
+      :title="title"
+      :typeId="typeIdVal"
+      :sensorId="sensorIdVal"
+    ></copyRules>
+  </div>
+</template>
+<script>
+import addRules from "./components/addRules";
+import copyRules from "./components/copyRules";
+import {
+  getParamTreeApi,
+  AlarmRulesListApi,
+  AlarmRulesDeleteRules,
+} from "@/utils/api/index";
+export default {
+  name: "alarmRules",
+  components: {
+    addRules,
+    copyRules,
+  },
+  data() {
+    return {
+      filterText: "", //查询字段过滤
+      paramTreeData: [], // 树状图数据
+      defaultExpandedKeys: [],
+      currentNodeData: [], //选中的数据
+      currentId: "", //选择的id
+      crrrentName: "",
+      currentNodekey: "", //选中的节点
+      modevtypeVal: "", //选中节点的modevType
+      selectedNode: null, // 当前选中的节点
+      defaultProps: {
+        children: "children",
+        label: "mc",
+      },
+      rulesList: [], //规则列表
+      rulesListLoading: false,
+      title: "",
+      sensorIdVal: "",
+      typeIdVal: "",
+    };
+  },
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
+  computed: {},
+  created() {
+    this.getParamTreeList();
+  },
+  methods: {
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      console.log(value);
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      console.log(data);
+      this.searchName = data.mc + data.name;
+      console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+    },
+    getParamTreeList() {
+      getParamTreeApi()
+        .then((res) => {
+          console.log(res);
+          this.paramTreeData = res.data;
+          this.defaultExpandedKeys = [this.paramTreeData[0].id];
+          this.currentNodeData =
+            this.paramTreeData[0].children[0].children[0].children[0];
+          this.currentNodekey =
+            this.paramTreeData[0].children[0].children[0].children[0].id;
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+            this.handleNodeClick(this.currentNodeData);
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleNodeClick(data, node) {
+      console.log(data);
+      if (data.hasOwnProperty("children")) {
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.currentNodeKey);
+        });
+        return;
+      }
+      this.currentNodeKey = data.id;
+      this.modevtypeVal = data.typeId;
+      this.sensorIdVal = data.id;
+      this.typeIdVal = data.typeId;
+      this.getRules();
+    },
+    //获取规则列表
+    getRules() {
+      this.rulesListLoading = true;
+      AlarmRulesListApi({
+        sensorId: this.currentNodeKey,
+      })
+        .then((res) => {
+          console.log(res);
+          this.rulesListLoading = false;
+          this.rulesList = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    //新增规则
+    addRules() {
+      this.title = "添加规则";
+      this.$refs.addRulesRef.display();
+    },
+    //修改
+    handleEditClick(data) {
+      this.title = "编辑规则";
+      this.$refs.addRulesRef.display();
+      this.$refs.addRulesRef.getdataform(data);
+    },
+    //复制规则
+    handleCopyClick(data) {
+      this.title = "复制规则";
+      this.$refs.copyRulesRef.display();
+      this.$refs.copyRulesRef.getdataform(data);
+    },
+    //删除规则
+    handleDeleteClick(data) {
+      this.$confirm("确定要删除该规则吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          AlarmRulesDeleteRules({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getRules(); //刷新
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "error",
+                message: res.errorMsg,
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.alarmRulesBox {
+  display: flex;
+  height: 100%;
+  .leftTree {
+    min-width: 380px;
+    max-width: 380px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
+    margin-right: 24px;
+    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;
+    h3 {
+      font-size: 14px;
+      color: #fff;
+      font-weight: normal;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .treeBox {
+      width: 100%;
+      height: calc(100% - 48px);
+      background-color: #fff;
+      padding-top: 8px;
+      .searchBar {
+        width: 94%;
+        margin: 0px auto;
+        margin-bottom: 8px;
+      }
+      .el-tree {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 40px);
+        .el-tree-node__content {
+          height: 32px;
+          font-size: 12px;
+        }
+        .custom-tree-node {
+          color: #333;
+          overflow: hidden;
+          span {
+            display: flex;
+            display: inline-table;
+            overflow: hidden;
+            align-items: center;
+          }
+          .num {
+            color: #169e8c;
+          }
+        }
+      }
+
+      .el-tree--highlight-current
+        .el-tree-node.is-current
+        > .el-tree-node__content {
+        // 设置颜色
+        color: #fff;
+        background: #3889cf;
+        .custom-tree-node {
+          color: #fff;
+          //overflow: hidden;
+          span {
+            display: flex;
+            //overflow: hidden;
+            align-items: center;
+            .num {
+              color: #fff;
+            }
+            .iconfont {
+              //width: 30px;
+              display: inline-table;
+            }
+          }
+        }
+      }
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      /* //有子节点 且未展开 */
+      .el-tree .el-icon-caret-right:before {
+        content: "\e783";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //有子节点 且已展开 */
+      .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+        content: "\e781";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //没有子节点 */
+      .el-tree .el-tree-node__expand-icon.is-leaf::before {
+        background: #fff;
+        content: "";
+        display: block;
+        width: 0px;
+        height: 0px;
+        font-size: 16px;
+        background-size: 16px;
+      }
+    }
+  }
+  .paramTable {
+    flex: 1;
+    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;
+    .paramHead {
+      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;
+      }
+      .searchMain {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .paramContain {
+      height: calc(100% - 66px);
+      padding: 12px;
+      //background: #fcc;
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+      color: #333;
+      .rulesBox {
+        box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+        height: 100%;
+        .el-table .el-table__cell {
+          text-align: center;
+        }
+        .editClass {
+          .el-link.el-link--primary {
+            margin-right: 14px;
+          }
+        }
+      }
+      .el-empty {
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/dataReport/components/deviceExportDialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+    title="选择设备"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    class="deviceBoxDialog"
+    width="326px"
+  >
+    <div class="device">
+      <el-form :model="sblxform">
+        <el-form-item label="设备类型">
+          <el-select v-model="sblxform.sblxId" placeholder="请选择设备类型">
+            <el-option
+              v-for="item in sblxOptions"
+              :key="item.id"
+              :label="item.mc"
+              :value="item.id"
+            >
+              {{ item.mc }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="onSubmit">确定导出</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { modevtypeListAllApi } from "@/utils/api/index";
+
+export default {
+  name: "deviceBoxDialog",
+  components: {},
+  data() {
+    return {
+      sblxform: {
+        sblxId: "",
+      },
+      dialogVisible: false,
+      sblxOptions: [],
+      startTime: "",
+      endTime: "",
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {},
+  watch: {},
+  mounted() {},
+  methods: {
+    getdeviceList() {
+      modevtypeListAllApi()
+        .then((res) => {
+          console.log(res);
+          this.sblxOptions = res.data;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+
+    onSubmit() {
+      console.log(this.sblxform);
+      console.log(this.startTime, this.endTime);
+      window.location.href =
+        "/cac-api/nsensor/export?typeId=" +
+        this.sblxform.sblxId +
+        "&startTime=" +
+        this.startTime +
+        "&endTime=" +
+        this.endTime;
+      this.dialogVisible = false;
+    },
+
+    display(stime, etime) {
+      this.startTime = stime;
+      this.endTime = etime;
+      this.dialogVisible = true;
+      this.getdeviceList();
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      this.sblxform.sblxId = "";
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.deviceBoxDialog {
+}
+</style>

src/views/dataReport/components/line.vue

@@ -84,14 +84,17 @@ export default {
         dataZoom: [
           {
             type: "inside",
-            start: 0,
-            end: 20,
+            start: 80,
+            end: 100,
           },
           {
-            start: 0,
-            end: 20,
+            start: 80,
+            end: 100,
           },
         ],
+        grid: {
+          containLabel: true,
+        },
         xAxis: {
           type: "category",
           name: "时间",

src/views/dataReport/index.vue

@@ -18,10 +18,11 @@
           :props="defaultProps"
           node-key="compositeKey"
           :filter-node-method="filterNode"
-          :default-expand-all="true"
           highlight-current
           :current-node-key="currentNodekey"
+          :default-expanded-keys="defaultExpandedKeys"
           :expand-on-click-node="true"
+          accordion
           @node-click="handleNodeClick"
         >
           <!-- <template class="custom-tree-node" slot-scope="{ node, data }">
@@ -48,7 +49,12 @@
     </div>
     <div class="reportTable">
       <div class="reportHead">
-        <h3>数据展示</h3>
+        <h3>
+          数据展示
+          <el-button type="primary" class="exporBtn" @click="handleAllExport"
+            >按设备类型导出数据</el-button
+          >
+        </h3>
         <div class="searchMain">
           <el-form :inline="true" :model="formdata" class="demo-form-inline">
             <el-form-item label="开始日期">
@@ -202,14 +208,19 @@
         </el-tabs>
       </div>
     </div>
+    <deviceExportDialog ref="deviceRef"></deviceExportDialog>
   </div>
 </template>
 <script>
 import { getTreeApi, getDetailApi, getexportApi } from "@/utils/api/index";
 import lineChart from "./components/line";
+import deviceExportDialog from "./components/deviceExportDialog";
 export default {
   name: "dataReport",
-  components: { lineChart },
+  components: {
+    lineChart,
+    deviceExportDialog,
+  },
   data() {
     return {
       pickerOptions: {
@@ -231,7 +242,7 @@ export default {
         key: "compositeKey", // 确保这里使用的是 uniqueKey
       },
       formdata: {
-        dayValue: 4,
+        dayValue: -1,
       }, //查询定义的form数据
       dayOptions: [
         {
@@ -265,7 +276,6 @@ export default {
       key: 1,
       tableData: [], //表格数据
       columns: [], //表头数据
-
       page: 1, // 当前页数
       pageSize: 20, // 每页数量
       total: 0, //总条数
@@ -325,10 +335,12 @@ export default {
     },
     //树状图搜索
     filterNode(value, data, node) {
+      console.log(value);
       // 如果什么都没填全部匹配全部返回
       if (!value) return true;
-      this.searchName = data.name;
-      //console.log(this.searchName);
+      console.log(data);
+      this.searchName = data.mc + data.name;
+      console.log(this.searchName);
       // 如果传入的value和data中的label相同，匹配成功
       if (this.searchName.indexOf(value) !== -1) {
         return true;
@@ -345,7 +357,7 @@ export default {
           this.treeData = this.processData(response.data);
           console.log(this.treeData[0]);
           this.defaultExpandedKeys = [
-            this.treeData[0].children[0].children[0].id,
+            this.treeData[0].children[0].children[0].compositeKey,
           ];
           this.currentNodekey =
             this.treeData[0].children[0].children[0].children[0].compositeKey;
@@ -395,7 +407,7 @@ export default {
       this.currentId = data.id;
       this.page = 1;
       this.pageSize = 20;
-      // this.handleSearch();
+      //this.handleSearch();
       //获取数据时间
       this.getAllTimeTable();
     },
@@ -547,14 +559,20 @@ export default {
     getDetailTable(id, dayval, stime, eTime) {
       console.log(id, stime, eTime);
       this.tableLoading = true;
-      getDetailApi({
+      // 创建一个空对象来存储API的参数
+      const apiParams = {
         id: id,
-        numPerDay: dayval,
         startTime: stime,
         endTime: eTime,
         pageNum: this.page,
         pageSize: this.pageSize,
-      })
+      };
+
+      // 如果dayval不等于-1，则添加numPerDay参数
+      if (dayval !== -1) {
+        apiParams.numPerDay = dayval;
+      }
+      getDetailApi(apiParams)
         .then((res) => {
           console.log(res);
           if (res.success) {
@@ -583,6 +601,7 @@ export default {
           }
         })
         .catch((err) => {
+          this.tableLoading = false;
           console.log(err); //代码错误、请求失败捕获
         });
     },
@@ -678,6 +697,12 @@ export default {
         "&pageSize=" +
         this.pageSize;
     },
+    handleAllExport() {
+      this.$refs.deviceRef.display(
+        this.formdata.starttime,
+        this.formdata.endtime
+      );
+    },
     //点击分页
     handleCurrentChange(val) {
       this.page = val;
@@ -706,6 +731,7 @@ export default {
       this.chartDataArr = [];
       getDetailApi({
         id: id,
+        timeAsc: 1,
         startTime: stime,
         endTime: eTime,
       })
@@ -877,6 +903,9 @@ export default {
         font-weight: normal;
         height: 40px;
         line-height: 40px;
+        .exporBtn {
+          margin-left: 12px;
+        }
       }
       .searchMain {
         display: flex;

src/views/dataTransfer/downrecord/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="recordBoxdown">
+    <div class="reportHead">
+      <h3>下载记录</h3>
+    </div>
+    <div class="page-body">
+      <div class="title">
+        <span>选择服务器：</span>
+        <el-select v-model="serverVal" @change="changeServer">
+          <el-option
+            v-for="item in serverOption"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="zsbTableBox">
+        <el-table
+          :data="recordData"
+          style="width: 100%"
+          height="calc(100% - 0px)"
+          v-loading="recordLoading"
+        >
+          <el-table-column label="服务器名称" prop="server">
+            <template slot-scope="scope">
+              <span>{{ scope.row.server.name }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="id" prop="id">
+            <template slot-scope="scope">
+              <span>{{ scope.row.id }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="remotePath" prop="remotePath">
+            <template slot-scope="scope">
+              <span>{{ scope.row.remotePath }}</span>
+            </template>
+          </el-table-column>
+
+          <!-- <el-table-column label="path" prop="path">
+            <template slot-scope="scope">
+              <span>{{ scope.row.path }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="filename" prop="filename">
+            <template slot-scope="scope">
+              <el-button
+                type="text"
+                @click="downFile(scope.row)"
+                class="buttonText"
+                >{{ scope.row.filename }}</el-button
+              >
+              <!-- <span>{{ scope.row.filename }}</span> -->
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" prop="createTime">
+            <template slot-scope="scope">
+              <span>{{ scope.row.createTime }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            :page-sizes="[20, 40, 100]"
+            layout="sizes, prev, pager, next, jumper,total"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { DownloadAllApi, serverlistApi } from "@/utils/api/index";
+// import addzsbDialog from "./components/addzsbDialog";
+export default {
+  name: "record",
+  components: {},
+  data() {
+    return {
+      recordData: [],
+      recordLoading: false,
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+      serverOption: [{ id: -1, name: "全部" }], //服务器名称
+      serverVal: "",
+    };
+  },
+  created() {
+    this.getServerList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //获取服务器
+    getServerList() {
+      serverlistApi()
+        .then((res) => {
+          console.log(res);
+          this.serverOption = this.serverOption.concat(res.data);
+          this.serverVal = this.serverOption[0].id;
+          this.getdownAll();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换服务器
+    //选中的值获取tablename
+    changeServer(val) {
+      console.log(val);
+      let selectedOption = this.serverOption.find((item) => item.id === val);
+      if (selectedOption) {
+        // 如果找到了匹配的项，访问它的 tablename
+        this.serverVal = selectedOption.id;
+        console.log(this.serverVal); // 或者根据你的需求使用 tablename
+        this.getdownAll();
+      }
+    },
+    getdownAll() {
+      console.log(this.serverVal);
+      let params = { pageNum: this.page, pageSize: this.pageSize };
+      if (this.serverVal !== -1) {
+        params.configId = this.serverVal;
+      }
+      DownloadAllApi(params)
+        .then((res) => {
+          console.log(res);
+          this.recordData = res.data.content;
+          this.total = res.data.totalPages;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //下载文件
+    downFile(row) {
+      // 创建一个新的a标签元素
+      const a = document.createElement("a");
+      // 设置a标签的href属性为文件的URL
+      a.href = row.path;
+      console.log(a.href);
+      // 设置文件名（可选，取决于服务器配置）
+      a.download = row.filename; // 你希望保存的文件名
+      // 触发点击事件
+      document.body.appendChild(a);
+      a.click();
+      // 然后移除a标签
+      document.body.removeChild(a);
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.recordData = [];
+      this.getdownAll();
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.recordData = [];
+      this.getdownAll();
+    },
+  },
+};
+</script>
+<style lang="less">
+.recordBoxdown {
+  width: 100%;
+  height: 100%;
+  .page-body {
+    width: calc(100% - 24px);
+    height: calc(100% - 74px);
+    padding: 12px;
+    background: #eee;
+    .title {
+      display: flex;
+      align-items: center;
+      span {
+        color: #000;
+        font-size: 14px;
+      }
+    }
+    .zsbTableBox {
+      margin-top: 8px;
+      height: calc(100% - 72px);
+      box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3);
+      .pageNation {
+        margin-top: 6px;
+        display: flex;
+        justify-content: flex-end;
+      }
+      .buttonText {
+        cursor: pointer;
+        white-space: pre-wrap;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataTransfer/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="I2Box">
+    <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>
+// import addRules from "./components/addRules";
+// import copyRules from "./components/copyRules";
+import {} from "@/utils/api/index";
+export default {
+  name: "dataTransfer",
+  components: {},
+  data() {
+    return {
+      activeIndex: 0,
+      navlist: [
+        {
+          name: "远端服务器",
+          path: "/dataTransfer/server",
+        },
+
+        {
+          name: "下载记录",
+          path: "/dataTransfer/downrecord",
+        },
+      ],
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  methods: {},
+};
+</script>
+<style lang="less">
+.I2Box {
+  display: flex;
+  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;
+      }
+      .el-tag {
+        margin-left: auto;
+        cursor: pointer;
+      }
+    }
+    .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;
+    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>

src/views/dataTransfer/server/components/addserverDialog.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="filedAddBoxServer">
+    <el-dialog
+      class="AddDialogBox"
+      :title="title"
+      :visible.sync="serverDialogShow"
+      @close="hide"
+      width="520px"
+      :close-on-click-modal="false"
+    >
+      <div class="filedInfo">
+        <el-form
+          label-position="left"
+          ref="formInforef"
+          label-width="104px"
+          :rules="rules"
+          :model="formInfo"
+        >
+          <el-form-item label="名称：" prop="name">
+            <el-input v-model="formInfo.name"></el-input>
+          </el-form-item>
+          <el-form-item label="ip：" prop="ip">
+            <el-input v-model="formInfo.ip"></el-input>
+          </el-form-item>
+          <el-form-item label="端口：" prop="port">
+            <el-input v-model="formInfo.port"></el-input>
+          </el-form-item>
+          <el-form-item label="用户名：" prop="user">
+            <el-input v-model="formInfo.user"></el-input>
+          </el-form-item>
+          <el-form-item label="密码：" prop="passwd">
+            <el-input v-model="formInfo.passwd"></el-input>
+          </el-form-item>
+          <el-form-item label="路径：" prop="pathList">
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 4, maxRows: 4 }"
+              v-model="formInfo.pathList"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="下载文件：" prop="suffix">
+            <el-select v-model="formInfo.suffix" placeholder="请选择">
+              <el-option
+                v-for="item in suffixOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态：" prop="active">
+            <el-radio-group v-model="formInfo.active">
+              <el-radio :label="1">启用</el-radio>
+              <el-radio :label="0">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="下载后删除：" prop="todel">
+            <el-radio-group v-model="formInfo.todel">
+              <el-radio :label="1">是</el-radio>
+              <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <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 { serveAddApi, serveUpdateApi } from "@/utils/api/index";
+export default {
+  props: ["title"],
+  data() {
+    return {
+      serverDialogShow: false,
+      formInfo: {
+        active: 1,
+        todel: 0,
+      },
+      rules: {},
+      pathObjects: [], // 用于存储转换后的对象数组
+      suffixOptions: [
+        {
+          value: "全部",
+          label: "",
+        },
+        {
+          value: "dat",
+          label: "dat",
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {
+    // 初始化时，给每个对象添加 selected 和 value 属性
+  },
+  watch: {},
+  methods: {
+    //判断
+    getdataform(val) {
+      console.log(val);
+      this.formInfo = JSON.parse(JSON.stringify(val));
+      const columnData = this.formInfo.pathList.map((item) => item);
+      this.formInfo.pathList = columnData.join("\n");
+    },
+    submitForm() {
+      this.$refs.formInforef.validate((valid) => {
+        if (valid) {
+          if (this.title == "新增远端服务器") {
+            console.log(this.formInfo);
+            const pathArray = this.formInfo.pathList
+              .split("\n")
+              .map((path) => path.trim())
+              .filter((path) => path);
+            let params = {
+              name: this.formInfo.name,
+              ip: this.formInfo.ip,
+              port: this.formInfo.port,
+              user: this.formInfo.user,
+              passwd: this.formInfo.passwd,
+              pathList: pathArray,
+              active: this.formInfo.active,
+              todel: this.formInfo.todel,
+              suffix: this.formInfo.suffix,
+            };
+            console.log(params);
+            serveAddApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getServerList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          } else {
+            console.log(this.formInfo);
+            const pathArray = this.formInfo.pathList
+              .split("\n")
+              .map((path) => path.trim())
+              .filter((path) => path);
+            let params = {
+              id: this.formInfo.id,
+              name: this.formInfo.name,
+              ip: this.formInfo.ip,
+              port: this.formInfo.port,
+              user: this.formInfo.user,
+              passwd: this.formInfo.passwd,
+              pathList: pathArray,
+              active: this.formInfo.active,
+              todel: this.formInfo.todel,
+              suffix: this.formInfo.suffix,
+            };
+            serveUpdateApi(params)
+              .then((res) => {
+                if (res.success) {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: "添加成功",
+                    type: "success",
+                  });
+                  this.hide();
+                  this.$parent.getServerList(); //刷新
+                } else {
+                  this.$message({
+                    duration: 1500,
+                    showClose: true,
+                    message: res.errorMsg,
+                    type: "error",
+                  });
+                }
+              })
+              .catch((err) => {});
+          }
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //获取监测设备类型
+
+    display() {
+      this.serverDialogShow = true;
+    },
+    hide() {
+      this.serverDialogShow = false;
+      console.log("我关闭了");
+      this.formInfo = {};
+      this.$refs.formInforef.resetFields(); // 重置表单字段值
+      console.log(this.formInfo);
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedAddBoxServer {
+  .AddDialogBox {
+    .el-select {
+      width: 376px;
+    }
+    .filedInfo {
+      .colListBox {
+        overflow: auto;
+        height: 400px;
+        .coltitle {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          span {
+            font-weight: bold;
+            &:first-child {
+              width: 40%;
+              margin-right: 24px;
+            }
+            &:last-child {
+              width: 50%;
+            }
+          }
+        }
+        .selectCol {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+          .el-checkbox {
+            width: 40%;
+            margin-right: 24px;
+          }
+          .el-input {
+            width: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dataTransfer/server/index.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="filedBoxServer">
+    <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
+          :data="serverData"
+          style="width: 100%"
+          height="calc(100% - 0px)"
+        >
+          <el-table-column label="名称" prop="name"> </el-table-column>
+          <el-table-column label="ip" prop="ip"> </el-table-column>
+          <el-table-column label="端口" prop="port">
+            <template slot-scope="scope">
+              <span>{{ scope.row.port }}</span>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="用户名" prop="user"> </el-table-column>
+          <el-table-column label="密码" prop="passwd"> </el-table-column> -->
+          <el-table-column label="路径" prop="pathList">
+            <template slot-scope="scope">
+              <p v-for="(item, index) in scope.row.pathList">
+                {{ item }}
+              </p>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" prop="active">
+            <template slot-scope="scope">
+              <span>{{ scope.row.active == 1 ? "启用" : "停用" }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="下载文件后缀" prop="suffix">
+          </el-table-column>
+          <el-table-column label="操作" 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>
+    <addserverDialog ref="serverAddRef" :title="title"></addserverDialog>
+  </div>
+</template>
+<script>
+import { serverlistApi, serveDelApi } from "@/utils/api/index";
+import addserverDialog from "./components/addserverDialog";
+export default {
+  components: {
+    addserverDialog,
+  },
+  name: "server",
+  data() {
+    return {
+      filedLoading: false,
+      serverData: [],
+      title: "",
+    };
+  },
+  created() {
+    this.getServerList();
+  },
+  mounted() {},
+  watch: {},
+  methods: {
+    //获取字段映射
+    getServerList() {
+      this.filedLoading = true;
+      serverlistApi()
+        .then((res) => {
+          console.log(res);
+          this.serverData = res.data;
+
+          this.filedLoading = false;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //新增
+    handleAddClick() {
+      this.title = "新增远端服务器";
+      this.$refs.serverAddRef.display();
+    },
+    handleEditClick(data) {
+      this.title = "修改";
+      this.$refs.serverAddRef.display();
+      this.$refs.serverAddRef.getdataform(data);
+    },
+    //删除数据
+    handleDeleteClick(data) {
+      console.log(data);
+      this.$confirm(`确定要删除${data.name}远端服务器记录吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          serveDelApi({ id: data.id }).then((res) => {
+            if (res.success) {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "success",
+                message: "删除成功",
+              });
+              this.getServerList(); //刷新
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                type: "error",
+                message: res.errorMsg,
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.filedBoxServer {
+  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>

src/views/equipment/jcsb/components/addjcsbDialog.vue

@@ -69,7 +69,7 @@ export default {
       },
       rules: {
         name: [{ required: true, message: "请输入名称", trigger: "blur" }],
-        devId: [{ required: true, message: "请输入devId", trigger: "blur" }],
+        // devId: [{ required: true, message: "请输入devId", trigger: "blur" }],
       },
       tableOptions: [],
       zsbInfo: "",

src/views/equipment/jcsb/components/attributeList.vue

@@ -1,256 +0,0 @@
-<template>
-  <div class="attributeList">
-    <el-dialog
-      class="attributesDialogBox"
-      title="属性配置"
-      :visible.sync="attributeshow"
-      width="620px"
-      :close-on-click-modal="false"
-    >
-      <div class="attBox" v-loading="attLoading">
-        <el-button
-          class="addAtt"
-          type="primary"
-          icon="el-icon-plus"
-          @click="handleAddAttClick"
-          >添加属性</el-button
-        >
-        <el-table
-          :data="attributesData"
-          stripe
-          border
-          style="width: 100%"
-          height="404px"
-        >
-          <el-table-column prop="field" label="字段名" width="180">
-          </el-table-column>
-          <el-table-column prop="fieldDesc" label="字段描述" width="180">
-          </el-table-column>
-          <el-table-column prop="unit" label="单位"> </el-table-column>
-          <el-table-column label="操作" class-name="editClass">
-            <template slot-scope="scope">
-              <el-link
-                type="danger"
-                @click="handleDeleteClick(scope.row)"
-                size="small"
-                icon="el-icon-delete"
-                >删除</el-link
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <el-dialog
-        width="450px"
-        title="新增"
-        :visible.sync="innerVisible"
-        append-to-body
-        class="attaddDialog"
-      >
-        <el-form
-          label-position="left"
-          ref="formInfo"
-          label-width="104px"
-          :rules="rules"
-          :model="formInfo"
-        >
-          <el-form-item label="属性名：">
-            <el-select v-model="formInfo.name" @change="changeName">
-              <el-option
-                v-for="item in attOptions"
-                :key="item.name"
-                :label="item.name"
-                :value="item.name"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="属性描述：" prop="comment">
-            <el-input v-model="formInfo.comment"></el-input>
-          </el-form-item>
-          <el-form-item label="类型：">
-            <el-select v-model="formInfo.typeVal" @change="changeName">
-              <el-option
-                v-for="item in typeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="innerVisible = false">取 消</el-button>
-          <el-button type="primary" @click="submitAddForm()">确 定</el-button>
-        </div>
-      </el-dialog>
-      <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 {
-  modevtypepointAddApi,
-  modevtypepointListApi,
-  modevtypepointDeleteApi,
-  colListApi,
-} from "@/utils/api/index";
-export default {
-  props: ["title"],
-  data() {
-    return {
-      rowData: "",
-      attributeshow: false,
-      innerVisible: false,
-      attLoading: false,
-      attributesData: [],
-      attOptions: [],
-      typeOptions: [
-        {
-          value: 1,
-          label: "遥信",
-        },
-        {
-          value: 2,
-          label: "遥测",
-        },
-      ],
-      formInfo: {
-        name: "",
-        comment: "",
-        typeVal: 2,
-      },
-      rules: {},
-    };
-  },
-  created() {},
-  mounted() {},
-  watch: {},
-  methods: {
-    changeName(val) {
-      console.log(val);
-      this.formInfo.name = val;
-      console.log(this.attOptions.find((item) => item.name === val));
-      this.formInfo.comment = this.attOptions.find(
-        (item) => item.name === val
-      ).comment;
-    },
-    display(val) {
-      //当前数据
-      this.rowData = val;
-      console.log(this.rowData);
-      this.attributeshow = true;
-      this.getListAll();
-    },
-    getListAll() {
-      this.attLoading = true;
-      modevtypepointListApi({
-        modevtypeId: this.rowData.id,
-      })
-        .then((res) => {
-          console.log(res);
-
-          this.attributesData = res.data;
-          this.attLoading = false;
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //添加属性
-    handleAddAttClick() {
-      this.innerVisible = true;
-      this.getcolList();
-    },
-    //获取colList
-    getcolList() {
-      colListApi({
-        tableName: this.rowData.tableName,
-      })
-        .then((res) => {
-          console.log(res);
-          this.attOptions = res.data;
-          this.formInfo.name = res.data[0].name;
-          this.formInfo.comment = res.data[0].comment;
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //新增接口
-    submitAddForm() {
-      console.log(this.formInfo);
-      modevtypepointAddApi({
-        sensorId: this.rowData.id,
-        field: this.formInfo.name,
-        fieldDesc: this.formInfo.comment,
-        type: this.formInfo.typeVal,
-      })
-        .then((res) => {
-          console.log(res);
-          this.innerVisible = false;
-          this.getListAll();
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //删除
-    handleDeleteClick(val) {
-      console.log(val);
-      this.$confirm("确定要删除记录吗?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          modevtypepointDeleteApi({ id: val.id }).then((res) => {
-            if (res.success) {
-              this.$message({
-                duration: 1500,
-                showClose: true,
-                type: "success",
-                message: "删除成功",
-              });
-              this.getListAll(); //刷新
-            } else {
-              this.$message({
-                duration: 1500,
-                showClose: true,
-                type: "error",
-                message: res.errorMsg,
-              });
-            }
-          });
-        })
-        .catch(() => {});
-    },
-    submitForm() {
-      this.attributeshow = false;
-    },
-    hide() {
-      this.attributeshow = false;
-    },
-  },
-};
-</script>
-<style lang="less">
-.attributeList {
-  .attributesDialogBox {
-    .attBox {
-      .addAtt {
-        margin-bottom: 16px;
-      }
-    }
-  }
-}
-.attaddDialog {
-  .el-select {
-    width: 306px;
-  }
-}
-</style>

src/views/equipment/modevtype/components/addmodevtypeDialog.vue

@@ -10,7 +10,7 @@
       <el-form
         label-position="left"
         ref="formInfo"
-        label-width="104px"
+        label-width="124px"
         :rules="rules"
         :model="formInfo"
       >
@@ -36,6 +36,12 @@
             </el-option>
           </el-select>
         </el-form-item>
+        <el-form-item label="类型编码：" prop="typeCode">
+          <el-input v-model="formInfo.typeCode"></el-input>
+        </el-form-item>
+        <el-form-item label="采集间隔(分钟)：" prop="intervals">
+          <el-input v-model="formInfo.intervals"></el-input>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="hide">取 消</el-button>
@@ -58,6 +64,7 @@ export default {
       formInfo: {
         mc: "",
         tablename: "",
+        typeCode: "",
       },
       rules: {
         mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
@@ -143,6 +150,7 @@ export default {
             console.log(this.formInfo);
             this.formInfo.tablename = this.tableOptions[0].name;
             this.formInfo.mc = "";
+            this.formInfo.typeCode = "";
           }
         })
         .catch((err) => {
@@ -165,7 +173,7 @@ export default {
 .modevtypeAddBox {
   .modevtypeAddDialogBox {
     .el-select {
-      width: 376px;
+      width: 356px;
     }
   }
 }

src/views/equipment/modevtype/components/attributeList.vue

@@ -68,17 +68,9 @@
           <el-form-item label="属性描述：" prop="comment">
             <el-input v-model="formInfo.comment"></el-input>
           </el-form-item>
-          <!-- <el-form-item label="类型：">
-            <el-select v-model="formInfo.typeVal" @change="changeName">
-              <el-option
-                v-for="item in typeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item> -->
+          <el-form-item label="类型：">
+            <el-input v-model="formInfo.type" disabled></el-input>
+          </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="innerVisible = false">取 消</el-button>
@@ -122,6 +114,7 @@ export default {
       formInfo: {
         name: "",
         comment: "",
+        type: "",
         //typeVal: 2,
       },
       rules: {
@@ -142,6 +135,9 @@ export default {
       this.formInfo.comment = this.attOptions.find(
         (item) => item.name === val
       ).comment;
+      this.formInfo.type = this.attOptions.find(
+        (item) => item.name === val
+      ).type;
     },
     display(val) {
       //当前数据
@@ -180,6 +176,7 @@ export default {
           this.attOptions = res.data;
           this.formInfo.name = res.data[0].name;
           this.formInfo.comment = res.data[0].comment;
+          this.formInfo.type = res.data[0].type;
         })
         .catch((err) => {
           console.log(err); //代码错误、请求失败捕获
@@ -194,7 +191,7 @@ export default {
             modevtypeId: this.rowData.id,
             field: this.formInfo.name,
             fieldDesc: this.formInfo.comment,
-            //type: this.formInfo.typeVal,
+            type: this.formInfo.type,
           })
             .then((res) => {
               console.log(res);

src/views/equipment/modevtype/index.vue

@@ -19,7 +19,9 @@
           <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 prop="typeCode" label="类型编码"> </el-table-column>
+          <el-table-column prop="intervals" label="采集间隔（分钟）">
+          </el-table-column>
           <el-table-column label="操作" class-name="editClass">
             <template slot-scope="scope">
               <el-link

src/views/equipment/monitoring/components/addmonitoringDialog.vue

@@ -37,9 +37,12 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="传感器代码：" prop="sensorCode">
+        <el-form-item label="sensorCode：" prop="sensorCode">
           <el-input v-model="formInfo.sensorCode"></el-input>
         </el-form-item>
+        <el-form-item label="equipmentId：" prop="equipmentId">
+          <el-input v-model="formInfo.equipmentId"></el-input>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="hide">取 消</el-button>
@@ -66,10 +69,11 @@ export default {
         typeId: "",
         devId: "",
         sensorCode: "",
+        equipmentId: "",
       },
       rules: {
         name: [{ required: true, message: "请输入名称", trigger: "blur" }],
-        devId: [{ required: true, message: "请输入devId", trigger: "blur" }],
+        //devId: [{ required: true, message: "请输入devId", trigger: "blur" }],
       },
       tableOptions: [],
       zsbInfo: "",

src/views/equipment/monitoring/index.vue

@@ -91,7 +91,9 @@
           <el-table-column prop="typeName" label="类型" width="160">
           </el-table-column>
 
-          <el-table-column prop="sensorCode" label="传感器代码" width="160">
+          <el-table-column prop="sensorCode" label="sensorCode" width="160">
+          </el-table-column>
+          <el-table-column prop="equipmentId" label="equipmentId" width="160">
           </el-table-column>
           <el-table-column label="操作" width="260" class-name="editClass">
             <template slot-scope="scope">
@@ -223,7 +225,7 @@ export default {
     },
     getmonitoringAllList() {
       this.monitoringLoading = true;
-      monitoringListApi({ pageNum: this.page - 1, pageSize: this.pageSize })
+      monitoringListApi({ pageNum: this.page, pageSize: this.pageSize })
         .then((res) => {
           console.log(res);
           this.monitoringTableData = res.data.content;

src/views/equipment/unitController/index.vue

@@ -17,7 +17,7 @@
           height="calc(100% - 0px)"
         >
           <el-table-column prop="id" label="ID"> </el-table-column>
-          <el-table-column prop="field" label="名称"> </el-table-column>
+          <el-table-column prop="field" label="字段"> </el-table-column>
           <el-table-column prop="unit" label="单位"> </el-table-column>
           <el-table-column label="操作" class-name="editClass">
             <template slot-scope="scope">

src/views/homePage/Echarts/index.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="homechart">
+    <h3>{{ echartData.tendencyChartTitle }}-实时数据趋势图</h3>
+
+    <div id="tendencyChart"></div>
+    <!-- <div id="noDataBox" v-show="echartData.legendData.length == 0">
+      <div class="noPic">
+        <i class="el-icon-data-line"></i>
+        <p>暂无数据</p>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Echarts",
+  props: {
+    echartData: {
+      type: Object,
+      default: () => ({
+        tendencyChartTitle: "",
+        legendData: [],
+        xAxisData: [],
+        seriesData: [],
+      }),
+    },
+  },
+  data() {
+    return {
+      xFontColor: "rgba(256,256,256,1)",
+    };
+  },
+  created() {},
+  watch: {
+    echartData: {
+      //深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        this.echart();
+      },
+      deep: true, //true 深度监听
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.echart();
+    });
+  },
+  methods: {
+    // 绘制图标
+    echart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("tendencyChart")
+      );
+      myChart.clear();
+      // 绘制图表
+      myChart.setOption({
+        color: [
+          "#ee6666",
+          "#91cc75",
+          "#fac858",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc",
+          "#03bcff",
+        ],
+
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            var relVal = params[0].name + "<br/>"; // 假设 params[0].name 是标题或类别名
+            for (var i = 0; i < params.length; i++) {
+              // 检查值是否为 undefined，如果是，则替换为 --
+              var value =
+                params[i].value !== undefined ? params[i].value : "--";
+              relVal += params[i].seriesName + " : " + value + "<br/>";
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          icon: "circle",
+          data: this.echartData.legendData,
+          textStyle: {
+            color: this.xFontColor,
+          },
+          lineStyle: {
+            width: 2.5,
+          },
+        },
+        grid: {
+          left: "10%",
+          right: "10%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        dataZoom: [
+          {
+            id: "dataZoomX",
+            type: "slider",
+            xAxisIndex: [0],
+            filterMode: "filter",
+            start: 90,
+            end: 100,
+            // startValue: 90,
+            // endValue: 100,
+            textStyle: {
+              color: this.xFontColor,
+            },
+          },
+        ],
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.echartData.xAxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: this.xFontColor, //这里用参数代替了
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.xFontColor,
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: this.xFontColor, //这里用参数代替了
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.xFontColor,
+            },
+            show: false,
+          },
+        },
+        series: this.echartData.seriesData,
+        // series: this.echartData.seriesData,
+      });
+      window.onresize = function () {
+        myChart.resize();
+      };
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less">
+.homechart {
+  width: 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;
+  }
+  #tendencyChart {
+    height: 320px;
+  }
+  #noDataBox {
+    height: 320px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .noPic {
+      text-align: center;
+      i {
+        font-size: 120px;
+        color: #27546f;
+        margin-bottom: 24px;
+      }
+      p {
+        font-size: 14px;
+        color: #999;
+      }
+    }
+  }
+}
+
+/* @media screen and (max-width: 1440px) {
+  #tendencyChart {
+    height: 230px;
+  }
+} */
+</style>

src/views/homePage/arrester/index.vue

@@ -0,0 +1,261 @@
+<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, getDetailApi } from "@/utils/api/index";
+
+export default {
+  name: "arrester",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "避雷器",
+      arresterData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+        "241,113,175",
+        "180,191,23",
+        "151,225,137",
+        "240,23,181",
+        "125,20,22",
+      ],
+      stime: "",
+      eTime: "",
+    };
+  },
+  created() {
+    this.getarresterdata();
+    const thirtyDaysAgo = new Date();
+    const startDate = new Date(
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    );
+    startDate.setHours(0); // 0
+    startDate.setMinutes(0); // 0
+    startDate.setSeconds(0); // 0
+    this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
+
+    const endDate = new Date();
+    endDate.setHours(23); // 设置小时为23
+    endDate.setMinutes(59); // 设置分钟为59
+    endDate.setSeconds(59); // 设置秒数为59
+    this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
+    console.log(this.stime, this.eTime);
+  },
+  methods: {
+    getarresterdata() {
+      monitoringListApi({
+        typeId: 4,
+        pageSize: 100,
+      })
+        .then((res) => {
+          console.log(res);
+          this.arresterData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        timeAsc: 1,
+        startTime: this.stime,
+        endTime: this.eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</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>

src/views/homePage/clamp/index.vue

@@ -0,0 +1,281 @@
+<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, getDetailApi } from "@/utils/api/index";
+export default {
+  name: "clamp",
+  data() {
+    return {
+      pageCardTitle: "铁芯",
+      clmpData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+        "241,113,175",
+        "180,191,23",
+        "151,225,137",
+        "240,23,181",
+        "125,20,22",
+      ],
+      stime: "",
+      eTime: "",
+    };
+  },
+  created() {
+    this.getclampdata();
+    const thirtyDaysAgo = new Date();
+    const startDate = new Date(
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    );
+    startDate.setHours(0); // 0
+    startDate.setMinutes(0); // 0
+    startDate.setSeconds(0); // 0
+    this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
+
+    const endDate = new Date();
+    endDate.setHours(23); // 设置小时为23
+    endDate.setMinutes(59); // 设置分钟为59
+    endDate.setSeconds(59); // 设置秒数为59
+    this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
+    console.log(this.stime, this.eTime);
+  },
+  methods: {
+    getclampdata() {
+      monitoringListApi({
+        typeId: 2,
+        pageSize: 100,
+      })
+        .then((res) => {
+          console.log(res);
+          this.clmpData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        timeAsc: 1,
+        startTime: this.stime,
+        endTime: this.eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</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>

src/views/homePage/index.vue

@@ -3,23 +3,35 @@
     <div class="homeLeft">
       <div class="pageleftBox">
         <!-- <div class="divTop">我是上面</div> -->
-        <oilChromatography></oilChromatography>
-        <div class="divcenter">我是上面2</div>
-        <div class="divBottom">我是上面3</div>
+        <oilChromatography @dataDispose="dataDispose"></oilChromatography>
+        <clamp @dataDispose="dataDispose"></clamp>
+        <windingTemperature @dataDispose="dataDispose"></windingTemperature>
       </div>
     </div>
     <div class="homeCenter">
       <div class="pagecenterBox">
-        <div class="divTop"></div>
-        <div class="divcenter"></div>
-        <div class="divBottom"></div>
+        <div class="divTop">
+          <homeChart :echartData="echartData"></homeChart>
+        </div>
+        <div class="divcenter">
+          <partialDischarges @dataDispose="dataDispose"></partialDischarges>
+        </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 @dataDispose="dataDispose"></sf6>
+        </div>
+        <div class="divBottom">
+          <arrester @dataDispose="dataDispose"></arrester>
+        </div>
       </div>
     </div>
   </div>
@@ -31,19 +43,59 @@
 // } 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 homeChart from "./Echarts/index"; //折线图
+import partialDischarges from "./partialDischarges/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,
+    partialDischarges,
+    homeChart,
+    monitoringDevice,
+    sf6,
+    arrester,
+    warnMessage,
   },
   data() {
-    return {};
+    return {
+      echartData: {
+        // 默认的图表数据
+        legendData: [],
+        xAxisData: [],
+        tendencyChartTitle: "",
+        seriesData: [],
+      },
+    };
   },
   created() {},
   mounted() {},
   watch: {},
-  methods: {},
+  methods: {
+    dataDispose(legendData, xAxisData, seriesData, title) {
+      console.log(legendData);
+      console.log(xAxisData);
+      console.log(seriesData);
+      console.log(title);
+      this.echartData = {
+        legendData: legendData,
+        xAxisData: xAxisData,
+        seriesData: seriesData,
+        tendencyChartTitle: title,
+      };
+      console.log(this.echartData);
+    },
+  },
 };
 </script>
 <style lang="less">
@@ -59,7 +111,7 @@ export default {
   }
   .homeCenter {
     padding: 0px 10px;
-    flex: 1;
+    width: 60%;
     .pagecenterBox {
       display: flex;
       flex-direction: column;
@@ -79,16 +131,20 @@ export default {
         box-shadow: inset 0 4px 44px 0 #106cde;
       }
       .divcenter {
-        height: 190px;
+        height: 230px;
         margin-bottom: 10px;
-        background: url(../../assets/card3Bg.png) no-repeat center;
+        background: rgba(8, 9, 36, 0.28);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        box-shadow: inset 0 4px 44px 0 #106cde;
+        //background: url(../../assets/card2Bg.png) no-repeat center;
         background-size: 100% 100%;
       }
       .divBottom {
-        height: 248px;
+        height: 208px;
         background: rgba(255, 27, 27, 0.2);
-        -webkit-backdrop-filter: blur(10px);
-        backdrop-filter: blur(10px);
+        // -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;
       }
@@ -99,23 +155,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 +182,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;
     }

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>

src/views/homePage/oilChromatography/index.vue

@@ -1,27 +1,189 @@
 <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"
+        ref="oilTableref"
+        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, getDetailApi } from "@/utils/api/index";
 export default {
   name: "oil",
   data() {
     return {
       pageCardTitle: "油色谱",
+      oilData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+        "241,113,175",
+        "180,191,23",
+        "151,225,137",
+        "240,23,181",
+        "125,20,22",
+      ],
+      stime: "",
+      eTime: "",
     };
   },
-  created() {},
-  methods: {},
+  created() {
+    this.getoildata();
+    const thirtyDaysAgo = new Date();
+    const startDate = new Date(
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    );
+    startDate.setHours(0); // 0
+    startDate.setMinutes(0); // 0
+    startDate.setSeconds(0); // 0
+    this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
+
+    const endDate = new Date();
+    endDate.setHours(23); // 设置小时为23
+    endDate.setMinutes(59); // 设置分钟为59
+    endDate.setSeconds(59); // 设置秒数为59
+    this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
+    console.log(this.stime, this.eTime);
+  },
+  mounted() {},
+  methods: {
+    getoildata() {
+      monitoringListApi({
+        typeId: 1,
+        pageSize: 100,
+      })
+        .then((res) => {
+          console.log(res);
+          this.oilData = res.data.content;
+          this.handleRowClick(this.oilData[0]);
+          this.$refs.oilTableref.setCurrentRow(this.oilData[0]);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        timeAsc: 1,
+        startTime: this.stime,
+        endTime: this.eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
 };
 </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 +218,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>

src/views/homePage/partialDischarges/index.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="partialDischargesbox">
+    <h3>
+      <span>{{ pageCardTitle }}</span>
+      <el-select
+        v-model="partialValue"
+        placeholder="请选择"
+        @change="changePartial"
+      >
+        <el-option
+          v-for="item in partialOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </h3>
+    <div class="cardContent">
+      <el-table
+        :data="partialDischargesData"
+        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, getDetailApi } from "@/utils/api/index";
+
+export default {
+  name: "arrester",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "局放",
+      partialDischargesData: [],
+      partialValue: 10,
+      partialOptions: [
+        {
+          value: 10,
+          label: "局部放电A相",
+        },
+        {
+          value: 25,
+          label: "局部放电B相",
+        },
+        {
+          value: 26,
+          label: "局部放电C相",
+        },
+      ],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+        "241,113,175",
+        "180,191,23",
+        "151,225,137",
+        "240,23,181",
+        "125,20,22",
+      ],
+      stime: "",
+      eTime: "",
+    };
+  },
+  created() {
+    this.getarresterdata();
+    const thirtyDaysAgo = new Date();
+    const startDate = new Date(
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    );
+    startDate.setHours(0); // 0
+    startDate.setMinutes(0); // 0
+    startDate.setSeconds(0); // 0
+    this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
+
+    const endDate = new Date();
+    endDate.setHours(23); // 设置小时为23
+    endDate.setMinutes(59); // 设置分钟为59
+    endDate.setSeconds(59); // 设置秒数为59
+    this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
+    console.log(this.stime, this.eTime);
+  },
+  methods: {
+    changePartial(val) {
+      console.log(val);
+      this.partialValue = val;
+      this.getarresterdata();
+    },
+    getarresterdata() {
+      monitoringListApi({
+        typeId: this.partialValue,
+        pageSize: 100,
+      })
+        .then((res) => {
+          console.log(res);
+          this.partialDischargesData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        timeAsc: 1,
+        startTime: this.stime,
+        endTime: this.eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.partialDischargesbox {
+  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;
+    .el-select {
+      margin-left: 12px;
+      .el-input__inner {
+        background-color: transparent;
+        background-image: none;
+        border-radius: 4px;
+        border: 1px solid #03bcff;
+        color: #03bcff;
+      }
+    }
+  }
+  .cardContent {
+    padding: 10px !important;
+    box-sizing: border-box;
+    height: 180px;
+    .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>

src/views/homePage/sf6/index.vue

@@ -0,0 +1,269 @@
+<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, getDetailApi } from "@/utils/api/index";
+export default {
+  name: "sf6",
+  components: {},
+  data() {
+    return {
+      pageCardTitle: "SF6环境",
+      devArr: "",
+      sf6Data: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+        "241,113,175",
+        "180,191,23",
+        "151,225,137",
+        "240,23,181",
+        "125,20,22",
+      ],
+      stime: "",
+      eTime: "",
+    };
+  },
+  mounted() {
+    // 在组件挂载时尝试从localStorage加载数据
+    this.getLocalStorage();
+  },
+  created() {
+    this.getsf6data();
+    const thirtyDaysAgo = new Date();
+    const startDate = new Date(
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    );
+    startDate.setHours(0); // 0
+    startDate.setMinutes(0); // 0
+    startDate.setSeconds(0); // 0
+    this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
+
+    const endDate = new Date();
+    endDate.setHours(23); // 设置小时为23
+    endDate.setMinutes(59); // 设置分钟为59
+    endDate.setSeconds(59); // 设置秒数为59
+    this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
+    console.log(this.stime, this.eTime);
+  },
+  methods: {
+    //获取装置类型
+    getLocalStorage() {
+      this.devArr = JSON.parse(localStorage.getItem("devInfo"));
+      console.log(this.devArr);
+    },
+    getsf6data() {
+      monitoringListApi({
+        typeId: 61,
+        pageSize: 100,
+      })
+        .then((res) => {
+          console.log(res);
+          this.sf6Data = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        timeAsc: 1,
+        startTime: this.stime,
+        endTime: this.eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</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>

src/views/homePage/warnMessage/components/warnDialog.vue

@@ -0,0 +1,333 @@
+<template>
+  <el-dialog
+    title="告警详情"
+    :visible.sync="dialogVisible"
+    fullscreen
+    :before-close="handleClose"
+    class="warnDialog"
+  >
+    <div class="warnBox">
+      <div class="search">
+        <el-form :inline="true" :model="formdata" class="demo-form-inline">
+          <!-- <el-form-item label="审批人">
+            <el-input v-model="formdata.user" placeholder="审批人"></el-input>
+          </el-form-item> -->
+          <el-form-item label="开始日期">
+            <el-date-picker
+              @change="changestartdate"
+              v-model="formdata.starttime"
+              :picker-options="pickerOptions"
+              :clearable="false"
+              type="date"
+              placeholder="开始日期"
+              :default-time="['00:00:00']"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="结束日期">
+            <el-date-picker
+              @change="changeenddate"
+              v-model="formdata.endtime"
+              :clearable="false"
+              :picker-options="pickerOptions"
+              type="date"
+              :default-time="['23:59:59']"
+              placeholder="结束日期"
+              class="ml10"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-document"
+              class="exportBtn"
+              @click="exportWarn"
+              >导出数据</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="warnTable">
+        <el-table
+          ref="restauranttable"
+          :data="tableData"
+          border
+          height="calc(100% - 38px)"
+        >
+          <el-table-column align="center" prop="warnTime" label="报警时间">
+          </el-table-column>
+          <el-table-column align="center" prop="zsbName" label="主设备名称">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="warnDesc"
+            label="告警信息"
+            min-width="200"
+          >
+            <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="warnValue" label="当前值">
+          </el-table-column>
+          <el-table-column align="center" prop="triggerDesc" label="触发条件">
+          </el-table-column>
+
+          <el-table-column align="center" prop="threshold" label="告警阈值">
+          </el-table-column>
+          <el-table-column align="center" prop="warnLevel" label="告警等级">
+            <template slot-scope="scope">
+              <span v-if="scope.row.warnLevel == 2"
+                ><el-tag type="danger">高</el-tag>
+              </span>
+              <span v-else-if="scope.row.warnLevel == 1">
+                <el-tag type="warning">中</el-tag>
+              </span>
+              <span v-else-if="scope.row.warnLevel == 0">
+                <el-tag type="info">低</el-tag>
+              </span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="page"
+            :page-size="pageSize"
+            :page-sizes="[20, 40, 100]"
+            layout="sizes, prev, pager, next, jumper,total"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { warningListApi } from "@/utils/api/index";
+export default {
+  name: "warnDialog",
+  components: {},
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(date) {
+          return date.getTime() > Date.now(); // 禁用大于今天的日期
+        },
+      },
+      dialogVisible: false,
+      formdata: {},
+      tableData: [],
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
+    };
+  },
+  created() {
+    const startDate = new Date(); // 获取当前时间
+    startDate.setHours(0); // 设置小时为23
+    startDate.setMinutes(0); // 设置分钟为59
+    startDate.setSeconds(0); // 设置秒数为59
+    this.$set(this.formdata, "starttime", startDate);
+    console.log(this.formdata.starttime);
+    const currentDate = new Date(); // 获取当前时间
+    currentDate.setHours(23); // 设置小时为23
+    currentDate.setMinutes(59); // 设置分钟为59
+    currentDate.setSeconds(59); // 设置秒数为59
+    this.$set(this.formdata, "endtime", currentDate);
+    console.log("我是开始时间", this.formdata.starttime);
+    console.log("我是结束时间", currentDate);
+  },
+  watch: {
+    endtime(newVal) {
+      if (newVal) {
+        const date = new Date(newVal);
+        date.setHours(23);
+        date.setMinutes(59);
+        date.setSeconds(59);
+        this.formdata.endtime = date;
+      }
+    },
+  },
+  mounted() {},
+  methods: {
+    getwarnList(params) {
+      warningListApi(params)
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    changestartdate(val) {
+      console.log(val);
+      if (val == null) {
+        console.log(new Date());
+        const startDate = new Date();
+        startDate.setHours(0); // 设置小时为23
+        startDate.setMinutes(0); // 设置分钟为59
+        startDate.setSeconds(0); // 设置秒数为59
+        this.formdata.starttime = startDate;
+      } else {
+        this.formdata.starttime = val;
+      }
+    },
+    //结束日期
+    changeenddate(val) {
+      if (val == null) {
+        console.log(new Date());
+        const endDate = new Date();
+        endDate.setHours(23); // 设置小时为23
+        endDate.setMinutes(59); // 设置分钟为59
+        endDate.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = endDate;
+        console.log(this.formdata.endtime);
+      } else {
+        val.setHours(23); // 设置小时为23
+        val.setMinutes(59); // 设置分钟为59
+        val.setSeconds(59); // 设置秒数为59
+        this.formdata.endtime = val;
+        console.log(val);
+      }
+    },
+    onSubmit() {
+      console.log(this.formdata);
+      //开始时间和结束时间
+      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      let params = {};
+      params.startTime = this.formdata.starttime;
+      params.endTime = this.formdata.endtime;
+      params.pageSize = this.pageSize;
+      params.pageNum = this.page;
+      console.log(params);
+      this.getwarnList(params);
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.tableData = [];
+      let params = {};
+      params.startTime = this.formdata.starttime;
+      params.endTime = this.formdata.endtime;
+      params.pageSize = this.pageSize;
+      params.pageNum = this.page;
+      console.log(params);
+      this.getwarnList(params);
+    },
+    //每页条数
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.tableData = [];
+      let params = {};
+      params.startTime = this.formdata.starttime;
+      params.endTime = this.formdata.endtime;
+      params.pageSize = this.pageSize;
+      params.pageNum = this.page;
+      console.log(params);
+      this.getwarnList(params);
+    },
+    display(data) {
+      this.dialogVisible = true;
+      this.getwarnList(data);
+    },
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    //导出数据
+    exportWarn() {
+      this.formdata.starttime = this.$moment(this.formdata.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.formdata.endtime = this.$moment(this.formdata.endtime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      window.location.href =
+        "/cac-api/warning/export?" +
+        "startTime=" +
+        this.formdata.starttime +
+        "&endTime=" +
+        this.formdata.endtime;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.warnDialog {
+  .el-dialog {
+    background-color: #f0f0f0;
+  }
+  .el-dialog__header {
+    background-color: #337ab7;
+    padding: 10px 20px;
+    color: #fff;
+    .el-dialog__title {
+      color: #fff;
+    }
+    .el-dialog__headerbtn {
+      position: absolute;
+      top: 10px;
+      right: 20px;
+      padding: 0;
+      background: 0 0;
+      border: none;
+      outline: 0;
+      cursor: pointer;
+      font-size: 24px;
+      .el-dialog__close {
+        color: #fff;
+      }
+    }
+  }
+  .el-dialog__body {
+    height: calc(100% - 84px);
+    padding: 20px;
+    .warnBox {
+      height: 100%;
+      .search {
+        background-color: #fff;
+        padding: 16px;
+        height: auto;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        margin-bottom: 16px;
+        .el-form {
+          .el-form-item {
+            margin-bottom: 0px;
+          }
+        }
+      }
+      .warnTable {
+        background-color: #fff;
+        padding: 16px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        height: calc(100% - 114px);
+      }
+      .pageNation {
+        margin-top: 6px;
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>

src/views/homePage/warnMessage/index.vue

@@ -0,0 +1,334 @@
+<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>
+      <el-button
+        type="text"
+        icon="el-icon-document"
+        class="lookMore"
+        @click="lookMore"
+        >查看全部</el-button
+      >
+    </h3>
+    <div class="cardContent">
+      <!-- <el-table
+        ref="restauranttable"
+        :data="tableData"
+        class="tableHi"
+        height="154px"
+      >
+        <el-table-column align="center" prop="warnTime" label="报警时间">
+        </el-table-column>
+        <el-table-column align="center" prop="zsbName" label="主设备名称">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          prop="warnDesc"
+          label="告警信息"
+          min-width="200"
+        >
+          <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="warnValue" label="当前值">
+        </el-table-column>
+        <el-table-column align="center" prop="triggerDesc" label="触发条件">
+        </el-table-column>
+
+        <el-table-column align="center" prop="threshold" label="告警阈值">
+        </el-table-column>
+        <el-table-column align="center" prop="warnLevel" label="告警等级">
+          <template slot-scope="scope">
+            <span v-if="scope.row.warnLevel == 2">高 </span>
+            <span v-else-if="scope.row.warnLevel == 1"> 中 </span>
+            <span v-else-if="scope.row.warnLevel == 0"> 低 </span>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <ul class="warntitle">
+        <li>报警时间</li>
+        <li>主设备名称</li>
+        <li>告警信息</li>
+
+        <li>当前值</li>
+        <li>触发条件</li>
+        <li>告警阈值</li>
+        <li>告警等级</li>
+      </ul>
+      <div class="marquee">
+        <ul class="scrollUl" v-if="tableData.length !== 0">
+          <li v-for="(item, index) in tableData" :key="index">
+            <span>{{ item.warnTime }}</span>
+            <span>{{ item.zsbName }}</span>
+            <span>{{ item.warnDesc }}</span>
+            <span>{{ item.warnValue }}</span>
+            <span>{{ item.triggerDesc }}</span>
+            <span>{{ item.threshold }}</span>
+            <span>
+              <span v-if="item.warnLevel == 2">高 </span>
+              <span v-else-if="item.warnLevel == 1"> 中 </span>
+              <span v-else-if="item.warnLevel == 0"> 低 </span></span
+            >
+          </li>
+        </ul>
+        <div v-else class="empty">暂无告警</div>
+      </div>
+    </div>
+    <warnDialog ref="warnRef"></warnDialog>
+  </div>
+</template>
+
+<script>
+import { warningListApi } from "@/utils/api/index";
+import warnDialog from "./components/warnDialog.vue";
+
+export default {
+  name: "warnmessage",
+  components: {
+    warnDialog,
+  },
+  data() {
+    return {
+      pageCardTitle: "告警/故障信息",
+      tableData: [],
+      starttime: "",
+      endtime: "",
+      params: {},
+      isMoving: true,
+      isDuplicated: true, // 用于判断是否添加复制的项
+    };
+  },
+  created() {
+    const startDate = new Date(); // 获取当前时间
+    startDate.setHours(0); // 设置小时为23
+    startDate.setMinutes(0); // 设置分钟为59
+    startDate.setSeconds(0); // 设置秒数为59
+    this.starttime = startDate;
+
+    const currentDate = new Date(); // 获取当前时间
+    currentDate.setHours(23); // 设置小时为23
+    currentDate.setMinutes(59); // 设置分钟为59
+    currentDate.setSeconds(59); // 设置秒数为59
+    this.endtime = currentDate;
+    this.getwarnList();
+  },
+  created() {},
+
+  methods: {
+    lookMore() {
+      this.params.startTime = this.starttime;
+      this.params.endTime = this.endtime;
+      this.params.pageSize = 20;
+      this.params.pageNum = 1;
+      this.$refs.warnRef.display(this.params);
+    },
+    getwarnList() {
+      this.starttime = this.$moment(this.starttime).format(
+        "YYYY-MM-DD HH:mm:ss"
+      );
+      this.endtime = this.$moment(this.endtime).format("YYYY-MM-DD HH:mm:ss");
+
+      this.params.startTime = this.starttime;
+      this.params.endTime = this.endtime;
+      this.params.pageSize = 20;
+      this.params.pageNum = 1;
+      warningListApi(this.params)
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.warnmessageBox {
+  padding: 0px 10px;
+  height: 100%;
+  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);
+    }
+    .lookMore {
+      margin-left: auto;
+      color: #fff;
+      margin-right: 4px;
+      font-size: 14px;
+      &:hover {
+        color: #03bcff;
+        text-decoration: underline;
+      }
+    }
+  }
+  .cardContent {
+    margin-top: 10px;
+    height: calc(100% - 54px);
+
+    .warntitle {
+      width: 100%;
+      display: flex;
+      line-height: 24px;
+      height: 24px;
+      border-bottom: 1px solid #eee;
+      align-items: center;
+      justify-content: space-around;
+      li {
+        list-style: none;
+        font-size: 12px;
+        text-align: center;
+        &:first-child {
+          width: 12%;
+        }
+        &:nth-child(2) {
+          width: 15%;
+        }
+        &:nth-child(3) {
+          width: 20%;
+        }
+        &:nth-child(4) {
+          width: 10%;
+        }
+        &:nth-child(5) {
+          width: 8%;
+        }
+        &:nth-child(6) {
+          width: 8%;
+        }
+        &:nth-child(7) {
+          width: 8%;
+        }
+      }
+    }
+    .marquee {
+      height: calc(100% - 26px);
+      display: flex;
+      overflow: hidden;
+      margin-top: 2px;
+      width: 100%;
+
+      .scrollUl {
+        animation: 10s scrollTop linear infinite; /* 根据需要调整动画时间和速度 */
+        width: 100%;
+
+        li {
+          list-style: none;
+          font-size: 12px;
+          text-align: center;
+          line-height: 24px;
+          height: 24px;
+          border-bottom: 1px solid #eee;
+          display: flex;
+          justify-content: space-around;
+          width: 100%;
+          span {
+            &:first-child {
+              width: 12%;
+            }
+            &:nth-child(2) {
+              width: 15%;
+            }
+            &:nth-child(3) {
+              width: 20%;
+            }
+            &:nth-child(4) {
+              width: 10%;
+            }
+            &:nth-child(5) {
+              width: 8%;
+            }
+            &:nth-child(6) {
+              width: 8%;
+            }
+            &:nth-child(7) {
+              width: 8%;
+            }
+          }
+        }
+      }
+      .empty {
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+      }
+    }
+
+    @keyframes scrollTop {
+      0% {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+      }
+      100% {
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+      }
+    }
+
+    .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--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+      background-color: rgba(255, 27, 27, 0.2);
+    }
+    .el-table::before {
+      height: 0;
+    }
+  }
+}
+.el-notification__content {
+  text-align: left;
+  word-break: break-all;
+}
+</style>

src/views/homePage/windingTemperature/index.vue

@@ -0,0 +1,281 @@
+<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, getDetailApi } from "@/utils/api/index";
+export default {
+  name: "windingTemperature",
+  data() {
+    return {
+      pageCardTitle: "夹件",
+      windData: [],
+      // 趋势图信息
+      tendencyChartTitle: "",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+        "241,113,175",
+        "180,191,23",
+        "151,225,137",
+        "240,23,181",
+        "125,20,22",
+      ],
+      stime: "",
+      eTime: "",
+    };
+  },
+  created() {
+    this.getwinddata();
+    const thirtyDaysAgo = new Date();
+    const startDate = new Date(
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30)
+    );
+    startDate.setHours(0); // 0
+    startDate.setMinutes(0); // 0
+    startDate.setSeconds(0); // 0
+    this.stime = this.$moment(startDate).format("YYYY-MM-DD HH:mm:ss");
+
+    const endDate = new Date();
+    endDate.setHours(23); // 设置小时为23
+    endDate.setMinutes(59); // 设置分钟为59
+    endDate.setSeconds(59); // 设置秒数为59
+    this.eTime = this.$moment(endDate).format("YYYY-MM-DD HH:mm:ss");
+    console.log(this.stime, this.eTime);
+  },
+  methods: {
+    getwinddata() {
+      monitoringListApi({
+        typeId: 3,
+        pageSize: 100,
+      })
+        .then((res) => {
+          console.log(res);
+          this.windData = res.data.content;
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //点击当前行
+    //点击当前行
+    handleRowClick(row) {
+      console.log(row); // 这里会打印出被点击的行的数据
+
+      this.tendencyChartTitle = "";
+      this.legendData = [];
+      this.xAxisData = [];
+      this.seriesData = [];
+      this.tendencyChartTitle = row.name;
+      getDetailApi({
+        id: row.id,
+        timeAsc: 1,
+        startTime: this.stime,
+        endTime: this.eTime,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            console.log(res);
+            let pointsData = res.data.points;
+            this.xAxisData = res.data.content.map(
+              (item) => item.acquisitionTime
+            );
+
+            for (var i = 0; i < pointsData.length; i++) {
+              console.log(pointsData[i]);
+              console.log(pointsData[i].fieldDesc);
+              this.seriesData.push({
+                name: pointsData[i].fieldDesc,
+                type: "line",
+                data: pointsData[i].data,
+                areaStyle: {
+                  normal: {
+                    // 填充色渐变
+                    color: new this.$echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      0,
+                      1,
+                      [
+                        {
+                          offset: 0,
+                          color: "rgba(" + this.chartBackground[i] + ",0.3)",
+                        },
+                        {
+                          offset: 0.5,
+                          color: "rgba(" + this.chartBackground[i] + ",0.1)",
+                        },
+                        { offset: 1, color: "rgba(58, 167, 255,0)" },
+                      ]
+                    ),
+                  },
+                },
+                // 曲线柔和
+                smooth: true,
+                itemStyle: {
+                  normal: {
+                    lineStyle: {
+                      width: 3,
+                    },
+                  },
+                },
+              });
+              this.legendData.push(pointsData[i].fieldDesc);
+            }
+            console.log(this.legendData);
+            console.log(this.xAxisData);
+            console.log(this.seriesData);
+            this.$emit(
+              "dataDispose",
+              this.legendData,
+              this.xAxisData,
+              this.seriesData,
+              this.tendencyChartTitle
+            );
+            // this.handleSearch();
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</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>

src/views/icdConfig/index.vue

@@ -26,13 +26,22 @@
         @click="submitUpload"
         >上传到服务器</el-button
       >
+      <div class="grouprpt">
         <el-button
           class="clearBtn"
           size="small"
           type="primary"
           @click="clearAllicd"
-        >清空全部文件</el-button
+          >清空文件和配置</el-button
         >
+        <el-button
+          class="clearBtn"
+          size="small"
+          type="primary"
+          @click="creatRpt"
+          >生成rptparamindex</el-button
+        >
+      </div>
     </div>
     <div class="iedContain">
       <div class="leftMenu" v-if="iedListData.length !== 0">
@@ -152,6 +161,7 @@ import {
   icdDeleteApi,
   tableListApi,
   icdclearAllApi,
+  generateRptApi,
 } from "@/utils/api/index";
 import colDialog from "./colDialog.vue";
 export default {
@@ -343,11 +353,15 @@ export default {
       }
     },
     clearAllicd() {
-      this.$confirm("此操作将清除所有上传的文件, 是否继续?", "提示", {
+      this.$confirm(
+        "此操作将清除所有icd文件、相关配置、rptparamindex, 是否继续?",
+        "提示",
+        {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
-      })
+        }
+      )
         .then(() => {
           icdclearAllApi()
             .then((res) => {
@@ -373,6 +387,31 @@ export default {
         })
         .catch(() => {});
     },
+    //生成rptparamindex
+    creatRpt() {
+      generateRptApi()
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.data,
+              type: "success",
+            });
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
   },
 };
 </script>
@@ -433,9 +472,11 @@ export default {
     }
     .uploadBtn {
     }
-    .clearBtn {
+    .grouprpt {
       margin-left: auto;
     }
+    // .clearBtn {
+    // }
   }
   .iedContain {
     width: 100%;

src/views/iceserver/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="iceConfig">
+    <div
+      class="cardBox"
+      v-loading="serveLoading"
+      element-loading-text="请稍等"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.7)"
+    >
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span> IEC服务器状态</span>
+        </div>
+        <div class="concard">
+          <p>端口：{{ port }}</p>
+          <p>filename：{{ filename }}</p>
+          <div class="flieSet">
+            <h5>选择文件：</h5>
+            <el-select
+              v-model="fileNameVal"
+              placeholder="请选择"
+              :disabled="serverStatus"
+            >
+              <el-option
+                v-for="item in icdFileOptions"
+                :key="item.id"
+                :label="item.filename"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <p>
+            服务器状态：
+            <el-tag type="success" v-if="serverStatus">开启</el-tag>
+            <el-tag type="danger" v-else>关闭</el-tag>
+          </p>
+          <el-switch
+            v-model="serverVal"
+            active-text="服务器开启"
+            inactive-text="服务器关闭"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            @change="changeStatus"
+          >
+          </el-switch>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  serverstartApi,
+  serverstatusApi,
+  serverstopApi,
+  icdFileApi,
+} from "@/utils/api/index";
+
+export default {
+  components: {},
+  data() {
+    return {
+      port: "",
+      filename: "", //文件名
+      serverStatus: false,
+      serverVal: true,
+      fileNameVal: "",
+      icdFileOptions: [],
+      serveLoading: false,
+    };
+  },
+  mounted() {
+    this.geticeStatus(); //获取iedName列表
+    this.getIcdListFile();
+  },
+  methods: {
+    //获取ice服务器状态
+    geticeStatus() {
+      serverstatusApi()
+        .then((res) => {
+          if (res.success) {
+            console.log(res);
+            this.port = res.data.port;
+            this.serverStatus = res.data.started;
+            this.serverVal = res.data.started;
+            this.filename = res.data.filename;
+            this.fileNameVal = res.data.fileId;
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    changeStatus() {
+      console.log(this.serverVal);
+      this.serveLoading = true;
+      if (this.serverVal) {
+        serverstartApi({
+          fileId: this.fileNameVal,
+        })
+          .then((res) => {
+            if (res.success) {
+              console.log(res);
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: "服务器开始成功",
+                type: "success",
+              });
+              this.geticeStatus();
+              this.serveLoading = false;
+            } else {
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: res.errorMsg,
+                type: "error",
+              });
+              this.geticeStatus();
+              this.serveLoading = false;
+            }
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      } else {
+        serverstopApi()
+          .then((res) => {
+            if (res.success) {
+              console.log(res);
+              this.serveLoading = false;
+              this.geticeStatus();
+            } else {
+              this.serveLoading = false;
+              this.$message({
+                duration: 1500,
+                showClose: true,
+                message: res.errorMsg,
+                type: "error",
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err); //代码错误、请求失败捕获
+          });
+      }
+    },
+    getIcdListFile() {
+      icdFileApi()
+        .then((res) => {
+          if (res.success) {
+            console.log(res);
+            this.icdFileOptions = res.data;
+            if (this.filename == null) {
+              this.fileNameVal = this.icdFileOptions[0].id;
+            }
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.iceConfig {
+  width: calc(100% - 24px);
+  overflow-x: hidden;
+  background: rgba(8, 9, 36, 0.28);
+
+  box-shadow: inset 0 4px 44px 0 #106cde;
+  padding: 0px 12px;
+  height: 100%;
+  .cardBox {
+    width: 360px;
+    margin-top: 20px;
+    .el-card__header {
+      padding: 12px;
+    }
+    .el-card__body {
+      padding: 12px;
+    }
+    .concard {
+      .flieSet {
+        display: flex;
+        align-items: center;
+        margin-bottom: 12px;
+        h5 {
+          font-weight: normal;
+          font-size: 16px;
+        }
+      }
+      p {
+        &:nth-child(2) {
+          margin-top: 12px;
+          margin-bottom: 12px;
+        }
+        &:nth-child(4) {
+          // margin-top: 12px;
+          margin-bottom: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

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,8 +41,8 @@
 <script>
 import * as THREE from "three";
 import threejs from "./threejs";
-import { getloginApi } from "@/utils/api/index";
 
+import { userloginApi } from "@/utils/api/index";
 export default {
   components: {
     threejs,
@@ -50,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" },
@@ -96,22 +94,28 @@ export default {
           //   return;
           // }
           //注释
-          getloginApi(this.userInfo)
+          userloginApi(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中
+              if (res.success) {
                 console.log(res.data);
                 //this.$router.push("/weather");
+                localStorage.setItem("token", "13747c96ff9f434cb09ecf78e4b9a8bc");
                 this.$message({
                   duration: 1500,
                   showClose: true,
                   message: "登录成功",
                   type: "success",
                 });
-                this.$router.push("/");
+                this.$router.push("/home");
+                return;
               } else {
-                this.$message.error(res.msg);
+                this.$message({
+                  duration: 1500,
+                  showClose: true,
+                  message: res.errorMsg,
+                  type: "warning",
+                });
+                return;
               }
             })
             .catch((err) => {});

src/views/paramBinding/index.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="paramBindingBox">
     <div class="leftTree">
-      <h3>
-        设备列表
-        <el-button type="primary" @click="generate" size="mini"
-          >生成rptparamindex</el-button
-        >
-      </h3>
+      <h3>设备列表</h3>
       <div class="treeBox">
+        <div class="searchBar">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            v-model="filterText"
+            prefix-icon="el-icon-search"
+            clearable
+          >
+          </el-input>
+        </div>
         <el-tree
           ref="tree"
           :data="paramTreeData"
           :props="defaultProps"
           node-key="id"
           :default-expanded-keys="defaultExpandedKeys"
+          :filter-node-method="filterNode"
           highlight-current
           :current-node-key="currentNodekey"
           :expand-on-click-node="true"
@@ -35,8 +40,13 @@
     </div>
     <div class="paramTable">
       <div class="paramHead">
-        <h3>参数绑定</h3>
+        <h3>icd参数绑定</h3>
+        <div class="groupgen">
           <el-button @click="clearAllBind" type="primary"> 全部解绑 </el-button>
+          <el-button type="primary" @click="generate" size="mini"
+            >更新rptparamindex</el-button
+          >
+        </div>
       </div>
       <div class="paramContain">
         <div class="headSelect">
@@ -128,7 +138,7 @@ import {
   previewApi,
   bindApi,
   unbindApi,
-  generateParamindexApi,
+  updateParamindexApi,
   paramclearAllApi,
 } from "@/utils/api/index";
 export default {
@@ -162,12 +172,35 @@ export default {
       jbFlag: false,
     };
   },
-  watch: {},
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
   computed: {},
   created() {
     this.getParamTreeList();
   },
   methods: {
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      console.log(value);
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      console.log(data);
+      this.searchName = data.mc + data.name;
+      console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+    },
     getParamTreeList() {
       getParamTreeApi()
         .then((res) => {
@@ -202,7 +235,7 @@ export default {
     //获取绑定信息
     getBindList() {
       getBindApi({
-        eqmid: this.currentNodeKey,
+        sensorId: this.currentNodeKey,
       })
         .then((res) => {
           console.log(res);
@@ -276,7 +309,7 @@ export default {
       this.icdid = this.ljOptions.find((item) => item.paramIndex === val).id;
       this.warnMsg = "";
       previewApi({
-        eqmid: this.currentNodeKey,
+        sensorId: this.currentNodeKey,
         icdid: this.icdid,
       })
         .then((res) => {
@@ -302,7 +335,7 @@ export default {
     //保存
     saveBind() {
       bindApi({
-        eqmid: this.currentNodeKey,
+        sensorId: this.currentNodeKey,
         icdid: this.icdid,
       })
         .then((res) => {
@@ -326,7 +359,7 @@ export default {
         });
     },
     generate() {
-      generateParamindexApi()
+      updateParamindexApi()
         .then((res) => {
           console.log(res);
           if (res.success) {
@@ -352,7 +385,7 @@ export default {
     //解绑
     unBind() {
       unbindApi({
-        eqmid: this.currentNodeKey,
+        sensorId: this.currentNodeKey,
       })
         .then((res) => {
           console.log(res);

src/views/rptparam/index.vue

@@ -0,0 +1,648 @@
+<template>
+  <div class="rptparamBox">
+    <div class="leftTree">
+      <h3>
+        设备列表
+        <!-- <el-button type="primary" @click="generate" size="mini"
+          >生成rptparamindex</el-button
+        > -->
+      </h3>
+      <div class="treeBox">
+        <div class="searchBar">
+          <el-input
+            placeholder="输入关键字进行过滤"
+            v-model="filterText"
+            prefix-icon="el-icon-search"
+            clearable
+          >
+          </el-input>
+        </div>
+        <el-tree
+          ref="tree"
+          :data="paramTreeData"
+          :props="defaultProps"
+          node-key="id"
+          :default-expanded-keys="defaultExpandedKeys"
+          :filter-node-method="filterNode"
+          highlight-current
+          :current-node-key="currentNodekey"
+          :expand-on-click-node="true"
+          @node-click="handleNodeClick"
+          default-expand-all
+        >
+          <template class="custom-tree-node" slot-scope="{ node, data }">
+            <!-- <span>{{ data.name || data.mc }}</span> -->
+            <span v-if="data.mc">
+              <span>{{ data.mc }} </span>
+            </span>
+            <span v-else-if="data.name">
+              <span class="el-icon-document" style="margin-right: 6px"> </span>
+              <span :title="data.name">{{ data.name }} </span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
+    <div class="paramTable">
+      <div class="paramHead">
+        <h3>rptparam配置</h3>
+        <!-- <el-button @click="clearAllBind" type="primary"> 全部解绑 </el-button> -->
+      </div>
+      <div class="paramContain">
+        <div class="headSelect">
+          <div class="iedlistBox">
+            <span>ied列表：</span>
+            <el-select
+              v-model="iedName"
+              placeholder="请选择"
+              @change="changeIedname"
+            >
+              <el-option
+                v-for="item in iedOptions"
+                :key="item"
+                :label="item"
+                :value="item"
+              ></el-option>
+            </el-select>
+          </div>
+          <div class="ljsbBox">
+            <span>逻辑设备：</span>
+            <el-select
+              v-model="ljName"
+              placeholder="请选择"
+              @change="changeljname"
+            >
+              <el-option
+                v-for="item in ljOptions"
+                :key="item.paramIndex"
+                :label="item.paramIndex"
+                :value="item.paramIndex"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <el-divider></el-divider>
+
+        <div class="showMsgBox">
+          <p class="warnMsg" v-if="warnMsg">
+            <el-tag
+              type="warning"
+              v-for="(item, index) in warnMsg"
+              :key="index"
+              >{{ item }}</el-tag
+            >
+          </p>
+          <div class="outside" v-if="bindInfoArray && bindInfoArray.length > 0">
+            <p
+              class="outsideLabel"
+              v-for="(processedItem, index) in preprocessedData"
+              :key="index"
+            >
+              <span class="spanclass">
+                {{ processedItem.comment }}
+                <b>({{ processedItem.name }})</b>
+              </span>
+              <el-select
+                v-model="processedItem.matchedItem2.paramindex"
+                placeholder="请选择"
+                size="medium"
+                @change="handleSelectChange(processedItem, $event)"
+              >
+                <!-- 添加一个空选项 -->
+                <el-option
+                  :label="'无绑定'"
+                  :value="null"
+                  v-if="rptOptions.length !== 0"
+                >
+                  <!-- 假设我们用 null 表示无选择 -->
+                </el-option>
+                <el-option
+                  v-for="option in rptOptions"
+                  :key="option.objid"
+                  :label="option.paramindex"
+                  :value="option.paramindex"
+                ></el-option>
+              </el-select>
+            </p>
+          </div>
+        </div>
+        <el-button class="savebtn" type="primary" @click="confirmClick"
+          >保存</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  getParamTreeApi,
+  getinstListApi,
+  iedListApi,
+  getRptApi,
+  listRptApi,
+  updateRptApi,
+} from "@/utils/api/index";
+export default {
+  name: "paramBinding",
+  components: {},
+  data() {
+    return {
+      filterText: "", //查询字段过滤
+      paramTreeData: [], // 树状图数据
+      defaultExpandedKeys: [],
+      currentNodeData: [], //选中的数据
+      currentId: "", //选择的id
+      crrrentName: "",
+      currentNodekey: "", //选中的节点
+      selectedNode: null, // 当前选中的节点
+      defaultProps: {
+        children: "children",
+        label: "mc",
+      },
+      bindInfo: "", //绑定信息
+      bindInfoArray: "",
+      iedName: "", //选中的iedname
+      iedOptions: [],
+      ljName: "",
+      ljOptions: [],
+      icdid: "",
+      previewData: [],
+      defaultShow: true, //默认显示
+      drawer: false,
+      warnMsg: "",
+      jbFlag: false,
+      rptOptions: [],
+    };
+  },
+  watch: {
+    filterText(newVal) {
+      this.handleFilter(); // 当 filterText 发生变化时执行过滤操作
+    },
+  },
+  computed: {
+    preprocessedData() {
+      const rptOptionsParamIndices = new Set(
+        this.rptOptions.map((option) => option.paramindex)
+      );
+
+      return this.bindInfoArray.map((item) => {
+        const matchedItem2 = this.previewData.find(
+          (item2) =>
+            item2.colname === item.name &&
+            rptOptionsParamIndices.has(item2.paramindex)
+        );
+
+        // 如果没有找到匹配项，或者匹配项的 paramindex 不在 rptOptions 中，则返回一个默认对象
+        // 但根据你的要求，这里我们只关心 colname 和 paramindex 的双重匹配
+        return {
+          ...item, // 保留原始item的所有属性
+          matchedItem2: matchedItem2 || { colname: "", paramindex: "" }, // 如果没有找到双重匹配的项，则返回一个默认对象
+        };
+      });
+    },
+  },
+  created() {
+    this.getParamTreeList();
+  },
+  methods: {
+    handleFilter() {
+      // 在输入框输入完成后的500毫秒执行过滤节点方法
+      setTimeout(() => {
+        this.$refs.tree.filter(this.filterText);
+      }, 500);
+    },
+    //树状图搜索
+    filterNode(value, data, node) {
+      console.log(value);
+      // 如果什么都没填全部匹配全部返回
+      if (!value) return true;
+      console.log(data);
+      this.searchName = data.mc + data.name;
+      console.log(this.searchName);
+      // 如果传入的value和data中的label相同，匹配成功
+      if (this.searchName.indexOf(value) !== -1) {
+        return true;
+      }
+    },
+    getParamTreeList() {
+      getParamTreeApi()
+        .then((res) => {
+          console.log(res);
+          this.paramTreeData = res.data;
+          this.defaultExpandedKeys = [this.paramTreeData[0].id];
+          this.currentNodeData =
+            this.paramTreeData[0].children[0].children[0].children[0];
+          this.currentNodekey =
+            this.paramTreeData[0].children[0].children[0].children[0].id;
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+            this.handleNodeClick(this.currentNodeData);
+          });
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleNodeClick(data, node) {
+      console.log(data);
+      if (data.hasOwnProperty("children")) {
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(this.currentNodeKey);
+        });
+        return;
+      }
+      this.currentNodeKey = data.id;
+      this.rptOptions = [];
+
+      this.getiedList();
+    },
+
+    //获取iedlist
+    getiedList() {
+      iedListApi()
+        .then((res) => {
+          console.log(res);
+          this.iedOptions = res.data;
+          this.getRptInfo();
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换iedname
+    changeIedname(val) {
+      this.iedName = val;
+      this.ljName = "";
+      this.warnMsg = "";
+      console.log(this.iedName);
+      console.log(this.iedOptions.find((item) => item === val));
+
+      this.getinstList();
+    },
+    //获取逻辑设备列表
+    getinstList() {
+      getinstListApi({
+        iedName: this.iedName,
+      })
+        .then((res) => {
+          console.log(res);
+          this.ljOptions = res.data;
+          console.log("获取逻辑", this.icdid);
+          if (this.icdid !== null) {
+            this.ljName =
+              this.ljOptions.find((item) => item.id === this.icdid)
+                ?.paramIndex || "";
+            if (this.ljName !== "") {
+              this.getlistRpt(this.ljName);
+            }
+          } else {
+            this.ljName = "";
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //选择逻辑l设备
+    changeljname(val) {
+      console.log(val);
+      console.log(this.ljOptions.find((item) => item.paramIndex === val));
+      this.icdid = this.ljOptions.find((item) => item.paramIndex === val).id;
+      this.warnMsg = "";
+      console.log("我是监听", this.preprocessedData);
+      this.getlistRpt(this.ljName);
+      //
+    },
+    //获取可用rpt
+    getlistRpt(val) {
+      listRptApi({
+        param: val,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.rptOptions = res.data;
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //查询rpt绑定信息
+    getRptInfo() {
+      getRptApi({
+        sensorId: this.currentNodeKey,
+      })
+        .then((res) => {
+          this.bindInfo = res.data;
+          if (res.data.columnList != null) {
+            this.bindInfoArray = res.data.columnList;
+            this.previewData = res.data.rptList;
+            this.iedName = res.data.iedName;
+            this.icdid = res.data.icdid;
+            this.changeIedname(this.iedName);
+          } else {
+            this.iedName = "";
+            this.ljOptions = [];
+            this.ljName = "";
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleSelectChange(item, value) {
+      console.log("Selected value for", item.name, "is:", value);
+      this.$forceUpdate();
+    },
+    confirmClick() {
+      console.log(this.preprocessedData);
+      let params = {
+        icdid: 0,
+        rptList: [
+          {
+            colname: "string",
+            paramindex: "string",
+          },
+        ],
+        sensorId: this.currentNodeKey,
+      };
+      // 更简洁且符合你要求的方式（只包含 paramindex 不为空的项）
+      params.rptList = this.preprocessedData
+        .filter((item) => item.matchedItem2 && item.matchedItem2.paramindex)
+        .map((item) => ({
+          colname: item.name,
+          paramindex: item.matchedItem2.paramindex,
+        }));
+      // 输出转换后的数据以验证
+      console.log(params);
+      updateRptApi(params)
+        .then((res) => {
+          console.log(res);
+          if (res.success) {
+            this.$message({
+              showClose: true,
+              message: "rptparam配置成功",
+              type: "success",
+            });
+          } else {
+            this.$message({
+              showClose: true,
+              message: res.errorMsg,
+              type: "error",
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+  },
+};
+</script>
+<style lang="less">
+.rptparamBox {
+  display: flex;
+  height: 100%;
+  .leftTree {
+    min-width: 380px;
+    max-width: 380px;
+    height: 100%;
+    overflow: auto;
+    //border: 1px solid #fff;
+    margin-right: 24px;
+    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;
+    h3 {
+      font-size: 14px;
+      color: #fff;
+      font-weight: normal;
+      height: 40px;
+      line-height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .treeBox {
+      width: 100%;
+      height: calc(100% - 48px);
+      background-color: #fff;
+      padding-top: 8px;
+      .searchBar {
+        width: 94%;
+        margin: 0px auto;
+        margin-bottom: 8px;
+      }
+      .el-tree {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: calc(100% - 40px);
+        .el-tree-node__content {
+          height: 32px;
+          font-size: 12px;
+        }
+        .custom-tree-node {
+          color: #333;
+          overflow: hidden;
+          span {
+            display: flex;
+            display: inline-table;
+            overflow: hidden;
+            align-items: center;
+          }
+          .num {
+            color: #169e8c;
+          }
+        }
+      }
+
+      .el-tree--highlight-current
+        .el-tree-node.is-current
+        > .el-tree-node__content {
+        // 设置颜色
+        color: #fff;
+        background: #3889cf;
+        .custom-tree-node {
+          color: #fff;
+          //overflow: hidden;
+          span {
+            display: flex;
+            //overflow: hidden;
+            align-items: center;
+            .num {
+              color: #fff;
+            }
+            .iconfont {
+              //width: 30px;
+              display: inline-table;
+            }
+          }
+        }
+      }
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      .el-tree .el-tree-node__expand-icon.expanded {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+
+      /* //有子节点 且未展开 */
+      .el-tree .el-icon-caret-right:before {
+        content: "\e783";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //有子节点 且已展开 */
+      .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+        content: "\e781";
+        display: block;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+        background-size: 16px;
+        color: #333;
+      }
+
+      /* //没有子节点 */
+      .el-tree .el-tree-node__expand-icon.is-leaf::before {
+        background: #fff;
+        content: "";
+        display: block;
+        width: 0px;
+        height: 0px;
+        font-size: 16px;
+        background-size: 16px;
+      }
+    }
+  }
+  .paramTable {
+    flex: 1;
+    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;
+    .paramHead {
+      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;
+      }
+      .searchMain {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .paramContain {
+      height: calc(100% - 42px);
+      //background: #fcc;
+      background: #fff;
+      border: 1px solid #dcdfe6;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
+      color: #333;
+      .headSelect {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        line-height: 40px;
+        .iedlistBox {
+          margin-left: 18px;
+        }
+        .ljsbBox {
+          margin-left: 18px;
+        }
+      }
+      .el-divider--horizontal {
+        margin: 12px 0px;
+      }
+
+      .showMsgBox {
+        width: calc(100% - 80px);
+        max-height: calc(100% - 160px);
+
+        padding: 0px 40px;
+        overflow: auto;
+        .warnMsg {
+          //padding: 0px 12px 0px 12px;
+
+          .el-tag {
+            display: block;
+            margin-right: 12px;
+            margin-bottom: 12px;
+            font-size: 14px;
+          }
+        }
+        .outside {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          .outsideLabel {
+            height: 40px;
+            line-height: 40px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            margin-top: 2px;
+            .spanclass {
+              height: 40px;
+              line-height: 40px;
+              min-width: 280px;
+              padding: 0px 12px;
+              width: max-content;
+              border: 1px solid #ededed;
+              text-align: center;
+              b {
+                font-weight: normal;
+                font-size: 12px;
+                color: #666;
+              }
+              &:last-child {
+                width: 200px;
+              }
+              em {
+                font-style: normal;
+              }
+            }
+            .el-select {
+              margin-left: 20px;
+              width: 400px;
+            }
+          }
+        }
+      }
+      .savebtn {
+        margin-left: auto;
+        display: flex;
+        margin-right: 60px;
+        margin-top: 16px;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -21,7 +21,8 @@ module.exports = defineConfig({
       "/cac-api": {
         //表示拦截以/api开头的请求路径
         target: "http://192.168.1.190:88", //200服务器
-        //target: "http://dev.xinyingpower.com:40080/", //dell服务器
+        // target: "http://61.169.135.146:40080/", //dell服务器
+
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "/cac-api", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的