采集文件配置

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

@@ -31,6 +31,9 @@
               >
               </el-option>
             </el-select>
+            <p class="ipclass" v-if="iedArr">
+              {{ iedArr.ip }}:{{ iedArr.port }}
+            </p>
           </el-form-item>
           <el-form-item label="传感器：" prop="devId">
             <el-select v-model="formInfo.devId" filterable placeholder="请选择">
@@ -45,11 +48,16 @@
           </el-form-item>
 
           <el-form-item label="路径：" prop="path">
+            <div class="pathLabel">
+              <el-button type="primary" @click="showDialog('/')"
+                >预览路径</el-button
+              >
               <el-input
                 type="textarea"
-              :autosize="{ minRows: 4, maxRows: 4 }"
+                :autosize="{ minRows: 1, maxRows: 1 }"
                 v-model="formInfo.path"
               ></el-input>
+            </div>
           </el-form-item>
           <el-form-item label="下载文件：" prop="suffix">
             <el-select v-model="formInfo.suffix" placeholder="请选择">
@@ -81,6 +89,38 @@
         <el-button type="primary" @click="submitForm()">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 弹窗 -->
+    <el-dialog
+      class="treeDialogBox"
+      title="选择目录"
+      :visible.sync="dialogVisible"
+      width="50%"
+    >
+      <div class="treeBox">
+        <el-tree
+          :data="treeData"
+          :props="defaultProps"
+          node-key="filename"
+          :load="loadNode"
+          lazy
+          highlight-current
+          accordion
+          @node-click="handleNodeClick"
+        >
+        </el-tree>
+        <div class="mulu" v-if="fileListInfo.length !== 0">
+          <p v-for="(item, index) in fileListInfo">{{ item.filename }}</p>
+        </div>
+        <div class="mulu" v-else>
+          <el-empty description="暂无文件"></el-empty>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeTree">取 消</el-button>
+        <el-button type="primary" @click="confirmSelection">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -115,6 +155,18 @@ export default {
       iedOptions: [],
       devIdOptions: [],
       iedId: "",
+      iedArr: null,
+
+      treeData: [], // 初始树数据，可以从根路径开始
+      defaultProps: {
+        children: "children",
+        label: "filename",
+      },
+      fullPath: "", // 存储最终的全路径
+      currentPath: "/", // 当前正在构建的路径
+      dialogVisible: false, // 弹窗可见性
+
+      fileListInfo: [],
     };
   },
   created() {},
