宣发日历

src/project/saas/AppPropagandaStatistics/AppPropagandaStatistics.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="AppPropagandaStatistics">
     <div class="calendar_header">
-      <u-section title="宣发日历" :show-line="false"  sub-title="查看更多"></u-section>
+      <u-section title="宣发日历" :show-line="false"  sub-title="查看更多" @click="readMore"></u-section>
     </div>
     <div class="threeDays">
       <div class="yesterday">
@@ -23,22 +23,66 @@
 
     <!-- 折线图 -->
     <div class="brokenEcharts">
-      <div>
+      <div class="broken_title">
-        
+        <div class="broken_left">宣发效果</div>
+        <div class="broken_right" @click="filterShow = true">筛选</div>
+      </div>
+      <div class="broken_statistics">
+        <div class="broken_item">
+          <div>创建宣发任务数</div>
+          <div>200</div>
+        </div>
+        <div class="broken_item">
+          <div>执行宣发次数</div>
+          <div>200</div>
+        </div>
+        <div class="broken_item">
+          <div>触达人次</div>
+          <div>200</div>
+        </div>
       </div>
       <div id="brokenEcharts"></div>
     </div>
     <div class="columnarEcharts">
+      <div class="broken_title">
+        <div class="broken_left">宣发明细</div>
+        <div class="broken_right"></div>
+      </div>
       <div id="columnarEcharts"></div>
     </div>
     <div class="pieEcharts">
       <div id="pieEcharts"></div>
     </div>
+
+    <u-popup v-model="filterShow" mode="bottom">
+      <div class="popup">
+        <div class="tips"></div>
+        <div class="title">
+          <div class="cancel" @click.stop="filterShow=false">取消</div>
+          <p>筛选条件</p>
+          <div class="confirm" @click.stop="selectConfirm">确定</div>
+        </div>
+        <scroll-view class="select-content" scroll-y="true">
+          <div class="type-list">
+            <div class="type-title">宣发时间</div>
+            <!-- <div class="item" v-for="(item, index) in quotaList" :key="index" :class="index == quotaIndex ? 'active' : ''" @click.stop="quotaIndex=index">{{item.label}}</div> -->
+          </div>
+          <div class="type-list">
+            <div class="type-title">宣发部门</div>
+            <!-- <div class="item" v-for="(item, index) in typeList" :key="index" :class="index == typeIndex ? 'active' : ''" @click.stop="typeIndex=index">{{item.dictName}}</div> -->
+          </div>
+
+          <div>
+            <!-- <div>重置</div>
+            <div>确认</div> -->
+          </div>
+        </scroll-view>
+      </div>
+    </u-popup>
   </div>
 </template>
 
 <script>
-
 import echarts from 'echarts';
 export default {
   name: 'AppPropagandaStatistics',
@@ -49,6 +93,7 @@ export default {
       brokenEcharts: null,
       columnarEcharts: null,
       pieEcharts: null,
+      filterShow: false,
     }
   },
   
