|
|
@@ -0,0 +1,391 @@
|
|
|
+<template>
|
|
|
+ <div id="YS-data-container">
|
|
|
+ <div class="search-zone">
|
|
|
+ <div class="search-row">
|
|
|
+ <el-cascader @change="searchList" :options="classifyList" v-model="searchParams.classifyId" clearable
|
|
|
+ placeholder="请选择分类" class="search-item"
|
|
|
+ :props="{
|
|
|
+ value:'id',
|
|
|
+ label:'label',
|
|
|
+ children:'children',
|
|
|
+ emitPath:false
|
|
|
+ }"></el-cascader>
|
|
|
+ <el-select v-model="searchParams.frequency" class="search-item" placeholder="请选择频度" clearable @change="searchList">
|
|
|
+ <el-option :label="item" :value="item" v-for="item in frequencyList" :key="item"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="searchParams.dataStatus" class="search-item" placeholder="请选择指标数据状态" clearable @change="searchList">
|
|
|
+ <el-option :label="item.label" :value="item.id" v-for="item in dataStatusList" :key="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="edbCheckList" multiple filterable remote clearable collapse-tags class="search-item edb-filter"
|
|
|
+ reserve-keyword placeholder="指标ID/指标名称" :remote-method="remoteMethod" :loading="edbDataLoading"
|
|
|
+ @clear="searchList" @remove-tag="removeEdbFilterTag" ref="edbFilterRef" >
|
|
|
+ <el-option v-for="item in edbFilterDataList" :key="item.id"
|
|
|
+ :label="item.label" :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-checkbox label="列表全选" v-model="isCheckAll" :indeterminate="isCheckIndeterminate" style="margin: 0 30px 10px 0;"
|
|
|
+ @change="listCheckAllChange"></el-checkbox>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" style="margin: 0 0 10px 0;" @click="addToEdbBase">添加到指标库</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="table-zone">
|
|
|
+ <el-table :data="tableData" border @sort-change="sortChange" @selection-change="selectionChange"
|
|
|
+ ref="edbDataRef" @select="selectHandle" @select-all="selectAllHandle">
|
|
|
+ <el-table-column type="selection" min-width="50" align="center"></el-table-column>
|
|
|
+ <el-table-column label="指标ID" align="center" prop="edbId">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.edbId}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="指标名称" align="center" show-overflow-tooltip prop="edbName">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.edbName}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="频度" align="center" prop="frequency" width="80">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.frequency}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="单位" align="center" prop="unit" show-overflow-tooltip >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.unit}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="指标开始时间" align="center" prop="edbStartDate" show-overflow-tooltip
|
|
|
+ sortable="custom">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.edbStartDate}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="指标最新时间" align="center" prop="ebdNewestDate" show-overflow-tooltip
|
|
|
+ sortable="custom" >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.ebdNewestDate}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="更新时间" align="center" prop="updateDate" sortable="custom"
|
|
|
+ show-overflow-tooltip>
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.updateDate}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="预计发布时间" align="center" prop="publishTimePre" sortable="custom"
|
|
|
+ show-overflow-tooltip >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.publishTimePre}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="数据来源" align="center" prop="source" >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.source}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="指标数据状态" align="center" prop="dataStatus"
|
|
|
+ show-overflow-tooltip >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.dataStatus}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="分类" align="center" prop="classify" show-overflow-tooltip >
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ {{row.classify}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <m-page class="table-page" v-show="total"
|
|
|
+ :total="total" :pageSize="searchParams.PageSize"
|
|
|
+ :page_no="searchParams.CurrentIndex"
|
|
|
+ @handleCurrentChange="pageNumberChange"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import mPage from '@/components/mPage.vue'
|
|
|
+import { dataInterence } from "@/api/api.js";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name:'ysTargetBase',
|
|
|
+ components:{mPage},
|
|
|
+ data() {
|
|
|
+ this.flowToData=[{id:'M',label:'Import'},{id:'X',label:'Export'}]
|
|
|
+ return {
|
|
|
+ searchParams:{
|
|
|
+ classifyId:'',
|
|
|
+ frequency:'',
|
|
|
+ dataStatus:'',
|
|
|
+ edbMessage:'',
|
|
|
+ CurrentIndex:1,
|
|
|
+ PageSize:5,
|
|
|
+ SortParam:'',
|
|
|
+ SortType:'',
|
|
|
+ checkAll:0
|
|
|
+ },
|
|
|
+ isCheckAll:false,
|
|
|
+ isCheckIndeterminate:false,
|
|
|
+ // 标志列表当前是全选状态还是不是全选状态和 isCheckAll不一样
|
|
|
+ checkAllStatus:false,
|
|
|
+ classifyList:[],
|
|
|
+ frequencyList: [],
|
|
|
+ dataStatusList:[],
|
|
|
+ edbFilterDataList:[],
|
|
|
+ // 选择的指标名称筛选项
|
|
|
+ edbCheckList:[],
|
|
|
+ edbDataLoading:false,
|
|
|
+ // edb的过滤选项是否有变化，用于失焦是判断是否需要请求
|
|
|
+ hasEdbFilterChange:false,
|
|
|
+ isSortList:false,
|
|
|
+ constData:[
|
|
|
+ {id:'4',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'41',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'42',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'45',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'47',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'49',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'46',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'488',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'477',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'},
|
|
|
+ {id:'444',edbId:'a10123431',edbName:'中国金属硅分省份月度开工率：河南',frequency:'日度',unit:'%',edbStartDate:'2008-01-01',ebdNewestDate:'2023-12-06',
|
|
|
+ updateDate:'2023-12-06 16:17:09',publishTimePre:'16:17:09',source:'有色',dataStatus:'正常更新',classify:'宏观/房地产/国内'}
|
|
|
+ ],
|
|
|
+ tableData:[],
|
|
|
+ tableDataIds:[],
|
|
|
+ total:10,
|
|
|
+ dataLoading:false,
|
|
|
+ tableDataCheckedList:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ edbCheckList(value){
|
|
|
+ console.log(value);
|
|
|
+ if(value){
|
|
|
+ this.searchParams.edbMessage = value.join(',')
|
|
|
+ }else{
|
|
|
+ this.searchParams.edbMessage = ''
|
|
|
+ }
|
|
|
+ this.hasEdbFilterChange=true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ this.getYsClassifyList()
|
|
|
+ this.getYsDataStatusList()
|
|
|
+ this.getYsFrequencyList()
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ // el-select 的@blur绑定事件不生效代替方法
|
|
|
+ this.$refs.edbFilterRef.$refs.input.blur=()=>{
|
|
|
+ if(this.hasEdbFilterChange){
|
|
|
+ console.log('失焦');
|
|
|
+ this.searchList()
|
|
|
+ this.hasEdbFilterChange=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取有色数据库数据列表
|
|
|
+ getList(){
|
|
|
+ console.log(this.searchParams);
|
|
|
+ // TODO: 列表接口对接
|
|
|
+ if(this.isSortList){
|
|
|
+ this.isSortList=false
|
|
|
+ }else {
|
|
|
+ if(this.searchParams.classifyId || this.searchParams.frequency || this.searchParams.dataStatus || this.searchParams.edbMessage){
|
|
|
+ this.isCheckAll=true
|
|
|
+ this.checkAllStatus=true
|
|
|
+ this.isCheckIndeterminate=false
|
|
|
+ }else{
|
|
|
+ this.isCheckAll=false
|
|
|
+ this.checkAllStatus=false
|
|
|
+ this.isCheckIndeterminate=false
|
|
|
+ }
|
|
|
+ this.listCheckAllChange(this.isCheckAll)
|
|
|
+ }
|
|
|
+ this.tableData = this.constData.slice((this.searchParams.CurrentIndex-1)*5,this.searchParams.CurrentIndex*5)
|
|
|
+ this.tableDataIds = this.constData.map(it => it.id)
|
|
|
+ },
|
|
|
+ // 获取有色数据库分类列表
|
|
|
+ getYsClassifyList(){
|
|
|
+ //TODO: 获取分类列表
|
|
|
+ this.classifyList=[{id:1,label:'宏观',children:[{id:11,label:'房地产',children:[{id:111,label:'国内'},{id:112,label:'国外'}]}]}]
|
|
|
+ },
|
|
|
+ // 获取有色数据库数据状态列表
|
|
|
+ getYsDataStatusList(){
|
|
|
+ //TODO: 获取状态列表
|
|
|
+ this.dataStatusList=[{id:1,label:'正常更新'},{id:2,label:'已停更'},{id:3,label:'不定期延迟'}]
|
|
|
+ },
|
|
|
+ getYsFrequencyList(){
|
|
|
+ //TODO: 获取频度列表
|
|
|
+ this.frequencyList=["日度", "周度", "旬度", "月度", "季度", "半年度", "年度"]
|
|
|
+ },
|
|
|
+ // 指标名称的远程搜索方法
|
|
|
+ remoteMethod(text){
|
|
|
+ let query = text.trim()
|
|
|
+ if(query){
|
|
|
+ // TODO: 指标搜索接口
|
|
|
+ this.edbDataLoading=true
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.edbFilterDataList=[{id:1,label:'中国制造业PMI'},{id:11,label:'中国制造业宏观'},{id:111,label:'中国制造业111'},{id:1111,label:'中国制造业222'},{id:11111,label:'中国制造业333'}]
|
|
|
+ this.edbDataLoading=false
|
|
|
+ },1000)
|
|
|
+ }else{
|
|
|
+ this.edbFilterDataList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ removeEdbFilterTag: _.throttle(function() {
|
|
|
+ console.log('删除标签');
|
|
|
+ this.searchList()
|
|
|
+ },1000),
|
|
|
+ searchList(){
|
|
|
+ this.searchParams.CurrentIndex=1
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ pageNumberChange(page_no){
|
|
|
+ this.searchParams.CurrentIndex=page_no
|
|
|
+ this.getList('adjustSelection')
|
|
|
+ },
|
|
|
+ sortChange({prop,order}){
|
|
|
+ this.searchParams.SortType = order==='ascending'?'asc':'desc'
|
|
|
+ this.searchParams.SortParam = prop
|
|
|
+ this.isSortList=true
|
|
|
+ this.searchList()
|
|
|
+ },
|
|
|
+ selectionChange(val){
|
|
|
+ // selectAllHandle的触发在selectionChange后面，将selectionChange的逻辑延迟一下
|
|
|
+ setTimeout(()=>{
|
|
|
+ // 去重
|
|
|
+ let duplicateArr = Array.from(new Set(this.tableDataCheckedList))
|
|
|
+
|
|
|
+ console.log(val,'selectionChange',this.tableDataCheckedList);
|
|
|
+ console.log(duplicateArr.length,this.total,this.checkAllStatus);
|
|
|
+ if((duplicateArr.length == this.total && (!this.checkAllStatus))
|
|
|
+ || (duplicateArr.length == 0 && this.checkAllStatus)){
|
|
|
+ this.isCheckAll = true
|
|
|
+ this.isCheckIndeterminate=false
|
|
|
+ }else if((duplicateArr.length == 0 && (!this.checkAllStatus))
|
|
|
+ || (duplicateArr.length == this.total && this.checkAllStatus)){
|
|
|
+ this.isCheckAll = false
|
|
|
+ this.isCheckIndeterminate=false
|
|
|
+ }else{
|
|
|
+ this.isCheckAll = false
|
|
|
+ this.isCheckIndeterminate=true
|
|
|
+ }
|
|
|
+ },1)
|
|
|
+
|
|
|
+ },
|
|
|
+ selectHandle(selection,row){
|
|
|
+ console.log(selection,row,'row,selectHandle');
|
|
|
+ let check = false; // 从tableDataCheckedList 添加还是删除
|
|
|
+ if(selection.some(it => it.id == row.id)){
|
|
|
+ // 勾选
|
|
|
+ if(this.checkAllStatus){
|
|
|
+ check=false
|
|
|
+ }else{
|
|
|
+ check=true
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ // 取消勾选
|
|
|
+ if(this.checkAllStatus){
|
|
|
+ check=true
|
|
|
+ }else{
|
|
|
+ check=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(check){
|
|
|
+ this.tableDataCheckedList.push(row.id)
|
|
|
+ }else{
|
|
|
+ this.tableDataCheckedList=this.tableDataCheckedList.filter(it => it!=row.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectAllHandle(selection){
|
|
|
+ console.log(selection,'selectAllHandle');
|
|
|
+ let check = false; // 从tableDataCheckedList 添加还是删除
|
|
|
+ if(selection && selection.length>0){
|
|
|
+ // 全选
|
|
|
+ if(this.checkAllStatus){
|
|
|
+ check=false
|
|
|
+ }else{
|
|
|
+ check=true
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ // 全不选
|
|
|
+ if(this.checkAllStatus){
|
|
|
+ check=true
|
|
|
+ }else{
|
|
|
+ check=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(this.tableDataIds,'ids',this.tableDataCheckedList);
|
|
|
+ if(check){
|
|
|
+ this.tableDataCheckedList = [...this.tableDataCheckedList,...this.tableDataIds]
|
|
|
+ }else{
|
|
|
+ this.tableDataCheckedList = this.tableDataCheckedList.filter(it => !this.tableDataIds.includes(it))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ listCheckAllChange(value){
|
|
|
+ this.tableDataCheckedList=[]
|
|
|
+ this.checkAllStatus=value
|
|
|
+ if(value){
|
|
|
+ // 全选
|
|
|
+ this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
|
|
|
+ this.$refs.edbDataRef && this.$refs.edbDataRef.toggleAllSelection()
|
|
|
+ }else{
|
|
|
+ //全不选
|
|
|
+ this.$refs.edbDataRef && this.$refs.edbDataRef.clearSelection()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加指标库
|
|
|
+ addToEdbBase(){
|
|
|
+ console.log(this.searchParams,this.checkAllStatus,this.tableDataCheckedList,'请求参数');
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ #YS-data-container{
|
|
|
+ // min-width: 1360px;
|
|
|
+ background-color: white;
|
|
|
+ min-height: calc(100vh - 120px);
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .search-zone{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 20px 10px;
|
|
|
+ .search-row{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .search-item{
|
|
|
+ width: 240px;
|
|
|
+ margin: 0 30px 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .table-zone{
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .table-page{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
hbchen