detail.vue

<template>
  <div class="statusdetail">
    <el-dialog
      :title="titlename"
      :visible.sync="show"
      width="40%"
      >
      <div  v-show="curshow == 'chart'" class="report-select">
        <el-select class="flr" v-model="period" @change="chageperiod">
          <el-option label="天" value="day"></el-option>
          <el-option label="周" value="week"></el-option>
          <el-option label="月" value="month"></el-option>
        </el-select>
      </div>
      <div class="activitychart" id="activitychart" v-show="curshow == 'chart'&&!noImg"></div>
      <div class="imgbox"  v-show="curshow == 'img'&&!noImg">
        <div v-for="(item,index) in imgData" class="item-img-box" :key="index">
          <img  :src="item.pic_url" alt="">
        </div>
      </div>
      <div class=""  v-show="noImg">
        暂无数据
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false">确 定</el-button>
      </span>
</el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show:false,
      detaildata:'',
      curshow:'img',
      period:'week',
      titlename:'抓拍图片',
      xdata:[],
      apperadata:[],
      imgData:[],
      noImg:false
    }
  },
  methods:{
    initImg(data){
      this.show = true
      this.titlename = '抓拍图片'
      this.curshow = 'img'
     this.axios.get(this.API.faceweb + '/faces/' + data.unid + '/face_events').then(res => {
        if(res.data.list_data){
          this.imgData = res.data.list_data;
          this.noImg=false;
        }else{
          this.noImg=true;
        }
      })
    },
    chageperiod(){
      this.initchart()
    },
    initchart(data){
      this.titlename = '活动状态'
      this.show = true;
      this.curshow = 'chart'
      if(data){
        this.detaildata = data;
      }
      this.xdata=[];
      this.apperadata=[];
      this.axios.get(this.API.faceweb + '/faces/' + this.detaildata.unid + '/active',{
        params:{
          statistical_unit:this.period
        }
      }).then(res => {
        if(res.data.length>0){
          this.noImg=false;
          res.data.forEach(item=>{
            this.xdata.push(item.statistical_dt)
             this.apperadata.push(Number(item.total_num))
             setTimeout(() => {
             this.initactivityChart()
             }, 0);
          })
        }else{
          this.noImg=true;
        }
       }).catch(err=>{
          this.$message.error('获取失败');
       })

    },
    initactivityChart(){
      var chart  = this.$echarts.init(document.getElementById('activitychart'))
      var option = {
        tooltip: {
        trigger: 'axis'
      },
          xAxis: [{
              type: 'category',
              data: this.xdata,
              axisLine: {
                  lineStyle: {
                      color: "#999"
                  }
              }
          }],
          yAxis: [{
              type: 'value',
              splitNumber: 4,
              splitLine: {
                  lineStyle: {
                      type: 'dashed',
                      color: '#DDD'
                  }
              },
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: "#333"
                  },
              },
              nameTextStyle: {
                  color: "#999"
              },
              splitArea: {
                  show: false
              }
          }],
          series: [{
              name: '次数',
              type: 'line',
              data: this.apperadata,
              lineStyle: {
                  normal: {
                      width: 8,
                      color: {
                          type: 'linear',

                          colorStops: [{
                              offset: 0,
                              color: '#A9F387' // 0% 处的颜色
                          }, {
                              offset: 1,
                              color: '#48D8BF' // 100% 处的颜色
                          }],
                          globalCoord: false // 缺省为 false
                      },
                      shadowColor: 'rgba(72,216,191, 0.3)',
                      shadowBlur: 10,
                      shadowOffsetY: 20
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#fff',
                      borderWidth: 10,
                      /*shadowColor: 'rgba(72,216,191, 0.3)',
                      shadowBlur: 100,*/
                      borderColor: "#A9F387"
                  }
              },
              smooth: true
          }]
        };
        chart.setOption(option)
    }
  },
  mounted(){
  }
}
</script>

<style lang="stylus" scoped>
.activitychart{
  height 40vh
  width 40vw
}
.report-select{
  width 100%
  overflow hidden
}
.imgbox{
   overflow auto
   height 60vh
}
.item-img-box{
  width 155px
  float left
  overflow hidden
  border-radius 5px
  margin 0 0 20px 20px
  img {
    height 100%
    width 100%
  }
}
</style>