|
|
@@ -6,30 +6,48 @@
|
|
|
>
|
|
|
<!-- <el-form :model="dataForm" ref="dataForm" label-width="160px">
|
|
|
<el-form-item class="boxformitem"> -->
|
|
|
- <div style="width:'10%',height:'100%',display:'flex'">
|
|
|
- <el-radio-group
|
|
|
- v-model="containertype"
|
|
|
- default-value="main"
|
|
|
- @change="workflowcontainerchange"
|
|
|
+ <div style="width:'10%',height:'100%'">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="containertype"
|
|
|
+ default-value="main"
|
|
|
+ @change="workflowcontainerchange"
|
|
|
+ >
|
|
|
+ <el-radio label="main" value="main">main</el-radio>
|
|
|
+ <el-radio label="init" value="init">init</el-radio>
|
|
|
+ <el-radio label="wait" value="wait">wait</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- <div class="log-box"> -->
|
|
|
+ <div class="log-box" style="position: relative; overflow: scroll">
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ this.workflowContentlogsplit && this.workflowContentlogsplit.length
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ class="logList-item"
|
|
|
+ v-for="(item, index) in this.workflowContentlogsplit"
|
|
|
+ :key="index"
|
|
|
>
|
|
|
- <el-radio label="main" value="main">main</el-radio>
|
|
|
- <el-radio label="init" value="init">init</el-radio>
|
|
|
- <el-radio label="wait" value="wait">wait</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- <a-descriptions
|
|
|
- title=""
|
|
|
- layout="vertical"
|
|
|
- bordered
|
|
|
- style="white-space: pre-wrap"
|
|
|
- >
|
|
|
-
|
|
|
- <a-descriptions-item >
|
|
|
- {{ this.workflowContentlog }}
|
|
|
- </a-descriptions-item>
|
|
|
- </a-descriptions>
|
|
|
- <!-- </a-layout-footer> -->
|
|
|
+ {{ item }}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- <!-- </el-form-item>
|
|
|
+ <p v-else>暂无数据</p>
|
|
|
+ </div>
|
|
|
+ <!-- </div> -->
|
|
|
+
|
|
|
+ <!-- <a-descriptions
|
|
|
+ title=""
|
|
|
+ layout="vertical"
|
|
|
+ bordered
|
|
|
+ style="white-space: pre-wrap"
|
|
|
+ >
|
|
|
+ <a-descriptions-item>
|
|
|
+ {{ this.workflowContentlog }}
|
|
|
+ </a-descriptions-item>
|
|
|
+ </a-descriptions> -->
|
|
|
+ <!-- </a-layout-footer> -->
|
|
|
+ </div>
|
|
|
+ <!-- </el-form-item>
|
|
|
</el-form> -->
|
|
|
<!-- <span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="visible = false">取消</el-button>
|
|
|
@@ -51,8 +69,15 @@ export default {
|
|
|
workflowName: "", //提交后的工作流名称
|
|
|
workflowContent: { main: "暂无数据", wait: "暂无数据", init: "暂无数据" },
|
|
|
workflowContentlog: "",
|
|
|
+ workflowContentlogsplit: [],
|
|
|
+ workflowStatus: "", //记录工作流状态
|
|
|
|
|
|
containertype: "main",
|
|
|
+ websocket: null,
|
|
|
+ log: "", // 日志内容
|
|
|
+ logCache: "",
|
|
|
+ websocket: null,
|
|
|
+ socketTimer: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -65,50 +90,263 @@ export default {
|
|
|
init(workflowName) {
|
|
|
this.visible = true;
|
|
|
this.workflowName = workflowName;
|
|
|
-
|
|
|
- this.$http({
|
|
|
- url: this.$http.adornUrl("/visi/visiworkflow/getworkflowlog"),
|
|
|
- method: "get",
|
|
|
- params: this.$http.adornParams({
|
|
|
- workflowName: this.workflowName,
|
|
|
- }),
|
|
|
- })
|
|
|
- .then(({ data }) => {
|
|
|
- this.workflowContent = data.workflowContent;
|
|
|
- this.workflowContentlog = this.workflowContent.main;
|
|
|
- // this.podlogs = data.podlogs;
|
|
|
- console.log("workflowcontent");
|
|
|
- console.log(this.workflowContent);
|
|
|
- console.log(this.workflowContent.main);
|
|
|
- console.log(this.workflowContent.init);
|
|
|
- console.log(this.workflowContent.wait);
|
|
|
- // console.log("podlogs")
|
|
|
- // console.log(this.podlogs);
|
|
|
+ // this.createWebsocket();
|
|
|
+ var intervalID = window.setInterval(() => {
|
|
|
+ // this.getWorkflowStatus();
|
|
|
+ this.$http({
|
|
|
+ url: this.$http.adornUrl("/visi/visiworkflow/getworkflowlog2"),
|
|
|
+ method: "get",
|
|
|
+ params: this.$http.adornParams({
|
|
|
+ workflowName: this.workflowName,
|
|
|
+ }),
|
|
|
})
|
|
|
- .then(() => {
|
|
|
- // this.visible = true
|
|
|
- // this.$nextTick(() => {
|
|
|
- // this.$refs['dataForm'].resetFields()
|
|
|
- // })
|
|
|
- });
|
|
|
+ .then(({ data }) => {
|
|
|
+ if (data && data.code === 0) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.workflowContent = data.workflowContent;
|
|
|
+ if (this.containertype == "main") {
|
|
|
+ this.workflowContentlog = this.workflowContent.main;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.main.split(/[(\r\n)\r\n]+/);
|
|
|
+ }
|
|
|
+ if (this.containertype == "init") {
|
|
|
+ this.workflowContentlog = this.workflowContent.init;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.init.split(/[(\r\n)\r\n]+/);
|
|
|
+ }
|
|
|
+ if (this.containertype == "wait") {
|
|
|
+ this.workflowContentlog = this.workflowContent.wait;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
|
|
|
+ }
|
|
|
+ this.workflowStatus = data.workflowStatus;
|
|
|
+ // this.handleLog();
|
|
|
+ // this.podlogs = data.podlogs;
|
|
|
+
|
|
|
+ // console.log("workflowcontent");
|
|
|
+ // console.log(this.workflowContent);
|
|
|
+ // console.log(this.workflowContent.main);
|
|
|
+ // console.log(this.workflowContent.init);
|
|
|
+ // console.log(this.workflowContent.wait);
|
|
|
+ // console.log(this.workflowStatus);
|
|
|
+
|
|
|
+ // console.log("podlogs")
|
|
|
+ // console.log(this.podlogs);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // this.visible = true
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // this.$refs['dataForm'].resetFields()
|
|
|
+ // })
|
|
|
+ // 取消该定时设置
|
|
|
+ if (
|
|
|
+ this.workflowStatus == "Succeeded" ||
|
|
|
+ this.workflowStatus == "Error" ||
|
|
|
+ this.workflowStatus == "Failed"
|
|
|
+ ) {
|
|
|
+ // if (this.workflowStatus == "Succeeded") {
|
|
|
+ // this.workflowstatustag.name = "Succeeded";
|
|
|
+ // this.workflowstatustag.type = "success";
|
|
|
+ // } else if (
|
|
|
+ // this.workflowStatus == "Error" ||
|
|
|
+ // this.workflowStatus == "Failed"
|
|
|
+ // ) {
|
|
|
+ // this.workflowstatustag.name = "Failed";
|
|
|
+ // this.workflowstatustag.type = "danger";
|
|
|
+ // }
|
|
|
+ console.log("关闭定时器-workflowlog");
|
|
|
+ window.clearInterval(intervalID);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 5000);
|
|
|
},
|
|
|
init1() {
|
|
|
this.visible = true;
|
|
|
this.workflowContentlog = this.workflowContent.main;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.main.split(/[(\r\n)\r\n]+/);
|
|
|
//暂未生成workflowname
|
|
|
-
|
|
|
},
|
|
|
//单选控制 日志类型 main init wait
|
|
|
workflowcontainerchange(e) {
|
|
|
if (this.containertype == "main") {
|
|
|
this.workflowContentlog = this.workflowContent.main;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.main.split(/[(\r\n)\r\n]+/);
|
|
|
}
|
|
|
if (this.containertype == "init") {
|
|
|
this.workflowContentlog = this.workflowContent.init;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.init.split(/[(\r\n)\r\n]+/);
|
|
|
}
|
|
|
if (this.containertype == "wait") {
|
|
|
this.workflowContentlog = this.workflowContent.wait;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.wait.split(/[(\r\n)\r\n]+/);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //获取webSocket消息
|
|
|
+ handleLog() {
|
|
|
+ var websocket = null;
|
|
|
+
|
|
|
+ var host = "ws://127.0.0.1:8082/renren-fast/webSocket/log";
|
|
|
+ // if (window.location.protocol == 'http:') {
|
|
|
+ // host = 'ws://' + window.location.host + '/websocket';
|
|
|
+ // } else {
|
|
|
+ // host = 'wss://' + window.location.host + '/websocket';
|
|
|
+ // }
|
|
|
+
|
|
|
+ //判断当前浏览器是否支持WebSocket
|
|
|
+ if ("WebSocket" in window) {
|
|
|
+ this.websocket = new WebSocket(host);
|
|
|
+ } else if ("MozWebSocket" in window) {
|
|
|
+ this.websocket = new MozWebSocket(host);
|
|
|
+ } else {
|
|
|
+ alert("该浏览器不支持WebSocket！");
|
|
|
}
|
|
|
+ console.log(host);
|
|
|
+ this.initWebSocket();
|
|
|
+
|
|
|
+ // if ("WebSocket" in window) {
|
|
|
+ // let url = `ws://localhost/websocket`;
|
|
|
+ // console.log(url);
|
|
|
+ // this.websocket = new WebSocket(url);
|
|
|
+ // this.initWebSocket();
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+ //初始化webSocket
|
|
|
+ initWebSocket() {
|
|
|
+ // 连接错误
|
|
|
+ this.websocket.onerror = () => {
|
|
|
+ console.log(
|
|
|
+ "WebSocket连接发生错误 状态码：" + this.websocket.readyState
|
|
|
+ );
|
|
|
+ };
|
|
|
+ // 连接成功
|
|
|
+ this.websocket.onopen = () => {
|
|
|
+ console.log(
|
|
|
+ "WebSocket连接成功 状态码：" + this.websocket.readyState
|
|
|
+ );
|
|
|
+ };
|
|
|
+ this.websocket.onclose = () => {
|
|
|
+ console.log("WebSocket断开 状态码：" + this.websocket.readyState);
|
|
|
+ };
|
|
|
+ // 收到消息的回调
|
|
|
+ this.websocket.onmessage = (event) => {
|
|
|
+ // this.consumeCount = this.consumeCount + 1;
|
|
|
+ // if (this.filter && event.data.indexOf(this.keyword) == -1) {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // var curIndex=id;
|
|
|
+ if (event.data.match("日志获取结束")) {
|
|
|
+ console.log(event.data);
|
|
|
+ this.websocket.close();
|
|
|
+ } else {
|
|
|
+ this.workflowContent = JSON.parse(event.data);
|
|
|
+ this.containertype = "main";
|
|
|
+ this.workflowContentlog = this.workflowContent.main;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.main.split(/[(\r\n)\r\n]+/);
|
|
|
+ console.log("event.data" + event.data);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* else{
|
|
|
+ this.websocket.close();
|
|
|
+ } */
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ createWebsocket() {
|
|
|
+ const url = "ws://127.0.0.1:8082/renren-fast/webSocket/workflowlog";
|
|
|
+ this.websocket = new WebSocket(url);
|
|
|
+ this.websocket.onopen = () => {
|
|
|
+ console.log("websocket.onopen...");
|
|
|
+ this.websocket.send(
|
|
|
+ JSON.stringify({ workflowName: this.workflowName })
|
|
|
+ );
|
|
|
+ this.openSocketTimer();
|
|
|
+ };
|
|
|
+ this.websocket.onmessage = (res) => {
|
|
|
+ console.log("websocket.onmessage...");
|
|
|
+ const data = res.data;
|
|
|
+ console.log(res.data);
|
|
|
+ // let lineRes = "";
|
|
|
+ // let arrN = [];
|
|
|
+ // if (data.indexOf("\n") !== -1) {
|
|
|
+ // arrN = data.split("\n");
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (arrN.length > 0) {
|
|
|
+ // for (let i = 0; i < arrN.length - 1; i++) {
|
|
|
+ // let lineStr = arrN[i];
|
|
|
+ // if (lineStr.indexOf("\r") !== -1) {
|
|
|
+ // lineStr = lineStr[lineStr.length - 1];
|
|
|
+ // }
|
|
|
+
|
|
|
+ // lineRes += lineStr + "\n\n";
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // lineRes = data;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 放到缓存logCache中
|
|
|
+ if (res.data) {
|
|
|
+ if (!this.log || this.log.length == 0) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // this.log = `${this.log}${lineRes}`;
|
|
|
+ this.log = res.data;
|
|
|
+ this.workflowContent = JSON.parse(res.data);
|
|
|
+ this.containertype = "main";
|
|
|
+ this.workflowContentlog = this.workflowContent.main;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.main.split(/[(\r\n)\r\n]+/);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // this.logCache = `${this.logCache}${lineRes}`;
|
|
|
+ this.logCache = res.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.websocket.onclose = function (e) {
|
|
|
+ console.log("websocket.onclose...");
|
|
|
+ console.log(`连接已断开...>>>${e.code}`);
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 开启定时器，每隔3秒检验下是否需要刷新日志
|
|
|
+ openSocketTimer() {
|
|
|
+ this.clearSocketTimer();
|
|
|
+ this.socketTimer = setInterval(this.checkRenderEnable, 3000);
|
|
|
+ },
|
|
|
+ // 关闭定时器
|
|
|
+ clearSocketTimer() {
|
|
|
+ if (this.socketTimer != null) {
|
|
|
+ clearInterval(this.socketTimer);
|
|
|
+ this.socketTimer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 判断是否需要刷新页面，也就是log缓存是否为空
|
|
|
+ checkRenderEnable() {
|
|
|
+ if (this.logCache && this.logCache.length > 0) {
|
|
|
+ this.renderPage();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 刷新页面
|
|
|
+ renderPage() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // this.log = `${this.log}${this.logCache}`;
|
|
|
+ this.log = this.logCache;
|
|
|
+ this.workflowContent = JSON.parse(this.log);
|
|
|
+ this.containertype = "main";
|
|
|
+ this.workflowContentlog = this.workflowContent.main;
|
|
|
+ this.workflowContentlogsplit =
|
|
|
+ this.workflowContent.main.split(/[(\r\n)\r\n]+/);
|
|
|
+ this.logCache = ""; // 刷新完成之后，清空log缓存
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -120,4 +358,17 @@ export default {
|
|
|
.el-form-item .el-input {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+.logList-item {
|
|
|
+ padding: 0px 0;
|
|
|
+ line-height: 20px;
|
|
|
+ margin: 0;
|
|
|
+ font: normal 13px/1.2 "Courier", sans-serif;
|
|
|
+}
|
|
|
+.log-box {
|
|
|
+ min-height: 500px;
|
|
|
+ max-height: 800px;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
</style>
|
