eta_front/src/views/dataEntry_manage/thirdBase/zzExchangeData.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">
                    <thead class="border-head">
                        <tr>
                            <td v-for="(val,index) in labelArr" :key="`${val}_${index}`">
                                {{ val }}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in list" :key="item.Rank">
                            <td v-for="(val,key) in labelArr" :key="key">{{item.Rank==999&&key=='Rank'?'合计':item[key]}}</td>
                        </tr>
                    </tbody>
                    <!-- <tfoot>
                        <tr>
                            <td v-for="(val,key) in labelArr" :key="key">
                                {{
                                    val === "名次"
                                        ? "合计"
                                        : val === "会员简称" || val === "指标ID"
                                        ? ""
                                        : handleValCount(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: "郑州交易所数据",
    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(key){
            let count=0
            this.list.forEach(item=>{
                count=count+Number(item[key])
            })
            return count
        },

        // 获取分类
        async getClassifyList(){
            const res=await dataInterence.getResearcherClassifyList({
                Exchange:'zhengzhou'
            })
            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.getZzExchangeData({
                Date: this.time,
                ClassifyName:this.type
            })
            setTimeout(() => {
                this.loading=false
            }, 200);
            
            if(res.Ret===200){
                this.list=res.Data&&res.Data[0].ItemList&&res.Data[0].ItemList[0].Item||[]
            }
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../css/exchangedata.scss";
thead{
    position: sticky;
    top: 0;
    left: 0;
    border-top: 1px solid #dcdfe6;
}
</style>