IDCDatasync-vue/src/views/data/dataManage.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: "dataManage",
    components: {
    },
    data () {
      return {
        description: '标准库',
        contentList:[],
        percent:0,
        websock:{},
        datatypequeryParam: {
          schemaName:"",
          sourceType:2
        },
        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_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;
                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>
  @import '~@assets/less/common.less';
  /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));
}

.datacleanResult .ant-progress-text{
  color:#fff;
}
.datacleanResult .ant-list-items{
  border-bottom:1px dashed rgb(35,72,100);
  color:#fff;
}
</style>