自定义时间选择

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

@@ -100,6 +100,13 @@
         </div>
         <div id="departBarChart"></div>
       </div>
+
+      <ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter :show-close="false">
+        <el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
+          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+        </el-date-picker>
+        <el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
+      </ai-dialog>
     </template>
   </ai-list>
 </template>
@@ -132,7 +139,8 @@
         dateTypeList: ['近7天', '近30天', '近1年', '自定义'],
         departData: {},
         departBarChart: null,
-
+        dialogDate: false,
+        timeList: '',
 
         type: '',
       }
@@ -188,6 +196,22 @@
       this.dict.load("mstSendType")
     },
     methods: {
+      selectDete() {
+        console.log(this.timeList)
+        if(!this.timeList || !this.timeList.length) {
+          return this.$message.error('请选择自定义时间');
+        }
+
+        if(this.effectType == 3) { //宣发效果
+          this.getEffect()
+        }
+
+        if(this.departType == 3) { //宣发明细
+          this.getDepart()
+        }
+
+        this.dialogDate = false
+      },
       searchMonthChange() {
         this.calendarDate = this.searchMonth + '-1'
       },
@@ -204,10 +228,16 @@
       },
       changeEffectType(type) {
         this.effectType = type
-        this.getEffect()
+        if(type == 3) {
+          this.dialogDate = true
+          this.timeList = []
+        }else {
+          this.getEffect()
+        }
       },
       getEffect() {
-        this.instance.post(`/app/appmasssendingtask/statisticsEffect?type=${this.effectType}`).then(res => {
+        var startTime = this.timeList[0] || '' , endTime = this.timeList[1] || ''
+        this.instance.post(`/app/appmasssendingtask/statisticsEffect?type=${this.effectType}&startTime=${startTime}&endTime=${endTime}`).then(res => {
           if (res.code == 0) {
             this.effectData = res.data
             var xData = [], createData = [], executeData = [], receiveData = []
@@ -259,10 +289,16 @@
       },
       changeDepartType(type) {
         this.departType = type
-        this.getDepart()
+        if(type == 3) {
+          this.dialogDate = true
+          this.timeList = []
+        }else {
+          this.getDepart()
+        }
       },
-      getDepart() { // ${this.departType}
+      getDepart() {
-        this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=1`).then(res => {
+        var startTime = this.timeList[0] || '' , endTime = this.timeList[1] || ''
+        this.instance.post(`/app/appmasssendingtask/statisticsDepart?type=${this.departType}&startTime=${startTime}&endTime=${endTime}`).then(res => {
           if (res.code == 0) {
             // this.dateList = res.data
             // this.getTaskList(this.chooseDay)
@@ -291,16 +327,16 @@
             bottom: 90,
             containLabel: true
           },
-          toolbox: {
+          // toolbox: {
-            feature: {
+          //   feature: {
-              dataZoom: {
+          //     dataZoom: {
-                yAxisIndex: false
+          //       yAxisIndex: false
-              },
+          //     },
-              saveAsImage: {
+          //     saveAsImage: {
-                pixelRatio: 2
+          //       pixelRatio: 2
-              }
+          //     }
-            }
+          //   }
-          },
+          // },
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -501,6 +537,7 @@
           border: 1px solid #D0D4DC;
           margin-right: 8px;
           box-sizing: border-box;
+          cursor: pointer;
         }
         .active{
           border: 1px solid #26f;