bannner；排班优化

src/views/platform/bpmn/my-schedule/index.vue

@@ -25,16 +25,17 @@
     </van-tabs>
     <van-calendar
       :key="showChange"
+      ref="calendar"
       :show-subtitle="false"
       :poppable="false"
       :show-confirm="false"
-      :default-date="null"
+
       :style="{ height: '50%',width: '96%', margin: '2% auto', borderRadius: '10px'}"
       :min-date="minDate"
       :max-date="maxDate"
       :formatter="formatter"
       color="#1989fa"
-      row-height="65"
+      row-height="7vh"
       @select="optFor"
     >
       <template #title>
@@ -45,7 +46,7 @@
         </div>
       </template>
     </van-calendar>
-    <div v-show="showInfo&&infoDataArr.length>0" class="infoMessage">
+    <div v-show="showInfo&&active==='日程'&&infoDataArr.length>0" class="infoMessage">
       <van-collapse v-model="collapseSelect">
         <van-collapse-item v-for="(item, i) in infoDataArr" :key="item.id" :name="i">
           <template #title>
@@ -58,17 +59,26 @@
             </div>
             <div class="collapseContent">内容：{{item.content}}</div>
           </template>
-          <div class="contentArea">
+          <!-- <div class="contentArea">
             <div class="caLeft">标题：</div>
             <div class="caRight">{{item.title}}</div>
-          </div>
+          </div> -->
           <div class="contentArea">
-            <div class="caLeft">内容：</div>
+            <!-- <div class="caLeft">内容：</div> -->
             <div class="caRight">{{item.content}}</div>
           </div>
         </van-collapse-item>
       </van-collapse>
     </div>
