IDCDatasync-vue/src/views/data/dataCleansing.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: #e6e9f1;padding:10px;">
        <a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaMass" @change="getTables" style="width: 40%;">
          <a-select-option v-for="d in dataTypedataSources" :key="d.cnName">
            {{ d.cnName }}
          </a-select-option>
        </a-select>
      </div>
      <!-- table区域-begin -->
      <div ref="tableContainer" style="height:calc(100vh - 347px);background: #e6e9f1;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: #e6e9f1 !important;">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" style="padding:10px;">
          <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: "dataCleansing",
  components: {
  },
  data() {
    return {
      description: '原始库',
      contentList: [],
      percent: 0,
      websock: {},
      datatypequeryParam: {
        schemaMass: "",
        sourceType: 1
      },
      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_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 + ")");
      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("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").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.schemaMass = 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>
/deep/ .ant-table-bordered .ant-table-header>table {
  border: none !important;
}

.datacleanResult {
  height: calc(100vh - 374px);
  overflow-y: auto;
  margin: 10px;
  background: #F1F4FA;
}

.datacleanResult .progressbg {
  margin: 10px;
  height: 60px;
  padding: 20px 10px;
  background: #D6DAE2;

}

.datacleanResult .title {
  width: 14%;
  font-size: 16px;
  float: left;
  text-align: right;
  line-height: 20px;
  color: #363F56;
}

.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));
}

/deep/ .datacleanResult .ant-progress-text {
  color: #fff !important;
}

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