<template>
|
<div class="page" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.4)">
|
<!-- 连接 -->
|
<div class="connect">
|
<div class="con-list">
|
<div class="con-item">
|
<div class="label">协议文件:</div>
|
<div class="content">
|
<el-upload
|
action=""
|
class="upload"
|
:before-upload="beforeUpload"
|
:on-change="onChange"
|
:on-remove="onRemove"
|
:on-exceed="onExceed"
|
:auto-upload="false"
|
:limit="1"
|
multiple
|
:file-list="fileList"
|
>
|
<!-- accept=".iid,.icd" -->
|
<el-button slot="trigger" size="small" type="primary"
|
>选取文件</el-button
|
>
|
<div slot="tip" class="el-upload__tip">
|
选择协议文件 如iid, icd文件等
|
</div>
|
</el-upload>
|
</div>
|
</div>
|
<div class="con-item">
|
<div class="label">Ip地址:</div>
|
<div class="content">
|
<el-input placeholder="请输入Ip" v-model="ip"></el-input>
|
</div>
|
</div>
|
<div class="con-item">
|
<div class="label">端口号:</div>
|
<div class="content">
|
<el-input placeholder="请输入端口号" v-model="port"></el-input>
|
</div>
|
</div>
|
</div>
|
<div class="btn-grp">
|
<el-button size="small" v-if="canConnect" type="primary" @click="connect"
|
>连接</el-button
|
>
|
<el-button size="small" v-else type="warning" @click="disConnect">断开</el-button>
|
</div>
|
<!-- 连接状态 -->
|
<div class="info">
|
{{ connectState
|
}}<span v-if="failreasionStr" class="error">({{ failreasionStr }})</span>
|
</div>
|
</div>
|
<!-- 搜索 -->
|
<div class="filter">
|
<el-input
|
placeholder="请输入关键词"
|
v-model="keyword"
|
>
|
<template slot="prepend">搜索:</template>
|
</el-input>
|
</div>
|
<!-- 数据 -->
|
<div class="wraper">
|
<div class="inner">
|
<RecycleScroller
|
v-if="list.length"
|
class="scroller"
|
:items="list"
|
:item-size="100"
|
listClass="list"
|
itemClass="iitem"
|
v-slot="{ item }"
|
>
|
<!-- key-field="id" -->
|
<div class="item">
|
<div
|
class="row"
|
v-for="(jtem, idx) in item.list"
|
:key="'list_' + item.id + '_' + idx"
|
>
|
<div class="jtem" v-if="jtem != undefined">
|
<card :info="jtem"></card>
|
</div>
|
</div>
|
</div>
|
</RecycleScroller>
|
<div v-else class="empty">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import card from "./components/card";
|
import {
|
connect,
|
disConnect,
|
} from './js/apis';
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("IedNodestate");
|
const STATES = ["未连接", "准备连接", "连接中", "连接成功", "连接失败"];
|
const FAILREASION = [
|
"",
|
"文件不存在",
|
"文件不匹配",
|
"IP或者端口错误",
|
"连接超时",
|
];
|
export default {
|
name: "protocolData",
|
mixins: [WSMixin],
|
data() {
|
return {
|
loading: false,
|
nodeList: [],
|
fileList: [],
|
keyword: "",
|
// connectFlag: false,
|
failReasion: 0,
|
connSt: 0,
|
ip: "",
|
port: "",
|
};
|
},
|
components: {
|
card,
|
},
|
computed: {
|
connectState() {
|
return STATES[this.connSt];
|
},
|
failreasionStr() {
|
return FAILREASION[this.failReasion];
|
},
|
canConnect() {
|
return this.connSt == 0 || this.connSt == 4;
|
},
|
list() {
|
let keyword = this.keyword.trim();
|
if (keyword == "") {
|
return this.format(this.nodeList);
|
} else {
|
let list = this.nodeList.filter(
|
(v) => v.nodeName.indexOf(keyword) > -1
|
);
|
return this.format(list);
|
}
|
},
|
},
|
methods: {
|
beforeUpload() {
|
return false;
|
},
|
onChange(file, fileList) {
|
// console.log(file, '8090', fileList)
|
this.fileList = fileList;
|
},
|
onRemove(file, fileList) {
|
// console.log(file, fileList, '??')
|
this.fileList = fileList;
|
},
|
onExceed(files, fileList) {
|
console.log(files, fileList, "??");
|
let file = files[files.length - 1];
|
this.fileList = [
|
{
|
name: file.name,
|
raw: file,
|
size: file.size,
|
percentage: 0,
|
status: "ready",
|
},
|
];
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
let { cinf, nodeList } = res.data2;
|
// console.log(data, "=====data");
|
this.connSt = cinf.connSt;
|
// this.connectFlag = cinf.connSt == 1;
|
this.failReasion = cinf.failReasion;
|
this.nodeList = cinf.connSt == 3 ? nodeList : [];
|
// 发起连接 后台会改状态为1 关闭连接后会改状态为0
|
if (this.loading && cinf.connSt != 1) {
|
this.loading = false;
|
}
|
},
|
format(data) {
|
let list = [];
|
for (let i = 0, j = data.length; i < j; i += 3) {
|
let arr = [data[i]];
|
if (i + 1 < j) {
|
arr.push(data[i + 1]);
|
} else {
|
arr.push(undefined);
|
}
|
if (i + 2 < j) {
|
arr.push(data[i + 2]);
|
} else {
|
arr.push(undefined);
|
}
|
list.push({ id: i, list: arr });
|
}
|
return list;
|
},
|
connect() {
|
let {
|
fileList,
|
ip,
|
port
|
} = this;
|
ip = ip.trim();
|
port = port.trim();
|
let regIp = /^\d{1,3}\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/;
|
let regPort = /^\d{1,6}$/;
|
if (!fileList.length) {
|
this.$message.error('请选择协议文件');
|
return false;
|
}
|
if (!regIp.test(ip)) {
|
this.$message.error('请输入正确的Ip格式');
|
return false;
|
}
|
if (!regPort.test(port)) {
|
this.$message.error('请输入正确的port格式');
|
return false;
|
}
|
|
let formData = new FormData();
|
let json = JSON.stringify({
|
targetIp: ip,
|
targetPort: port
|
});
|
formData.append("file", fileList[0].raw);
|
formData.append("json", json);
|
this.loading = true;
|
//上传图片接口
|
connect(formData);
|
},
|
disConnect() {
|
this.loading = true;
|
disConnect();
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.page {
|
font-size: 14px;
|
height: 100%;
|
padding-left: 6px;
|
padding-right: 36px;
|
display: flex;
|
flex-direction: column;
|
.wraper {
|
flex: 1;
|
position: relative;
|
.inner {
|
position: absolute;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
.scroller {
|
height: 100%;
|
overflow-y: scroll;
|
}
|
}
|
}
|
.connect {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.con-list {
|
flex: 1;
|
display: flex;
|
justify-content: space-between;
|
margin-right: 1em;
|
.con-item {
|
display: flex;
|
align-items: center;
|
}
|
.label {
|
display: inline-block;
|
margin-right: 0.4em;
|
}
|
.content {
|
display: inline-block;
|
}
|
}
|
.info {
|
width: 20em;
|
margin-left: 0.6em;
|
}
|
}
|
.filter {
|
padding: 10px 0;
|
width: 600px;
|
}
|
/deep/ .list {
|
display: flex;
|
}
|
.item {
|
display: flex;
|
/* flex-direction: column; */
|
justify-content: space-between;
|
height: 100px;
|
}
|
.row {
|
flex: 1;
|
& ~ .row {
|
margin-left: 10px;
|
}
|
}
|
}
|
.error {
|
padding-left: 0.4em;
|
font-weight: bold;
|
color: #f90;
|
}
|
.empty {
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 18px;
|
color: #fff;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
</style>
|
