dvcp_v2_wxcp_app/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

<template>
  <div class="AppPropagandaStatistics">
    <div class="calendar_header">
      <u-section title="宣发日历" :show-line="false"  sub-title="查看更多" @click="readMore"></u-section>
      <!-- <div>{{ calendarList[nowDate - 1] }}</div> -->
    </div>
    <div class="threeDays">
      <div class="yesterday">
        <div class="itemYesterday">昨天<span>{{ calendarList[nowDate - 1] }}</span></div>
        <div>晴风小区志愿者活动</div>
      </div>
      <div class="today">
        <div class="itemToday">今天<span>11:51</span></div>
        <div>晴风小区志愿者活动</div>
      </div>
      <div class="tomorrow">
        <div class="itemTomorrow">明天<span>11:51</span></div>
        <div @click="showMore(index)">晴风小区志愿者活动</div>
        <div class="isShow" @click="showMore()">{{ isShow ? '收起' : '展开' }}</div>
        <span></span>
      </div>
    </div>
    

    <!-- 折线图 -->
    <div class="brokenEcharts">
      <div class="broken_title">
        <div class="broken_left">宣发效果</div>
        <div class="broken_right" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
      </div>
      <div class="broken_statistics">
        <div class="broken_item">
          <div>创建宣发任务数</div>
          <div>200</div>
        </div>
        <div class="broken_item">
          <div>执行宣发次数</div>
          <div>200</div>
        </div>
        <div class="broken_item">
          <div>触达人次</div>
          <div>200</div>
        </div>
      </div>
      <div class="title">触达人次</div>
      <div id="brokenEcharts1"></div>
      <div class="title">宣发次数</div>
      <div id="brokenEcharts2"></div>
      <div class="title">宣发任务数</div>
      <div id="brokenEcharts3"></div>
    </div>
    <div class="columnarEcharts">
      <div class="broken_title">
        <div class="broken_left">宣发明细</div>
        <div class="broken_right">
          <span :class="detailType ==0? 'active': ''" @click="detailType = 0, getColData()">近七天</span>
          <span :class="detailType ==1? 'active': ''" @click="detailType = 1, getColData()">近30天</span>
          <span :class="detailType ==2? 'active': ''" @click="detailType = 2, getColData()">近1年</span>
        </div>
      </div>
      <div id="columnarEcharts"></div>
    </div>

    <u-popup v-model="filterShow" mode="bottom" border-radius="14">
      <div class="popup">
        <div class="tips"></div>
        <div class="title">
          <div class="cancel" @click.stop="filterShow=false,timeSelect=0">取消</div>
          <p>筛选条件</p>
          <div class="confirm" @click.stop="selectConfirm">确定</div>
        </div>
        <scroll-view class="select-content" scroll-y="true">
          <div class="type-list">
            <div class="type-title">宣发时间</div>
            <div class="item" v-for="(item, index) in timeList" :key="index" :class="index == timeSelect ? 'active' : ''" @click.stop="checkTime(index)">{{item}}</div>
          </div>
          <div class="type-list">
            <div class="type-title">宣发部门</div>
            <AiPagePicker type="custom" :selected.sync="deptList" nodeKey="id" :ops="{url:`./selectDeptUser`,label:'name'}" valueObj>
              <span class="label" v-if="deptList.length">已选择</span>
              <span v-else style="color:#999;">请选择</span>
              <u-icon name="arrow-right" color="#999" size="24" style="margin-left:8px;"/>
            </AiPagePicker>
          </div>
        </scroll-view>
        <div class="popBtn">
          <div @click="reset">重置</div>
          <div @click="selectConfirm">确认</div>
        </div>
      </div>
      <u-popup v-model="customShow" mode="bottom" border-radius="14" closeable>
        <div class="customPop">    
          <div class="startTime">
            <div>开始时间：</div>
            <div>
              <u-input v-model="start" placeholder="请输入格式为2022-00-00的开始时间" type="text" clearable/>
            </div>
          </div>
          <div class="endTime">
            <div>结束时间：</div>
            <div>
              <u-input v-model="end" placeholder="请输入格式为2022-00-00的结束时间" type="text" clearable/>
            </div>
          </div>
          <div class="timeBtn" @click="handleTime">确定</div>
        </div>
      </u-popup>
    </u-popup>
  </div>
</template>

