IDCDatasync-vue/src/views/data/dataManage.vue

<template>
  <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>
    <!-- table区域-end -->
    
    <!-- 表单区域 -->
    
  </a-card>
</template>

<script>
  import store from '@/store/'
  import {getAction} from '@/api/manage'

  export default {
    name: "dataManage",
    components: {
    },
    data () {
      return {
        description: '数据发布',
        contentList:[],
        percent:0,
        websock:{},
      }
    },
    mounted() { 
          //初始化websocket
          this.initWebSocket()
    },
    computed: {
    },
    destroyed: function () { // 离开页面生命周期函数
          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 () {
        console.log("WebSocket连接成功");
      },
      websocketonerror: function (e) {
        console.log("WebSocket连接发生错误");
      },
      websocketonmessage: function (e) {
        var data = eval("(" + e.data + ")"); 
        console.log(data);
          //处理订阅信息
        this.contentList.push(data.content);
        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);
            }
        });
      },
      
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>