<template>
  <!-- 景区客流分析 入口文件-->
  <div class="p-pages-box p-pages-bg">
    <!-- 页面筛选 -->
    <button class="change-data" @click="showDialog=!showDialog">数据过滤</button>
    <div v-if="showDialog" class="p-filter">
      <div class="p-filter-title">客流分析筛选</div>
      <div class="p-filter-box">
        <div class="filter-box-item">
          <el-select v-model="city" placeholder="请选择市" style="width: 130px;">
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-box-item">
          <el-select v-model="area" placeholder="请选择(县/区)" style="width: 130px;">
            <el-option
              v-for="item in areaOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-box-item">
          <el-select v-model="scenic" placeholder="请选择景区" @change="getchange(scenic,'')">
            <el-option
              v-for="item in scenicOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-box-item">
          <div class="button" :class="flowState=='进客流'?'active':''" @click="getflowState('','进客流')">进客流</div>
        </div>
        <div class="filter-box-item">
          <div class="button" :class="flowState=='出客流'?'active':''" @click="getflowState('','出客流')">出客流</div>
        </div>
      </div>
    </div>

    <!-- 页面头部 -->
    <base-header title="客流分析"></base-header>
    <!-- 页面主体 -->
    <div class="p-pages-main p-container">
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 实时客流统计 -->
          <base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 29vh">
            <base-module-card :cardTitle="scenic+'实时客流统计'" cardType="small">
              <scenic-time :propsData="FlowTimeData"></scenic-time>
            </base-module-card>
          </base-module>
        </el-col>
        <el-col :span="8">
          <!-- 按年日客流分析 -->
          <base-module name="FlowYear" id="FlowYear" class="m-t-large" style="height: 29vh">
            <base-module-card cardTitle="按年客流分析" cardType="small">
              <el-date-picker
                v-model="yearData"
                type="year"
                class="p-flowyear-picker"
                placeholder="选择年"
              >
              </el-date-picker>
              <base-echarts1 type="area" :propsData="FlowYearData"></base-echarts1>
            </base-module-card>
          </base-module>
        </el-col>
        <el-col :span="8">
          <!-- 分时段客流走势 -->
          <base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 29vh">
            <base-module-card cardTitle="按周客流分析" cardType="small">
              <el-date-picker
                class="p-flowyear-picker"
                v-model="week"
                type="week"
                placeholder="选择周">
              </el-date-picker>
              <base-echarts1 type="line" :propsData="FlowTrendData"></base-echarts1>
            </base-module-card>
          </base-module>
        </el-col>
        <el-col :span="8">
          <!-- 区域客流监测 -->
          <base-module name="FlowArea" id="FlowArea" class="m-t-large" style="height: 29vh">
            <base-module-card :cardTitle="scenic+'区域客流占比分析'" cardType="small">
              <base-echarts1 :propsData="FlowRankData" type="ring"></base-echarts1>
            </base-module-card>
          </base-module>
        </el-col>
        <el-col :span="16">
          <!-- 按日客流分析 -->
          <base-module name="FlowToday" id="英文" class="m-t-large" style="height: 29vh">
            <base-module-card :cardTitle="scenic+'按日客流分析'" cardType="small">
              <el-date-picker
                v-model="TodayData"
                type="daterange"
                range-separator="-"
                value-format="dd"
                :start-placeholder="startTime"
                :end-placeholder="endTime"
                class="p-flowdata-picker"
                popper-class="p-flowdata-popper"
                @change="changeValue"
              >
              </el-date-picker>
              <base-echarts1 type="area" :propsData="FlowTodayData"></base-echarts1>
            </base-module-card>
          </base-module>
        </el-col>
        <el-col :span="8">
          <!-- 客流同环比分析 -->
          <base-module name="FlowRing" id="FlowRing" class="m-t-large" style="height: 29vh">
            <base-module-card :cardTitle="scenic+'客流同环比分析'" cardType="small">
              <scenic-ring :propsData="FlowRingData"></scenic-ring>
            </base-module-card>
          </base-module>
        </el-col>
        <el-col :span="16">
          <!-- 按月客流分析 -->
          <base-module name="FlowMoon" id="FlowMoon" class="m-t-large" style="height: 29vh">
            <base-module-card :cardTitle="scenic+'按月客流分析'" cardType="small">
              <el-date-picker
                v-model="MonthData"
                type="monthrange"
                range-separator="-"
                format="yyyy-MM"
                :start-placeholder="startMonth"
                :end-placeholder="endMonth"
                class="p-flowdata-picker"
                popper-class="p-flowdata-popper"
              >
              </el-date-picker>
              <base-echarts1 type="column" :propsData="FlowMoonData"></base-echarts1>
            </base-module-card>
          </base-module>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import {
  currentScenicScenicList, getcurrentScenic, getDayData, getFlowRatio, getHourData, getMonthData, getYearData,
} from "@/api/picture/scenic-flow/scenicFlow";
//引入 实时客流统计 模块
import scenicTime from "@/views/picture/scenic-flow/scenic-time";
//引入 区域客流监测 模块
import scenicArea from "@/views/picture/scenic-flow/scenic-area";
//引入 客流同环比分析 模块
import ScenicRing from "@/views/picture/scenic-flow/scenic-ring";
//引入 排行榜 组件
import baseRank from "@/views/components/p-rank/BaseRank";
import {getSelectTouristSource} from "@/api/picture/scenic-monitor/scenicMonitor";
import map from "@/views/dashboard/json/china.json";

