|
|
|
|
@ -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>端口：{{ item.port }}</p>
|
|
|
|
|
<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.getIcdListFile();
|
|
|
|
|
this.getLedList(); //获取LedList列表
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.getIcdListFile();
|
|
|
|
|
this.getLedList(); //获取LedList列表
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//获取ice服务器状态
|
|
|
|
|
geticeStatus() {
|
|
|
|
|
serverstatusApi()
|
|
|
|
|
//获取左侧服务器列表
|
|
|
|
|
getIcdListFile() {
|
|
|
|
|
ieclistFileApi()
|
|
|
|
|
.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;
|
|
|
|
|
this.icdFileOptions = res.data;
|
|
|
|
|
this.icdFileOptions = res.data.map((item) => {
|
|
|
|
|
// 检查 port 是否为 null，如果是则设置为 102
|
|
|
|
|
if (item.port === null) {
|
|
|
|
|
item.port = 102;
|
|
|
|
|
}
|
|
|
|
|
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);
|
|
|
|
|
this.serveLoading = true;
|
|
|
|
|
if (this.serverVal) {
|
|
|
|
|
|
|
|
|
|
changeStatus(item, index) {
|
|
|
|
|
this.serveLoading = index; // 设置当前项为加载状态
|
|
|
|
|
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.serveLoading = false;
|
|
|
|
|
this.getIcdListFile();
|
|
|
|
|
this.serveLoading = -1;
|
|
|
|
|
} else {
|
|
|
|
|
this.$message({
|
|
|
|
|
duration: 1500,
|
|
|
|
|
@ -163,22 +183,22 @@ export default {
|
|
|
|
|
message: res.errorMsg,
|
|
|
|
|
type: "error",
|
|
|
|
|
});
|
|
|
|
|
this.geticeStatus();
|
|
|
|
|
this.serveLoading = false;
|
|
|
|
|
this.getIcdListFile();
|
|
|
|
|
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.geticeStatus();
|
|
|
|
|
this.serveLoading = -1;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
fanluyan
8 months ago