功能模块总结

wendongsheng1

已于 2022-11-08 02:45:37 修改

阅读量180

点赞数

文章标签： javascript echarts scss 前端框架 ajax

于 2022-11-08 02:43:13 首次发布

本文链接：https://blog.csdn.net/c_l_a_n_n_d/article/details/127743091

版权

筛选模块

通过接口将页面渲染出来之后，通过事件修改接口的负载，来实现页面内容的切换


//通过${}修改负载

 Cognition() {
   
            cognition(`r=0.6702673737596132&indextype=${
     this.data1}&datatype=${
     this.data2}&sdate=${
     this.data4}&edate=${
     this.data5}&pageindex=1&pagesize=20&order=${
     this.data3}&ordertype=desc`)
                .then((res) => {
   
                    console.log("cognition", res.data);
                    this.cognition = res.data.data;
                })
                .catch((err) => {
   
                    console.log(err);
                });
        },

//通过点击事件执行方法修改${}
<el-radio-button label="即将上映" @click.native="clickitem1a()"></el-radio-button>

//方法 修改${}的值
  clickitem1a() {
   
            this.data1 = 1
            this.data2 = 1
            this.data3 = "RenZhiIndex"
            this.Cognition()
        },

注意

需要修改的${}比较多，且需要切换修改的负载多，在思路不明确的时候思路容易混乱

效果图

在这里插入图片描述

相关代码

//view：
<template>
    <div class="box">
        <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="认知指数榜" name="first">
                    <div class="radio">
                        <el-radio-group v-model="radio1a" size="mini">
                            <el-radio-button label="即将上映" @click.native="clickitem1a()"></el-radio-button>
                            <el-radio-button label="已上映" @click.native="clickitem1b()"></el-radio-button>
                        </el-radio-group>
                        <el-radio-group v-model="radio1b" size="mini">
                            <el-radio-button label="前一天" @click.native="clickitem1c()"></el-radio-button>
                            <el-radio-button label="近7天" @click.native="clickitem1d()"></el-radio-button>
                            <el-radio-button label="近30天" @click.native="clickitem1e()"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <el-table :data="cognition[0]" style="width: 100%"
                        :default-sort="{ prop: 'InsertDate', order: 'descending' }">
                        <el-table-column prop="MovieName" label="影片名" sortable>
                        </el-table-column>
                        <el-table-column prop="ReleaseDate" label="上映时间" sortable>
                        </el-table-column>
                        <el-table-column prop="RenZhiIndex" label="认知指数" sortable>
                        </el-table-column>
                        <el-table-column prop="MovieGenre" label="影片类型" sortable>
                        </el-table-column>
                        <el-table-column prop="IrankMoM" label="排名变化" sortable>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="购票指数榜" name="second">
                    <div class="radio">
                        <el-radio-group v-model="radio2a" size="mini">
                            <el-radio-button label="即将上映" @click.native="second()"></el-radio-button>
                            <el-radio-button label="已上映" @click.native="clickitem2()"></el-radio-button>
                        </el-radio-group>
                        <el-radio-group v-model="radio2b" size="mini">
                            <el-radio-button label="前一天" @click.native="clickitem1c()"></el-radio-button>
                            <el-radio-button label="近7天" @click.native="clickitem1d()"></el-radio-button>
                            <el-radio-button label="近30天" @click.native="clickitem1e()"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <el-table :data="cognition[0]" style="width: 100%"
                        :default-sort="{ prop: 'InsertDate', order: 'descending' }">
                        <el-table-column prop="MovieName" label="影片名" sortable>
                        </el-table-column>
                        <el-table-column prop="ReleaseDate" label="上映时间" sortable>
                        </el-table-column>
                        <el-table-column prop="BuyTicketIndex" label="购票指数" sortable>
                        </el-table-column>
                        <el-table-column prop="MovieGenre" label="影片类型" sortable>
                        </el-table-column>
                        <el-table-column prop="IrankMoM" label="排名变化" sortable>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="口碑指数榜" name="third">
                    <div class="radio">
                        <el-radio-group v-model="radio1" size="mini">
                            <el-radio-button label="即将上映"></el-radio-button>
                        </el-radio-group>
                        <el-radio-group v-model="radio3" size="mini">
                            <el-radio-button label="前一天" @click.native="clickitem1c()"></el-radio-button>
                            <el-radio-button label="近7天" @click.native="clickitem1d()"></el-radio-button>
                            <el-radio-button label="近30天" @click.native="clickitem1e()"></el-radio-button>
                        </el-radio-group>
                    </div>
                    <el-table :data="cognition[0]" style="width: 100%"
                        :default-sort="{ prop: 'InsertDate', order: 'descending' }">
                        <el-table-column prop="MovieName" label="影片名" sortable>
                        </el-table-column>
                        <el-table-column prop="ReleaseDate" label="上映时间" sortable>
                        </el-table-column>
                        <el-table-column prop="RapIndex" label="口碑指数" sortable>
                        </el-table-column>
                        <el-table-column prop="MovieGenre" label="影片类型" sortable>
                        </el-table-column>
                        <el-table-column prop="IrankMoM" label="排名变化" sortable>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </div>
</template>
<style scoped lang="scss">
.box {
   
    width: 100%;

    .el-main {
   
        width: 100%;
        background-color: #fff;
        font-size: 13px;

        .radio {
   
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>
<script>
import {
   
    cognition,
} from "@/api/cognition.js";
export default {
   
    created() {
   
        this.Cognition()
    },
    data() {
   
        return {
   
            cognition: {
   },
            activeName: 'first',
            radio1a: '即将上映',
            radio1b: '前一天',
            radio2a: '即将上映',
            radio2b: '前一天',
            radio1: '即将上映',
            radio3: '前一天',
            data1: 1,
            data2: 1,
            data3: 'RenZhiIndex',
            data4: '2022-11-06',
            data5: '2022-11-06',
        };
    },
    methods: {
   
        Cognition() {
   
            cognition(`r=0.6702673737596132&indextype=${
     this.data1}&datatype=${
     this.data2}&sdate=${
     this.data4}&edate=${
     this.data5}&pageindex=1&pagesize=20&order=${
     this.data3}&ordertype=desc`)
                .then((res) => {