export default {
  name: "index",
  components: {ScenicRing, scenicTime, scenicArea, baseRank},
  data() {
    return {
      showDialog: false,
      flowState: '进客流',
      week:'',
      cityOptions: [
        {
          value: '石家庄市',
          label: '石家庄市'
        }, {
          value: '唐山市',
          label: '唐山市'
        }, {
          value: '秦皇岛市',
          label: '秦皇岛市'
        }, {
          value: '邯郸市',
          label: '邯郸市'
        }, {
          value: '保定市',
          label: '保定市'
        }, {
          value: '张家口市',
          label: '张家口市'
        }, {
          value: '承德市',
          label: '承德市'
        }, {
          value: '沧州市',
          label: '沧州市'
        }, {
          value: '廊坊市',
          label: '廊坊市'
        }, {
          value: '衡水市',
          label: '衡水市'
        }],
      city: '石家庄市',
      areaOptions: [
        {
          value: '平山县',
          label: '平山县'
        },
        {
          value: '鹿泉区',
          label: '鹿泉区'
        },
        {
          value: '灵寿县',
          label: '灵寿县'
        },
        {
          value: '井陉县',
          label: '井陉县'
        },
        {
          value: '深泽县',
          label: '深泽县'
        },
        {
          value: '行唐县',
          label: '行唐县'
        }],
      area: '平山县',
      scenicOptions: [
        {
          value: '西柏坡景区',
          label: '西柏坡景区'
        }, {
          value: '南长城景区',
          label: '南长城景区'
        }, {
          value: '韩信文化苑',
          label: '韩信文化苑'
        }, {
          value: '乾隆碑亭',
          label: '乾隆碑亭'
        }, {
          value: '毛泽东旧址',
          label: '毛泽东旧址'
        }],
      scenic: '西柏坡景区',
      yearData: '2023',
      //实时客流统计 数据
      FlowTimeData: {
        saturatio: {name: "", percentage: ""},
        Total: '', surplus: '', carFlow: '', alarm: ''
      },
      //分时段客流走势 数据
      FlowTrendData: {eChartOpts: {}, eChartData: {}},
      //未来七天客流预测 数据
      FlowYearData: {eChartOpts: {}, eChartData: {}},
      //区域客流监测 数据
      FlowAreaData: [],
      //按日客流分析 数据
      FlowTodayData: {eChartOpts: {}, eChartData: {}},
      startTime: '',
      endtTime: '',
      TodayData: '',
      startDate: '',
      endDate: '',
      //客流同环比分析 数据
      FlowRingData: [],
      //按月客流分析 数据
      FlowMoonData: {eChartOpts: {}, eChartData: {}},
      MonthData: '',
      startMonth: '',
      endMonth: '',
      FlowRankData: {eChartOpts: {}, eChartData: {}},
    }
  },
  created() {
    //获取 实时客流统计 数据
    this.getFlowTime();
    //获取 分时段客流走势 数据
    this.getFlowTrend();
    //获取 未来七天客流预测 数据
    this.getFlowYear();
    //获取 区域客流监测 数据
    this.getFlowArea();
    //获取 按日客流分析 数据
    this.getFlowToday();
    //获取 客流同环比分析 数据
    this.getFlowRing();
    //获取 按月客流分析 数据
    this.getFlowMoon();
    //获取 客流排行 数据
    this.getFlowRank();
  },
  watch: {
    //日期选择监听
    // TodayData: {
    //   immediate: false,
    //   handler(newValue, oldValue) {
    //     let datas = newValue
    //     this.startTime = this.$filter.formatDate(datas[0])
    //     this.endTime = this.$filter.formatDate(datas[1])
    //     let backTime = {'startTime': this.startTime, 'endTime': this.endTime}
    //     this.getFlowToday(backTime)
    //   }
    // },
    //月份选择监听
    MonthData: {
      immediate: false,
      handler(newValue, oldValue) {
        let datas = newValue
        this.startMonth = this.$filter.formatDate(datas[0])
        this.endMonth = this.$filter.formatDate(datas[1])
        let backTime = {'startTime': this.startMonth, 'endTime': this.endMonth}
        this.getFlowMoon(backTime)
      }
    },
    //月份选择监听
    yearData: {
      immediate: false,
      handler(newValue, oldValue) {
        let backYear = newValue.getFullYear()
        this.getFlowYear(backYear)
      }
    },

  },
  methods: {
    changeValue(e) {
      // let arr = []
      // e.forEach(item=>{
      //   item.format('yyyy-MM-dd')
      //   arr.push(item)
      // })
      if (e[0] == 11 && e[1] == 18) {
        this.FlowTodayData.eChartData = {
          seriesData: [{"name": "人次", "value": ["20", "30", "50", "80", "30", "40", "20", "10"]}],
          name: "按日客流分析",
          categories: ["2023-10-11", "2023-10-12", "2023-10-13", "2023-10-14", "2023-10-15", "2023-10-16", "2023-10-17", "2023-10-18"]
        }
      } else {
        this.FlowTodayData.eChartData = {
          seriesData: [{"name": "人次", "value": ["70", "10", "30", "50", "40", "50", "30", "90"]}],
          name: "按日客流分析",
          categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
        }
      }
    },
    getflowState(scenic, state) {
      this.flowState = state
      this.getchange(scenic, state)
    },
    getchange(scenic, state) {//获取 实时客流统计 数据
      console.log('scenic', scenic)
      console.log('state', state)
      let myScenic = ''
      let myState = ''
      if (scenic != '') {
        myScenic = scenic
        if (state == '') {
          myState = this.flowState
        } else {
          myState = state
        }
      } else {
        myScenic = '西柏坡景区'
        if (state == '') {
          myState = '进客流'
        } else {
          myState = state
        }
      }

      //获取 实时客流统计 数据
      this.getFlowTime(myScenic, myState);
      //获取 分时段客流走势 数据
      this.getFlowTrend(myScenic, myState);
      //获取 未来七天客流预测 数据
      this.getFlowYear(myScenic, myState);
      //获取 区域客流监测 数据
      this.getFlowArea(myScenic, myState);
      //获取 按日客流分析 数据
      this.getFlowToday(myScenic, myState);
      //获取 客流同环比分析 数据
      this.getFlowRing(myScenic, myState);
      //获取 按月客流分析 数据
      this.getFlowMoon(myScenic, myState);
      //获取 客流排行 数据
      this.getFlowRank(myScenic, myState);

    },
    //获取 实时客流统计 数据
    getFlowTime(value) {
      //getcurrentScenic().then(response => {
      //this.FlowTimeData = response.data
      //});
      if (value == "南长城景区") {
        this.FlowTimeData = {"dayNum": "0", "flowNum": "2589", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
      } else {
        this.FlowTimeData = {"dayNum": "0", "flowNum": "3578", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
      }
    },
    //获取 客流地排行 数据
    getFlowRank(scenic, state) {
      let num = 0
      //getSelectTouristSource('0').then(response => {
      // let newData = response.data.seriesData.slice(0, 5)
      // let FlowRankData = newData.map((item, index) => {
      //   num = num + 1
      //   let itemData = {num: item.num, percentage: item.percentage, name: item.name, value: item.value, rank: num}
      //   return itemData
      // });
      // this.FlowRankData = FlowRankData
      //});
      let Opts = {
        color: ['red', 'yellow', 'purple', 'blue'],
        unit: ['人次'],
        legend: {
          show: true,
          top: 'middle',
          left: '55%',
          lineHeight: 25,
        },
        extra: {
          ring: {
            labelShow: false,
          }
        }
      }
      this.FlowRankData.eChartOpts = Opts

      if (scenic == "南长城景区" && state == '进客流') {
        this.FlowRankData.eChartData = {
          "name": "进出客流占比",
          "seriesData": [
            {
              "name": "北入口",
              "value": "245"
            },
            {
              "name": "南入口",
              "value": "251"
            },
            {
              "name": "西入口",
              "value": "871"
            },
            {
              "name": "东入口",
              "value": "325"
            }]
        }
      } else if (scenic == "南长城景区" && state == '出客流') {
        this.FlowRankData.eChartData = {
          "name": "进出客流占比",
          "seriesData": [
            {
              "name": "北入口",
              "value": "154"
            },
            {
              "name": "南入口",
              "value": "235"
            },
            {
              "name": "西入口",
              "value": "502"
            },
            {
              "name": "东入口",
              "value": "248"
            }]
        }
      } else if (scenic == "西柏坡景区" && state == '出客流') {
        this.FlowRankData.eChartData = {
          "name": "进出客流占比",
          "seriesData": [
            {
              "name": "北入口",
              "value": "235"
            },
            {
              "name": "南入口",
              "value": "435"
            },
            {
              "name": "西入口",
              "value": "154"
            },
            {
              "name": "东入口",
              "value": "148"
            }]
        }
      } else {
        this.FlowRankData.eChartData = {
          "name": "进出客流占比",
          "seriesData": [
            {
              "name": "北入口",
              "value": "195"
            },
            {
              "name": "南入口",
              "value": "452"
            },
            {
              "name": "西入口",
              "value": "240"
            },
            {
              "name": "东入口",
              "value": "413"
            }]
        }
      }


      // this.FlowRankData.eChartData = {
      //   "name": "车辆类型分析",
      //   "seriesData": [
      //     {
      //       "name": "西柏坡景区",
      //       "value": "95"
      //     },
      //     {
      //       "name": "西柏坡景区",
      //       "value": "0"
      //     },
      //     {
      //       "name": "南长城景区",
      //       "value": "44"
      //     },
      //     {
      //       "name": "韩信文化苑",
      //       "value": "17"
      //     },
      //     {
      //       "name": "乾隆碑亭",
      //       "value": "17"
      //     }
      //   ],
      //}
    }
    ,
//获取 分时段客流走势 数据
    getFlowTrend(value, flowState) {
      let Opts = {
        unit: ['万人次'],
        extra: {
          line: {}
        }
      }
      this.FlowTrendData.eChartOpts = Opts
      //getHourData().then(response => {
      //this.FlowTrendData.eChartData = response.data
      //});

      if (value == "西柏坡景区" && flowState == '出客流') {
        this.FlowTrendData.eChartData = {
          "seriesData": [{"name": "人次", "value": ["12568", "9329", "19745", "15000", "33125", "15587", "24257"]}],
          "name": "周客流数据",
          "categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      } else if (value == "南长城景区" && flowState == '进客流') {
        this.FlowTrendData.eChartData = {
          "seriesData": [{"name": "人次", "value": ["43125", "25587", "34257", "21568", "31329", "15745", "35000"]}],
          "name": "当日小时数据",
          "categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      } else if (value == "南长城景区" && flowState == '出客流') {
        this.FlowTrendData.eChartData = {
          "seriesData": [{"name": "人次", "value": ["13125", "25057", "14257", "12568", "2329", "9745", "15000"]}],
          "name": "当日小时数据",
          "categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      } else {
        this.FlowTrendData.eChartData = {
          "seriesData": [{"name": "人次", "value": ["21568", "31329", "15745", "35000", "43125", "25587", "34257"]}],
          "name": "周客流数据",
          "categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      }
    }
    ,

//获取 按年日客流分析 数据
    getFlowYear(value, flowState) {
      let Opts = {
        unit: ['万人次'],
        extra: {
          area: {}
        }
      }
      this.FlowYearData.eChartOpts = Opts
      //getYearData().then(response => {
      //  this.FlowYearData.eChartData = response.data
      //});

      if (value == "西柏坡景区" && flowState == '进客流') {
        this.FlowYearData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["120", "150", "241"]}],
          "name": "年度客流数据",
          "categories": ["2021年", "2022年", "2023年"]
        }
      } else if (value == "西柏坡景区" && flowState == '出客流') {
        this.FlowYearData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["241", "120", "150",]}],
          "name": "年度客流数据",
          "categories": ["2021年", "2022年", "2023年"]
        }
      } else if (value == "南长城景区" && flowState == '进客流') {
        this.FlowYearData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["110", "200", "120",]}],
          "name": "年度客流数据",
          "categories": ["2021年", "2022年", "2023年"]
        }
      } else {
        this.FlowYearData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["120", "150", "241"]}],
          "name": "年度客流数据",
          "categories": ["2021年", "2022年", "2023年"]
        }
      }
    }
    ,

