功能模块总结

筛选模块

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

//通过${}修改负载

 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) => {
                    console.log("cognition", res.data);
                    this.cognition = res.data.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        handleClick(tab, event) {
            console.log(tab, event);
            if (tab.index == 0) {
                this.first()
            } else if (tab.index == 1) {
                this.second()
            } else {
                this.third()
            }
        },
        first() {
            this.data1 = 1
            this.data2 = 1
            this.data4 = '2022-11-06'
            this.data5 = '2022-11-06'
            this.data3 = "RenZhiIndex"
            this.Cognition()
        },
        second() {
            this.data1 = 2
            this.data2 = 1
            this.data3 = "BuyTicketIndex"
            this.data4 = '2022-11-06'
            this.data5 = '2022-11-06'
            this.Cognition()
        },
        third() {
            this.data1 = 3
            this.data2 = 2
            this.data4 = '2022-11-06'
            this.data5 = '2022-11-06'
            this.data3 = "RapIndex"
            this.Cognition()
        },
        clickitem1a() {
            this.data1 = 1
            this.data2 = 1
            this.data3 = "RenZhiIndex"
            this.Cognition()
        },
        clickitem1b() {
            this.data1 = 1
            this.data2 = 2
            this.data3 = "RenZhiIndex"
            this.Cognition()
        },
        clickitem1c() {
            this.data4 = '2022-11-06'
            this.data5 = '2022-11-06'
            this.Cognition()

        },
        clickitem1d() {
            this.data4 = '2022-10-31'
            this.data5 = '2022-11-06'
            this.Cognition()

        },
        clickitem1e() {
            this.data4 = '2022-10-08'
            this.data5 = '2022-11-06'
            this.Cognition()

        },
        clickitem2() {
            this.data1 = 2
            this.data2 = 2
            this.data3 = "RenZhiIndex"
            this.Cognition()
        }
    }
};


//api:
import request from '@/utils/request.js'
export function cognition(data) {
    return request.post("/enlib-api/api/marketing/get_marketing_ranking_movielist.do",data)
}


//request.js:
//对axios进行集中管理（对axios二次封装）
import axios from "axios";
//导入加载提示
import Toast from '@/plugin/Toast/index.js'
import Vue from "vue";
//Vue挂载Toast 执行install方法
Vue.use(Toast);

//设置默认：请求域名，超时时间
const request = axios.create({
    baseURL: 'http://localhost:8080', //默认请求域名
    timeOut: 5000, //请求超时 请求5秒还没请求成功，就返回失败
})
//拦截请求头，添加加载提示（ajax提示）
request.interceptors.request.use(function (config) {
    if (config.loading) {
        Toast.show(config.loading, 5000) //显示加载提示
    }
    //添加请求头（所有网络请求，都会添加请求头）
    config.headers.Authorization = "Bearer " + localStorage.getItem("token");
    return config;
})
//拦截相应头，关闭加载提示（ajax结束）
request.interceptors.response.use(function (res) {
    Toast.hide();
    return res;
}, function (err) {
    Toast.hide();
    return err;
})
export default request;
//exprot导出 default默认 timeOut超时 create创建
//interceptors拦截，request请求，response响应，config配置
//base继承 URL地址 


//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  //本地服务器配置
  devServer: {
    //代理
    proxy: {
      "/api": {
        //代理目标地址
        target: "https://ys.endata.cn/",
      },
    }
  }
})
</script>

页面渲染（eachar）

在渲染这个页面时因为部分接口请求不出,所以使用了mock.js
对eachar饼形图了解不够全面 故饼形图 并未完成

渲染效果

代码

