群发居民群

src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

@@ -41,12 +41,17 @@
           <div>200</div>
         </div>
       </div>
-      <div id="brokenEcharts"></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 class="broken_right">筛选</div>
       </div>
       <div id="columnarEcharts"></div>
     </div>
@@ -90,7 +95,9 @@ export default {
   data() {
     return {
       isShow: false,
-      brokenEcharts: null,
+      brokenEcharts1: null,
+      brokenEcharts2: null,
+      brokenEcharts3: null,
       columnarEcharts: null,
       pieEcharts: null,
       filterShow: false,
@@ -101,7 +108,9 @@ export default {
     document.title = '宣发统计'
   },
   mounted() {
-    this.getBrokenEcharts()
+    this.getBrokenEcharts1()
+    this.getBrokenEcharts2()
+    this.getBrokenEcharts3()
     this.getColumnarEcharts()
     this.getPieEcharts()
   },
@@ -112,18 +121,12 @@ export default {
       uni.navigateTo({url: `./calendarInfo`})
     },
     // 折线图
-    getBrokenEcharts() {
+    getBrokenEcharts1() {
-      this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
+      this.brokenEcharts1 = echarts.init(document.getElementById('brokenEcharts1'))
-      this.brokenEcharts.setOption({
+      this.brokenEcharts1.setOption({
         tooltip: {
           trigger: 'axis'
         },
-        legend: {
-          selectedMode: false,
-          orient: 'horizontal',
-          padding: [25,0,0,0],
-          data: ['触达人次', '宣发次数', '宣发任务数']
-        },
         grid: {
           left: '2%',
           right: '5%',
@@ -160,19 +163,122 @@ export default {
         },
         series: [
           {
-            name: '触达人次',
             type: 'line',
-            data: [120, 132, 101, 134, 90, 230]
+            data: [120, 132, 101, 134, 90, 230],
+            lineStyle: {
+              color: '#4B87FE',
             },
-          {
+            itemStyle: {
-            name: '宣发次数',
+              color: '#4E8EEE'
-            type: 'line',
+            }
-            data: [220, 182, 191, 234, 290, 330]
           },
+        ]
+      })
+    },
+    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: [
           {
-            name: '宣发任务数',
             type: 'line',
-            data: [1000, 232, 201, 154, 190, 330]
+            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'
+            }
           },
         ]
       })
@@ -348,6 +454,13 @@ export default {
         }
       }
     }
+
+    .title {
+      padding: 30px 0;
+      box-sizing: border-box;
+      font-size: 32px;
+      font-weight: 600;
+    }
   }
 
   .brokenEcharts,
@@ -355,7 +468,9 @@ export default {
   .pieEcharts {
     background: #FFF;
 
-    #brokenEcharts,
+    #brokenEcharts1,
+    #brokenEcharts2,
+    #brokenEcharts3,
     #columnarEcharts,
     #pieEcharts {
       width: 100%;

src/project/saas/AppPropagandaStatistics/calendarInfo.vue

@@ -4,19 +4,21 @@
 
     <div class="dailyMatters">
       <div>
-        <div :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
+        <div v-for="(item, index) in list.slice(0,3)" :key="index" :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
-          <div>11:00</div>
+          <div>{{ item.time }}</div>
-          <div>晴风小区志愿者活动</div>
+          <div>{{ item.info }}</div>
         </div>
       </div>
       <div>
-        <div :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
+        <div v-for="(item, index) in list" :key="index" 
-          <div>11:00</div>
+        :class="{'color1': index % 4 == 0,'color2': index % 4 == 1,'color3': index % 4 == 2,'color4': index % 4 == 3 }"
-          <div>晴风小区志愿者活动</div>
+        class="daily_item">
+          <div>{{ item.time }}</div>
+          <div>{{ item.info }}</div>
         </div>
       </div>
 
-      <div class="readMore">查看更多</div>
+      <div class="readMore" @click="toGroup">查看更多</div>
     </div>
   </div>
 </template>
@@ -28,6 +30,10 @@ export default {
     return {
       date: '',
       selected: [{date: '2022-07-12'}],
+      list: [{
+        time: '11:00',
+        info: '晴风小区志愿者活动'
+      }]
     }
   },
   components: {
@@ -37,8 +43,13 @@ export default {
     change(val) {
       this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
     },
+    toGroup() {
+      uni.navigateTo({url: './groupSendResident'})
+    }
+  },
+  onShow() {
+    document.title = '宣发日历'
   },
-  onShow() {},
 
 }
 </script>

src/project/saas/AppPropagandaStatistics/groupSendResident.vue

@@ -1,5 +1,25 @@
 <template>
-  <div class="groupSendResident"></div>
+  <div class="groupSendResident">
+    <AiTopFixed>
+      <div class="search">
+        <div class="searchBox">
+          <u-search placeholder="请输入任务名称" v-model="name" :show-action="false"></u-search>
+        </div>
+        <div class="filterBtn">筛选</div>
+      </div>
+    </AiTopFixed>
+    <div class="resident_list">
+      <div class="card">
+        <div class="card_title">
+          <div class="card_left">晴风小区志愿者活动</div>
+          <div class="card_right"><span></span>进行中</div>
+        </div>
+        <div>创建时间：<span>2022-07-12</span></div>
+        <div>共需<span class="num">56</span>名成员完成群发，目前已完成<span class="num">65%</span></div>
+        <div>创建部门：市委/宣传部/一组</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -7,10 +27,13 @@ export default {
   data() {
     return {
       current: 1,
+      name: ''
     }
   },
   methods: {},
-  onShow() {},
+  onShow() {
+    document.title = '群发居民群'
+  },
   onReachBottom() {
     this.current ++
   },
@@ -18,5 +41,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.groupSendResident {}
+.groupSendResident {
+  .search {
+    display: flex;
+    height: 80px;
+    align-items: center;
+    justify-content: space-between;
+
+    .searchBox {
+      width: 562px;
+    }
+    .filterBtn {
+      width: calc( 100% - 562px);
+    }
+  }
+  .resident_list {
+    padding: 24px 32px 20px 32px;
+    box-sizing: border-box;
+    .card {
+      background: #FFF;
+      border-radius: 16px;
+      padding: 30px;
+      & > div {
+        padding: 10px 0;
+      }
+      .num {
+        color: #3AA0FF;
+      }
+      .card_title {
+        display: flex;
+        justify-content: space-between;
+        .card_left {
+          font-size: 32px;
+          color: #000000;
+          font-weight: 600;
+        }
+        .card_right {
+          span {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: #3399FF;
+            border-radius: 50%;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>