控制台修改

src/utils/api/index.js

@@ -1077,6 +1077,18 @@ export function clearTransformApi(data) {
   });
 }
 
+///  /iecserver/delete  删除
+export function serverDeleteApi(data) {
+  return request({
+    url: "/iecserver/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
+
 //61850下载文件相关接口 Ied Dl Controller
 //获取所有列表
 export function ieddlServerApi(data) {

src/views/iceserver/index.vue

@@ -3,32 +3,44 @@
     <div class="left">
       <div
         class="cardBox"
-        v-loading="serveLoading"
+        v-for="(item, index) in icdFileOptions"
+        :key="item.id"
+        v-loading="serveLoading === index"
         element-loading-text="请稍等"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.7)"
-        v-for="item in icdFileOptions"
-        :key="item.id"
       >
         <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span> IEC服务器状态</span>
           </div>
           <div class="concard">
-            <p>filename：{{ item.filename }}</p>
+            <p>
-            <p>端口：{{ item.port }}</p>
+              filename：<span class="filename" :title="item.filename">{{
+                item.filename
+              }}</span>
+            </p>
+            <p>
+              端口：<el-input
+                v-model="item.port"
+                placeholder="请输入内容"
+              ></el-input>
+            </p>
             <p>
               服务器状态：
-              <el-tag type="success" v-if="serverStatus">开启</el-tag>
+              <el-tag type="success" v-if="item.start == 1">开启</el-tag>
               <el-tag type="danger" v-else>关闭</el-tag>
             </p>
+
             <el-switch
-              v-model="serverVal"
+              v-model="localStartStates[index]"
+              :active-value="1"
+              :inactive-value="0"
               active-text="服务器开启"
               inactive-text="服务器关闭"
               active-color="#13ce66"
               inactive-color="#ff4949"
-              @change="changeStatus"
+              @change="changeStatus(item, index)"
             >
             </el-switch>
           </div>
@@ -97,34 +109,38 @@ export default {
   components: {},
   data() {
     return {
-      port: "",
-      filename: "", //文件名
-      serverStatus: false,
-      serverVal: true,
-      fileNameVal: "",
       icdFileOptions: [],
-      serveLoading: false,
+      serveLoading: null,
       ledList: [],
       ledLoading: false,
+      localStartStates: "",
     };
   },
   mounted() {
-    this.geticeStatus(); //获取iedName列表
+    this.$nextTick(() => {
       this.getIcdListFile();
       this.getLedList(); //获取LedList列表
+    });
   },
   methods: {
-    //获取ice服务器状态
+    //获取左侧服务器列表
-    geticeStatus() {
+    getIcdListFile() {
-      serverstatusApi()
+      ieclistFileApi()
         .then((res) => {
           if (res.success) {
-            console.log(res);
+            this.icdFileOptions = res.data;
-            this.port = res.data.port;
+            this.icdFileOptions = res.data.map((item) => {
-            this.serverStatus = res.data.started;
+              // 检查 port 是否为 null，如果是则设置为 102
-            this.serverVal = res.data.started;
+              if (item.port === null) {
-            this.filename = res.data.filename;
+                item.port = 102;
-            this.fileNameVal = res.data.fileId;
+              }
+              return item;
+            });
+            this.localStartStates = this.icdFileOptions.map((item) =>
+              item.start == "1" ? 1 : 0
+            );
+            console.log(this.localStartStates);
+            console.log("我是res", res);
           } else {
             this.$message({
               duration: 1500,
@@ -138,12 +154,16 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
-    changeStatus() {
+
-      console.log(this.serverVal);
+    changeStatus(item, index) {
-      this.serveLoading = true;
+      this.serveLoading = index; // 设置当前项为加载状态
-      if (this.serverVal) {
+      console.log(item); // 此时 item.port 应该是已经处理过的值（102 或其他用户输入的值）
+      const port = item.port; // 获取当前 item 的 port 值
+
+      if (item.start == 0) {
         serverstartApi({
-          fileId: this.fileNameVal,
+          fileId: item.id,
+          port: port,
         })
           .then((res) => {
             if (res.success) {
@@ -154,8 +174,8 @@ export default {
                 message: "服务器开始成功",
                 type: "success",
               });
-              this.geticeStatus();
+              this.getIcdListFile();
-              this.serveLoading = false;
+              this.serveLoading = -1;
             } else {
               this.$message({
                 duration: 1500,
@@ -163,22 +183,22 @@ export default {
                 message: res.errorMsg,
                 type: "error",
               });
-              this.geticeStatus();
+              this.getIcdListFile();
-              this.serveLoading = false;
+              this.serveLoading = -1;
             }
           })
           .catch((err) => {
             console.log(err); //代码错误、请求失败捕获
           });
       } else {
-        serverstopApi()
+        serverstopApi({ fileId: item.id })
           .then((res) => {
             if (res.success) {
               console.log(res);
-              this.serveLoading = false;
+              this.serveLoading = -1;
-              this.geticeStatus();
+              this.getIcdListFile();
             } else {
-              this.serveLoading = false;
+              this.serveLoading = -1;
               this.$message({
                 duration: 1500,
                 showClose: true,
@@ -192,29 +212,7 @@ export default {
           });
       }
     },
-    getIcdListFile() {
+    //右边
-      ieclistFileApi()
-        .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); //代码错误、请求失败捕获
-        });
-    },
-
     //获取ledList列表
     getLedList() {
       listIedConfigApi()
@@ -305,7 +303,7 @@ export default {
   .left {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
+    //justify-content: space-around;
     align-content: flex-start; //加这个属性就能解决
     height: 100%;
     overflow: auto;
@@ -313,7 +311,8 @@ export default {
   .cardBox {
     width: 280px;
     margin-top: 20px;
-    height: 184px;
+    //height: 184px;
+    margin-right: 16px;
     .el-card__header {
       padding: 12px;
     }
@@ -331,11 +330,22 @@ export default {
         }
       }
       p {
+        display: flex;
+        align-items: center;
+        .filename {
+          width: 180px;
+          overflow: hidden; /*超出部分隐藏*/
+          text-overflow: ellipsis; /*超出部分省略号表示*/
+          white-space: nowrap; /*强制单行显示*/
+        }
+        .el-input {
+          width: 120px;
+        }
         &:nth-child(2) {
           margin-top: 12px;
           margin-bottom: 12px;
         }
-        &:nth-child(4) {
+        &:nth-child(3) {
           // margin-top: 12px;
           margin-bottom: 12px;
         }

src/views/serverIcd/index.vue

@@ -45,6 +45,17 @@
               <el-tag type="danger" v-else>未启用</el-tag>
             </template>
           </el-table-column>
+          <el-table-column label="操作" class-name="editClass">
+            <template slot-scope="scope">
+              <el-link
+                type="danger"
+                @click="deleteServer(scope.row)"
+                size="small"
+                icon="el-icon-delete"
+                >删除</el-link
+              >
+            </template>
+          </el-table-column>
         </el-table>
       </div>
       <div class="icdTableBox" v-else>
@@ -54,7 +65,7 @@
   </div>
 </template>
 <script>
-import { ieclistFileApi } from "@/utils/api/index";
+import { ieclistFileApi, serverDeleteApi } from "@/utils/api/index";
 
 export default {
   components: {},
@@ -113,6 +124,26 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    //删除服务器
+    deleteServer(row) {
+      serverDeleteApi({ fileId: row.id })
+        .then((res) => {
+          if (res.success) {
+            console.log(res);
+            this.geticdList();
+          } else {
+            this.$message({
+              duration: 1500,
+              showClose: true,
+              type: "error",
+              message: res.errorMsg,
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
   },
 };
 </script>