//view
<template>
  <div class="box">
    <el-container>
      <el-header class="header">
        <div class="left">
          <span>日期：</span>
          <el-date-picker size="mini" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          &ensp;<span>影片制式：</span>
          <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
            <el-option v-for="item in table3.table0" :key="item.value" :label="item.MovieFormat" :value="item.value">
            </el-option>
          </el-select>
          &ensp;<span>影片属性：</span>
          <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
            <el-option v-for="item in table2.table0" :key="item.value" :label="item.MovieProperty" :value="item.value">
            </el-option>
          </el-select>
          &ensp;<span>影片主类型：</span>
          <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
            <el-option v-for="item in table4" :key="item.value" :label="item.GenreName" :value="item.value">
            </el-option>
          </el-select>
          &ensp;<span>地区：</span>
          <el-select style="width: 100px" v-model="value" size="mini" filterable placeholder="请选择">
            <el-option v-for="item in table5.table0" :key="item.value" :label="item.CityLevelName" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="right">
          <span> <input type="radio" />服务费 </span>
          <el-button size="mini">查询</el-button>
        </div>
      </el-header>
      <el-tabs class="main" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="票房" name="first">
          <div class="box1">
            <div>
              <PfdpViewVue :dataa="boxOffice" :data1="insertDate"></PfdpViewVue>
            </div>
          </div>
          <div class="box2">

            <div class="box2-1">
              <p>票房详情</p>
              <PfdpViewVue1 :dataa="boxOffice1" :data1="movieProperty"></PfdpViewVue1>
            </div>
            <div class="box2-2">
              <p>制式分布</p>
              <PfdpViewVue1 :dataa="boxOffice2" :data1="movieFormat"></PfdpViewVue1>
            </div>
            <div class="box2-3">
              <p>地域分布</p>

              <PfdpViewVue1 :dataa="boxOffice3" :data1="cityLevelName"></PfdpViewVue1>

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="场次" name="second">
          <div class="box1">
            <div>
              <PfdpViewVue :dataa="audienceCount" :data1="insertDate"></PfdpViewVue>
            </div>
          </div>
          <div class="box2">

            <div class="box2-1">
              <p>票房详情</p>
              <PfdpViewVue1 :dataa="audienceCount1" :data1="movieProperty"></PfdpViewVue1>
            </div>
            <div class="box2-2">
              <p>制式分布</p>
              <PfdpViewVue1 :dataa="audienceCount2" :data1="movieFormat"></PfdpViewVue1>

            </div>
            <div class="box2-3">
              <p>地域分布</p>
              <PfdpViewVue1 :dataa="audienceCount3" :data1="cityLevelName"></PfdpViewVue1>

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="人次" name="third">
          <PfdpViewVue :dataa="showCount" :data1="insertDate"></PfdpViewVue>
          <div class="box2">
            <div class="box2-1">
              <p>票房详情</p>

              <PfdpViewVue1 :dataa="showCount1" :data1="movieProperty"></PfdpViewVue1>
            </div>
            <div class="box2-2">
              <p>制式分布</p>
              <PfdpViewVue1 :dataa="showCount2" :data1="movieFormat"></PfdpViewVue1>

            </div>
            <div class="box2-3">
              <p>地域分布</p>
              <PfdpViewVue1 :dataa="showCount3" :data1="cityLevelName"></PfdpViewVue1>

            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-main class="footer">
        <p>票房详情</p>
        <el-table :data="list1.table0" style="width: 100%" :default-sort="{ prop: 'InsertDate', order: 'descending' }">
          <el-table-column prop="InsertDate" label="时间" sortable>
          </el-table-column>
          <el-table-column prop="BoxOffice" label="票房(万)" sortable>
          </el-table-column>
          <el-table-column prop="BoxOfficeMoM" label="票房环比" sortable>
          </el-table-column>
          <el-table-column prop="ShowCount" label="场次" sortable>
          </el-table-column>
          <el-table-column prop="ShowCountMoM" label="场次环比" sortable>
          </el-table-column>
          <el-table-column prop="AudienceCount" label="人次(万)" sortable>
          </el-table-column>
          <el-table-column prop="AudienceCountMoM" label="人次环比" sortable>
          </el-table-column>
          <el-table-column prop="AvgAudienceCount" label="场均人次" sortable>
          </el-table-column>
          <el-table-column prop="AvgBoxOffice" label="平均票价" sortable>
          </el-table-column>
          <el-table-column prop="MovieNameInfo" label="单日票房冠军" sortable>
          </el-table-column>
          <el-table-column prop="ServicePrice" label="服务费(万)" sortable>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import PfdpViewVue from "@/components/PfdpView.vue";