+    <div v-show="showInfo&&unfoldInfo!=''&&active==='排班'" class="unfoldMessage">
+      <div class="line">
+        <!-- <div class="iconLine"><van-icon name="label" /></div> -->
+        <van-icon class="iconLine" name="label" color="rgb(25, 137, 250)" size="125%" />
+        <div class="contentLine">
+          {{unfoldInfo.replace(new RegExp(',', 'g'), '，')}}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -86,6 +96,7 @@ export default {
       configArr: [],
       showDateArr: {},
       infoDataArr: [],
+      unfoldInfo: '',
       stateObj: {
         1: '急',
         2: '重',
@@ -96,7 +107,8 @@ export default {
       monthIndex: 0,
       showChange: 0,
       showInfo: false,
-      collapseSelect: []
+      collapseSelect: [],
+      calenderVal: ''
     }
   },
   watch: {
@@ -112,6 +124,14 @@ export default {
       deep: true,
       immediate: true
     }
+    // calenderVal: {
+    //   handler(newVal) {
+    //     this.optFor(newVal)
+    //   },
+    //   deep: true
+    //   // immediate: true
+    // }
+
   },
   created() {
   },
@@ -162,7 +182,7 @@ export default {
                 if (objArr.hasOwnProperty(t)) {
                   // const strArr = objArr[t].name.split(',')
                   // if (strArr.findIndex(e => e === (item['d' + (n + 1) + '_'] ? item['d' + (n + 1) + '_'] : '')) === -1) {
-                  objArr[t].name = objArr[t].name + ',' + (item['d' + (n + 1) + '_'] ? item['d' + (n + 1) + '_'] : '')
+                  objArr[t].name = objArr[t].name + (item['d' + (n + 1) + '_'] !== '' && objArr[t].name !== '' ? ',' : '') + (item['d' + (n + 1) + '_'] ? item['d' + (n + 1) + '_'] : '')
                   // }
 
                   // console.log(1, objArr[t].name, item['d' + (n + 1) + '_'], objArr[t].name + ',' + item['d' + (n + 1) + '_'] ? item['d' + (n + 1) + '_'] : '')
@@ -181,8 +201,9 @@ export default {
     //
     optFor(val) {
       const selectDate = this.$common.getFormatDate('string', 10, val)
-      if (this.active === '日程' && this.showDateArr[selectDate] !== '') {
-        this.infoDataArr = this.showDateArr[selectDate].dataArr
+      if ((this.active === '日程' || this.active === '排班') && this.showDateArr[selectDate] !== '') {
+        this.infoDataArr = this.showDateArr[selectDate] ? this.showDateArr[selectDate].dataArr || {} : {}
+        this.unfoldInfo = this.showDateArr[selectDate] ? this.showDateArr[selectDate].name || '' : ''
         this.showInfo = true
       } else {
         this.showInfo = false
@@ -220,19 +241,19 @@ export default {
     // 日历备注赋值
     formatter(day) {
       const formatterDate = this.$common.getFormatDate('string', 10, day.date)
-      const year = day.date.getFullYear()
-      const month = day.date.getMonth() + 1
-      const date = day.date.getDate()
-      if (year === this.yearMonth.nowYear && month === this.yearMonth.nowMonth && date === this.yearMonth.nowDay) {
-        day.className = 'circle'
-        day.topInfo = ' '
-      }
+      // const formatterDateYM = this.$common.getFormatDate('string', 7, day.date)
+      // const year = day.date.getFullYear()
+      // const month = day.date.getMonth() + 1
+      // const date = day.date.getDate()
+      // if (year === this.yearMonth.nowYear && month === this.yearMonth.nowMonth && date === this.yearMonth.nowDay) {
+      //   day.className = 'circle'
+      //   day.topInfo = ' '
+      // }
       if (this.active === '排班') {
         day.bottomInfo = Object.keys(this.showDateArr).length <= 0 ? '' : this.showDateArr[formatterDate] !== '' && this.showDateArr.hasOwnProperty(formatterDate) ? this.showDateArr[formatterDate].name ? this.showDateArr[formatterDate].name : '' : ''
       } else {
         day.bottomInfo = Object.keys(this.showDateArr).length <= 0 ? '' : this.showDateArr[formatterDate] !== '' && this.showDateArr.hasOwnProperty(formatterDate) ? this.showDateArr[formatterDate].num ? this.showDateArr[formatterDate].num + '项' : '' : ''
       }
-
       return day
     },
 
@@ -248,6 +269,12 @@ export default {
         }
       })
       this.showDateArr = data
+      // this.$refs.calendar.reset()
+      if (this.$common.getFormatDate('string', 7, this.yearMonth.nowDate) === this.$common.getFormatDate('string', 7, this.yearMonth.date)) {
+        this.optFor(this.yearMonth.nowDate)
+      } else {
+        this.optFor(this.yearMonth.date)
+      }
     },
 
     // 月份更改
@@ -266,11 +293,13 @@ export default {
     // 获取年月
     getYearMonth(val) {
       const date = new Date()
+      const nowDate = this.$common.getFormatDate('string', 10, date)
       const nowYear = date.getFullYear()
       const nowMonth = date.getMonth() + 1
       const nowDay = date.getDate()
       date.setMonth(date.getMonth() + val)
-      return { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate(), nowYear: nowYear, nowMonth: nowMonth, nowDay: nowDay }
+      const checkDate = val < 0 ? new Date(date.getFullYear(), date.getMonth() + 1, 0) : val > 0 ? new Date(date.getFullYear(), date.getMonth(), 1) : date
+      return { date: this.$common.getFormatDate('string', 10, checkDate), year: date.getFullYear(), month: date.getMonth() + 1, day: checkDate.getDate(), nowYear: nowYear, nowMonth: nowMonth, nowDay: nowDay, nowDate: nowDate }
     },
 
     // 根据起止日期输出范围内所有日期
@@ -314,6 +343,34 @@ export default {
       margin: 0 15%;
     }
   }
+  .unfoldMessage {
+    height:30%;
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 6px;
+    overflow-y: scroll;
+    .line{
+      position: relative;
+      // display: flex;
+      border-radius: 10px;
+      width: 98%;
+      padding: 1%;
+      background-color: #fff;
+      .iconLine{
+        position: absolute;
+        left: 1%;
+        top: 0;
+      }
+      .contentLine{
+        width: 88%;
+        overflow-wrap: anywhere;
+        text-align: left;
+        margin-left: 8%;
+        font-size: 75%;
+        font-weight: bold;
+      }
+    }
+  }
   .infoMessage {
     // background-color: #ecf5ff;
     // color: #1989fa;
@@ -323,14 +380,21 @@ export default {
     margin: 0 auto;
     border-radius: 6px;
     overflow-y: scroll;
+    // ::v-deep .van-cell.van-cell--clickable.van-collapse-item__title{
+    //   border-radius: 10px 10px 0 0 ;
+    // }
     .contentArea{
+      border-radius: 10px;
       display: flex;
       font-size: 90%;
       .caLeft{
         width: 12%;
       }
       .caRight{
-        width: 88%;
+        // width: 88%;
+        overflow-wrap: anywhere;
+        white-space: pre-wrap;
+        width: 100%;
       }
     }
     ::v-deep .van-cell__title{
@@ -384,7 +448,7 @@ export default {
     }
 
   }
-  .infoMessage::-webkit-scrollbar{
+  .unfoldMessage::-webkit-scrollbar, .infoMessage::-webkit-scrollbar{
     width: 0;
   }
   ::v-deep .van-nav-bar{
@@ -403,7 +467,9 @@ export default {
   ::v-deep .van-calendar__header-title {
     height: 65%;
   }
-
+  ::v-deep .van-calendar__day{
+    min-height: 53px;
+  }
   ::v-deep .van-calendar__day .van-calendar__bottom-info{
     @extend .omit;
     background-color: #ecf5ff;
@@ -414,7 +480,7 @@ export default {
     bottom: 3%;
     transform: translateX(-50%);
     width: 85%;
-    padding: 4% 0;
+    padding: 2% 0;
     border: 1px solid #b3d8ff;
   }
   ::v-deep .van-calendar__day .van-calendar__selected-day{
@@ -422,7 +488,7 @@ export default {
   }
   ::v-deep .van-calendar__day .van-calendar__selected-day .van-calendar__bottom-info{
     @extend .omit;
-    background-color: #1989fa;
+    background-color: transparent;
     color: #fff;
     border-radius: 6px;
     position: absolute;
@@ -430,7 +496,7 @@ export default {
     bottom: 3%;
     transform: translateX(-50%);
     // width: inherit;
-    padding: 4% 0;
+    padding: 2% 0;
     border: none;
   }
   ::v-deep .colorY .van-calendar__bottom-info{

src/views/system/dashboard/index.vue

@@ -8,7 +8,7 @@
     <!--幻灯片-->
     <div class="dashboard-swipe ">
       <img
-        v-lazy="swipes[2].image || blankImage"
+        v-lazy="swipes[3].image || blankImage"
         style="width:100%;height:170px"
       />
       <!-- <van-swipe :autoplay="11000">
@@ -244,7 +244,8 @@ export default {
       this.swipes = [
         { image: './images/swipes/banner1.png' },
         { image: './images/swipes/banner2.png' },
-        { image: './images/swipes/banner3.png' }
+        { image: './images/swipes/banner3.png' },
+        { image: './images/swipes/banner5.png' }
       ]
       if (
         this.userInfo.employee.jiNengZhiCheng !== 'inside' &&