eta_front/src/views/dataEntry_manage/databaseComponents/updateDialog.vue

<template>
  <el-dialog :visible.sync="isUpdate" :close-on-click-modal="false" :modal-append-to-body="false" :append-to-body="true"
    @close="cancelHandle" custom-class="update-dialog" :show-close="false" center width="1230px" top="8vh" v-dialogDrag>
    <i class="el-icon-close close-icon" @click="cancelHandle"></i>
    <div class="dialog-header">
      <h3 class="title">当前更新情况:</h3>
      <ul class="total-source" v-if="totalUpdateData">
        <li class="source-item" v-for="item in updateOptons" :key="item.name">
          <span class="source-name">{{ item.name }}</span>
          <span><strong class="large_txt">{{ Number(totalUpdateData[item.update] + totalUpdateData[item.noupdate])||0
          }}</strong>个指标</span>
          <span>今日已更新<strong class="large_txt">{{
              totalUpdateData[item.update]||0
          }}</strong></span>
          <span class="deletesty">未更新<strong class="large_txt deletesty">{{
              totalUpdateData[item.noupdate]||0
          }}</strong></span>
        </li>
      </ul>
    </div>
    <div class="dialog-main">
      <div class="main-top">
        <el-form ref="diaForm" label-position="left" label-width="80px" inline :model="filterForm">
          <el-form-item label="更新状态" prop="state">
            <el-select v-model="filterForm.state" placeholder="更新状态" style="width: 250px">
              <el-option v-for="item in stateArr" :key="item.label" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据来源" prop="source">
            <el-select v-model="filterForm.source" placeholder="数据来源" style="width: 250px" clearable>
              <el-option v-for="item in sourceArr" :key="item.label" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="updateHandle">一键更新</el-button>
      </div>
      <div class="main-bottom">
        <h3 class="editsty" style="margin-bottom: 10px;">共筛选出{{ total }}个指标</h3>
        <el-table ref="updateTable" :data="tableData" height="450" @scroll.native="scrollHandle" border>
          <el-table-column v-for="item in tableColums" :key="item.label" :label="item.label" align="center">
            <template slot-scope="scope">
              <span v-if="item.key == 'IsUpdate'" :class="{ 'deletesty': scope.row[item.key] === 1 }">{{
                  scope.row[item.key]
                    === 1 ? '未更新' : '已更新'
              }}</span>
              <span v-else>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
          <div slot="empty" style="padding:40px 0 120px;">
            <tableNoData text="暂无指标" size="mini"/>
          </div>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { dataBaseInterface } from '@/api/api.js';
