From 0cec1b0a2088321cd64e639ccef27fc1254a06bc Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Wed, 13 Jul 2022 16:06:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A3=E5=8F=91=E6=97=A5=E5=8E=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppAnnounceStatistics.vue                 | 387 +++++++++++++++++-
 1 file changed, 381 insertions(+), 6 deletions(-)

diff --git a/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue b/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue
index 41e18ae9..2db676b4 100644
--- a/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue
+++ b/project/sass/apps/Announce/AppAnnounceStatistics/AppAnnounceStatistics.vue
@@ -1,7 +1,118 @@
 <template>
-  <div class="AppAnnounceStatistics">
-
-  </div>
+  <ai-list class="AppAnnounceStatistics">
+    <template slot="content">
+      <div class="statistics-content">
+        <ai-title title="宣发日历"></ai-title>
+        <div class="flex-content">
+          <div class="flex-left">
+            <el-calendar  v-model="value">
+              <template 
+                slot="dateCell"
+                slot-scope="{date, data}" >
+                <!-- <p :class="data.isSelected ? 'is-selected' : ''">
+                  {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+                </p> -->
+                <div class="flex-date">
+                  <span>{{data.day.substring(8, 10)}}</span>
+                  <span class="tips" v-if="data.day.substring(5, 7) == month && dateList[data.day.substring(8, 10)] && dateList[data.day.substring(8, 10)].length">{{dateList[data.day.substring(8, 10)].length}}</span>
+                </div>
+              </template>
+            </el-calendar>
+          </div>
+          <div class="flex-right">
+            <div class="title">7月19日宣发内容</div>
+            <div class="list-content">
+              <el-timeline>
+                <el-timeline-item placement="top">
+                  <el-card>
+                    <div class="flex-between">
+                      <p class="item-title">晴风小区志愿者活动</p>
+                      <span class="item-time">10:00</span>
+                    </div>
+                    <div class="item-info item-created">创建人：<span class="name">张三</span></div>
+                    <div class="item-info">创建部门：<span>市委/宣传部/一组</span></div>
+                    <div class="flex-between">
+                      <div class="item-info">群发类型：<span>群发到居民群</span></div>
+                      <span class="item-btn">详情</span>
+                    </div>
+                  </el-card>
+                </el-timeline-item>
+                <el-timeline-item placement="top">
+                  <el-card>
+                    <div class="flex-between">
+                      <p class="item-title">晴风小区志愿者活动</p>
+                      <span class="item-time">10:00</span>
+                    </div>
+                    <div class="item-info item-created">创建人：<span class="name">张三</span></div>
+                    <div class="item-info">创建部门：<span>市委/宣传部/一组</span></div>
+                    <div class="flex-between">
+                      <div class="item-info">群发类型：<span>群发到居民群</span></div>
+                      <span class="item-btn">详情</span>
+                    </div>
+                  </el-card>
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="statistics-content">
+        <div class="flex-between mar-b16">
+          <ai-title title="宣发效果"></ai-title>
+          <div class="right-search">
+            <div class="time-select active">近7天</div>
+            <div class="time-select">近30天</div>
+            <div class="time-select">近1年</div>
+            <div class="time-select">自定义</div>
+            <ai-select size="medium" clearable placeholder="宣发部门" v-model="type" :selectList="dict.getDict('yesOrNo')"/>
+          </div>
+        </div>
+        <div class="line-content">
+          <div class="flex1">
+            <div class="header">
+              <p>累计创建宣发任务数</p>
+              <h2>3,324</h2>
+            </div>
+            <div class="chart-content">
+              <div class="chart-title">宣发任务数</div>
+              <div></div>
+            </div>
+          </div>
+          <div class="flex1">
+            <div class="header">
+              <p>累计执行宣发次数</p>
+              <h2>3,324</h2>
+            </div>
+            <div class="chart-content">
+              <div class="chart-title">宣发次数</div>
+              <div></div>
+            </div>
+          </div>
+          <div class="flex1 mar-r0">
+            <div class="header">
+              <p>累计触达人次</p>
+              <h2>3,324</h2>
+            </div>
+            <div class="chart-content">
+              <div class="chart-title">触达人次</div>
+              <div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="statistics-content">
+        <div class="flex-between mar-b16">
+          <ai-title title="宣发明细"></ai-title>
+          <div class="right-search">
+            <div class="time-select active">近7天</div>
+            <div class="time-select">近30天</div>
+            <div class="time-select">近1年</div>
+            <div class="time-select mar-r0">自定义</div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </ai-list>
 </template>
 
 <script>
@@ -9,15 +120,52 @@
     name: 'AppAnnounceStatistics',
 
     label: '协同宣发统计',
-
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function
+    },
     data () {
       return {
-
+        value: new Date(),
+        dateList: {
+          '01': {
+            length: 3
+          },
+          '02': {
+            length: 0
+          },
+        },
+        month: 7,
+        day: '',
+        type: ''
       }
     },
