IDCDatasync-vue/src/views/data/dataManage.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>