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>
    <div class="threeDays">
      <div class="yesterday">
        <div class="itemYesterday">昨天<span>11:51</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">筛选</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">筛选</div>
      </div>
      <div id="columnarEcharts"></div>
    </div>

    <u-popup v-model="filterShow" mode="bottom">
      <div class="popup">
        <div class="tips"></div>
        <div class="title">
          <div class="cancel" @click.stop="filterShow=false">取消</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 quotaList" :key="index" :class="index == quotaIndex ? 'active' : ''" @click.stop="quotaIndex=index">{{item.label}}</div> -->
          </div>
          <div class="type-list">
            <div class="type-title">宣发部门</div>
            <!-- <div class="item" v-for="(item, index) in typeList" :key="index" :class="index == typeIndex ? 'active' : ''" @click.stop="typeIndex=index">{{item.dictName}}</div> -->
          </div>

          <div>
            <!-- <div>重置</div>
            <div>确认</div> -->
          </div>
        </scroll-view>
      </div>
    </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,
    }
  },
  
  onShow() {
    document.title = '宣发统计'
  },
  mounted() {
    this.getBrokenEcharts1()
    this.getBrokenEcharts2()
    this.getBrokenEcharts3()
    this.getColumnarEcharts()
  },
  methods: {
    showMore() {},
    
    readMore() {
      uni.navigateTo({url: `./calendarInfo`})
    },
    // 折线图
    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'
            }
          },
        ]
      })
    },
    // 柱状图
    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;
      line-height: 96px;

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

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

    .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{
    padding: 0 32px;
    padding-bottom: 60px;
    .tips{
      width: 80px;
      height: 6px;
      background: #DDDDDD;
      border-radius: 4px;
      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-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{
      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;
        // padding: 0 80px;
        margin: 0 16px 16px 0;
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333;
      }
      .active{
        background: #1365DD;
        color: #fff;
      }
    }
  }

  ::v-deep .popup{
    height: 800px;
  }
}

</style>