import PfdpViewVue1 from "@/components/PfdpView1.vue";

import {
  boxoffice1,
  //   boxoffice2,
  //   boxoffice3,
  boxoffice4,
  //   boxoffice5,
  //   boxoffice6,
  //   boxoffice7,
} from "@/api/boxoffice.js";
import request from "@/utils/request.js";
export default {
  components: { PfdpViewVue, PfdpViewVue1 },

  created() {
    boxoffice1()
      .then((res) => {
        console.log("boxoffice1", res.data);
        this.table1 = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    // request.post("/v5/jok1").then((res) => {
    //   console.log("boxoffice2", res.data.data);
    //   this.table2 = res.data.data.data;
    // });
    request.post("/v5/jok2").then((res) => {
      console.log("boxoffice3", res.data.data);
      this.table3 = res.data.data.data;
      this.table3.table0.forEach((item) => {
          this.audienceCount2.push((item.AudienceCount / 10000).toFixed(2))
          this.boxOffice2.push((item.BoxOffice / 10000).toFixed(2))
          this.movieFormat.push(item.MovieFormat)
          this.showCount2.push((item.ShowCount / 10000).toFixed(2))
        })
    });
    boxoffice4()
      .then((res) => {
        console.log("boxoffice4", res.data);
        this.table4 = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    request.post("/v5/jok3").then((res) => {
      console.log("boxoffice5", res.data.data);
      this.table5 = res.data.data.data;
      this.table5.table0.forEach((item) => {
        this.audienceCount3.push((item.AudienceCount / 10000).toFixed(2))
        this.boxOffice3.push((item.BoxOffice / 10000).toFixed(2))
        this.cityLevelName.push(item.CityLevelName)
        this.showCount3.push((item.ShowCount / 10000).toFixed(2))
      })
    });
    request.post("/v5/jok4").then((res) => {
      console.log("list1", res.data.data);
      this.list1 = res.data.data.data;
    });
    request.post("/v5/jok5").then((res) => {
      console.log("table6", res.data.data);
      this.table6 = res.data.data.data;
      this.table6.table0.forEach((item) => {
        this.audienceCount.push((item.AudienceCount / 10000).toFixed(2))
        this.boxOffice.push((item.BoxOffice / 10000).toFixed(2))
        this.insertDate.push(item.InsertDate)
        this.showCount.push((item.ShowCount / 10000).toFixed(2))
      })
    
    });
    request.post("/v5/jok1").then((res) => {
      console.log("boxoffice2", res.data.data);
      this.table2 = res.data.data.data;
      this.table2.table0.forEach((item) => {
        this.audienceCount1.push((item.AudienceCount / 10000).toFixed(2))
        this.boxOffice1.push((item.BoxOffice / 10000).toFixed(2))
        this.movieProperty.push(item.MovieProperty)
        this.showCount1.push((item.ShowCount / 10000).toFixed(2))
      })
    });
  },
  data() {
    return {
      table1: {},
      table2: {},
      table3: {},
      table4: {},
      table5: {},
      table6: {},
      list1: {},
      insertDate: [],
      audienceCount: [],
      boxOffice: [],
      showCount: [],
      audienceCount1: [],
      boxOffice1: [],
      movieProperty: [],
      showCount1: [],
      audienceCount2: [],
      boxOffice2: [],
      movieFormat: [],
      showCount2: [],
      audienceCount3:[],
boxOffice3:[],
cityLevelName:[],
showCount3:[],
      value: "全部",
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  .el-header {
    background-color: #fff;
    height: 68px;
    padding: 20px;
    line-height: 20px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;

    .el-input__inner {
      height: 28px;

      .el-input__icon {
        height: 28px !important;
      }
    }

    .el-select {
      height: 28px;

      .el-input--suffix {
        height: 28px;
      }
    }

    .right {
      color: #7030a0;

      span {
        margin: 0 10px 0 0;

        input {
          margin: 0 3px 0 0;
        }
      }
    }

    .el-button {
      background-color: #7030a0;
      color: #fff;
    }
  }

  .main {
    background-color: #fff;
    margin: 17px 0;

    .box1 {
      width: 1658px;
      height: 348px;
    }

    .is-active {
      background-color: #7030a0;
    }

    .box2 {
      width: 1658px;
      display: flex;
      justify-content: space-around;

      p {
        font-size: 14px;
        color: #454555;
        padding-left: 7px;
        border-left: 4px #7030a0 solid;
      }
    }
  }

  .footer {
    background-color: #fff;

    p {
      font-size: 14px;
      color: #454555;
      padding-left: 7px;
      border-left: 4px #7030a0 solid;
    }
  }
}
</style>



//组件1
<template>
  <div class="charts" ref="charts">
  </div>
</template>
<style  lang="scss" scoped>
.charts {
  width: 1658px;
  height: 348px;
}
</style>
<script>
export default {
  props: {
    dataa: {
      type: Array,
    },
    data1: {
      type: Array,
    }
  },
  data() {
    return {
      option: {
        tooltip: {
          formatter: function (params) {
            // console.log(params);
            return (params[0].name + "：" + params[0].data + "万")
          },
          trigger: "axis"
        },
        xAxis: { data: this.data1 },
        yAxis: {
          type: "value",
          axisLabel: { formatter: "{value}万" }
        },
        series: [
          {
            name: "",
            showSymbol: false,
            type: "line",
            data: this.dataa,
            smooth: true,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#6e76bc"
                  }
                ]
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
        this.initChart()
    },

    methods: {
        initChart() {
            this.myChart = this.$echarts.init(this.$refs.charts)
            this.myChart.setOption(this.option);
        },
    },
    watch:{
        "dataa":{
            handler(){
                this.myChart.setOption(this.option);
                console.log("数据变化")
            },
            deep:true
        },
        "data1":{
            handler(){
                this.myChart.setOption(this.option);
            },
            deep:true
        }
    }

}
</script>



//组件2
<template>
    <div class="about">
        <div id="charts" ref="charts" style="width:454px; height: 384px"></div>
    </div>
</template>
<script>
export default {
    props: {
        dataa: {
            type: Array,
        },
        data1: {
            type: Array,
        }
    },
    data() {
        return {
            // pieList:'',
            option: {
                tooltip: {
                    trigger: "axis"
                },
                title: {
                    text: ''
                },
                legend: {
                    // data: this.data1,
                },
                series: [{
                    type: 'pie',
                    radius: [60, 100],
                    data: this.pieList||this.dataa,
                    formatter: function (params) {
                        console.log(params);
                        return (params[0].name + "：" + params[0].data + "万")
                    },
                    color: ['#6D75BA', '#E87071', '#3DB9C6', '#F7CA86', '#6E98B3'],
                }]
            }
        };
    },
    mounted() {
        this.initChart()
        this.list()
        console.log(this.pieList);
    },

    methods: {
        initChart() {
            this.myChart = this.$echarts.init(this.$refs.charts)
            this.myChart.setOption(this.option);
        },
        list() {
            this.pieList=[]
            for (let i = 0; i < this.dataa.length; i++) {
                const d = new Object();
                d.name = this.data1[i];
                d.value = this.dataa[i];
                this.pieList.push(d)
            }
        }

    },
    watch: {
        "dataa": {
            handler() {
                this.myChart.setOption(this.option);
                // console.log("数据变化")
            },
            deep: true
        },
        "data1": {
            handler() {
                this.myChart.setOption(this.option);
            },
            deep: true
        },
        "pieList": {
            handler() {
                this.myChart.setOption(this.option);
                console.log("数据变化")
                this.list()
            },
            deep: true
        },
    }

}
</script>
  
<style scoped>

</style>



//mock.js 因部分数据请求不出来，故使用了mock.js
//导入mock.js
import Mock from 'mockjs'
//post请求
Mock.mock(/\/v5\/jok1/, "post", {
	code: 0,
	msg: "成功",
	data: { "status": 1, "des": "成功", "userstatus": 1, "version": 0, "data": { "table0": [{ "MovieProperty": "国产", "BoxOffice": 121885325.39, "ShowCount": 1365119, "AudienceCount": 3027231 }, { "MovieProperty": "进口", "BoxOffice": 2611263.52, "ShowCount": 41897, "AudienceCount": 76501 }] } }
})
Mock.mock(/\/v5\/jok2/, "post", {
	code: 0,
	msg: "成功",
	data: { "status": 1, "des": "成功", "userstatus": 1, "version": 0, "data": { "table0": [{ "MovieFormatID": 1, "MovieFormat": "2D", "BoxOffice": 124395747.79, "ShowCount": 1406893, "AudienceCount": 3100945 }, { "MovieFormatID": 2, "MovieFormat": "3D", "BoxOffice": 4913572.51, "ShowCount": 72630, "AudienceCount": 132550 }, { "MovieFormatID": 3, "MovieFormat": "IMAX", "BoxOffice": 83100345.13, "ShowCount": 896715, "AudienceCount": 2042614 }, { "MovieFormatID": 4, "MovieFormat": "中国巨幕", "BoxOffice": 106210308.04, "ShowCount": 1126097, "AudienceCount": 2606194 }] } }
})
Mock.mock(/\/v5\/jok3/, "post", {
	code: 0,
	msg: "成功",
	data: { "status": 1, "des": "成功", "userstatus": 1, "version": 0, "data": { "table0": [{ "CityLevel": 1, "CityLevelName": "一线城市", "BoxOffice": 20750571.66, "ShowCount": 148463, "AudienceCount": 434430 }, { "CityLevel": 2, "CityLevelName": "二线城市", "BoxOffice": 49886595.49, "ShowCount": 492629, "AudienceCount": 1266614 }, { "CityLevel": 3, "CityLevelName": "三线城市", "BoxOffice": 23425146.81, "ShowCount": 316356, "AudienceCount": 603549 }, { "CityLevel": 4, "CityLevelName": "四线城市", "BoxOffice": 20375760.80, "ShowCount": 289288, "AudienceCount": 533112 }, { "CityLevel": 5, "CityLevelName": "五线城市", "BoxOffice": 10071514.15, "ShowCount": 160281, "AudienceCount": 266677 }] } }
})
Mock.mock(/\/v5\/jok4/, "post", {
	code: 0,
	msg: "成功",
	data: { "status": 1, "des": "成功", "userstatus": 1, "version": 0, "data": { "table1": [{ "TotalCounts": 7, "TotalPage": 1 }], "table0": [{ "Irank": 1, "InsertDate": "2022-11-02", "BoxOffice": 8264989.92, "BoxOfficeMoM": -18.27, "ShowCount": 176499, "ShowCountMoM": -2.24, "AudienceCount": 207819, "AudienceCountMoM": -17.20, "AvgBoxOffice": 40, "AvgAudienceCount": 1, "BoxOfficeTop1": 4209427.03, "MovieNameInfo": "万里归途￥421万 占51%", "ServicePrice": 710670.07 }, { "Irank": 2, "InsertDate": "2022-11-01", "BoxOffice": 10112387.62, "BoxOfficeMoM": -4.27, "ShowCount": 180537, "ShowCountMoM": -2.23, "AudienceCount": 250980, "AudienceCountMoM": -4.38, "AvgBoxOffice": 40, "AvgAudienceCount": 1, "BoxOfficeTop1": 4650109.54, "MovieNameInfo": "万里归途￥465万 占46%", "ServicePrice": 775944.94 }, { "Irank": 3, "InsertDate": "2022-10-31", "BoxOffice": 10563519.40, "BoxOfficeMoM": -62.70, "ShowCount": 184648, "ShowCountMoM": -20.80, "AudienceCount": 262489, "AudienceCountMoM": -63.04, "AvgBoxOffice": 40, "AvgAudienceCount": 1, "BoxOfficeTop1": 4811506.90, "MovieNameInfo": "万里归途￥481万 占46%", "ServicePrice": 771933.28 }, { "Irank": 4, "InsertDate": "2022-10-30", "BoxOffice": 28318798.24, "BoxOfficeMoM": -22.32, "ShowCount": 233140, "ShowCountMoM": -1.76, "AudienceCount": 710239, "AudienceCountMoM": -21.83, "AvgBoxOffice": 40, "AvgAudienceCount": 3, "BoxOfficeTop1": 12547418.84, "MovieNameInfo": "万里归途￥1255万 占44%", "ServicePrice": 2208577.32 }, { "Irank": 5, "InsertDate": "2022-10-29", "BoxOffice": 36456084.53, "BoxOfficeMoM": 103.28, "ShowCount": 237319, "ShowCountMoM": 18.15, "AudienceCount": 908566, "AudienceCountMoM": 103.47, "AvgBoxOffice": 40, "AvgAudienceCount": 4, "BoxOfficeTop1": 16491928.42, "MovieNameInfo": "万里归途￥1649万 占45%", "ServicePrice": 2840176.05 }, { "Irank": 6, "InsertDate": "2022-10-28", "BoxOffice": 17933706.73, "BoxOfficeMoM": 39.45, "ShowCount": 200855, "ShowCountMoM": 3.52, "AudienceCount": 446528, "AudienceCountMoM": 40.52, "AvgBoxOffice": 40, "AvgAudienceCount": 2, "BoxOfficeTop1": 8766609.82, "MovieNameInfo": "万里归途￥877万 占49%", "ServicePrice": 1249401.82 }, { "Irank": 7, "InsertDate": "2022-10-27", "BoxOffice": 12860102.47, "BoxOfficeMoM": -0.21, "ShowCount": 194019, "ShowCountMoM": -0.78, "AudienceCount": 317761, "AudienceCountMoM": -0.81, "AvgBoxOffice": 40, "AvgAudienceCount": 2, "BoxOfficeTop1": 6234327.80, "MovieNameInfo": "万里归途￥623万 占48%", "ServicePrice": 919628.99 }] } }
})
Mock.mock(/\/v5\/jok5/, "post", {
	code: 0,
	msg: "成功",
	data:{"status":1,"des":"成功","userstatus":0,"version":0,"data":{"table0":[{"InsertDate":"2022-10-30","BoxOffice":28318798.24,"ShowCount":233140,"AudienceCount":710239},{"InsertDate":"2022-10-31","BoxOffice":10563519.91,"ShowCount":184647,"AudienceCount":262489},{"InsertDate":"2022-11-01","BoxOffice":10113558.59,"ShowCount":180537,"AudienceCount":251018},{"InsertDate":"2022-11-02","BoxOffice":8282539.59,"ShowCount":178072,"AudienceCount":208272},{"InsertDate":"2022-11-03","BoxOffice":8188025.75,"ShowCount":175807,"AudienceCount":205035},{"InsertDate":"2022-11-04","BoxOffice":16128829.58,"ShowCount":192043,"AudienceCount":415882}]}}
})

//api
//导入二次封装好的请求工具
import request from '@/utils/request.js'

export function boxoffice1() {
    //导出request.post请求的结果（promise的实例）
    return request.post("/enlib-api/api/moviecommon/getCommon_DateList.do")
}
export function boxoffice4() {
    //导出request.post请求的结果（promise的实例）
    return request.post("/enlib-api/api/moviecommon/getCommon_GenreMainList.do")
}