宣发日历

project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue

@@ -5,53 +5,47 @@
         <ai-title title="宣发日历"></ai-title>
         <div class="flex-content">
           <div class="flex-left">
-            <el-calendar  v-model="value">
+            <div class="date-header">
+              <p>{{chooseYear}}年{{chooseMonth}}月</p>
+              <div>
+                <el-date-picker size="small"
+                  v-model="searchMonth"
+                  type="month" value-format="yyyy-MM"
+                  placeholder="选择日期" @change="searchMonthChange">
+                </el-date-picker>
+              </div>
+            </div>
+            <el-calendar v-model="calendarDate">
               <template 
                 slot="dateCell"
                 slot-scope="{date, data}" >
-                <!-- <p :class="data.isSelected ? 'is-selected' : ''">
-                  {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
-                </p> -->
                 <div class="flex-date">
-                  <span>{{data.day.substring(8, 10)}}</span>
+                  <span>{{Number(data.day.substring(8, 10))}}</span>
-                  <span class="tips" v-if="data.day.substring(5, 7) == month && dateList[data.day.substring(8, 10)] && dateList[data.day.substring(8, 10)].length">{{dateList[data.day.substring(8, 10)].length}}</span>
+                  <span class="tips" v-if="data.day.substring(5, 7) == chooseMonth && dateList[Number(data.day.substring(8, 10))] && dateList[Number(data.day.substring(8, 10))].taskList.length">{{dateList[Number(data.day.substring(8, 10))].taskList.length}}</span>
                 </div>
               </template>
             </el-calendar>
           </div>
           <div class="flex-right">
-            <div class="title">7月19日宣发内容</div>
+            <div class="title">{{chooseMonth}}月{{chooseDay}}日宣发内容</div>
             <div class="list-content">
               <el-timeline>
-                <el-timeline-item placement="top">
+                <el-timeline-item v-for="(item, index) in taskList" :key="index">
                   <el-card>
                     <div class="flex-between">
-                      <p class="item-title">晴风小区志愿者活动</p>
+                      <p class="item-title">{{item.taskTitle}}</p>
-                      <span class="item-time">10:00</span>
+                      <span class="item-time" v-if="item.createTime">{{item.createTime.substring(10, 16)}}</span>
                     </div>
-                    <div class="item-info item-created">创建人：<span class="name">张三</span></div>
+                    <div class="item-info item-created">创建人：<span class="name">{{item.createUserId}}</span></div>
-                    <div class="item-info">创建部门：<span>市委/宣传部/一组</span></div>
+                    <div class="item-info">创建部门：<span>{{item.createUserDept}}</span></div>
                     <div class="flex-between">
-                      <div class="item-info">群发类型：<span>群发到居民群</span></div>
+                      <div class="item-info">群发类型：<span>{{$dict.getLabel('mstSendType', item.sendType)}}</span></div>
-                      <span class="item-btn">详情</span>
-                    </div>
-                  </el-card>
-                </el-timeline-item>
-                <el-timeline-item placement="top">
-                  <el-card>
-                    <div class="flex-between">
-                      <p class="item-title">晴风小区志愿者活动</p>
-                      <span class="item-time">10:00</span>
-                    </div>
-                    <div class="item-info item-created">创建人：<span class="name">张三</span></div>
-                    <div class="item-info">创建部门：<span>市委/宣传部/一组</span></div>
-                    <div class="flex-between">
-                      <div class="item-info">群发类型：<span>群发到居民群</span></div>
                       <span class="item-btn">详情</span>
                     </div>
                   </el-card>
                 </el-timeline-item>
               </el-timeline>
+              <ai-empty v-if="!taskList.length" />
             </div>
           </div>
         </div>
@@ -60,10 +54,7 @@
         <div class="flex-between mar-b16">
           <ai-title title="宣发效果"></ai-title>
           <div class="right-search">
-            <div class="time-select active">近7天</div>
+            <div class="time-select" :class="effectType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeEffectType(index)">{{item}}</div>
-            <div class="time-select">近30天</div>
-            <div class="time-select">近1年</div>
-            <div class="time-select">自定义</div>
             <ai-select size="medium" clearable placeholder="宣发部门" v-model="type" :selectList="dict.getDict('yesOrNo')"/>
           </div>
         </div>
@@ -71,31 +62,31 @@
           <div class="flex1">
             <div class="header">
               <p>累计创建宣发任务数</p>
-              <h2>3,324</h2>
+              <h2>{{effectData.createCount}}</h2>
             </div>
             <div class="chart-content">
               <div class="chart-title">宣发任务数</div>
-              <div></div>
+              <div class="chart-box" id="createChart"></div>
             </div>
           </div>
           <div class="flex1">
             <div class="header">
               <p>累计执行宣发次数</p>
-              <h2>3,324</h2>
+              <h2>{{effectData.executeCount}}</h2>
             </div>
             <div class="chart-content">
               <div class="chart-title">宣发次数</div>
-              <div></div>
+              <div class="chart-box" id="executeChart"></div>
             </div>
           </div>
           <div class="flex1 mar-r0">
             <div class="header">
               <p>累计触达人次</p>
-              <h2>3,324</h2>
+              <h2>{{effectData.receiveCount}}</h2>
             </div>
             <div class="chart-content">
               <div class="chart-title">触达人次</div>
-              <div></div>
+              <div class="chart-box" id="receiveChart"></div>
             </div>
           </div>
         </div>
@@ -104,18 +95,17 @@
         <div class="flex-between mar-b16">
           <ai-title title="宣发明细"></ai-title>
           <div class="right-search">
-            <div class="time-select active">近7天</div>
+            <div class="time-select" :class="departType == index ? 'active' : ''" v-for="(item, index) in dateTypeList" :key="index" @click="changeDepartType(index)">{{item}}</div>
-            <div class="time-select">近30天</div>
-            <div class="time-select">近1年</div>
-            <div class="time-select mar-r0">自定义</div>
           </div>
         </div>
+        <div id="departBarChart"></div>
       </div>
     </template>
   </ai-list>
 </template>
 
 <script>
+  import * as echarts from "echarts";
   export default {
     name: 'AppAnnounceStatistics',
 
@@ -127,45 +117,174 @@
     },
     data () {
       return {
-        value: new Date(),
+        calendarDate: new Date(),
-        dateList: {
+        dateList: {},
-          '01': {
+        chooseYear: '',
-            length: 3
+        chooseMonth: '',
-          },
+        chooseDay: '',
-          '02': {
+        searchMonth: '',
-            length: 0
+        taskList: [],
-          },
+        effectType: 0, // 宣发效果类型 0：近七天、1：近30天、2：近一年、3：自定义
-        },
+        effectData: {},
-        month: 7,
+        createChart: null,
-        day: '',
+        executeChart: null,
-        type: ''
+        receiveChart: null,
+        departType: 0, // 宣发明细类型 0：近七天、1：近30天、2：近一年、3：自定义
+        dateTypeList: ['近7天', '近30天', '近1年', '自定义'],
+        departData: {},
+        departBarChart: null,
+
+
+        type: '',
       }
     },
     watch: {
-      value: function() {
+      calendarDate: function() {
-        var year = this.value.getFullYear();
+        var year = '' , month = '', date = ''
-        var month = this.value.getMonth() + 1;
+        if(this.calendarDate.length == 9) { // 月份选择器触发
-        var date=this.value.getDate()
+          year = this.calendarDate.substring(0, 4)
-        if (date >= 1 && date <= 9) {//日如果小于10就补个0
+          month = this.calendarDate.substring(5, 7)
-          date = "0" + date;
+          date = this.calendarDate.substring(8, 10)
-        }
+        }else { // 日历点击
-        if (month >= 1 && month <= 9) {//月如果小于10就补个0
+          year = this.calendarDate.getFullYear();
+          month = this.calendarDate.getMonth() + 1;
+          date = this.calendarDate.getDate()
+          if (month >= 1 && month <= 9) {
             month = "0" + month;
           }
-        console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
+
-        this.getCalendarList()   //  调用接口，把拼接好的参数传到后台
+          if(this.chooseMonth != month) { // 日历点击不同月
+            this.searchMonth = ''
+          }
+          
+        }
+
+        this.chooseDay = date
+
+        if(this.chooseMonth != month || this.chooseYear != year) { // 不同年/不同月重新请求日历列表
+          this.getCalendarList(year, month)
+        } else {
+          this.getTaskList(date)
+        }
+
+        this.chooseMonth = month
+        this.chooseYear = year
+        
       }
     },
     created() {
-      this.dict.load("yesOrNo")
+      var year = this.calendarDate.getFullYear();
+      var month = this.calendarDate.getMonth() + 1;
+      var date = this.calendarDate.getDate()
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      this.chooseMonth = month
+      this.chooseYear = year
+      this.chooseDay = date
+      this.getCalendarList(year, month)
+      this.getEffect()
+      this.getDepart()
+      this.dict.load("mstSendType")
     },
     mounted() {
 
     },
     methods: {
-      getCalendarList(){
+      searchMonthChange() {
-        console.log('接口调用成功');
+        this.calendarDate = this.searchMonth + '-1'
+      },
+      getCalendarList(year, month){
+        this.instance.post(`/app/appmasssendingtask/statisticsCalendar?yyyyMM=${year}${month}`).then(res => {
+          if (res.code == 0) {
+            this.dateList = res.data
+            this.getTaskList(this.chooseDay)
           } 
+        })
+      },
+      getTaskList(day) {
+        this.taskList = this.dateList[day].taskList
+      },
+      changeEffectType(type) {
+        this.effectType = type
+        this.getEffect()
+      },
+      getEffect() {
+        this.instance.post(`/app/appmasssendingtask/statisticsEffect?type=${this.effectType}`).then(res => {
+          if (res.code == 0) {
+            this.effectData = res.data
+            var xData = [], createData = [], executeData = [], receiveData = []
+            res.data.trend.map(e => {
+              xData.push(e.ymd)
+              createData.push(e.createCount)
+              executeData.push(e.executeCount)
+              receiveData.push(e.receiveCount)
+            })
+
+            this.setLineChart(xData, createData, 'createChart', ['#2891FF'])
+            this.setLineChart(xData, executeData, 'executeChart', ['#FFB865'])
+            this.setLineChart(xData, receiveData, 'receiveChart', ['#26D52B'])
+          } 
+        })
+      },
+      setLineChart(xData, yData, id, colorList) {
+        this[id] = echarts.init(document.querySelector(`#${id}`))
+        var option = {
+          xAxis: {
+            type: 'category',
+            data: xData
+          },
+          yAxis: {
+            type: 'value'
+          },
+          grid: {
+            left: '10px',
+            right: '28px',
+            bottom: '14px',
+            top: '30px',
+            containLabel: true
+          },
+          color: colorList,
+          series: [
+            {
+              data: yData,
+              type: 'line'
+            }
+          ]
+        }
+        this[id].setOption(option)
+      },
+      changeDepartType(type) {
+        this.departType = type
+        this.getDepart()
+      },
+      getDepart() {
+        this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=${this.departType}`).then(res => {
+          if (res.code == 0) {
+            // this.dateList = res.data
+            // this.getTaskList(this.chooseDay)
+          } 
+        })
+        // 
+      },
+      setBarChart() {
+        var option = {
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: [120, 200, 150, 80, 70, 110, 130],
+              type: 'bar'
+            }
+          ]
+        };
+      }
+
     }
   }
 </script>
@@ -195,6 +314,15 @@
         margin-top: 16px;
         .flex-left{
           width: 50%;
+          .date-header{
+            padding: 12px 16px;
+            border: 1px solid #eee;
+            display: flex;
+            justify-content: space-between;
+            p{
+              line-height: 32px;
+            }
+          }
           .flex-date{
             display: flex;
             justify-content: space-between;
@@ -329,10 +457,18 @@
               color: #333;
               line-height: 24px;
             }
+            .chart-box{
+              width: 100%;
+              height: 280px;
+            }
           }
         }
         
       }
+      #departBarChart{
+        width: 100%;
+        height: 300px;
+      }
     }
     
 
@@ -351,7 +487,7 @@
       color: #888;
     }
     ::v-deep .el-calendar__header{
-      border: 1px solid #eee;
+      display: none;
     }
     ::v-deep .el-calendar__body{
       padding: 0;