宣发

2022-07-14 15:40:57 +08:00
parent 0b7ae25121
commit 7839534ea6
10 changed files with 523 additions and 29 deletions
--- a/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
+++ b/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
@@ -2,10 +2,11 @@
  <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>11:51</span></div>
+        <div class="itemYesterday">昨天<span>{{ calendarList[nowDate - 1] }}</span></div>
        <div>晴风小区志愿者活动</div>
      </div>
      <div class="today">
@@ -16,7 +17,7 @@
        <div class="itemTomorrow">明天<span>11:51</span></div>
        <div @click="showMore(index)">晴风小区志愿者活动</div>
        <div class="isShow" @click="showMore()">{{ isShow ? '收起' : '展开' }}</div>
-        <span ></span>
+        <span></span>
      </div>
    </div>
    
@@ -25,7 +26,7 @@
    <div class="brokenEcharts">
      <div class="broken_title">
        <div class="broken_left">宣发效果</div>
-        <div class="broken_right" @click="filterShow = true">筛选</div>
+        <div class="broken_right" @click="filterShow = true"><img src="./images/shaixuan.png" alt="">筛选</div>
      </div>
      <div class="broken_statistics">
        <div class="broken_item">
@@ -51,35 +52,59 @@
    <div class="columnarEcharts">
      <div class="broken_title">
        <div class="broken_left">宣发明细</div>
-        <div class="broken_right">筛选</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">
+    <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">取消</div>
+          <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 quotaList" :key="index" :class="index == quotaIndex ? 'active' : ''" @click.stop="quotaIndex=index">{{item.label}}</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>
-            <!-- <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> -->
+            <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>
@@ -97,25 +122,113 @@ export default {
      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({
@@ -170,6 +283,7 @@ export default {
        ]
      })
    },
+    // 宣发次数
    getBrokenEcharts2() {
      this.brokenEcharts2 = echarts.init(document.getElementById('brokenEcharts2'))
      this.brokenEcharts2.setOption({
@@ -224,6 +338,7 @@ export default {
        ]
      })
    },
+    // 宣发任务数
    getBrokenEcharts3() {
      this.brokenEcharts3 = echarts.init(document.getElementById('brokenEcharts3'))
      this.brokenEcharts3.setOption({
@@ -278,7 +393,20 @@ export default {
        ]
      })
    },
-    // 柱状图
+    // 宣发明细
+    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({
@@ -314,6 +442,8 @@ export default {
        ]
      })
    },
+
+
    
  }
 }
@@ -376,7 +506,7 @@ export default {
      display: flex;
      justify-content: space-between;
      height: 96px;
-      line-height: 96px;
+      align-items: center;

      .broken_left {
        font-size: 32px;
@@ -385,7 +515,24 @@ export default {

      .broken_right {
        font-size: 24px;
-        color: #3399FF;
+        // 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;
+        }
      }
    }

@@ -435,13 +582,15 @@ export default {
  }

  .popup{
-    padding: 0 32px;
-    padding-bottom: 60px;
+    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{
@@ -451,6 +600,8 @@ export default {
      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;
@@ -475,6 +626,8 @@ export default {
      overflow-y: scroll;
    }
    .type-list{
+      padding: 0 32px;
+      box-sizing: border-box;
      margin-bottom: 32px;
      .type-title{
        line-height: 108px;
@@ -490,7 +643,6 @@ export default {
        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;
@@ -500,11 +652,46 @@ export default {
        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;
+      }
    }
  }

-  ::v-deep .popup{
-    height: 800px;
+  .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;
+    }
  }
 }