@@ -127,6 +179,9 @@ export default {
     getdataform(val) {
       console.log(val);
       this.formInfo = JSON.parse(JSON.stringify(val));
+      this.iedId = this.formInfo.iedId;
+      console.log(this.iedId);
+      this.changeIed(this.iedId);
     },
     submitForm() {
       this.$refs.formInforef.validate((valid) => {
@@ -170,6 +225,7 @@ export default {
               .catch((err) => {});
           } else {
             console.log(this.formInfo);
+
             // const pathArray = this.formInfo.pathList
             //   .split("\n")
             //   .map((path) => path.trim())
@@ -224,18 +280,164 @@ export default {
     changeIed(val) {
       console.log(val);
       this.iedId = val;
-      this.getiedFileList();
+      this.iedArr = this.iedOptions.find((option) => option.id === val);
+      console.log(this.iedArr);
+      //this.getiedFileList();
+    },
+    // 显示弹窗并获取根目录列表
+    async showDialog(path) {
+      console.log(path);
+      console.log(this.iedId);
+      // 首先检查 iedId 是否存在
+      if (this.iedId) {
+        try {
+          // 假设 fetchData 是一个返回 Promise 的异步方法
+          const data = await this.getpath({ iedId: this.iedId, path: path });
+          console.log(data);
+          // 检查数据是否成功获取
+          if (data && data.success) {
+            // 数据获取成功，更新当前路径并显示弹窗
+            this.treeData = data.data.map((item) => ({
+              ...item,
+              hasChildren: true,
+              path: `/${item.filename}`, // 设置根节点的路径
+            }));
+            this.currentPath = path;
+            this.dialogVisible = true;
+            console.log(this.treeData); // 注意：这里假设 treeData 已经在其他地方被正确初始化或更新
+          } else {
+            // 数据获取失败，显示错误消息
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              message: "数据获取失败：" + (data.errorMsg || "未知错误"),
+              type: "error",
+            });
+          }
+        } catch (error) {
+          // 捕获在 fetchData 过程中发生的任何异常（比如网络错误）
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "加载数据时出错：" + (error.message || "未知错误"),
+            type: "error",
+          });
+        }
+      } else {
+        // iedId 不存在，显示错误消息
+        this.$message({
+          duration: 1500,
+          showClose: true,
+          message: "请先选择IED",
+          type: "error",
+        });
+      }
     },
-    //获取路径
-    getiedFileList() {
-      ieddllistFilesApi({
+    getpath(params) {
+      return ieddllistFilesApi(params);
+    },
+    // 懒加载节点数据
+    async loadNode(node, resolve) {
+      console.log(node.level);
+      if (node.level === 0) {
+        // 根节点
+        const res = await this.getpath({ iedId: this.iedId, path: "/" });
+        if (!res.success) {
+          this.dialogVisible = false;
+          // 如果不成功，使用 reject 来传递错误信息
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: res.errorMsg,
+            type: "error",
+          });
+          return; // 退出函数
+        }
+        if (res.success) {
+          const rootNodes = res.data.map((item) => ({
+            ...item,
+            hasChildren: true,
+            path: `/${item.filename}`, // 设置根节点的路径
+          }));
+          const rootNodeslast = rootNodes.filter((item) =>
+            item.filename.endsWith("/")
+          );
+          console.log(rootNodeslast);
+          resolve(rootNodeslast);
+        }
+      } else {
+        // 子节点
+        const parentNode = node;
+        const parentPath = parentNode.data.path; // 获取父节点的路径
+        console.log(parentNode, parentPath);
+        const res = await this.getpath({ iedId: this.iedId, path: parentPath });
+        if (!res.success) {
+          this.dialogVisible = false;
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: res.errorMsg,
+            type: "error",
+          });
+          return; // 退出函数
+        }
+        if (res.success) {
+          const childNodes = res.data.map((item) => ({
+            ...item,
+            hasChildren: true,
+            path: `${parentPath}${item.filename}`, // 设置子节点的路径
+          }));
+          const childNodesLast = childNodes.filter((item) =>
+            item.filename.endsWith("/")
+          );
+          console.log(childNodesLast);
+          resolve(childNodesLast);
+        }
+      }
+    },
+
+    // 处理节点点击事件
+    async handleNodeClick(data, node, component) {
+      // 直接使用节点数据中的path属性作为完整路径
+      // 检查节点的 path 属性是否以 / 结尾
+      console.log(node);
+      if (!node.data.path.endsWith("/")) {
+        // 如果不以 / 结尾，则不执行后续逻辑
+        console.log("路径不以 / 结尾，不执行后续操作");
+        return;
+      }
+      this.fullPath = node.data.path.replace(/\/$/, ""); // 去掉末尾的斜杠
+      try {
+        // 请求数据（这里假设您想要根据点击的节点路径获取文件列表）
+        const res = await this.getpath({
           iedId: this.iedId,
-        path: "/",
-      })
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((err) => {});
+          path: this.fullPath,
+        });
+        if (res.success) {
+          // 更新 fileListInfo
+          this.fileListInfo = res.data.filter(
+            (item) => !item.filename.endsWith("/")
+          );
+          // 如果需要，可以在这里执行其他逻辑，比如显示文件列表等
+          console.log("更新后的 fileListInfo:", this.fileListInfo);
+        } else {
+          this.$message.error(res.errorMsg);
+        }
+      } catch (error) {
+        console.error("Error fetching file list:", error);
+        this.$message.error("Failed to fetch file list.");
+      }
+      console.log("我是全部路径", this.fullPath);
+    },
+    closeTree() {
+      this.dialogVisible = false;
+      this.fileListInfo = "";
+    },
+    confirmSelection() {
+      this.formInfo.path = this.fullPath;
+      this.dialogVisible = false;
+      this.fileListInfo = "";
+      this.treeData = [];
     },
     //获取传感器
     getmonitorList() {
@@ -269,6 +471,18 @@ export default {
     .el-select {
       width: 376px;
     }
+    .ipclass {
+      position: absolute;
+      font-size: 12px;
+      top: 36px;
+      line-height: 14px;
+    }
+    .pathLabel {
+      display: flex;
+      .el-button--small {
+        margin-right: 8px;
+      }
+    }
     .filedInfo {
       .colListBox {
         overflow: auto;
@@ -303,5 +517,111 @@ export default {
       }
     }
   }
+  .treeDialogBox {
+    .treeBox {
+      display: flex;
+
+      .mulu {
+        width: 60%;
+        height: 500px;
+        overflow: auto;
+        padding-left: 12px;
+        p {
+          line-height: 22px;
+          height: 22px;
+        }
+      }
+    }
+    .el-dialog__body {
+      .el-tree {
+        width: 40%;
+        height: 500px;
+        overflow: auto;
+        .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;
+      }
+    }
+  }
 }
 </style>