+    watch: {
+      value: function() {
+        var year = this.value.getFullYear();
+        var month = this.value.getMonth() + 1;
+        var date=this.value.getDate()
+        if (date >= 1 && date <= 9) {//日如果小于10就补个0
+          date = "0" + date;
+        }
+        if (month >= 1 && month <= 9) {//月如果小于10就补个0
+          month = "0" + month;
+        }
+        console.log(year + '-' + month + '-' + date) // 打印出日历选中了哪年哪月
+        this.getCalendarList()   //  调用接口，把拼接好的参数传到后台
+      }
+    },
+    created() {
+      this.dict.load("yesOrNo")
+    },
+    mounted() {
 
+    },
     methods: {
-
+      getCalendarList(){
+        console.log('接口调用成功');
+      }
     }
   }
 </script>
@@ -25,5 +173,232 @@
 <style lang="scss" scoped>
   .AppAnnounceStatistics {
     height: 100%;
+    .flex-between{
+      display: flex;
+      justify-content: space-between;
+    }
+    .mar-b16{
+      margin-bottom: 16px;
+    }
+    .mar-r0{
+      margin-right: 0!important;
+    }
+    .statistics-content{
+      padding: 0 24px 24px;
+      background-color: #fff;
+      box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
+      border-radius: 4px;
+      margin-bottom: 20px;
+      .flex-content{
+        width: 100%;
+        display: flex;
+        margin-top: 16px;
+        .flex-left{
+          width: 50%;
+          .flex-date{
+            display: flex;
+            justify-content: space-between;
+          }
+          .tips{
+            display: inline-block;
+            padding: 0 4px;
+            height: 16px;
+            line-height: 16px;
+            border-radius: 8px;
+            background: #2891FF;
+            font-size: 12px;
+            font-family: ArialMT;
+            color: #FFF;
+            margin-top: 8px;
+          }
+        }
+        .flex-right{
+          width: 50%;
+          margin-left: 16px;
+          border: 1px solid #eee;
+          .title{
+            line-height: 56px;
+            border-bottom: 1px solid #EEE;
+            padding-left: 16px;
+            font-size: 16px;
+            font-family: MicrosoftYaHeiSemibold;
+            color: #333;
+          }
+          .list-content{
+            padding: 16px;
+            height: 339px;
+            box-sizing: border-box;
+            overflow-y: scroll;
+            background-color: #F9F9F9;
+            .item-title{
+              width: calc(100% - 100px);
+              word-break: break-all;
+              margin-bottom: 8px;
+              font-size: 16px;
+              font-family: MicrosoftYaHeiSemibold;
+              color: #222;
+              line-height: 24px;
+            }
+            .item-time{
+              width: 100px;
+              text-align: right;
+              font-size: 16px;
+              font-family: ArialMT;
+              color: #888;
+              line-height: 24px;
+            }
+            .item-info{
+              display: inline-block;
+              font-size: 14px;
+              font-family: MicrosoftYaHei;
+              color: #888;
+              line-height: 22px;
+              span{
+                color: #222;
+              }
+            }
+            .item-created{
+              width: 152px;
+              margin-bottom: 4px;
+            }
+            .item-btn{
+              color: #26f;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+      .right-search{
+        margin-top: 10px;
+        div{
+          display: inline-block;
+        }
+        .time-select{
+          font-size: 14px;
+          font-family: MicrosoftYaHei;
+          color: #222;
+          line-height: 22px;
+          padding: 6px 12px;
+          border-radius: 2px;
+          border: 1px solid #D0D4DC;
+          margin-right: 8px;
+          box-sizing: border-box;
+        }
+        .active{
+          border: 1px solid #26f;
+          color: #26f;
+        }
+      }
+      .line-content{
+        display: flex;
+        .flex1{
+          flex: 1;
+          margin-right: 16px;
+          .header{
+            padding: 16px;
+            width: 100%;
+            height: 90px;
+            background: #F9F9F9;
+            border-radius: 2px;
+            box-sizing: border-box;
+            margin-bottom: 16px;
+            p{
+              font-size: 14px;
+              font-family: MicrosoftYaHeiSemibold;
+              color: #222;
+              line-height: 22px;
+              margin-bottom: 4px;
+            }
+            h2{
+              font-size: 24px;
+              font-family: DINAlternate-Bold, DINAlternate;
+              font-weight: bold;
+              color: #26F;
+              line-height: 32px;
+            }
+          }
+          .chart-content{
+            width: 100%;
+            padding: 16px;
+            background: #F9F9F9;
+            border-radius: 2px;
+            box-sizing: border-box;
+            .chart-title{
+              font-size: 16px;
+              font-family: MicrosoftYaHeiSemibold;
+              color: #333;
+              line-height: 24px;
+            }
+          }
+        }
+        
+      }
+    }
+    
+
+    ::v-deep .el-calendar-table:not(.is-range) td.next, 
+    ::v-deep .el-calendar-table:not(.is-range) td.prev {
+      color: #ccc;
+    }
+    ::v-deep .el-calendar-table .el-calendar-day{
+      height: 48px;
+      line-height: 32px;
+      padding-left: 12px;
+      font-size: 14px;
+      font-family: ArialMT;
+    }
+    .el-calendar-table:not(.is-range) td .current{
+      color: #888;
+    }
+    ::v-deep .el-calendar__header{
+      border: 1px solid #eee;
+    }
+    ::v-deep .el-calendar__body{
+      padding: 0;
+    }
+    ::v-deep .el-calendar-table thead th:nth-of-type(1){
+      border-left: 1px solid #eee;
+    }
+    ::v-deep .el-calendar-table thead th:nth-of-type(7){
+      border-right: 1px solid #eee;
+    }
+    ::v-deep .el-calendar-table tr td:first-child {
+      border-left: 1px solid #eee;
+    }
+    ::v-deep .el-calendar-table tr:first-child td {
+      border-top: 1px solid #eee;
+    }
+    ::v-deep .el-calendar-table td {
+      border-bottom: 1px solid #eee;
+      border-right: 1px solid #eee;
+    }
+    ::v-deep .el-timeline-item__timestamp.is-top{
+      margin-bottom: 0; 
+      padding-top: 0;
+    }
+    ::v-deep .el-timeline-item__node{
+      background-color: #26F;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      left: 1px;
+    }
+    ::v-deep .el-card{
+      border: none;
+    }
+    ::v-deep .el-card__body{
+      padding: 8px;
+    }
+  }
+
+  ::v-deep .ai-list__content {
+    padding: 0!important;
+
+    .ai-list__content--right-wrapper {
+      background: transparent!important;
+      box-shadow: none!important;
+      margin: 0!important;
+      padding: 0 0 0!important;
+    }
   }
 </style>