//获取 区域客流监测 数据
    getFlowArea() {
      currentScenicScenicList().then(response => {
        this.FlowAreaData = response.data
      });
    }
    ,

//获取 按日客流分析 数据
    getFlowToday(value, flowState) {
      let Opts = {
        unit: ['人次'],
        extra: {
          area: {}
        }
      }
      let newDate = new Date()
      this.startTime = this.$filter.funDate(7)
      this.endTime = this.$filter.formatDate(newDate)

      this.FlowTodayData.eChartOpts = Opts
      if (value == "西柏坡景区" && flowState == '出客流') {
        this.FlowTodayData.eChartData = {
          seriesData: [{"name": "人次", "value": ["1280", "920", "1420", "2278", "1000", "1300", "1550", "1580"]}],
          name: "按日客流分析",
          categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
        }
      } else if (value == "南长城景区" && flowState == '出客流') {
        this.FlowTodayData.eChartData = {
          seriesData: [{"name": "人次", "value": ["1000", "1300", "1550", "1580", "1280", "920", "1420", "2078"]}],
          name: "按日客流分析",
          categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
        }
      } else if (value == "南长城景区" && flowState == '进客流') {
        this.FlowTodayData.eChartData = {
          seriesData: [{"name": "人次", "value": ["1420", "2570", "3578", "3000", "2500", "1550", "2580", "2280"]}],
          name: "按日客流分析",
          categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
        }
      } else {
        this.FlowTodayData.eChartData = {
          seriesData: [{"name": "人次", "value": ["3000", "2500", "1550", "2580", "2280", "1420", "2570", "3578"]}],
          name: "按日客流分析",
          categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
        }
      }
    }
    ,

