宣发统计

src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

@@ -1,10 +1,31 @@
 <template>
   <div class="AppPropagandaStatistics">
+    <div class="calendar_header">
+      <u-section title="宣发日历" :show-line="false"  sub-title="查看更多"></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>
     
-    <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
 
     <!-- 折线图 -->
     <div class="brokenEcharts">
+      <div>
+        
+      </div>
       <div id="brokenEcharts"></div>
     </div>
     <div class="columnarEcharts">
@@ -17,26 +38,22 @@
 </template>
 
 <script>
-import { uniCalendar } from "@dcloudio/uni-ui"
+
 import echarts from 'echarts';
 export default {
   name: 'AppPropagandaStatistics',
   appName: '宣发统计',
   data() {
     return {
-      date: '',
-      selected: [{date: '2022-07-08',}],
+      isShow: false,
       brokenEcharts: null,
       columnarEcharts: null,
       pieEcharts: null,
     }
   },
-  components: {
-    uniCalendar
-  },
+  
   onShow() {
     document.title = '宣发统计'
-    
   },
   mounted() {
     this.getBrokenEcharts()
@@ -44,9 +61,8 @@ export default {
     this.getPieEcharts()
   },
   methods: {
-    change(val) {
-      this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
-    },
+    showMore() {},
+    
     // 折线图
     getBrokenEcharts() {
       this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
@@ -55,6 +71,8 @@ export default {
           trigger: 'axis'
         },
         legend: {
+          selectedMode: false,
+          orient: 'horizontal',
           data: ['触达人次', '宣发次数', '宣发任务数']
         },
         grid: {
@@ -66,7 +84,7 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['2022.02', '2202.03', '2202.04', '2202.05', '2202.06', '2202.07']
+          data: ['2月', '3月', '4月', '5月', '6月', '7月']
         },
         yAxis: {
           type: 'value',
@@ -75,20 +93,17 @@ export default {
           {
             name: '触达人次',
             type: 'line',
-            stack: 'Total',
             data: [120, 132, 101, 134, 90, 230]
           },
           {
             name: '宣发次数',
             type: 'line',
-            stack: 'Total',
             data: [220, 182, 191, 234, 290, 330]
           },
           {
             name: '宣发任务数',
             type: 'line',
-            stack: 'Total',
-            data: [800, 232, 201, 154, 190, 330]
+            data: [1000, 232, 201, 154, 190, 330]
           },
         ]
       })
@@ -145,14 +160,15 @@ export default {
               show: false
             },
             data: [
-              {value: 5, name: '群发送达率',label:{
+              {value: 10, name: '群发送达率', label:{
                 normal:{ 
                   show:true,
-                  formatter: '{d}%',
+                  formatter: '{d}%\n群发送达率',
                   textStyle: {
                     fontSize: 16,
                   },
-                }}},
+                }}
+              },
               {value: 120, name: '邮件营销'}
             ]
           }
@@ -165,20 +181,54 @@ export default {
 
 <style lang="scss" scoped>
 .AppPropagandaStatistics {
-  ::v-deep .uni-calendar-item__weeks-box-circle {
-    top: 77%;
-    right: 45%;
-    border-radius: 12px;
-  }
-  ::v-deep .uni-calendar__header {
-    height: 76px;
-  }
-  ::v-deep .uni-calendar__backtoday {
-    display: none
-  }
 
+  .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 {
-    margin: 32px 0,
+    padding: 32px 0 60px 0,
+    
   }
 
   .brokenEcharts,
@@ -191,6 +241,7 @@ export default {
     #pieEcharts {
       width: 100%;
       height: 400px;
+      
     }
   }
 }

src/project/saas/AppPropagandaStatistics/calendarInfo.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="calendarInfo">
+    <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
+  </div>
+</template>
+
+<script>
+import { uniCalendar } from "@dcloudio/uni-ui"
+export default {
+  data() {
+    return {
+      date: '',
+      selected: [{date: '2022-07-12'}],
+    }
+  },
+  components: {
+    uniCalendar
+  },
+  methods: {
+    change(val) {
+      this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
+    },
+  },
+  onShow() {},
+
+}
+</script>
+
+<style lang="scss" scoped>
+.calendarInfo {
+  ::v-deep .uni-calendar-item__weeks-box-circle {
+    top: 77%;
+    right: 45%;
+    border-radius: 12px;
+  }
+  ::v-deep .uni-calendar__header {
+    height: 76px;
+  }
+  ::v-deep .uni-calendar__backtoday {
+    display: none
+  }
+}
+</style>

src/project/saas/AppPropagandaStatistics/groupSendDetail.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="groupSendDetail"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {},
+  onShow() {},
+
+}
+</script>
+
+<style lang="scss" scoped>
+.groupSendDetail {}
+</style>

src/project/saas/AppPropagandaStatistics/groupSendResident.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="groupSendResident"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      current: 1,
+    }
+  },
+  methods: {},
+  onShow() {},
+  onReachBottom() {
+    this.current ++
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.groupSendResident {}
+</style>

vue.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   transpileDependencies: ['uview-ui'],
-  transpileDependencies:['@dcloudio/uni-ui'],
   devServer: {
     proxy: {
     }