酒店统计修改

src/components/Hotel/HotelSalesBoard.vue

 <style>
   /* 日期样式开始 */
-.hotelSalesBoard .month ul {
-  border-radius: 4px 4px 0 0;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #e95252;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-}
-.hotelSalesBoard .year-month {
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-}
-.hotelSalesBoard .year-month > input {
-  width: 100px;
-  float: left;
-}
-.hotelSalesBoard .arrow {
-  padding: 10px;
-  font-style: normal;
-  cursor: pointer;
-}
-.hotelSalesBoard .monthminus {
-  position: absolute;
-  left: 0px;
-  top: 15px;
-}
-.hotelSalesBoard .monthadd {
-  position: absolute;
-  right: 21px;
-  top: 15px;
-}
-.hotelSalesBoard .month ul li {
-  font-size: 18px;
-  color: #fff;
-  position: relative;
-  display: inline-block;
-  letter-spacing: 3px;
-}
-.hotelSalesBoard .month ul li i {
-  font-size: 22px;
-  color: #ff7e7e;
-  cursor: pointer;
-}
-.hotelSalesBoard .month ul li > input {
-  text-align: center;
-}
-.hotelSalesBoard .weekdays {
-  margin: 0;
-  padding: 3px 0;
-  background-color: #3fa783;
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  color: #fff;
-  justify-content: space-around;
-}
-.hotelSalesBoard .weekdays li {
-  display: inline-block;
-  width: 14.2857%;
-  text-align: center;
-}
- 
-.hotelSalesBoard .days {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  border-left: 1px solid #dddddd;
-  flex-wrap: wrap;
-  box-sizing: border-box;
-  justify-content: space-around;
-}
-.hotelSalesBoard .days > li {
-  list-style-type: none;
-  width: 14.2857%;
-  height: 140px;
-  text-align: center;
-  position: relative;
-  font-size: 12px;
-  float: left;
-  color: #000;
-  box-sizing: border-box;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-}
-.hotelSalesBoard .days li > div {
-  height: 112px;
-  width: 100%;
-  overflow-y: auto;
-  text-align: left;
-}
-.hotelSalesBoard .days li > div > p {
-  border-bottom: 1px dashed #ccc;
-  min-height: 28px;
-  line-height: 28px;
-  width: 100%;
-  text-indent: 10px;
-}
- 
-.hotelSalesBoard .currentInput {
-  width: 120px;
-  height: 30px;
-  border-radius: 17px;
-  outline: none;
-  border: none;
-  color: #fff;
-  background: transparent;
-  font-size: 18px;
-}
-.hotelSalesBoard .days li .other-month {
-  display: inline-block;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 24px;
-  height: 17px;
-  font-size: 12px;
-  line-height: 17px;
-  background-color: #cccccc;
-  color: #fff;
-}
+  .hotelSalesBoard .month ul {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    background: #e95252;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
 
-.hotelSalesBoard .ckStyle {
-  width: 100%;
-  height: 28px;
-  line-height: 28px;
-  text-align: center;
-  font-size: 14px;
-  font-weight: bold;
-  background: #ccc;
-  color: #000;
-}
+  .hotelSalesBoard .year-month {
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+  }
 
-.hotelSalesBoard .ckStyleOther {
-  background: #dddddd !important;
-  font-weight: normal !important;
-  color: #999;
-}
+  .hotelSalesBoard .year-month>input {
+    width: 100px;
+    float: left;
+  }
 
-.hotelSalesBoard .Owe_Room {
-  color: #e95252;
-}
-.hotelSalesBoard .Used_room {
-  color: #13b0ae;
-}
-.hotelSalesBoard .otherMoth {
-  background: #f2f2f2;
-}
+  .hotelSalesBoard .arrow {
+    padding: 10px;
+    font-style: normal;
+    cursor: pointer;
+  }
+
+  .hotelSalesBoard .monthminus {
+    position: absolute;
+    left: 0px;
+    top: 15px;
+  }
+
+  .hotelSalesBoard .monthadd {
+    position: absolute;
+    right: 21px;
+    top: 15px;
+  }
+
+  .hotelSalesBoard .month ul li {
+    font-size: 18px;
+    color: #fff;
+    position: relative;
+    display: inline-block;
+    letter-spacing: 3px;
+  }
+
+  .hotelSalesBoard .month ul li i {
+    font-size: 22px;
+    color: #ff7e7e;
+    cursor: pointer;
+  }
+
+  .hotelSalesBoard .month ul li>input {
+    text-align: center;
+  }
+
+  .hotelSalesBoard .weekdays {
+    margin: 0;
+    padding: 3px 0;
+    background-color: #3fa783;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    color: #fff;
+    justify-content: space-around;
+  }
+
+  .hotelSalesBoard .weekdays li {
+    display: inline-block;
+    width: 14.2857%;
+    text-align: center;
+  }
+
+  .hotelSalesBoard .days {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    border-left: 1px solid #dddddd;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+    justify-content: space-around;
+  }
+
+  .hotelSalesBoard .days>li {
+    list-style-type: none;
+    width: 14.2857%;
+    height: 140px;
+    text-align: center;
+    position: relative;
+    font-size: 12px;
+    float: left;
+    color: #000;
+    box-sizing: border-box;
+    border-right: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .hotelSalesBoard .days li>div {
+    height: 112px;
+    width: 100%;
+    overflow-y: auto;
+    text-align: left;
+  }
+
+  .hotelSalesBoard .days li>div>p {
+    border-bottom: 1px dashed #ccc;
+    min-height: 28px;
+    line-height: 28px;
+    width: 100%;
+    text-indent: 10px;
+  }
+
+  .hotelSalesBoard .currentInput {
+    width: 120px;
+    height: 30px;
+    border-radius: 17px;
+    outline: none;
+    border: none;
+    color: #fff;
+    background: transparent;
+    font-size: 18px;
+  }
+
+  .hotelSalesBoard .days li .other-month {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    height: 17px;
+    font-size: 12px;
+    line-height: 17px;
+    background-color: #cccccc;
+    color: #fff;
+  }
+
+  .hotelSalesBoard .ckStyle {
+    width: 100%;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    background: #ccc;
+    color: #000;
+  }
+
+  .hotelSalesBoard .ckStyleOther {
+    background: #dddddd !important;
+    font-weight: normal !important;
+    color: #999;
+  }
+
+  .hotelSalesBoard .Owe_Room {
+    color: #e95252;
+  }
+
+  .hotelSalesBoard .Used_room {
+    color: #13b0ae;
+  }
+
+  .hotelSalesBoard .otherMoth {
+    background: #f2f2f2;
+  }
+
+  .hotelSalesBoard .title {
+    height: 14px;
+    line-height: 14px;
+    border-left: 3px solid #e95252;
+    font-size: 16px;
+    color: #333;
+    text-indent: 10px;
+    margin: 20px 0;
+  }
+
+  .hotelSalesBoard .hasStock_1 {
+    color: #FFFFFF;
+    background-color: #ff3737;
+  }
+
+  .hotelSalesBoard .hasStock_2 {
+    background-color: #ff99cc;
+  }
+
+  .hotelSalesBoard .hasStock_3 {
+    background-color: #bcd6ee;
+  }
+
+  .hotelSalesBoard .hasStock_4 {
+    background-color: #ffffff;
+  }
+
+  /* 日期样式结束*/
 
-.hotelSalesBoard .title {
-  height: 14px;
-  line-height: 14px;
-  border-left: 3px solid #e95252;
-  font-size: 16px;
-  color: #333;
-  text-indent: 10px;
-  margin: 20px 0;
-}
-   .hotelSalesBoard .hasStock_1 {
-        color: #FFFFFF;
-        background-color: #ff3737;
-    }
-    .hotelSalesBoard .hasStock_2  {
-        background-color: #ff99cc;
-    }
-    .hotelSalesBoard .hasStock_3 {
-        background-color: #bcd6ee;
-    }
-    .hotelSalesBoard .hasStock_4 {
-        background-color: #ffffff;
-    }
-/* 日期样式结束*/
 </style>
 <template>
   <div class="flexOne hotelSalesBoard">
@@ -197,17 +219,24 @@
       酒店统计 共
       <span class="Owe_Room">{{TotalInventory}}</span> 间, 使用
       <span class="Owe_Room">{{UseInventory}}</span>间
+      &nbsp;&nbsp;
+      <span class="hasStock_1" >红日</span> 
+      <span class="hasStock_2" >旺季</span> 
+      <span class="hasStock_3" >平季</span> 
+      <span class="hasStock_4" >淡季</span> 
     </div>
     <div class="month">
       <ul>
         <li>
           <i class="el-icon-caret-left monthminus" @click="currentYear-=1,getDateString(),initCalendar(dateString)"></i>
-          <input type="text" disabled="disabled" v-model="currentYear" class="currentInput" @input="getDateString(),initCalendar(dateString)">年
+          <input type="text" disabled="disabled" v-model="currentYear" class="currentInput"
+            @input="getDateString(),initCalendar(dateString)">年
           <i class="el-icon-caret-right monthadd" @click="currentYear+=1,getDateString(),initCalendar(dateString)"></i>
         </li>
         <li>
           <i class="el-icon-caret-left monthminus" @click="pickPre(currentYear,currentMonth)"></i>
-          <input type="text" disabled="disabled" v-model="currentMonth" class="currentInput" @input="getDateString(),initCalendar(dateString)">月
+          <input type="text" disabled="disabled" v-model="currentMonth" class="currentInput"
+            @input="getDateString(),initCalendar(dateString)">月
           <i class="el-icon-caret-right monthadd" @click="pickNext(currentYear,currentMonth)"></i>
         </li>
       </ul>
@@ -224,10 +253,14 @@
     </ul>
     <ul class="days clearfix" v-loading="msg.loading">
       <li v-for="(dayItem,index) in days" :key="dayItem.index">
-        <p class="ckStyle" :class="{ckStyleOther:dayItem.day.getMonth()+1 != currentMonth}">{{dayItem.day.getDate()}}</p>
-        <div v-if="dayItem.dayValue" @click="goUrl('TicketManager',dayItem,'票务管理')">
-          <p style="word-break:breakall;" :class="stockColor(subItem.InventoryType)" v-for="subItem in dayItem.dayValue">{{subItem.HotelName}}
-            (总: {{subItem.Inventory}} 已用:{{subItem.UseInventory}})
+        <p class="ckStyle" :class="{ckStyleOther:dayItem.day.getMonth()+1 != currentMonth}">{{dayItem.day.getDate()}}
+        </p>
+        <div v-if="dayItem.dayValue" >
+          <p style="word-break:breakall;" :class="stockColor(subItem.InventoryType)"
+            v-for="subItem in dayItem.dayValue">{{subItem.HotelName}}
+            (总: {{subItem.Inventory}} 
+            <a v-if="subItem.UseInventory>0" @click="goUrl('TicketManager',dayItem,'票务管理')">已用:{{subItem.UseInventory}})</a>
+            <span v-else>已用:{{subItem.UseInventory}})</span>
           </p>
         </div>
       </li>
@@ -264,13 +297,19 @@
     },
     methods: {
       stockColor: function (type) {
+        //红日
         if (type === 1) {
           return 'hasStock_1'
-        } else if (type === 2) {
+        }
+        //旺季
+         else if (type === 2) {
           return 'hasStock_2'
-        } else if (type === 3) {
+        }
+        //平季
+         else if (type === 3) {
           return 'hasStock_3'
-        } else if (type === 4) {
+        }//淡季 
+        else if (type === 4) {
           return 'hasStock_4'
         }