eta_front/src/views/dataEntry_manage/thirdBase/chinaFinancialFutures.vue

<template>
  <div class="exchangedata-wrap">
    <span
        class="slide-btn-icon"
        :class="{'slide-left':isLeftWrapShow,'slide-right':!isLeftWrapShow}"
        @click="isLeftWrapShow = !isLeftWrapShow"
    >
        <i :class="{'el-icon-d-arrow-left':isLeftWrapShow,'el-icon-d-arrow-right':!isLeftWrapShow}"></i>
    </span>
        <div class="left-wrap box" v-show="isLeftWrapShow">
            <el-date-picker 
                style="width:100%" 
                v-model="time" 
                type="date" 
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                @change="handleTimeChange"
            >
            </el-date-picker>
            <ul>
                <li 
                    :class="type===item&&'type-active'" 
                    v-for="item in typeList" 
                    :key="item"
                    @click="handleChangeType(item)"
                >{{item}}</li>
            </ul>
        </div>
        <div class="right-wrap box" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div class="content" v-if="list.length>0">
              <table width="auto" border="0" v-for="item in list" :key="item.Code">
                  <thead>
                      <tr>
                        <td :colspan="Object.keys(labelArr).length" style="background:#ECF5FF">合约代码：{{item.Code}}</td>
                      </tr>
                      <tr>
                          <td colspan="5" style="background:#ECF5FF">成交量排名</td>
                          <td colspan="4" style="background:#ECF5FF">持买单量排名</td>
                          <td colspan="4" style="background:#ECF5FF">持卖单量排名</td>
                      </tr>
                      <tr>
                          <td v-for="(val,index) in labelArr" :key="`${item.Code}_${index}`">
                              {{ val }}
                          </td>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="item2 in item.Item" :key="item2.Rank">
                          <td v-for="(val, key) in labelArr" :key="`${item.Code}_${item2.Rank}_${key}`">
                              {{item2.Rank==999&&key=='Rank'?'合计':item2[key]}}
                          </td>
                      </tr>
                  </tbody>
                  <!-- <tfoot>
                      <tr>
                          <td v-for="(val,key) in labelArr" :key="val">
                                {{
                                    val === "名次"
                                        ? "合计"
                                        : val === "会员简称" || val === "指标ID"
                                        ? ""
                                        : handleValCount(item.Item,key)
                                }}
                          </td>
                      </tr>
                  </tfoot> -->
              </table>
            </div>
            <div class="empty-wrap" v-else>
                <tableNoData text="没有此日期的数据，请重新选择查询日期"/>
            </div>
        </div>
    </div>
</template>

<script>
// 中国金融期货交易所
import { dataInterence } from "@/api/api.js";
import http from "@/api/http.js";
export default {
    name:"chinaFinancialFutures",
    data() {
        return {
            isLeftWrapShow:true,
            labelArr: {
                Rank: "名次",
                DealShortName: "会员简称",
                DealCode: "指标ID",
                DealValue: "成交量（手）",
                DealChange: "增减量",
                BuyShortName: "会员简称",
                BuyCode: "指标ID",
                BuyValue: "持买仓量",
                BuyChange: "增减量",
                SoldShortName: "会员简称",
                SoldCode: "指标ID",
                SoldValue: "持卖仓量",
                SoldChange: "增减量",
            },
            time: '',
            type:'',
            typeList:[],
            list:[],
            loading:false
        };
    },
    created () {
        // this.getLastWorkDay()
        this.getClassifyList()
    },
    methods: {
        // 获取上个工作日
        getLastWorkDay(){
            const today=new Date()
            let lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000),false).replace(/\./g,'-') //默认昨天
            if(today.getDay()===0){//周日
                lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000 * 2),false).replace(/\./g,'-')
            }else if(today.getDay()===6){//周六
                lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000 ),false).replace(/\./g,'-')
            }else if(today.getDay()===1){//周一
                lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000*3 ),false).replace(/\./g,'-')
            }
            this.time=lastWorkDay
        },

        handleChangeType(e){
            this.type=e
            this.getData()
        },

        // 时间切换
        handleTimeChange(){
            this.getData();
        },

        handleValCount(list,key){
          let count=0
          list&&list.forEach(item=>{
            count=count+Number(item[key])
          })
          return count
        },

        // 获取分类
        async getClassifyList(){
            const res=await dataInterence.getResearcherClassifyList({
                Exchange:'cffex'
            })
            if(res.Ret===200){
                this.typeList=res.Data&&res.Data[0]||[]
                this.time=res.Data&&res.Data[1][0]||''
                this.type=this.typeList[0]
                this.getData()
            }
        },

        async getData(){
            $('.content').animate({scrollTop:0},0)
            this.loading=true
            const res=await dataInterence.getChinaFuturesData({
                Date: this.time,
                ClassifyName:this.type
            })
            setTimeout(() => {
                this.loading=false
            }, 200);
            
            if(res.Ret===200){
                this.list=res.Data&&res.Data[0].ItemList||[]
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../css/exchangedata.scss";
</style>