<script>
import echarts from 'echarts';
export default {
  name: 'AppPropagandaStatistics',
  appName: '宣发统计',
  data() {
    return {
      isShow: false,
      brokenEcharts1: null,
      brokenEcharts2: null,
      brokenEcharts3: null,
      columnarEcharts: null,
      filterShow: false,
      customShow: false,
      timeList: ['近7天', '近30天', '近1年','自定义'],
      timeSelect: 0,
      start: '',
      end: '',
      deptList: [],
      nowDate: '',
      calendarList: [],
      colData: {},
      detailType: 0,
      timeType: '',
      departId: '',
      startTime: '',
      endTime: '',
    }
  },
  
  onShow() {
    document.title = '宣发统计'
    this.getData()
    this.getNowDate()
  },
  mounted() {
    this.getBrokenEcharts1()
    this.getBrokenEcharts2()
    this.getBrokenEcharts3()
    this.getColumnarEcharts()
    this.getColData()
  },
  methods: {
    showMore() {},

    checkTime(index) {
      if(index == 3) {
        this.timeSelect = index
        this.customShow = true
      } else {
        this.timeSelect = index
      }
    },
    
    readMore() {
      uni.navigateTo({url: `./calendarInfo`})
    },
    // 重置
    reset() {
      this.timeType = 0
      this.startTime = ''
      this.endTime = ''
      this.departId = ''
    },

    selectConfirm() {
      if(this.timeSelect == 3) {
        this.timeType = this.timeSelect
        this.startTime = this.start
        this.endTime = this.end
        this.getBrokenDate()
      } else {
        this.timeType = this.timeSelect
        this.getBrokenDate()
      }
      this.filterShow = false
      
    },

    handleTime() {
      this.startTime = this.start
      this.endTime = this.end
      this.customShow = false
    },

    getNowDate() {
      let date = new Date()
      this.nowDate = date.getDate()
      // console.log(this.nowDate);
    },
    // 宣发日历
    getData() {
      this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
        params: {

        }
      }).then((res)=> {{
        if(res?.data) {
          this.calendarList = res.data
        }
      }})
    },


    // 宣发效果
    getBrokenDate() {
      this.$http.post(`/app/appmasssendingtask/statisticsEffect`, null, {
        params: {
          type: this.timeSelect,
          startTime: this.startTime,
          endTime: this.endTime,
          departId: this.departId
        }
      }).then(res=>{
        if(res?.data) {
          console.log(res);
        }
      })
    },
    // 触发人数
    getBrokenEcharts1() {
      this.brokenEcharts1 = echarts.init(document.getElementById('brokenEcharts1'))
      this.brokenEcharts1.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '2%',
          containLabel: true
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ['2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          }
        },
        series: [
          {
            type: 'line',
            data: [120, 132, 101, 134, 90, 230],
            lineStyle: {
              color: '#4B87FE',
            },
            itemStyle: {
              color: '#4E8EEE'
            }
          },
        ]
      })
    },
    // 宣发次数
    getBrokenEcharts2() {
      this.brokenEcharts2 = echarts.init(document.getElementById('brokenEcharts2'))
      this.brokenEcharts2.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '2%',
          containLabel: true
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ['2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          }
        },
        series: [
          {
            type: 'line',
            data: [220, 182, 191, 234, 290, 330],
            lineStyle: {
              color: '#32C5FF',
            },
            itemStyle: {
              color: '#31C1FA'
            }
          },
        ]
      })
    },
    // 宣发任务数
    getBrokenEcharts3() {
      this.brokenEcharts3 = echarts.init(document.getElementById('brokenEcharts3'))
      this.brokenEcharts3.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '2%',
          right: '5%',
          bottom: '2%',
          containLabel: true
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter'
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ['2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          }
        },
        series: [
          {
            type: 'line',
            data: [1000, 232, 201, 154, 190, 330],
            lineStyle: {
              color: '#FFAA44',
            },
            itemStyle: {
              color: '#FFAA44'
            }
          },
        ]
      })
    },
    // 宣发明细
    getColData() {
      this.$http.post(`/app/appmasssendingtask/statisticsDepart`, null, {
        params: {
          type: this.detailType
        }
      }).then(res=> {
        console.log(res);
        if(res?.data) {
          console.log(res);
          this.colData = res.data
        }
      })
    },
    getColumnarEcharts() {
      this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
      this.columnarEcharts.setOption({
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: ['卫健委', '法院', '团委', '扶贫办', '警察局']
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            itemStyle:{
              normal:{
                  color:'#5087ec'
              }
            },
            type: 'bar'
          }
        ]
      })
    },


    
  }
}
</script>

