群发居民群

2022-07-13 14:35:20 +08:00
parent 9eb1d579b0
commit 1a0d42890d
3 changed files with 229 additions and 32 deletions
--- a/src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue
+++ b/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() {
-      this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
-      this.brokenEcharts.setOption({
+    getBrokenEcharts1() {
+      this.brokenEcharts1 = echarts.init(document.getElementById('brokenEcharts1'))
+      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: {
+              color: '#4E8EEE'
+            }
          },
+        ]
+      })
+    },
+    getBrokenEcharts2() {
+      this.brokenEcharts2 = echarts.init(document.getElementById('brokenEcharts2'))
+      this.brokenEcharts2.setOption({
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '2%',
+          right: '5%',
+          bottom: '2%',
+          containLabel: true
+        },
+        dataZoom: [
          {
-            name: '宣发次数',
-            type: 'line',
-            data: [220, 182, 191, 234, 290, 330]
+            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%;
--- a/src/project/saas/AppPropagandaStatistics/calendarInfo.vue
+++ b/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>11:00</div>
-          <div>晴风小区志愿者活动</div>
+        <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>{{ item.time }}</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>11:00</div>
-          <div>晴风小区志愿者活动</div>
+        <div v-for="(item, index) in list" :key="index" 
+        :class="{'color1': index % 4 == 0,'color2': index % 4 == 1,'color3': index % 4 == 2,'color4': index % 4 == 3 }"
+        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>
--- a/src/project/saas/AppPropagandaStatistics/groupSendResident.vue
+++ b/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>