//获取 客流同环比分析 数据
    getFlowRing(value, flowState) {
      //getFlowRatio().then(response => {
      //this.FlowRingData=response.data
      //});

      if (value == "南长城景区" && flowState == '进客流') {
        this.FlowRingData = [{
          "lastTime": 0,
          "lastTimeRatio": 28,
          "lastYear": 2365,
          "name": "今日数据",
          "sameTime": 1878,
          "lastYearRatio": -33
        }, {
          "lastTime": 0,
          "lastTimeRatio": 42,
          "lastYear": 2935,
          "name": "昨日数据",
          "sameTime": 2654,
          "lastYearRatio": -25
        }, {
          "lastTime": 0,
          "lastTimeRatio": -24,
          "lastYear": 20585,
          "name": "本周累计",
          "sameTime": 27894,
          "lastYearRatio": 17
        }, {
          "lastTime": 0,
          "lastTimeRatio": 22,
          "lastYear": 75425,
          "name": "本月累计",
          "sameTime": 94568,
          "lastYearRatio": 45
        },
          {
            "lastTime": 0,
            "lastTimeRatio": 62,
            "lastYear": 875324,
            "name": "本年累计",
            "sameTime": 1055413,
            "lastYearRatio": 53
          }
        ]
      } else {
        this.FlowRingData = [{
          "lastTime": 0,
          "lastTimeRatio": 65,
          "lastYear": 2378,
          "name": "今日数据",
          "sameTime": 3578,
          "lastYearRatio": 37
        }, {
          "lastTime": 0,
          "lastTimeRatio": -15,
          "lastYear": 3154,
          "name": "昨日数据",
          "sameTime": 2928,
          "lastYearRatio": -43
        }, {
          "lastTime": 0,
          "lastTimeRatio": -22,
          "lastYear": 25485,
          "name": "本周累计",
          "sameTime": 21548,
          "lastYearRatio": -41
        }, {
          "lastTime": 0,
          "lastTimeRatio": 35,
          "lastYear": 85415,
          "name": "本月累计",
          "sameTime": 92568,
          "lastYearRatio": 25
        },
          {
            "lastTime": 0,
            "lastTimeRatio": 25,
            "lastYear": 925399,
            "name": "本年累计",
            "sameTime": 1025412,
            "lastYearRatio": 65
          }
        ]
      }
    }
    ,