<style lang="scss" scoped>
.AppPropagandaStatistics {

  .calendar_header {
    padding: 26px 32px;
    box-sizing: border-box;
    background: #FFF;
    ::v-deep .u-section__title__text {
      font-size: 32px;
    }
  }
  .threeDays {
    background: #FFF;
    padding: 8px 32px 12px 32px;
    box-sizing: border-box;
    .yesterday,
    .today,
    .tomorrow {
      background: #F7F8FA;
      margin-bottom: 32px;
      padding: 30px 0 30px 40px;
      box-sizing: border-box;
      .isShow {
        color: #3AA0FF;
      }
      .itemYesterday,
      .itemToday,
      .itemTomorrow {
        color: #999999;
        span {
          margin-left: 20px;
        }
        
      }
    }
    .yesterday {
      border-left: 6px solid #FBD444;
    }
    .today {
      border-left: 6px solid #50CB74;
    }
    .tomorrow {
      border-left: 6px solid #3AA0FF;
    }
  }
  
  
  .brokenEcharts,
  .columnarEcharts {
    margin: 24px 0 24px 0;
    padding: 0 32px 32px 32px;
    box-sizing: border-box;

    .broken_title {
      display: flex;
      justify-content: space-between;
      height: 96px;
      align-items: center;

      .broken_left {
        font-size: 32px;
        font-weight: 600;
      }

      .broken_right {
        font-size: 24px;
        // color: #3399FF;

        img {
          width: 28px;
          height: 28px;
        }
        
        span {
          margin-right: 12px;
          padding: 8px 10px;
          display: inline-block;
          border: 1px solid #DDD;
          border-radius: 8px;
        }
        .active {
          background: #3399FF;
          color: #FFF;
        }
      }
    }

    .broken_statistics {
      display: flex;
      padding: 24px 0;
      box-sizing: border-box;

      .broken_item {
        flex: 1;
        text-align: center;

        div:first-child {
          font-size: 24px;
          color: #999999;
          padding: 10px 0;
        }
        div:last-child {
          font-size: 36px;
          color: #000000;
          font-weight: 600;
        }
      }
    }

    .title {
      padding: 30px 0;
      box-sizing: border-box;
      font-size: 32px;
      font-weight: 600;
    }
  }

  .brokenEcharts,
  .columnarEcharts {
    background: #FFF;

    #brokenEcharts1,
    #brokenEcharts2,
    #brokenEcharts3,
    #columnarEcharts {
      width: 100%;
      height: 400px;
      background: #F9F9F9;
      border-radius: 8px;
    }
  }

  .popup{
    box-sizing: border-box;
    // height: 800px;
    .tips{
      width: 80px;
      height: 6px;
      background: #DDDDDD;
      border-radius: 4px;
      padding: 0 32px;
      box-sizing: border-box;
      margin: 32px auto 8px auto;
    }
    .title{
      height: 48px;
      line-height: 48px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #222;
      padding: 0 32px;
      box-sizing: border-box;
      padding-bottom: 32px;
      .cancel{
        display: inline-block;
        width: 200px;
        color: #aaa;
      }
      .confirm{
        display: inline-block;
        width: 200px;
        text-align: right;
        color: #333;
      }
      p{
        display: inline-block;
        width: calc(100% - 400px);
        text-align: center;
        font-size: 28px;
      }
    }
    .select-content{
      height: calc(100% - 100px);
      overflow-y: scroll;
    }
    .type-list{
      padding: 0 32px;
      box-sizing: border-box;
      margin-bottom: 32px;
      .type-title{
        line-height: 108px;
        font-size: 32px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
      }
      .item{
        display: inline-block;
        width: 210px;
        text-align: center;
        line-height: 64px;
        background: #F3F4F7;
        border-radius: 4px;
        margin: 0 16px 16px 0;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333;
      }
      .active{
        background: #1365DD;
        color: #fff;
      }
      
    }
    .popBtn {
      display: flex;
      height: 98px;
      line-height: 98px;
      div {
        width: 50%;
        border: 2px solid #3399FF;
        text-align: center;
      }
      div:first-child {
        color: #3399FF;
      }
      div:last-child {
        color: #FFF;
        background: #3399FF;
      }
    }
  }

  .customPop {
    padding: 80px 32px 20px 32px;
    box-sizing: border-box;

    .startTime,
    .endTime {
      border-bottom: 1px solid #DDD;
      margin-bottom: 20px;
    }

    .timeBtn {
      width: 100%;
      background: #3399FF;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 16px;
      color: #FFF;
    }
  }
}

</style>