export default {
  name: '',
  props: {
    isUpdate: {
      type: Boolean,
    },
  },
  watch: {
    isUpdate(newval) {
      if (newval) {
        this.getTotal();
        this.getDataList();
        this.getTargetSource();
        this.$nextTick(() => {
          this.loadMoveHandler();
        })
      };
    },
    filterForm: {
      handler() {
        this.page_no = 1;
        this.$refs.updateTable.bodyWrapper.scrollTop = 0;
        this.getDataList();
      },
      deep: true
    }
  },
  data() {
    return {
      updateOptons: [
        {
          name: 'wind',
          update: 'WindUpdate',
          noupdate: 'WindNotUpdate',
        },
        {
          name: '隆众',
          update: 'LzUpdate',
          noupdate: 'LzNotUpdate',
        },
        {
          name: '计算指标',
          update: 'CalculateUpdate',
          noupdate: 'CalculateNotUpdate',
        },
        {
          name: '同花顺',
          update: 'ThsUpdate',
          noupdate: 'ThsNotUpdate',
        },
        {
          name: 'SMM',
          update: 'SmmUpdate',
          noupdate: 'SmmNotUpdate',
        },
        {
          name: '手工指标',
          update: 'ManualUpdate',
          noupdate: 'ManualNotUpdate',
        },
        {
          name: '彭博',
          update: 'PbUpdate',
          noupdate: 'PbNotUpdate',
        },
        {
          name: "彭博财务",
          update: 'PbFinanceUpdate',
          noupdate: 'PbFinanceNotUpdate',
        },
        {
          name: 'Mysteel',
          update: 'MysteelUpdate',
          noupdate: 'MysteelNotUpdate',
        },
        {
          name: '路透',
          update: 'LtUpdate',
          noupdate: 'LtNotUpdate',
        },
        {
          name: "郑商所",
          update: 'ZzUpdate',
          noupdate: 'ZzNotUpdate',
        },
        {
          name: "大商所",
          update: 'DlUpdate',
          noupdate: 'DlNotUpdate',
        },
        {
          name: "上期所",
          update: 'ShUpdate',
          noupdate: 'ShNotUpdate',
        },
        {
          name: "中金所",
          update: 'CffexUpdate',
          noupdate: 'CffexNotUpdate',
        },
        {
          name: "上期能源",
          update: 'ShfeUpdate',
          noupdate: 'ShfeNotUpdate',
        },
        {
          name: "欧洲天然气",
          update: 'GieUpdate',
          noupdate: 'GieNotUpdate',
        },
        {
          name: "煤炭市场网",
          update: 'CoalUpdate',
          noupdate: 'CoalNotUpdate',
        },
        {
          name: "our world in data",
          update: 'GoogleTravelUpdate',
          noupdate: 'GoogleTravelNotUpdate',
        },
        {
          name: "EIA STEO报告",
          update: 'EiaSteoUpdate',
          noupdate: 'EiaSteoNotUpdate',
        },
        {
          name:"UN",
          update:'UNUpdate',
          noupdate:'UNNotUpdate'
        },{
          name:"卓创数据（红桃3）",
          update:'SciUpdate',
          noupdate:'SciNotUpdate'
        },
        {
            name:"百川盈孚",
            update:'BaiinfoUpdate',
            noupdate:'BaiinfoNotUpdate'
        },
        {
            name:"国家统计局",
            update:'NationalStatisticsUpdate',
            noupdate:'NationalStatisticsNotUpdate'
        },
        {
            name:"富宝数据",
            update:'FubaoUpdate',
            noupdate:'FubaoNotUpdate'
        }
      ],
      totalUpdateData: null,
      total: 0,
      filterForm: {
        state: 1,
        source: ''
      },
      stateArr: [
        {
          label: '未更新',
          value: 1,
        },
        {
          label: '已更新',
          value: 2,
        },
      ], //状态options
      sourceArr: [
        {
          label: 'wind',
          value: 2
        },
        {
          label: '同花顺',
          value: 1
        },
        {
          label: '彭博',
          value: 3
        },
        {
          label: '彭博财务',
          value: 28
        },
        {
          label: '手工指标',
          value: 9
        },
        {
          label: '隆众指标',
          value: 10
        },
        {
          label: 'SMM',
          value: 11
        },
        {
          label: 'Mysteel',
          value: 15
        },
        {
          label: '路透',
          value: 25
        },
        {
          label: '煤炭市场网',
          value: 26
        },
        {
          label: '计算指标',
          value: 99
        },
        {
          label: 'our world in data',
          value: 29
        },
        {
          label: "EIA STEO报告",
          value: '36',
        },
        {
          label:'UN',
          value:38
        },
        {
          label:'卓创数据（红桃3）',
          value:41
        },
        {
            label:'百川盈孚',
            value:57
        },
        {
            label:'国家统计局',
            value:60
        },
        {
            label:'富宝数据',
            value:71
        }
      ],
      tableData: [],//表格数据
      page_no: 1,
      tableColums: [
        {
          label: '指标名称',
          key: 'EdbName'
        },
        {
          label: '最新日期',
          key: 'LatestDate'
        },
        {
          label: '数据来源',
          key: 'SourceName'
        },
        {
          label: '更新状态',
          key: 'IsUpdate'
        },
        {
          label: '更新时间',
          key: 'ModifyTime'
        },
      ],//表格列
    };
  },
  methods: {
    /* 更新统计 */
    getTotal() {
      dataBaseInterface.updateStatistical()
        .then(res => {
          if (res.Ret !== 200) return;
          this.totalUpdateData = res.Data;
        })
    },

    /* 获取表格数据 */
    getDataList() {
      dataBaseInterface.updateData({
        Status: this.filterForm.state,
        Source: this.filterForm.source,
        PageSize: 20,
        CurrentIndex: this.page_no
      }).then(res => {
        if (res.Ret !== 200) return;

        res.Data.List = res.Data.List || [];

        this.total = res.Data.Total;
        this.haveMore = this.page_no < res.Data.Paging.Pages ? true : false;
        this.tableData = this.page_no === 1 ? res.Data.List : [...this.tableData, ...res.Data.List];
      })
    },

    async updateHandle() {
      const { Data } = await dataBaseInterface.updateCheck();
      Data === 2
        ? await this.$confirm('本次更新将持续30分钟左右，是否确认更新？', '提示', {
          type: 'warning'
        }).then(() => {
          dataBaseInterface.edbUpdate();
        }).catch(() => {
        })
        : await this.$confirm('当前正在更新中，请勿重复点击', '提示', {
          type: 'warning',
          showCancelButton: false,
        })
    },

    init() {
      this.page_no = 1;
      this.filterForm.state = 1;
    },

    /* 滚动监听 */
    loadMoveHandler() {
      let dom = this.$refs.updateTable.bodyWrapper;
      dom.addEventListener("scroll", _.throttle(() => {
        const scroll = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scroll <= 1 && this.haveMore) {
          this.page_no++;
          this.getDataList();
        }
      }, 300));
    },

    cancelHandle() {
      this.init();
      this.$emit('cancel');
    },
    getTargetSource(){
        this.sourceArr = []
        dataBaseInterface.getDataSource({IsBase:1}).then(res=>{
            if(res.Ret!==200) return
            if(res.Data){
                this.sourceArr = res.Data.map(i=>{
                    return {
                        label:i.SourceName,
                        value:i.EdbSourceId
                    }
                })
            }
        })
    }
  },
  created() { },
  mounted() {
      //this.getTargetSource()
  },
};
</script>
<style lang="scss">
.update-dialog {
  border-radius: 10px;
  $strong: 18px;

  .el-dialog__header {
    background-color: #fff;
    /* padding: 0; */
  }

  .el-dialog__body {
    padding: 0 25px 30px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }

  .el-table th.is-leaf {
    background-color: #409EFF !important;
    color: #fff;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .close-icon {
    font-size: 24px;
    position: absolute;
    right: 30px;
    top: 28px;
    cursor: pointer;
  }

  .dialog-header {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid #dcdfe6;

    .title {
      width: 120px;
      margin-right: 10px;
    }

    .total-source {
      display: flex;
      width: 90%;
      flex-wrap: wrap;

      .large_txt {
        font-size: $strong;
        color: #3385ff;

        &.deletesty {
          color: #f00;
        }
      }

      .source-item {
        min-width: 300px;
        display: flex;
        margin-right: 30px;
        margin-bottom: 10px;

        &:nth-child(2n) {
          margin-right: 0;
        }

        span {
          margin-right: 5px;
          min-width: 120px;
        }

        .source-name {
          // width: 80px;
          font-weight: 600;
        }
      }
    }
  }

  .dialog-main {
    padding: 20px 0 30px;

    .main-top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
</style>