277 lines
8.2 KiB
Vue
277 lines
8.2 KiB
Vue
<template>
|
||
<a-row :gutter="30" style="padding: 0 10px;">
|
||
<a-col :md="14" >
|
||
<div class="linese"></div>
|
||
<!-- 查询区域 -->
|
||
<div class="table-page-search-wrapper" style="background: rgb(18, 44, 65);">
|
||
<a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
||
<a-select-option v-for="d in dataTypedataSources" :key="d.enName">
|
||
{{ d.cnName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<!-- table区域-begin -->
|
||
<div ref="tableContainer" style="height:calc(100vh - 347px);background: rgb(18, 44, 65);padding:10px;">
|
||
<a-table
|
||
ref="table"
|
||
size="middle"
|
||
bordered
|
||
:pagination="false"
|
||
:scroll="{ y: tableScrollY }"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource">
|
||
<!-- :locale="myLocale"-->
|
||
|
||
<!-- 字符串超长截取省略号显示-->
|
||
</a-table>
|
||
</div>
|
||
<div class="linese"></div>
|
||
</a-col>
|
||
<a-col :md="10">
|
||
<div class="linese"></div>
|
||
<a-card :bordered="false" style="background: rgb(18, 44, 65) !important;">
|
||
<!-- 查询区域 -->
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline">
|
||
<a-row :gutter="24">
|
||
<a-col :md="12">
|
||
<a-form-item label="日志类型">
|
||
<a-select placeholder="选择日志类型" option-filter-prop="children" size="large" v-model="queryParam.syncState">
|
||
<a-select-option key="">
|
||
全部
|
||
</a-select-option>
|
||
<a-select-option key="0">
|
||
未同步
|
||
</a-select-option>
|
||
<a-select-option key="1">
|
||
进行中
|
||
</a-select-option>
|
||
<a-select-option key="2">
|
||
已结束
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7">
|
||
</a-col>
|
||
<a-col :md="5">
|
||
<a-button @click="dataAdd" type="primary">数据清洗整编</a-button>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<!-- table区域-begin -->
|
||
<div class="datacleanResult">
|
||
<div class="progressbg">
|
||
<div class="title">清洗进度：</div>
|
||
<a-progress :percent="percent" status="active" class="progress" />
|
||
</div>
|
||
<a-list :data-source="contentList" style="padding:10px 20px;">
|
||
<a-list-item slot="renderItem" slot-scope="item">
|
||
{{ item }}
|
||
</a-list-item>
|
||
</a-list>
|
||
</div>
|
||
</a-card>
|
||
<div class="linese"></div>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/'
|
||
import {getAction} from '@/api/manage'
|
||
import {
|
||
dataTypePageList,
|
||
dataTypeDeleteById } from '@/api/dataType'
|
||
export default {
|
||
name: "dataCleansing",
|
||
components: {
|
||
},
|
||
data () {
|
||
return {
|
||
description: '原始库',
|
||
contentList:[],
|
||
percent:0,
|
||
websock:{},
|
||
datatypequeryParam: {
|
||
schemaName:"",
|
||
sourceType:1
|
||
},
|
||
queryParam: {
|
||
pageNum :1,
|
||
pageSize:9999999,
|
||
},
|
||
dataTypedataSources: [],
|
||
dataSource:[
|
||
],
|
||
columns: [
|
||
{
|
||
title: '#',
|
||
dataIndex: '',
|
||
key:'id',
|
||
width:60,
|
||
align:"id",
|
||
customRender:function (t,r,index) {
|
||
return parseInt(index)+1;
|
||
}
|
||
},
|
||
{
|
||
title: '表名',
|
||
align:"center",
|
||
dataIndex: 'tableName',
|
||
},
|
||
{
|
||
title: '报文名',
|
||
align:"center",
|
||
dataIndex: 'tableMessName'
|
||
},
|
||
{
|
||
title: '开始时间',
|
||
align:"center",
|
||
dataIndex: 'startTime'
|
||
},
|
||
{
|
||
title: '最后更新时间',
|
||
align:"center",
|
||
dataIndex: 'endTime'
|
||
},
|
||
{
|
||
title: '标签类型',
|
||
align:"center",
|
||
dataIndex: 'tagNames'
|
||
},
|
||
],
|
||
tableScrollY: 0,
|
||
}
|
||
},
|
||
mounted() {
|
||
//初始化websocket
|
||
this.initWebSocket()
|
||
this.getselect()
|
||
this.calculateScrollY();
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
destroyed: function () { // 离开页面生命周期函数
|
||
var userId = store.getters.userInfo.id;
|
||
this.websock.send("close_"+userId);
|
||
this.websocketclose();
|
||
},
|
||
created () {
|
||
|
||
},
|
||
methods: {
|
||
calculateScrollY() {
|
||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
||
const container = this.$refs.tableContainer;
|
||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
||
this.tableScrollY = container.clientHeight - paginationHeight;
|
||
},
|
||
initWebSocket: function () {
|
||
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
||
var userId = store.getters.userInfo.id;
|
||
var url = window._CONFIG['domianURL'].replace("https://","ws://").replace("http://","ws://")+"/websocket/"+userId+"/data_cleaning";
|
||
this.websock = new WebSocket(url);
|
||
this.websock.onopen = this.websocketonopen;
|
||
this.websock.onerror = this.websocketonerror;
|
||
this.websock.onmessage = this.websocketonmessage;
|
||
this.websock.onclose = this.websocketclose;
|
||
},
|
||
websocketonopen: function () {
|
||
this.contentList.unshift("消息服务连接成功");
|
||
},
|
||
websocketonerror: function (e) {
|
||
this.contentList.unshift("消息服务连接失败"+JSON.stringify(e));
|
||
},
|
||
websocketonmessage: function (e) {
|
||
var data = eval("(" + e.data + ")");
|
||
if(data.content.length >0){
|
||
this.contentList.unshift(data.content);
|
||
}
|
||
if(data.currProgress != null){
|
||
this.percent = data.currProgress;
|
||
}
|
||
},
|
||
websocketclose: function (e) {
|
||
console.log("connection closed (" + e + ")");
|
||
},
|
||
dataAdd(){
|
||
getAction("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").then((res) => {
|
||
if (res.success) {
|
||
this.$message.success(res.message);
|
||
}
|
||
});
|
||
},
|
||
getselect(){
|
||
dataTypePageList(this.queryParam).then((res) => {
|
||
if (res.success) {
|
||
this.dataTypedataSources = res.result.rows||res.result;
|
||
this.datatypequeryParam.schemaName = res.result.rows[0].cnName
|
||
this.getTables();
|
||
} else {
|
||
this.$message.warning(res.message);
|
||
}
|
||
});
|
||
},
|
||
getTables(){
|
||
getAction("/dataManager/getDataManagerInfo",this.datatypequeryParam).then((res) => {
|
||
if (res.result) {
|
||
this.dataSource = res.result;
|
||
} else {
|
||
this.$message.warning(res.message);
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
/deep/ .ant-table-bordered .ant-table-header > table {
|
||
border: none !important;
|
||
}
|
||
.datacleanResult{
|
||
height:calc(100vh - 374px);
|
||
overflow-y:auto;
|
||
margin: 10px;
|
||
background: rgb(11,34,52);
|
||
}
|
||
.datacleanResult .progressbg{
|
||
margin: 10px;
|
||
height: 60px;
|
||
padding:20px 10px;
|
||
background: rgb(17,42,64);
|
||
|
||
}
|
||
.datacleanResult .title{
|
||
width: 14%;
|
||
font-size: 16px;
|
||
float: left;
|
||
text-align: right;
|
||
line-height: 20px;
|
||
color:#fff;
|
||
}
|
||
.datacleanResult .progress{
|
||
width: 86%;
|
||
float: left;
|
||
}
|
||
.datacleanResult .ant-progress-bg,
|
||
.datacleanResult .ant-progress-inner{
|
||
height: 16px !important;
|
||
}
|
||
.datacleanResult .ant-progress-bg{
|
||
background: linear-gradient(180deg, rgb(43,97,48),rgb(75,160,75),rgb(43,97,48));
|
||
}
|
||
|
||
/deep/ .datacleanResult .ant-progress-text{
|
||
color:#fff !important;
|
||
}
|
||
.datacleanResult .ant-list-items{
|
||
border-bottom:1px dashed rgb(35,72,100);
|
||
color:#fff;
|
||
}
|
||
|
||
</style> |