IDCDatasync-vue/src/views/data/dataCleansing.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 () { // 离开页面生命周期函数
      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_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 + ")"); 
        console.log(data);
          //处理订阅信息
        if(data.content.length >0){
          var char = "当前同步百分比：";
          let index = data.content.indexOf(char);
          if (index >= 0) {
            let result = data.content.substring(index + char.length,data.content.length - 1); // 获取 "V" 及其后所有字符
            this.percent = parseInt(result) ;
          }
          this.contentList.unshift(data.content);
        }
      },
      websocketclose: function (e) {
        console.log("connection closed (" + e + ")");
      },
      dataAdd(){
        getAction("/rawToStandard/syncMultipleSchemas?dataTaskId=123").then((res) => {
            if (res.success) {
                this.$message.success(res.message);
            }
        });
      },
      
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>