|
@@ -7,11 +7,11 @@
|
|
<div class="status1"><span class="icon"></span>异常</div>
|
|
<div class="status1"><span class="icon"></span>异常</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn">
|
|
<div class="btn">
|
|
- <el-button size="small" @click="logVisible = true" plain type="primary">查看日志</el-button>
|
|
|
|
|
|
+ <el-button size="small" @click="handleLook" plain type="primary">查看日志</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="serviceTopology_cont">
|
|
<div class="serviceTopology_cont">
|
|
- <div class="title">当前服务:Kafka原始报文</div>
|
|
|
|
|
|
+ <div class="title">当前服务:{{title}}</div>
|
|
<sankeyChart />
|
|
<sankeyChart />
|
|
</div>
|
|
</div>
|
|
<Dialog :flag="logVisible" width="1200px">
|
|
<Dialog :flag="logVisible" width="1200px">
|
|
@@ -19,41 +19,39 @@
|
|
<div class="title">查看日志</div>
|
|
<div class="title">查看日志</div>
|
|
<div class="interfaceLog content">
|
|
<div class="interfaceLog content">
|
|
<div class="interfaceLog_head flex">
|
|
<div class="interfaceLog_head flex">
|
|
- <div class="logTitle">当前服务:Kafka原始报文</div>
|
|
|
|
|
|
+ <div class="logTitle">当前服务:{{title}}</div>
|
|
<div class="interfaceLog_head_time flex-wrap">
|
|
<div class="interfaceLog_head_time flex-wrap">
|
|
<div class="interfaceLog_head_time_start">
|
|
<div class="interfaceLog_head_time_start">
|
|
- <el-date-picker v-model="timeStart" size="small" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
|
|
|
|
|
|
+ <el-date-picker v-model="timeStart" value-format="yyyy-MM-dd HH:mm:ss" size="small" @change="timeStartChange" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="interfaceLog_head_time_end">
|
|
<div class="interfaceLog_head_time_end">
|
|
- <el-date-picker v-model="timeEnd" size="small" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
|
|
|
|
|
|
+ <el-date-picker v-model="timeEnd" value-format="yyyy-MM-dd HH:mm:ss" size="small" @change="timeEndChange" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
- <div class="">
|
|
|
|
|
|
+ <!-- <div class="">
|
|
<el-input placeholder="请选择日期" suffix-icon="el-icon-search" size="small" v-model="input1">
|
|
<el-input placeholder="请选择日期" suffix-icon="el-icon-search" size="small" v-model="input1">
|
|
</el-input>
|
|
</el-input>
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="interfaceLog_content flex-wrap">
|
|
<div class="interfaceLog_content flex-wrap">
|
|
- <el-table :data="tableData" class="table" border style="width: 100%">
|
|
|
|
- <el-table-column prop="action" label="用户">
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column prop="time" label="发生时间">
|
|
|
|
|
|
+ <el-table :data="tableData" class="table" height="500px" border style="width: 100%">
|
|
|
|
+ <el-table-column prop="logType" label="日志类型">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="dataNumber" label="发生位置">
|
|
|
|
|
|
+ <el-table-column prop="logTime" label="发生时间">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="details" label="成败详情">
|
|
|
|
|
|
+ <el-table-column prop="logPositionID" label="发生位置">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <el-table-column prop="sourceDataNumber" label="成败代码">
|
|
|
|
|
|
+ <el-table-column prop="resultDetails" label="成败详情">
|
|
</el-table-column>
|
|
</el-table-column>
|
|
- <!-- <el-table-column label="结果">
|
|
|
|
|
|
+ <el-table-column label="成败代码">
|
|
<template slot-scope="scope">
|
|
<template slot-scope="scope">
|
|
- <span :class="scope.row.result ? 'success' : 'error'">{{scope.row.result ? '成功' : '出错'}}</span>
|
|
|
|
|
|
+ <span :class="scope.row.resultCode == '成功' ? 'success' : 'error'">{{scope.row.resultCode}}</span>
|
|
</template>
|
|
</template>
|
|
- </el-table-column> -->
|
|
|
|
|
|
+ </el-table-column>
|
|
</el-table>
|
|
</el-table>
|
|
- <div class="interfaceLog_content_progress">
|
|
|
|
|
|
+ <!-- <div class="interfaceLog_content_progress">
|
|
<el-timeline>
|
|
<el-timeline>
|
|
<el-timeline-item v-for="(item,index) in preDatas" :key="index">
|
|
<el-timeline-item v-for="(item,index) in preDatas" :key="index">
|
|
<div class="list">
|
|
<div class="list">
|
|
@@ -68,11 +66,11 @@
|
|
</div>
|
|
</div>
|
|
</el-timeline-item>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-timeline>
|
|
- </div>
|
|
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="foot">
|
|
<div class="foot">
|
|
- <el-button size="medium" type="primary" class="r25 r26">提交</el-button>
|
|
|
|
|
|
+ <el-button size="medium" @click="handleOk" type="primary" class="r25 r26">提交</el-button>
|
|
<el-button size="medium" class="r26" @click="logVisible = false">取消</el-button>
|
|
<el-button size="medium" class="r26" @click="logVisible = false">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -84,45 +82,72 @@
|
|
import Search from "@/layout/components/Search";
|
|
import Search from "@/layout/components/Search";
|
|
import sankeyChart from './components/sankeyChart.vue'
|
|
import sankeyChart from './components/sankeyChart.vue'
|
|
import Dialog from '@/layout/components/Dialog'
|
|
import Dialog from '@/layout/components/Dialog'
|
|
|
|
+import { Query } from "@/api/dataIntegration";
|
|
|
|
+import { parseTime } from "@/utils/index";
|
|
export default {
|
|
export default {
|
|
name: 'serviceTopology',
|
|
name: 'serviceTopology',
|
|
components: { sankeyChart, Dialog, Search },
|
|
components: { sankeyChart, Dialog, Search },
|
|
created () {
|
|
created () {
|
|
- const { serviceID } = this.$route.params
|
|
|
|
- if (serviceID) {
|
|
|
|
|
|
+ const { serviceID, serviceName } = this.$route.params
|
|
|
|
+ const capName = sessionStorage.getItem('serviceTopology-serviceName')
|
|
|
|
+ const id = sessionStorage.getItem('serviceTopology-serviceID')
|
|
|
|
+ if (serviceID || serviceName) {
|
|
sessionStorage.setItem('serviceTopology-serviceID', serviceID)
|
|
sessionStorage.setItem('serviceTopology-serviceID', serviceID)
|
|
- }
|
|
|
|
- for (let i = 0; i < 5; i++) {
|
|
|
|
- const element = {
|
|
|
|
- action: '采集',
|
|
|
|
- dataNumber: '000120220307201211011201',
|
|
|
|
- sourceDataNumber: 'BSM',
|
|
|
|
- time: '2022-03-07 20:00:12',
|
|
|
|
- result: i % 2 == 0 ? true : false,
|
|
|
|
- details: '数据格式不正确'
|
|
|
|
- };
|
|
|
|
- const obj = {
|
|
|
|
- title: 'login',
|
|
|
|
- code: 'admin',
|
|
|
|
- time: '2022-4-26 15:48:55',
|
|
|
|
- id: i,
|
|
|
|
- status: 1
|
|
|
|
- };
|
|
|
|
- this.tableData.push(element)
|
|
|
|
- this.preDatas.push(obj)
|
|
|
|
|
|
+ sessionStorage.setItem('serviceTopology-serviceName', serviceName)
|
|
|
|
+ this.title = serviceName
|
|
|
|
+ this.id = serviceID
|
|
|
|
+ } else {
|
|
|
|
+ this.title = capName
|
|
|
|
+ this.id = id
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
logVisible: false,
|
|
logVisible: false,
|
|
- timeStart: '',
|
|
|
|
- timeEnd: '',
|
|
|
|
|
|
+ timeStart: parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
|
|
|
|
+ timeEnd: parseTime(
|
|
|
|
+ new Date().getTime() + 24 * 60 * 60 * 1000,
|
|
|
|
+ "{y}-{m}-{d} 00:00:00"
|
|
|
|
+ ),
|
|
tableData: [],
|
|
tableData: [],
|
|
preDatas: [],
|
|
preDatas: [],
|
|
- input1: ""
|
|
|
|
|
|
+ input1: "",
|
|
|
|
+ title: "",
|
|
|
|
+ id: ""
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ async getQuery () {
|
|
|
|
+ const { code, returnData } = await Query({
|
|
|
|
+ id: 127,
|
|
|
|
+ dataContent: JSON.stringify([this.id, this.timeStart, this.timeEnd])
|
|
|
|
+ })
|
|
|
|
+ if (code == 0) {
|
|
|
|
+ const { listValues } = returnData
|
|
|
|
+ this.tableData = listValues
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.error('网络错误')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleLook () {
|
|
|
|
+ this.logVisible = true
|
|
|
|
+ this.getQuery()
|
|
|
|
+ },
|
|
|
|
+ timeStartChange (val) {
|
|
|
|
+ if (val >= this.timeEnd) {
|
|
|
|
+ this.timeStart = ''
|
|
|
|
+ this.$message.error('开始时间不能大于结束时间,请重新选择')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ timeEndChange (val) {
|
|
|
|
+ if (val <= this.timeEnd) {
|
|
|
|
+ this.timeEnd = ''
|
|
|
|
+ this.$message.error('结束时间不能小于开始时间,请重新选择')
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleOk () {
|
|
|
|
+ this.getQuery()
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -194,7 +219,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.interfaceLog_head_time_end {
|
|
.interfaceLog_head_time_end {
|
|
- margin: 0 16px;
|
|
|
|
|
|
+ margin-left: 16px;
|
|
}
|
|
}
|
|
.interfaceLog_content {
|
|
.interfaceLog_content {
|
|
margin-top: 24px;
|
|
margin-top: 24px;
|