@@ -63,6 +108,9 @@ export default {
   methods: {
     showMore() {},
     
+    readMore() {
+      uni.navigateTo({url: `./calendarInfo`})
+    },
     // 折线图
     getBrokenEcharts() {
       this.brokenEcharts = echarts.init(document.getElementById('brokenEcharts'))
@@ -73,21 +121,42 @@ export default {
         legend: {
           selectedMode: false,
           orient: 'horizontal',
+          padding: [25,0,0,0],
           data: ['触达人次', '宣发次数', '宣发任务数']
         },
         grid: {
           left: '2%',
-          right: '8%',
+          right: '5%',
-          bottom: '3%',
+          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: [
           {
@@ -112,15 +181,24 @@ export default {
     getColumnarEcharts() {
       this.columnarEcharts = echarts.init(document.getElementById('columnarEcharts'))
       this.columnarEcharts.setOption({
-        title: {
-          text: '宣发明细'
-        },
         xAxis: {
           type: 'category',
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
           data: ['卫健委', '法院', '团委', '扶贫办', '警察局']
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
         },
         series: [
           {
@@ -226,9 +304,50 @@ export default {
   }
   
   
-  .brokenEcharts {
+  .brokenEcharts,
-    padding: 32px 0 60px 0,
+  .columnarEcharts {
+    margin: 24px 0 24px 0;
+    padding: 0 32px 32px 32px;
+    box-sizing: border-box;
 
+    .broken_title {
+      display: flex;
+      justify-content: space-between;
+      height: 96px;
+      line-height: 96px;
+
+      .broken_left {
+        font-size: 32px;
+        font-weight: 600;
+      }
+
+      .broken_right {
+        font-size: 24px;
+        color: #3399FF;
+      }
+    }
+
+    .broken_statistics {
+      display: flex;
+      padding: 24px 0;
+      box-sizing: border-box;
+
+      .broken_item {
+        flex: 1;
+        text-align: center;
+
+        div:first-child {
+          font-size: 24px;
+          color: #999999;
+          padding: 10px 0;
+        }
+        div:last-child {
+          font-size: 36px;
+          color: #000000;
+          font-weight: 600;
+        }
+      }
+    }
   }
 
   .brokenEcharts,
@@ -241,8 +360,83 @@ export default {
     #pieEcharts {
       width: 100%;
       height: 400px;
+      background: #F9F9F9;
+      border-radius: 8px;
+    }
 
   }
+
+  .popup{
+    padding: 0 32px;
+    padding-bottom: 60px;
+    .tips{
+      width: 80px;
+      height: 6px;
+      background: #DDDDDD;
+      border-radius: 4px;
+      margin: 32px auto 8px auto;
+    }
+    .title{
+      height: 48px;
+      line-height: 48px;
+      font-size: 34px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #222;
+      padding-bottom: 32px;
+      .cancel{
+        display: inline-block;
+        width: 200px;
+        color: #aaa;
+      }
+      .confirm{
+        display: inline-block;
+        width: 200px;
+        text-align: right;
+        color: #333;
+      }
+      p{
+        display: inline-block;
+        width: calc(100% - 400px);
+        text-align: center;
+        font-size: 28px;
+      }
+    }
+    .select-content{
+      height: calc(100% - 100px);
+      overflow-y: scroll;
+    }
+    .type-list{
+      margin-bottom: 32px;
+      .type-title{
+        line-height: 108px;
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+      }
+      .item{
+        display: inline-block;
+        width: 210px;
+        text-align: center;
+        line-height: 64px;
+        background: #F3F4F7;
+        border-radius: 4px;
+        // padding: 0 80px;
+        margin: 0 16px 16px 0;
+        font-size: 28px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+      }
+      .active{
+        background: #1365DD;
+        color: #fff;
+      }
+    }
+  }
+
+  ::v-deep .popup{
+    height: 800px;
   }
 }
 

src/project/saas/AppPropagandaStatistics/calendarInfo.vue

@@ -1,6 +1,23 @@
 <template>
   <div class="calendarInfo">
     <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change"/>
+
+    <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>
+      </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>
+      </div>
+
+      <div class="readMore">查看更多</div>
+    </div>
   </div>
 </template>
 
@@ -35,9 +52,63 @@ export default {
   }
   ::v-deep .uni-calendar__header {
     height: 76px;
+    justify-content: space-around;
+    border-bottom-style: none;
+  }
+  ::v-deep .uni-calendar__weeks-day {
+    border-bottom-style: none;
+  }
+  ::v-deep .uni-calendar__weeks-day-text,
+  ::v-deep .uni-calendar__header-text,
+  ::v-deep .uni-calendar-item__weeks-box-text {
+    font-size: 28px;
+  }
+  ::v-deep .uni-calendar__header-btn {
+    width: 16px;
+    height: 16px;
+    border-left-color: #5297FF;
+    border-top-color: #5297FF;
   }
   ::v-deep .uni-calendar__backtoday {
     display: none
   }
+
+  .dailyMatters {
+    padding: 30px;
+    box-sizing: border-box;
+    .daily_item {
+      background: #FFF;
+      padding: 30px 20px 30px 50px;
+      margin-bottom: 30px;
+      border-radius: 0px 16px 16px 0px;
+      
+      div:first-child {
+        color: #999999;
+        margin-bottom: 20px;
+      }
+    }
+    .color1 {
+      border-left: 6px solid #3AA0FF;
+    }
+    .color2 {
+      border-left: 6px solid #50CB74;
+    }
+    .color3 {
+      border-left: 6px solid #9D73D9;
+    }
+    .color4 {
+      border-left: 6px solid #435289;
+    }
+
+    .readMore {
+      height: 100px;
+      line-height: 100px;
+      text-align: center;
+      color: #3F8DF5;
+    }
+  }
+
+  
+
 }
 </style>