//获取 按月客流分析 数据
    getFlowMoon(value, flowState) {
      let postParams = {}
      let Opts = {
        unit: ['万人次'],
        extra: {
          column: {}
        }
      }
      this.FlowMoonData.eChartOpts = Opts
      // if (params == undefined) {
      //   this.startMonth = this.$filter.getMonths(-3)
      //   this.endMonth = this.$filter.getMonths(0)
      //   postParams = {'startTime': this.startMonth, 'endTime': this.endMonth}
      // } else {
      //   postParams = params
      // }
      //getMonthData(postParams).then(response => {
      //this.FlowMoonData.eChartData = response.data
      //});


      if (value == "西柏坡景区" && flowState == '出客流') {
        this.startMonth = this.$filter.getMonths(-3)
        this.endMonth = this.$filter.getMonths(0)
        this.FlowMoonData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["18", "23", "42", "22"]}],
          "name": "月度客流量数据",
          "categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
        }
      } else if (value == "南长城景区" && flowState == '出客流') {
        this.startMonth = this.$filter.getMonths(-3)
        this.endMonth = this.$filter.getMonths(0)
        this.FlowMoonData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["12", "20", "28", "33"]}],
          "name": "月度客流量数据",
          "categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
        }
      } else if (value == "南长城景区" && flowState == '进客流') {
        this.FlowMoonData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["31", "15", "11", "22",]}],
          "name": "月度客流量数据",
          "categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
        }
      } else {
        this.startMonth = this.$filter.getMonths(-3)
        this.endMonth = this.$filter.getMonths(0)
        this.FlowMoonData.eChartData = {
          "seriesData": [{"name": "万人次", "value": ["15", "44", "12", "42"]}],
          "name": "月度客流量数据",
          "categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
        }
      }

    }
    ,
  }
}
</script>

<style scoped lang="scss">
.change-data {
  position: fixed;
  right: 20px;
  top: 5px;
  z-index: 999999;
  background: #000;
  border: solid 1px #ffffff85;
  color: #fff;
  padding: 5px 10px;
}

.p-filter {
  position: fixed;
  padding: 10px;
  z-index: 9999;
  color: #fff;
  left: 50%;
  top: 50px;
  width: 780px;
  height: 100px;
  background: rgba(#242323, .8);
  transform: translate(-50%, 0);
  border: 1px solid #fff;

  .p-filter-title {
    text-align: center;
    margin-bottom: 10px;
  }
}

.p-filter-box {
  display: flex;

  .button {
    cursor: pointer;
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    background: #fff;
    color: #0d1c2d;
    border-radius: 5px;
  }

  .button.active {
    background: #C23531;
    color: #fff;
  }

  .filter-box-item {
    margin: 0 10px;
  }
}


</style>
