show.vue 3.13 KB
<template>
  <div class="template-box content_div_main noBackGround">
    <el-form :inline="true" class="search-form" size="small">
       <el-form-item label="查询时间:">
          <el-date-picker
               v-model="datatime"
               type="date"
               value-format="yyyy-MM-dd"
               placeholder="选择日期"
               :picker-options="pickerOptions">
             </el-date-picker>
      </el-form-item>
       <el-form-item>
        <el-button  class="search-btn" @click="searchFaceCheck" icon="el-icon-search">查询</el-button>
        <!-- <el-button  class="search-btn ml10"  @click="exportCluster()" icon="el-icon-upload">导出</el-button> -->
      </el-form-item>
    </el-form>
    <div class="chartBox">
      <!-- <div class="chartTitle">集团实时客流</div> -->
      <chart chartId="chart1" chartType="AreaLine" :chartData="chartData1" class="chart"></chart>
    </div>
    <div class="chartBox">
      <!-- <div class="chartTitle">集团实时客流</div> -->
      <div class="radioBox">
          <el-radio-group v-model="radioVal" size="small">
            <el-radio-button label="trend7">近7天</el-radio-button>
            <el-radio-button label="trend15">近15天</el-radio-button>
            <el-radio-button label="trend30">近30天</el-radio-button>
          </el-radio-group>
        </div>
      <chart chartId="chart2" chartType="AreaLine" :chartData="chartData2" class="chart"></chart>
    </div>

  </div>
</template>

<script>
  import chart from "../public/chart.vue"
export default {
   data() {
      return {
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        datatime:this.common.formatDateFun(new Date(), "yyyy-MM-dd"),
        datas:{},
        chartData1:{},
        chartData2:{},
        radioVal:"trend15",
        accountId:localStorage.getItem("accountId")
      }
  },
  watch:{
    radioVal(newVal,oldVal){
      this.radioChange(this.datas)
    }
  },
  components:{
    chart
  },
  methods: {
    searchFaceCheck(){
      this.initChart();
    },
    initChart(){
      this.axios.get(this.API.url+"/report/day/account",{
        params:{
          orgIds: this.accountId,
          date: this.datatime,
          chartIds: '1,2,3,4,5,6,8,16,17'
        }
      }).then((res)=>{
        this.datas=res.data.data;
         this.chartData1 = this.datas.body.CustomerCounting;
         this.chartData1.otherConf={
           _color:["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
         }
         this.radioChange(this.datas);
      })
    },
    radioChange(res){
      switch (this.radioVal){
        case "trend7":
          this.chartData2=res.body.trend7;
          break;
        case "trend15":
          this.chartData2=res.body.trend15;
          break;
        case "trend30":
          this.chartData2=res.body.trend30;
          break;
        default:
          break;
      }
      this.chartData2.otherConf={
        _color:["#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"]
      }
    }
  },
  mounted() {
    this.initChart();
  }
 }
</script>
<style  scoped>
  .chart{
    height: 500px;
  }
</style>