239 lines
6.9 KiB
Vue
239 lines
6.9 KiB
Vue
<template>
|
||
<a-row :gutter="30">
|
||
<a-col :md="12" :sm="1" >
|
||
<!-- 查询区域 -->
|
||
<div class="table-page-search-wrapper">
|
||
<a-select placeholder="选择数据类型" option-filter-prop="children" @change="getTables" style="width: 40%;">
|
||
<a-select-option v-for="d in dataTypedataSources" :key="d.id">
|
||
{{ d.cnName }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
<!-- table区域-begin -->
|
||
<div style="height:900px;overflow-y:auto;">
|
||
<a-table
|
||
ref="table"
|
||
size="middle"
|
||
bordered
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:dataSource="dataSource">
|
||
<!-- :locale="myLocale"-->
|
||
|
||
<!-- 字符串超长截取省略号显示-->
|
||
</a-table>
|
||
</div>
|
||
</a-col>
|
||
<a-col :md="12" :sm="2" >
|
||
<a-card :bordered="false">
|
||
|
||
<!-- 查询区域 -->
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline">
|
||
<a-row :gutter="30">
|
||
<a-col :md="6" :sm="10" >
|
||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||
<a-button @click="dataAdd" type="primary" v-has="'cont:btn'" icon="plus">发布到专题库</a-button>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
<a-progress :percent="percent" status="active" />
|
||
</div>
|
||
<!-- table区域-begin -->
|
||
<div style="height:900px;overflow-y:auto;">
|
||
<a-list bordered :data-source="contentList">
|
||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||
{{ item }}
|
||
</a-list-item>
|
||
</a-list>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import store from '@/store/'
|
||
import {getAction} from '@/api/manage'
|
||
import {
|
||
dataTypePageList,
|
||
dataTypeDeleteById } from '@/api/dataType'
|
||
export default {
|
||
name: "dataManage",
|
||
components: {
|
||
},
|
||
data () {
|
||
return {
|
||
description: '标准库',
|
||
contentList:[],
|
||
percent:0,
|
||
websock:{},
|
||
queryParam: {
|
||
pageNum :1,
|
||
pageSize:20
|
||
},
|
||
dataTypedataSources: [],
|
||
dataSource:[
|
||
{
|
||
tableName:"LA_DATA_TABLE_0001",
|
||
data1:"舰艇综合导航信息II",
|
||
data2:"2024-03-06 10:30:26",
|
||
data3:"2024-03-06 15:30:26",
|
||
data4:"侦察预警、指挥控制",
|
||
},
|
||
{
|
||
tableName:"LA_DATA_TABLE_0002",
|
||
data1:"动力报文",
|
||
data2:"2024-03-06 10:30:26",
|
||
data3:"2024-03-06 15:30:26",
|
||
data4:"指挥控制",
|
||
},
|
||
{
|
||
tableName:"LA_DATA_TABLE_0003",
|
||
data1:"电测试报文",
|
||
data2:"2024-03-06 10:30:26",
|
||
data3:"2024-03-06 15:30:26",
|
||
data4:"支援保障",
|
||
},
|
||
{
|
||
tableName:"LA_DATA_TABLE_0004",
|
||
data1:"损管测试报文",
|
||
data2:"2024-03-06 10:30:26",
|
||
data3:"2024-03-06 15:30:26",
|
||
data4:"支援保障",
|
||
},
|
||
{
|
||
tableName:"LA_DATA_TABLE_0005",
|
||
data1:"舰炮测试报文",
|
||
data2:"2024-03-06 10:30:26",
|
||
data3:"2024-03-06 15:30:26",
|
||
data4:"装备运行状态",
|
||
},
|
||
{
|
||
tableName:"LA_DATA_TABLE_0006",
|
||
data1:"反潜测试报文",
|
||
data2:"2024-03-06 10:30:26",
|
||
data3:"2024-03-06 15:30:26",
|
||
data4:"装备运行状态",
|
||
},
|
||
],
|
||
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: 'data1'
|
||
},
|
||
{
|
||
title: '开始时间',
|
||
align:"center",
|
||
dataIndex: 'data2'
|
||
},
|
||
{
|
||
title: '最后更新时间',
|
||
align:"center",
|
||
dataIndex: 'data3'
|
||
},
|
||
{
|
||
title: '标签类型',
|
||
align:"center",
|
||
dataIndex: 'data4'
|
||
},
|
||
],
|
||
}
|
||
},
|
||
mounted() {
|
||
//初始化websocket
|
||
this.initWebSocket()
|
||
this.getselect()
|
||
},
|
||
computed: {
|
||
},
|
||
destroyed: function () { // 离开页面生命周期函数
|
||
var userId = store.getters.userInfo.id;
|
||
this.websock.send("close_"+userId);
|
||
this.websocketclose();
|
||
},
|
||
created () {
|
||
|
||
},
|
||
methods: {
|
||
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_distribute";
|
||
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 + ")");
|
||
console.log(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("/dataSpecial/special").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;
|
||
} else {
|
||
this.$message.warning(res.message);
|
||
}
|
||
});
|
||
},
|
||
getTables(){
|
||
// datasyncgetTableInfo().then((res) => {
|
||
// if (res.result) {
|
||
// this.confirmLoading = false;
|
||
// this.dataSource = res.result;
|
||
// this.models = 2;
|
||
// } else {
|
||
// this.$message.warning(res.message);
|
||
// }
|
||
// });
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
@import '~@assets/less/common.less';
|
||
</style> |